:root {
  --bg: #0b0f14;
  --bg-deep: #080c11;
  --panel: #11171e;
  --panel-raised: #151c24;
  --panel-hover: #19212a;
  --line: #27313d;
  --line-soft: #1d2630;
  --text: #edf3f8;
  --text-soft: #b4c0cc;
  --muted: #788899;
  --green: #39d353;
  --green-bright: #56e36d;
  --green-soft: rgba(57, 211, 83, 0.11);
  --red: #ff5a61;
  --red-soft: rgba(255, 90, 97, 0.1);
  --amber: #f3b83f;
  --amber-soft: rgba(243, 184, 63, 0.1);
  --cyan: #2dd4e5;
  --blue: #4da3ff;
  --topbar: 58px;
  --radius: 7px;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { background: var(--bg); color: var(--text); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 75% -20%, rgba(45, 212, 229, 0.045), transparent 32rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.55;
}

button, input { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
::selection { background: rgba(57, 211, 83, 0.28); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2b3541; border: 2px solid transparent; border-radius: 9px; background-clip: padding-box; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.eyebrow { color: #8293a6; font-family: var(--font-mono); font-size: 15px; font-weight: 700; letter-spacing: 0.12em; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(57, 211, 83, 0.5); }

.topbar {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  height: var(--topbar);
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 15, 21, 0.96);
  backdrop-filter: blur(14px);
}

.brand { display: inline-flex; min-width: 0; max-width: min(34vw, 360px); align-items: baseline; font-family: var(--font-mono); font-size: 22px; font-weight: 800; letter-spacing: 0.055em; }
.brand-primary { overflow: hidden; color: var(--green); text-overflow: ellipsis; white-space: nowrap; }
.brand-secondary { color: #c5d1dc; }
.brand-cursor { margin-left: 2px; color: var(--green); animation: cursor-blink 1.2s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }

.main-nav { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-self: stretch; align-items: center; column-gap: 12px; }
.main-nav-links { display: flex; min-width: 0; height: 100%; align-items: stretch; gap: 28px; overflow: hidden; }
.main-nav a { position: relative; display: grid; height: 100%; flex: 0 0 auto; place-items: center; color: #93a2b2; font-size: 17px; }
.main-nav a:hover, .main-nav a.active { color: var(--text); }
.main-nav a.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--green); box-shadow: 0 -4px 14px rgba(57, 211, 83, 0.45); }
.main-nav [hidden] { display: none !important; }
.nav-overflow { position: relative; }
.nav-overflow-toggle { display: inline-flex; min-height: 32px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #93a2b2; font: inherit; font-size: 16px; cursor: pointer; }
.nav-overflow-toggle:hover, .nav-overflow-toggle.active, .nav-overflow-toggle[aria-expanded="true"] { border-color: var(--line); background: var(--panel); color: var(--text); }
.nav-overflow-toggle svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 140ms ease; }
.nav-overflow-toggle[aria-expanded="true"] svg { transform: rotate(-90deg); }
.nav-overflow-menu { position: absolute; z-index: 70; top: calc(100% + 8px); right: 0; display: grid; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 7px; background: #111820; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42); }
.nav-overflow-menu a { display: block; height: auto; padding: 10px 12px; border-radius: 5px; white-space: nowrap; }
.nav-overflow-menu a:hover, .nav-overflow-menu a.active { background: var(--panel-hover); color: var(--text); }
.nav-overflow-menu a.active::after { display: none; }

.account-nav { display: flex; min-width: 0; align-items: center; gap: 10px; }
.account-nav form { display: flex; align-items: center; margin: 0; }
.account-nav .quiet-button { line-height: 1; }
.topbar-action svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--green); }
.topbar-action[aria-disabled="true"] { cursor: not-allowed; opacity: 0.52; }
.topbar-action[aria-disabled="true"]:hover { border-color: transparent; background: transparent; color: var(--text-soft); }

.button, .secondary-button, .danger-button, .quiet-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border-radius: 6px;
  font-weight: 700;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}
.button { padding: 0 18px; border: 1px solid var(--green); background: var(--green); color: #07100a; }
.button:hover { border-color: var(--green-bright); background: var(--green-bright); transform: translateY(-1px); }
.button-small { min-height: 32px; padding: 0 13px; font-size: 16px; }
.button-wide { width: 100%; }
.secondary-button { padding: 0 14px; border: 1px solid #3a4654; background: #141b23; color: var(--text); }
.secondary-button:hover { border-color: #69798b; background: #1b242e; }
.danger-button { padding: 0 14px; border: 1px solid var(--red); background: var(--red-soft); color: #ff7379; }
.danger-button:hover { background: rgba(255, 90, 97, 0.18); }
.quiet-button { min-height: 32px; padding: 0 10px; border: 1px solid transparent; background: transparent; color: var(--text-soft); font-size: 16px; }
.quiet-button:hover { border-color: var(--line); background: var(--panel); color: var(--text); }
.icon-button { width: 34px; min-height: 34px; padding: 0; border: 1px solid transparent; background: transparent; color: #8494a4; }
.icon-button:hover { border-color: var(--line); background: var(--panel-hover); color: var(--text); }
button:disabled { cursor: wait; opacity: 0.55; transform: none !important; }
.nav-toggle { display: none; }

.system-banner { display: block; min-height: 34px; padding: 7px 24px; border-bottom: 1px solid; font-family: var(--font-mono); font-size: 15px; text-align: center; }
.system-banner.warning { border-color: rgba(243, 184, 63, 0.35); background: var(--amber-soft); color: #f8ca6d; }
.system-banner.danger { border-color: rgba(255, 90, 97, 0.35); background: var(--red-soft); color: #ff858a; }

.main-content { min-height: calc(100vh - var(--topbar)); }
.page-challenges .main-content { height: calc(100dvh - var(--topbar)); min-height: 500px; overflow: hidden; }
.page-challenges:has(.system-banner) .main-content { height: calc(100dvh - var(--topbar) - 34px); }

.challenge-workspace {
  display: grid;
  grid-template-columns: 230px minmax(390px, 1fr) minmax(390px, 34vw);
  height: 100%;
  overflow: hidden;
}

.filter-sidebar { position: relative; z-index: 10; display: flex; min-width: 0; flex-direction: column; padding: 18px 14px; border-right: 1px solid var(--line); background: var(--bg-deep); }
.search-field { display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--muted); }
.search-field:focus-within { border-color: #526276; box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.06); }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; }
.search-field input::placeholder { color: #718092; }
.search-field kbd { padding: 1px 5px; border: 1px solid #34404d; border-radius: 4px; color: #68798a; font: 14px var(--font-mono); }

.category-nav { display: grid; gap: 3px; margin-top: 17px; }
.category-link { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; min-height: 34px; padding: 0 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #b6c1cc; text-align: left; }
.category-link.no-category-logo { grid-template-columns: 1fr auto; }
.category-link svg { color: #6d8093; }
.category-filter-icon { display: grid; width: 24px; height: 24px; place-items: center; }
.category-filter-icon > * { grid-area: 1 / 1; }
.category-filter-icon img { width: 24px; height: 24px; border-radius: 3px; object-fit: contain; }
.category-built-in-logo { width: 24px; height: 24px; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.category-image-marker [data-category-icon-fallback] { display: inline-flex; min-width: 0; align-items: center; justify-content: center; }
.category-image-marker [data-category-icon-fallback][hidden] { display: none !important; }
.category-link strong { color: #7e8d9d; font: 15px var(--font-mono); }
.category-link:hover { background: var(--panel); color: var(--text); }
.category-link.active { border-color: rgba(57, 211, 83, 0.09); background: var(--green-soft); color: var(--green); }
.category-link.active svg, .category-link.active strong { color: var(--green); }

.filter-section { margin-top: 27px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.filter-chips button { min-height: 24px; padding: 2px 10px; border: 1px solid #35414d; border-radius: 14px; background: transparent; color: #8a99a9; font: 14px var(--font-mono); }
.filter-chips button:hover, .filter-chips button.active { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.sidebar-status { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 12px 9px 2px; border-top: 1px solid var(--line-soft); color: #667788; font: 13px var(--font-mono); letter-spacing: 0.08em; }
.sidebar-status .status-dot { width: 6px; height: 6px; }

.challenge-list-pane { min-width: 0; overflow-y: auto; padding: 17px 24px 28px; background: #0c1117; }
.list-heading { padding: 0 12px 10px; color: #72859a; font: 700 14px var(--font-mono); letter-spacing: 0.12em; }
.challenge-rows { display: grid; gap: 6px; }
.challenge-row { position: relative; display: grid; grid-template-areas: "main difficulty category"; grid-template-columns: minmax(150px, 1fr) auto minmax(72px, max-content); align-items: center; gap: 10px; min-height: 48px; padding: 5px 12px; border: 1px solid var(--line-soft); border-radius: 7px; background: var(--panel); transition: border-color 130ms ease, background 130ms ease, transform 130ms ease; }
.challenge-row:hover { z-index: 1; border-color: #3a4755; background: var(--panel-hover); transform: translateX(2px); }
.challenge-row.selected { border-color: var(--green); background: rgba(57, 211, 83, 0.075); box-shadow: inset 3px 0 var(--green); }
.challenge-row.solved { opacity: 0.55; }
.challenge-row.solved .challenge-row-main strong { text-decoration: line-through; text-decoration-color: #8996a3; }
.challenge-row-main { grid-area: main; min-width: 0; }
.challenge-row-main strong { display: block; overflow: hidden; color: #e3ebf3; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.challenge-row-main small { display: none; color: var(--muted); font: 14px var(--font-mono); }
.challenge-category { grid-area: category; justify-self: end; overflow: hidden; color: #718194; font: 14px var(--font-mono); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.challenge-category.category-image-marker { display: flex; align-items: center; justify-content: flex-end; }
.category-image-marker img { width: 24px; height: 24px; border-radius: 3px; object-fit: contain; }
.row-chevron { grid-area: chevron; display: none; color: var(--muted); }
.difficulty { grid-area: difficulty; font: 13px var(--font-mono); letter-spacing: 0.04em; text-transform: lowercase; }
.difficulty-easy { color: var(--green); }
.difficulty-medium { color: var(--amber); }
.difficulty-hard, .difficulty-insane { color: var(--red); }

.challenge-detail-pane { position: relative; min-width: 0; border-left: 1px solid var(--line); background: var(--panel); }
.challenge-detail { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: 100%; }
.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 19px 24px 7px; }
.detail-title-line { display: flex; align-items: center; gap: 10px; }
.detail-category-marker { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
.detail-category-name { max-width: 120px; padding: 2px 7px; overflow: hidden; border: 1px solid #34404d; border-radius: 4px; color: #91a0af; font: 13px var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.detail-category-name.icon-loaded { padding: 0; border-color: transparent; }
.detail-header h1 { margin: 0; color: #f2f6fa; font-size: 21px; line-height: 1.3; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 7px; color: #7f8e9e; font: 14px var(--font-mono); }
.detail-meta > strong { color: var(--green); font-size: 17px; }
.close-detail { margin-top: -4px; }
.tag-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-height: 28px; padding: 0 24px 7px; }
.tag-row span { padding: 2px 8px; border: 1px solid #303b47; border-radius: 12px; color: #8191a1; font: 13px var(--font-mono); }
.detail-scroll { overflow-y: auto; padding: 16px 24px 26px; }

.markdown { color: #cbd4de; font-size: 17px; line-height: 1.72; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin: 1.5em 0 0.55em; color: var(--text); line-height: 1.3; }
.markdown h1 { font-size: 1.45em; }
.markdown h2 { font-size: 1.25em; }
.markdown h3, .markdown h4 { font-size: 1.05em; }
.markdown p { margin: 0.85em 0; }
.markdown ul { padding-left: 1.4em; }
.markdown li { margin: 0.3em 0; }
.markdown a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.markdown code, .copy-field code { padding: 2px 5px; border-radius: 4px; background: #080d12; color: #ffd269; font: 0.92em var(--font-mono); }
.markdown pre { overflow-x: auto; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #080d12; }
.markdown pre code { padding: 0; background: transparent; color: #c8d3dd; }
.attribution { margin-top: 10px; color: var(--muted); font-size: 15px; font-style: italic; }
.attribution p { display: inline; margin: 0; }

.connection-card, .resource-section { margin-top: 20px; }
.copy-field { display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 7px; min-height: 38px; margin-top: 8px; padding: 3px 3px 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: #0a0f15; }
.copy-field code { overflow: hidden; padding: 0; background: transparent; color: #dce5ed; text-overflow: ellipsis; white-space: nowrap; }

.runtime-card { margin-top: 20px; overflow: hidden; border: 1px solid; border-radius: 8px; background: #0e151a; }
.runtime-card.ready { border-color: rgba(57, 211, 83, 0.8); box-shadow: 0 0 24px rgba(57, 211, 83, 0.035); }
.runtime-card.pending, .runtime-card.dormant { border-color: rgba(243, 184, 63, 0.5); }
.runtime-card.blocked { padding-bottom: 12px; border-color: rgba(255, 90, 97, 0.55); }
.runtime-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 35px; padding: 7px 12px; border-bottom: 1px solid currentColor; background: var(--green-soft); color: var(--green); font: 700 13px var(--font-mono); letter-spacing: 0.08em; }
.pending .runtime-heading, .dormant .runtime-heading { background: var(--amber-soft); color: var(--amber); }
.blocked .runtime-heading { background: var(--red-soft); color: var(--red); }
.runtime-heading > span { display: flex; align-items: center; gap: 7px; }
.runtime-heading strong { display: flex; align-items: center; gap: 5px; color: #dce4ec; letter-spacing: 0; }
.runtime-heading svg { width: 12px; height: 12px; }
.endpoint-field { margin: 12px 12px 8px; }
.runtime-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 0 12px; }
.runtime-note, .runtime-card > p { margin: 9px 12px 11px; color: #758696; font-size: 14px; line-height: 1.45; }
.runtime-card.dormant { padding-bottom: 12px; }
.runtime-card.dormant .button { width: calc(100% - 24px); margin: 0 12px; }
.runtime-progress { display: flex; align-items: center; gap: 5px; padding: 16px 12px 13px; }
.runtime-progress span { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: loading-dot 1.2s infinite ease-in-out; }
.runtime-progress span:nth-child(2) { animation-delay: 120ms; }
.runtime-progress span:nth-child(3) { animation-delay: 240ms; }
.runtime-progress small { margin-left: 7px; color: var(--text-soft); }
.pending > .danger-button { width: calc(100% - 24px); margin: 0 12px 12px; }
@keyframes loading-dot { 0%, 70%, 100% { opacity: 0.25; transform: scale(0.8); } 35% { opacity: 1; transform: scale(1); } }

.resource-list { display: grid; gap: 6px; margin-top: 8px; }
.resource-list a { display: flex; align-items: center; gap: 9px; min-height: 37px; padding: 0 11px; border: 1px solid var(--line); border-radius: 6px; background: #0d1319; color: #b8c5d0; font: 15px var(--font-mono); }
.resource-list a:hover { border-color: var(--green); color: var(--green); }
.hint-card { margin-top: 8px; border: 1px dashed #34404d; border-radius: 7px; background: rgba(7, 11, 16, 0.25); }
.hint-card summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 7px 11px; color: #9ba9b7; font-size: 15px; cursor: pointer; list-style: none; }
.hint-card summary::-webkit-details-marker { display: none; }
.hint-card summary strong { color: var(--amber); font: 14px var(--font-mono); }
.hint-card > .secondary-button { width: calc(100% - 20px); margin: 2px 10px 10px; }
.hint-content { padding: 0 11px 11px; }

.submission-dock { padding: 12px 24px 18px; border-top: 1px solid var(--line); background: #121820; }
.submission-dock form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.submission-dock input { min-width: 0; height: 39px; padding: 0 12px; border: 1px solid #36424f; border-radius: 6px; outline: 0; background: #090e13; color: var(--text); font: 16px var(--font-mono); }
.submission-dock input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.submission-dock input::placeholder { color: #536271; }
.solved-banner { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 39px; border: 1px solid rgba(57, 211, 83, 0.4); border-radius: 6px; background: var(--green-soft); color: var(--green); }
.solved-banner span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: var(--green); color: #08110a; }

.empty-state { display: grid; place-items: center; align-content: center; height: 100%; padding: 30px; color: var(--muted); text-align: center; }
.empty-state.compact { min-height: 250px; height: auto; }
.empty-state h2 { margin: 11px 0 3px; color: var(--text-soft); font-size: 19px; }
.empty-state p { max-width: 310px; margin: 0; font-size: 16px; }
.empty-glyph { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #35414e; border-radius: 50%; color: #718397; font: 20px var(--font-mono); }
.filtered-empty[hidden], .challenge-row[hidden] { display: none; }
.panel-backdrop, .challenge-mobile-toolbar { display: none; }

.content-shell { width: calc(100% - 48px); max-width: none; margin: 0 auto; padding: 55px 0 80px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.page-heading h1 { margin: 4px 0 3px; font-size: clamp(34px, calc(5.2vw + 2px), 50px); letter-spacing: -0.035em; line-height: 1.1; }
.page-heading p { margin: 0; color: var(--muted); }
.scoreboard-pulse { display: flex; align-items: center; gap: 8px; color: var(--green); font: 14px var(--font-mono); letter-spacing: 0.1em; }
.table-card, .feature-card { border: 1px solid var(--line); border-radius: 9px; background: rgba(17, 23, 30, 0.85); box-shadow: 0 18px 65px rgba(0, 0, 0, 0.15); }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font: 14px var(--font-mono); }
.table-toolbar .search-field { width: min(320px, 100%); }
.standings { display: grid; }
.standing-row { display: grid; grid-template-columns: 42px 24px minmax(120px, 1fr) auto 110px; align-items: center; min-height: 56px; padding: 0 18px; border-bottom: 1px solid var(--line-soft); color: var(--text-soft); }
.standing-row:last-child { border-bottom: 0; }
.standing-row:hover { background: var(--panel-hover); }
.standing-row.podium { min-height: 62px; }
.standing-row .rank { color: #738397; font: 16px var(--font-mono); }
.standing-row .rank-mark { color: var(--amber); }
.standing-row strong { color: var(--text); }
.standing-row > small { color: var(--muted); }
.standing-row .score { color: var(--green); font: 700 19px var(--font-mono); text-align: right; }
.standing-row .score small { font-size: 13px; }

.team-grid { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr); gap: 18px; }
.team-onboarding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 18px; }
.feature-card { padding: 24px; }
.feature-card.centered { display: grid; justify-items: center; max-width: 620px; margin: 70px auto 0; text-align: center; }
.feature-card.centered .feature-icon { width: 42px; height: 42px; color: var(--green); }
.feature-card h2 { margin: 8px 0 4px; }
.feature-card p { color: var(--muted); }
.team-identity h2 { font: 800 33px var(--font-mono); }
.team-identity dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 25px 0 0; }
.team-identity dl div { padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #0d1319; }
.team-identity dt { color: var(--muted); font: 13px var(--font-mono); text-transform: uppercase; }
.team-identity dd { margin: 3px 0 0; color: var(--green); font: 700 24px var(--font-mono); }
.team-action-card h2 { margin-top: 8px; }
.team-action-card > p { min-height: 38px; margin-top: 4px; }
.team-action-card .stack-form { margin-top: 19px; }
.team-action-card textarea, .team-invite-code textarea { width: 100%; padding: 10px 12px; border: 1px solid #34404d; border-radius: 6px; outline: 0; resize: vertical; background: #0b1016; color: var(--text); font: 15px/1.5 var(--font-mono); }
.team-action-card textarea:focus, .team-invite-code textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.team-invite { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.team-invite p { margin: 3px 0 0; font-size: 15px; }
.team-invite form { margin: 0; }
.team-invite-code { display: grid; gap: 7px; }
.team-invite-code[hidden] { display: none; }
.team-invite-code label { color: #9dabba; font-size: 15px; font-weight: 700; }
.team-invite-code .quiet-button { justify-self: start; }
.member-list { display: grid; margin-top: 15px; }
.member-list > div { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 10px; min-height: 53px; border-bottom: 1px solid var(--line-soft); }
.member-list > div:last-child { border-bottom: 0; }
.member-list small { color: var(--green); font: 14px var(--font-mono); }
.avatar { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #405064; border-radius: 50%; background: #18212b; color: var(--text-soft); font: 16px var(--font-mono); }
.page-content-shell, .page-content-canvas { width: 100%; min-height: calc(100dvh - var(--topbar)); }
.page-content-canvas { overflow-x: clip; }
.page-content-canvas .row {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}
.page-content-canvas .row > * { min-width: 0; grid-column-end: span 12; }
.page-content-canvas .page-section { min-height: calc(100dvh - var(--topbar)); padding: clamp(28px, 5vw, 76px); }
.page-content-canvas .align-items-start { align-items: start; }
.page-content-canvas .align-items-center { align-items: center; }
.page-content-canvas .align-items-end { align-items: end; }
.page-content-canvas .text-start { text-align: left; }
.page-content-canvas .text-center { text-align: center; }
.page-content-canvas .text-end { text-align: right; }
.page-content-canvas .display-1 {
  margin: 0 0 18px;
  font-size: clamp(42px, calc(6.2vw + 2px), 74px);
  letter-spacing: -0.055em;
  line-height: 0.98;
}
.page-content-canvas .lead { margin: 0; color: #aebcca; font-size: clamp(19px, calc(2.2vw + 2px), 23px); line-height: 1.65; }
.page-content-canvas .page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.page-content-canvas .page-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 19px;
  border: 1px solid var(--green);
  border-radius: 6px;
  background: var(--green);
  color: #07100a;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}
.page-content-canvas .page-actions a:hover { border-color: var(--green-bright); background: var(--green-bright); transform: translateY(-1px); }
.page-content-canvas .page-actions a + a { border-color: #3a4654; background: #141b23; color: var(--text); }
.page-content-canvas .page-actions a + a:hover { border-color: #69798b; background: #1b242e; }

@media (min-width: 768px) {
  .page-content-canvas .col-md-1 { grid-column-end: span 1; }
  .page-content-canvas .col-md-2 { grid-column-end: span 2; }
  .page-content-canvas .col-md-3 { grid-column-end: span 3; }
  .page-content-canvas .col-md-4 { grid-column-end: span 4; }
  .page-content-canvas .col-md-5 { grid-column-end: span 5; }
  .page-content-canvas .col-md-6 { grid-column-end: span 6; }
  .page-content-canvas .col-md-7 { grid-column-end: span 7; }
  .page-content-canvas .col-md-8 { grid-column-end: span 8; }
  .page-content-canvas .col-md-9 { grid-column-end: span 9; }
  .page-content-canvas .col-md-10 { grid-column-end: span 10; }
  .page-content-canvas .col-md-11 { grid-column-end: span 11; }
  .page-content-canvas .col-md-12 { grid-column-end: span 12; }
  .page-content-canvas .offset-md-0 { grid-column-start: auto; }
  .page-content-canvas .offset-md-1 { grid-column-start: 2; }
  .page-content-canvas .offset-md-2 { grid-column-start: 3; }
  .page-content-canvas .offset-md-3 { grid-column-start: 4; }
  .page-content-canvas .offset-md-4 { grid-column-start: 5; }
  .page-content-canvas .offset-md-5 { grid-column-start: 6; }
  .page-content-canvas .offset-md-6 { grid-column-start: 7; }
  .page-content-canvas .offset-md-7 { grid-column-start: 8; }
  .page-content-canvas .offset-md-8 { grid-column-start: 9; }
  .page-content-canvas .offset-md-9 { grid-column-start: 10; }
  .page-content-canvas .offset-md-10 { grid-column-start: 11; }
  .page-content-canvas .offset-md-11 { grid-column-start: 12; }
}

.auth-shell { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(350px, 430px); align-items: center; gap: clamp(40px, 9vw, 120px); width: min(980px, calc(100% - 40px)); min-height: calc(100dvh - var(--topbar)); margin: 0 auto; padding: 50px 0; }
.auth-copy { max-width: 490px; }
.auth-copy h1 { margin: 8px 0 15px; font-size: clamp(42px, calc(6.2vw + 2px), 68px); letter-spacing: -0.055em; line-height: 0.98; }
.auth-copy p { color: #8898a8; font-size: 19px; }
.auth-card { padding: 22px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28); }
.panel-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 19px; color: var(--green); font: 700 14px var(--font-mono); letter-spacing: 0.1em; }
.stack-form { display: grid; gap: 8px; }
.stack-form label { margin-top: 7px; color: #9dabba; font-size: 15px; font-weight: 700; }
.stack-form input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #34404d; border-radius: 6px; outline: 0; background: #0b1016; }
.stack-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.stack-form .button { margin-top: 13px; }
.optional { color: var(--muted); font-weight: 400; }
.auth-footnote { margin: 17px 0 0; color: var(--muted); font-size: 15px; text-align: center; }
.auth-footnote a { color: var(--green); }
.confirmation-note { margin: 2px 0 6px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.form-message { margin-bottom: 13px; padding: 9px 10px; border: 1px solid; border-radius: 5px; font-size: 15px; }
.form-message.error { border-color: rgba(255, 90, 97, 0.5); background: var(--red-soft); color: #ff8d92; }
.form-message.success { border-color: rgba(57, 211, 83, 0.45); background: var(--green-soft); color: #70e581; }
.form-message.warning { border-color: rgba(243, 184, 63, 0.45); background: var(--amber-soft); color: #f5ca71; }

.toast-region { position: fixed; z-index: 100; right: 18px; bottom: 18px; display: grid; width: min(340px, calc(100vw - 36px)); gap: 8px; pointer-events: none; }
.toast { display: grid; grid-template-columns: 8px 1fr; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; background: #171e26; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35); color: var(--text-soft); font-size: 16px; animation: toast-in 180ms ease-out; }
.toast::before { width: 7px; height: 7px; border-radius: 50%; content: ""; background: var(--green); }
.toast.error::before { background: var(--red); }
.toast.warning::before { background: var(--amber); }
.toast.leaving { opacity: 0; transform: translateY(5px); transition: 160ms ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } }

@media (max-width: 1120px) {
  .topbar-action { width: 32px; padding: 0; }
  .topbar-action-label { display: none; }
  .challenge-workspace { grid-template-columns: 196px minmax(340px, 1fr) minmax(360px, 37vw); }
  .challenge-list-pane { padding-right: 16px; padding-left: 16px; }
  .challenge-row { grid-template-columns: minmax(130px, 1fr) auto minmax(62px, max-content); }
  .challenge-row .row-chevron { display: none; }
  .detail-header, .detail-scroll { padding-right: 18px; padding-left: 18px; }
  .submission-dock { padding-right: 18px; padding-left: 18px; }
}

@media (max-width: 860px) {
  .topbar { grid-template-columns: auto auto 1fr; gap: 12px; padding: 0 16px; }
  .nav-toggle { display: inline-flex; }
  .main-nav { position: absolute; top: calc(100% + 1px); left: 0; display: none; width: 100%; height: auto; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #0c1117; }
  .main-nav.open { display: flex; }
  .main-nav-links { display: flex; width: 100%; height: auto; flex-direction: column; align-items: stretch; gap: 0; overflow: visible; }
  .main-nav a { display: block; height: auto; padding: 11px; border-radius: 5px; }
  .main-nav a.active { background: var(--green-soft); color: var(--green); }
  .main-nav a.active::after { display: none; }
  .nav-overflow { display: none !important; }
  .account-nav { justify-self: end; }
  .challenge-mobile-toolbar { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 13px; border-bottom: 1px solid var(--line); background: var(--bg-deep); color: var(--muted); font: 14px var(--font-mono); }
  .challenge-mobile-toolbar .quiet-button svg { width: 14px; }
  .page-challenges .main-content { height: calc(100dvh - var(--topbar)); overflow: hidden; }
  .challenge-workspace { position: relative; grid-template-columns: 1fr; height: calc(100% - 42px); }
  .filter-sidebar { position: absolute; z-index: 35; top: 0; bottom: 0; left: 0; width: min(280px, 88vw); transform: translateX(-102%); box-shadow: 20px 0 60px rgba(0, 0, 0, 0.35); transition: transform 180ms ease; }
  .filter-sidebar.open { transform: translateX(0); }
  .challenge-list-pane { padding: 14px; }
  .challenge-row { grid-template-areas: "main difficulty category chevron"; grid-template-columns: minmax(120px, 1fr) auto minmax(74px, max-content) 14px; }
  .challenge-row .row-chevron { display: block; }
  .challenge-detail-pane { position: fixed; z-index: 55; top: var(--topbar); right: 0; bottom: 0; width: min(470px, 94vw); border-left: 1px solid var(--line); box-shadow: -28px 0 80px rgba(0, 0, 0, 0.45); transform: translateX(104%); transition: transform 190ms ease; }
  .challenge-detail-pane.open { transform: translateX(0); }
  .panel-backdrop { position: fixed; z-index: 50; inset: var(--topbar) 0 0; display: block; border: 0; background: rgba(2, 5, 8, 0.66); opacity: 0; visibility: hidden; transition: opacity 190ms ease, visibility 190ms; }
  .challenge-detail-pane.open + .panel-backdrop { opacity: 1; visibility: visible; }
  .team-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar { height: 54px; }
  .account-nav form { display: none; }
  .challenge-row { grid-template-areas: "main chevron"; grid-template-columns: minmax(100px, 1fr) 13px; min-height: 57px; }
  .challenge-row-main small { display: block; }
  .challenge-category { display: none; }
  .difficulty { display: none; }
  .list-heading { display: none; }
  .challenge-detail-pane { top: 0; z-index: 70; width: 100vw; }
  .panel-backdrop { z-index: 65; inset: 0; }
  .detail-header { padding-top: 15px; }
  .runtime-actions { grid-template-columns: 1fr; }
  .submission-dock form { grid-template-columns: 1fr 88px; }
  .content-shell { width: calc(100% - 28px); padding-top: 35px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .table-toolbar .search-field { width: 100%; }
  .standing-row { grid-template-columns: 30px 18px 1fr 80px; padding: 0 10px; }
  .standing-row > small { display: none; }
  .auth-shell { grid-template-columns: 1fr; gap: 25px; width: min(100% - 28px, 460px); padding: 35px 0 60px; }
  .auth-copy h1 { font-size: 46px; }
  .auth-card { padding: 18px; }
}

@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; }
}

/* Public participant profiles */
.profile-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-bottom: 18px; padding: 25px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg, #151c24, #10171e); }
.profile-avatar { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid rgba(57, 211, 83, 0.55); border-radius: 50%; background: var(--green-soft); color: var(--green); font: 700 28px var(--font-mono); }
.profile-hero h1 { margin: 3px 0 1px; font-size: clamp(30px, calc(4.2vw + 2px), 42px); line-height: 1.2; }
.profile-hero p { margin: 0; color: var(--muted); }
.profile-country::before { margin: 0 8px; content: "·"; }
.profile-score { display: flex; gap: 22px; margin: 0; }
.profile-score > div { min-width: 72px; }
.profile-score dt, .profile-details dt { color: #6e8092; font: 12px var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.profile-score dd { margin: 2px 0 0; color: var(--green); font: 700 25px var(--font-mono); }
.profile-score dd small { font-size: 13px; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.profile-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.profile-details { display: grid; margin: 15px 0 0; }
.profile-details > div { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.profile-details > div:last-child { border-bottom: 0; }
.profile-details dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #bec9d3; font-size: 15px; }
.profile-details a { color: var(--green); }
.profile-verification-card { display: flex; min-height: 100%; flex-direction: column; }
.profile-verification-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 7px; }
.profile-verification-heading h2 { margin: 0; font-size: 20px; }
.profile-verification-status { padding: 3px 8px; border: 1px solid; border-radius: 999px; font: 700 13px var(--font-mono); text-transform: uppercase; }
.profile-verification-status.verified { border-color: rgba(57, 211, 83, 0.45); background: var(--green-soft); color: var(--green); }
.profile-verification-status.pending { border-color: rgba(243, 184, 63, 0.45); background: var(--amber-soft); color: var(--amber); }
.profile-verification-card > p { margin: 13px 0 18px; font-size: 15px; }
.profile-verification-card > p strong { color: var(--text-soft); overflow-wrap: anywhere; }
.profile-verification-card > .secondary-button { width: 100%; margin-top: auto; }
.profile-quiet-card { display: grid; justify-items: center; align-content: center; min-height: 230px; text-align: center; }
.profile-quiet-card h2 { font-size: 18px; }
.profile-quiet-card p { max-width: 300px; margin: 0; font-size: 15px; }
.profile-error-card h1 { margin: 10px 0 2px; font-size: 26px; }

@media (max-width: 680px) {
  .profile-hero { grid-template-columns: auto 1fr; padding: 18px; }
  .profile-avatar { width: 50px; height: 50px; font-size: 23px; }
  .profile-score { grid-column: 1 / -1; justify-content: space-around; padding-top: 15px; border-top: 1px solid var(--line-soft); }
  .profile-score > div { text-align: center; }
  .profile-grid { grid-template-columns: 1fr; }
}