.zs-twofactor-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.zs-twofactor-layout > .zs-twofactor-page {
  width: 100%;
  flex: 1 1 auto;
}
.zs-twofactor-layout > .zs-footer { margin-top: auto; }

.zs-twofactor-page {
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  background:
    linear-gradient(180deg,rgba(5,7,10,.44),rgba(5,7,10,.9)),
    url("../images/constellation-network-v1.png") center 24%/cover fixed no-repeat,
    #05070a;
}
.zs-twofactor-shell { width: min(calc(100% - 48px),620px); }
.zs-twofactor-heading { margin-bottom: 24px; text-align: center; }
.zs-twofactor-title-line { display: flex; align-items: center; justify-content: center; gap: 30px; }
.zs-twofactor-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  border: 1px solid rgba(216,168,79,.44);
  border-radius: 12px;
  color: #181108;
  background: linear-gradient(135deg,#f2d183,#d39a38);
  box-shadow: 0 16px 40px rgba(0,0,0,.34),0 0 26px rgba(216,168,79,.08);
  font: 800 13px/1 Arial,sans-serif;
}
.zs-twofactor-heading > p { margin: 0 0 10px; color: #907846; font: 9px/1.3 "Courier New",monospace; letter-spacing: .24em; }
.zs-twofactor-heading h1 {
  min-height: 46px;
  display: flex;
  align-items: center;
  margin: 0;
  color: #f5f1e8;
  font-size: 36px;
  line-height: 46px;
  letter-spacing: .07em;
  transform: translateY(-1px);
}
.zs-twofactor-subtitle { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 12px; color: #929ba0; font-size: 12px; }
.zs-twofactor-subtitle span:first-child { color: #d7dbdc; }
.zs-twofactor-subtitle span:last-child { color: #9ddbd4; }
.zs-twofactor-subtitle i { width: 1px; height: 11px; background: rgba(216,168,79,.5); }

.zs-twofactor-card,
.zs-twofactor-results,
.zs-twofactor-privacy {
  border: 1px solid rgba(216,168,79,.24);
  background: rgba(7,12,17,.96);
  box-shadow: 0 30px 80px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.018);
}
.zs-twofactor-card { padding: 24px; }
.zs-twofactor-card-head,
.zs-twofactor-results > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.zs-twofactor-card-head > div,
.zs-twofactor-results header > div:first-child { min-width: 0; }
.zs-twofactor-card h2,
.zs-twofactor-results h2 { margin: 0; font-size: 18px; letter-spacing: .025em; }
.zs-twofactor-card-head p { margin: 6px 0 0; color: #737d83; font-size: 11px; }
.zs-twofactor-local { display: inline-flex; align-items: center; gap: 7px; color: #829096; font-size: 10px; }
.zs-twofactor-local i { width: 5px; height: 5px; border-radius: 50%; background: #00e5d4; box-shadow: 0 0 10px rgba(0,229,212,.75); }
.zs-twofactor-secret { display: grid; gap: 9px; margin-top: 23px; }
.zs-twofactor-secret > span { color: #c9ced0; font-size: 11px; font-weight: 700; }
.zs-twofactor-secret textarea {
  width: 100%;
  min-height: 138px;
  resize: vertical;
  padding: 17px 18px;
  border: 1px solid rgba(216,168,79,.23);
  border-radius: 2px;
  outline: 0;
  color: #e5e8e9;
  caret-color: #f0ca76;
  background: #071017;
  font: 13px/1.75 "Cascadia Mono",Consolas,monospace;
  transition: border-color .2s ease,box-shadow .2s ease;
}
.zs-twofactor-secret textarea::placeholder { color: #4f5a62; }
.zs-twofactor-secret textarea:focus { border-color: rgba(240,202,118,.62); box-shadow: 0 0 0 3px rgba(216,168,79,.06); }
.zs-twofactor-actions { display: grid; grid-template-columns: minmax(0,1fr) 146px; gap: 28px; margin-top: 14px; }
.zs-twofactor-actions button { min-height: 48px; cursor: pointer; }
.zs-twofactor-actions button:first-child { border: 1px solid #f0ca76; color: #181108; background: linear-gradient(135deg,#f0cf81,#d39a38); font-size: 13px; font-weight: 800; }
.zs-twofactor-actions button:first-child:hover { filter: brightness(1.06); }
.zs-twofactor-actions button:last-child { border: 1px solid rgba(216,168,79,.2); color: #949da2; background: #081017; font-size: 11px; }
.zs-twofactor-actions button:last-child:hover { color: #f0d48f; border-color: rgba(216,168,79,.42); }
.zs-twofactor-message { min-height: 16px; margin: 9px 0 -7px; color: #e39d73; font-size: 10px; }

.zs-twofactor-results { margin-top: 14px; padding: 24px 28px 28px; }
.zs-twofactor-results > header { align-items: center; padding-bottom: 18px; border-bottom: 1px solid rgba(216,168,79,.13); }
.zs-twofactor-countdown { min-width: 116px; display: grid; gap: 7px; color: #707a80; text-align: right; font-size: 9px; }
.zs-twofactor-countdown b { color: #f0ca76; font-size: 12px; }
.zs-twofactor-countdown > i { overflow: hidden; height: 2px; background: #192129; }
.zs-twofactor-countdown em { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#00e5d4,#d8a84f); transform-origin: left; }
.zs-twofactor-page .result-list { display: grid; gap: 8px; padding-top: 16px; }
.zs-twofactor-page .result-item { display: grid; grid-template-columns: minmax(0,1fr) auto auto; min-height: 68px; align-items: center; gap: 18px; padding: 12px 14px; border: 1px solid rgba(216,168,79,.14); background: rgba(8,15,21,.9); }
.zs-twofactor-page .result-meta { min-width: 0; }
.zs-twofactor-page .result-meta strong { display: block; overflow: hidden; color: #d8dddf; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.zs-twofactor-page .result-meta span { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #758188; font: 9px/1.45 "Cascadia Mono",Consolas,monospace; user-select: text; }
.zs-twofactor-page .result-code { color: #f3ce78; font: 700 27px/1 "Cascadia Mono",Consolas,monospace; letter-spacing: .12em; }
.zs-twofactor-page .copy-code { min-width: 64px; min-height: 34px; border: 1px solid rgba(216,168,79,.27); color: #f0ca76; background: transparent; font-size: 10px; cursor: pointer; }
.zs-twofactor-page .copy-code:hover { color: #181108; background: #f0ca76; }
.zs-twofactor-privacy { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin-top: 14px; padding: 17px 20px; box-shadow: none; }
.zs-twofactor-privacy strong { color: #f0ca76; font-size: 10px; }
.zs-twofactor-privacy p { margin: 0; color: #667178; font-size: 9px; line-height: 1.8; }
.zs-twofactor-page [hidden] { display: none !important; }
.zs-twofactor-page button:focus-visible,
.zs-twofactor-page textarea:focus-visible { outline: 2px solid #00e5d4; outline-offset: 3px; }

@media (max-width:680px) {
  .zs-twofactor-page { min-height: auto; align-items: flex-start; padding: 30px 0 42px; }
  .zs-twofactor-shell { width: min(100% - 28px,620px); }
  .zs-twofactor-title-line { gap: 16px; }
  .zs-twofactor-heading h1 { font-size: 31px; }
  .zs-twofactor-subtitle { flex-wrap: wrap; gap: 7px; font-size: 11px; }
  .zs-twofactor-card,.zs-twofactor-results { padding: 20px; }
  .zs-twofactor-card-head { gap: 12px; }
  .zs-twofactor-local { font-size: 0; }
  .zs-twofactor-local i { width: 7px; height: 7px; }
  .zs-twofactor-actions { grid-template-columns: 1fr; gap: 10px; }
  .zs-twofactor-page .result-item { grid-template-columns: 1fr auto; gap: 12px; }
  .zs-twofactor-page .result-code { grid-column: 1; grid-row: 2; font-size: 24px; }
  .zs-twofactor-page .copy-code { grid-column: 2; grid-row: 1/span 2; }
  .zs-twofactor-privacy { grid-template-columns: 1fr; gap: 7px; }
}