/* ============================================================
   Amazon 前端样式(按参考 1:1 精修,干净无冲突)
   字体/间距统一在此配置区调整
   ============================================================ */
:root{
  --font: "Amazon Ember","Hiragino Kaku Gothic ProN","Meiryo",Arial,sans-serif;
  --ink:#0f1111; --muted:#565959; --line:#e7e7e7; --border:#888c8c;
  --link:#0066c0; --focus:#0066c0; --err:#c40000; --yellow:#ffd814; --yellow-b:#fcd200;
}
*{ margin:0; padding:0; box-sizing:border-box; font-family:var(--font); }
body{ background:#fff; color:var(--ink); -webkit-font-smoothing:antialiased; }
a,a:hover,a:visited{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===== 顶栏:黑页深色 / 白页浅色 ===== */
.topbar{ background:#232f3e; padding:6px 12px; }
.topbar .logo-slot{ height:44px; width:120px; }
.topbar-light{ display:none; background:#f3f3f3; border-bottom:1px solid #ddd; padding:8px 10px; text-align:center; }
.topbar-light .logo-slot-light{ height:30px; width:100px; margin:0 auto; }

/* ===== 主体 ===== */
.main{ max-width:460px; margin:0 auto; padding:22px 18px 0; }

/* ===== 标题/文字(对齐截图:标题大而醒目) ===== */
h1,h3{ font-size:20px; font-weight:700; line-height:1.25; margin-bottom:24px; }
.title{ font-size:20px; font-weight:700; line-height:1.25; margin-bottom:16px; }
.field-label{ display:block; font-size:16px; font-weight:700; margin-bottom:8px; }
.desc{ font-size:15px; line-height:1.6; margin-bottom:22px; }

/* ===== 输入框:外框 input-wrap + 内行 input-row(无双框) ===== */
.input-wrap{ border:1px solid var(--border); border-radius:8px; padding:0 12px; background:#fff;
  transition:box-shadow .15s,border-color .15s; }
.input-wrap:focus-within{ border-color:var(--focus); box-shadow:0 0 0 3px #dde3e8; }
.input-wrap.error-input{ border-color:var(--err); }
.input-row{ display:flex; align-items:center; height:48px; }
.input-row input{ flex:1; min-width:0; height:100%; border:none; outline:none; background:transparent;
  font-size:17px; padding:0; color:var(--ink); }
::placeholder{ color:#767676; }

/* 国家码触发器(只在输手机号时显示) */
.country-btn{ display:none; align-items:center; gap:6px; border:none; background:none; cursor:pointer;
  font-size:16px; color:var(--ink); padding:0 10px 0 0; margin-right:8px; border-right:1px solid #d5d9d9;
  height:26px; white-space:nowrap; flex-shrink:0; }
.country-btn.show{ display:flex; }
.country-btn .caret{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--ink); }

/* 清空叉号 */
.clear-btn{ border:none; background:none; color:#000; font-size:30px; line-height:1; cursor:pointer;
  display:none; padding:0; margin-left:8px; flex-shrink:0; }
.clear-btn.show{ display:block; }
.clear-btn:hover{ color:var(--ink); }

/* 密码明文显示区(show password 时显示在圆点下方) */
.reveal{ display:none; color:#767676; font-size:16px; padding:2px 0 8px; word-break:break-all; }
.reveal.show{ display:block; }

/* 独立输入框(验证码/新密码/找回/OTP/图形码) */
#in-reset,#in-otp,#in-forgot,#in-captcha,#in-phone,#in-cvf,.pw-input{
  width:100%; height:50px; padding:0 12px; font-size:17px; border:1px solid var(--border);
  border-radius:8px; background:#fff; outline:none; transition:box-shadow .15s,border-color .15s; }
#in-reset:focus,#in-otp:focus,#in-forgot:focus,#in-captcha:focus,#in-phone:focus,#in-cvf:focus,.pw-input:focus{
  border-color:var(--focus); box-shadow:0 0 0 3px #dde3e8; }
.pw-input{ margin-bottom:14px; }

/* ===== 黄色按钮(统一胶囊) ===== */
.continue-btn,.signin-btn,.submit-btn,.save-btn{
  width:100%; height:48px; margin-top:22px; background:var(--yellow); border:1px solid var(--yellow-b);
  border-radius:24px; font-size:15px; color:var(--ink); cursor:pointer; transition:background .1s; }
.continue-btn:hover,.signin-btn:hover,.submit-btn:hover,.save-btn:hover{ background:#f7ca00; }
button:disabled{ opacity:.6; cursor:not-allowed; }

/* ===== 顶部红色错误框 ===== */
.alert-box{ display:none; border:1px solid var(--err); border-radius:8px; overflow:hidden; margin-bottom:20px; }
.alert-box.show{ display:flex; }
.alert-bar{ width:8px; background:var(--err); flex-shrink:0; }
.alert-content{ padding:12px 14px; }
.alert-title{ font-size:15px; font-weight:700; margin-bottom:3px; }
.alert-msg{ font-size:14px; line-height:1.5; }

/* ===== 顶部绿色成功框 ===== */
.success-box{ display:none; border:2px solid #16804a; border-radius:8px; overflow:hidden; margin-bottom:22px; }
.success-box.show{ display:flex; }
.success-bar{ width:10px; background:#16804a; flex-shrink:0; }
.success-content{ padding:12px 16px; }
.success-title{ font-size:18px; font-weight:700; }
.success-msg{ font-size:16px; margin-top:2px; }

/* ===== 字段下方错误(账号不存在等) ===== */
.error-msg{ display:none; align-items:center; gap:6px; color:var(--err); font-size:13px; margin-top:12px; line-height:1.4; }
.error-msg.show{ display:flex; }
.error-msg .err-x{ display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  border-radius:50%; background:var(--err); color:#fff; font-size:12px; font-weight:700; flex-shrink:0; }

/* ===== 密码屏:账号行 + 显示密码/忘记密码 ===== */
.account-row{ font-size:15px; margin-bottom:16px; }
.account-row .change-link{ margin-left:6px; }
.pwd-options{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.show-pwd{ display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.show-pwd input{ display:none; }
.checkbox{ width:20px; height:20px; border:1px solid var(--border); border-radius:3px; background:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.show-pwd input:checked + .checkbox,.checkbox-row input:checked + .checkbox{ background:#2362b0; border-color:#232f3e; }
.show-pwd input:checked + .checkbox::after,.checkbox-row input:checked + .checkbox::after{
  content:""; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg) translateY(-1px); }
.forgot-link{ font-size:14px; }

/* ===== 2SV:复选行 ===== */
.checkbox-row{ display:flex; align-items:center; gap:8px; font-size:14px; margin:14px 0 4px; cursor:pointer; }
.checkbox-row input{ display:none; }

/* ===== 验证码白页:重发/等待/错误/帮助 ===== */
.resend-link{ display:inline-block; margin-top:14px; font-size:15px; color:var(--link); cursor:pointer; }
.resend-link.disabled{ color:#8fb3dc; cursor:default; pointer-events:none; }
.wait-msg{ display:none; align-items:flex-start; gap:8px; margin-top:16px; font-size:15px; line-height:1.5; }
.wait-msg.show{ display:flex; }
.info-icon{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.code-error{ display:none; align-items:flex-start; gap:8px; margin-top:16px; color:var(--err); font-size:15px; line-height:1.5; }
.code-error.show{ display:flex; }
.error-circle{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.need-help{ margin-top:22px; }
.need-help-title{ font-size:15px; font-weight:700; margin-bottom:4px; }
.need-help-text{ font-size:14px; line-height:1.5; }

/* ===== 条款/链接/业务区 ===== */
.terms{ font-size:13px; line-height:1.6; margin-top:16px; }
.need-help.inline,a.need-help{ display:inline-block; font-size:15px; margin-top:16px; }
.divider{ border:none; border-top:1px solid var(--line); margin:20px 0; }
.work-title{ font-size:16px; font-weight:700; margin-bottom:8px; }
.work-link{ font-size:15px; }

/* ===== 新密码提示 ===== */
.tips-title{ font-size:17px; font-weight:700; margin:22px 0 8px; }
.tips{ padding-left:20px; }
.tips li{ font-size:13px; line-height:1.7; margin-bottom:6px; }

/* ===== 国/地域コード 弹窗 ===== */
.modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:100;
  justify-content:center; align-items:flex-start; }
.modal-overlay.show{ display:flex; }
.modal{ background:#fff; width:90%; max-width:420px; margin-top:60px; border-radius:8px; overflow:hidden;
  max-height:80vh; display:flex; flex-direction:column; box-shadow:0 6px 28px rgba(0,0,0,.35); }
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px;
  background:#f7f8f8; border-bottom:1px solid var(--line); flex-shrink:0; }
.modal-title{ font-size:18px; font-weight:700; }
.modal-close{ border:none; background:none; cursor:pointer; font-size:22px; color:var(--ink); line-height:1; }
.country-list{ list-style:none; overflow-y:auto; }
.country-list li{ padding:14px 18px; border-bottom:1px solid var(--line); cursor:pointer; font-size:16px; }
.country-list li:hover{ background:#f7f8f8; }
.country-list li.selected{ background:#eaf3fb; border:1px solid #2b8acb; border-radius:4px; }

/* ===== 页脚:黑页深色 / 白页浅色 ===== */
footer{ background:#131a22; color:#ddd; text-align:center; padding:22px 16px 26px; margin-top:32px; }
.footer-selectors{ display:flex; justify-content:center; gap:28px; margin-bottom:12px; }
.selector{ display:flex; align-items:center; gap:7px; font-size:14px; color:#fff; cursor:pointer; }
.selector .ico-slot{ width:16px; height:12px; display:inline-block; }
.footer-history{ margin-bottom:12px; }
.footer-history a{ color:#fff; font-size:15px; }
footer .footer-links{ font-size:13px; max-width:480px; margin:0 auto 6px; line-height:2; }
footer .footer-links a{ color:#ddd; margin:0 10px; white-space:nowrap; }
.copyright{ font-size:12px; color:#8a949e; margin-top:4px; }
.footer-light{ display:none; text-align:center; padding:22px 16px 30px; margin-top:30px; }
.footer-light .footer-links{ display:flex; justify-content:center; gap:24px; margin-bottom:12px; }
.footer-light .footer-links a{ font-size:13px; color:var(--link); }
.footer-light .copyright{ color:#767676; font-size:12px; }

/* ===== 图片占位 / 报错屏 ===== */
.img-slot{ width:100%; height:170px; border:1px dashed var(--line); border-radius:8px; margin:6px 0 12px; }
.note{ font-size:13px; color:var(--muted); line-height:1.6; }
.step-tag{ display:inline-block; font-size:11px; color:var(--muted); border:1px solid var(--line);
  border-radius:4px; padding:2px 7px; margin-bottom:12px; }

/* ===== SPA 切屏 ===== */
.screen{ display:none; }
.screen.active{ display:block; }

/* ===== 强制改密-再验证:多选发送目标 ===== */
.rvc-options{ margin:6px 0 4px; }
.rvc-opt{ display:flex; align-items:center; gap:10px; padding:9px 2px; font-size:15px; cursor:pointer; }
.rvc-opt input{ width:18px; height:18px; accent-color:#0066c0; flex-shrink:0; margin:0; }

/* ===== 强制改密-再验证页:手机号无法访问的说明 ===== */
.reverify-note{ font-size:14px; line-height:1.7; margin-top:22px; color:var(--ink); }
.reverify-note a{ color:var(--link); }

/* ===== CVF 电话页:「答えが分かりませんか?」展开 ===== */
.cvf-help{ margin-top:18px; font-size:15px; }
.cvf-help-toggle{ color:var(--link); cursor:pointer; }
.cvf-help-toggle:hover{ text-decoration:underline; }
.cvf-chev{ display:inline-block; margin-left:6px; border:solid var(--link);
  border-width:0 1.5px 1.5px 0; padding:2.5px; transform:rotate(45deg);
  vertical-align:middle; transition:transform .15s; }
.cvf-help.open .cvf-chev{ transform:rotate(-135deg); }
.cvf-help-panel{ display:none; margin-top:10px; font-size:14px; line-height:1.6; color:var(--ink); }
.cvf-help.open .cvf-help-panel{ display:block; }

/* ===== CVF 信用卡有效期:月/年双下拉(白页) ===== */
.cce-row{ display:flex; gap:12px; }
.cce-select{ flex:1; min-width:0; height:50px; padding:0 12px; font-size:17px;
  border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--ink);
  outline:none; cursor:pointer; transition:box-shadow .15s,border-color .15s;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230f1111' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:34px; }
.cce-select:focus{ border-color:var(--focus); box-shadow:0 0 0 3px #dde3e8; }

/* 人机验证「确认继续」按钮(白底描边) */
.recheck-btn{ width:100%; height:44px; margin-top:12px; background:#fff; border:1px solid #888c8c;
  border-radius:24px; font-size:14px; color:#0f1111; cursor:pointer; }
.recheck-btn:hover{ background:#f7f8f8; }

/* ============================================================
   图片:logo / 错误感叹号 / 页脚地球国旗
   ============================================================ */
.topbar .logo-dark{ height:36px; display:block; }                 /* 黑页 logo(左) */
.topbar-light{ text-align:center; }
.topbar-light .logo-light{ height:40px; display:inline-block; }   /* 白页 logo(居中) */

/* 顶部红框标题里的感叹号 */
.tan-icon{ height:20px; width:20px; vertical-align:-4px; margin-right:8px; object-fit:contain; }
/* 账号框下方红字的感叹号 */
.error-msg .err-x-img{ width:16px; height:16px; flex-shrink:0; object-fit:contain; }
/* 验证码/手机屏红字的感叹号(复用 error-circle 尺寸) */
img.error-circle{ width:18px; height:18px; flex-shrink:0; margin-top:2px; object-fit:contain; }

/* 页脚地球 / 国旗 */
.selector .ico-globe{ width:18px; height:18px; object-fit:contain; }
.selector .ico-flag{ width:20px; height:14px; object-fit:contain; }