@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@200;300;400;500;600;700&display=swap');

/* ============================================================
   CA Bank — Mobile UI kit
   设计基准：以设计稿 pt 为坐标，1pt = 0.01rem
   html 字号 = 视口宽 / --dw（设计稿宽度/100），最大 100px
   ============================================================ */

:root {
  --dw: 4.3;

  --green-900: #084d3b;
  --green-800: #0a5c47;
  --green-700: #0f6b52;
  --teal: #009a9c;
  --teal-dark: #00807f;
  --lime: #8dc63f;
  --ink: #333333;
  --ink-2: #4a4a4a;
  --muted: #c9c9c9;
  --muted-2: #9a9a9a;
  --line: #cacaca;
  --paper: #fffdff;
  --paper-2: #ffffff;

  --r-field: .16rem;
  --r-btn: .15rem;
  --r-card: .28rem;
}

html {
  font-size: min(calc(100vw / var(--dw)), 100px);
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: 'Anuphan', 'Noto Sans Thai', 'Leelawadee UI', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  background: #e9efeb;
  display: flex;
  justify-content: center;
  line-height: 1.4;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* ---------------- 屏幕 ---------------- */
.screen {
  position: relative;
  width: 4.3rem;
  max-width: 100vw;
  min-height: 9.32rem;
  background: var(--green-900);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

/* ---------------- 顶部导航 ---------------- */
.nav {
  position: relative;
  display: flex;
  align-items: flex-end;
  flex: none;
  height: 1.18rem;
  padding: 0 .52rem .19rem;
  z-index: 5;
}
.nav--empty { padding: 0; }
/* 统一返回按钮：所有二级页同一个组件 */
.nav__back,
.page-back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: .32rem;
  height: .32rem;
  /* 与标题中线对齐：整体下移 .06rem；水平按设计稿 55/84pt 定位（左移不改标题位置） */
  margin: 0 .09rem -.06rem -.09rem;
  border-radius: 50%;
  color: #fff;
  z-index: 999;
}
.nav__back svg,
.page-back svg { width: .09rem; height: .17rem; }
.nav__back:active,
.page-back:active { background: rgba(255, 255, 255, .18); }
/* 深绿/图片底色上用浮起圆钮，保证可见 */
.page-back--float {
  position: absolute;
  left: .1rem;
  top: var(--back-top, .12rem);
  margin: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--green-900);
  box-shadow: 0 .01rem .06rem rgba(8, 77, 59, .25);
}
.page-back--float:active { background: #fff; }
.nav__title {
  margin: 0;
  font-size: .2rem;
  font-weight: 600;
  letter-spacing: .002rem;
  color: #fff;
  line-height: 1.2;
}

/* ---------------- 白色圆角卡 ---------------- */
.card {
  position: relative;
  flex: 1 0 auto;
  margin-top: 0;
  padding: 0 .52rem .5rem;
  background: var(--paper);
  border-radius: var(--r-card) var(--r-card) 0 0;
  min-height: 7.72rem;
  z-index: 2;
}
.card--flush { padding-left: 0; padding-right: 0; }

.card__head { padding-top: .25rem; }
.card__title {
  margin: 0;
  font-size: .24rem;
  font-weight: 700;
  line-height: .28rem;
  color: var(--teal);
}
.card__sub {
  margin: .06rem 0 0;
  font-size: .12rem;
  font-weight: 400;
  color: var(--ink);
  line-height: .14rem;
}

/* ---------------- 品牌 logo ---------------- */
.brand { width: 1.5rem; margin: .63rem auto .36rem; }

/* ---------------- 表单 ---------------- */
.field {
  position: relative;
  display: flex;
  align-items: center;
  height: .46rem;
  padding: 0 .13rem;
  border: .01rem solid var(--line);
  border-radius: var(--r-field);
  background: #fff;
}
.field + .field { margin-top: .18rem; }
.field input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: .14rem;
  color: var(--ink);
  line-height: 1.2;
}
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input[type='password'] { letter-spacing: .01rem; }
.field__toggle {
  display: flex;
  align-items: center;
  padding: .06rem 0 .06rem .06rem;
  color: var(--muted);
}
.field__chevron {
  flex: none;
  width: .16rem;
  height: .09rem;
  color: var(--muted);
  margin-left: .06rem;
}
.field__icon { flex: none; width: .2rem; height: .2rem; margin-left: .06rem; color: var(--muted); }

.hint-row {
  display: flex;
  justify-content: flex-end;
  margin-top: .11rem;
  font-size: .12rem;
  color: var(--muted);
}
.hint-row--left { justify-content: flex-start; padding-left: .04rem; }

/* ---------------- 按钮 ---------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: .44rem;
  border-radius: var(--r-btn);
  background: var(--teal);
  color: #fff;
  font-size: .16rem;
  font-weight: 500;
  letter-spacing: .002rem;
  transition: filter .18s ease, transform .12s ease;
}
.btn:active { filter: brightness(.94); transform: scale(.995); }
.btn--ghost { background: #eef3f1; color: var(--green-900); }

/* ---------------- 底部文字 ---------------- */
.foot {
  margin: .15rem 0 0;
  text-align: center;
  font-size: .12rem;
  color: var(--ink);
}
.foot a { color: var(--teal); }
.foot a:hover { text-decoration: underline; }

/* ---------------- 底部波浪 ---------------- */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1.52rem;
  z-index: 6;
  pointer-events: none;
  color: var(--green-900);
}
.wave--short { height: 1.4rem; }
.wave--tall { height: 1.6rem; }

/* ---------------- 底部 tabbar ---------------- */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 999;
  width: min(calc(var(--dw, 4.3) * 1rem), 100vw);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(.68rem + env(safe-area-inset-bottom, 0px));
  padding: 0 .34rem env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-radius: .28rem .28rem 0 0;
  box-shadow: 0 -.02rem .18rem rgba(8, 77, 59, .1);
}
/* 有底栏的页面留出安全区，避免内容被遮 */
.screen--tab { padding-bottom: calc(.68rem + env(safe-area-inset-bottom, 0px)); }
.tabbar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: .44rem;
  min-width: .44rem;
  color: #9fb3a9;
}
.tabbar__item svg { width: .24rem; height: .24rem; }
.tabbar__item--active {
  gap: .1rem;
  padding: 0 .16rem;
  border-radius: .22rem;
  background: var(--green-900);
  color: #fff;
}
.tabbar__item--active span { font-size: .13rem; font-weight: 600; white-space: nowrap; }

/* ---------------- 通用小件 ---------------- */
.stroke-icon { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.divider { height: .01rem; background: rgba(0, 0, 0, .06); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------- 交互反馈 ---------------- */
.field__toggle.is-on { color: var(--green-900); }
.upload.is-filled {
  border-color: var(--teal);
  background: rgba(3, 149, 151, .06);
  color: var(--teal);
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.3rem;
  z-index: 999;
  max-width: 76%;
  padding: .11rem .2rem;
  border-radius: .08rem;
  background: rgba(10, 30, 24, .9);
  color: #fff;
  font-size: .14rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, .1rem);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------- 无缝向上滚动（榜单/表格） ---------------- */
@keyframes scroll-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.scroll-up {
  animation: scroll-up var(--scroll-dur, 16s) linear infinite;
  will-change: transform;
}
.scroll-up:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .scroll-up { animation: none; }
}

/* ---- 空状态（新账号无记录时用） ---- */
.empty {
  padding: .34rem 0 .3rem;
  text-align: center;
  color: #8a9a94;
  font-size: .13rem;
  line-height: .18rem;
}
.hist-track .empty { animation: none; padding: .22rem 0; }

/* ---- 刷新按钮（余额旁 / 更新时间旁）：可点、点击旋转动画 ---- */
.refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .05rem;
  margin: -.05rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.refresh-btn svg { display: block; }
.refresh-btn:active { opacity: .55; }
.refresh-btn.is-spinning svg { animation: refresh-spin .65s linear infinite; }
@keyframes refresh-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }