* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--c-ink); background: var(--c-paper); font: 14px/1.8 var(--font-sans); }
button,input { font: inherit; }
a { color: var(--c-accent); text-underline-offset: 4px; }
button,a,input,summary { touch-action: manipulation; }
:is(button,a,input,summary):focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
button { cursor: pointer; }button:disabled { opacity: .55; cursor: default; }
h1,h2,p { margin-top: 0; }h2 { font-size: 27px; line-height: 1.45; font-weight: 600; letter-spacing: -.5px; margin-bottom: 14px; }h2:focus { outline: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.masthead { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: calc(100% - 80px); max-width: 1320px; margin: 0 auto; border-bottom: var(--bd); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--c-ink); text-decoration: none; }
.brand-monogram { font: 600 23px var(--font-mono); color: var(--c-accent); letter-spacing: -2px; }.brand-monogram>span { margin: 0 2px; opacity: .55; }
.brand b { font-size: 16px; line-height: 1.4; font-weight: 600; }.brand small { display: block; font-size: 10px; font-weight: 400; color: var(--c-ink-3); letter-spacing: 1px; margin-top: 2px; }
.private-label { font-size: 11px; color: var(--c-ink-3); display: flex; gap: 8px; align-items: center; }.private-label i { display: block; width: 5px; height: 5px; background: var(--c-accent); border-radius: 50%; }
.entry-layout { width: 100%; max-width: 440px; margin: 64px auto 72px; padding: 0 4px; flex: 1; }
.entry-panel { border-top: 2px solid var(--c-accent); padding-top: 22px; }
.panel-top { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--c-ink-3); margin-bottom: 36px; }.panel-number { font: 11px var(--font-mono); color: var(--c-accent); }
.eyebrow { font: 10px/1.8 var(--font-mono); letter-spacing: 1.6px; color: var(--c-accent); margin-bottom: 13px; }
.description { color: var(--c-ink-2); font-size: 14px; line-height: 1.9; margin-bottom: 26px; }
label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
input:not([type=checkbox]) { width: 100%; min-height: 56px; border: var(--bd-strong); border-radius: 6px; padding: 12px; color: var(--c-ink); background: var(--c-surface); }
input.otp { text-align: center; font: 28px/1.4 var(--font-mono); letter-spacing: 12px; padding-left: 24px; }
.otp::placeholder { color: #9da9a5; }.recovery-input { font: 14px/1.6 var(--font-mono); letter-spacing: .5px; }
.field-help { color: var(--c-ink-3); font-size: 11px; line-height: 1.85; margin: 12px 0 24px; }
.primary,.secondary { min-height: 48px; padding: 12px 18px; border: 1px solid var(--c-accent); border-radius: 6px; font-size: 14px; }
.primary { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; color: var(--c-on-accent); background: var(--c-accent); text-decoration: none; font-weight: 600; }
.primary:not(:disabled):hover { background: var(--c-accent-hover); }.primary span { font-size: 18px; font-weight: 400; }
.secondary { color: var(--c-accent); background: transparent; font-size: 12px; border-color: var(--c-line-strong); }
.text-button { background: none; border: none; color: var(--c-accent); font-size: 12px; padding: 10px 0; margin-top: 12px; min-height: 44px; display: block; }.text-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.panel-note { border-top: var(--bd); padding-top: 24px; margin-top: 26px; display: grid; grid-template-columns: 58px 1fr; gap: 16px; font-size: 11px; color: var(--c-ink-3); }.note-num { color: var(--c-ink-2); }.panel-note p { margin-bottom: 0; }
.notice { font-size: 12px; color: var(--c-ink-2); border-left: 2px solid var(--c-line-strong); padding: 12px 16px; background: var(--c-sunk); margin-bottom: 24px; }.notice:empty { display: none; }.notice.error { color: var(--c-danger); border-color: var(--c-danger); background: var(--c-danger-bg); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 0; margin: 26px 0; font-size: 11px; color: var(--c-ink-3); }.steps li { border-top: var(--bd); padding-top: 10px; }.steps li[aria-current] { border-color: var(--c-accent); color: var(--c-accent); }.steps span { font: 10px var(--font-mono); display: block; margin-bottom: 5px; }
.qr-wrap { display: flex; align-items: center; flex-direction: column; gap: 12px; margin: 26px 0; color: var(--c-ink-3); font-size: 10px; }.qr-wrap img { max-width: 100%; height: auto; background: #fff; border: var(--bd); border-radius: 4px; padding: 6px; image-rendering: pixelated; }
details { color: var(--c-ink-3); font-size: 12px; margin: 20px 0 26px; }summary { color: var(--c-accent); cursor: pointer; min-height: 40px; padding-top: 7px; }details p { margin: 10px 0; }
#manual-secret { display: block; overflow-wrap: anywhere; font: 13px/1.8 var(--font-mono); padding: 14px; background: var(--c-sunk); color: var(--c-ink); letter-spacing: .5px; }
.codes { display: grid; gap: 0; border: var(--bd); border-radius: 6px; background: var(--c-surface); padding: 10px 20px; counter-reset: recovery; }
.codes code { display: block; font: 12px/2.8 var(--font-mono); white-space: nowrap; border-bottom: 1px solid #e8eae4; counter-increment: recovery; }.codes code:last-child { border-bottom: 0; }.codes code::before { content: counter(recovery, decimal-leading-zero); font-size: 10px; color: var(--c-ink-3); margin-right: 22px; }
.acknowledge { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 400; margin: 26px 0 20px; }.acknowledge input { width: 18px; height: 18px; accent-color: var(--c-accent); flex-shrink: 0; margin: 0; }
.entry-footer { max-width: 1320px; width: calc(100% - 80px); margin: 0 auto; padding: 22px 0 28px; border-top: var(--bd); display: flex; justify-content: space-between; gap: 20px; color: var(--c-ink-3); font-size: 10px; }
@media(max-width:599px) {
  .masthead { width: calc(100% - 40px); min-height: 72px; }.brand { gap: 10px; }.brand b { font-size: 14px; }.brand small { font-size: 9px; }.brand-monogram { font-size: 22px; }.private-label { font-size: 10px; }
  .entry-layout { width: calc(100% - 48px); max-width: 432px; margin: 38px auto 48px; padding: 0; }.entry-panel { padding-top: 18px; }.panel-top { margin-bottom: 30px; }h2 { font-size: 26px; }.description { font-size: 13px; }
  .codes { padding: 8px 12px; }.codes code { font-size: 11px; }.codes code::before { margin-right: 14px; font-size: 9px; }.entry-footer { width: calc(100% - 40px); flex-direction: column; gap: 7px; padding: 20px 0; }
  .qr-wrap img { width: 220px; }.recovery-input { font-size: 12px; }.steps { gap: 10px; font-size: 10px; }.panel-note { gap: 12px; grid-template-columns: 50px 1fr; }
}
@media(max-width:359px) { .entry-layout { width: calc(100% - 36px); }.codes code { font-size: 10px; }.codes code::before { margin-right: 10px; }.private-label { font-size: 9px; }.brand small { letter-spacing: 0; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto !important; transition: none !important; } }