/* overlay */
#a80-profile-modal{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(6,10,26,.55); backdrop-filter:blur(6px);
  z-index:20000;
}
#a80-profile-modal.open{ display:flex; }

/* prevent background scroll when open */
html.a80-noscroll, body.a80-noscroll{ overflow:hidden; }

/* card */
.a80-card{
  position:relative; width:min(520px,86vw);
  border-radius:18px;
  padding:16px 14px 14px 8px;   /* 左 8px，避免受 X 影響 */
  margin-left:8px;              /* 整體微向右 */
  background:linear-gradient(180deg,rgba(12,18,40,.96),rgba(10,14,28,.94));
  box-shadow:0 16px 48px rgba(0,0,0,.6);
  border:1px solid rgba(120,180,255,.22);
}
.a80-card::before{
  content:""; position:absolute; inset:-2px; border-radius:20px; padding:2px;
  background:linear-gradient(135deg,#00e5ff,#7b2ff7,#ff00a8);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* inner body */
.a80-inner{
  width:min(440px,78vw);
  margin:0 auto;                 /* 內容置中 */
}

/* title */
.a80-title{
  margin:8px 0 8px; text-align:center;
  font-size:26px; font-weight:800;
  color:#35f4ff; text-shadow:0 0 14px rgba(53,244,255,.65);
}
.a80-underline{
  width:90px; height:3px; margin:0 auto 12px; border-radius:999px;
  background:linear-gradient(90deg,transparent,#6f3bff,#00e5ff,transparent);
}

/* fields */
.a80-field{ margin:12px 0; }
.a80-label{ display:block; margin:0 0 6px; color:#cfe2ff; font-weight:700; }
.a80-input,.a80-textarea{
  width:100%; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(90,225,255,.46);
  background:rgba(14,20,44,.92); color:#eaf3ff;
  outline:none; transition:border-color .15s, box-shadow .15s;
  font-size:16px; /* 防 iOS 放大 */
}
.a80-input::placeholder,.a80-textarea::placeholder{ color:#98bbdf; }

/* 取消聚焦高亮 */
.a80-inner .a80-input:focus,
.a80-inner .a80-input:focus-visible,
.a80-inner .a80-textarea:focus,
.a80-inner .a80-textarea:focus-visible{
  border-color:rgba(90,225,255,.46) !important;
  box-shadow:none !important;
  outline:none !important;
}

/* 輸入框再向左貼一些，右緣保持不變 */
.a80-inner .a80-input,
.a80-inner .a80-textarea{
  margin-left:-16px !important;
  width:calc(100% + 16px) !important;
}
@media (min-width:420px){
  .a80-inner .a80-input,
  .a80-inner .a80-textarea{
    margin-left:-20px !important;
    width:calc(100% + 20px) !important;
  }
}

/* actions */
.a80-actions{
  display:flex; gap:10px; margin-top:16px;
  justify-content:center;        /* 按鈕群置中 */
  max-width:360px;               /* 縮窄寬度 */
  margin-left:auto; margin-right:auto;  /* 置中於畫面 */
}
.a80-btn-primary{
  flex:1; padding:12px 14px; border:0; border-radius:12px;
  color:#fff; cursor:pointer; font-weight:700;
  background:linear-gradient(90deg,#22d3ee,#7b2ff7);
}
.a80-btn-secondary{
  flex:1; padding:12px 14px; border:0; border-radius:12px;
  background:rgba(255,255,255,.18); color:#e6f3ff; cursor:pointer;
}

/* note */
.a80-note{ margin-top:10px; text-align:center; color:#9db6d9; font-size:12px; }

/* close button */
#a80-x{
  position:absolute; right:10px; top:10px;
  width:26px; height:26px; border:0; border-radius:6px;
  background:rgba(255,255,255,.18); color:#e6f3ff; cursor:pointer;
}
