/* Qowi account security: isolated from the shared application modal. */
.cloud-mfa-card,
dialog.cloud-mfa-dialog{
  --qowi-surface:var(--desk-panel,#fff);
  --qowi-surface-soft:color-mix(in srgb,var(--desk-bg,#f7f9fc) 76%,var(--desk-panel,#fff));
  --qowi-ink:var(--desk-ink,#263b61);
  --qowi-muted:var(--desk-muted,#687c9e);
  --qowi-line:var(--desk-line,#e3e9f2);
  --qowi-accent:var(--blue,#4265e8);
  --qowi-accent-ink:#fff;
  --qowi-success:#1f7652;
  --qowi-success-soft:color-mix(in srgb,#1f7652 11%,var(--desk-panel,#fff));
  --qowi-danger:#aa2d24;
  --qowi-danger-soft:color-mix(in srgb,#aa2d24 9%,var(--desk-panel,#fff));
  --qowi-radius:16px;
  --qowi-shadow:0 18px 55px rgba(27,42,74,.18);
}
[data-theme=dark] .cloud-mfa-card,
[data-theme=dark] dialog.cloud-mfa-dialog{
  --qowi-surface:var(--desk-panel,#252e3b);
  --qowi-surface-soft:color-mix(in srgb,var(--desk-bg,#1c232d) 72%,var(--desk-panel,#252e3b));
  --qowi-ink:var(--desk-ink,#e6e8e8);
  --qowi-muted:var(--desk-muted,#a3adb9);
  --qowi-line:var(--desk-line,#37424f);
  --qowi-accent:#9db8ff;
  --qowi-accent-ink:#14213d;
  --qowi-success:#86ddb8;
  --qowi-success-soft:color-mix(in srgb,#86ddb8 12%,var(--desk-panel,#252e3b));
  --qowi-danger:#ff9b92;
  --qowi-danger-soft:color-mix(in srgb,#ff9b92 11%,var(--desk-panel,#252e3b));
  --qowi-shadow:0 22px 65px rgba(0,0,0,.42);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]) .cloud-mfa-card,
  :root:not([data-theme=light]) dialog.cloud-mfa-dialog{
    --qowi-surface:var(--desk-panel,#252e3b);
    --qowi-surface-soft:color-mix(in srgb,var(--desk-bg,#1c232d) 72%,var(--desk-panel,#252e3b));
    --qowi-ink:var(--desk-ink,#e6e8e8);
    --qowi-muted:var(--desk-muted,#a3adb9);
    --qowi-line:var(--desk-line,#37424f);
    --qowi-accent:#9db8ff;
    --qowi-accent-ink:#14213d;
    --qowi-success:#86ddb8;
    --qowi-success-soft:color-mix(in srgb,#86ddb8 12%,var(--desk-panel,#252e3b));
    --qowi-danger:#ff9b92;
    --qowi-danger-soft:color-mix(in srgb,#ff9b92 11%,var(--desk-panel,#252e3b));
  }
}
.cloud-mfa-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin:20px 0;
  padding:22px;
  border:1px solid var(--qowi-line);
  border-radius:var(--qowi-radius);
  background:linear-gradient(135deg,color-mix(in srgb,var(--qowi-accent) 7%,var(--qowi-surface)),var(--qowi-surface) 62%);
  color:var(--qowi-ink);
  box-shadow:0 10px 30px color-mix(in srgb,var(--qowi-ink) 7%,transparent);
}
.cloud-mfa-card-mark{
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:15px;
  border:1px solid color-mix(in srgb,var(--qowi-accent) 35%,var(--qowi-line));
  background:color-mix(in srgb,var(--qowi-accent) 13%,var(--qowi-surface));
  color:var(--qowi-accent);
  font:700 22px/1 Georgia,serif;
}
.cloud-mfa-card-copy{min-width:0}
.cloud-mfa-eyebrow{margin:0 0 5px;color:var(--qowi-muted);font-size:10px;font-weight:800;letter-spacing:.14em}
.cloud-mfa-card h2{margin:0 0 5px;color:var(--qowi-ink);font-size:20px;line-height:1.35}
.cloud-mfa-card p:not(.cloud-mfa-eyebrow){margin:0;color:var(--qowi-muted);font-size:13px;line-height:1.65}
.cloud-mfa-card-action{
  min-height:44px;
  padding:10px 16px;
  border:1px solid color-mix(in srgb,var(--qowi-accent) 46%,var(--qowi-line));
  border-radius:10px;
  background:var(--qowi-surface);
  color:var(--qowi-accent);
  font-weight:700;
  white-space:nowrap;
}
.cloud-mfa-card-action:hover{background:color-mix(in srgb,var(--qowi-accent) 9%,var(--qowi-surface))}

dialog.cloud-mfa-dialog{
  width:min(660px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:0;
  border:1px solid var(--qowi-line);
  border-radius:22px;
  background:var(--qowi-surface);
  color:var(--qowi-ink);
  box-shadow:var(--qowi-shadow);
  overflow:auto;
  overscroll-behavior:contain;
}
dialog.cloud-mfa-dialog::backdrop{background:rgba(14,24,43,.52);backdrop-filter:blur(3px)}
.cloud-mfa-shell{display:flex;flex-direction:column;min-height:100%;padding:26px;overflow-wrap:anywhere}
.cloud-mfa-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--qowi-line)}
.cloud-mfa-head h2{margin:2px 0 0;color:var(--qowi-ink);font-size:26px;line-height:1.25;letter-spacing:-.03em}
.cloud-mfa-close{
  display:grid;
  place-items:center;
  flex:none;
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--qowi-line);
  background:var(--qowi-surface-soft);
  color:var(--qowi-ink);
  font-size:22px;
  line-height:1;
}
.cloud-mfa-close:hover{background:color-mix(in srgb,var(--qowi-accent) 9%,var(--qowi-surface))}
.cloud-mfa-description{margin:17px 0 0;color:var(--qowi-muted);font-size:14px;line-height:1.7}
.cloud-mfa-content{margin-top:18px}
.cloud-mfa-section{padding:20px;border:1px solid var(--qowi-line);border-radius:var(--qowi-radius);background:var(--qowi-surface-soft)}
.cloud-mfa-section+.cloud-mfa-section{margin-top:14px}
.cloud-mfa-section h3,.cloud-mfa-success h3{margin:0 0 8px;color:var(--qowi-ink);font-size:19px;line-height:1.4}
.cloud-mfa-section p{color:var(--qowi-muted);font-size:13px;line-height:1.75}
.cloud-mfa-section label{color:var(--qowi-ink);font-size:13px;font-weight:700;margin:15px 0 7px}
.cloud-mfa-section input[type=text],
.cloud-mfa-section select{
  width:100%;
  min-height:48px;
  border:1px solid var(--qowi-line);
  border-radius:11px;
  background:var(--qowi-surface);
  color:var(--qowi-ink);
  font-size:16px;
}
.cloud-mfa-section select{padding:0 12px}
.cloud-mfa-factor-list{display:grid;gap:8px;margin:12px 0;padding:0;list-style:none}
.cloud-mfa-factor-list li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--qowi-line);border-radius:10px;background:var(--qowi-surface)}
#cloud-mfa-code{letter-spacing:.28em;font-variant-numeric:tabular-nums;font-weight:700}
.cloud-mfa-section small{display:block;margin-top:7px;color:var(--qowi-muted);font-size:12px;line-height:1.55}
.cloud-mfa-primary,.cloud-mfa-secondary,.cloud-mfa-danger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:15px;
  padding:10px 18px;
  border-radius:11px;
  font-size:14px;
  font-weight:700;
}
.cloud-mfa-primary{border-color:var(--qowi-accent);background:var(--qowi-accent);color:var(--qowi-accent-ink)}
.cloud-mfa-primary:hover{filter:brightness(.96)}
.cloud-mfa-secondary{border:1px solid var(--qowi-line);background:var(--qowi-surface);color:var(--qowi-ink)}
.cloud-mfa-danger{border:1px solid color-mix(in srgb,var(--qowi-danger) 48%,var(--qowi-line));background:var(--qowi-danger-soft);color:var(--qowi-danger)}
.cloud-mfa-danger-zone{margin-top:17px;padding-top:15px;border-top:1px solid var(--qowi-line)}
.cloud-mfa-danger-zone p{margin-bottom:0;font-size:12px}
.cloud-mfa-factor-name{color:var(--qowi-ink)!important}
.cloud-mfa-caption{font-size:12px!important;color:var(--qowi-muted)!important}
.cloud-mfa-success-line{padding:11px 13px;border:1px solid color-mix(in srgb,var(--qowi-success) 34%,var(--qowi-line));border-radius:10px;background:var(--qowi-success-soft);color:var(--qowi-success)!important;font-weight:700}
.cloud-mfa-notice{margin:0 0 14px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--qowi-success) 34%,var(--qowi-line));border-radius:10px;background:var(--qowi-success-soft);color:var(--qowi-success);font-size:13px;line-height:1.65}
.cloud-mfa-loading{padding:18px 0;color:var(--qowi-muted);font-size:14px}
.cloud-mfa-qr-wrap{display:grid;place-items:center;width:min(100%,248px);margin:17px auto;padding:12px;border:1px solid var(--qowi-line);border-radius:14px;background:#fff}
.cloud-mfa-qr-wrap img{display:block;width:min(100%,220px);height:auto;aspect-ratio:1;image-rendering:pixelated}
.cloud-mfa-manual{margin:14px 0;border:1px solid var(--qowi-line);border-radius:11px;background:var(--qowi-surface)}
.cloud-mfa-manual summary{min-height:44px;padding:12px 14px;cursor:pointer;color:var(--qowi-ink);font-size:13px;font-weight:700}
.cloud-mfa-manual p{margin:0 14px 8px}
.cloud-mfa-secret{display:block;margin:0 14px 14px;padding:12px;border-radius:9px;background:var(--qowi-surface-soft);color:var(--qowi-ink);font:600 13px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;overflow-wrap:anywhere;user-select:all}
.cloud-mfa-success{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:1px solid color-mix(in srgb,var(--qowi-success) 38%,var(--qowi-line));border-radius:var(--qowi-radius);background:var(--qowi-success-soft)}
.cloud-mfa-success-mark{display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:50%;background:var(--qowi-success);color:var(--qowi-surface);font-size:22px;font-weight:800}
.cloud-mfa-success p{color:var(--qowi-muted);font-size:13px;line-height:1.75}
.cloud-mfa-status,.cloud-mfa-error{margin:13px 0 0;font-size:12px;line-height:1.6}
.cloud-mfa-status{color:var(--qowi-muted)}
.cloud-mfa-error{color:var(--qowi-danger);font-weight:650}
.cloud-mfa-error:empty,.cloud-mfa-status:empty{display:none}
.cloud-mfa-card button:focus-visible,dialog.cloud-mfa-dialog button:focus-visible,dialog.cloud-mfa-dialog input:focus-visible,dialog.cloud-mfa-dialog select:focus-visible,dialog.cloud-mfa-dialog summary:focus-visible{outline:3px solid color-mix(in srgb,var(--qowi-accent) 72%,white);outline-offset:3px}

@media(max-width:700px){
  .cloud-mfa-card{grid-template-columns:44px minmax(0,1fr);align-items:start}
  .cloud-mfa-card-mark{width:44px;height:44px}
  .cloud-mfa-card-action{grid-column:1/-1;width:100%;justify-content:center}
}
@media(max-width:480px){
  dialog.cloud-mfa-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:17px}
  .cloud-mfa-shell{padding:18px}
  .cloud-mfa-head h2{font-size:23px}
  .cloud-mfa-section{padding:16px}
  .cloud-mfa-card{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:17px}
  .cloud-mfa-card-mark{width:40px;height:40px;border-radius:12px;font-size:19px}
  .cloud-mfa-card h2{font-size:18px}
  .cloud-mfa-primary,.cloud-mfa-secondary,.cloud-mfa-danger{width:100%}
  .cloud-mfa-qr-wrap{width:100%;max-width:248px}
}
@media(max-width:390px){
  dialog.cloud-mfa-dialog{width:calc(100vw - 8px);max-height:calc(100dvh - 8px);border-radius:14px}
  .cloud-mfa-shell{padding:14px}
  .cloud-mfa-section{padding:14px}
  .cloud-mfa-card{padding:15px}
  .cloud-mfa-head{gap:10px}
  .cloud-mfa-close{width:44px;height:44px}
  #cloud-mfa-code{letter-spacing:.16em}
}