:root {
  color-scheme: dark;
  font: 16px system-ui, sans-serif;
  background: #0e1724;
  color: #ebf3fa;
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: #91ebd4; }

#menu {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 1.25rem;
}

section {
  width: min(100%, 34rem);
  padding: clamp(1.25rem, 5vw, 2.5rem);
  border: 1px solid #2b4354;
  border-radius: 1rem;
  background: #162333;
}

h1 { margin: .2rem 0 .5rem; font-size: clamp(1.85rem, 6vw, 3rem); }
p { margin: 0 0 1.5rem; color: #b8ccdc; }
.eyebrow { margin: 0; color: #91ebd4; font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; }

form { display: flex; gap: .75rem; flex-wrap: wrap; }
label { display: grid; gap: .35rem; margin-bottom: .35rem; }
label:first-child { flex: 1 1 65%; }
input, select, button {
  border: 1px solid #4a6676;
  border-radius: .45rem;
  background: #1e3646;
  color: inherit;
  font: inherit;
  padding: .55rem .75rem;
}
input { width: 100%; }
button { cursor: pointer; }
button.primary { background: #91ebd4; color: #0e1724; border-color: #91ebd4; }
button:hover { filter: brightness(1.18); }
button:focus-visible, a:focus-visible { outline: 2px solid #91ebd4; outline-offset: 3px; }
#error { color: #ffaea2; margin: 1rem 0 0; }
#table { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 600px; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; padding: .55rem 1rem; background: #162333; }
nav button { font-size: .9rem; padding: .3rem .65rem; }
#status { color: #b8ccdc; }
#board { position: relative; min-width: 0; overflow: hidden; }
canvas { display: block; }

#profile-name {
  position: absolute;
  z-index: 1;
  border-color: #aac0cf;
  border-radius: 6px;
  background: #2b4454;
  font: 16px ui-monospace, monospace;
  padding: 0 10px;
  caret-color: #73e8c9;
}
#profile-name:focus { border-color: #73e8c9; outline: none; }
#profile-name::selection { background: #73e8c9; color: #0e1724; }

#seat-manager {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1.25rem;
  border: 1px solid #476579;
  border-radius: .9rem;
  background: #162333;
  color: #ebf3fa;
}
#seat-manager::backdrop { background: #0e172480; }
#seat-manager header, #seat-list li, .seat-actions, #seat-link {
  display: flex;
  align-items: center;
  gap: .65rem;
}
#seat-manager header, #seat-list li { justify-content: space-between; }
#seat-manager h2 { margin: 0; font-size: 1.35rem; }
#seat-manager p { margin: .7rem 0; }
#seat-manager button { font-size: .875rem; padding: .4rem .6rem; }
#seat-manager button:disabled { cursor: default; color: #b3c2cd; opacity: .72; }
#seat-list { margin: .9rem 0; padding: 0; list-style: none; }
#seat-list li { padding: .65rem 0; border-top: 1px solid #304757; }
#seat-list li > div:first-child { min-width: 0; overflow-wrap: anywhere; }
#seat-list small { display: block; margin-top: .2rem; color: #c1d6e3; }
.seat-actions { flex: 0 0 auto; gap: .4rem; }
#seat-link label { flex: 1 1 auto; min-width: 0; margin: 0; }
#seat-link { align-items: end; }
#seat-notice { min-height: 1.3em; color: #91ebd4; }
@media (max-width: 480px) {
  #seat-list li { align-items: stretch; flex-direction: column; }
  .seat-actions { flex-wrap: wrap; }
}