:root {
  color-scheme: light;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  color: #242424;
  background: #f5f5f5;
  --brand: #0f6cbd;
  --brand-hover: #115ea3;
  --border: #d1d1d1;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; background: #f5f5f5; }
.app-header { display: flex; gap: 12px; align-items: center; padding: 18px 16px; background: #fff; border-bottom: 1px solid var(--border); }
.app-header h1 { margin: 0; font-size: 20px; line-height: 1.25; }
.app-header p { margin: 2px 0 0; color: #616161; }
main { display: grid; gap: 12px; padding: 16px; }
.card, .notice { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
h2 { margin: 0 0 10px; font-size: 15px; }
p { margin: 0; line-height: 1.45; }
.row { display: flex; gap: 10px; align-items: center; min-width: 0; }
.access-code-input {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  border: 1px solid #8a8886;
  border-radius: 4px;
  padding: 6px 9px;
  font: inherit;
}
.between { justify-content: space-between; }
.muted { color: #616161; }
.small { margin-top: 8px; font-size: 12px; }
dl { display: grid; gap: 8px; margin: 0; }
dl div { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; }
dt { color: #616161; }
dd { margin: 0; overflow-wrap: anywhere; }
textarea { width: 100%; resize: vertical; border: 1px solid #8a8886; border-radius: 4px; padding: 9px; font: inherit; line-height: 1.4; }
textarea:focus { border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.checkbox-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
button { min-height: 32px; border-radius: 4px; border: 1px solid transparent; padding: 6px 12px; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.primary { color: #fff; background: var(--brand); }
.primary:hover:not(:disabled) { background: var(--brand-hover); }
.secondary { color: var(--brand); background: #fff; border-color: var(--brand); }
.text-button { color: var(--brand); background: transparent; padding-inline: 4px; }
.full { width: 100%; min-height: 40px; }
.warning { border-color: #f0c36d; background: #fff8e1; }
.warning h2 { color: #7a4f01; }
.info { margin-top: 10px; border-color: #96c2e6; background: #eff6fc; }
.error { color: #8a1c1c; border-color: #e3a7a7; background: #fdf3f4; }
.status { min-height: 20px; text-align: center; color: #424242; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }