:root {
  color-scheme: dark;
  --ground: #1a2be0;
  --deep: #0c1690;
  --white: #ffffff;
  --ink: #0a1050;
  --yellow: #ffd400;
  --pink: #ff4fa3;
  --logo: "Dela Gothic One", Impact, "Arial Black", sans-serif;
  --body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { background: var(--ground); }
body { color: var(--white); background: var(--ground); font: 600 18px/1.4 var(--body); }
a { color: inherit; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.brand { font: 400 22px/1 var(--logo); text-decoration: none; text-shadow: .06em .06em 0 var(--pink); }

.login-page {
  display: grid;
  place-items: center;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  padding-block: calc(24px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-bottom, 0px));
}
.login-box { display: grid; gap: 14px; width: 100%; max-width: 420px; }
.login-box h1 { margin: 0; font: 400 clamp(44px, 14vw, 60px)/1.02 var(--logo); text-shadow: .05em .05em 0 var(--pink); }
.login-box form { display: grid; gap: 6px; }
.login-box label { font: 700 17px/1.2 var(--label); letter-spacing: .08em; text-transform: uppercase; }
.login-box input { width: 100%; min-height: 58px; margin-bottom: 10px; padding: 0 14px; color: var(--ink); background: var(--white); border: 0; border-radius: 4px; font-size: 22px; }
.login-box button { min-height: 66px; color: var(--ink); background: var(--yellow); border: 0; border-radius: 4px; font: 400 24px/1 var(--logo); cursor: pointer; }
.note { margin: 0; padding: 12px 14px; color: var(--ink); background: var(--pink); border-radius: 4px; }

.admin-page { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; background: var(--deep); }
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  padding-block: calc(6px + env(safe-area-inset-top, 0px)) 6px;
  background: var(--ground);
}
.bar form { margin: 0; }
.bar nav { display: flex; align-items: center; gap: 8px; }
.bar .link, .bar button { min-height: 44px; padding: 0 14px; display: flex; align-items: center; color: var(--ink); background: var(--white); border: 0; border-radius: 4px; font: 700 16px/1 var(--label); letter-spacing: .06em; text-decoration: none; text-transform: uppercase; cursor: pointer; }
.bar .mic { min-width: 132px; justify-content: center; }
.bar .mic[aria-pressed="true"] { color: var(--ink); background: linear-gradient(90deg, var(--pink) var(--level, 0%), #ffc4e1 var(--level, 0%)); }
.admin-page iframe { width: 100%; height: 100%; border: 0; background: #000; }