/* ALTER v1.0.16 — account creation + cloud sync */

.alter-auth-screen{
  min-height:100dvh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  padding:24px;
  background:
    radial-gradient(circle at 50% 18%,rgba(216,181,109,.07),transparent 28%),
    #05070a;
}
.alter-auth-screen::before{
  content:"";
  position:absolute;
  width:min(720px,92vw);
  aspect-ratio:1;
  border:1px solid rgba(216,181,109,.07);
  border-radius:50%;
  box-shadow:0 0 0 80px rgba(216,181,109,.012),0 0 0 160px rgba(216,181,109,.006);
}
.alter-auth-scan{
  position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.02) 50%,transparent 51%);
  background-size:100% 6px;
}
.alter-auth-panel{
  position:relative;
  z-index:2;
  width:min(430px,100%);
  padding:30px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:rgba(7,10,14,.94);
  box-shadow:0 32px 100px rgba(0,0,0,.68);
}
.alter-auth-mark{
  width:54px;height:54px;margin:0 auto 20px;
  display:grid;place-items:center;
  border:1px solid rgba(216,181,109,.44);
  transform:rotate(45deg);
  color:var(--accent);
  font:800 19px var(--mono);
}
.alter-auth-mark::first-letter{transform:rotate(-45deg)}
.alter-auth-panel>.micro{text-align:center}
.alter-auth-panel h1{
  margin:8px 0 4px;
  text-align:center;
  padding-left:.25em;
  font-size:36px;
  letter-spacing:.25em;
}
.alter-auth-sub{
  margin:0 0 22px;
  text-align:center;
  color:#737d89;
  font-size:11px;
}
.alter-auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-bottom:16px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#05070a;
}
.alter-auth-tabs button{
  min-height:38px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#737e8b;
  font:700 8px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.alter-auth-tabs button.active{
  background:rgba(216,181,109,.09);
  color:var(--accent-2);
}
.alter-auth-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.alter-auth-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#7e8996;
  font:700 8px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.alter-auth-form input{
  width:100%;
  height:44px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#070a0e;
  color:#e6eaf0;
  padding:0 12px;
  outline:none;
  font-size:14px;
}
.alter-auth-form input:focus{border-color:rgba(216,181,109,.42)}
.alter-auth-form .access-btn{margin-top:4px}
.alter-auth-note{
  color:#65717d;
  font:500 7px/1.5 var(--mono);
}
.alter-auth-message{
  display:none;
  margin-top:13px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:8px;
  color:#8d97a3;
  background:#070a0e;
  font:600 8px/1.55 var(--mono);
}
.alter-auth-message.show{display:block}
.alter-auth-message.error{border-color:rgba(212,86,86,.24);color:#dba7a7}
.alter-auth-message.success{border-color:rgba(105,186,141,.24);color:#9dcaae}
.alter-auth-security{
  margin-top:18px;
  text-align:center;
  color:#4f5a66;
  font:600 6.5px/1.6 var(--mono);
  letter-spacing:.08em;
}
.alter-auth-loading{text-align:center}
.alter-auth-loader{
  width:100%;
  height:2px;
  margin-top:24px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.alter-auth-loader span{
  display:block;
  width:35%;
  height:100%;
  background:var(--accent);
  animation:alter-auth-load 1.1s ease-in-out infinite;
}
@keyframes alter-auth-load{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(390%)}
}

.alter-account-chip{
  flex:0 0 auto;
  width:calc(100% - 10px);
  min-height:44px;
  margin:7px 5px 3px;
  padding:7px 8px;
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:9px;
  background:#070a0e;
  color:#aeb6c0;
  text-align:left;
}
.alter-cloud-dot{
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:#69727e;
}
.alter-account-chip[data-state="synced"] .alter-cloud-dot{background:#69ba8d;box-shadow:0 0 10px rgba(105,186,141,.42)}
.alter-account-chip[data-state="syncing"] .alter-cloud-dot{background:#d8b56d;animation:alter-cloud-pulse 1s infinite}
.alter-account-chip[data-state="error"] .alter-cloud-dot{background:#d45656}
@keyframes alter-cloud-pulse{50%{opacity:.3}}
.alter-account-copy{min-width:0;display:block}
.alter-account-copy b{
  display:block;
  max-width:178px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#aeb6c0;
  font:600 7px var(--mono);
}
.alter-account-copy small{
  display:block;
  margin-top:3px;
  color:#5e6975;
  font:700 5.8px var(--mono);
  letter-spacing:.1em;
}

.alter-master-warning{
  padding:15px;
  margin-bottom:13px;
  border:1px solid rgba(216,181,109,.16);
  border-radius:10px;
  background:rgba(216,181,109,.035);
}
.alter-master-warning strong{color:var(--accent-2)}
.alter-master-warning p{
  margin:8px 0 0;
  color:#89939f;
  font-size:11px;
  line-height:1.65;
}
.alter-master-warning b{color:#d2d8df}
.alter-master-btn{
  width:100%;
  margin-top:8px;
}
.alter-account-summary{
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#070a0e;
}
.alter-account-summary span,
.alter-account-summary strong,
.alter-account-summary small{display:block}
.alter-account-summary span{color:#65717d;font:700 7px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.alter-account-summary strong{margin-top:6px;color:#d9dee5;font-size:13px}
.alter-account-summary small{margin-top:5px;color:#606b77;font:600 7px var(--mono)}
.alter-account-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.alter-account-actions .danger{grid-column:1/-1}

@media(max-width:860px){
  .alter-auth-screen{
    padding:
      max(18px,env(safe-area-inset-top))
      14px
      max(18px,env(safe-area-inset-bottom));
  }
  .alter-auth-panel{
    padding:24px 18px;
    border-radius:16px;
  }
  .alter-auth-form input{
    height:48px;
    font-size:16px;
  }
  .alter-account-chip{
    width:100%;
    margin:5px 0 0;
  }
  .alter-account-copy b{max-width:210px}
  .alter-first-sync-modal{
    width:min(94vw,520px)!important;
  }
  .alter-account-actions{grid-template-columns:1fr}
  .alter-account-actions .danger{grid-column:auto}
}