/* Visual layer only. Authentication, controls and event handlers are unchanged. */
html body #ot-support {
  width:calc(100% - 40px);max-width:540px;max-height:calc(100dvh - 40px);
  padding:32px;overflow:auto;border:1px solid #e1e8f2;border-radius:20px;
  background:#fff;color:#182d48;font-family:inherit;font-size:15px;line-height:1.55;
  box-shadow:0 24px 80px #10233f30,0 4px 16px #10233f14;
}
html body #ot-support::backdrop {background:#162c496b;backdrop-filter:blur(3px)}
html body #ot-support .ot-step {
  margin:0 40px 12px 0;padding-top:18px;color:#47648a;font-size:12px;font-weight:600;position:relative;
}
html body #ot-support .ot-step::before {
  content:"";position:absolute;top:0;left:0;width:68px;height:4px;border-radius:8px;
  background:linear-gradient(to right,#2467db 46%,transparent 46%,transparent 54%,#dce6f5 54%);
}
html body #ot-support:has(.ot-start[hidden]) .ot-step::before {
  background:linear-gradient(to right,#95b6ed 46%,transparent 46%,transparent 54%,#2467db 54%);
}
html body #ot-support h2 {margin:0 36px 20px 0;font-size:26px;line-height:1.2;letter-spacing:-.6px;font-weight:700;color:#172d4b}
html body #ot-support .ot-close {
  top:19px;right:19px;width:34px;height:34px;padding:0;display:grid;place-items:center;
  border:1px solid #e6ebf2;border-radius:50%;background:#f6f8fb;color:#51647d;font-size:23px;line-height:1;
}
html body #ot-support .ot-close:hover {background:#eaf0f9;color:#163b6d}
html body #ot-support .ot-customer {
  margin:0 0 24px;padding:14px 16px 14px 48px;border:1px solid #dfe8f5;border-radius:11px;
  background:#f4f7fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23486b9a' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 21v-2a7 7 0 0 1 14 0v2'/%3E%3C/svg%3E") no-repeat 15px center;
  color:#365578;font-size:14px;line-height:1.55;overflow-wrap:anywhere;
}
html body #ot-support label {margin:20px 0 8px;font-size:14px;font-weight:650;color:#233c5d}
html body #ot-support input,html body #ot-support select {
  min-height:48px;padding:12px 14px;border:1px solid #d2ddea;border-radius:9px;background:#fff;
  color:#233c5d;font-family:inherit;font-size:16px;line-height:1.4;box-shadow:0 1px 2px #10233f05;
  transition:border-color .15s,box-shadow .15s;
}
html body #ot-support input:focus,html body #ot-support select:focus {
  outline:none;border-color:#3978de;box-shadow:0 0 0 3px #2467db1a;
}
html body #ot-support small {margin:9px 0 0;font-size:12px;line-height:1.6;color:#63758e}
html body #ot-support .ot-primary {
  min-height:48px;margin-top:25px;padding:12px 16px;border:1px solid #1d5dca;border-radius:9px;
  background:#2467db;color:#fff;font-family:inherit;font-size:14px;line-height:1.5;font-weight:650;
  box-shadow:0 3px 7px #2467db24;transition:background .15s,box-shadow .15s;
}
html body #ot-support .ot-primary:hover:not(:disabled) {background:#1c57be;box-shadow:0 4px 10px #2467db32}
html body #ot-support button:focus-visible,button[data-ot-support]:focus-visible {
  outline:3px solid #76a9ef;outline-offset:3px;
}
html body #ot-support .ot-restart {display:block;margin:14px auto 0;padding:6px 12px;border:0;background:transparent;color:#3f618d;font-size:13px;text-decoration:underline;text-underline-offset:3px}
html body #ot-support .ot-note {
  margin:24px -32px -32px;padding:20px 32px;border-top:1px solid #e8edf5;background:#f8fafc;
  color:#65758d;font-size:12px;line-height:1.7;
}
html body #ot-support .ot-status:empty {display:none}
html body #ot-support .ot-status:not(:empty) {margin:16px 0 0;padding:12px 14px;border:1px solid #dee7f3;border-radius:8px;background:#f4f7fc;color:#365578;font-size:13px;line-height:1.6}
html body #ot-support #ot-code {text-align:center;font-size:26px;font-weight:650;letter-spacing:.2em;font-variant-numeric:tabular-nums;padding-left:19px}
html body #ot-support .ot-verify>p {font-size:14px;line-height:1.7;color:#526984}
html body #ot-support .ot-verify strong {font-weight:650;color:#214d87;overflow-wrap:anywhere}
html body button[data-ot-support] {
  appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:7px 10px;min-height:32px;border:1px solid #c5d8f5;border-radius:7px;
  background:#edf4ff;color:#2056a2;font-family:inherit;font-size:12px;font-weight:600;
  line-height:1.3;white-space:nowrap;cursor:pointer;
}
html body button[data-ot-support]:hover {background:#deebff;border-color:#9dbce9}
html body .ot-support-help {padding:11px 14px;border-left:3px solid #a2c1ee;border-radius:0 6px 6px 0;background:#f6f9fe;color:#63758e;font-family:inherit;font-size:12px;line-height:1.6}
html body .ot-support-bar {padding:13px 24px;background:#18395e;box-shadow:0 -3px 16px #122b4518;align-items:center;font-family:inherit;font-size:13px;line-height:1.5}
html body .ot-support-bar button {flex-shrink:0;padding:8px 14px;border:1px solid #ffffff60;border-radius:7px;background:#ffffff12;color:white;font-size:13px;font-weight:600}
html body .ot-support-bar button:hover {background:#ffffff24}
@media(max-width:560px){
  html body #ot-support {width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:24px;border-radius:16px}
  html body #ot-support h2 {font-size:24px}
  html body #ot-support .ot-note {margin:22px -24px -24px;padding:17px 24px}
  html body #ot-support .ot-close {top:14px;right:14px}
  html body .ot-support-bar {padding:12px 14px;flex-wrap:wrap;gap:9px}
}
@media(prefers-reduced-motion:reduce){html body #ot-support *{transition:none!important}}