/*
 * File: ua-portal.css
 * Version: v0.3.12
 * Last Updated: 2026-02-05
 *
 * 说明：
 * - 主要变更：把密码框右侧“圆圈按钮”改为更通用的“眼睛”显示/隐藏图标。
 * - 同时尽量隐藏部分浏览器自带的 password reveal 图标，避免出现两个按钮叠加。
 */

/* 登录成功（Signed in / Redirecting...）
 * 需求：两行同字号 & 居中显示
 */
.uap-card--success{
  padding:24px 24px 28px;
  text-align:center;
}
.uap-card--success h3,
.uap-card--success p{
  margin:0;
  font-size:16px;
  line-height:1.6;
}
.uap-card--success h3{font-weight:700;}
.uap-card--success p{opacity:.85;}

/* 基础容器与网格 */
.uap-portal{max-width:1100px;margin:40px auto;padding:0 16px;}
.uap-grid{display:flex;gap:24px;flex-wrap:wrap;}
.uap-col{flex:1 1 480px;min-width:320px;}

/* 移动端（默认） */
.uap-col--left{order:2}
.uap-col--right{order:1}

/* 桌面端：左右对换 */
@media (min-width:900px){
  .uap-col{flex:0 0 calc(50% - 12px);}
  .uap-col--left{order:2}
  .uap-col--right{order:1}
}

/* 卡片（无阴影，仅边框） */
.uap-card{border:1px solid #e5e7eb;border-radius:12px;background:#fff;}
.uap-card--login,.uap-card--note{padding:24px 24px 28px;}
.uap-divider{height:1px;background:#e5e7eb;margin:12px 0 20px;}

/* Tabs */
.uap-tabs{display:flex;gap:18px;align-items:center;}
.uap-tab{padding:8px 0;color:#111827;text-decoration:none;font-weight:500;opacity:.85}
.uap-tab--active{font-weight:700;border-bottom:3px solid #009944;}

/* 表单 */
.uap-form{display:flex;flex-direction:column;gap:16px;}
.uap-label{font-weight:600;margin-bottom:6px;}
.uap-input{width:100%;height:44px;border:1px solid #d1d5db;border-radius:8px;padding:0 14px;outline:none;}
.uap-input:focus{border-color:#009944;box-shadow:0 0 0 3px rgba(0,153,68,.12);}
.uap-input-wrap{position:relative;}
.uap-input-wrap--with-eye .uap-star{right:44px;}
.uap-star{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#dc3545;font-weight:600;pointer-events:none;}

/* 尽量隐藏部分浏览器自带的“显示密码”按钮（避免叠加） */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear{display:none;}
input::-webkit-credentials-auto-fill-button{visibility:hidden;pointer-events:none;}

/* 眼睛按钮（可见控件） */
.uap-eye{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  -webkit-appearance:none;
  appearance:none;
}

/* 默认：眼睛（隐藏密码状态） */
.uap-eye::before{
  content:"";
  width:20px;
  height:20px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px;
  opacity:.78;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%20%3Cpath%20d=%22M1.5%2012s4-7%2010.5-7%2010.5%207%2010.5%207-4%207-10.5%207S1.5%2012%201.5%2012z%22%20fill=%22none%22%20stroke=%22%239ca3af%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22/%3E%20%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223%22%20fill=%22none%22%20stroke=%22%239ca3af%22%20stroke-width=%222%22/%3E%20%3C/svg%3E");
}

/* data-show：正在显示明文 → 眼睛带斜杠 */
.uap-eye[data-show]::before{
  opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%20%3Cpath%20d=%22M1.5%2012s4-7%2010.5-7%2010.5%207%2010.5%207%2010.5%207-4%207-10.5%207S1.5%2012%201.5%2012z%22%20fill=%22none%22%20stroke=%22%23111827%22%20stroke-width=%222%22%20stroke-linejoin=%22round%22/%3E%20%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%223%22%20fill=%22none%22%20stroke=%22%23111827%22%20stroke-width=%222%22/%3E%20%3Cline%20x1=%223%22%20y1=%223%22%20x2=%2221%22%20y2=%2221%22%20stroke=%22%23111827%22%20stroke-width=%222%22%20stroke-linecap=%22round%22/%3E%20%3C/svg%3E");
}

.uap-eye:hover::before{opacity:1;}
.uap-eye:focus{outline:none;}
.uap-eye:focus::before{opacity:1;}

/* 复选、链接与按钮 */
.uap-form-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.uap-checkbox{display:flex;align-items:center;gap:8px;user-select:none;}
.uap-checkbox--block{gap:10px;justify-content:flex-start;align-items:flex-start;}
.uap-checkbox--block input{margin-top:2px;}
.uap-hint{font-size:13px;color:#6b7280;line-height:1.5;margin-top:-6px;}
.uap-link{color:#2563eb;text-decoration:none;}
.uap-link:hover{text-decoration:underline;}
.uap-link--right{margin-left:auto;}
.uap-btn{display:inline-block;border-radius:10px;border:0;padding:12px 18px;cursor:pointer;}
/* Update Email 主按钮：默认蓝 + hover 明显变色 */
.uap-btn--primary{background:#0D6EFD;color:#fff;font-weight:700;width:100%;}
.uap-btn--primary:hover{background:#3388FF;}

/* 提示框：增加行距与上下间距，避免提示文案/多条提示挤在一起 */
.uap-alert{
  border-radius:8px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.55;
  margin:0 0 12px;
}
.uap-alert--error{background:#fff5f5;border:1px solid #fecaca;color:#b91c1c;}
.uap-alert--success{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;}

/* 说明卡片：标题/副文案居中，列表块居中但文字左对齐 */
.uap-card--note{text-align:center;}
.uap-note-title{font-size:22px;font-weight:700;margin:4px 0 6px;}
.uap-note-desc{color:#6b7280;margin:0 0 12px;}
.uap-note-list{
  display:inline-block;
  text-align:left;
  list-style:disc;
  list-style-position:outside;
  margin:0 auto;
  padding-left:1.25rem;
}
.uap-note-list li{margin:6px 0;}

/* 登录页中文提示 */
.uap-welcome-cn{text-align:center;margin:6px 0 10px;}
.uap-welcome-cn h3{margin:0 0 6px;}
.uap-welcome-cn p{margin:0;color:#6b7280}

/* 注册 - 条款一行显示 & 小字 */
.uap-terms{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#374151;flex-wrap:wrap;}
.uap-terms .uap-required{color:#dc3545;font-weight:700;margin-left:2px;}
.uap-terms a{color:#2563eb;text-decoration:none;}
.uap-terms a:hover{text-decoration:underline;}
.uap-terms-text{line-height:1.35;}
.uap-terms-line2{display:block;margin-top:2px;}
.uap-terms-link a{color:#2563eb;text-decoration:none;}
.uap-terms-link a:hover{text-decoration:underline;}

/* 登录后左侧导航 */
.uap-side{padding:18px;}
.uap-nav{display:flex;flex-direction:column;gap:10px;}
.uap-nav-btn{display:block;border:1px solid #e5e7eb;border-radius:10px;padding:10px 14px;text-decoration:none;background:#fff;color:#111827;transition:background-color .2s,color .2s,border-color .2s;}
.uap-nav-btn:hover{color:#111827;}
/* 选中态：蓝边框 */
.uap-nav-btn.is-active{border-color:#0D6EFD;}

/* Logout：蓝色（默认/hover） */
.uap-nav-btn--danger{background:#0D6EFD;border-color:#0D6EFD;color:#fff;}
.uap-nav-btn--danger:hover{background:#3388FF;border-color:#3388FF;color:#fff;}

/* 面板内容 */
.uap-panel-title{font-size:18px;margin:0 0 12px;}
.uap-text{color:#374151;}
.uap-profile-grid{display:grid;grid-template-columns:1fr;gap:8px;}
@media(min-width:560px){ .uap-profile-grid{grid-template-columns:1fr 1fr;} }

/* Profile key-value layout (stack value under label) */
.uap-profile-grid--kv .uap-kv-val{display:block;margin-top:4px;}

/* 无障碍隐藏 */
.uap-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Modal (Email confirmation prompt) */
.uap-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999;}
.uap-modal__box{background:#fff;border-radius:12px;max-width:520px;width:92vw;box-shadow:0 18px 50px rgba(0,0,0,.25);overflow:hidden;}
.uap-modal__hd{padding:14px 16px;border-bottom:1px solid #eee;font-weight:700;}
.uap-modal__bd{padding:14px 16px;color:#111827;}
.uap-modal__hd,.uap-modal__bd,.uap-modal__ft{text-align:center;}
.uap-modal__bd p{margin:0 0 10px;}
.uap-modal__bd p:last-child{margin-bottom:0;}
.uap-modal__ft{padding:12px 16px;border-top:1px solid #eee;text-align:center;}
.uap-modal__ft .uap-btn{width:auto;display:inline-block;}

/* -------------------------------
 * Password strength meter (thin bar under password field)
 * 规则：4 格灰底（由浅到深），只点亮一格（非累加）
 * Level1=红, Level2=橙, Level3=黄, Level4=绿
 * ------------------------------- */
.uap-pw-meter{
  display:flex;
  gap:6px;
  margin-top:8px;
}
.uap-pw-meter__seg{
  height:5px;            /* 纤细一些 */
  flex:1;
  border-radius:999px;
  background:#e5e7eb;
}
.uap-pw-meter__seg:nth-child(2){background:#d1d5db;}
.uap-pw-meter__seg:nth-child(3){background:#9ca3af;}
.uap-pw-meter__seg:nth-child(4){background:#6b7280;}

/* Colored states (single segment) */
.uap-pw-meter[data-level="1"] .uap-pw-meter__seg:nth-child(1){background:#ef4444;}
.uap-pw-meter[data-level="2"] .uap-pw-meter__seg:nth-child(2){background:#f97316;}
.uap-pw-meter[data-level="3"] .uap-pw-meter__seg:nth-child(3){background:#eab308;}
.uap-pw-meter[data-level="4"] .uap-pw-meter__seg:nth-child(4){background:#22c55e;}

/* Strength tip bubble */
.uap-pw-tip{
  margin-top:10px;
  font-size:13px;
  line-height:1.4;
  color:#374151;
}


/* 密码二次输入实时提示（不阻止提交，仅提示） */
.uap-field-msg{display:none;margin-top:8px;font-size:13px;line-height:1.45;color:#b91c1c;}
.uap-input--invalid{border-color:#dc3545 !important;}
.uap-input--invalid:focus{box-shadow:0 0 0 3px rgba(220,53,69,.14) !important;}