:root {
  --bg: #080b10;
  --panel: #111720;
  --panel-2: #171f2a;
  --line: #2a3542;
  --text: #f4f6f8;
  --muted: #9aa7b5;
  --red: #b41e2c;
  --gold: #c9a34a;
  --navy: #14283f;
  --success: #56c08c;
  --warning: #e8b84d;
  --danger: #ea5a65;
  --shadow: 0 18px 50px rgba(0,0,0,.32);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; background: radial-gradient(circle at top, #16202d 0, var(--bg) 45%); color: var(--text); min-height: 100vh; }
body[data-view="home"] { position: relative; background: #05080d; }
body[data-view="home"]::before { content: ""; position: fixed; z-index: 0; inset: 0; background: linear-gradient(90deg, rgba(4,7,12,.84) 0%, rgba(4,7,12,.58) 46%, rgba(4,7,12,.28) 100%), url('/assets/landing-backdrop-original.png') center / cover no-repeat; pointer-events: none; }
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.topbar { position: sticky; top: 0; z-index: 20; height: 64px; padding: 0 22px; display: flex; align-items: center; gap: 18px; background: rgba(8,11,16,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.topbar-seal { width: 52px; height: 52px; padding: 2px; border-radius: 50%; background: #f0eee4; border: 1px solid rgba(201,163,74,.7); box-shadow: 0 0 14px rgba(201,163,74,.24); object-fit: cover; }
.brand-mini { font-weight: 900; text-decoration: none; letter-spacing: .06em; }
.brand-mini span { color: var(--muted); font-weight: 700; margin-left: 7px; font-size: .78em; }
.identity-pill, .count-pill { border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); padding: 7px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.identity-pill { margin-left: auto; color: var(--text); }
.ribbon { width: min(360px, 100%); height: 8px; display: grid; grid-template-columns: 1fr 1.5fr 1fr; overflow: hidden; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.ribbon i { background: #174a86; }
.ribbon b { background: #c92832; border-inline: 3px solid var(--gold); }
.ribbon-small { width: 150px; height: 5px; }
.app-shell { width: min(1700px, calc(100% - 28px)); margin: 18px auto 60px; }
.boss-layout, .admin-layout { width: min(2600px, calc(100% - 44px)); }
.panel { background: linear-gradient(180deg, rgba(23,31,42,.96), rgba(14,20,28,.96)); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 5px; color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
h1,h2,h3,p { margin-top: 0; }
h1 { margin-bottom: 5px; font-size: clamp(1.55rem, 3vw, 2.45rem); }
h2 { margin-bottom: 4px; }
.muted { color: var(--muted); }
.timer { font-variant-numeric: tabular-nums; font-weight: 950; font-size: clamp(2.3rem, 7vw, 5rem); line-height: .95; letter-spacing: -.05em; }
.timer.warning { color: var(--warning); }
.timer.expired { color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .52; } }
.status-panel, .admin-hero { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 3px solid var(--red); }
.controls-strip { position: sticky; top: 64px; z-index: 10; margin-top: 14px; padding: 12px 14px; display: flex; align-items: end; gap: 14px; flex-wrap: wrap; backdrop-filter: blur(14px); }
label { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
input, select { color: var(--text); background: #0a0e14; border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; outline: none; }
input:focus, select:focus { border-color: var(--gold); }
.search-box { flex: 1 1 260px; }
.notice { margin-left: auto; align-self: center; color: var(--muted); font-size: .9rem; }
.notice.active { color: var(--success); font-weight: 800; }
.recruiter-drawer { position: fixed; z-index: 90; top: 0; right: 0; width: min(420px, 92vw); height: 100vh; padding: 30px 24px; background: #101823; border-left: 1px solid var(--gold); box-shadow: -24px 0 60px rgba(0,0,0,.45); transform: translateX(105%); transition: transform .2s ease; }
.recruiter-drawer.open { transform: translateX(0); }
.drawer-close { position: absolute; top: 16px; right: 18px; border: 0; background: transparent; color: var(--muted); font-size: 1.8rem; cursor: pointer; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 24px 0; }
.detail-stats div { padding: 12px 10px; border-radius: 9px; background: #182331; }
.detail-stats small { display: block; color: var(--muted); font-size: .62rem; }
.detail-stats strong { display: block; margin-top: 4px; font-size: 1.2rem; }
.detail-note { color: var(--muted); font-size: .85rem; line-height: 1.5; }
.strategy-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.strategy-tags span { padding: 3px 6px; border-radius: 999px; color: #f2d998; background: rgba(201,163,74,.12); border: 1px solid rgba(201,163,74,.28); font-size: .58rem; font-weight: 900; letter-spacing: .05em; }
.balance-list { display: grid; gap: 8px; }
.balance-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 7px 9px; border-radius: 8px; background: #0d1219; border: 1px solid var(--line); overflow: hidden; }
.balance-row i { position: absolute; left: 0; bottom: 0; width: var(--fill); height: 2px; background: var(--gold); }
.boss-columns { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(300px, .9fr); gap: 14px; margin-top: 14px; }
.stack { display: grid; gap: 14px; align-content: start; }
.recruiter-panel, .stack .panel, .admin-layout > .panel, .admin-columns > .panel { padding: 16px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: 1.12rem; }
.recruiter-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 10px; }
.recruiter-card { border: 1px solid var(--line); background: #0d1219; border-radius: 13px; padding: 13px; display: grid; gap: 12px; transition: border-color .15s, transform .15s; }
.recruiter-card:hover { border-color: #46566a; transform: translateY(-1px); }
.recruiter-head { display: flex; align-items: center; gap: 11px; }
.avatar { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #25364a, #0c1118); border: 1px solid #3b4b5d; font-weight: 950; color: var(--gold); }
.recruiter-head strong { display: block; font-size: 1rem; }
.recruiter-head span { color: var(--muted); font-size: .82rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.stat { background: #151c25; border-radius: 9px; padding: 8px; }
.stat small { display: block; color: var(--muted); font-size: .65rem; text-transform: uppercase; }
.stat strong { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.card-actions { display: flex; gap: 8px; }
.button { border: 1px solid #435064; background: #1a2430; color: var(--text); padding: 10px 13px; border-radius: 9px; font-weight: 850; }
.button:hover { background: #222f3e; }
.button.primary { background: var(--red); border-color: #d04150; }
.button.primary:hover { background: #c62635; }
.button:disabled { opacity: .35; cursor: not-allowed; }
.button.small { padding: 7px 10px; font-size: .78rem; }
.button.danger, .button.danger-soft { border-color: #7b3540; }
.button.danger { background: #7d1f2a; }
.button.danger-soft { color: #ffadb4; background: #32151a; }
.queue-list { display: grid; gap: 7px; }
.queue-item { padding: 10px; border-radius: 9px; background: #0d1219; border: 1px solid var(--line); display: flex; align-items: center; gap: 9px; }
.queue-item span { margin-left: auto; color: var(--muted); }
.empty-state { color: var(--muted); padding: 12px 0; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #edf1f5; color: #111; padding: 10px 14px; border-radius: 10px; font-weight: 800; transition: .2s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.access-locked > *:not(.access-gate) { filter: blur(8px); pointer-events: none; user-select: none; }
.access-gate { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; background: rgba(4,7,12,.86); }
.access-card { width: min(360px, calc(100% - 32px)); padding: 28px; border: 1px solid var(--gold); border-radius: 16px; background: #111923; box-shadow: var(--shadow); }
.access-card h1 { margin-bottom: 8px; }
.access-card input { width: 100%; margin: 16px 0 10px; }
.access-card button { width: 100%; }
.access-error { min-height: 1.2em; margin: 10px 0 0; color: var(--danger); font-size: .8rem; }

.home-shell { position: relative; z-index: 1; width: min(1800px, calc(100% - 44px)); margin: 7vh auto; }
.hero { position: relative; overflow: hidden; min-height: 610px; padding: clamp(48px, 6vw, 96px); background: linear-gradient(180deg, rgba(23,31,42,.9), rgba(14,20,28,.78)); }
.hero::before { content: ""; position: absolute; inset: 8% -10%; background: repeating-linear-gradient(-8deg, transparent 0 58px, rgba(201,163,74,.055) 59px, transparent 60px); opacity: .8; pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; background: transparent; opacity: 0; pointer-events: none; }
.brand-lockup { position: relative; z-index: 1; display: flex; align-items: center; gap: 30px; }
.seal-placeholder { width: 104px; height: 104px; border: 3px solid var(--gold); outline: 2px solid var(--red); outline-offset: 4px; border-radius: 50%; display: grid; place-items: center; background: #0b1118; box-shadow: inset 0 0 0 7px #182331; }
.seal-placeholder span { font-size: 2rem; color: var(--gold); }
.seal-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; filter: saturate(.75) contrast(1.08); }
.lead { position: relative; z-index: 1; color: var(--muted); margin: 24px 0; }
.route-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.route-card { text-decoration: none; background: rgba(13,18,25,.9); border: 1px solid var(--line); border-radius: 13px; padding: 22px; }
.route-card:hover { border-color: var(--gold); }
.route-card strong { display: block; margin-bottom: 5px; }
.route-card span { color: var(--muted); font-size: .9rem; }

.board-body { position: relative; background: radial-gradient(circle at 50% 0, #273547 0, #080b10 52%); overflow-x: hidden; }
.board-body::before { content: ""; position: fixed; z-index: -1; inset: 20% -8% 0; background: url('/assets/rs-dallas-skyline-original.png') center bottom / min(1100px, 78vw) auto no-repeat; opacity: .055; filter: grayscale(1) contrast(1.25); pointer-events: none; }
.board-shell { min-height: 100vh; padding: 24px 30px 90px; display: grid; grid-template-rows: auto auto auto 1fr; gap: 16px; }
.board-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.board-header h1 { font-size: clamp(1.8rem, 3.2vw, 3.2rem); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .02em; }
.board-header > div:nth-child(2) > .eyebrow { margin-bottom: 7px; font-size: clamp(.88rem, 1.2vw, 1.12rem); letter-spacing: .2em; text-shadow: 0 0 12px rgba(201,163,74,.28); }
.broadcast-label { margin: 0 0 9px; color: #8290a0; font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.broadcast-label b { color: var(--gold); padding: 0 5px; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(180,30,44,.18), 0 0 12px rgba(180,30,44,.7); vertical-align: 1px; }
.board-seal { width: 156px; height: 156px; padding: 5px; background: #f0eee4; box-shadow: 0 0 0 2px rgba(201,163,74,.58), 0 0 26px rgba(201,163,74,.28); }
.board-brand-rail { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr); gap: 12px; min-height: 184px; }
.brand-crest-wrap, .mission-makers-wrap { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #0d1219; box-shadow: var(--shadow); }
.brand-crest-wrap { display: grid; place-items: center; padding: 8px; background: radial-gradient(circle, #304c70, #090d13 76%); border-color: rgba(201,163,74,.72); box-shadow: 0 0 0 1px rgba(201,163,74,.68), 0 0 34px rgba(201,163,74,.34), var(--shadow); }
.brand-crest-wrap img { width: 100%; height: 100%; max-height: 210px; object-fit: contain; object-position: center; opacity: 1; filter: saturate(1.08) brightness(1.12) drop-shadow(0 0 9px rgba(201,163,74,.62)); }
.mission-makers-wrap { display: grid; grid-template-columns: 250px 1fr; align-items: center; min-width: 0; }
.mission-makers-wrap img { width: 250px; height: 100%; min-height: 184px; object-fit: contain; object-position: center; background: #0b111b; }
.mission-makers-copy { padding: 18px 22px; }
.mission-makers-copy strong { display: block; font-size: clamp(1.05rem, 2vw, 1.65rem); letter-spacing: .01em; }
.board-meta { display: grid; justify-items: end; gap: 7px; }
.board-meta span { color: var(--gold); font-weight: 950; letter-spacing: .13em; font-size: .78rem; }
.board-meta strong { color: var(--muted); }
.on-clock { position: relative; overflow: hidden; text-align: center; padding: 22px; background: linear-gradient(90deg, rgba(180,30,44,.14), rgba(17,23,32,.75), rgba(180,30,44,.14)); border-block: 1px solid #5c2830; }
.on-clock::before, .on-clock::after { content: ""; position: absolute; left: -8%; right: -8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,163,74,.3), transparent); transform: rotate(-2deg); pointer-events: none; }
.on-clock::before { top: 18%; }
.on-clock::after { bottom: 16%; transform: rotate(2deg); }
.on-clock h2 { font-size: clamp(2.5rem, 8vw, 6.3rem); line-height: .92; margin: 5px 0 8px; letter-spacing: .02em; }
.board-timer { font-size: clamp(4.3rem, 12vw, 9rem); color: #fff; }
.board-round { margin: 8px 0 0; color: var(--muted); font-weight: 900; letter-spacing: .09em; }
.board-secondary { display: grid; grid-template-columns: 1fr 1fr; text-align: center; gap: 12px; }
.board-secondary > div { position: relative; min-height: 86px; padding: 12px 18px 10px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(135deg, rgba(16,24,35,.9), rgba(9,13,19,.86)); overflow: hidden; }
.board-secondary > div::after { content: ""; position: absolute; right: -18px; bottom: -28px; width: 150px; height: 100px; border: 1px solid rgba(201,163,74,.15); transform: skewX(-28deg) rotate(-14deg); }
.status-mark { position: absolute; top: 13px; right: 16px; color: var(--gold); font-size: 1.1rem; font-weight: 950; }
.board-secondary strong { display: block; min-height: 1.5em; font-size: clamp(1.15rem, 2.2vw, 1.65rem); }
.board-secondary small { color: #657486; font-size: .72rem; letter-spacing: .04em; }
.last-pick-card { border-top: 2px solid rgba(201,163,74,.5) !important; }
.up-next-card { border-top: 2px solid rgba(180,30,44,.7) !important; }
.board-secondary strong { font-size: clamp(1rem, 2vw, 1.45rem); }
.boss-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; align-content: start; }
.boss-tile { min-height: 112px; border-radius: 12px; padding: 11px; background: #0d1219; border: 1px solid var(--line); }
.boss-tile.on { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.boss-tile h3 { margin: 0; font-size: 1rem; }
.boss-tile .fill { color: var(--muted); font-size: .72rem; }
.boss-tile ol { margin: 8px 0 0; padding-left: 18px; color: #cbd4de; font-size: .72rem; line-height: 1.4; }
.pick-reveal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(4,6,9,.9); opacity: 0; visibility: hidden; transition: .2s; }
.pick-reveal.show { opacity: 1; visibility: visible; }
.reveal-card { width: min(850px, calc(100% - 40px)); text-align: center; padding: 48px; border-radius: 22px; background: radial-gradient(circle at top, #26364a, #0c1118 60%); border: 2px solid var(--gold); box-shadow: 0 35px 100px #000; }
.reveal-card .ribbon { margin: 16px auto 24px; }
.reveal-card h2 { font-size: clamp(2rem, 6vw, 5rem); margin-bottom: 8px; }
.reveal-card h3 { font-size: clamp(1.7rem, 4vw, 3.4rem); color: var(--gold); margin: 0; }
.audio-dock { position: fixed; z-index: 50; right: 12px; bottom: 12px; display: flex; gap: 7px; padding: 7px; border-radius: 11px; background: rgba(8,11,16,.86); border: 1px solid var(--line); opacity: .25; transition: opacity .2s; }
.audio-dock:hover { opacity: 1; }
.file-button input { display: none; }

.admin-layout { position: relative; display: grid; gap: 14px; }
.admin-layout::before { content: ""; position: absolute; z-index: -1; right: -2%; top: 2%; width: 58%; height: 72%; background: url('/assets/rs-dallas-skyline-original.png') center / contain no-repeat; opacity: .11; filter: grayscale(.72) brightness(1.1); pointer-events: none; }
.admin-layout > .panel { border-top: 2px solid rgba(201,163,74,.35); }
.admin-layout > .admin-hero { border-top-color: var(--red); }
.admin-layout > .admin-footer-actions { border-top-color: rgba(180,30,44,.7); }
.control-group-label { margin: 12px 0 7px; color: var(--gold); font-size: .65rem; font-weight: 900; letter-spacing: .14em; }
.admin-controls-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; align-items: start; }
.admin-controls-panel > .section-heading { grid-column: 1 / -1; }
.control-column { min-width: 0; }
.admin-activity-panel { padding: 14px 16px; }
.data-freshness { margin: 8px 0 0; color: #6f8194; font-size: .66rem; letter-spacing: .08em; font-weight: 800; }
.activity-log { display: grid; gap: 6px; max-height: 190px; overflow: auto; color: var(--muted); font-size: .8rem; }
.activity-log div { padding: 7px 9px; border-left: 2px solid var(--gold); background: #0d1219; border-radius: 5px; }
.button-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.inline-form { display: flex; align-items: end; gap: 8px; margin-top: 14px; }
.inline-form label { width: 170px; }
.admin-columns { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; }
.admin-boss-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.admin-boss { background: #0d1219; border: 1px solid var(--line); border-radius: 9px; padding: 10px; }
.admin-boss strong { display: block; }
.admin-boss span { color: var(--muted); font-size: .8rem; }
.admin-recruiters { max-height: 560px; overflow: auto; display: grid; gap: 6px; }
.admin-recruiter { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 9px; background: #0d1219; border: 1px solid var(--line); border-radius: 9px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); }
.status-dot.unavailable { background: var(--danger); }
.status-dot.drafted { background: var(--gold); }
.admin-footer-actions { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.admin-footer-actions label { flex: 1 1 250px; }

@media (max-width: 980px) {
  .boss-columns, .admin-columns { grid-template-columns: 1fr; }
  .boss-grid { grid-template-columns: repeat(4, 1fr); }
  .route-grid { grid-template-columns: 1fr; }
  .admin-controls-panel { grid-template-columns: 1fr; }
  .admin-controls-panel > .section-heading { grid-column: auto; }
}
@media (max-width: 650px) {
  .app-shell { width: min(100% - 16px, 1500px); }
  .home-shell { width: min(100% - 16px, 1380px); margin: 7vh auto; }
  .hero { min-height: 0; padding: 28px 20px; }
  .topbar { padding-inline: 12px; }
  .ribbon-small { display: none; }
  .status-panel, .admin-hero { padding: 15px; }
  .boss-grid { grid-template-columns: repeat(2, 1fr); }
  .board-shell { padding: 14px 12px 80px; }
  .board-header { grid-template-columns: 1fr auto; }
  .board-seal { display: none; }
  .board-brand-rail { grid-template-columns: 1fr; min-height: 92px; }
  .brand-crest-wrap { display: none; }
  .mission-makers-wrap { grid-template-columns: 120px 1fr; }
  .mission-makers-wrap img { width: 120px; min-height: 110px; }
  .mission-makers-copy { padding: 12px 14px; }
  .board-meta { font-size: .72rem; }
  .board-secondary { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .admin-boss-grid { grid-template-columns: 1fr; }
}