/* ============================================================================
   YONETIX ID —— Apple 设计系统
   ---------------------------------------------------------------------------
   视觉词汇取自 popular-web-designs / templates/apple.md，逐条对齐：

     背景       #f5f5f7（微冷浅灰，不是白） / 深色块 #000000
     文字       #1d1d1f 主、rgba(0,0,0,.8) 次、rgba(0,0,0,.48) 三级
     强调色     #0071e3 全场唯一彩色，只用于可交互元素
     链接       #0066cc（浅底） / #2997ff（深底）
     圆角       按钮 8px · 输入框 11px · 面板 12px · 胶囊 980px
     投影       只用一层：rgba(0,0,0,.22) 3px 5px 30px（柔和、大范围、偏下）
     字距       全尺寸负字距：28px -0.28、17px -0.374、14px -0.224、12px -0.12
     行高       标题压紧 1.07~1.14，正文放开 1.47

   ★ 三条硬规矩（之前几版都违反了）★
     1. 背景不许可使用渐变、纹理、光晕 —— 纯色块
     2. 卡片不加可见边框 —— 靠背景色差和投影分层
     3. 除 #0071e3 外不引入第二个彩色
   ============================================================================ */

:root{
  /* —— 面 —— */
  --bg:        #f5f5f7;
  --surface:   #ffffff;
  --ink:       #1d1d1f;
  --ink-2:     rgba(0, 0, 0, .80);
  --ink-3:     rgba(0, 0, 0, .48);
  --line:      rgba(0, 0, 0, .10);
  --line-soft: rgba(0, 0, 0, .06);

  /* —— 唯一的彩色 —— */
  --blue:      #0071e3;
  --blue-link: #0066cc;
  --blue-dark: #2997ff;

  /* —— 状态色（仅在提示条里用，不参与品牌） —— */
  --red:       #d70015;
  --green:     #007d3e;

  /* —— 圆角（严格按 Apple 档位） —— */
  --r-btn:   8px;
  --r-input: 11px;
  --r-panel: 12px;
  --r-pill:  980px;

  /* —— 唯一允许的投影 —— */
  --lift: 0 0 0 .5px rgba(0,0,0,.04), 0 3px 30px 0 rgba(0,0,0,.11);

  --e:     cubic-bezier(.4, 0, .2, 1);
  --e-out: cubic-bezier(.16, 1, .3, 1);

  /* SF Pro 优先，非苹果设备回落到系统无衬线（保持字重与字距才是关键） */
  --sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
          system-ui, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC",
          "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.47;
  letter-spacing:-.374px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{color:var(--blue-link);text-decoration:none;transition:opacity .18s var(--e)}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono);letter-spacing:-.01em}
.muted{color:var(--ink-2)}
.muted-sm{color:var(--ink-3);font-size:14px;letter-spacing:-.224px}

/* --------------------------------- 骨架 --------------------------------- */
.wrap{
  max-width:1024px;margin:0 auto;padding:40px 22px 22px;
  min-height:100vh;display:flex;flex-direction:column;
}
.wrap.wide{max-width:1080px}

/* 页脚：Apple 的 nano 档 10~12px，三级灰 */
.ft{
  margin-top:auto;padding-top:40px;text-align:center;
  color:var(--ink-3);font-size:12px;line-height:1.33;letter-spacing:-.12px;
}
.ft .row{margin:0}
.ft .row + .row{margin-top:4px}
.ft .sep{display:inline-block;margin:0 7px;opacity:.5}
.ft a{color:var(--ink-3)}

/* ------------------------------- 登录 / 注册 ------------------------------- */
.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 0 16px}

/*
 * 登录卡：Apple 不用边框，靠白卡 + 一层柔和投影从 #f5f5f7 上浮起来。
 * 圆角 12px（面板档），不是之前那种 14px 的大圆角。
 */
.auth-card{
  width:100%;max-width:420px;
  background:var(--surface);
  border-radius:var(--r-panel);
  padding:44px 40px 34px;
  box-shadow:var(--lift);
}

.auth-card h1{
  margin:0 0 6px;text-align:center;
  font-size:28px;line-height:1.14;font-weight:600;letter-spacing:-.28px;
  color:var(--ink);
}
.auth-card .sub{
  margin:0;text-align:center;
  font-size:17px;line-height:1.47;font-weight:400;letter-spacing:-.374px;
  color:var(--ink-2);
}
.auth-card .sub b,
.auth-card .sub .app{font-weight:600;color:var(--ink)}

/* 兜底文字标（当前未使用，保留以备无图场景） */
.wm{
  display:block;text-align:center;
  font-size:12px;font-weight:600;letter-spacing:-.12px;
  color:var(--ink-3);text-transform:uppercase;
}
.wm b{color:var(--ink)}

/* --------------------------------- 表单 --------------------------------- */
form{margin:28px 0 0}

.f{margin-bottom:14px}
.f label{
  display:block;
  font-size:14px;font-weight:400;letter-spacing:-.224px;
  color:var(--ink-2);margin:0 0 7px;
}
.f label i{font-style:normal;color:var(--ink-3)}

/*
 * 输入框：Apple 的做法是 11px 圆角 + 极浅填充，
 * 聚焦时才出现 1px 蓝边（不是粗光圈）。
 */
.f input{
  display:block;width:100%;height:48px;padding:0 15px;
  font-size:17px;font-family:inherit;letter-spacing:-.374px;
  color:var(--ink);
  background:rgba(0, 0, 0, .035);
  border:1px solid transparent;
  border-radius:var(--r-input);
  transition:background .18s var(--e), border-color .18s var(--e),
             box-shadow .18s var(--e);
  -webkit-appearance:none;appearance:none;
}
.f input::placeholder{color:var(--ink-3)}
.f input:hover{background:rgba(0, 0, 0, .05)}
.f input:focus{
  outline:none;background:var(--surface);border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0, 113, 227, .18);
}
.f input:disabled{background:rgba(0,0,0,.02);color:var(--ink-3);cursor:not-allowed}

/* 勾选框行：自绘，17px，圆角 4px */
.check-row{
  display:flex;align-items:center;gap:10px;
  margin:18px 0 0;
  font-size:14px;line-height:1.29;letter-spacing:-.224px;color:var(--ink-2);
}
.check-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:17px;height:17px;margin:0;flex:0 0 auto;cursor:pointer;
  border:1px solid rgba(0,0,0,.28);border-radius:4px;background:var(--surface);
  position:relative;transition:background .15s var(--e), border-color .15s var(--e);
}
.check-row input[type=checkbox]:checked{background:var(--blue);border-color:var(--blue)}
.check-row input[type=checkbox]:checked::after{
  content:"";position:absolute;left:5px;top:2px;width:4.5px;height:8.5px;
  border-right:1.8px solid #fff;border-bottom:1.8px solid #fff;
  transform:rotate(42deg);
}
.check-row input[type=checkbox]:focus-visible{
  outline:none;box-shadow:0 0 0 2px var(--blue);
}
.check-row label{cursor:pointer;user-select:none;line-height:1}

/* --------------------------------- 按钮 --------------------------------- */
/* 胶囊主按钮（980px）用于登录这类单一主操作；普通按钮 8px 圆角 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 16px;
  border-radius:var(--r-btn);
  cursor:pointer;
  font-size:17px;font-family:inherit;font-weight:400;letter-spacing:-.374px;
  border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
  transition:background .18s var(--e), border-color .18s var(--e),
             transform .12s var(--e), color .18s var(--e);
  -webkit-tap-highlight-color:transparent;text-decoration:none;
}
.btn:hover{background:rgba(0,0,0,.04);text-decoration:none;color:var(--ink)}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--blue)}

/* 主操作：实心 Apple Blue，胶囊形 */
.btn.primary{
  width:100%;height:48px;margin-top:22px;
  background:var(--blue);border-color:transparent;color:#fff;
  border-radius:var(--r-pill);
  font-size:17px;font-weight:400;letter-spacing:-.374px;
  transition:background .18s var(--e), transform .12s var(--e);
}
.btn.primary:hover{background:#0077ed;color:#fff}
.btn.primary:active{transform:scale(.99)}
.btn.primary .arw{
  font-size:16px;line-height:1;margin-left:2px;opacity:.9;
  transition:transform .2s var(--e-out);
}
.btn.primary:hover .arw{transform:translateX(2px)}

.btn.sm{height:30px;padding:0 13px;font-size:14px;letter-spacing:-.224px;border-radius:8px}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:rgba(0,0,0,.04);color:var(--ink)}
.btn.danger{color:var(--red);border-color:rgba(215,0,21,.24)}
.btn.danger:hover{background:rgba(215,0,21,.05);border-color:rgba(215,0,21,.4)}
.btn[disabled]{opacity:.36;cursor:not-allowed;transform:none!important}

/* 次级链接式按钮（Apple 的 pill link）：透明底 + 1px 蓝边 */
.btn.pill{
  border-radius:var(--r-pill);border-color:var(--blue);
  color:var(--blue-link);background:transparent;
  height:34px;padding:0 18px;font-size:14px;letter-spacing:-.224px;
}
.btn.pill:hover{background:rgba(0,113,227,.06);text-decoration:none}

/* --------------------------------- 提示 --------------------------------- */
.err,.ok{
  display:flex;align-items:flex-start;gap:9px;
  padding:12px 15px;border-radius:var(--r-btn);
  font-size:14px;line-height:1.29;letter-spacing:-.224px;
  margin:20px 0 0;
}
.err{background:rgba(215,0,21,.06);color:#c1000f}
.ok{background:rgba(0,125,62,.06);color:#00662f}
.err::before{content:"!";flex:0 0 auto;font-weight:600;opacity:.7}
.ok::before{content:"✓";flex:0 0 auto;font-weight:600;opacity:.7}

/* 表单下方链接 + 安全说明 */
.auth-foot{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft);
  text-align:center;
  font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink-2);
}
.secure{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:16px 0 0;
  font-size:12px;line-height:1.33;letter-spacing:-.12px;color:var(--ink-3);
}
.secure svg{width:10px;height:12px;flex:0 0 auto;opacity:.85}

.mini-links{
  margin:18px 0 0;text-align:center;
  font-size:14px;letter-spacing:-.224px;
}
.mini-links .sep{margin:0 11px;color:var(--ink-3)}

/* ------------------------------ 分段控件 ------------------------------ */
/* Apple 的 segmented control：浅底槽 + 白色滑块，8px 圆角 */
.page-tabs{
  display:flex;justify-content:center;gap:2px;margin:0 0 22px;
  background:rgba(0, 0, 0, .05);border-radius:9px;padding:2px;
}
.page-tabs a{
  flex:1;text-align:center;padding:8px 12px;border-radius:7px;
  font-size:14px;letter-spacing:-.224px;color:var(--ink-2);text-decoration:none;
  transition:background .18s var(--e), color .18s var(--e);
}
.page-tabs a.on{
  background:var(--surface);color:var(--ink);
  box-shadow:0 0 0 .5px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.08);
}
.page-tabs a:hover{text-decoration:none;color:var(--ink)}

/* 折叠区（"用不了验证器?"） */
.fbk{margin-top:20px;border-top:1px solid var(--line-soft);padding-top:16px}
.fbk summary{
  cursor:pointer;font-size:14px;letter-spacing:-.224px;color:var(--ink-2);
  list-style:none;padding:2px 0;
}
.fbk summary::-webkit-details-marker{display:none}
.fbk summary::before{
  content:"›";display:inline-block;margin-right:7px;
  transition:transform .18s var(--e);
}
.fbk[open] summary::before{transform:rotate(90deg)}

.wa-box{padding:2px 0}

/* 二维码区 */
.qr-wrap{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  padding:18px;background:rgba(0,0,0,.03);border-radius:var(--r-panel);
  margin-bottom:20px;
}
.qr-wrap #qr{
  width:152px;height:152px;flex:0 0 auto;background:#fff;
  border-radius:var(--r-btn);padding:5px;
}
.qr-wrap #qr img,.qr-wrap #qr canvas{display:block;width:100%!important;height:100%!important}
.qr-side{flex:1;min-width:170px}

.secret{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  background:var(--surface);border-radius:8px;padding:9px 11px;
  word-break:break-all;color:var(--ink-2);
  box-shadow:0 0 0 .5px rgba(0,0,0,.06);
}

.codes{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:8px;margin-top:14px;
}
.codes .code{
  font-family:var(--mono);font-size:14px;letter-spacing:.04em;
  background:rgba(0,0,0,.035);border-radius:var(--r-btn);padding:10px 11px;
  text-align:center;color:var(--ink);
}

.row-acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.inline-pw{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-pw input{
  height:30px;padding:0 11px;font-size:14px;font-family:inherit;
  letter-spacing:-.224px;
  background:rgba(0,0,0,.03);border:1px solid var(--line);
  border-radius:8px;color:var(--ink);width:126px;
  transition:border-color .18s var(--e), background .18s var(--e);
}
.inline-pw input:focus{
  outline:none;background:var(--surface);border-color:var(--blue);
  box-shadow:0 0 0 2px var(--blue);
}

/* --------------------------------- 卡片 --------------------------------- */
.card{
  background:var(--surface);border-radius:var(--r-panel);
  padding:26px;margin-bottom:14px;
  box-shadow:0 0 0 .5px rgba(0,0,0,.03), 0 1px 3px rgba(0,0,0,.04);
}
.card-h{
  font-size:21px;line-height:1.19;font-weight:600;letter-spacing:.231px;
  color:var(--ink);
  margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);
}
.card.center{text-align:center;padding:48px 24px}
.big-mark{
  width:52px;height:52px;line-height:50px;margin:0 auto 20px;border-radius:50%;
  background:rgba(0,125,62,.08);color:var(--green);font-size:22px;
}
.row-actions{margin-top:22px;display:flex;gap:9px;justify-content:center;flex-wrap:wrap}

.kv{display:grid;grid-template-columns:82px 1fr;gap:12px 18px;margin:0}
.kv dt{color:var(--ink-3);font-size:14px;letter-spacing:-.224px}
.kv dd{margin:0;font-size:17px;letter-spacing:-.374px;color:var(--ink)}
.hint{margin:16px 0 0;font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink-3)}

.tag{
  display:inline-block;padding:3px 10px;border-radius:var(--r-pill);
  font-size:12px;line-height:1.33;letter-spacing:-.12px;
  background:rgba(0,0,0,.05);color:var(--ink-2);
}
.tag.ok{background:rgba(0,125,62,.09);color:var(--green)}
.tag.bad{background:rgba(215,0,21,.08);color:var(--red)}

/* --------------------------------- 顶栏 --------------------------------- */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 2px 16px;margin-bottom:24px;
  border-bottom:1px solid var(--line-soft);
}
.top-l{display:flex;align-items:center;gap:11px}
.top-name{font-size:17px;font-weight:600;letter-spacing:-.374px;color:var(--ink)}
.top-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.who{font-size:14px;letter-spacing:-.224px;color:var(--ink-2);margin-right:2px}

.main{flex:1}
.main.narrow{max-width:600px;width:100%;margin:0 auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.apps{list-style:none;margin:0;padding:0}
.apps li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
}
.apps li:last-child{border-bottom:none;padding-bottom:0}
.app-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.app-main b{font-weight:600;color:var(--ink);font-size:17px;letter-spacing:-.374px}
.app-side{display:flex;align-items:center;gap:11px;flex-shrink:0}
.apps li .app-side form{margin:0}

.feat{padding:2px 0}
.feat-t{
  font-size:14px;font-weight:600;letter-spacing:-.224px;
  color:var(--ink);margin-bottom:6px;
}
.feat p{margin:0;font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink-2)}

/* --------------------------------- 表格 --------------------------------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
.tbl{width:100%;border-collapse:collapse;font-size:14px;letter-spacing:-.224px}
.tbl.wide{min-width:960px}
.tbl th{
  text-align:left;font-weight:600;color:var(--ink-3);
  font-size:12px;letter-spacing:-.12px;
  padding:9px 11px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{
  padding:11px;border-bottom:1px solid var(--line-soft);vertical-align:middle;
  white-space:nowrap;
}
.tbl tr:last-child td{border-bottom:none}
.tbl td.muted-sm{white-space:normal;min-width:112px}
.tbl .acts{display:flex;gap:6px;flex-wrap:wrap;white-space:normal;min-width:200px}
.tbl .acts form{margin:0;display:inline}
.inline-act{display:inline;margin:0}

.search-row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.search-row input{
  flex:1;min-width:200px;height:38px;padding:0 13px;
  font-size:14px;font-family:inherit;letter-spacing:-.224px;
  background:rgba(0,0,0,.035);border:1px solid transparent;
  border-radius:var(--r-input);color:var(--ink);
  transition:border-color .18s var(--e), background .18s var(--e), box-shadow .18s var(--e);
}
.search-row input:focus{
  outline:none;background:var(--surface);border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0, 113, 227, .18);
}

/* ------------------------------ 自绘确认弹窗 ------------------------------ */
.modal-mask{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);padding:22px;
  animation:fade .15s var(--e) both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:380px;background:var(--surface);
  border-radius:var(--r-panel);padding:26px 26px 20px;
  box-shadow:0 24px 80px -16px rgba(0,0,0,.34);
}
.modal h3{
  margin:0 0 8px;font-size:17px;font-weight:600;letter-spacing:-.374px;color:var(--ink);
}
.modal p{margin:0;font-size:14px;line-height:1.43;letter-spacing:-.224px;color:var(--ink-2)}
.modal-acts{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}
.modal-acts .btn.primary{
  width:auto;height:34px;margin:0;padding:0 20px;font-size:14px;
  border-radius:var(--r-pill);
}

/* -------------------------------- 响应式 -------------------------------- */
@media (max-width:900px){
  .grid2,.grid3{grid-template-columns:1fr}
}
@media (max-width:600px){
  .wrap{padding:26px 16px 20px}
  .stage{padding:12px 0 14px}
  .auth-card{padding:34px 22px 26px;border-radius:var(--r-panel);max-width:100%}
  .auth-card h1{font-size:24px;letter-spacing:-.26px}
  .auth-card .sub{font-size:15px}
  form{margin-top:24px}
  /* 16px 以上：防 iOS 聚焦时自动放大页面 */
  .f input{font-size:16px;height:48px}
  .f label{font-size:13px}
  .btn.primary{height:48px;font-size:17px}
  .card{padding:20px 16px}
  .card-h{font-size:19px}
  .top{flex-wrap:wrap;padding-bottom:13px}
  .kv{grid-template-columns:74px 1fr;gap:10px 13px}
  .kv dd{font-size:15px}
  .apps li{flex-direction:column;align-items:flex-start;gap:9px}
  .app-side{width:100%;justify-content:space-between}
  .ft{font-size:11px}
  .page-tabs a{padding:7px 6px;font-size:13px}
  .search-row input{min-width:0}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
}