/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 · macrostructure: Workbench · tone: calm utility · anchor hue: olive · contrast: pass (40–41) · nav: N1b · footer: none · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */
:root {
  color-scheme: light;
  --color-primary: #70961c;
  --color-primary-hover: #628817;
  --color-primary-active: #4e7b00;
  --color-primary-soft: #eaf0e8;
  --color-highlight: #9eb216;
  --color-page: #f3f3f3;
  --color-surface: #ffffff;
  --color-text: #000000;
  --color-text-secondary: #6d6d6d;
  --color-text-hint: rgb(0 0 0 / 38%);
  --color-text-on-primary: #ffffff;
  --color-border: rgb(0 0 0 / 18%);
  --color-border-strong: rgb(0 0 0 / 30%);
  --color-error: #e50a0a;
  --color-error-soft: #fff8f6;
  --color-success: #469879;
  --color-warning: #e2a500;
  --color-media: #111310;
  --color-media-raised: #20231e;
  --color-media-text: #f7f8f5;
  --color-media-muted: #a7aea1;
  --color-live-control: rgb(42 42 42 / 60%);
  --color-overlay: rgb(0 0 0 / 42%);
  --color-shadow: rgb(0 0 0 / 10%);
  --color-shadow-strong: rgb(0 0 0 / 20%);
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-control: 10px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 5px 16px var(--color-shadow);
  --shadow-device: 0 2px 10px var(--color-shadow-strong);
  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --ease-functional: ease-out;
  --z-skip: 20;
  --z-modal: 400;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

img,
video {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-skip);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-text);
  color: var(--color-surface);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.skip-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.skip-link:active {
  color: var(--color-primary);
}

.app-shell {
  width: min(1160px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
}

.loading-view {
  display: grid;
  min-height: 100vh;
  place-content: center;
  justify-items: center;
  gap: var(--space-4);
  color: var(--color-text-secondary);
}

.loading-view p {
  margin: 0;
}

.loading-mark {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: loading-spin 800ms linear infinite;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.brand-lockup-compact {
  font-size: 19px;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-content: center;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: 19px;
  font-weight: 800;
}

.login-view {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr;
  gap: var(--space-12);
  padding: var(--space-8) 0 var(--space-12);
}

.login-card {
  align-self: center;
  width: min(100%, 480px);
  margin: 0 auto;
  padding: var(--space-10);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.login-intro {
  margin-bottom: var(--space-8);
}

.eyebrow,
.section-kicker {
  display: block;
  margin: 0 0 var(--space-2);
  color: var(--color-primary-active);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.14em;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  min-width: 0;
  margin-bottom: var(--space-3);
  overflow-wrap: anywhere;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

h2 {
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.login-intro > p:last-child,
.page-heading p {
  margin-bottom: 0;
  color: var(--color-text-secondary);
}

.login-form {
  display: grid;
  gap: var(--space-5);
}

.field {
  display: grid;
  min-width: 180px;
  gap: var(--space-2);
}

.field-grow {
  flex: 1 1 360px;
}

.field > span {
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 650;
}

.region-field {
  display: flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: start;
  transition:
    border-color var(--duration-fast) var(--ease-functional),
    background var(--duration-fast) var(--ease-functional);
}

.region-field__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.region-field__chevron {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg) translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
  .region-field:hover:not(:disabled) {
    border-color: var(--color-border-strong);
    background: var(--color-page);
  }
}

.region-field:focus-visible {
  border-color: var(--color-primary);
  outline-color: var(--color-primary);
}

.region-field:active:not(:disabled) {
  border-color: var(--color-primary-active);
  background: var(--color-primary-soft);
}

.region-field:disabled {
  background: var(--color-page);
  color: var(--color-text-hint);
}

.region-field[data-state="loading"] {
  cursor: progress;
}

.region-field[data-state="error"] {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

.region-field[data-state="success"] {
  border-color: var(--color-success);
}

.field-error {
  min-height: 1lh;
  color: var(--color-error);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

input,
select {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  outline: 2px solid transparent;
  outline-offset: 1px;
  background: var(--color-surface);
  color: var(--color-text);
  transition:
    border-color var(--duration-fast) var(--ease-functional),
    background var(--duration-fast) var(--ease-functional);
}

input {
  padding: 0 var(--space-4);
}

select {
  padding: 0 40px 0 var(--space-4);
}

input::placeholder {
  color: var(--color-text-hint);
}

input:hover:not(:disabled),
select:hover:not(:disabled) {
  border-color: var(--color-border-strong);
}

input:focus-visible,
select:focus-visible {
  border-color: var(--color-primary);
  outline-color: var(--color-primary);
}

input:active:not(:disabled),
select:active:not(:disabled) {
  border-color: var(--color-primary-active);
}

input:disabled,
select:disabled {
  background: var(--color-page);
  color: var(--color-text-hint);
  cursor: not-allowed;
  opacity: 0.55;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
.field[data-state="error"] input {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

input[aria-invalid="false"],
select[aria-invalid="false"],
.field[data-state="success"] input {
  border-color: var(--color-success);
}

.field[data-state="loading"] input,
input[aria-busy="true"],
select[aria-busy="true"] {
  cursor: progress;
}

input[readonly] {
  background: var(--color-page);
  color: var(--color-text-secondary);
}

.region-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  width: min(520px, calc(100% - 32px));
  height: fit-content;
  max-width: none;
  max-height: min(720px, calc(100dvh - 48px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-device);
}

.region-dialog::backdrop {
  background: var(--color-overlay);
}

.region-dialog__panel {
  display: grid;
  max-height: min(720px, calc(100dvh - 48px));
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.region-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-6) var(--space-4);
}

.region-dialog__header h2 {
  font-size: 22px;
}

.region-dialog__close {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-secondary);
}

.region-dialog__close span::before,
.region-dialog__close span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentcolor;
  content: "";
}

.region-dialog__close span::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.region-dialog__close span::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
  .region-dialog__close:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-active);
  }
}

.region-dialog__close:focus-visible,
.region-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.region-dialog__close:active {
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
}

.region-search-field {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-6);
}

.region-search-field > span {
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 650;
}

.region-status {
  min-height: 20px;
  margin: var(--space-3) var(--space-6);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.region-list {
  min-height: 160px;
  padding: 0 var(--space-2) var(--space-3);
  overflow-y: auto;
  border-top: 1px solid var(--color-border);
}

.region-option {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 52px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-10) 0 var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  text-align: start;
}

.region-option strong {
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.region-option > span {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.region-option[aria-selected="true"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
}

.region-option[aria-selected="true"]::after {
  position: absolute;
  right: var(--space-4);
  width: 10px;
  height: 5px;
  border-bottom: 2px solid currentcolor;
  border-left: 2px solid currentcolor;
  content: "";
  transform: rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
  .region-option:hover {
    background: var(--color-page);
  }
}

.region-option:active {
  background: var(--color-primary-soft);
}

.region-option:disabled {
  color: var(--color-text-hint);
}

.region-option[data-state="loading"] {
  cursor: progress;
}

.region-option[data-state="error"] {
  color: var(--color-error);
}

.region-option[data-state="success"] {
  color: var(--color-success);
}

.captcha-field {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  align-items: end;
  gap: var(--space-3);
}

.captcha-field img {
  width: 144px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-page);
  object-fit: contain;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-5);
  border-radius: var(--radius-control);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-functional),
    border-color var(--duration-fast) var(--ease-functional),
    color var(--duration-fast) var(--ease-functional),
    transform var(--duration-fast) var(--ease-functional);
}

.button:focus-visible,
.text-button:focus-visible,
.back-link:focus-visible,
.device-card__link:focus-visible,
.play-overlay:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.button:active:not(:disabled) {
  transform: scale(0.98);
}

.button-primary {
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-size: 19px;
}

.button-primary:hover:not(:disabled) {
  border-color: var(--color-primary-hover);
  background: var(--color-primary-hover);
}

.button-primary:active:not(:disabled) {
  border-color: var(--color-primary-active);
  background: var(--color-primary-active);
}

.button-primary:disabled {
  border-color: var(--color-border);
  background: var(--color-border);
  color: var(--color-text-hint);
  opacity: 0.55;
}

.button-primary[data-state="loading"] {
  cursor: progress;
  opacity: 0.55;
}

.button-primary[data-state="error"] {
  border-color: var(--color-error);
  background: var(--color-error);
}

.button-primary[data-state="success"] {
  border-color: var(--color-success);
  background: var(--color-success);
}

.button-secondary {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary-active);
}

.button-secondary:active:not(:disabled) {
  background: var(--color-primary-soft);
}

.button-secondary:disabled {
  color: var(--color-text-hint);
  opacity: 0.55;
}

.button-full {
  width: 100%;
}

.form-error {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-error);
  border-radius: var(--radius-control);
  background: var(--color-error-soft);
  color: var(--color-error);
  font-size: 13px;
  line-height: 1.5;
}

.feedback-slot {
  min-height: 1lh;
}

.feedback-slot-live {
  margin-top: var(--space-4);
}

.privacy-note {
  margin: var(--space-5) 0 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.workspace-view,
.live-view {
  padding: var(--space-8) 0 var(--space-16);
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 56px;
  margin-bottom: var(--space-12);
}

.account-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.account-email {
  max-width: 280px;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-button {
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.text-button:hover:not(:disabled) {
  background: var(--color-primary-soft);
  color: var(--color-primary-active);
}

.text-button:active:not(:disabled) {
  color: var(--color-primary-active);
  transform: scale(0.98);
}

.text-button:disabled {
  color: var(--color-text-hint);
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.page-heading h1 {
  margin-bottom: var(--space-2);
}

.list-meta {
  min-height: 24px;
  margin-bottom: var(--space-4);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.device-card {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-normal) var(--ease-functional);
}

.device-card:hover {
  box-shadow: var(--shadow-device);
}

.device-card__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.device-card__link:active {
  background: var(--color-primary-soft);
}

.device-card__media {
  position: relative;
  display: grid;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  place-content: center;
  background: var(--color-primary-soft);
}

.device-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.device-card__placeholder {
  width: 84px;
  height: 58px;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-control);
  opacity: 0.4;
}

.device-card__placeholder::after {
  display: block;
  width: 18px;
  height: 18px;
  margin: var(--space-4) auto 0;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  content: "";
}

.device-card__play {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: var(--shadow-device);
}

.device-card__play::after {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--color-text-on-primary);
  content: "";
  transform: translate(-50%, -50%);
}

.device-card__body {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
  padding: var(--space-5);
}

.device-card__body strong,
.device-card__body span,
.device-card__body code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-card__body strong {
  font-size: 16px;
}

.device-card__body span {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.device-card__body code {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.empty-state {
  display: grid;
  grid-column: 1 / -1;
  min-height: 240px;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  text-align: center;
}

.empty-state strong {
  color: var(--color-text);
  font-size: 18px;
}

.live-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.live-title {
  text-align: center;
}

.live-title .eyebrow {
  margin-bottom: var(--space-1);
}

.live-title h1 {
  max-width: 500px;
  margin: 0;
  overflow: hidden;
  font-size: clamp(24px, 4vw, 34px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.back-link {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.back-link:hover {
  background: var(--color-surface);
}

.back-link:active {
  color: var(--color-primary-active);
}

.state-label {
  justify-self: end;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.state-label[data-state="playing"] {
  color: var(--color-primary-active);
}

.state-label[data-state="failed"] {
  color: var(--color-error);
}

.viewer-card {
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--color-media);
  color: var(--color-media-text);
  box-shadow: var(--shadow-device);
}

.viewer-heading {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 var(--space-3);
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-media-raised);
  border-radius: 7px;
  color: var(--color-media-muted);
  font-size: 10px;
  text-transform: uppercase;
}

.status-item strong {
  color: var(--color-media-muted);
  font-size: 10px;
}

.status-item strong[data-status="open"],
.status-item strong[data-status="connected"] {
  color: var(--color-highlight);
}

.status-item strong[data-status="failed"],
.status-item strong[data-status="disconnected"],
.status-item strong[data-status="closed"] {
  color: var(--color-error);
}

.video-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: var(--color-media);
}

.video-stage video {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  object-fit: contain;
}

.video-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--color-media-muted);
  font-size: 13px;
  text-align: center;
}

.camera-mark {
  width: 56px;
  height: 38px;
  margin-bottom: var(--space-4);
  border: 2px solid var(--color-media-muted);
  border-radius: 8px;
  opacity: 0.55;
}

.camera-mark::after {
  display: block;
  width: 14px;
  height: 14px;
  margin: var(--space-2) auto 0;
  border: 2px solid var(--color-media-muted);
  border-radius: 50%;
  content: "";
}

.video-placeholder p {
  margin: 0;
}

.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid var(--color-highlight);
  border-radius: var(--radius-control);
  background: var(--color-live-control);
  color: var(--color-media-text);
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.play-overlay:hover {
  background: var(--color-media-raised);
}

.play-overlay:active {
  border-color: var(--color-primary);
}

.play-overlay:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.control-card,
.log-card {
  margin-top: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.section-heading .section-kicker {
  margin-bottom: var(--space-1);
}

.connection-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
}

.form-actions {
  display: flex;
  gap: var(--space-2);
}

.log-card > summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

.log-card > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.log-card > summary:active {
  color: var(--color-primary-active);
}

.log-card > summary .section-kicker {
  margin-bottom: var(--space-1);
}

.log-toolbar {
  display: flex;
  justify-content: flex-end;
}

.logs {
  min-height: 130px;
  max-height: 280px;
  margin: 0;
  padding: var(--space-4);
  overflow: auto;
  border-radius: var(--radius-control);
  background: var(--color-media);
  color: var(--color-media-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 900px) {
  .device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .connection-form {
    align-items: stretch;
    flex-direction: column;
  }

  .field {
    min-width: 0;
  }

  .form-actions .button {
    flex: 1;
  }
}

@media (max-width: 640px) {
  .app-shell {
    width: min(100% - 24px, 520px);
  }

  .login-view,
  .workspace-view,
  .live-view {
    padding-top: var(--space-5);
  }

  .login-view {
    gap: var(--space-8);
  }

  .login-card {
    padding: var(--space-6);
  }

  .region-dialog {
    inset: auto 0 0;
    width: 100%;
    max-height: min(78dvh, 720px);
    margin: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .region-dialog__panel {
    max-height: min(78dvh, 720px);
  }

  .app-bar {
    align-items: flex-start;
    margin-bottom: var(--space-8);
  }

  .account-actions {
    align-items: flex-end;
    flex-direction: column;
    gap: var(--space-1);
  }

  .account-email {
    max-width: 180px;
  }

  .page-heading {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-5);
  }

  .device-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .live-header {
    grid-template-columns: 1fr auto;
  }

  .live-title {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .back-link {
    grid-column: 1;
    grid-row: 2;
  }

  .state-label {
    grid-column: 2;
    grid-row: 2;
  }

  .viewer-card {
    margin-inline: calc(var(--space-3) * -1);
    border-radius: 0;
  }

  .control-card,
  .log-card {
    padding: var(--space-5);
  }
}

@media (max-width: 420px) {
  .captcha-field {
    grid-template-columns: 1fr;
  }

  .captcha-field img {
    width: 100%;
  }

  .brand-lockup {
    font-size: 19px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-control);
  }

  .form-actions {
    flex-direction: column;
  }

  .status-row {
    width: 100%;
  }

  .status-item {
    flex: 1;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}