.tiron-otp {
  --otp-bg: #07111f;
  --otp-panel: #111827;
  --otp-soft: #152235;
  --otp-border: #29384d;
  --otp-text: #f8fafc;
  --otp-muted: #a6b3c6;
  --otp-accent: #38bdf8;
  --otp-button: #2563eb;
  --otp-danger: #ff9292;
  background: #07111f; background: var(--otp-bg);
  color: #f8fafc; color: var(--otp-text);
  box-sizing: border-box;
  letter-spacing: 0;
}
[data-theme="light"] .tiron-otp, [data-admin-theme="light"] .tiron-otp {
  --otp-bg: #f4f7fa;
  --otp-panel: #ffffff;
  --otp-soft: #eef3f8;
  --otp-border: #cbd6e2;
  --otp-text: #162437;
  --otp-muted: #53647a;
  --otp-accent: #0875a6;
  --otp-danger: #b42336;
}
body.otp-open { overflow: hidden; }
.tiron-otp.tiron-otp-screen {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 65; height: 100%; height: 100dvh;
  height: var(--app-height, 100dvh);
  display: flex; overflow-y: auto; padding: 24px 16px;
  overscroll-behavior: contain;
}
.tiron-otp.tiron-otp-page { display: flex; min-height: 100vh; padding: 32px 16px; }
.tiron-otp-content { width: 100%; max-width: 420px; margin: auto; flex-shrink: 0; }
.tiron-otp-brand { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; }
.tiron-otp-brand img { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; }
.tiron-otp-brand strong { color: #f4d35e; font-size: 32px; line-height: 1.2; letter-spacing: 0; }
.tiron-otp-panel {
  position: relative; box-sizing: border-box; width: 100%; padding: 24px 20px;
  background: #111827; background: var(--otp-panel); color: #f8fafc; color: var(--otp-text);
  border: 1px solid #29384d; border-color: var(--otp-border);
  border-radius: 24px; animation: tironOtpArrive 300ms ease-out both;
  text-align: center;
}
.tiron-otp-handle { width: 32px; height: 3px; margin: 0 auto 26px; border-radius: 3px; background: var(--otp-border); }
.tiron-otp-panel h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; color: var(--otp-text); letter-spacing: 0; }
.tiron-otp-panel p { margin: 0 0 10px; line-height: 1.5; color: var(--otp-muted); overflow-wrap: anywhere; }
.tiron-otp-panel .tiron-otp-email { color: var(--otp-text); font-weight: 700; overflow-wrap: anywhere; }
.tiron-otp-panel .tiron-otp-form { display: block; margin: 26px 0 0; }
.tiron-otp-code { position: relative; height: 52px; }
.tiron-otp-slots { display: flex; height: 52px; }
.tiron-otp-slot {
  position: relative; display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center;
  height: 52px; background: #152235; background: var(--otp-soft);
  border: 1px solid #29384d; border-color: var(--otp-border); border-radius: 8px;
  font-size: 24px; font-weight: 700; color: var(--otp-text);
}
.tiron-otp-slot + .tiron-otp-slot { margin-left: 6px; }
.tiron-otp-slot.is-active::after {
  content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; inset: -1px;
  border: 2px solid #38bdf8; border-color: var(--otp-accent); border-radius: 8px;
  animation: tironOtpPulse 1.5s ease-in-out infinite;
}
.tiron-otp-panel .tiron-otp-input, .web-app .tiron-otp-panel .tiron-otp-input {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; width: 100%; height: 52px; min-height: 0; margin: 0; padding: 0;
  background: transparent; color: transparent; caret-color: transparent; border: 0; outline: 0;
  box-shadow: none; font-size: 24px; opacity: 1;
}
.tiron-otp-input::selection { background: transparent; color: transparent; }
.tiron-otp-panel .tiron-otp-meta { margin: 14px 0 18px; font-size: 12px; min-height: 18px; }
.tiron-otp-panel .tiron-otp-error { color: var(--otp-danger); font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.tiron-otp-panel .tiron-otp-error.is-success { color: var(--otp-accent); }
.tiron-otp-panel .tiron-otp-submit {
  display: flex; width: 100%; min-height: 48px; padding: 12px; align-items: center; justify-content: center;
  border: 1px solid #2563eb; border-color: var(--otp-button); border-radius: 8px;
  background: #2563eb; background: var(--otp-button); color: #fff;
  font: inherit; font-weight: 700; letter-spacing: 0; cursor: pointer;
}
.tiron-otp-panel .tiron-otp-action {
  display: block; width: 100%; min-height: 44px; margin-top: 6px; padding: 10px;
  background: transparent; border: 0; border-radius: 8px; color: var(--otp-accent);
  font: inherit; font-weight: 700; letter-spacing: 0; cursor: pointer;
}
.tiron-otp-panel .tiron-otp-back { color: var(--otp-muted); }
.tiron-otp-panel button:disabled { opacity: .55; cursor: default; }
.tiron-otp-panel button:focus-visible { outline: 2px solid var(--otp-accent); outline-offset: 3px; }
.tiron-otp-label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@keyframes tironOtpArrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tironOtpPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tiron-otp-panel, .tiron-otp-slot.is-active::after { animation: none; }
}
@supports (padding: max(0px)) {
  .tiron-otp.tiron-otp-screen { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}