.door-page { min-height: 100vh; background: #142a40; }
.door-shell {
  display: grid;
  width: 100%;
  min-height: 100vh;
  max-width: none;
  grid-template-rows: auto 1fr;
  margin: 0;
  border-width: 0;
}
.door-main { width: calc(100% - 32px); margin: 8px auto 12px; }
.door-heading { margin-bottom: 8px; }
.door-heading h1 { margin: 0; color: #ffda66; font: bold 24px Tahoma, Arial, sans-serif; }
.door-form { padding: 12px; border: 1px solid #55738b; background: #203e5a; }
.door-form > input {
  display: block;
  width: 100%;
  min-height: 42px;
  padding: 8px;
  border: 1px solid #8299aa;
  color: #333;
  background: #fff;
}
.door-camera-frame {
  position: relative;
  display: grid;
  height: clamp(360px, 64vh, 780px);
  overflow: hidden;
  place-items: center;
  border: 1px solid #7290a7;
  background: #101f2d;
}
.door-camera-frame video, .door-camera-frame img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}
.door-camera-frame video[hidden], .door-camera-frame img[hidden] { display: none; }
.door-placeholder {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 20px;
  color: #c7d4df;
  text-align: center;
}
.door-placeholder[hidden] { display: none; }
.door-placeholder span:first-child { color: #f0c24e; font: bold 34px Arial, sans-serif; }
.door-placeholder strong { color: #ffda66; }
.door-countdown {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff4c2;
  background: #101f2dcc;
  font: bold clamp(96px, 24vw, 260px)/1 Tahoma, Arial, sans-serif;
  text-shadow: 0 4px 18px #000;
}
.door-countdown[hidden] { display: none; }
.door-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 8px;
  color: #d0dce5;
  font-size: 11px;
}
.door-consent-check input { flex: 0 0 auto; margin: 2px 0 0; accent-color: #e4ad37; }
.door-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.door-button {
  min-width: 220px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid #8f6e2b;
  color: #fff4c2;
  background: linear-gradient(#b6812c, #78551e);
  font-weight: bold;
  cursor: pointer;
}
.door-button.secondary {
  border-color: #6c879c;
  color: #f1c754;
  background: #1b3855;
}
.door-button:disabled { opacity: .65; cursor: wait; }
.door-actions .door-button:not([hidden]) { min-width: 220px; }
.door-actions #take-photo:not([hidden]) {
  min-height: 64px;
  padding: 14px 28px;
  font-size: 20px;
}
.door-message { min-height: 0; margin: 8px 0 0; color: #c7d4df; }
.door-message.is-error { color: #ffaaaa; }
.door-message.is-success { color: #a7e5a5; }
@media (max-width: 600px) {
  .door-shell { width: 100%; }
  .door-main { width: calc(100% - 16px); margin-top: 8px; }
  .door-camera-frame { height: clamp(300px, 58vh, 620px); }
  .door-actions { display: flex; }
  .door-button { width: 100%; padding: 8px 6px; }
}

@media (max-height: 650px) and (min-width: 601px) {
  .door-main { margin-top: 6px; margin-bottom: 8px; }
  .door-camera-frame { height: max(42vh, 260px); }
}