/* Dex's own pages (password, error, approval, oob, device) on the Aether scene.
   The sign in card is position:fixed and ignores this container; every other
   page is centred and scrolls inside it, which is why body keeps overflow:hidden. */
.dex-container{
  position:fixed; inset:var(--bar) 0 0 0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  overflow:auto; padding:24px 16px;
  margin:0; max-width:none; min-width:0; text-align:left; color:var(--ink2);
}
.btn{text-decoration:none}
.theme-panel{
  width:min(440px,100%); margin:auto;
  background:rgba(16,23,40,0.84); color:var(--ink2);
  border:1px solid var(--hair); border-radius:14px; padding:24px 30px 22px;
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 26px 70px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.045);
  text-align:left;
}
.theme-heading{
  font-family:var(--sans); font-weight:600; font-size:24px; line-height:30px;
  letter-spacing:-.022em; color:var(--ink); margin:0 0 12px;
}
.theme-panel p{margin:0 0 14px; font-size:15px; line-height:23px; color:var(--ink2); opacity:.92}
.theme-form-row{margin:0 0 14px}
.theme-form-row form{margin:0}
.theme-form-label{width:auto; margin:0 0 6px}
.theme-form-label label{
  display:block; font-size:12.5px; line-height:18px; font-weight:400;
  letter-spacing:.01em; color:var(--muted);
}
.theme-form-input{
  width:100%; height:44px; border-radius:10px; padding:0 12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(233,237,243,.24);
  color:var(--ink); font-family:var(--sans); font-size:15px;
  -webkit-appearance:none; appearance:none;
}
.theme-form-input::placeholder{color:rgba(170,181,196,.68)}
.theme-form-input:focus{outline:2px solid var(--accent); outline-offset:2px; border-color:transparent}
.dex-btn{
  height:48px; width:100%; border-radius:10px; padding:0 14px; border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  font-family:var(--sans); font-weight:500; font-size:15px; color:#fff;
  background:transparent; box-shadow:none; -webkit-appearance:none; appearance:none;
  transition:background-color .2s var(--ease), border-color .2s var(--ease),
             box-shadow .26s var(--ease), transform .22s cubic-bezier(.34,1.4,.64,1);
}
.dex-btn:active{transform:scale(.98); box-shadow:none}
.dex-btn:disabled{opacity:.55; cursor:not-allowed; transform:none}
.dex-btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.theme-btn--primary,.theme-btn--success{background:var(--primary); color:#fff}
.theme-btn--primary:hover,.theme-btn--success:hover{
  background:var(--primary-hi); box-shadow:0 8px 24px rgba(var(--accent-rgb),.35); transform:translateY(-1px);
}
.theme-btn-provider{background:transparent; border-color:rgba(233,237,243,.24); color:#fff}
.theme-btn-provider:hover{border-color:rgba(233,237,243,.48); background:rgba(255,255,255,.04)}
.dex-btn-icon{display:none}
.dex-btn-text{display:block}
.dex-error-box{
  margin:0 0 14px; padding:10px 12px; border-radius:10px; font-size:13.5px; line-height:20px;
  background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.42); color:var(--error-ink,#ffd6bc);
}
.dex-separator{margin:16px 0; height:1px; border:0;
  background:linear-gradient(90deg,rgba(233,237,243,0),rgba(233,237,243,.14),rgba(233,237,243,0));}
.dex-subtle-text{color:var(--muted); font-size:13px; line-height:20px}
.dex-list{margin:8px 0 0; padding-left:18px; font-size:14px; line-height:22px; color:var(--ink2)}
.theme-link-back{margin:14px 0 0; text-align:center}
.theme-link-back a{color:var(--accent); text-decoration:none; font-size:13px}
.theme-link-back a:hover{text-decoration:underline}
@media (max-width:560px){
  .theme-panel{padding:20px 22px 18px; border-radius:14px}
  .theme-heading{font-size:21px; line-height:27px}
}