:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0a0c10;
  color: #f4f6fa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(59, 130, 246, .14), transparent 36rem),
    radial-gradient(circle at 80% 75%, rgba(168, 85, 247, .1), transparent 32rem),
    #0a0c10;
}

button {
  border: 1px solid #343a46;
  border-radius: 12px;
  padding: 11px 16px;
  background: #171b22;
  color: #f4f6fa;
  cursor: pointer;
  font: inherit;
  touch-action: manipulation;
}

button:hover:not(:disabled) { border-color: #687386; }
button:disabled { cursor: not-allowed; opacity: .4; }
button.primary { background: #2563eb; border-color: #3b82f6; }
button.warning { background: #7c2d12; border-color: #c2410c; }

.layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(560px, 960px) minmax(320px, 520px);
  justify-content: center;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  padding: 48px 24px;
}

.phone-panel {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.phone-shell {
  width: min(960px, 100%, 94vw);
  max-width: 100%;
  aspect-ratio: auto;
  padding: 12px;
  position: relative;
  border-radius: 38px;
  border: 1px solid rgba(148, 163, 184, .62);
  background: linear-gradient(145deg, #343c49 0%, #0a0c11 35%, #1c222b 72%, #3a4350 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .55),
    0 0 0 3px rgba(9, 11, 15, .92),
    0 0 0 4px rgba(96, 165, 250, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.phone-shell.landscape {
  width: min(960px, 100%, 94vw);
  aspect-ratio: auto;
  border-radius: 38px;
}

.screen {
  width: 100%;
  height: auto;
  aspect-ratio: 667 / 375;
  position: relative;
  overflow: hidden;
  background: #000;
  border-radius: 25px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 0 18px rgba(0, 0, 0, .7);
}

.screen img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

#video {
  transform: scale(1.015);
  transform-origin: center;
}

.screen img:not([src]) { visibility: hidden; }

.screen img.freeze-frame {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  pointer-events: none;
}

.freeze-frame[hidden] { display: none; }

.input-layer { position: absolute; z-index: 3; inset: 0; touch-action: none; cursor: crosshair; }
.input-layer.disabled { cursor: not-allowed; background: rgba(0, 0, 0, .2); }
.input-layer.text-entry-locked { pointer-events: none; }

.native-keyboard-mask {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(96, 165, 250, .24);
  background:
    linear-gradient(180deg, rgba(8, 13, 22, 1), rgba(3, 6, 12, 1)),
    radial-gradient(circle at 50% 0, rgba(59, 130, 246, .18), transparent 70%);
  color: #93c5fd;
  font-size: clamp(.72rem, 1.4vw, .95rem);
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  pointer-events: none;
}
.native-keyboard-mask[hidden] { display: none; }

.screen-message {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #8f9bad;
  text-align: center;
  pointer-events: none;
}

.screen-message[hidden] { display: none; }

.screen-message.stream-recovery {
  align-content: end;
  justify-items: center;
  gap: 12px;
  padding-bottom: 42px;
  color: #dbeafe;
  font-size: clamp(.9rem, 1.8vw, 1.08rem);
  font-weight: 700;
  letter-spacing: .01em;
  background:
    linear-gradient(180deg, rgba(3, 7, 18, .1), rgba(3, 7, 18, .84)),
    #050914 url("/stream-placeholder.svg") center 42% / min(42%, 260px) auto no-repeat;
}

.screen-message.stream-recovery::after {
  content: "Последний кадр появится автоматически";
  color: #7890ae;
  font-size: .72rem;
  font-weight: 500;
}

.payment-overlay {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(5, 8, 14, .76);
  color: #fff;
  text-align: center;
  backdrop-filter: blur(5px);
  pointer-events: auto;
}

.payment-overlay[hidden] { display: none; }
.payment-overlay-card {
  display: grid;
  gap: 8px;
  max-width: 80%;
  padding: 18px 24px;
  border: 1px solid rgba(251, 146, 60, .76);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(26, 31, 41, .94), rgba(12, 15, 21, .92));
  box-shadow:
    0 16px 50px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(255, 255, 255, .06),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}
.payment-overlay strong { font-size: clamp(1.15rem, 3vw, 2rem); }
.payment-overlay span { color: #cbd5e1; line-height: 1.45; }

.controls { min-width: 0; }
.controls h1 { margin: 4px 0 12px; font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.055em; }
.eyebrow { color: #60a5fa; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; }
.status { min-height: 24px; color: #aeb7c6; }
.status[data-state="ACTIVE"] { color: #4ade80; }
.status[data-state="WAITING_FOR_PAYMENT_CONFIRMATION"] { color: #fb923c; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

.payment-card {
  margin-top: 30px;
  padding: 20px;
  border: 1px solid #303744;
  border-radius: 18px;
  background: rgba(22, 27, 35, .76);
}

.payment-card h2 { margin-top: 0; }
.payment-card p, .notes { color: #aeb7c6; line-height: 1.55; }
.notes { margin-top: 22px; font-size: .9rem; }

dialog {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid #3a4351;
  border-radius: 20px;
  padding: 0;
  background: #12161d;
  color: #f4f6fa;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}

dialog::backdrop { background: rgba(3, 5, 8, .78); backdrop-filter: blur(8px); }
dialog form { padding: 24px; }
dialog h2 { margin: 3px 0 0; }
dialog p { color: #aeb7c6; line-height: 1.5; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.icon-button { padding: 4px 12px; font-size: 1.5rem; }
dialog input[type="text"], dialog input[type="password"], .text-entry-overlay input {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid #404958;
  border-radius: 12px;
  background: #080a0e;
  color: #fff;
  font: inherit;
  font-size: 16px;
}

.text-entry-overlay {
  position: absolute;
  z-index: 5;
  inset: 12px 12px auto;
  padding: 10px;
  border: 1px solid rgba(96, 165, 250, .72);
  border-radius: 15px;
  background: rgba(9, 13, 20, .94);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
}
.text-entry-overlay[hidden] { display: none; }
.text-entry-overlay form { display: grid; gap: 6px; }
.text-entry-overlay label {
  color: #dbeafe;
  font-size: .76rem;
  font-weight: 700;
}
.text-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px 48px;
  gap: 7px;
}
.text-entry-overlay input {
  min-width: 0;
  min-height: 48px;
  background: #f8fafc;
  color: #0f172a;
}
.text-entry-overlay input:focus {
  border-color: #60a5fa;
  outline: 3px solid rgba(59, 130, 246, .22);
}
.text-entry-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #aeb9ca;
  font-size: .7rem;
  line-height: 1.2;
}
.text-entry-meta output { flex: 0 0 auto; margin-left: auto; font-variant-numeric: tabular-nums; }
.text-entry-status {
  overflow: hidden;
  color: #93c5fd;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-entry-status[data-state="error"] { color: #fca5a5; }
.text-entry-status[data-state="success"] { color: #86efac; }
.text-entry-icon {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 12px;
  font-size: 1.45rem;
  font-weight: 800;
}
.text-entry-clear {
  border-color: #64748b;
  background: #222a36;
  color: #f8fafc;
}
.text-entry-overlay input:disabled {
  opacity: .7;
}
.handoff-code {
  display: block;
  margin: 18px 0 8px;
  padding: 14px;
  border: 1px dashed #64748b;
  border-radius: 12px;
  background: #080a0e;
  color: #93c5fd;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.35rem;
  letter-spacing: .08em;
  text-align: center;
  user-select: all;
}
.muted { color: #8f9bad; }
.dialog-actions { margin-top: 22px; }

@media (max-width: 1500px) {
  .layout { grid-template-columns: 1fr; gap: 36px; }
  .phone-panel, .controls { width: min(960px, 100%); margin: 0 auto; }
}

@media (max-width: 600px) {
  .layout { gap: 24px; padding: 24px 14px 40px; }
  .controls { width: 100%; }
  .controls .button-row > button { flex: 1 1 calc(50% - 10px); }
  .text-entry-overlay { inset: 6px 6px auto; padding: 7px; border-radius: 12px; }
  .text-entry-overlay label { font-size: .68rem; }
  .text-entry-row { grid-template-columns: minmax(0, 1fr) 44px 44px; gap: 5px; }
  .text-entry-overlay input { min-height: 44px; padding: 9px 10px; }
  .text-entry-icon { min-width: 44px; min-height: 44px; border-radius: 10px; }
  #textPrivacy { display: none; }
  .text-entry-meta { font-size: .64rem; }
}