/* oSUHA 原型共用樣式
   色值由 scripts 解算並驗證：文字 ≥7:1（1.4.6 AAA）、邊框與焦點框 ≥3:1。
   Figma 那份用的是同一組。 */

:root{
  --bg:#fbfaf8; --surface:#fff; --sunk:#f2efe9;
  --ink:#1a1815; --ink-2:#403c36; --ink-3:#514d46;
  --accent:#1f5637; --accent-ink:#fff;
  --line:#8c8478; --line-soft:#e3ded5;
  --focus:#1f5637; --danger:#8c1d1d;
  --sans:'PingFang TC','Hiragino Sans CNS','Noto Sans TC',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme=light]){
  --bg:#16181c; --surface:#1c1f24; --sunk:#212529;
  --ink:#e8eaed; --ink-2:#bcc2ca; --ink-3:#adb2b9;
  --accent:#5ed48b; --accent-ink:#0d1f15;
  --line:#6b7688; --line-soft:#2c313a;
  --focus:#5ed48b; --danger:#f59a9a;
}}
:root[data-theme=dark]{
  --bg:#16181c; --surface:#1c1f24; --sunk:#212529;
  --ink:#e8eaed; --ink-2:#bcc2ca; --ink-3:#adb2b9;
  --accent:#5ed48b; --accent-ink:#0d1f15;
  --line:#6b7688; --line-soft:#2c313a;
  --focus:#5ed48b; --danger:#f59a9a;
}

*{box-sizing:border-box}
html{font-size:100%}
body{
  margin:0; min-height:100dvh; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:1rem; line-height:1.7; text-align:left;
  -webkit-font-smoothing:antialiased;
  /* iOS Safari：避免橡皮筋捲動時露出白底 */
  overscroll-behavior-y:none;
}
.wrap{max-width:26rem; margin:0 auto; padding:2.5rem 1.25rem 3rem}

/* 2.4.13 AAA：≥2px 外框、≥3:1 */
:focus-visible{outline:3px solid var(--focus); outline-offset:2px; border-radius:6px}
:focus:not(:focus-visible){outline:none}

.skip{
  position:absolute; left:-9999px; top:0; z-index:10;
  min-height:2.75rem; display:inline-flex; align-items:center;
  background:var(--surface); color:var(--ink);
  padding:.75rem 1rem; border:2px solid var(--focus); border-radius:0 0 8px 0;
}
.skip:focus{left:0}

/* ── 品牌 ── */
.head{text-align:center; margin-bottom:1.6rem}
.ring{
  width:52px; height:52px; margin:0 auto 1rem;
  border:5px solid var(--accent); border-radius:50%;
}
h1{font-size:1.4rem; margin:0 0 .4rem; font-weight:700; line-height:1.4; letter-spacing:.02em}
.sub{font-size:.85rem; color:var(--ink-3); margin:0; line-height:1.6}

/* ── 回跳目標：同時是防釣魚訊號 ── */
.dest{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  background:var(--sunk); border:1px solid var(--line-soft); border-radius:8px;
  padding:.65rem .85rem; margin-bottom:1.4rem; font-size:.78rem; color:var(--ink-3);
}
.dest b{color:var(--ink); font-weight:700}

/* ── 按鈕：2.5.5 AAA 44px ── */
.btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:2.75rem; padding:.8rem;
  border-radius:10px; border:1px solid transparent; cursor:pointer;
  font:inherit; font-size:.95rem; font-weight:700; text-decoration:none;
}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--line)}

.note{font-size:.78rem; color:var(--ink-3); margin:.5rem 0 0; line-height:1.6; text-align:center}

.or{display:flex; align-items:center; gap:.75rem; margin:1.25rem 0; color:var(--ink-3); font-size:.75rem}
.or::before,.or::after{content:''; flex:1; height:1px; background:var(--line-soft)}

/* ── 表單 ── */
label{display:block; font-size:.82rem; font-weight:700; color:var(--ink-2); margin-bottom:.35rem}
input[type=email],input[type=text]{
  width:100%; min-height:2.75rem; padding:.7rem .8rem;
  font:inherit; font-size:1rem;                  /* iOS 低於 16px 會自動放大頁面 */
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:9px;
}
input::placeholder{color:var(--ink-3)}
.hint{font-size:.78rem; color:var(--ink-3); margin:.4rem 0 0; line-height:1.6}
.err{font-size:.8rem; color:var(--danger); font-weight:700; margin:.4rem 0 0}
.err:empty{display:none}
input[aria-invalid=true]{border-color:var(--danger); border-width:2px}

/* ── 分組列表（我的）── */
.group-label{
  font-size:.72rem; font-weight:700; letter-spacing:.12em; color:var(--ink-3);
  margin:2rem 0 .6rem;
}
.group{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--line-soft); display:flex; flex-direction:column; gap:1px;
}
.row{
  display:flex; align-items:center; gap:.75rem;
  background:var(--surface); color:inherit; text-decoration:none;
  padding:.8rem 1rem; min-height:2.75rem; border:0; width:100%;
  font:inherit; text-align:left; cursor:pointer;
}
.row .l{flex:1; min-width:0}
.row .t{font-size:.9rem; display:block}
.row .d{font-size:.75rem; color:var(--ink-3); display:block; margin-top:.1rem}
.row .v{font-size:.82rem; color:var(--ink-3); white-space:nowrap}
.row .v.act{color:var(--accent); font-weight:700}
.row.danger .t{color:var(--danger); font-weight:700}

/* ── 身分 ── */
.me{display:flex; align-items:center; gap:.9rem; margin-bottom:.5rem}
.me .ring{width:46px; height:46px; border-width:4px; margin:0; flex:none}
.me .n{font-size:1.1rem; font-weight:700; line-height:1.45}
.me .h{font-size:.78rem; color:var(--ink-3); line-height:1.55}

/* ── 門戶 ── */
.back{
  display:inline-flex; align-items:center; min-height:2.75rem;
  color:var(--accent); font-weight:700; font-size:.9rem; text-decoration:none;
}
.stats{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--line-soft); display:flex; flex-direction:column; gap:1px; margin:1rem 0 1.6rem;
}
.stat{background:var(--surface); padding:.9rem 1rem}
.stat dt{font-size:.8rem; color:var(--ink-3); margin:0}
.stat dd{margin:.15rem 0 0; font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums}
.stat.key dd{color:var(--accent)}
.loan{background:var(--surface); border:1px solid var(--line-soft); border-radius:10px; padding:.9rem 1rem}
.loan .top{display:flex; justify-content:space-between; align-items:baseline; gap:.75rem}
.loan .top b{font-size:.9rem}
.loan .top time{font-size:.75rem; color:var(--ink-3)}
.loan .nums{display:flex; margin-top:.6rem}
.loan .nums div{flex:1}
.loan .nums span{display:block; font-size:.72rem; color:var(--ink-3)}
.loan .nums b{font-size:.9rem; font-variant-numeric:tabular-nums}
.loan .nums div:last-child b{color:var(--accent)}

footer{
  margin-top:1.8rem; padding-top:1.1rem; border-top:1px solid var(--line-soft);
  font-size:.75rem; color:var(--ink-3); line-height:1.7; text-align:center;
}
footer b{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}