:root {
  color-scheme: dark;
  --bg: #060906;
  --surface: #0f150d;
  --surface-2: #171e14;
  --surface-3: #1d2618;
  --line: #3d4a33;
  --line-strong: #687a48;
  --text: #f3f5ef;
  --muted: #b8c2ad;
  --accent: #afd34c;
  --accent-strong: #9fc43a;
  --amber: #f3b844;
  --danger: #ff7468;
  --focus: #e5ff8c;
  font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(rgba(116, 135, 82, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 135, 82, .035) 1px, transparent 1px),
    radial-gradient(ellipse at 82% -10%, rgba(126, 151, 73, .11), transparent 42rem),
    var(--bg);
  background-size: 46px 46px, 46px 46px, auto, auto;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: .16;
  background: repeating-radial-gradient(ellipse at 87% 6%, transparent 0 28px, #718050 29px 30px, transparent 31px 48px);
  mask-image: linear-gradient(to left, #000, transparent 58%);
}

h1, h2, h3, .command-title, .section-code, button, .header-action, legend {
  font-family: "Bahnschrift Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  letter-spacing: .045em;
}
a { color: var(--accent); }
p { color: var(--muted); line-height: 1.55; }

.command-bar {
  display: grid;
  grid-template-columns: minmax(230px, .8fr) minmax(320px, 1.4fr) minmax(280px, .9fr);
  align-items: center;
  gap: 1.25rem;
  min-height: 102px;
  padding: .65rem clamp(1rem, 2.2vw, 2.2rem);
  border-bottom: 1px solid var(--line-strong);
  background: rgba(7, 10, 7, .96);
}
.brand-lockup { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.brand-lockup img {
  width: 176px;
  height: 78px;
  object-fit: contain;
  background: #050705;
}
.brand-lockup span { color: var(--accent); font: 700 .66rem/1.2 ui-monospace, monospace; letter-spacing: .12em; white-space: nowrap; }
.command-title { display: grid; justify-items: center; gap: .12rem; text-align: center; }
.command-title strong { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.5rem); line-height: 1; }
.command-title span { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.header-controls { display: flex; justify-content: flex-end; align-items: stretch; gap: .65rem; }
.access-state {
  display: grid;
  min-width: 180px;
  padding: .62rem .8rem;
  border: 1px solid var(--line);
  background: var(--surface);
}
.access-state span { color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.access-state strong { color: var(--accent); font-size: .9rem; }
.header-action, .install-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .65rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 750;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

main { width: min(1900px, 100%); margin: 0 auto; padding: 1.15rem clamp(.75rem, 2vw, 2rem) 2rem; }
.mission-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.mission-heading h1 { margin: .12rem 0 0; color: #fff; font-size: clamp(1.55rem, 3vw, 2.65rem); line-height: 1; text-transform: uppercase; }
.mission-heading p { margin: 0; text-align: right; }
.section-code { color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .16em; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
section {
  position: relative;
  margin-bottom: .8rem;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: linear-gradient(145deg, rgba(23, 30, 20, .98), rgba(11, 15, 10, .98));
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
section::before {
  position: absolute;
  top: -1px;
  left: 14px;
  width: 62px;
  height: 2px;
  content: "";
  background: var(--accent);
}
.grid section { padding: 0; overflow: hidden; }
.grid section h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  margin: 0;
  padding: .52rem .7rem;
  color: #f8faf4;
  font-size: .83rem;
  line-height: 1;
  text-transform: uppercase;
}
.grid section h2::after { content: "LIVE"; color: var(--accent); font-size: .75rem; letter-spacing: .12em; }
.grid section > p { margin: 0; padding: .6rem .75rem; color: #ffe0a0; font-size: .78rem; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #020402; border-top: 1px solid #303a29; }
video:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

#archive { margin-top: .7rem; padding: 1rem; }
#archive h2 { margin: 0 0 .85rem; font-size: 1.2rem; text-transform: uppercase; }
.archive-tools { display: flex; align-items: end; gap: .7rem; flex-wrap: wrap; }
.archive-tools label { min-width: 230px; }
#recordings { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
#recordings button { padding: .5rem .7rem; background: #25301e; color: #edf4e4; }
#archive-player:not([src]) { display: none; }

form { display: grid; gap: 1rem; max-width: 820px; padding: 1rem; border: 1px solid var(--line); background: rgba(13, 18, 12, .8); }
.auth-strip { grid-template-columns: minmax(260px, 520px) max-content; align-items: end; max-width: 900px; }
#panel { display: grid; grid-template-columns: minmax(300px, 520px) minmax(500px, 1fr); gap: 1rem; margin-top: 1rem; }
#panel #create { grid-row: 1 / span 4; }
#panel > p, #panel > textarea, #panel > h2, #panel > #shares { grid-column: 2; }
#panel > p { margin: 0; }
#panel > h2 { margin: .6rem 0 0; font-size: 1.3rem; text-transform: uppercase; }
#shares { display: grid; gap: .5rem; }
#shares section { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; }
#shares section p { margin: 0; color: #dbe2d4; }
label { display: grid; gap: .35rem; color: #e2e7dc; font-size: .79rem; font-weight: 700; }
input:not([type=checkbox]), select, textarea {
  width: 100%;
  min-height: 44px;
  padding: .65rem .72rem;
  border: 1px solid #647253;
  border-radius: 0;
  background: #080c07;
  color: #fff;
  font: inherit;
}
input::placeholder, textarea::placeholder { color: #9ba590; opacity: 1; }
input[type=checkbox] { width: 1.05rem; height: 1.05rem; margin: .12rem .55rem 0 0; accent-color: var(--accent-strong); }
.check { display: flex; align-items: flex-start; }
textarea { max-width: 100%; min-height: 84px; resize: vertical; }
fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: 0; padding: .75rem; border: 1px solid var(--line); }
fieldset label { display: flex; align-items: center; padding: .45rem; background: #0b100a; }
legend { padding: 0 .4rem; color: var(--accent); font-weight: 800; text-transform: uppercase; }
button {
  width: fit-content;
  min-height: 42px;
  padding: .65rem 1rem;
  border: 1px solid #b7d75a;
  border-radius: 0;
  background: var(--accent-strong);
  color: #101607;
  font: 750 .84rem/1 "Bahnschrift Condensed", "Arial Narrow", sans-serif;
  letter-spacing: .045em;
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
button:hover, .header-action:hover { filter: brightness(1.12); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

#message { min-height: 1.5rem; color: #ffe0a0; font-weight: 650; }
footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem clamp(1rem, 2vw, 2rem);
  border-top: 1px solid var(--line);
  color: #aeb8a4;
  background: #080b08;
  font: 700 .66rem/1.3 ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
footer span:first-child, footer span:last-child { color: var(--accent); }

@media (max-width: 1250px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #panel { grid-template-columns: 1fr; }
  #panel #create, #panel > p, #panel > textarea, #panel > h2, #panel > #shares { grid-column: 1; grid-row: auto; }
}

@media (max-width: 900px) {
  .command-bar { grid-template-columns: 1fr auto; }
  .command-title { grid-column: 1 / -1; grid-row: 2; padding-bottom: .6rem; }
  .brand-lockup img { width: 145px; height: 64px; }
  .mission-heading { align-items: flex-start; flex-direction: column; }
  .mission-heading p { text-align: left; }
}

@media (max-width: 620px) {
  .command-bar { grid-template-columns: 1fr; }
  .command-title { grid-column: auto; grid-row: auto; justify-items: start; text-align: left; }
  .header-controls { justify-content: stretch; flex-wrap: wrap; }
  .header-controls > * { flex: 1; }
  .grid { grid-template-columns: 1fr; }
  .auth-strip { grid-template-columns: 1fr; }
  fieldset { grid-template-columns: 1fr; }
  #shares section { align-items: stretch; flex-direction: column; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}