:root {
  /* Tema escuro com a paleta rosa da JACITEC (XV · Ciência Delas, #d11255). */
  --bg: #0f0a12;
  --panel: #1a1020;
  --panel-soft: #241528;
  --primary: #ff5f9e;
  --accent: #ff9ec3;
  --brand: #d11255;
  --danger: #ff6b6b;
  --warning: #ffd166;
  --success: #7ce38b;
  --text: #fdeef4;
  --muted: #c9a7b8;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

.landing-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 34px 0; }
.landing-info-card { padding: 24px; border: 1px solid var(--landing-line, rgba(255,255,255,.12)); border-radius: 14px; background: rgba(255,255,255,.035); }
.landing-info-card h2 { margin: 9px 0; font-size: 1.3rem; }
.landing-info-card p, .landing-info-card li { color: var(--muted); line-height: 1.65; font-size: .85rem; }
.landing-info-card ul { padding-left: 18px; }
.create-event-panel select { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #d8e0da; border-radius: 7px; background: #fff; color: #243641; font: inherit; font-size: .72rem; }
.challenge-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.challenge-counts label { display: grid; gap: 5px; font-size: .64rem; }
.challenge-counts input { min-width: 0; min-height: 39px; padding: 7px; color: #243641; background: #fff; border-color: #d8e0da; border-radius: 7px; }
.count-invalid { color: #b23a3a !important; font-weight: 700; }

.landing-rules-section { margin: 34px 0; padding: 26px; border: 1px solid var(--landing-line, rgba(255,255,255,.12)); border-radius: 14px; background: rgba(255,255,255,.035); }
.landing-rules-section h2 { margin: 9px 0 16px; font-size: 1.3rem; }
.rule-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rule-list li { display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 12px; padding: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; }
.rule-list p { margin: 0; color: var(--muted); line-height: 1.55; font-size: .82rem; }
.rule-badge { display: grid; place-items: center; width: 26px; height: 26px; color: var(--primary); background: rgba(255, 95, 158, 0.12); border: 1px solid rgba(255, 95, 158, 0.28); border-radius: 8px; font-size: 0.66rem; font-weight: 800; }
.rules-full-link, .rules-nav-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-size: .78rem; font-weight: 750; text-decoration: none; }
.rules-full-link { margin-top: 18px; }
.rules-full-link:hover, .rules-nav-link:hover { color: var(--accent); }
.rules-page { min-height: 100vh; padding: 0 7.5% 42px; background: radial-gradient(ellipse at 50% 0, rgba(209,18,85,.12), transparent 50%); }
.rules-page .landing-nav { max-width: 1120px; margin: 0 auto; }
.rules-hero { max-width: 850px; margin: 0 auto; padding: 66px 0 34px; }
.rules-hero h1 { margin: 13px 0; font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.055em; line-height: .98; }
.rules-hero h1 em { color: var(--primary); font-style: normal; }
.rules-hero > p:last-child { max-width: 620px; color: var(--muted); font-size: .98rem; line-height: 1.7; }
.rules-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 850px; margin: 0 auto; }
.rules-card, .rules-edition-note { padding: 23px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.035); }
.rules-card h2 { margin: 9px 0 12px; font-size: 1.05rem; }
.rules-card p, .rules-card li, .rules-edition-note p { color: var(--muted); font-size: .82rem; line-height: 1.7; }
.rules-card p, .rules-edition-note p { margin: 0; }
.rules-card ul { display: grid; gap: 8px; margin: 0; padding-left: 19px; }
.rules-card li::marker { color: var(--primary); }
.rules-edition-note { grid-column: 1 / -1; border-color: rgba(255,95,158,.2); background: rgba(255,95,158,.055); }
.rules-edition-note strong { display: block; margin-bottom: 7px; font-size: .88rem; }
.rules-footer { display: flex; justify-content: space-between; max-width: 850px; margin: 24px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.rules-footer a { color: var(--muted); font-size: .76rem; text-decoration: none; }
.rules-footer a:hover { color: var(--primary); }

@media (max-width: 900px) { .rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rule-list { grid-template-columns: 1fr; } }

.landing-scoring-card { grid-column: 1 / -1; }
.scoring-highlight { color: var(--primary); }
.scoring-bar { display: flex; overflow: hidden; margin: 18px 0 8px; border-radius: 999px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; }
.scoring-bar-segment { display: flex; align-items: center; justify-content: center; padding: 10px 4px; color: #08131d; white-space: nowrap; }
.scoring-bar-segment.easy { background: var(--success); }
.scoring-bar-segment.medium { background: var(--warning); }
.scoring-bar-segment.hard { background: var(--danger); color: #2a0c0c; }
.scoring-bar-caption { margin: 0 0 18px; font-size: 0.72rem; opacity: 0.85; }
.scoring-rules-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.scoring-rule-tile { padding: 13px 12px; text-align: center; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px; }
.scoring-rule-tile strong { display: block; color: var(--text); font-size: 0.95rem; }
.scoring-rule-tile span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.66rem; line-height: 1.4; }
.scoring-eye-note { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; background: rgba(255, 95, 158, 0.06); border: 1px solid rgba(255, 95, 158, 0.18); border-radius: 10px; font-size: 0.78rem; }
.scoring-eye-sample { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; color: var(--primary); background: rgba(255, 95, 158, 0.14); border: 1px solid rgba(255, 95, 158, 0.3); border-radius: 7px; }

@media (max-width: 680px) {
  .landing-info-grid { grid-template-columns: 1fr; }
  .landing-footer { gap: 10px; flex-wrap: wrap; }
  .scoring-rules-grid { grid-template-columns: 1fr; }
  .scoring-bar-segment { font-size: 0.54rem; }
  .rules-page { padding-right: 17px; padding-left: 17px; }
  .rules-page .landing-nav nav { display: none; }
  .rules-hero { padding-top: 48px; }
  .rules-content { grid-template-columns: 1fr; }
  .rules-edition-note { grid-column: auto; }
  .rules-footer { gap: 14px; flex-wrap: wrap; }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: radial-gradient(circle at top, #12233d, var(--bg) 50%);
  color: var(--text);
}

.page-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

.auth-box,
.leaderboard-card,
.panel,
.participant-shell {
  background: rgba(16, 27, 45, 0.9);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.auth-box {
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 28px;
}

.small-box {
  max-width: 420px;
}

.brand-block {
  text-align: center;
  margin-bottom: 18px;
}

.brand-block h1,
.board-header h1,
.admin-layout h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 4vw, 2.8rem);
}

.brand-block p {
  color: var(--muted);
  margin: 0 0 18px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  font-size: 0.9rem;
  color: var(--muted);
}

input,
button {
  border-radius: 12px;
  border: 1px solid var(--border);
  font: inherit;
}

input {
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  padding: 14px 14px;
}

button,
.link-btn,
.secondary-btn,
.primary-btn,
.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  padding: 12px 18px;
  transition: transform 0.15s ease;
}

button:hover,
.link-btn:hover,
.secondary-btn:hover,
.primary-btn:hover,
.danger-btn:hover {
  transform: translateY(-1px);
}

.primary-btn {
  background: linear-gradient(135deg, var(--primary), #3db7ff);
  color: #04131d;
  font-weight: 700;
  border: none;
}

.secondary-btn,
.link-btn {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

.danger-btn {
  background: rgba(255, 107, 107, 0.14);
  color: #ffd7d7;
  border-color: rgba(255, 107, 107, 0.4);
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 20px 0;
}

.notice {
  margin: 12px 0 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.notice.error {
  background: rgba(255, 107, 107, 0.08);
  color: #ffd6d6;
}

.notice.success {
  background: rgba(124, 227, 139, 0.08);
  color: #d9ffe0;
}

.notice.warning {
  background: rgba(255, 209, 102, 0.08);
  color: #fff1c2;
}

.tiny-link {
  display: block;
  margin-top: 12px;
  text-align: center;
  color: var(--muted);
  text-decoration: none;
}

.tool-box {
  max-width: 760px;
  margin: 30px auto 0;
  background: rgba(13, 23, 38, 0.9);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 28px;
}

.tool-box h2 {
  margin-top: 0;
}

.tool-box ul {
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

.leaderboard-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px;
}

.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

th {
  color: var(--muted);
}

.status-pill {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 95, 158, 0.1);
  color: var(--primary);
}

.admin-layout {
  display: grid;
  gap: 24px;
}

.panel {
  padding: 24px 26px;
}

.header-panel,
.stats-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.stats-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.history-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.participant-shell {
  padding: 28px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.timer-box {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent);
}

.score-line {
  margin-top: 24px;
  font-size: 1.4rem;
}

.progress-box {
  margin-top: 18px;
  margin-bottom: 28px;
  color: var(--muted);
}

.progress-bar {
  margin-top: 10px;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
}

.challenge-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}

.challenge-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
}

.challenge-card.solved {
  border-color: rgba(124, 227, 139, 0.5);
}

.challenge-card.skipped {
  border-color: rgba(255, 209, 102, 0.5);
}

.challenge-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.challenge-links {
  margin: 12px 0;
}

.challenge-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.challenge-detail-shell {
  max-width: 980px;
  margin: 0 auto;
}

.challenge-detail-card {
  background: rgba(16, 27, 45, 0.9);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px;
}

.challenge-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  font-size: 0.8rem;
}

.badge {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 95, 158, 0.1);
  color: var(--primary);
  font-weight: 700;
}

.challenge-description,
.task-box {
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
}

.task-box ul {
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.8;
}

.challenge-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.challenge-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

.history-panel {
  margin-top: 36px;
}

.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.history-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--muted);
}

.archive-link { color: #9adcf3; font-weight: 800; text-decoration: none; }
.archive-link:hover { text-decoration: underline; }
.archive-board { max-width: 1100px; }
.archive-board .table-scroll { overflow-x: auto; }
.archive-board table { min-width: 760px; }
.archive-details summary { color: #9adcf3; cursor: pointer; }
.archive-details ul { min-width: 250px; padding-left: 18px; color: var(--muted); font-size: 0.78rem; line-height: 1.7; }
.archive-details li { margin: 5px 0; }

.ctf-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  color: var(--muted);
}

.challenge-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  margin: 12px 0;
  font-size: 0.9rem;
}

.hint-box {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.hint-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
}

.action-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}

/* Full-page simulated campus sites and floating competition controls. */
.workspace-shell {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.workspace-topbar {
  min-height: 62px;
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  color: #172033;
  border-bottom: 1px solid #dbe3ec;
}

.workspace-brand {
  color: #10233d;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 0.06em;
}

.workspace-brand span {
  color: #25755f;
  font-size: 0.72rem;
}

.workspace-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.85rem;
}

.workspace-event,
.live-clock {
  color: #41617d;
  font-variant-numeric: tabular-nums;
}

.workspace-course-nav {
  display: flex;
  gap: 6px;
  padding: 8px 18px;
  overflow-x: auto;
  background: #eaf0f6;
  border-bottom: 1px solid #dbe3ec;
}

.course-step {
  min-width: 116px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #53677e;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.course-step > span {
  font-weight: 800;
  color: #607d98;
}

.course-step small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-step.selected {
  background: #fff;
  color: #17324d;
  box-shadow: 0 2px 8px rgba(16, 35, 61, 0.1);
}

.course-step.completed > span {
  color: #14805f;
}

/* Nível do desafio: F = fácil, M = médio, D = difícil. */
.level-badge { display: inline-grid; flex: none; place-items: center; width: 17px; height: 17px; border-radius: 5px; font-size: .58rem; font-style: normal; font-weight: 800; }
.level-badge.level-F { color: #0f5a37; background: #c9f2d9; }
.level-badge.level-M { color: #6b4b00; background: #ffe7a6; }
.level-badge.level-D { color: #7a1f1f; background: #ffd0cc; }
.panel-challenge-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.level-tag, .list-tag { padding: 3px 8px; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .03em; }
.level-tag.level-F { color: #b9f5cf; background: rgba(124, 227, 139, .16); border: 1px solid rgba(124, 227, 139, .35); }
.level-tag.level-M { color: #ffe1a1; background: rgba(255, 209, 102, .14); border: 1px solid rgba(255, 209, 102, .35); }
.level-tag.level-D { color: #ffc0bb; background: rgba(255, 107, 107, .14); border: 1px solid rgba(255, 107, 107, .35); }
.list-tag { color: #a9c6da; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }

.lab-frame-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 126px);
  min-height: 450px;
  background: #f4f7fb;
}

.lab-frame-wrap iframe {
  display: block;
  flex: 1;
  width: 100%;
  border: 0;
}

.control-panel {
  position: fixed;
  z-index: 20;
  top: 140px;
  right: 22px;
  width: min(370px, calc(100vw - 28px));
  max-height: calc(100vh - 158px);
  overflow-y: auto;
  padding: 18px;
  color: var(--text);
  background: rgba(12, 23, 39, 0.97);
  border: 1px solid rgba(155, 196, 221, 0.25);
  border-radius: 20px;
  box-shadow: 0 22px 65px rgba(4, 17, 31, 0.38), 0 0 0 1px rgba(255, 95, 158,.06) inset;
  backdrop-filter: blur(16px);
  transition: opacity 0.2s, transform 0.2s;
}

.control-panel.minimized {
  opacity: 0;
  pointer-events: none;
  transform: translateX(30px) scale(0.96);
}

.control-panel-header,
.panel-section-title,
.flag-input-row,
.panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.control-panel-header {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.control-panel.dragging,
.control-panel.dragging * {
  cursor: grabbing !important;
}

.control-panel-header h1 {
  margin: 2px 0 0;
  font-size: 1.22rem;
}
.panel-drag-instruction { display: block; margin-top: 5px; color: #81a8bf; font-size: .66rem; letter-spacing: .04em; }
.panel-extra-route { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0; color: var(--primary, #ff5f9e); background: none; border: 0; font: inherit; font-size: .66rem; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.panel-extra-route:hover { text-decoration: underline; }

.panel-header-actions { display: flex; align-items: center; gap: 6px; }
.panel-reset { width: 34px; height: 34px; padding: 0; color: #a9dff5; background: rgba(255, 95, 158,.1); border: 1px solid rgba(255, 95, 158,.25); font-size: 1rem; }
.panel-reset:hover { background: rgba(255, 95, 158,.2); }

.panel-eyebrow {
  margin: 0;
  color: #86c9e5;
  font-size: 0.67rem;
  letter-spacing: 0.08em;
}

.panel-minimize {
  width: 34px;
  height: 34px;
  padding: 0;
  color: #dceafa;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  font-size: 1.2rem;
}

.panel-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 10px;
}

.panel-metrics div {
  padding: 9px;
  background: rgba(255, 255, 255, 0.055);
  border-radius: 9px;
}

.panel-metrics span,
.panel-metrics strong {
  display: block;
}

.panel-metrics span {
  color: #9bb1c7;
  font-size: 0.68rem;
}

.panel-metrics strong {
  margin-top: 4px;
  color: #f4fbff;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.panel-status {
  color: #aac0d5;
  font-size: 0.75rem;
  text-transform: uppercase;
}

.panel-progress {
  height: 5px;
  margin-top: 7px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}

.panel-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #67ddb4, #63c9fa);
  border-radius: inherit;
  transition: width 0.3s ease;
}

.panel-hints {
  margin-top: 17px;
}

.panel-section-title h2 {
  margin: 0;
  font-size: 0.95rem;
}

.panel-section-title span {
  color: #a8c1d7;
  font-size: 0.76rem;
}

.revealed-hint {
  margin-top: 9px;
  padding: 10px;
  background: rgba(255, 95, 158, 0.08);
  border-left: 2px solid var(--primary);
  border-radius: 6px;
  animation: hintReveal 0.25s ease-out;
}

.revealed-hint span {
  color: #8dddf6;
  font-size: 0.7rem;
  font-weight: 700;
}

.revealed-hint p {
  margin: 5px 0 0;
  color: #e0eaf4;
  font-size: 0.8rem;
  line-height: 1.45;
}

.panel-secondary,
.panel-flag-form button,
.panel-next {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  color: #dff7ff;
  background: rgba(255, 95, 158, 0.14);
  border: 1px solid rgba(255, 95, 158, 0.24);
  border-radius: 9px;
  text-align: center;
  text-decoration: none;
  font-size: 0.82rem;
}

.panel-secondary:disabled,
.panel-flag-form button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.panel-flag-form {
  margin-top: 16px;
  gap: 7px;
}

.panel-flag-form label {
  color: #c0d0df;
  font-size: 0.76rem;
}

.flag-input-row {
  gap: 7px;
}

.flag-input-row input {
  min-width: 0;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.78rem;
}

.panel-flag-form button {
  width: auto;
  min-width: 70px;
  margin: 0;
}

#submission-feedback {
  min-height: 16px;
  margin: 3px 0 0;
  font-size: 0.75rem;
}

.feedback-success { color: #8ef0b6; }
.feedback-error { color: #ffadad; }

.panel-footer {
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #96abc0;
  font-size: 0.66rem;
}

.panel-footer a { color: #9adcf3; }

.panel-next[hidden],
.panel-expand[hidden] { display: none; }

.panel-next:not([hidden]) { display: block; }

.panel-finish {
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  color: #ffc3c3;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.28);
  border-radius: 9px;
  font-size: 0.76rem;
}

.finish-dialog {
  width: min(450px, calc(100vw - 32px));
  padding: 25px;
  color: var(--text);
  background: #101b2d;
  border: 1px solid rgba(155, 196, 221, 0.3);
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
}

.finish-dialog::backdrop { background: rgba(5, 12, 22, 0.72); backdrop-filter: blur(3px); }
.finish-dialog h2 { margin: 5px 0 10px; }
.finish-dialog p:not(.panel-eyebrow) { color: #b9cada; line-height: 1.55; }
.finish-dialog form { gap: 8px; }
.finish-dialog-actions { display: flex; gap: 10px; margin-top: 12px; }
.finish-dialog-actions button { flex: 1; }
.finish-confirm { color: #fff0f0; background: #a83b4d; border-color: #bd5363; border-radius: 9px; }

.panel-expand {
  position: fixed;
  z-index: 21;
  top: 140px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  color: #f2f9ff;
  background: rgba(12, 23, 39, 0.96);
  border: 1px solid rgba(155, 196, 221, 0.3);
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}

/* Distinct fictional web applications used as challenge targets. */
.page-shell:has(.scenario),
.page-shell:has(.report-page) {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #f4f7fb;
  color: #26384b;
}

.scenario { min-height: 100vh; color: #26384b; font-family: Arial, sans-serif; background: #f6f5f1; }
.scenario-header { min-height: 76px; padding: 12px clamp(20px, 6vw, 90px); display: flex; align-items: center; justify-content: space-between; gap: 22px; background: white; border-bottom: 1px solid rgba(30, 50, 70, 0.1); }
.scenario-header nav { display: flex; align-items: center; gap: 24px; }
.scenario-header nav a, .scenario-logo { color: inherit; text-decoration: none; }
.scenario-logo { font-size: 1.18rem; font-weight: 900; letter-spacing: 0.04em; }
.scenario-logo span { margin-left: 3px; }
.scenario-content { width: min(1060px, calc(100% - 48px)); min-height: calc(100vh - 140px); margin: auto; padding: 55px 0 70px; }
.scenario-content h1 { max-width: 760px; margin: 10px 0 14px; font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -0.045em; }
.scenario-content p { line-height: 1.7; }
.scenario-kicker { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.13em; }
.scenario-card { margin: 20px 0; padding: 22px; border-radius: 12px; }
.scenario-card h2 { margin-top: 0; }
.scenario-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 35px; }
.scenario-columns article { min-height: 125px; padding: 20px; border-radius: 12px; }
.scenario-cta, .dev-button, .arcade-button, .market-button, .cloud-button, .ticket-button, .booking-button { display: inline-flex; align-items: center; justify-content: center; padding: 11px 16px; border: 0; border-radius: 7px; text-decoration: none; cursor: pointer; font-weight: 700; }
.scenario-form { max-width: 540px; }
.scenario-form label { display: grid; gap: 7px; margin: 14px 0; }
.scenario-form input, .scenario-form textarea { color: #24384c; background: white; border: 1px solid #cfdae4; }
.scenario-form textarea { min-height: 110px; padding: 12px; border-radius: 8px; font: inherit; }
.scenario-inline { display: flex; gap: 8px; }
.scenario-inline input { flex: 1; min-width: 0; color: #26384b; background: white; border: 1px solid #cdd7df; }
.scenario-footer { padding: 18px; text-align: center; font-size: 0.78rem; color: #718398; border-top: 1px solid rgba(30, 50, 70, 0.12); }
.scenario-footer a { color: inherit; }
.content-meta { display: block; margin-bottom: 8px; color: #738078; font: 800 .63rem/1.4 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 38px 0 16px; }
.section-heading h2 { margin: 5px 0 0; font-size: clamp(1.35rem, 3vw, 2rem); }
.section-heading > a, .scenario-card a, .editorial-feature a, .cloud-link { color: #345f51; font-size: .8rem; font-weight: 700; }
.hero-caption { display: block; margin-top: 24px; color: rgba(255,255,255,.72); font: 800 .62rem/1.5 Arial, sans-serif; letter-spacing: .12em; }
.article-byline { margin: 0 0 26px; color: #788078; font: .78rem Arial, sans-serif; }
.article-body { max-width: 690px; font-family: Georgia, serif; font-size: 1.05rem; }
.article-body blockquote { margin: 30px 0; padding: 8px 0 8px 20px; border-left: 3px solid #c66b4e; color: #587063; font-size: 1.35rem; line-height: 1.5; }
.editorial-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 35px; }
.editorial-hero-art, .editorial-art { display: grid; place-items: center; overflow: hidden; color: #f6e8d5; background: radial-gradient(circle at 70% 26%, #d9a47c 0 9%, transparent 9.5%), radial-gradient(ellipse at 47% 82%, #68796a 0 22%, transparent 22.5%), linear-gradient(145deg, #59716b, #243c39 64%, #bd7559); }
.editorial-hero-art { min-height: 310px; border-radius: 48% 48% 6px 6px; transform: rotate(2deg); }
.editorial-hero-art span { padding: 14px; color: #fff4df; font: 800 clamp(1.4rem, 4vw, 2.4rem)/1.1 Georgia,serif; letter-spacing: .12em; text-align: center; }
.editorial-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: center; margin-top: 36px; padding: 18px; background: rgba(233,228,216,.72); }
.editorial-art { min-height: 215px; }
.editorial-art span { font: 800 1.2rem/1.3 Georgia,serif; letter-spacing: .15em; text-align: center; }
.editorial-feature h2 { margin: 0 0 9px; font: 500 1.65rem Georgia,serif; }
.editorial-feature p { color: #616b61; }
.studio-note, .travel-trust, .dev-stats, .shop-benefits, .event-filter-strip, .service-assurances { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 24px 0; padding: 15px 18px; border-top: 1px solid rgba(70,80,70,.14); border-bottom: 1px solid rgba(70,80,70,.14); }
.studio-note span, .shop-benefits span, .event-filter-strip span, .service-assurances span { color: #66756a; font: 800 .6rem/1.5 Arial,sans-serif; letter-spacing: .07em; }
.contact-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start; }
.contact-layout .scenario-card { margin-top: 14px; }
.contact-layout input, .contact-layout textarea { padding: 12px; border-radius: 8px; font: inherit; }
.trail-hero { position: relative; overflow: hidden; }
.trail-hero::after { position: absolute; right: 4%; bottom: -28%; width: 34%; height: 75%; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; content: ""; transform: rotate(-24deg); box-shadow: 0 0 0 24px rgba(255,255,255,.04), 0 0 0 48px rgba(255,255,255,.035); }
.travel-trust { border-color: rgba(26,51,75,.12); }
.travel-trust div { display: grid; gap: 4px; }
.travel-trust b { color: #244c48; font-size: 1.15rem; }
.travel-trust span { color: #718078; font-size: .65rem; }
.destination-grid, .product-grid, .arcade-game-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin: 22px 0; }
.destination-card { display: flex; min-height: 275px; flex-direction: column; justify-content: end; padding: 20px; overflow: hidden; color: white; border-radius: 13px; background-size: cover; box-shadow: inset 0 -150px 90px -60px rgba(11,26,29,.88); }
.destination-card.lisbon { background-image: linear-gradient(145deg,transparent,#244b4c),linear-gradient(28deg,#d28b62,#7aa69a 52%,#e7c67d); }
.destination-card.kyoto { background-image: linear-gradient(145deg,transparent,#243a47),linear-gradient(135deg,#78948a,#d08e79 48%,#526d62); }
.destination-card.patagonia { background-image: linear-gradient(145deg,transparent,#1b3942),linear-gradient(135deg,#94b1a3,#4d777d 45%,#d7ae7b); }
.destination-card > span, .product-grid article > span, .arcade-game-grid article > span { color: currentColor; font: 800 .56rem/1.5 Arial,sans-serif; letter-spacing: .1em; opacity: .8; }
.destination-card h2 { margin: 6px 0; font: 500 1.7rem Georgia,serif; }
.destination-card p { margin: 0 0 12px; font-size: .75rem; }
.destination-card b { font-size: .72rem; }
.dev-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding: clamp(24px,5vw,54px); background: linear-gradient(120deg,#192938,#17251f); border: 1px solid #314050; border-radius: 16px; }
.dev-hero h1 { color: white; }
.dev-hero-visual { display: grid; gap: 10px; padding: 20px; color: #cbd8e2; background: #0b1118; border: 1px solid #314050; border-radius: 10px; font: .72rem/1.5 ui-monospace,monospace; }
.dev-hero-visual span { margin-bottom: 8px; color: #77d0a9; font-size: .6rem; letter-spacing: .1em; }
.dev-hero-visual div { padding: 9px; background: #182330; border-radius: 5px; }
.dev-stats { border-color: #314050; }
.dev-stats div { display: grid; gap: 5px; }
.dev-stats b { color: #8fe3c0; font: 700 1.15rem ui-monospace,monospace; }
.dev-stats span { color: #b2c1d0; font-size: .65rem; }
.docs-layout { display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: start; }
.docs-sidebar { display: grid; gap: 10px; padding: 16px; color: #b5c3d2; background: #182330; border: 1px solid #314050; border-radius: 9px; font-size: .72rem; }
.docs-sidebar b, .docs-sidebar span { color: #77d0a9; font-size: .58rem; letter-spacing: .1em; }
.docs-sidebar span { margin-top: 8px; }
.docs-sidebar a { color: #c7d3dc; text-decoration: none; }
.dev-content .section-heading > a, .dev-content .scenario-card a { color: #8fe3c0; }
.release-row { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(130,150,160,.18); font-size: .73rem; }
.release-row:last-child { border-bottom: 0; }
.release-row span { text-align: right; opacity: .78; }
.arcade-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 20px; overflow: hidden; }
.arcade-cabinet { display: grid; min-height: 230px; place-items: center; border: 8px solid #362b63; border-radius: 38px 38px 14px 14px; background: linear-gradient(145deg,#ec65bd,#6447a6 45%,#17152e); box-shadow: inset 0 -35px #18152d,0 18px 34px rgba(0,0,0,.24); transform: perspective(500px) rotateY(-8deg); }
.arcade-cabinet span { color: white; font: 900 1.65rem/1.2 ui-monospace,monospace; text-align: center; text-shadow: 0 0 18px #ff6dbb; }
.arcade-cabinet i { margin-top: -46px; color: #ffe579; font: 900 .65rem ui-monospace,monospace; }
.arcade-live { display: flex; align-items: center; gap: 9px; margin: 22px 0; padding: 12px 15px; color: #d5cceb; background: #211c3d; border: 1px solid #3f3568; border-radius: 8px; font-size: .68rem; }
.arcade-live a { margin-left: auto; color: #ff8cc7; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #7fe0b4; box-shadow: 0 0 10px #7fe0b4; }
.arcade-game-grid article { padding: 14px; background: #211c3d; border: 1px solid #3f3568; border-radius: 11px; }
.arcade-game-grid h2 { margin: 8px 0 5px; color: #fff; font-size: 1rem; }
.arcade-game-grid p, .arcade-game-grid b { color: #c9c0dd; font-size: .68rem; }
.arcade-game-grid b { color: #ffcf74; }
.game-art { display: grid; min-height: 125px; place-items: center; margin-bottom: 13px; border-radius: 7px; color: white; font: 900 2rem ui-monospace,monospace; text-shadow: 0 0 17px currentColor; }
.neon-art { background: radial-gradient(circle at 70% 30%,#ec65bd,#433072 40%,#121528); }
.star-art { background: radial-gradient(circle at 36% 45%,#f9dc78,#d86665 8%,#282855 42%,#121528); }
.dungeon-art { background: repeating-linear-gradient(135deg,#5c3b8c 0 15px,#28204b 15px 30px); }
.arcade-ranking > div { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 14px; padding: 15px; border-bottom: 1px solid #3f3568; background: #211c3d; font-size: .74rem; }
.arcade-ranking > div strong { color: #ffcf74; text-align: right; }
.arcade-rank-head { color: #a9a0bd; font-size: .58rem !important; letter-spacing: .1em; }
.player-profile { display: flex; align-items: center; gap: 14px; padding: 20px; background: #211c3d; border: 1px solid #3f3568; border-radius: 12px; }
.player-profile h2, .player-profile p { margin: 0 0 5px; }
.player-profile span { margin-left: auto; color: #ff8cc7; font-size: .58rem; font-weight: 800; }
.arcade-feature { display: grid; grid-template-columns: .75fr 1.25fr; gap: 20px; align-items: center; }
.arcade-feature .game-art { min-height: 210px; margin: 0; }
.arcade-feature > div > span { color: #ffbd6c; font-size: .58rem; letter-spacing: .08em; }
.market-hero { position: relative; overflow: hidden; }
.market-hero::after { position: absolute; top: -20%; right: -3%; width: 32%; height: 140%; border: 1px solid rgba(69,93,74,.18); border-radius: 50%; content: ""; transform: rotate(25deg); box-shadow: 0 0 0 20px rgba(69,93,74,.06),0 0 0 40px rgba(69,93,74,.05); }
.shop-benefits { border-color: #d7d8cf; }
.product-grid article { overflow: hidden; padding-bottom: 15px; background: #fffefa; border: 1px solid #dfded5; }
.product-grid article > span, .product-grid article > h2, .product-grid article > p, .product-grid article > b { display: block; margin-right: 15px; margin-left: 15px; }
.product-grid article > span { color: #7b877e; }
.product-grid article > h2 { margin-top: 7px; margin-bottom: 5px; color: #34453a; font: 500 1.08rem Georgia,serif; }
.product-grid article > p { color: #657368; font-size: .7rem; }
.product-grid article > b { color: #536c59; font-size: .82rem; }
.product-art { display: grid; min-height: 190px; place-items: center; margin-bottom: 15px; color: rgba(255,255,255,.85); font: 800 2.5rem Georgia,serif; }
.jacket-art { background: radial-gradient(ellipse at 50% 53%,#506c5b 0 22%,transparent 23%),linear-gradient(135deg,#e6d8bf,#a7b19f); }
.camera-art { background: radial-gradient(ellipse at center,#292d2c 0 22%,transparent 23%),linear-gradient(135deg,#d9c9ae,#9e8465); }
.bag-art { background: radial-gradient(ellipse at center,#7e5538 0 25%,transparent 26%),linear-gradient(135deg,#d5c9b7,#8c9c88); }
.cloud-dashboard { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: start; margin-top: 26px; }
.cloud-dashboard .cloud-file-list, .cloud-dashboard .scenario-card { max-width: none; margin: 0; }
.cloud-dashboard .scenario-card { color: #344253; }
.cloud-dashboard .scenario-card h2 { margin: 6px 0; }
.cloud-dashboard .scenario-card a, .cloud-link { color: #6478d2; }
.storage-meter { height: 7px; margin-top: 14px; background: #e8edf6; border-radius: 10px; }
.storage-meter i { display: block; width: 18%; height: 100%; background: #6478d2; border-radius: inherit; }
.cloud-file-list small { display: block; margin-top: 7px; color: #7e8999; }
.cloud-file-row { display: flex; align-items: center; gap: 13px; margin: 10px 0; padding: 15px; background: white; border: 1px solid #e1e6f0; border-radius: 9px; }
.cloud-file-row > div { display: grid; flex: 1; gap: 5px; }
.cloud-file-row b { color: #2b3b50; font-size: .78rem; }
.cloud-file-row small, .cloud-file-row time, .cloud-file-row > span:last-child { color: #7b8797; font-size: .65rem; }
.file-icon { display: grid; width: 39px; height: 43px; place-items: center; color: #6478d2; background: #eef1fa; border-radius: 6px; font-size: .58rem; font-weight: 800; }
.archive-icon { color: #9a6c45; background: #f4eee7; }
.cloud-link { display: inline-block; margin: 12px 0; text-decoration: none; }
.ticket-hero { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 16px; overflow: hidden; }
.ticket-hero-art { display: grid; min-height: 225px; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 50% 50% 8px 8px; background: radial-gradient(circle at 50% 30%,#ffbd6c,#9c4f6e 20%,#282644 65%); }
.ticket-hero-art span { color: white; font: 900 1.45rem/1.2 ui-monospace,monospace; letter-spacing: .2em; text-align: center; }
.event-filter-strip { justify-content: start; flex-wrap: wrap; border-color: #303d50; }
.event-filter-strip span { color: #c3cbd7; }
.event-list { display: grid; gap: 10px; margin: 18px 0; }
.event-list article { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 16px; padding: 17px; background: #1b2432; border: 1px solid #303d50; border-radius: 10px; }
.event-list article > div > span { color: #ffbd6c; font-size: .55rem; font-weight: 800; letter-spacing: .1em; }
.event-list h2 { margin: 5px 0; font-size: .93rem; }
.event-list p { margin: 0; color: #abb7c7; font-size: .68rem; }
.event-date { display: grid; gap: 5px; justify-items: center; padding: 9px 4px; color: #20202b; background: #ffbd6c; border-radius: 7px; }
.event-date b { font-size: .52rem; }
.event-date strong { font-size: .85rem; }
.event-availability { color: #c5d4c7; font-size: .6rem; }
.search-suggestions { display: flex; gap: 10px; align-items: center; margin-top: 12px; color: #abb7c7; font-size: .65rem; }
.search-suggestions a { color: #ffbd6c; }
.ticket-content .section-heading > a, .ticket-content .scenario-card a { color: #ffbd6c; }
.request-summary { display: flex; align-items: center; gap: 20px; padding-top: 15px; border-top: 1px solid rgba(125,145,135,.25); }
.request-summary > span { display: grid; gap: 4px; }
.request-summary small { color: #84968c; font-size: .53rem; letter-spacing: .1em; }
.request-summary b { font-size: .68rem; }
.request-summary .scenario-button { margin-left: auto; }
.service-details { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; margin: 28px 0; padding: 24px; color: #33483f; background: rgba(255,255,255,.8); border: 1px solid rgba(100,120,110,.15); border-radius: 12px; }
.service-details h2 { margin: 4px 0 8px; font: 500 1.35rem Georgia,serif; }
.service-details p { color: #68766e; font-size: .75rem; }
.service-details ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.service-details li { display: flex; align-items: center; gap: 12px; }
.service-details li > span { display: grid; width: 28px; height: 28px; flex: none; place-items: center; color: #345f51; border: 1px solid #b8c6ba; border-radius: 50%; font-size: .58rem; font-weight: 800; }
.service-details li div { display: grid; gap: 4px; }
.service-details li b { font-size: .72rem; }
.service-details li small { color: #748078; font-size: .63rem; }
.service-assurances { justify-content: start; flex-wrap: wrap; border-color: rgba(125,145,135,.2); }
.rich-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 23px clamp(18px,6vw,90px); text-align: left; }
.rich-footer > span { max-width: 420px; }
.rich-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.rich-footer nav a { color: inherit; font-size: .68rem; text-decoration: none; }
.rich-footer nav a:hover { text-decoration: underline; }
.studio-journal-strip, .dev-customer-story, .arcade-community, .repair-story, .cloud-security-note, .nightlife-guide, .travel-editorial, .traveler-review, .market-review, .editorial-quote, .service-faq { margin: 26px 0; padding: clamp(20px,4vw,34px); border-radius: 12px; }
.studio-journal-strip { background: #e9e4d8; }
.studio-journal-strip h2, .dev-customer-story h2, .arcade-community h2, .repair-story h2, .cloud-security-note h2, .nightlife-guide h2, .travel-editorial h2, .service-faq h2 { margin: 5px 0 9px; font-size: clamp(1.2rem,3vw,1.7rem); }
.studio-journal-strip > p, .dev-customer-story > p, .arcade-community p, .repair-story p, .cloud-security-note p, .nightlife-guide p, .travel-editorial p { max-width: 650px; color: #637168; font-size: .8rem; }
.studio-people { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 20px; }
.studio-people > span { display: flex; align-items: center; gap: 8px; color: #56655b; font-size: .68rem; }
.studio-people b, .community-avatars b { display: grid; width: 32px; height: 32px; place-items: center; color: #fff7ea; background: #567166; border-radius: 50%; font: 700 .58rem Arial,sans-serif; }
.editorial-quote { display: grid; justify-items: center; padding: 34px; text-align: center; }
.editorial-quote > span { color: #c66b4e; font: 4rem Georgia,serif; line-height: .7; }
.editorial-quote blockquote { max-width: 600px; margin: 12px auto; color: #52675c; font: 500 clamp(1.2rem,3vw,1.8rem)/1.4 Georgia,serif; }
.editorial-quote small { color: #8a7665; font: 800 .56rem Arial,sans-serif; letter-spacing: .12em; }
.travel-editorial { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 25px; background: #e8eee6; }
.travel-editorial a, .nightlife-guide a { color: #315f54; font-size: .78rem; font-weight: 750; }
.travel-stamp { display: grid; min-height: 205px; place-content: center; justify-items: center; color: #f7f0df; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; background: radial-gradient(circle,#8b9e82,#315b5a); box-shadow: inset 0 0 0 9px rgba(255,255,255,.09); transform: rotate(-7deg); }
.travel-stamp span, .travel-stamp small { font: 800 .52rem Arial,sans-serif; letter-spacing: .18em; }
.travel-stamp b { margin: 8px; font: 800 1.35rem/1 Georgia,serif; text-align: center; }
.traveler-review, .market-review { background: #fff; border: 1px solid rgba(26,51,75,.1); }
.traveler-review > span, .market-review > span { color: #c48138; letter-spacing: .14em; }
.traveler-review blockquote, .market-review p { max-width: 720px; margin: 9px 0; color: #39534b; font: 500 1rem/1.6 Georgia,serif; }
.traveler-review small, .market-review small { color: #738078; font-size: .65rem; }
.dev-customer-story { background: linear-gradient(115deg,#1c2f3b,#19332d); border: 1px solid #314b4b; }
.dev-customer-story .content-meta { color: #8fe3c0; }
.dev-customer-story h2 { max-width: 620px; color: #f4f8f5; }
.dev-customer-story > p { color: #b2c1d0; }
.dev-customer-story a, .dev-integrations { color: #8fe3c0 !important; }
.dev-customer-story a { font-size: .75rem; font-weight: 700; }
.dev-integrations { margin: 25px 0; padding: 18px; border-top: 1px solid #314050; border-bottom: 1px solid #314050; }
.dev-integrations > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: #cbd8e2; font: 700 .8rem ui-monospace,monospace; }
.arcade-community { display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: center; background: linear-gradient(110deg,#28204d,#211c3d); border: 1px solid #44396c; }
.arcade-community .content-meta { color: #ff8cc7; }
.arcade-community h2 { color: white; }
.arcade-community p { color: #c9c0dd; }
.arcade-community a { color: #ff8cc7; font-size: .75rem; font-weight: 700; }
.community-avatars { display: flex; align-items: center; flex-wrap: wrap; max-width: 220px; }
.community-avatars b { margin-left: -5px; border: 2px solid #28204d; background: #795bb6; }
.community-avatars b:first-child { margin-left: 0; }
.community-avatars b:nth-child(2) { background: #ca4b9a; }
.community-avatars b:nth-child(3) { background: #468a82; }
.community-avatars b:nth-child(4) { background: #423b62; }
.community-avatars small { width: 100%; margin-top: 10px; color: #c9c0dd; font-size: .61rem; }
.arcade-release, .ticket-news { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 18px 0; padding: 13px 15px; color: #d5cceb; background: #211c3d; border: 1px solid #3f3568; border-radius: 8px; font-size: .65rem; }
.arcade-release > b, .ticket-news > b { color: #ff8cc7; font-size: .57rem; letter-spacing: .1em; }
.arcade-release > span:last-of-type, .ticket-news > span:not(.live-dot) { color: #bdb3d3; }
.arcade-release a, .ticket-news a { margin-left: auto; color: #ff8cc7; }
.repair-story { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 24px; background: #e7e5da; }
.repair-art { display: grid; min-height: 190px; place-items: center; color: #f9f3e8; background: linear-gradient(140deg,transparent 49%,rgba(255,255,255,.65) 50% 51%,transparent 52%),linear-gradient(135deg,#b27a55,#d5c5a8 48%,#617563); border-radius: 4px; }
.repair-art span { padding: 12px; border: 1px solid rgba(255,255,255,.6); font: 800 .8rem/1.3 Georgia,serif; letter-spacing: .15em; text-align: center; }
.repair-story a { color: #536c59; font-size: .75rem; font-weight: 700; }
.cloud-security-note { display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid #e1e6f0; }
.cloud-security-note .content-meta { color: #6478d2; }
.cloud-security-note h2 { color: #2b3b50; }
.cloud-security-note p { color: #65738a; }
.cloud-security-note a { color: #6478d2; font-size: .74rem; font-weight: 700; }
.cloud-team-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 22px 0; padding: 17px; background: #fff; border: 1px solid #e1e6f0; border-radius: 10px; }
.cloud-team-row .content-meta { grid-column: 1/-1; color: #6d7fd2; }
.cloud-team-row > div { display: grid; gap: 5px; padding: 8px; }
.cloud-team-row b { color: #2b3b50; font-size: .73rem; }
.cloud-team-row small { color: #7b8797; font-size: .62rem; }
.nightlife-guide { display: grid; grid-template-columns: 1fr .7fr; gap: 25px; align-items: center; background: #1b2432; border: 1px solid #303d50; }
.nightlife-guide .content-meta { color: #ffbd6c; }
.nightlife-guide h2 { color: #f7f0e4; }
.nightlife-guide p { color: #abb7c7; }
.neighborhood-map { display: grid; min-height: 185px; place-content: center; justify-items: center; gap: 9px; color: #d8d3c4; background: repeating-linear-gradient(0deg,transparent 0 26px,rgba(255,255,255,.08) 27px 28px),repeating-linear-gradient(90deg,#263649 0 44px,#354253 45px 47px); border: 1px solid #475366; border-radius: 8px; text-align: center; }
.neighborhood-map i { color: #ffbd6c; font-size: 1.4rem; }
.neighborhood-map b { color: #fff; font-size: .72rem; letter-spacing: .1em; }
.neighborhood-map span, .neighborhood-map small { font-size: .5rem; letter-spacing: .13em; }
.ticket-news { background: #1b2432; border-color: #303d50; }
.ticket-news > b { color: #ffbd6c; }
.ticket-news a { color: #ffbd6c; }
.service-faq { background: rgba(255,255,255,.82); border: 1px solid rgba(100,120,110,.15); }
.service-faq .content-meta { color: #71836e; }
.service-faq h2 { color: #33483f; }
.service-faq details { padding: 13px 0; border-top: 1px solid rgba(100,120,110,.16); }
.service-faq summary { color: #33483f; cursor: pointer; font-size: .75rem; font-weight: 700; }
.service-faq details p { margin-bottom: 0; color: #68766e; font-size: .7rem; }
.scenario-3 .section-heading > a, .scenario-3 .scenario-card a { color: #8fe3c0; }
.scenario-4 .section-heading > a, .scenario-4 .scenario-card a { color: #ff8cc7; }
.scenario-5 .section-heading > a, .scenario-5 .scenario-card a { color: #536c59; }
.scenario-6 .section-heading > a, .scenario-6 .scenario-card a { color: #6478d2; }
.scenario-7 .section-heading > a, .scenario-7 .scenario-card a { color: #ffbd6c; }
@media (max-width: 760px) {
  .destination-grid, .product-grid, .arcade-game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .editorial-hero, .dev-hero, .arcade-hero, .ticket-hero { grid-template-columns: 1fr; }
  .editorial-hero-art, .arcade-cabinet, .ticket-hero-art { min-height: 180px; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .docs-sidebar b, .docs-sidebar span { grid-column: 1/-1; }
  .travel-trust, .dev-stats { align-items: flex-start; flex-wrap: wrap; }
  .travel-trust div, .dev-stats div { min-width: 28%; }
  .cloud-dashboard { grid-template-columns: 1fr; }
  .service-details { grid-template-columns: 1fr; }
  .rich-footer, .rich-footer nav { justify-content: center; text-align: center; }
  .rich-footer { flex-wrap: wrap; }
  .travel-editorial, .repair-story, .nightlife-guide { grid-template-columns: 1fr; }
  .travel-stamp { min-height: 165px; width: 165px; justify-self: center; }
}
@media (max-width: 520px) {
  .destination-grid, .product-grid, .arcade-game-grid { grid-template-columns: 1fr; }
  .destination-card { min-height: 230px; }
  .editorial-feature, .arcade-feature { grid-template-columns: 1fr; }
  .editorial-art { min-height: 160px; }
  .studio-note, .shop-benefits, .event-filter-strip, .service-assurances { align-items: flex-start; flex-direction: column; }
  .contact-layout { grid-template-columns: 1fr; gap: 8px; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .event-list article { grid-template-columns: 54px 1fr; gap: 10px; }
  .event-availability { grid-column: 2; }
  .request-summary { align-items: flex-start; flex-direction: column; }
  .arcade-ranking > div { grid-template-columns: 1fr auto; }
  .arcade-ranking > div span { display: none; }
  .player-profile { flex-wrap: wrap; }
  .player-profile span { width: 100%; margin-left: 0; }
  .cloud-file-row { align-items: flex-start; }
  .cloud-file-row time { display: none; }
  .arcade-community { grid-template-columns: 1fr; }
  .community-avatars { max-width: none; }
  .dev-integrations > div { justify-content: flex-start; }
  .cloud-team-row { grid-template-columns: 1fr; }
  .cloud-team-row .content-meta { grid-column: auto; }
  .studio-people { flex-direction: column; }
  .arcade-release > span:last-of-type, .ticket-news > span:not(.live-dot) { width: 100%; }
  .arcade-release a, .ticket-news a { margin-left: 0; }
}

/* Output/result panel used by the 46 extra catalog labs (id > 8), on top of
   whichever scenario-N palette their theme reuses. Kept theme-neutral (own
   fixed dark console look) so text/output never blends into the page
   background, which was the root cause of "invisible" buttons/text before. */
.lab-output {
  display: block;
  overflow-wrap: anywhere;
  min-height: 20px;
  margin-top: 12px;
  padding: 14px 16px;
  color: #a8efbd;
  background: #0b1118;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
}
.scenario-1 { background: #f5f2eb; color: #2b302c; font-family: Georgia, serif; }
.blog-header { background: #f9f7f2; }
.blog-header .scenario-logo span { color: #c66b4e; font-family: Georgia, serif; }
.blog-header nav a { font-family: Arial, sans-serif; font-size: 0.84rem; }
.blog-header .scenario-cta { color: white; background: #2e584b; font-family: Arial, sans-serif; }
.blog-layout { max-width: 920px; padding-top: 95px; }
.blog-layout h1 { max-width: 780px; font-size: clamp(3rem, 7vw, 5.6rem); font-weight: 500; line-height: 0.98; }
.blog-layout .scenario-kicker { color: #b15d43; }
.blog-layout .scenario-card, .blog-layout .scenario-columns article { background: #e9e4d8; }
.blog-layout a { color: #345f51; }
.scenario-2 { background: #f5f7fa; color: #233750; font-family: Arial, sans-serif; }
.trail-header { color: #163b4a; }
.trail-header .scenario-logo { color: #153a49; }
.trail-header .scenario-logo small { display: block; font-size: 0.55rem; letter-spacing: 0.19em; }
.trail-header .scenario-cta, .trail-content .scenario-cta { color: white; background: #d26e49; }
.trail-hero { padding: clamp(32px, 7vw, 78px); color: white; background: linear-gradient(120deg, rgba(17, 58, 68, 0.92), rgba(27, 96, 91, 0.68)), linear-gradient(45deg, #44796d, #9aa57a); border-radius: 20px; }
.trail-hero h1, .trail-hero p { color: white; }
.trail-hero .scenario-kicker { color: #d2e1b9; }
.trail-content .scenario-card, .trail-content .scenario-columns article { background: white; box-shadow: 0 10px 28px rgba(26, 51, 75, 0.07); }
.scenario-3 { color: #e5eefa; background: #111923; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dev-header { color: #e7edf5; background: #182330; border-bottom-color: #2c3948; }
.dev-header .scenario-logo { color: #8fe3c0; }
.dev-header nav a { color: #b5c3d2; }
.dev-pill, .healthy { color: #46ad83; }
.dev-content h1 { color: white; }
.dev-content > p { color: #b2c1d0; }
.dev-content .scenario-kicker { color: #77d0a9; }
.dev-content .scenario-card { color: #d7e0ea; background: #1a2633; border: 1px solid #314050; }
.dev-content a { display: inline-block; margin-left: 10px; color: #8fe3c0; }
.dev-content code, .scenario-terminal { display: block; overflow-wrap: anywhere; padding: 16px; color: #a8efbd; background: #0b1118; border-radius: 8px; }
.dev-button { color: #14261e; background: #7fe0b4; }
.scenario-4 { color: #fff; background: #141228; font-family: Arial, sans-serif; }
.arcade-header { color: white; background: #1e193e; border-bottom-color: #3c3363; }
.arcade-header .scenario-logo span { color: #ff72bb; }
.arcade-header nav a { color: #d5cceb; }
.arcade-avatar { display: grid; width: 34px; height: 34px; place-items: center; background: #6d55bf; border-radius: 50%; font-weight: 800; }
.arcade-content h1 { color: white; }
.arcade-content .scenario-kicker { color: #ff8cc7; }
.arcade-hero { padding: clamp(32px, 7vw, 72px); background: radial-gradient(circle at 80% 15%, #7044b4, #32245c 45%, #201b43); border: 1px solid #5d4b8a; border-radius: 20px; }
.arcade-hero h1 { max-width: 680px; color: white; }
.arcade-hero p { color: #dfd5f3; }
.arcade-button { color: white; background: #d948a0; }
.arcade-content .scenario-card, .arcade-content .scenario-columns article { color: #f6edff; background: #211c3d; border: 1px solid #3f3568; }
.scenario-5 { color: #2b3030; background: #f0eee8; font-family: Arial, sans-serif; }
.market-header .scenario-logo span { color: #ba613f; }
.market-header nav a { color: #5e6761; }
.market-header .bag-link { color: #543d31; text-decoration: none; }
.market-hero { padding: clamp(32px, 7vw, 78px); background: #d7dfd2; border-radius: 3px; }
.market-hero h1 { max-width: 700px; color: #344b3e; font-family: Georgia, serif; font-weight: 500; }
.market-hero p { color: #52665a; }
.market-button { color: white; background: #536c59; }
.market-content .scenario-card, .market-content .scenario-columns article { color: #36453b; background: #fffefa; border: 1px solid #dfded5; border-radius: 3px; }
.scenario-6 { color: #22334b; background: #f3f6fb; font-family: Arial, sans-serif; }
.cloud-header .scenario-logo span { color: #6682d6; }
.cloud-header nav a { color: #63718a; }
.cloud-user { padding: 8px 12px; background: #eef1fa; border-radius: 99px; }
.cloud-content .scenario-kicker { color: #6d7fd2; }
.cloud-content .scenario-card, .cloud-content .scenario-columns article { background: white; border: 1px solid #e1e6f0; box-shadow: 0 4px 15px rgba(35, 57, 91, 0.04); }
.cloud-button { color: white; background: #6478d2; }
.cloud-file-list { max-width: 480px; margin-top: 30px; padding: 20px; background: white; border-radius: 12px; }
.cloud-file-list div { display: flex; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid #ebeff5; }
.cloud-content pre { min-height: 45px; overflow: auto; padding: 12px; color: #e5ebf8; background: #202c42; border-radius: 8px; white-space: pre-wrap; }
.scenario-7 { color: #edf1f8; background: #10151e; font-family: Arial, sans-serif; }
.ticket-header { color: white; background: #171e2b; border-bottom-color: #303a4a; }
.ticket-header .scenario-logo span { color: #ffbc67; }
.ticket-header nav a { color: #c3cbd7; }
.ticket-content h1 { color: white; }
.ticket-content .scenario-kicker { color: #ffbd6c; }
.ticket-hero { padding: clamp(32px, 7vw, 78px); background: linear-gradient(120deg, #5c274a, #252644 75%); border-radius: 16px; }
.ticket-hero h1 { max-width: 700px; color: white; }
.ticket-hero p { color: #e2d9e7; }
.ticket-button { color: #191821; background: #ffbd6c; }
.ticket-content .scenario-card, .ticket-content .scenario-columns article { color: #e7edf6; background: #1b2432; border: 1px solid #303d50; }
.ticket-content pre { overflow: auto; color: #d4e1ef; white-space: pre-wrap; }
.scenario-8 { color: #eaf4f2; background: #10211f; font-family: Arial, sans-serif; }
.booking-header { color: #eaf5f2; background: #18312e; border-bottom-color: #2c4945; }
.booking-header .scenario-logo span { color: #8be0bd; }
.booking-header nav a { color: #c7d9d3; }
.booking-content h1 { color: white; }
.booking-content .scenario-kicker { color: #91dfc0; }
.booking-hero { padding: clamp(32px, 7vw, 78px); background: linear-gradient(120deg, #28534a, #1b343e); border-radius: 18px; }
.booking-hero h1 { max-width: 700px; color: white; }
.booking-hero p { color: #d0e2dc; }
.booking-button { color: #132620; background: #92e1bf; }
.booking-content .scenario-card, .booking-content .scenario-columns article { color: #e4f0ec; background: #19332f; border: 1px solid #35524d; }
.report-page { min-height: 100vh; background: #f4f7fb; }

.podium-first td { background: rgba(255, 209, 102, 0.14); color: #ffe59a; font-weight: 800; }
.podium-second td { background: rgba(195, 215, 232, 0.1); color: #d7e6f2; font-weight: 700; }
.podium-third td { background: rgba(207, 139, 99, 0.1); color: #f1c5a4; font-weight: 700; }
.podium-first td:first-child::before { content: '🥇 '; }
.podium-second td:first-child::before { content: '🥈 '; }
.podium-third td:first-child::before { content: '🥉 '; }
.rank-overtake { animation: overtake 1.1s ease-out; }

@keyframes overtake {
  0% { background-color: rgba(81, 235, 170, 0.36); transform: translateX(12px); }
  55% { background-color: rgba(81, 235, 170, 0.18); }
  100% { background-color: transparent; transform: translateX(0); }
}

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

@media (max-width: 640px) {
  .dashboard-header,
  .board-header,
  .header-panel,
  .stats-panel,
  .action-row,
  .history-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-panel {
    grid-template-columns: 1fr;
  }

  th,
  td {
    font-size: 0.88rem;
  }

  .workspace-topbar { padding: 10px 13px; }
  .workspace-identity { gap: 8px; font-size: 0.72rem; }
  .workspace-event { display: none; }
  .workspace-course-nav { padding: 7px; }
  .course-step { min-width: 88px; font-size: 0.75rem; }
  .course-step small { max-width: 62px; }
  .lab-frame-wrap { height: calc(100vh - 116px); }
  .control-panel { top: auto; right: 10px; bottom: 10px; width: calc(100vw - 20px); max-height: min(75vh, 610px); }
  .panel-expand { top: auto; right: 10px; bottom: 10px; }
  .panel-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .panel-metrics div { padding: 7px 5px; }
  .panel-metrics span { font-size: 0.6rem; }
  .panel-metrics strong { font-size: 0.7rem; }
  .scenario-header { flex-wrap: wrap; padding: 12px 18px; }
  .scenario-header nav { order: 3; width: 100%; justify-content: space-around; gap: 12px; }
  .scenario-header nav a { font-size: 0.78rem; }
  .scenario-content { width: calc(100% - 36px); padding: 35px 0 48px; }
  .scenario-columns { grid-template-columns: 1fr; }
  .scenario-inline { flex-wrap: wrap; }
  .scenario-inline input { flex-basis: 100%; }
}

/* Public site and administration visual refresh. */
:root {
  --ink: #08111f;
  --ink-soft: #101d2d;
  --paper: #f4f6f2;
  --mint: #ff5f9e;
  --mint-deep: #d11255;
  --orange: #ff895d;
  --slate: #90a0b4;
}

body:has(.landing-page),
body:has(.ranking-page),
body:has(.admin-login-page),
body:has(.admin-page) {
  background: var(--ink);
  color: #f3f6f2;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.page-shell:has(.landing-page),
.page-shell:has(.ranking-page),
.page-shell:has(.admin-login-page),
.page-shell:has(.admin-page) {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.landing-page {
  --landing-line: rgba(229, 238, 230, 0.12);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 0 clamp(22px, 7vw, 112px);
  background:
    radial-gradient(ellipse at 77% 31%, rgba(84, 133, 86, 0.16), transparent 30%),
    radial-gradient(ellipse at 18% 96%, rgba(58, 85, 111, 0.12), transparent 34%),
    #08111f;
}

.landing-nav,
.ranking-nav,
.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  border-bottom: 1px solid var(--landing-line, rgba(229, 238, 230, 0.12));
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #f4f7f3;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.075em;
  font-size: 0.82rem;
}

.landing-brand > span:last-child { display: grid; gap: 3px; }
.landing-brand small { color: #8291a2; font-size: 0.56rem; letter-spacing: 0.19em; font-weight: 700; }

.brand-symbol {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--mint);
  border-radius: 11px 11px 11px 3px;
  font-size: 1.2rem;
  letter-spacing: -0.08em;
}
img.brand-symbol {
  background: #fff;
  padding: 4px;
  object-fit: contain;
}

.landing-nav nav { display: flex; gap: 32px; }
.landing-nav nav a,
.ranking-back { color: #a9b6c4; text-decoration: none; font-size: 0.82rem; transition: color 0.2s; }
.landing-nav nav a:hover,
.ranking-back:hover { color: var(--mint); }

.event-indicator {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #9caabb;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.event-indicator > span,
.admin-secure i,
.summary-dot,
.live-refresh i,
.state-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #748295;
}

.event-indicator.is-live { color: #ffd7e6; }
.event-indicator.is-live > span,
.state-pulse { background: var(--mint); box-shadow: 0 0 14px rgba(255, 95, 158, 0.65); animation: statusPulse 1.8s infinite; }

.landing-hero {
  min-height: 505px;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 38px;
  padding: 54px 0 44px;
}

.hero-copy { position: relative; z-index: 1; max-width: 630px; }
.eyebrow-line,
.section-kicker { color: var(--mint); font-size: 0.63rem; font-weight: 850; letter-spacing: 0.16em; }
.eyebrow-line { display: flex; align-items: center; gap: 12px; }
.eyebrow-line span { color: #6f8094; }
.hero-copy h1,
.ranking-hero h1 {
  margin: 20px 0 16px;
  font-size: clamp(3rem, 6.4vw, 5.9rem);
  line-height: 0.97;
  letter-spacing: -0.075em;
  font-weight: 760;
}

.hero-copy h1 em,
.ranking-hero h1 em { color: var(--mint); font-style: normal; }
.hero-description { max-width: 475px; color: #a0aebe; font-size: 0.97rem; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 29px; }
.hero-primary,
.hero-secondary,
.join-submit,
.admin-login-submit,
.create-event-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 17px;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 850;
  transition: transform 0.18s ease, background 0.18s ease;
}

.hero-primary { min-width: 202px; color: #0b1710; background: var(--mint); }
.hero-primary span { font-size: 1rem; }
.hero-primary:hover,
.join-submit:not(:disabled):hover,
.admin-login-submit:hover,
.create-event-button:hover { background: #c5ff85; transform: translateY(-2px); }
.hero-secondary { padding-left: 0; color: #dbe3e8; background: transparent; }
.hero-secondary span { color: var(--mint); }
.hero-proof { display: flex; align-items: center; gap: 11px; margin-top: 35px; color: #7e8c9e; font-size: 0.72rem; }
.proof-dots { display: flex; }
.proof-dots i { width: 8px; height: 8px; margin-right: -2px; border: 2px solid var(--ink); border-radius: 50%; background: #52667b; }
.proof-dots i:nth-child(2) { background: #9bb08c; }
.proof-dots i:nth-child(3) { background: var(--mint); }

.hero-art { position: relative; height: 390px; display: grid; place-items: center; }
.hero-art::before { content: ''; position: absolute; inset: 8% 3%; border: 1px solid rgba(199, 226, 185, 0.08); border-radius: 50%; transform: rotate(-20deg); }
.orbit { position: absolute; border: 1px solid rgba(255, 95, 158, 0.12); border-radius: 50%; transform: rotate(-29deg); }
.orbit-one { width: 420px; height: 250px; }
.orbit-two { width: 330px; height: 195px; transform: rotate(42deg); }
.hero-crosshair { position: absolute; top: 26px; right: 16%; color: rgba(255, 95, 158, 0.55); font-size: 1.4rem; }
.hero-orb { position: absolute; right: 7%; bottom: 6%; width: 98px; height: 98px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 95, 158,0.8), rgba(255, 95, 158,0.08) 68%, transparent 70%); filter: blur(0.4px); opacity: 0.52; }
.terminal-card { position: relative; z-index: 1; width: min(440px, 95%); overflow: hidden; border: 1px solid rgba(183, 209, 186, 0.23); border-radius: 13px; background: rgba(15, 27, 40, 0.9); box-shadow: 0 35px 90px rgba(0, 0, 0, 0.3); transform: rotate(-3deg); }
.terminal-top { display: flex; align-items: center; gap: 6px; height: 39px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); }
.terminal-top > span { width: 7px; height: 7px; border-radius: 50%; background: #fb8269; }
.terminal-top > span:nth-child(2) { background: #f1c469; }
.terminal-top > span:nth-child(3) { background: #91d983; }
.terminal-top b { margin-left: auto; color: #607286; font-size: 0.61rem; font-weight: 600; }
.terminal-body { padding: 22px 22px 20px; color: #bac6d0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.7rem; }
.terminal-body p { margin: 0 0 13px; }
.terminal-muted { color: #8c9bac; }
.terminal-output { color: #b9f184; }
.terminal-cursor { color: var(--mint); animation: cursorBlink 1s steps(2, start) infinite; }
.terminal-progress { height: 4px; margin: 19px 0 9px; background: rgba(255,255,255,0.08); }
.terminal-progress span { display: block; width: 17%; height: 100%; background: var(--mint); }
.terminal-body small { display: flex; justify-content: space-between; color: #67778a; font-size: 0.53rem; letter-spacing: 0.1em; }
.terminal-body small b { color: #aabbc8; }
.floating-tag { position: absolute; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid rgba(222, 239, 217, 0.14); border-radius: 7px; background: rgba(14, 26, 39, 0.93); box-shadow: 0 13px 32px rgba(0,0,0,0.22); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; }
.tag-flag { top: 13%; right: 1%; color: #ffd7e6; transform: rotate(4deg); }
.tag-flag span { color: var(--mint); font-size: 0.9rem; }
.tag-score { bottom: 12%; left: 1%; transform: rotate(-4deg); }
.tag-score strong { color: var(--mint); font-size: 1rem; }
.tag-score span { color: #8b9baa; }

.landing-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; padding: 25px 0 35px; border-top: 1px solid var(--landing-line); }
.landing-note { padding: 12px 23px 12px 0; border-right: 1px solid var(--landing-line); }
.landing-note + .landing-note { padding-left: 23px; }
.note-index { color: #8393a5; font-size: 0.57rem; font-weight: 800; letter-spacing: 0.13em; }
.landing-note p { max-width: 190px; margin: 13px 12px 0 0; color: #b2bdc7; font-size: 0.73rem; line-height: 1.55; }
.join-card { display: flex; flex-direction: column; gap: 8px; margin: -20px 0 0 23px; padding: 17px; border: 1px solid rgba(197, 216, 191, 0.18); border-radius: 11px; background: rgba(20, 34, 45, 0.86); box-shadow: 0 14px 42px rgba(0,0,0,0.16); scroll-margin-top: 25px; }
.join-card-heading { display: flex; justify-content: space-between; margin-bottom: 3px; color: var(--mint); font-size: 0.56rem; font-weight: 850; letter-spacing: 0.13em; }
.join-lock { font-size: 0.86rem; }
.join-card label { color: #c2ccd5; font-size: 0.67rem; }
.join-card input { width: 100%; min-height: 39px; padding: 10px 11px; border: 1px solid rgba(214, 226, 211, 0.14); border-radius: 6px; background: #0b1724; color: white; font-size: 0.75rem; }
.join-card input:focus { outline: 2px solid rgba(255, 95, 158, 0.55); border-color: transparent; }
.join-submit { width: 100%; margin-top: 4px; padding: 11px 13px; color: #101a11; background: var(--mint); border-radius: 6px; font-size: 0.65rem; }
.join-submit:disabled { color: #869184; background: #34413a; cursor: not-allowed; }
.join-hint { color: #8291a0; font-size: 0.58rem; line-height: 1.45; }
.join-hint strong { color: #d2e4c6; }
.landing-footer { display: flex; justify-content: space-between; padding: 14px 0 17px; border-top: 1px solid var(--landing-line); color: #68778a; font-size: 0.52rem; letter-spacing: 0.15em; }
.landing-footer-brand { display: inline-flex; align-items: center; gap: 8px; }
.jacitec-badge { width: 20px; height: 20px; border-radius: 5px; background: #fff; padding: 2px; object-fit: contain; }
.landing-credit-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(146, 240, 199, 0.4); text-underline-offset: 2px; transition: color .15s; }
.landing-credit-link:hover, .landing-credit-link:focus-visible { color: var(--accent); }
.admin-stealth-link { position: fixed; z-index: 5; right: 13px; bottom: 10px; padding: 7px 10px; color: #8291a2; text-decoration: none; font-size: 0.58rem; letter-spacing: .035em; opacity: .7; border: 1px solid rgba(143, 161, 176, .17); border-radius: 7px; background: rgba(12, 24, 38, .78); transition: opacity 0.2s, color 0.2s, border-color 0.2s; }
.admin-stealth-link:hover, .admin-stealth-link:focus-visible { color: var(--mint); opacity: 1; border-color: rgba(255, 95, 158,.4); }
.landing-error { max-width: 570px; margin: 16px auto 0; }

.ranking-page { min-height: 100vh; padding: 0 clamp(20px, 7vw, 110px); color: #f3f6f2; background: radial-gradient(ellipse at 83% 12%, rgba(75, 120, 72, 0.15), transparent 28%), #08111f; }
.ranking-nav { --landing-line: rgba(229, 238, 230, 0.12); }
.ranking-hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 54px 0 34px; }
.ranking-hero > div:first-child { max-width: 650px; }
.ranking-hero .eyebrow-line { display: block; }
.ranking-hero h1 { margin: 15px 0; font-size: clamp(2.7rem, 5.4vw, 4.7rem); }
.ranking-hero p:not(.eyebrow-line) { max-width: 500px; color: #9baaba; font-size: 0.88rem; line-height: 1.65; }
.ranking-event-card { display: grid; gap: 9px; min-width: 235px; padding: 18px; border: 1px solid rgba(202, 225, 194, 0.15); border-radius: 10px; background: rgba(18, 31, 44, 0.8); }
.event-card-label { color: #8091a4; font-size: 0.56rem; font-weight: 850; letter-spacing: 0.14em; }
.ranking-event-card > strong { color: var(--mint); font-size: 1.05rem; letter-spacing: 0.045em; }
.ranking-event-card .status-pill { width: fit-content; margin: 0; padding: 6px 9px; color: #ccd6de; background: rgba(255,255,255,0.07); font-size: 0.58rem; }
.ctf-summary { margin: 0; padding: 13px 0; border-top: 1px solid rgba(229,238,230,0.1); border-bottom: 1px solid rgba(229,238,230,0.1); color: #9baabb; font-size: 0.68rem; }
.ctf-summary > span { display: inline-flex; align-items: center; gap: 8px; }
.summary-dot { background: var(--mint); }
.ranking-board,
.ranking-history { margin-top: 24px; padding: 23px 25px; border: 1px solid rgba(215, 229, 218, 0.13); border-radius: 12px; background: rgba(17, 30, 44, 0.84); }
.board-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.board-heading .section-kicker { margin: 0 0 5px; color: #8594a5; }
.board-heading h2 { margin: 0; color: #f1f5f2; font-size: 1.2rem; letter-spacing: -0.025em; }
.live-refresh { display: inline-flex; align-items: center; gap: 7px; color: #8d9bab; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.1em; }
.live-refresh i { width: 6px; height: 6px; background: var(--mint); box-shadow: 0 0 9px rgba(255, 95, 158,.6); }
.ranking-table-wrap { overflow-x: auto; }
.ranking-page table { min-width: 680px; margin-top: 10px; table-layout: fixed; }
.ranking-page th { padding: 11px 13px; overflow: hidden; color: #75869a; font-size: 0.56rem; letter-spacing: 0.12em; text-overflow: ellipsis; white-space: nowrap; }
.ranking-page td { padding: 14px 13px; overflow: hidden; color: #d9e1e6; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.ranking-page th:nth-child(1), .ranking-page td:nth-child(1) { width: 9%; }
.ranking-page th:nth-child(2), .ranking-page td:nth-child(2) { width: 29%; white-space: normal; }
.ranking-page th:nth-child(3), .ranking-page td:nth-child(3) { width: 18%; }
.ranking-page th:nth-child(4), .ranking-page td:nth-child(4) { width: 14%; }
.ranking-page th:nth-child(5), .ranking-page td:nth-child(5) { width: 30%; white-space: normal; }
.ranking-page tbody tr { transition: background 0.2s; }
.ranking-page tbody tr:hover { background: rgba(255,255,255,0.035); }
.ranking-page .podium-first td { background: rgba(255, 95, 158,.08); color: #ffd7e6; }
.ranking-page .podium-second td { background: rgba(195,215,232,.055); color: #e0e7ed; }
.ranking-page .podium-third td { background: rgba(207,139,99,.055); color: #f1d1b4; }
.ranking-page .status-pill { color: #d1dfc9; }
.history-caption { color: #8190a1; font-size: 0.65rem; }
.ranking-history { margin-bottom: 28px; }
.ranking-history .history-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ranking-history .history-card { min-height: 135px; padding: 17px; background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.075); }
.ranking-history .history-card span,
.ranking-history .history-card time { color: #8999aa; font-size: 0.69rem; }
.archive-link { color: #e4f3d9; font-size: 0.82rem; }
.ranking-footer { display: flex; justify-content: space-between; padding: 17px 0 22px; border-top: 1px solid rgba(229,238,230,0.1); color: #657589; font-size: 0.55rem; letter-spacing: 0.13em; }
.ranking-footer a { color: #9aa9b6; text-decoration: none; letter-spacing: 0; }
.ranking-footer a:hover { color: var(--mint); }

.admin-login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 82px 20px 24px; background: radial-gradient(ellipse at 50% 25%, rgba(73, 111, 74, 0.17), transparent 34%), #08111f; }
.admin-login-page > .landing-brand { position: absolute; top: 27px; left: clamp(20px, 7vw, 110px); }
.admin-login-card { width: min(460px, 100%); margin: 0 auto; padding: 30px; border: 1px solid rgba(214,229,218,0.14); border-radius: 15px; background: rgba(16,29,43,.91); box-shadow: 0 28px 95px rgba(0,0,0,.34); }
.admin-login-icon { width: 43px; height: 43px; display: grid; place-items: center; margin-bottom: 22px; border: 1px solid rgba(255, 95, 158,.25); border-radius: 12px; color: var(--mint); background: rgba(255, 95, 158,.07); font-size: 1.3rem; }
.admin-login-card .section-kicker { margin: 0; color: var(--mint); }
.admin-login-card h1 { margin: 9px 0 10px; color: #f2f5f2; font-size: clamp(2rem, 7vw, 2.7rem); line-height: 1; letter-spacing: -0.06em; }
.admin-login-intro { color: #9caaba; font-size: 0.83rem; line-height: 1.6; }
.admin-login-card .notice { font-size: 0.7rem; line-height: 1.5; }
.admin-login-form { display: grid; gap: 9px; margin-top: 20px; }
.admin-login-form label { margin-top: 4px; color: #bdc8d0; font-size: 0.71rem; }
.admin-login-form input { min-height: 45px; padding: 12px; border-color: rgba(215,228,217,.15); border-radius: 7px; background: #0b1724; font-size: 0.79rem; }
.admin-login-form input:focus { outline: 2px solid rgba(255, 95, 158,.48); border-color: transparent; }
.admin-login-submit { width: 100%; margin-top: 11px; color: #111a11; background: var(--mint); }
.admin-login-back { display: block; margin-top: 18px; color: #9eacb9; text-align: center; text-decoration: none; font-size: 0.72rem; }
.admin-login-back:hover { color: var(--mint); }
.admin-login-foot { margin-top: 15px; color: #556579; font-size: 0.55rem; letter-spacing: .15em; text-align: center; }

.admin-page { min-height: 100vh; padding: 0 clamp(20px, 6vw, 88px); background: #f1f4f1; color: #192635; }
.admin-topbar { --landing-line: rgba(19, 36, 48, 0.12); min-height: 75px; }
.admin-topbar .landing-brand { color: #152637; }
.admin-topbar .landing-brand small { color: #758494; }
.admin-topbar .brand-symbol { color: #101a13; }
.admin-topbar-right { display: flex; align-items: center; gap: 23px; }
.admin-secure { display: inline-flex; align-items: center; gap: 8px; color: #6c7d89; font-size: 0.58rem; font-weight: 800; letter-spacing: .1em; }
.admin-secure i { width: 6px; height: 6px; background: #55a86f; }
.admin-topbar-right > a { color: #586b7b; text-decoration: none; font-size: 0.7rem; }
.admin-welcome { display: flex; justify-content: space-between; align-items: end; gap: 25px; padding: 34px 0 25px; }
.admin-welcome .section-kicker { margin: 0 0 8px; color: #76934f; }
.admin-welcome h1 { margin: 0; color: #152638; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.06em; }
.admin-welcome p:not(.section-kicker) { margin: 8px 0 0; color: #6f7f8a; font-size: 0.78rem; }
.admin-event-state { display: flex; align-items: center; gap: 12px; min-width: 205px; padding: 13px 16px; border: 1px solid #d9e1dc; border-radius: 9px; background: #f8faf8; }
.admin-event-state .state-pulse { flex: 0 0 auto; background: #84928a; box-shadow: none; animation: none; }
.admin-event-state.active .state-pulse { background: #4bb46b; box-shadow: 0 0 10px rgba(75,180,107,.45); animation: statusPulse 1.8s infinite; }
.admin-event-state small, .admin-event-state strong { display: block; }
.admin-event-state small { color: #87948f; font-size: 0.52rem; letter-spacing: .1em; }
.admin-event-state strong { margin-top: 4px; color: #374b42; font-size: 0.65rem; }
.admin-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.admin-stat-card { min-height: 105px; display: flex; flex-direction: column; justify-content: center; padding: 17px; border: 1px solid #dfe5e0; border-radius: 10px; background: #fbfcfa; }
.admin-stat-card > span { color: #7c8991; font-size: 0.54rem; font-weight: 850; letter-spacing: .12em; }
.admin-stat-card > strong { margin-top: 8px; color: #152638; font-size: 1.5rem; letter-spacing: -.04em; }
.admin-stat-card:first-child > strong { color: #487238; font-size: 0.98rem; letter-spacing: 0; }
.admin-stat-card > small { margin-top: 2px; color: #8b979e; font-size: 0.62rem; }
.admin-content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr); align-items: start; gap: 18px; margin-top: 18px; }
.admin-main-column, .admin-side-column { display: grid; gap: 18px; }
.admin-panel { padding: 21px; border: 1px solid #dfe5e0; border-radius: 11px; background: #fbfcfa; box-shadow: 0 7px 22px rgba(27,47,40,.035); }
.admin-panel-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 17px; }
.admin-panel-heading .section-kicker { margin: 0 0 4px; color: #82937c; }
.admin-panel-heading h2, .create-event-panel h2 { margin: 0; color: #182a3a; font-size: 1.05rem; letter-spacing: -.03em; }
.admin-panel-heading > a { color: #577743; text-decoration: none; font-size: 0.65rem; }
.admin-panel-heading > span { color: #77858c; font-size: 0.63rem; }
.admin-ranking-list { display: grid; }
.admin-rank-row { display: grid; grid-template-columns: 37px minmax(0,1fr) 88px 83px; align-items: center; gap: 11px; min-height: 56px; border-top: 1px solid #e8ece8; }
.admin-rank-number { color: #84918f; font-size: 0.68rem; font-weight: 850; }
.admin-rank-number.rank-medal { color: #769b4e; }
.admin-rank-name { color: #293a49; font-size: 0.75rem; font-weight: 750; }
.admin-rank-name small { display: block; margin-top: 4px; color: #87948f; font-size: 0.59rem; font-weight: 500; }
.admin-rank-row .ranking-points-cell { justify-content: flex-end; }
.admin-rank-row strong { color: #293f32; text-align: right; font-size: 0.82rem; }
.admin-rank-row strong small { color: #829087; font-size: 0.5rem; }
.admin-rank-row time { color: #6d7c83; text-align: right; font-family: ui-monospace, monospace; font-size: 0.65rem; }
.admin-empty { display: grid; place-items: center; padding: 27px 15px 18px; text-align: center; }
.admin-empty > span { color: #87a56c; font-size: 1.8rem; }
.admin-empty strong { margin-top: 9px; color: #344a3b; font-size: 0.75rem; }
.admin-empty p { margin: 6px 0 0; color: #83908a; font-size: 0.67rem; }
.admin-archive-list { display: grid; gap: 8px; }
.admin-archive-card { display: grid; grid-template-columns: 40px minmax(0,1fr) auto 25px; align-items: center; gap: 11px; padding: 11px; border: 1px solid #e6ebe6; border-radius: 8px; background: #fff; }
.archive-code-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: #587642; background: #eef4e9; font-size: 0.57rem; font-weight: 900; }
.archive-card-main strong, .archive-card-main span { display: block; }
.archive-card-main strong { color: #2c3d4b; font-size: 0.72rem; }
.archive-card-main span { margin-top: 4px; color: #85918e; font-size: 0.58rem; }
.archive-status { padding: 5px 7px; border-radius: 99px; color: #67824d; background: #eff5e9; font-size: 0.52rem; font-weight: 800; }
.admin-archive-card > a { color: #758c60; text-align: center; text-decoration: none; font-size: 1.05rem; }
.admin-archive-empty { color: #84918d; font-size: 0.72rem; line-height: 1.6; }
.create-event-panel { padding: 22px; color: #ecf2e8; background: #13251f; border-color: #263e34; }
.create-event-panel .section-kicker { margin: 0 0 7px; color: var(--mint); }
.create-event-panel h2 { color: #f2f5ef; font-size: 1.25rem; }
.create-event-panel > p:not(.section-kicker) { color: #a0b0a8; font-size: 0.7rem; line-height: 1.55; }
.create-event-panel form { display: grid; gap: 8px; margin-top: 18px; }
.create-event-panel label { color: #d2ded4; font-size: 0.66rem; }
.duration-input { display: flex; align-items: center; border: 1px solid rgba(207,228,210,.16); border-radius: 7px; background: #0c1b17; }
.duration-input input { width: 100%; min-width: 0; padding: 11px; border: 0; background: transparent; color: #eff7eb; font-size: 0.77rem; }
.duration-input span { padding: 0 11px; color: #879a8e; font-size: 0.62rem; white-space: nowrap; }
.create-event-panel form > small { color: #84968c; font-size: 0.57rem; }
.create-event-button { width: 100%; margin-top: 7px; color: #101a11; background: var(--mint); font-size: 0.65rem; }
.admin-current-code { display: grid; gap: 5px; margin-top: 18px; padding: 13px; border: 1px solid rgba(255, 95, 158,.2); border-radius: 8px; background: rgba(255, 95, 158,.055); }
.admin-current-code small { color: #a7b6a7; font-size: 0.52rem; letter-spacing: .11em; }
.admin-current-code strong { color: var(--mint); font-size: 1rem; letter-spacing: .06em; }
.admin-current-code span { color: #9aa99d; font-size: 0.61rem; }
.finalize-form { margin-top: 10px; }
.finalize-form .danger-btn { width: 100%; border-radius: 7px; font-size: 0.62rem; }
.admin-side-note { padding: 0 5px; }
.admin-side-note span { color: #88958b; font-size: 0.53rem; font-weight: 850; letter-spacing: .13em; }
.admin-side-note p { color: #7c8a83; font-size: 0.67rem; line-height: 1.55; }

/* Biblioteca de desafios (admin): atalho no painel + páginas de gabarito. */
.admin-library-link { display: grid; gap: 5px; padding: 16px; margin-bottom: 14px; border: 1px solid #cfe0d2; border-radius: 12px; background: #f3f8f3; text-decoration: none; transition: border-color .15s, background .15s, transform .15s; }
.admin-library-link:hover { border-color: #8cc79a; background: #ecf5ec; transform: translateY(-1px); }
.admin-library-link .section-kicker { color: #5f9168; }
.admin-library-link strong { color: #184a2b; font-size: .9rem; }
.admin-library-link small { color: #6f7f74; font-size: .64rem; line-height: 1.45; }
.admin-restrict-note { display: block; }
.admin-challenge-list { margin-bottom: 18px; }
.challenge-group { margin-top: 16px; }
.challenge-group-title { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; color: #5c6a62; font-size: .72rem; font-weight: 700; }
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.challenge-tile { display: grid; gap: 4px; padding: 13px 14px; border: 1px solid #d9e2db; border-radius: 10px; background: #fff; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.challenge-tile:hover { border-color: #8cc79a; box-shadow: 0 4px 14px rgba(24, 74, 43, .08); transform: translateY(-1px); }
.challenge-tile-code { color: #789; font-size: .58rem; font-weight: 850; letter-spacing: .08em; }
.challenge-tile strong { color: #1c3326; font-size: .82rem; }
.challenge-tile-meta { color: #7a877f; font-size: .62rem; }
.walkthrough-context { margin: 0 0 14px; color: #5c6a62; font-size: .8rem; line-height: 1.6; }
.walkthrough-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.walkthrough-steps li { color: #2b3c32; font-size: .82rem; line-height: 1.55; }
.walkthrough-steps code, .walkthrough-aside code, .walkthrough-flag code, .walkthrough-facts code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.walkthrough-aside { margin-top: 16px; padding: 12px 14px; background: #10202d; border-radius: 9px; }
.walkthrough-aside span { display: block; margin-bottom: 6px; color: #9bb1c7; font-size: .62rem; letter-spacing: .05em; }
.walkthrough-aside code { display: block; overflow-wrap: anywhere; color: #a8efbd; font-size: .78rem; }
.walkthrough-flag { padding: 14px; margin-bottom: 14px; background: #10202d; border: 1px solid rgba(255, 95, 158,.25); border-radius: 10px; }
.walkthrough-flag code { display: block; overflow-wrap: anywhere; color: #ff9ec3; font-size: .9rem; font-weight: 700; }
.walkthrough-facts { display: grid; gap: 3px 0; margin: 0; }
.walkthrough-facts dt { color: #8a968f; font-size: .58rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.walkthrough-facts dd { margin: 0 0 11px; color: #33443a; font-size: .76rem; line-height: 1.45; }
.walkthrough-facts code { color: #1c3326; }
.walkthrough-hints { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.walkthrough-hints li { color: #44524a; font-size: .73rem; line-height: 1.5; }
.admin-footer { display: flex; justify-content: space-between; margin-top: 22px; padding: 14px 0 19px; border-top: 1px solid #dce3dd; color: #89958f; font-size: 0.53rem; letter-spacing: .11em; }
.admin-footer a { color: #71836e; text-decoration: none; letter-spacing: 0; }
.admin-alert { color: #735c25 !important; background: #fff6dc !important; border-color: #eadba7 !important; }

@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: .48; } }
@keyframes cursorBlink { to { visibility: hidden; } }

@media (max-width: 900px) {
  .landing-page, .ranking-page, .admin-page { padding-right: 28px; padding-left: 28px; }
  .landing-hero { grid-template-columns: 1fr 0.8fr; }
  .landing-bottom { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .join-card { grid-column: 1 / -1; max-width: 430px; margin: 0; }
  .admin-content-grid { grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); }
}

@media (max-width: 640px) {
  .landing-page, .ranking-page, .admin-page { padding-right: 17px; padding-left: 17px; }
  .landing-nav, .ranking-nav, .admin-topbar { min-height: 67px; }
  .landing-nav nav { display: none; }
  .event-indicator { font-size: 0.5rem; letter-spacing: .06em; }
  .landing-brand { font-size: 0.7rem; }
  .brand-symbol { width: 33px; height: 33px; }
  .landing-hero { min-height: auto; grid-template-columns: 1fr; gap: 0; padding: 48px 0 24px; }
  .hero-copy h1 { font-size: clamp(3rem, 13vw, 4.3rem); }
  .hero-description { font-size: 0.85rem; }
  .hero-actions { gap: 16px; }
  .hero-primary { min-width: auto; padding: 13px; font-size: 0.72rem; }
  .hero-secondary { font-size: 0.7rem; }
  .hero-art { height: 275px; margin: 12px 0; }
  .orbit-one { width: 300px; height: 190px; }
  .orbit-two { width: 250px; height: 150px; }
  .terminal-card { width: min(360px, 89%); }
  .terminal-body { padding: 17px; font-size: 0.62rem; }
  .tag-flag { right: 0; top: 8%; }
  .tag-score { bottom: 5%; left: 0; }
  .landing-bottom { grid-template-columns: 1fr; gap: 0; padding-top: 15px; }
  .landing-note, .landing-note + .landing-note { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--landing-line); }
  .landing-note p { max-width: none; margin: 0; font-size: 0.68rem; }
  .note-index { flex: 0 0 104px; }
  .join-card { margin-top: 18px; }
  .landing-footer { font-size: 0.44rem; letter-spacing: .08em; }
  .landing-footer span:nth-child(2) { display: none; }
  .admin-stealth-link { right: 6px; bottom: 4px; }
  .ranking-hero { display: grid; padding: 38px 0 25px; }
  .ranking-hero h1 { font-size: clamp(2.6rem, 12vw, 3.7rem); }
  .ranking-event-card { min-width: 0; }
  .ranking-board, .ranking-history { padding: 17px 13px; }
  .board-heading { align-items: start; }
  .live-refresh, .history-caption { font-size: 0.46rem; }
  .ranking-footer { font-size: 0.45rem; letter-spacing: .07em; }
  .admin-login-page > .landing-brand { top: 16px; left: 17px; }
  .admin-login-card { padding: 24px 19px; }
  .admin-login-foot { font-size: .45rem; }
  .admin-topbar-right { gap: 10px; }
  .admin-secure { font-size: .46rem; letter-spacing: .04em; }
  .admin-topbar-right > a { font-size: .62rem; }
  .admin-welcome { display: grid; padding: 27px 0 18px; }
  .admin-event-state { min-width: 0; width: fit-content; }
  .admin-stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .admin-stat-card { min-height: 89px; padding: 12px; }
  .admin-stat-card > strong { font-size: 1.25rem; }
  .admin-content-grid { grid-template-columns: 1fr; }
  .admin-panel { padding: 16px 13px; }
  .admin-rank-row { grid-template-columns: 27px minmax(0,1fr) 49px 68px; gap: 7px; }
  .admin-rank-name { font-size: .69rem; }
  .admin-rank-name small { font-size: .52rem; }
  .admin-rank-row time { font-size: .57rem; }
  .admin-archive-card { grid-template-columns: 34px minmax(0,1fr) 20px; }
  .archive-status { display: none; }
  .admin-footer { gap: 12px; font-size: .45rem; }
}

/* Archived CTF dashboard and destructive-action confirmations. */
.page-shell:has(.archive-page) { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0; }
.archive-page { min-height: 100vh; padding: 0 clamp(20px,7vw,110px); color: #f1f5f2; background: radial-gradient(ellipse at 85% 20%,rgba(93,137,77,.14),transparent 29%),#08111f; }
.archive-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(229,238,230,.12); }
.archive-nav-actions { display: flex; align-items: center; gap: 18px; }
.archive-nav-label { color: #8d9baa; font-size: .56rem; font-weight: 850; letter-spacing: .13em; }
.archive-nav-actions > a { color: #bdc8d0; text-decoration: none; font-size: .69rem; }
.archive-nav-actions > a:hover { color: var(--mint); }
.archive-hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 43px 0 30px; }
.archive-hero .eyebrow-line { display: block; }
.archive-hero h1 { margin: 14px 0 8px; color: #f3f6f2; font-size: clamp(2.6rem,5vw,4.3rem); line-height: 1; letter-spacing: -.065em; }
.archive-hero-copy > p:last-child { margin: 0; color: #9aa9b7; font-size: .8rem; }
.archive-status-card { display: flex; align-items: center; gap: 11px; min-width: 190px; padding: 13px 15px; border: 1px solid rgba(255, 95, 158,.19); border-radius: 9px; background: rgba(255, 95, 158,.055); }
.archive-status-symbol { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; color: var(--mint); background: rgba(255, 95, 158,.12); }
.archive-status-card small,.archive-status-card strong { display: block; }
.archive-status-card small { color: #849589; font-size: .5rem; letter-spacing: .11em; }
.archive-status-card strong { margin-top: 4px; color: #d9efcb; font-size: .65rem; }
.archive-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid rgba(219,232,218,.12); border-radius: 10px; background: rgba(17,30,44,.82); }
.archive-metrics article { display: grid; gap: 7px; min-height: 82px; align-content: center; padding: 12px 17px; border-right: 1px solid rgba(219,232,218,.1); }
.archive-metrics article:last-child { border-right: 0; }
.archive-metrics article > span { color: #8695a2; font-size: .52rem; font-weight: 850; letter-spacing: .12em; }
.archive-metrics article > strong { color: #e1e9e3; font-size: .74rem; }
.archive-results-panel { margin-top: 21px; padding: 22px; border: 1px solid rgba(219,232,218,.13); border-radius: 11px; background: rgba(17,30,44,.88); }
.archive-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 16px; }
.archive-section-heading .section-kicker { margin: 0 0 5px; color: #8da281; }
.archive-section-heading h2 { margin: 0; color: #eef3ef; font-size: 1.13rem; letter-spacing: -.03em; }
.archive-section-heading > span { color: #91a0aa; font-size: .62rem; }
.archive-table-wrap { overflow-x: auto; }
.archive-results-table { min-width: 800px; margin: 0; table-layout: fixed; }
.archive-results-table th { padding: 12px 13px; overflow: hidden; color: #8494a2; font-size: .53rem; letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; }
.archive-results-table td { padding: 14px 13px; overflow: hidden; color: #cbd5d8; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.archive-results-table th:nth-child(1), .archive-results-table td:nth-child(1) { width: 7%; }
.archive-results-table th:nth-child(2), .archive-results-table td:nth-child(2) { width: 21%; white-space: normal; }
.archive-results-table th:nth-child(3), .archive-results-table td:nth-child(3) { width: 16%; }
.archive-results-table th:nth-child(4), .archive-results-table td:nth-child(4) { width: 12%; }
.archive-results-table th:nth-child(5), .archive-results-table td:nth-child(5) { width: 17%; }
.archive-results-table th:nth-child(6), .archive-results-table td:nth-child(6) { width: 27%; white-space: normal; }
.archive-results-table tbody tr:not(.archive-detail-row) { border-top: 1px solid rgba(229,238,230,.07); }
.archive-results-table .archive-first td { background: rgba(255, 95, 158,.075); }
.archive-results-table .archive-second td { background: rgba(195,215,232,.045); }
.archive-results-table .archive-third td { background: rgba(207,139,99,.045); }
.archive-position { font-size: .9rem; }
.archive-participant-name { color: #f0f4ef; }
.archive-points { color: #ffd7e6; font-size: .8rem; }
.archive-points small { color: #91a48b; font-size: .5rem; }
.archive-elapsed { color: #c3d0d4; font-family: ui-monospace,monospace; font-size: .69rem; }
.archive-muted { color: #82919d; }
.archive-participant-status { display: inline-block; padding: 5px 8px; border-radius: 99px; color: #b7c3cb; background: rgba(255,255,255,.06); font-size: .56rem; white-space: nowrap; }
.archive-participant-status.participant-ended { color: #d1edbd; background: rgba(255, 95, 158,.09); }
.archive-detail-row td { padding: 0 13px 9px; border-bottom: 1px solid rgba(229,238,230,.08); }
.archive-challenge-details summary { display: flex; justify-content: space-between; padding: 0 0 11px; color: #a9bd9a; cursor: pointer; list-style: none; font-size: .63rem; }
.archive-challenge-details summary::-webkit-details-marker { display: none; }
.archive-challenge-details summary span { color: var(--mint); }
.archive-challenge-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 0 0 12px; }
.archive-challenge-card { padding: 10px; border: 1px solid rgba(222,233,223,.08); border-radius: 7px; background: rgba(255,255,255,.025); }
.archive-challenge-card > div { display: flex; justify-content: space-between; gap: 5px; color: #8495a0; font-size: .5rem; }
.archive-challenge-card > div strong { color: #9db58b; }
.archive-challenge-card h3 { margin: 9px 0 5px; color: #dce5df; font-size: .61rem; }
.archive-challenge-card p,.archive-challenge-card time { margin: 0; color: #84949e; font-size: .53rem; }
.archive-challenge-card.challenge-solved { border-color: rgba(255, 95, 158,.22); }
.archive-empty-state { padding: 35px !important; color: #9aa9b7 !important; text-align: center; }
.archive-footer { display: flex; justify-content: space-between; gap: 10px; padding: 17px 0 24px; color: #82909e; font-size: .57rem; }
.archive-footer a { color: #b6c4c9; text-decoration: none; }
.archive-footer a:hover { color: var(--mint); }

.admin-archive-card { grid-template-columns: 40px minmax(0,1fr) auto auto 25px; }
.admin-archive-card > a { padding: 5px 7px; color: #627a4d; border: 1px solid #e1e9da; border-radius: 6px; font-size: .55rem; white-space: nowrap; }
.archive-delete-trigger { width: 25px; height: 25px; padding: 0; color: #a85d58; background: #fff7f5; border: 1px solid #f0ddd9; border-radius: 6px; font-size: 1rem; cursor: pointer; }
.archive-delete-trigger:hover { color: white; background: #a84f49; }
.finalize-open { width: 100%; margin-top: 10px; }
.admin-confirm-dialog,.event-ended-dialog { width: min(470px,calc(100vw - 30px)); padding: 0; color: #f1f5f2; background: #10202d; border: 1px solid rgba(201,222,204,.2); border-radius: 15px; box-shadow: 0 30px 100px rgba(0,0,0,.5); }
.admin-confirm-dialog::backdrop,.event-ended-dialog::backdrop { background: rgba(3,9,16,.76); backdrop-filter: blur(4px); }
.admin-confirm-dialog form,.event-ended-content { display: grid; padding: 27px; }
.confirm-icon,.event-ended-icon { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 16px; color: #ffd087; background: rgba(255,208,135,.1); border: 1px solid rgba(255,208,135,.17); border-radius: 11px; font-size: 1.2rem; }
.confirm-icon.delete-icon { color: #ffaba2; background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.2); }
.admin-confirm-dialog .section-kicker { margin: 0 0 6px; color: #a8bb91; }
.admin-confirm-dialog h2,.event-ended-dialog h2 { margin: 0 0 10px; color: #f1f5f2; font-size: 1.55rem; line-height: 1.08; letter-spacing: -.04em; }
.admin-confirm-dialog p:not(.section-kicker),.event-ended-content > p:not(.panel-eyebrow) { margin: 0; color: #a9b7bf; font-size: .78rem; line-height: 1.6; }
.confirm-actions { display: flex; gap: 9px; margin-top: 21px; }
.confirm-actions button { flex: 1; min-height: 41px; border-radius: 7px; font: inherit; font-size: .67rem; font-weight: 800; cursor: pointer; }
.confirm-cancel { color: #d5dfe1; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); }
.confirm-danger { color: white; background: #a84f49; border: 1px solid #c16760; }
.confirm-danger:hover { background: #bd5a52; }

.event-ended-dialog { width: min(510px,calc(100vw - 30px)); }
.event-ended-content { padding: 31px; }
.event-ended-icon { color: var(--mint); background: rgba(255, 95, 158,.1); border-color: rgba(255, 95, 158,.2); }
.event-ended-content .panel-eyebrow { margin: 0 0 6px; color: var(--mint); }
.event-ended-actions { display: grid; gap: 9px; margin-top: 23px; }
.event-ranking-button,.event-home-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 11px 14px; border-radius: 7px; text-decoration: none; font-size: .71rem; font-weight: 800; }
.event-ranking-button { color: #101a11; background: var(--mint); }
.event-home-button { justify-content: center; color: #d2dcdf; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11); }

@media (max-width: 900px) {
  .archive-page { padding-right: 28px; padding-left: 28px; }
  .archive-challenge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .archive-page { padding-right: 17px; padding-left: 17px; }
  .archive-nav { min-height: 67px; }
  .archive-nav-label { display: none; }
  .archive-hero { display: grid; gap: 17px; padding: 32px 0 22px; }
  .archive-status-card { min-width: 0; width: fit-content; }
  .archive-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .archive-metrics article:nth-child(2) { border-right: 0; }
  .archive-metrics article:nth-child(-n+2) { border-bottom: 1px solid rgba(219,232,218,.1); }
  .archive-results-panel { padding: 16px 12px; }
  .archive-challenge-grid { grid-template-columns: 1fr 1fr; }
  .archive-footer { flex-wrap: wrap; font-size: .5rem; }
  .admin-archive-card { grid-template-columns: 34px minmax(0,1fr) auto 24px; }
  .admin-archive-card > a { grid-column: 2 / 4; justify-self: start; }
  .archive-delete-trigger { grid-column: 4; grid-row: 1; }
  .confirm-actions { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.page-shell:has(.participation-page) { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0; }
.participation-page { --landing-line: rgba(229,238,230,.12); min-height: 100vh; padding: 0 clamp(20px,7vw,110px); background: radial-gradient(ellipse at 82% 45%, rgba(82,132,76,.12), transparent 32%), #08111f; color: #f3f6f2; }
.participation-nav { display: flex; align-items: center; justify-content: space-between; min-height: 78px; border-bottom: 1px solid var(--landing-line); }
.participation-back { color: #a1afbc; text-decoration: none; font-size: .75rem; }
.participation-back:hover, .participation-footer a:hover { color: var(--mint); }
.participation-heading { max-width: 760px; padding: 42px 0 29px; }
.participation-heading .eyebrow-line { display: flex; align-items: center; gap: 12px; }
.participation-heading h1 { margin: 15px 0 12px; color: #f4f7f3; font-size: clamp(2.7rem,5vw,4.5rem); line-height: .98; letter-spacing: -.07em; }
.participation-heading h1 em { color: var(--mint); font-style: normal; }
.participation-heading > p:last-child { max-width: 650px; color: #9eacb9; font-size: .86rem; line-height: 1.7; }
.participation-content { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); align-items: start; gap: clamp(28px,6vw,80px); padding: 9px 0 44px; }
.participation-section-heading .section-kicker { margin: 0; color: var(--mint); }
.participation-section-heading h2 { margin: 8px 0; color: #edf2ee; font-size: 1.22rem; letter-spacing: -.035em; }
.participation-section-heading > p { max-width: 550px; margin: 0; color: #8999a9; font-size: .74rem; line-height: 1.65; }
.technology-list { display: grid; gap: 9px; margin-top: 20px; }
.technology-card { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 13px; padding: 15px; border: 1px solid rgba(216,231,218,.11); border-radius: 9px; background: rgba(17,31,45,.78); }
.technology-number { color: var(--mint); font-family: ui-monospace,monospace; font-size: .72rem; font-weight: 800; }
.technology-card strong { color: #e6ece7; font-size: .77rem; }
.technology-card p { margin: 6px 0 8px; color: #93a2b0; font-size: .68rem; line-height: 1.55; }
.technology-card small { color: #65778a; font-size: .53rem; font-weight: 800; letter-spacing: .11em; }
.participation-note { display: flex; align-items: start; gap: 10px; margin-top: 14px; padding: 12px 14px; border-left: 2px solid rgba(255, 95, 158,.62); background: rgba(255, 95, 158,.045); }
.participation-note > span { color: var(--mint); font-size: .88rem; }
.participation-note p { margin: 0; color: #84949f; font-size: .64rem; line-height: 1.55; }
.participation-access { position: sticky; top: 22px; padding: 24px; border: 1px solid rgba(192,219,192,.2); border-radius: 12px; background: linear-gradient(145deg,rgba(22,39,49,.97),rgba(13,28,39,.98)); box-shadow: 0 22px 60px rgba(0,0,0,.18); }
.access-card-top { display: flex; align-items: center; justify-content: space-between; }
.access-card-top .section-kicker { margin: 0; color: #93ad7c; }
.access-lock { color: var(--mint); font-size: 1.2rem; }
.access-event-status { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: #abb6bb; font-size: .64rem; }
.access-event-status i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #7c8890; }
.access-event-status.is-live i { background: var(--mint); box-shadow: 0 0 11px rgba(255, 95, 158,.55); }
.participation-access h2 { margin: 16px 0 8px; color: #f2f5f1; font-size: 1.8rem; line-height: 1; letter-spacing: -.055em; }
.participation-access > p { margin: 0; color: #93a2ad; font-size: .71rem; line-height: 1.6; }
.participation-error { font-size: .68rem; line-height: 1.5; }
.participation-form { display: grid; gap: 8px; margin-top: 20px; }
.participation-form label { margin-top: 4px; color: #bdc8d0; font-size: .66rem; }
.participation-form input { min-height: 44px; padding: 11px; border: 1px solid rgba(215,228,217,.15); border-radius: 7px; background: #0b1724; color: #f3f6f2; font-size: .74rem; }
.participation-form input:focus { outline: 2px solid rgba(255, 95, 158,.48); border-color: transparent; }
.participation-submit { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 13px; color: #111a11; background: var(--mint); border: 0; border-radius: 7px; font: inherit; font-size: .72rem; font-weight: 850; cursor: pointer; transition: transform .18s,background .18s; }
.participation-submit:not(:disabled):hover { transform: translateY(-2px); background: #c5ff85; }
.participation-submit:disabled { color: #a0aaa0; background: #3a473d; cursor: not-allowed; }
.access-footnote { display: block; margin-top: 10px; color: #81919c; font-size: .6rem; line-height: 1.5; }
.access-card-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 19px; padding-top: 12px; border-top: 1px solid rgba(229,238,230,.1); color: #718293; font-size: .49rem; font-weight: 800; letter-spacing: .1em; }
.participation-footer { display: flex; justify-content: space-between; padding: 15px 0 25px; border-top: 1px solid var(--landing-line); color: #677789; font-size: .54rem; letter-spacing: .12em; }
.participation-footer a { color: #9aa9b7; text-decoration: none; letter-spacing: 0; }

@media (max-width: 900px) {
  .participation-page { padding-right: 28px; padding-left: 28px; }
  .participation-content { grid-template-columns: minmax(0,1fr) minmax(265px,.8fr); gap: 24px; }
}

@media (max-width: 640px) {
  .participation-page { padding-right: 17px; padding-left: 17px; }
  .participation-nav { min-height: 67px; }
  .participation-back { font-size: .65rem; }
  .participation-heading { padding: 34px 0 20px; }
  .participation-heading h1 { font-size: clamp(2.5rem,11vw,3.5rem); }
  .participation-heading > p:last-child { font-size: .77rem; }
  .participation-content { grid-template-columns: 1fr; gap: 22px; }
  .participation-access { position: static; grid-row: 1; padding: 19px; }
  .technology-card { grid-template-columns: 31px minmax(0,1fr); padding: 13px; }
  .participation-footer { font-size: .47rem; }
  .admin-stealth-link { right: 6px; bottom: 4px; }
}

/* Detailed score breakdown: eye icon + modal, reused on ranking, archive,
   admin and the participant's own dashboard. */
.ranking-points-cell { display: inline-flex; align-items: center; gap: 7px; }
.score-eye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: inherit;
  background: rgba(137, 190, 220, 0.14);
  border: 1px solid rgba(137, 190, 220, 0.3);
  border-radius: 7px;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity .15s, background .15s, transform .15s;
}
.score-eye-btn:hover { opacity: 1; background: rgba(137, 190, 220, 0.28); transform: translateY(-1px); }
.score-eye-btn:focus-visible { outline: 2px solid #ff5f9e; outline-offset: 2px; }
.panel-metrics .ranking-points-cell { flex-wrap: wrap; }
.panel-metrics .score-eye-btn { width: 20px; height: 20px; font-size: 0.62rem; }

.challenge-results-dialog {
  width: min(680px, calc(100vw - 30px));
  max-height: min(80vh, 640px);
  padding: 0;
  color: #f1f5f2;
  background: #10202d;
  border: 1px solid rgba(201, 222, 204, 0.2);
  border-radius: 15px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.challenge-results-dialog::backdrop { background: rgba(3, 9, 16, 0.76); backdrop-filter: blur(4px); }
.challenge-results-content { display: grid; max-height: min(80vh, 640px); padding: 27px; overflow-y: auto; }
.challenge-results-icon { color: #ff9ec3; background: rgba(255, 95, 158, 0.1); border-color: rgba(255, 95, 158, 0.2); }
.challenge-results-dialog h2 { margin: 0 0 14px; color: #f1f5f2; font-size: 1.3rem; line-height: 1.1; letter-spacing: -0.03em; }
.challenge-results-dialog .archive-challenge-grid { padding: 0; }
.challenge-results-dialog .confirm-actions { margin-top: 20px; }

@media (max-width: 480px) {
  .challenge-results-content { padding: 20px; }
}

.score-breakdown-dialog {
  width: min(440px, calc(100vw - 30px));
  padding: 0;
  color: #f1f5f2;
  background: #10202d;
  border: 1px solid rgba(201, 222, 204, 0.2);
  border-radius: 15px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
}
.score-breakdown-dialog::backdrop { background: rgba(3, 9, 16, 0.76); backdrop-filter: blur(4px); }
.score-breakdown-content { display: grid; padding: 27px; }
.score-breakdown-icon { color: #ffb3d1; background: rgba(255, 95, 158, 0.1); border-color: rgba(255, 95, 158, 0.2); }
.score-breakdown-dialog h2 { margin: 0 0 14px; color: #f1f5f2; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.03em; }
.score-breakdown-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: rgba(255, 95, 158, 0.08);
  border: 1px solid rgba(255, 95, 158, 0.18);
  border-radius: 11px;
}
.score-breakdown-total strong { font-size: 1.5rem; color: #ffb3d1; }
.score-breakdown-total span { color: #9bb1c7; font-size: 0.75rem; }
.score-breakdown-rows { display: grid; gap: 9px; }
.score-breakdown-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 9px;
}
.score-breakdown-label { grid-column: 1; font-size: 0.78rem; font-weight: 700; color: #dce7ee; }
.score-breakdown-row strong { grid-column: 2; text-align: right; font-size: 0.82rem; color: #ffd7e6; }
.score-breakdown-row small { grid-column: 1 / -1; color: #8fa0ae; font-size: 0.63rem; }
.score-breakdown-hints { margin: 14px 0 0; color: #9bb1c7; font-size: 0.68rem; }
.score-breakdown-dialog .confirm-actions { margin-top: 20px; }

@media (max-width: 480px) {
  .score-breakdown-content { padding: 20px; }
}

/* Botão "Executar" (ambiente de teste do gabarito) e avisos de exclusão mútua. */
.admin-challenge-list .admin-panel-heading { gap: 14px; }
.sandbox-run-form { margin: 0; flex: none; }
.sandbox-run-btn { padding: 9px 16px; color: #fff; background: var(--brand); border: 1px solid var(--brand); border-radius: 8px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; cursor: pointer; transition: filter .15s, transform .15s; }
.sandbox-run-btn:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.sandbox-run-btn:disabled { opacity: .45; cursor: not-allowed; }
.sandbox-blocked-note { color: #ffd7e6; background: rgba(255, 95, 158, .08); border: 1px solid rgba(255, 95, 158, .25); }
.workspace-topbar-sandbox { box-shadow: inset 0 -2px 0 0 var(--brand); }