/* Authentication from the supplied Masterdesign 1.1. */
:root { color-scheme:dark; --bg:#0c0d0f; --text:#ece9e3; --muted:#a19e97; --orange:#ff7a2e; --mono:'JetBrains Mono',monospace; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Instrument Sans',sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; color:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.5; }
a { color:#ff9a5c; text-decoration:none; }
a:hover { color:#ffc38a; }
:focus-visible { outline:2px solid var(--orange); outline-offset:3px; }
::selection { background:#ff7a2e59; }
[hidden] { display:none!important; }
.skip-link { position:fixed; left:16px; top:-100px; z-index:100; background:var(--orange); color:#0c0d0f; padding:12px; }
.skip-link:focus { top:12px; }
.auth-shell { min-height:100dvh; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.auth-story { min-height:100dvh; position:relative; overflow:hidden; border-right:1px solid #1f2226; display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding:36px 44px; }
.auth-story>*:not(.auth-backdrop) { position:relative; }
.auth-backdrop { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 25% 25%,#6a3b2025,transparent 75%); }
.auth-backdrop svg { width:145%; height:90%; position:absolute; top:-15%; left:-20%; color:#ff7a2e; opacity:.2; filter:blur(1.5px); }
.auth-backdrop:after { content:''; position:absolute; inset:0; background:linear-gradient(160deg,#0c0d0f33,#0c0d0f 85%); }
.auth-brand { display:flex; align-items:center; gap:18px; }
.auth-brand>div { display:flex; flex-direction:column; line-height:1.2; gap:2px; }
.auth-brand strong { font-size:16px; font-weight:600; }
.auth-brand>div>span { font:10px var(--mono); color:#8f8c86; letter-spacing:.12em; }
.auth-orbit { display:grid; place-items:center; width:30px; height:30px; border:1.5px solid var(--orange); border-radius:50%; position:relative; flex-shrink:0; }
.auth-orbit>i { width:9px; height:9px; background:var(--orange); border-radius:50%; }
.auth-orbit:after { content:''; position:absolute; inset:-6px; border:1px dashed #ff7a2e73; border-radius:50%; animation:auth-spin 12s linear infinite; }
.auth-eyebrow { display:flex; gap:8px; align-items:center; font:11px var(--mono); color:#ff9a5c; letter-spacing:.14em; text-transform:uppercase; margin-bottom:18px; }
.auth-eyebrow>i { width:18px; height:1px; background:var(--orange); }
.auth-intro { animation:auth-in .6s ease both; }
.auth-intro h1 { margin:0 0 18px; font-size:64px; line-height:.94; font-weight:600; letter-spacing:-.045em; text-wrap:balance; }
.auth-intro h1 em { font-style:normal; color:var(--orange); }
.auth-intro p { margin:0; max-width:44ch; font-size:16px; line-height:1.55; color:var(--muted); }
.auth-facts { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:#1f2226; border:1px solid #1f2226; border-radius:12px; overflow:hidden; flex-shrink:0; }
.auth-facts>div { padding:12px 14px; background:#0c0d0fe0; min-width:0; }
.auth-facts dt { font:9px var(--mono); letter-spacing:.14em; color:#8f8c86; }
.auth-facts dd { margin:4px 0 0; font:12px/1.5 var(--mono); overflow-wrap:anywhere; }
.auth-main { display:flex; align-items:center; justify-content:center; padding:40px 32px; min-width:0; }
.auth-panel { width:min(410px,100%); display:flex; flex-direction:column; gap:26px; }
.auth-stepper { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.auth-stepper li { display:flex; flex-direction:column; gap:7px; color:#8f8c86; }
.auth-stepper li>i { height:3px; border-radius:2px; background:#1f2226; overflow:hidden; }
.auth-stepper li b { display:block; height:100%; width:0; background:var(--orange); transition:width .5s ease; }
.auth-stepper .is-complete b { width:100%; }
.auth-stepper .is-current b { width:45%; }
.auth-stepper .is-current,.auth-stepper .is-complete { color:var(--text); }
.auth-stepper li>span { font:10px var(--mono); letter-spacing:.1em; white-space:nowrap; }
.auth-form { display:flex; flex-direction:column; gap:18px; margin:0; min-width:0; animation:auth-in .4s ease both; }
.auth-panel h2 { margin:0 0 6px; font-size:34px; font-weight:600; letter-spacing:-.035em; line-height:1.12; }
.auth-panel p { margin:0; font-size:14px; color:var(--muted); line-height:1.5; }
.auth-panel p strong { font-weight:400; color:var(--text); }
.auth-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.auth-field>span,.auth-field-heading { font-size:12px; color:var(--muted); }
.auth-field input { width:100%; min-width:0; height:46px; padding:0 14px; border-radius:10px; border:1px solid #2a2d33; background:#131519; font-size:15px; transition:border-color .2s; }
.auth-field input:focus { border-color:var(--orange); outline-offset:2px; }
.auth-field-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.password-wrap { position:relative; }
.password-wrap input { padding-right:84px; }
.password-wrap button,.auth-secret button { height:34px; padding:0 10px; border:0; border-radius:7px; background:#1f2226; color:#c9c6bf; font-size:12px; }
.password-wrap button { position:absolute; top:6px; right:6px; }
.auth-primary,.auth-secondary { width:100%; min-height:48px; padding:12px 16px; display:flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:10px; background:var(--orange); color:#0c0d0f; font-size:15px; font-weight:600; text-align:center; text-decoration:none; transition:filter .2s; }
.auth-primary:hover { color:#0c0d0f; filter:brightness(1.08); }
.auth-primary:disabled { background:#2a2d33; color:#8f8c86; opacity:1; }
.auth-secondary { border:1px solid #2a2d33; background:#131519; color:var(--text); font-size:13px; font-weight:500; }
.auth-secondary:hover { border-color:#ff9a5c; color:#ffc38a; }
.auth-error { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5; color:#ff8f8f; animation:auth-in .2s ease both; }
.auth-error>i { flex:0 0 6px; height:6px; margin-top:7px; border-radius:50%; background:#e5484d; }
.auth-note { display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px dashed #2a2d33; border-radius:10px; }
.auth-note>span,.auth-app-heading>b { font:10px var(--mono); padding:2px 6px; border-radius:4px; background:#ff7a2e24; color:#ffc38a; flex-shrink:0; }
.auth-note p { font-size:12px; line-height:1.5; }
.auth-help { position:relative; color:#8f8c86; font-size:12px; }
.auth-help summary { cursor:pointer; list-style:none; }
.auth-help summary::-webkit-details-marker { display:none; }
.auth-help summary:hover { color:#ffc38a; }
.auth-field-heading .auth-help[open] p { position:absolute; width:250px; right:0; z-index:2; padding:14px; margin-top:8px; background:#191b20; border:1px solid #34373e; border-radius:10px; font-size:12px; box-shadow:0 10px 35px #0007; }
.auth-help-block { border:1px solid #2a2d33; border-radius:10px; padding:14px; }
.auth-help-block[open]>p,.auth-help-block[open]>.auth-form { margin-top:18px; }
.auth-help-block>.auth-form>p { font-size:12px; }
.auth-account-form { margin:0; }
.auth-account { display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 6px; border-radius:999px; border:1px solid #2a2d33; background:none; color:#c9c6bf; font-size:12px; }
.auth-account b { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#1f2226; color:#ff9a5c; font-size:11px; }
.auth-account:hover { border-color:#8f8c86; }
.auth-digits { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.auth-digits input { width:100%; min-width:0; height:60px; border-radius:10px; border:1.5px solid #2a2d33; background:#131519; text-align:center; font:500 26px var(--mono); caret-color:var(--orange); transition:border-color .15s,background .15s; }
.auth-digits input:focus { border-color:var(--orange); background:#ff7a2e0f; }
.auth-digits input.has-value { border-color:#9b5129; }
.auth-feedback { min-height:20px; font-size:13px; }
.auth-trust { display:flex; justify-content:space-between; align-items:center; position:relative; gap:10px; padding:11px 12px; border-radius:10px; border:1px solid #1f2226; background:#131519; cursor:pointer; }
.auth-trust>span { display:flex; flex-direction:column; gap:2px; }
.auth-trust strong { font-size:13px; font-weight:500; }
.auth-trust small { font-size:11px; color:#8f8c86; }
.auth-trust input { position:absolute; right:12px; width:36px; height:20px; opacity:0; margin:0; cursor:pointer; }
.auth-trust>i { position:relative; flex:0 0 36px; height:20px; background:#30333a; border-radius:10px; pointer-events:none; transition:background .25s; }
.auth-trust>i:after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text); transition:left .25s; }
.auth-trust input:checked+i { background:var(--orange); }
.auth-trust input:checked+i:after { left:18px; }
.auth-trust input:focus-visible+i { outline:2px solid var(--orange); outline-offset:3px; }
.auth-trust input:disabled+i { opacity:.4; }
.auth-app-card { border:1px solid #2a2d33; border-radius:16px; background:linear-gradient(180deg,#15171b,#101114); padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.auth-app-heading { display:flex; justify-content:space-between; align-items:center; }
.auth-app-heading strong { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; }
.auth-app-heading strong>span { display:grid; place-items:center; width:18px; height:18px; border-radius:5px; background:var(--orange); color:#0c0d0f; }
.auth-app-heading>b { font-size:9px; letter-spacing:.1em; font-weight:400; }
.auth-app-code { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:10px; border:1px solid #1f2226; background:#0c0d0f; }
.auth-app-code>div:first-child { display:flex; flex-direction:column; gap:2px; }
.auth-app-card small { font-size:11px; color:#8f8c86; }
.auth-app-code>div:first-child>span { font:500 28px var(--mono); letter-spacing:.08em; color:#ff9a5c; }
.auth-countdown { position:relative; width:38px; height:38px; flex-shrink:0; }
.auth-countdown svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.auth-countdown circle { fill:none; stroke:#1f2226; stroke-width:3; }
.auth-countdown .progress { stroke:var(--orange); stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.auth-countdown>span { position:absolute; inset:0; display:grid; place-items:center; font:10px var(--mono); color:#c9c6bf; }
.auth-text-link { align-self:center; font-size:13px; text-align:center; }
.auth-setup { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.auth-qr { position:relative; width:176px; height:176px; padding:12px; border-radius:14px; background:#fff; flex-shrink:0; overflow:hidden; }
.auth-qr img { width:100%; height:100%; display:block; image-rendering:pixelated; }
.auth-qr>i { position:absolute; left:8px; right:8px; height:2px; background:var(--orange); opacity:.3; box-shadow:0 0 12px var(--orange); animation:auth-qrscan 2.6s ease-in-out infinite; pointer-events:none; }
.auth-setup-steps { flex:1; min-width:160px; display:flex; flex-direction:column; gap:12px; padding:0; margin:0; list-style:none; }
.auth-setup-steps li { display:flex; gap:10px; align-items:flex-start; }
.auth-setup-steps b { flex-shrink:0; width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--orange); border-radius:50%; color:#ff9a5c; font:10px var(--mono); }
.auth-setup-steps span { font-size:13px; line-height:1.45; color:#c9c6bf; }
.auth-secret { display:flex; align-items:center; gap:8px; padding:6px 6px 6px 14px; min-height:46px; border-radius:10px; border:1px solid #2a2d33; background:#131519; }
.auth-secret code { flex:1; min-width:0; font:12px/1.6 var(--mono); letter-spacing:.03em; overflow-wrap:anywhere; }
.auth-secret button { flex-shrink:0; }
.auth-copy-status { min-height:14px; font-size:11px; color:#ff9a5c; }
.auth-recovery-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; border:1px solid #2a2d33; border-radius:12px; padding:16px; background:#131519; }
.auth-recovery-list code { font:11px/1.7 var(--mono); color:#ffc38a; white-space:nowrap; text-align:center; }
.auth-check { display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:12px; line-height:1.5; }
.auth-check input { accent-color:var(--orange); margin-top:2px; }
.mono-input { font-family:var(--mono)!important; font-size:13px!important; }
.auth-success { display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:20px 0; animation:auth-in .35s ease both; }
.auth-success svg { flex-shrink:0; }
.auth-success circle,.auth-success path { fill:none; stroke:var(--orange); stroke-width:2; stroke-dasharray:277; stroke-dashoffset:277; animation:auth-draw .6s ease forwards; }
.auth-success path { stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation-delay:.45s; }
.auth-success h2 { margin:0; }
.auth-success-progress { width:220px; height:3px; border-radius:2px; background:#1f2226; overflow:hidden; }
.auth-success-progress i { display:block; height:100%; background:var(--orange); animation:auth-bar 1.3s ease forwards; }
.auth-device-summary { display:flex; align-items:center; justify-content:space-between; padding:15px; border:1px solid #2a2d33; border-radius:10px; font-size:13px; }
.auth-device-summary strong { color:#ff9a5c; font:16px var(--mono); }
.auth-footer { display:flex; justify-content:space-between; gap:12px; border-top:1px solid #1f2226; padding-top:14px; font:10px var(--mono); color:#8f8c86; }
@keyframes auth-spin { to { transform:rotate(360deg); } }
@keyframes auth-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes auth-qrscan { 0%,100% { top:6%; } 50% { top:90%; } }
@keyframes auth-draw { to { stroke-dashoffset:0; } }
@keyframes auth-bar { from { width:0; } to { width:100%; } }
@media(max-width:1100px) {
  .auth-story { padding:32px; }
  .auth-intro h1 { font-size:54px; }
  .auth-facts dd { font-size:10px; }
  .auth-main { padding:36px 26px; }
}
@media(max-width:840px) {
  .auth-shell { grid-template-columns:1fr; }
  .auth-story { min-height:0; padding:28px 28px 30px; border-right:0; border-bottom:1px solid #1f2226; gap:32px; }
  .auth-brand { gap:16px; }
  .auth-intro h1 { font-size:46px; max-width:540px; text-wrap:initial; }
  .auth-intro p { font-size:14px; max-width:600px; }
  .auth-facts { display:none; }
  .auth-eyebrow { font-size:10px; margin-bottom:14px; }
  .auth-main { padding:32px 24px 40px; }
  .auth-panel { width:min(480px,100%); }
}
@media(max-width:420px) {
  .auth-story { padding:26px 24px; gap:28px; }
  .auth-intro h1 { font-size:42px; }
  .auth-intro p { font-size:13px; }
  .auth-panel h2 { font-size:31px; }
  .auth-stepper li>span { font-size:8px; letter-spacing:.06em; }
  .auth-digits { gap:6px; }
  .auth-digits input { height:54px; font-size:23px; }
  .auth-setup { flex-direction:column; align-items:flex-start; gap:22px; }
  .auth-qr { align-self:center; }
  .auth-recovery-list { grid-template-columns:1fr; }
  .auth-recovery-list code { font-size:13px; }
  .auth-footer { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; }
  .auth-success circle,.auth-success path { stroke-dashoffset:0; }
  .auth-success-progress i { width:100%; }
}