/* USDT Storage Center — theme.css
 * Mobile-first. Desktop enhancements at min-width:768px.
 * 兼容旧的 .btn / .card / .weui-tabbar 等类（admin 页面在用）.
 */

:root {
  /* Brand */
  --primary-bg:   #08091A;
  --secondary-bg: #161748;
  --card-bg:      rgba(30, 58, 138, 0.10);

  /* Accent */
  --accent-green: #4AB985;
  --accent-green-hover: #3A9F70;
  --accent-gold:  #F59E0B;
  --accent-red:   #B73856;
  --accent-blue:  #3B82F6;
  --accent-purple:#7E36B9;

  /* Text */
  --text-primary:   #F9FAFB;
  --text-secondary: #9CA3AF;
  --text-disabled:  #6B7280;

  /* Surfaces */
  --gradient-main: linear-gradient(60.66deg, #08091A 7.88%, #08091A 10.72%, #161748 92.12%);
  --gradient-card: linear-gradient(135deg, rgba(30,58,138,.20) 0%, rgba(74,185,133,.10) 100%);

  /* Border / shadow */
  --border-color: rgba(255, 255, 255, 0.10);
  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.10);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.10);
  --shadow-glow: 0 0 20px rgba(74,185,133,.30);

  /* Layout */
  --tabbar-h: 3.5rem;
  --safe-bottom: env(safe-area-inset-bottom, 0);
  --header-h: 3rem;
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html[dir="rtl"] { direction: rtl; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  background: var(--gradient-main);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  font-size: 0.9375rem;
  overscroll-behavior-y: contain;
}

/* RTL fixes for Arabic */
html[dir="rtl"] .back-button svg { transform: scaleX(-1); }
html[dir="rtl"] .nav-arrow { transform: scaleX(-1); }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ========== Layout containers ========== */
.container {
  max-width: 750px;
  margin: 0 auto;
  padding: 0 1rem;
}
.app-page { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 1rem); }

/* ========== App header (top) ========== */
.app-header,
.header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  min-height: var(--header-h);
  background: rgba(8, 9, 26, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-color);
}
.app-header__title,
.logo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  text-align: center;
}
.app-header__btn,
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  padding: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
}
.app-header__btn--right { margin-inline-start: auto; }
.app-header__back { display: inline-flex; align-items: center; gap: .25rem; }

/* ========== Bottom tabbar ========== */
.weui-tabbar,
.app-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  background: rgba(8, 9, 26, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-color);
  padding: 0.4rem 0 var(--safe-bottom);
  z-index: 100;
}
.weui-tabbar__item,
.app-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .35rem 0;
  color: var(--text-secondary);
  font-size: .72rem;
  text-decoration: none;
  min-height: 48px;
}
.weui-tabbar__item.active,
.app-tabbar__item.active { color: var(--accent-green); }
.weui-tabbar__icon,
.app-tabbar__icon { width: 1.4rem; height: 1.4rem; }
.weui-tabbar__label,
.app-tabbar__label { font-size: .72rem; line-height: 1; }

/* ========== Cards ========== */
.card,
.app-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.card-gradient,
.app-card--gradient {
  background: var(--gradient-card);
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ========== Buttons ========== */
.btn, .app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .1s;
  text-decoration: none;
  min-height: 44px;
}
.btn:active, .app-btn:active { transform: scale(0.98); }
.btn-block, .app-btn--block { display: flex; width: 100%; }

.btn-primary, .app-btn--primary {
  background: var(--accent-green);
  color: #fff;
}
.btn-primary:hover, .app-btn--primary:hover { background: var(--accent-green-hover); box-shadow: var(--shadow-glow); }

.btn-secondary, .app-btn--secondary {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px solid var(--border-color);
}
.btn-secondary:hover, .app-btn--secondary:hover { background: rgba(255,255,255,.16); }

.btn-gold, .app-btn--gold { background: var(--accent-gold); color: #fff; }
.btn-gold:hover, .app-btn--gold:hover { background: #D97706; }

.btn-danger, .app-btn--danger { background: var(--accent-red); color: #fff; }
.btn-danger:hover, .app-btn--danger:hover { background: #9F2C49; }

.btn-ghost, .app-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* ========== Inputs ========== */
.input-box, .app-input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  color: var(--text-primary);
  font-size: 1rem;
  min-height: 48px;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.input-box:focus, .app-input:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 0 3px rgba(74,185,133,.15);
}
.input-box::placeholder, .app-input::placeholder { color: var(--text-disabled); }

.app-input-group {
  position: relative;
  margin-bottom: 1.2rem;
}
.app-input-group__label {
  display: block;
  margin-bottom: .35rem;
  font-size: .85rem;
  color: var(--text-secondary);
}
.app-input-group__suffix {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.75rem;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-size: .85rem;
  cursor: pointer;
}

/* ========== Balance / numbers ========== */
.balance-display {
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  font-weight: 700;
  color: var(--accent-green);
  text-shadow: 0 0 10px rgba(74,185,133,.30);
  word-break: break-all;
}

/* ========== Misc ========== */
.vip-badge {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  background: var(--accent-gold);
  color: #fff;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
}
.tag-record {
  display: inline-block;
  padding: .15rem .45rem;
  font-size: .7rem;
  border-radius: .25rem;
  background: rgba(74,185,133,.20);
  color: var(--accent-green);
}

/* ========== Flex / spacing utilities (兼容旧版) ========== */
.flex          { display: flex; }
.flex-between  { justify-content: space-between; }
.flex-center   { justify-content: center; }
.align-center  { align-items: center; }
.text-center   { text-align: center; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.p-1{padding:.5rem}.p-2{padding:1rem}.p-3{padding:1.5rem}.p-4{padding:2rem}
.text-green { color: var(--accent-green); }
.text-gold  { color: var(--accent-gold); }
.text-red   { color: var(--accent-red); }
.text-secondary { color: var(--text-secondary); }

/* ========== Modal mask (small + bottom-sheet) ========== */
.modal-mask {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-box {
  background: #130E1D;
  border-radius: 1rem 1rem 0 0;
  padding: 1.25rem;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 -4px 20px rgba(126,54,185,.5);
}

/* ========== Responsive — desktop enhancement ========== */
@media (min-width: 768px) {
  body { font-size: 1rem; }
  .container { padding: 0 1.5rem; }
  .app-tabbar { max-width: 750px; left: 50%; transform: translateX(-50%); border-radius: 1rem 1rem 0 0; }
  .modal-mask { align-items: center; }
  .modal-box { border-radius: 1rem; max-width: 480px; }
}

/* ========== iOS safe-area ========== */
@supports (padding: max(0px)) {
  .app-tabbar { padding-bottom: max(var(--safe-bottom), 0.4rem); }
}

/* ========== Arabic / RTL comprehensive support ========== */
/* 关键原则：Logical Properties 优先；方向性图标镜像；数字保持 LTR */

html[dir="rtl"] body {
  /* 阿拉伯排版字体回退 */
  font-family: 'Segoe UI', Tahoma, 'Geeza Pro', 'Damascus', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* 所有方向性图标镜像 */
html[dir="rtl"] .back-button svg,
html[dir="rtl"] .nav-arrow,
html[dir="rtl"] .app-header__back svg,
html[dir="rtl"] .uc-list-arrow,
html[dir="rtl"] .pg-header__back svg,
html[dir="rtl"] .arrow-right,
html[dir="rtl"] [class*="left-arrow"] svg,
html[dir="rtl"] [class*="back"] > svg:first-child {
  transform: scaleX(-1);
}

/* 列表项 chevron 在 RTL 下指向左 */
html[dir="rtl"] .uc-list-arrow,
html[dir="rtl"] .list-arrow {
  transform: scaleX(-1);
}

/* 数字 / 价格 / 金额始终保持 LTR 显示（防止数字方向被翻转） */
html[dir="rtl"] .idx-market__price,
html[dir="rtl"] .idx-market__change,
html[dir="rtl"] .balance-display,
html[dir="rtl"] .uc-asset__val,
html[dir="rtl"] .invest-rate-num,
html[dir="rtl"] [class*="amount"],
html[dir="rtl"] [class*="balance"],
html[dir="rtl"] [class*="price"],
html[dir="rtl"] [data-i18n-numeric] {
  direction: ltr;
  unicode-bidi: embed;
}

/* 行情表行内 — coin name + price 行 — 全行为 LTR，因为含币种符号和数字 */
html[dir="rtl"] .idx-market__row {
  direction: ltr;
}
html[dir="rtl"] .idx-market__row .idx-market__coin-name,
html[dir="rtl"] .idx-market__row .idx-market__coin-sub {
  text-align: start;
}

/* tabbar - 让标签保持原 LTR 顺序（home/trade/transfer/me），不应反转 */
html[dir="rtl"] .weui-tabbar,
html[dir="rtl"] .app-tabbar {
  direction: ltr;
}
html[dir="rtl"] .weui-tabbar__item,
html[dir="rtl"] .app-tabbar__item {
  direction: rtl; /* 但每个 item 内部文字仍 RTL */
}

/* header — 三段式（左 / 中 / 右）在 RTL 下保持视觉左右一致（语言按钮在视觉右侧、设置按钮也在视觉右侧的位置交换） */
html[dir="rtl"] .app-header,
html[dir="rtl"] .header-wrap,
html[dir="rtl"] .uc-header {
  /* flex 默认 row 会自动按 direction 反转，所以左侧元素现在视觉到右侧。这是期望的 */
}

/* 按钮内 icon + 文字间距方向 */
html[dir="rtl"] .app-header__btn,
html[dir="rtl"] .lang-btn,
html[dir="rtl"] .uc-header__lang {
  flex-direction: row; /* 不强制 reverse，让 flex 自动处理 */
}

/* 输入框 + suffix（max 等） — start/end 自动适配 */
html[dir="rtl"] .app-input-group__suffix {
  inset-inline-end: 0.75rem; /* 已经用 logical，无需重写 */
}

/* 提示与小标签：保留对齐方向适应 */
html[dir="rtl"] .uc-list-item,
html[dir="rtl"] .vip-item,
html[dir="rtl"] .modal-box {
  text-align: start;
}

/* margin-bottom / padding 等 block-axis 属性 RTL 不变 */

/* 修复某些三方 inline style 用了 left/right 时的兜底 */
html[dir="rtl"] [style*="margin-left:auto"] {
  margin-left: 0 !important;
  margin-right: auto !important;
}
html[dir="rtl"] [style*="text-align:left"] { text-align: right !important; }
html[dir="rtl"] [style*="text-align:right"] { text-align: left !important; }

/* 周期 chip 横滚 - 内容方向跟随，但 scroll 开始点正确 */
html[dir="rtl"] .period-grid,
html[dir="rtl"] [class*="chip-row"],
html[dir="rtl"] .coin-chips {
  direction: rtl;
}