@charset "UTF-8";
/*
 * EightRush Workspace — the site's palette: near-black canvas, nitro orange → red accent, chalk text.
 * Tokens match tailwind.config.mjs of the marketing site (ink / nitro / chalk). Fonts are local only:
 * the panel's CSP allows nothing from other origins, so the site's Saira Condensed is used when
 * installed and a condensed system face stands in otherwise.
 */
:root {
  --ink: #0a0a0c; --ink-soft: #111114; --ink-raised: #16161b; --line: #1e1e24; --line-strong: #2a2a32;
  --chalk: #f5f5f7; --muted: #a1a1aa; --faint: #6b6b75;
  --nitro: #ff4a15; --nitro-from: #ff5a1f; --nitro-to: #e8380d; --nitro-soft: rgba(255, 90, 31, .12); --nitro-line: rgba(255, 90, 31, .35);
  --gradient: linear-gradient(100deg, #ff5a1f 0%, #e8380d 100%);
  --ok: #4ade80; --ok-soft: rgba(74, 222, 128, .12); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, .12); --bad: #f87171; --bad-soft: rgba(248, 113, 113, .12);
  --radius: 14px;
  --display: "Saira Condensed", "Archivo Narrow", "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--ink); color: var(--chalk); font: 14px/1.6 "Inter", "Segoe UI", Roboto, Arial, sans-serif; background-image: radial-gradient(60% 40% at 50% 0%, rgba(255, 90, 31, .10) 0%, rgba(10, 10, 12, 0) 70%); background-attachment: fixed }
a { color: var(--nitro-from); text-decoration: none }
a:hover { text-decoration: underline }
h1, h2, h3, p { margin: 0 }
h1 { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase }
h2 { font-size: 18px; letter-spacing: -.2px }
h3 { font-size: 15px; font-weight: 600 }
p { color: var(--muted); margin-top: 9px }
small { display: block; font-size: 12px; color: var(--muted) }
code { font-size: 12px; color: var(--chalk); background: var(--ink-raised); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px }
button, input, textarea, select { font: inherit }
button, summary { cursor: pointer }
button { white-space: nowrap }
input, textarea, select { width: 100%; border: 1px solid var(--line-strong); background: var(--ink); border-radius: 9px; padding: 10px 12px; min-width: 0; color: var(--chalk) }
input::placeholder, textarea::placeholder { color: var(--faint) }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--nitro-line); outline-offset: 1px; border-color: var(--nitro) }
input[type=checkbox] { width: auto; accent-color: var(--nitro) }
textarea { resize: vertical }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--chalk) }
label.checkbox { flex-direction: row; align-items: center; font-weight: 500; color: var(--muted) }

/* ---- sidebar and brand ---- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: 244px; background: #070709; border-right: 1px solid var(--line); color: var(--chalk); padding: 28px 18px; display: flex; flex-direction: column }
.brand { display: flex; align-items: center; gap: 11px; color: var(--chalk); padding: 0 8px }
.brand:hover { text-decoration: none }
.brand-mark { height: 34px; width: auto; flex-shrink: 0 }
.brand-name { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 25px; letter-spacing: .02em; line-height: 1; text-transform: uppercase }
.brand-name .eight { color: var(--nitro) }
.brand small { letter-spacing: 2.2px; font-size: 8px; color: var(--faint); margin-top: 5px; font-family: "Segoe UI", sans-serif; font-style: normal; font-weight: 600 }
.workspace-label { font-size: 9px; color: var(--faint); letter-spacing: 1.8px; margin: 40px 12px 12px }
.sidebar nav a { display: flex; align-items: center; color: var(--muted); padding: 10px 13px; border-radius: 9px; margin: 2px 0; gap: 13px; font-size: 13px; border: 1px solid transparent }
.sidebar nav a span { font-size: 18px; width: 23px; color: var(--faint); line-height: 1; text-align: center }
.sidebar nav a:hover { background: var(--ink-soft); color: var(--chalk); text-decoration: none }
.sidebar nav a.active { background: var(--nitro-soft); border-color: var(--nitro-line); color: var(--chalk); text-decoration: none }
.sidebar nav a.active span { color: var(--nitro) }
.nav-divider { border-top: 1px solid var(--line); margin: 18px 11px }
.sidebar-bottom { margin-top: auto; font-size: 11px; padding: 22px 10px 0; color: var(--muted) }
.sidebar-bottom small { font-size: 10px; color: var(--faint); margin: 6px 0 0 15px }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 100%; background: var(--nitro); box-shadow: 0 0 10px var(--nitro); margin-right: 8px; flex-shrink: 0 }

/* ---- shell ---- */
.shell { margin-left: 244px; min-height: 100vh; display: flex; flex-direction: column }
.auth-shell { margin: 0 }
.topbar { height: 72px; background: rgba(10, 10, 12, .85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 0 36px; font-size: 12px; color: var(--muted); position: sticky; top: 0; z-index: 5 }
.topbar-right { display: flex; align-items: center; gap: 15px }
.topbar-search { flex: 1; max-width: 420px }
.topbar-search input { padding: 8px 12px; background: var(--ink-soft) }
.user-name { color: var(--muted) }
main { padding: 36px; flex: 1; max-width: 1640px; width: 100%; margin: auto }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 26px }
.heading-actions { display: flex; gap: 10px; flex-wrap: wrap }
.eyebrow { font-size: 10px; letter-spacing: 2.4px; font-weight: 700; color: var(--nitro); margin-bottom: 10px }
.page-heading p { font-size: 13px; max-width: 760px }

/* ---- buttons and notices ---- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--ink-soft); color: var(--chalk); font-size: 12px; font-weight: 600; text-decoration: none }
.button:hover { border-color: var(--nitro-line); background: var(--ink-raised); text-decoration: none }
.button.primary { background: var(--gradient); border-color: transparent; color: #fff; box-shadow: 0 4px 18px -6px rgba(255, 90, 31, .55) }
.button.primary:hover { filter: brightness(1.08) }
.button.quiet { padding: 6px 9px; border: 0; background: transparent; color: var(--muted) }
.button.quiet:hover { color: var(--chalk) }
.notice { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-strong); background: var(--ink-soft); border-radius: 11px; padding: 15px 18px; font-size: 12px; color: var(--muted); margin-bottom: 22px }
.notice strong { font-size: 13px; color: var(--chalk) }
.notice a { margin-left: auto; white-space: nowrap }
.notice.warning { background: var(--warn-soft); border-color: rgba(251, 191, 36, .3); color: #fcd34d }
.notice.danger { background: var(--bad-soft); border-color: rgba(248, 113, 113, .35); color: #fca5a5 }
.notice.success { background: var(--ok-soft); border-color: rgba(74, 222, 128, .3); color: #86efac }

/* ---- metrics, panels, lists ---- */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px }
.metrics.three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.metric { background: var(--ink-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; color: var(--chalk); transition: border-color .15s }
a.metric:hover { text-decoration: none; border-color: var(--nitro-line) }
.metric > div { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px }
.metric > div span { font-size: 18px; color: var(--nitro) }
.metric > strong { font-family: var(--display); font-style: italic; font-size: 42px; font-weight: 800; display: block; margin: 6px 0; line-height: 1.1 }
.metric h3 { margin: 14px 0; font-size: 17px }
.metric small { font-size: 11px; color: var(--faint) }
.orange { color: var(--nitro) }
.muted { color: var(--muted) }
.two-column { display: grid; grid-template-columns: 1.14fr 1fr; gap: 20px; margin-bottom: 22px }
.panel { border: 1px solid var(--line); background: var(--ink-soft); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px }
.two-column > .panel { margin-bottom: 0 }
.padded { padding: 24px }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 24px; border-bottom: 1px solid var(--line) }
.section-heading a { font-size: 11px }
.section-heading.plain { padding: 0; margin-bottom: 16px; border: 0 }
.list-row { display: flex; align-items: center; gap: 13px; padding: 16px 24px; color: var(--chalk); border-bottom: 1px solid var(--line) }
a.list-row:hover { background: var(--ink-raised); text-decoration: none }
.list-row:last-child { border: 0 }
.list-row > div { flex: 1 }
.list-row strong { font-size: 13px }
.list-row small { font-size: 11px }
.avatar { background: var(--nitro-soft); display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--nitro); flex-shrink: 0 }
.task-box { font-size: 22px; color: var(--faint) }
.badge { display: inline-block; font-size: 10px; line-height: 1.6; padding: 3px 9px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); border: 1px solid rgba(74, 222, 128, .25); white-space: normal; font-weight: 600 }
.badge.neutral { background: var(--ink-raised); color: var(--muted); border-color: var(--line-strong) }
.badge.warning { background: var(--warn-soft); color: var(--warn); border-color: rgba(251, 191, 36, .3) }
.badge.accent { background: var(--nitro-soft); color: var(--nitro-from); border-color: var(--nitro-line) }
.badge.large { font-size: 12px; padding: 7px 13px }
.empty { padding: 42px 30px; text-align: center; max-width: 500px; margin: auto; min-height: 220px; display: flex; align-items: center; flex-direction: column; justify-content: center }
.empty > span { font-size: 30px; color: var(--nitro); margin-bottom: 13px }
.empty p { font-size: 12px }
.empty a { margin-top: 18px; font-size: 12px }
.empty.compact { min-height: 100px; padding: 22px }
.portfolio { display: flex; justify-content: space-between; align-items: center; padding: 28px 30px; gap: 20px; background: var(--ink-soft); background-image: linear-gradient(rgba(255, 90, 31, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 90, 31, .06) 1px, transparent 1px); background-size: 28px 28px }
.portfolio h2 { font-size: 21px }
.portfolio p { font-size: 12px }
.portfolio a { display: block; margin-top: 16px; font-size: 12px }
.game-chips { display: flex; gap: 10px; flex-wrap: wrap }
.game-chips span { padding: 16px 14px; background: var(--ink); border: 1px solid var(--nitro-line); border-radius: 10px; font-size: 12px; font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: .04em }

/* ---- partnership tabs and strip ---- */
.state-tabs, .kind-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px }
.state-tabs a, .kind-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--ink-soft); color: var(--muted); font-size: 12px; font-weight: 600 }
.state-tabs a b { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--ink-raised); color: var(--chalk) }
.state-tabs a:hover, .kind-chips a:hover { color: var(--chalk); border-color: var(--nitro-line); text-decoration: none }
.state-tabs a.active { background: var(--gradient); border-color: transparent; color: #fff }
.state-tabs a.active b { background: rgba(0, 0, 0, .25); color: #fff }
.kind-chips { margin-bottom: 18px }
.kind-chips a { padding: 6px 12px; font-size: 11px }
.kind-chips a.active { color: var(--nitro-from); border-color: var(--nitro-line); background: var(--nitro-soft) }
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) }
.strip-item { padding: 20px 24px; border-right: 1px solid var(--line); color: var(--chalk); display: flex; flex-direction: column; gap: 4px }
.strip-item:last-child { border-right: 0 }
.strip-item:hover { background: var(--ink-raised); text-decoration: none }
.strip-item strong { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 36px; line-height: 1 }
.strip-item span { font-size: 12px; color: var(--muted) }
.strip-item.state-negotiating strong { color: var(--warn) }
.strip-item.state-contracted strong { color: var(--nitro) }
.strip-item.state-launched strong { color: var(--ok) }

/* ---- tables and forms ---- */
.table-wrap { overflow-x: auto }
table { width: 100%; border-collapse: collapse; text-align: left }
th { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; background: #0d0d10; padding: 14px 22px; color: var(--faint); font-weight: 700 }
td { padding: 16px 22px; border-top: 1px solid var(--line); font-size: 12px; max-width: 400px; overflow-wrap: break-word }
tbody tr:hover td { background: rgba(255, 255, 255, .015) }
td strong { font-size: 13px }
td small { margin-top: 4px }
table.matrix td.mark { text-align: center; color: var(--nitro); font-size: 13px }
table.matrix th { text-align: center }
table.matrix th:first-child { text-align: left }
.filters { display: flex; align-items: center; gap: 12px; padding: 16px 22px; flex-wrap: wrap }
.filters input { flex: 1; min-width: 180px }
.filters select { max-width: 240px }
.filters label:not(.checkbox) { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--muted) }
.filters label input { min-width: 0 }
.form-panel { padding: 28px; max-width: 1040px }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.form-stack { display: flex; flex-direction: column; gap: 16px }
.form-actions { display: flex; gap: 10px; margin-top: 25px }
.form-grid + .notice { margin-top: 22px; margin-bottom: 0 }
.validation { color: var(--bad); font-size: 12px }
.validation:empty { display: none }
.inline-details { padding: 18px 24px; border-top: 1px solid var(--line) }
summary { font-size: 12px; color: var(--nitro-from); font-weight: 600 }
.inline-details form, details form { margin-top: 16px }
.timeline-entry { padding: 20px 24px; border-top: 1px solid var(--line) }
.timeline-entry p { color: var(--chalk); white-space: pre-wrap }
.pagination { display: flex; align-items: center; gap: 18px; padding: 16px 22px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line) }
.pagination a:first-of-type { margin-left: auto }
dl { display: grid; grid-template-columns: 140px 1fr; gap: 10px; font-size: 12px; margin: 20px 0 }
dt { color: var(--muted) }
dd { margin: 0; overflow-wrap: anywhere }
progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 6px; overflow: hidden; accent-color: var(--nitro); background: var(--ink-raised); margin: 21px 0 }
progress::-webkit-progress-bar { background: var(--ink-raised) }
progress::-webkit-progress-value { background: var(--gradient) }
progress::-moz-progress-bar { background: var(--gradient) }
.check-item { border-top: 1px solid var(--line) }
.check-item > summary { display: flex; align-items: center; gap: 15px; padding: 17px 24px; color: var(--chalk); list-style: none }
.check-item > summary strong { flex: 1; font-size: 12px }
.check-indicator { color: var(--faint); font-size: 20px }
.check-indicator.passed { color: var(--ok) }
.check-body { padding: 0 24px 24px 58px; max-width: 800px }
.check-body p { white-space: pre-wrap }
.work-card { padding: 22px 24px; border-bottom: 1px solid var(--line) }
.work-card .filters { padding: 12px 0 0 }

/* ---- kanban, games, roadmap ---- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 20px; align-items: flex-start }
.kanban-column { flex: 0 0 272px; border: 1px solid var(--line); background: #0d0d10; padding: 15px; border-radius: 13px; min-height: 280px }
.kanban-column h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted) }
.deal-card { padding: 16px; background: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 10px; margin: 13px 0 }
.deal-card:hover { border-color: var(--nitro-line) }
.deal-card h3 { margin: 8px 0 }
.deal-card p { font-size: 12px; margin-bottom: 12px }
.deal-card details { margin-top: 14px }
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.game-card { padding: 18px }
.game-card h2 { margin-top: 18px }
.game-card p { font-size: 12px; margin-bottom: 16px }
.game-art { height: 150px; border-radius: 10px; padding: 20px; display: flex; align-items: center; justify-content: space-between; background: radial-gradient(70% 90% at 30% 20%, rgba(255, 90, 31, .35), rgba(10, 10, 12, 0) 70%), #0d0d10; border: 1px solid var(--nitro-line); color: var(--chalk) }
.game-art > span { font-family: var(--display); font-style: italic; font-size: 95px; line-height: 1; font-weight: 800; color: var(--nitro) }
.game-art small { writing-mode: vertical-rl; letter-spacing: 3px; font-size: 9px; color: var(--muted) }
.game-art.madrid { background: radial-gradient(70% 90% at 30% 20%, rgba(232, 56, 13, .35), rgba(10, 10, 12, 0) 70%), #0d0d10 }
.game-art.donut { background: radial-gradient(70% 90% at 30% 20%, rgba(251, 191, 36, .25), rgba(10, 10, 12, 0) 70%), #0d0d10 }
.roadmap-row { display: flex; gap: 25px; padding: 24px 10px; border-bottom: 1px solid var(--line) }
.roadmap-row:last-child { border: 0 }
.step { font-family: var(--display); font-style: italic; font-size: 32px; font-weight: 800; color: var(--nitro) }
.roadmap-row p { margin-bottom: 14px; max-width: 850px }

/* ---- sign-in ---- */
.auth-card { width: 100%; max-width: 480px; margin: 60px auto; padding: 38px; background: var(--ink-soft); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 70px -20px rgba(232, 56, 13, .45) }
.auth-card > .brand { padding: 0; margin-bottom: 26px }
.auth-card h1 { font-size: 32px }
.auth-card .form-stack { margin-top: 24px }
.auth-note { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 24px; font-size: 11px; color: var(--faint) }
.secret-key { display: block; background: var(--ink); border: 1px dashed var(--nitro-line); padding: 16px; border-radius: 8px; letter-spacing: 2px; overflow-wrap: anywhere; font-size: 14px; margin-bottom: 18px }
.auth-card > label { margin-top: 24px }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px 0 }
.recovery-codes code { background: var(--ink); border-radius: 6px; padding: 9px; text-align: center }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px }
footer { padding: 20px 36px; font-size: 10px; color: var(--faint); display: flex; justify-content: space-between; border-top: 1px solid var(--line) }

@media (min-width: 1600px) { main { padding-top: 44px } }
@media (max-width: 1150px) {
  .sidebar { width: 210px; padding: 24px 13px }
  .shell { margin-left: 210px }
  .auth-shell { margin: 0 }
  main { padding: 26px }
  .metrics { grid-template-columns: repeat(2, 1fr) }
  .strip { grid-template-columns: repeat(3, 1fr) }
  .two-column { grid-template-columns: 1fr }
  .portfolio { align-items: flex-start; flex-direction: column }
  .topbar { padding: 0 26px }
  .user-name { display: none }
}
@media (max-width: 760px) {
  .sidebar { position: static; width: 100%; padding: 14px; border-right: 0; border-bottom: 1px solid var(--line) }
  .brand-name { font-size: 22px }
  .sidebar nav { display: flex; overflow-x: auto; margin-top: 12px }
  .sidebar nav a { white-space: nowrap }
  .workspace-label, .sidebar-bottom, .nav-divider { display: none }
  .shell { margin: 0 }
  .topbar { height: auto; min-height: 60px; padding: 10px 16px; flex-wrap: wrap; position: static }
  .topbar-search { order: 3; max-width: none; flex-basis: 100% }
  .topbar-right { gap: 6px }
  .topbar .badge { font-size: 8px }
  main { padding: 22px 16px }
  .page-heading { align-items: flex-start; flex-direction: column }
  h1 { font-size: 32px }
  .metrics, .metrics.three, .form-grid, .game-grid { grid-template-columns: 1fr }
  .strip { grid-template-columns: repeat(2, 1fr) }
  .strip-item { border-bottom: 1px solid var(--line) }
  .metric { padding: 17px }
  .metrics { gap: 10px }
  .metric > strong { font-size: 32px }
  .filters { padding: 14px }
  .filters select { max-width: none }
  .check-item > summary { padding: 14px; gap: 10px }
  .check-item > summary .badge { max-width: 90px }
  .auth-card { padding: 24px; margin: 20px auto }
  footer { padding: 18px; flex-direction: column; gap: 5px }
  .notice { align-items: flex-start }
  .notice a { display: none }
  .padded, .form-panel { padding: 18px }
}
.sidebar nav a.sub { padding: 6px 13px 6px 22px; font-size: 12px }
.sidebar nav a.sub span { font-size: 13px }
table.matrix td:first-child { min-width: 260px; overflow-wrap: normal }
table.matrix th { min-width: 96px }
table.matrix td.mark .off { color: var(--faint) }
/* ---- charts (palette validated for the dark surface: #ff4a15 / #4f8fd9) ---- */
.chart-block { display: grid; grid-template-columns: 1fr; gap: 22px; padding: 18px 22px 6px; max-width: 1200px }
.chart { margin: 0 }
.chart figcaption { font-size: 12px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.chart svg { width: 100%; height: auto; display: block }
.chart .grid { stroke: var(--line); stroke-width: 1 }
.chart .baseline { stroke: var(--line-strong); stroke-width: 1 }
.chart .axis { fill: var(--muted); font-size: 12px }
.chart .bar.pos { fill: #ff4a15 }
.chart .bar.neg { fill: #4f8fd9 }
.chart .bar.partial { opacity: .45 }
.chart .bar:hover { filter: brightness(1.25) }
.legend { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 11px }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px }
.key.pos { background: #ff4a15 }
.key.neg { background: #4f8fd9 }
.total-strip { display: flex; gap: 28px; flex-wrap: wrap; padding: 18px 22px; border-bottom: 1px solid var(--line) }
.total-strip div { display: flex; flex-direction: column }
.total-strip strong { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 28px; line-height: 1.1 }
.total-strip span { font-size: 11px; color: var(--muted) }
.figure-big { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 44px; line-height: 1.05 }
@media (max-width: 1150px) { .chart-block { grid-template-columns: 1fr } }