<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { storeToRefs } from 'pinia'
import { useBrokerStore, truncate4, maskEmail } from '@/stores/broker'
import type { RewardSetItem } from '@/stores/broker'
import { useToast } from '@/composables/useToast'

const { t } = useI18n()
const store = useBrokerStore()
const {
  info, infoLoading, infoError,
  todayRewards, rewardsLoading,
  rewardSetList, setListLoading,
  teamAsset, teamLoading,
  rewardHistory, historyLoading, historyHasMore,
  editTarget, editLoading, editError,
} = storeToRefs(store)
const toast = useToast()

// 显示名（优先级：nickName → agentName → email → username）
const displayName = computed(() => {
  const i = info.value
  if (!i) return t('broker.defaultName')
  const name = (i.nickName ?? i.agentName ?? i.email ?? i.username ?? t('broker.defaultName')).trim()
  return name || t('broker.defaultName')
})

const maskedEmail = computed(() => maskEmail(info.value?.email ?? info.value?.username ?? ''))
const uid = computed(() => info.value?.id ?? '--')
const todayNew = computed(() => String(info.value?.todayNewUserCount ?? 0))
const todayTrade = computed(() => String(info.value?.todayOrderUserCount ?? 0))
const todayAward = computed(() => truncate4(info.value?.todayAward))

const teamAssetFmt = computed(() => {
  const n = parseFloat(teamAsset.value)
  return isNaN(n) ? '0.00' : n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
})

onMounted(() => {
  store.loadAll().catch(() => {
    toast.error(store.infoError ?? t('common.loadFailed'))
  })
  store.fetchRewardHistory(true)
})

// ── 团队详情日期筛选 ──────────────────────────────────────
type DateFilter = 'all' | 'week' | 'today' | 'month'
const teamFilter = ref<DateFilter>('all')

function getEndDate(f: DateFilter): string | undefined {
  const now = new Date()
  const pad = (n: number) => String(n).padStart(2, '0')
  const fmt = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
  if (f === 'today') return fmt(now)
  if (f === 'week') {
    const d = new Date(now)
    d.setDate(d.getDate() - 7)
    return fmt(d)
  }
  if (f === 'month') {
    return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-01`
  }
  return undefined
}

async function setTeamFilter(f: DateFilter) {
  teamFilter.value = f
  await store.fetchTeamStat(getEndDate(f))
}

// ── 返佣比例编辑 ──────────────────────────────────────────
const editRateVal = ref('')
const editFollowRateVal = ref('')

function openEdit(item: RewardSetItem) {
  store.openEdit(item)
  editRateVal.value = String(item.rate ?? '0').replace('%', '')
  editFollowRateVal.value = String(item.followRate ?? '')
}

async function submitEdit() {
  if (!editTarget.value) return
  // number 型 input 的 v-model 可能为 number，与 App 一致先转字符串再 trim/parse
  const rateRaw = String(editRateVal.value ?? '').trim()
  const r = parseInt(rateRaw, 10)
  if (Number.isNaN(r) || r < 0 || r > 100) {
    toast.error(t('broker.perpRateError'))
    return
  }
  const followRaw = String(editFollowRateVal.value ?? '').trim()
  const frParsed = followRaw ? parseInt(followRaw, 10) : undefined
  const fr = frParsed !== undefined && !Number.isNaN(frParsed) ? frParsed : undefined
  if (followRaw !== '' && (fr === undefined || fr < 0 || fr > 100)) {
    toast.error(t('broker.copyRateError'))
    return
  }
  try {
    await store.submitEditRate(editTarget.value.id, r, fr)
    toast.success(t('broker.setSuccess'))
  } catch {
    // editError 已由 store 设置
  }
}

// ── 列表项辅助 ────────────────────────────────────────────
function levelLabel(item: RewardSetItem) {
  return item.superPartner === '1' ? t('broker.levelBroker') : t('broker.levelNormal')
}

const teamFilterLabels: Record<DateFilter, string> = {
  all: 'broker.filterAll',
  week: 'broker.filterWeek',
  today: 'broker.filterToday',
  month: 'broker.filterMonth',
}
function teamFilterLabel(f: DateFilter) {
  return t(teamFilterLabels[f])
}
function rateStr(item: RewardSetItem) {
  return `${item.rate ?? 0}%`
}
function followRateStr(item: RewardSetItem) {
  const fr = item.followRate
  if (fr === undefined || fr === null || fr === '') {
    return '--'
  }
  const n = Number(fr)
  if (Number.isNaN(n)) {
    return '--'
  }
  return `${n}%`
}

function maskName(name: string | undefined): string {
  if (!name) return '--'
  if (name.includes('@')) {
    const at = name.indexOf('@')
    if (at > 1) return `${name[0]}**${name.slice(at)}`
    return name
  }
  if (name.length > 4) return `${name.slice(0, 3)}****${name.slice(-2)}`
  return name
}
</script>

<template>
  <main class="page-main">
    <div class="page-container content">
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <RouterLink to="/" class="bc-link">{{ t('nav.home') }}</RouterLink>
        <span class="bc-sep">›</span>
        <span>{{ t('header.broker') }}</span>
      </div>

      <div v-if="infoLoading && !info" class="loading-center">
        <div class="spinner" />
      </div>

      <div v-else-if="infoError && !info" class="error-card dark-card">
        <p>{{ infoError }}</p>
        <button class="retry-btn" @click="store.fetchInfo()">{{ t('common.retry') }}</button>
      </div>

      <template v-else>
        <!-- ── 欢迎卡片 ── -->
        <div class="welcome-card dark-card">
          <div class="wc-avatar">{{ displayName[0]?.toUpperCase() }}</div>
          <div class="wc-info">
            <h1 class="wc-greeting">{{ t('broker.greeting', { name: displayName }) }}</h1>
            <div class="wc-meta">
              <span class="wc-meta-item">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 7 10-7"/></svg>
                {{ maskedEmail }}
              </span>
              <span class="wc-meta-item">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                {{ t('broker.uidLabel', { uid }) }}
              </span>
            </div>
          </div>
        </div>

        <!-- ── 提示横幅 ── -->
        <div class="intro-banner">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4m0-4h.01"/></svg>
          <p>{{ t('broker.introBanner') }}</p>
        </div>

        <!-- ── 统计三卡 ── -->
        <div class="stats-row">
          <div class="stat-card dark-card">
            <div class="stat-icon green">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div class="stat-body">
              <p class="stat-label">{{ t('broker.statNewToday') }}</p>
              <p class="stat-value up">{{ todayNew }}</p>
            </div>
          </div>
          <div class="stat-card dark-card">
            <div class="stat-icon blue">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
            </div>
            <div class="stat-body">
              <p class="stat-label">{{ t('broker.statTradeToday') }}</p>
              <p class="stat-value">{{ todayTrade }}</p>
            </div>
          </div>
          <div class="stat-card dark-card">
            <div class="stat-icon gold">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/></svg>
            </div>
            <div class="stat-body">
              <p class="stat-label">{{ t('broker.statRebateToday') }}</p>
              <p class="stat-value primary">{{ todayAward }}</p>
            </div>
          </div>
        </div>

        <!-- ── 主内容三栏 ── -->
        <div class="main-grid">

          <!-- 邀请列表（返佣比例设置） -->
          <div class="panel dark-card">
            <div class="panel-header">
              <h3 class="panel-title">{{ t('broker.inviteList') }}</h3>
            </div>
            <div v-if="setListLoading && !rewardSetList.length" class="panel-loading">
              <div class="spinner sm" />
            </div>
            <template v-else>
              <div v-if="!rewardSetList.length" class="panel-empty">{{ t('broker.emptyInviteList') }}</div>
              <table v-else class="data-table">
                <thead>
                  <tr>
                    <th>{{ t('broker.thAccount') }}</th>
                    <th>{{ t('broker.thLevel') }}</th>
                    <th>{{ t('broker.thPerpCopy') }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in rewardSetList" :key="item.id">
                    <td><span class="uid-badge">{{ item.id }}</span></td>
                    <td>
                      <span class="level-badge" :class="item.superPartner === '1' ? 'broker' : 'normal'">
                        {{ levelLabel(item) }}
                      </span>
                    </td>
                    <td>
                      <div class="ratio-cell">
                        <span class="ratio-text">{{ rateStr(item) }} / {{ followRateStr(item) }}</span>
                        <button class="edit-btn" :title="t('broker.editRateTooltip')" @click="openEdit(item)">
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </template>
          </div>

          <!-- 今日返佣列表 -->
          <div class="panel dark-card">
            <div class="panel-header">
              <h3 class="panel-title">{{ t('broker.todayRebate') }}</h3>
            </div>
            <div v-if="rewardsLoading && !todayRewards.length" class="panel-loading">
              <div class="spinner sm" />
            </div>
            <template v-else>
              <div v-if="!todayRewards.length" class="panel-empty">{{ t('broker.emptyTodayRebate') }}</div>
              <table v-else class="data-table">
                <thead>
                  <tr>
                    <th>{{ t('broker.thAccount') }}</th>
                    <th>{{ t('broker.thId') }}</th>
                    <th class="right">{{ t('broker.rebateUsdt') }}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(r, i) in todayRewards" :key="i">
                    <td>{{ maskName(r.username) }}</td>
                    <td class="muted">{{ r.memberId }}</td>
                    <td class="right primary-text">+{{ truncate4(r.num) }}</td>
                  </tr>
                </tbody>
              </table>
            </template>
          </div>

          <!-- 团队明细 -->
          <div class="panel dark-card">
            <div class="panel-header">
              <h3 class="panel-title">{{ t('broker.teamDetails') }}</h3>
            </div>
            <div class="team-filters">
              <button v-for="f in (['all','week','today','month'] as const)" :key="f" class="tf-btn" :class="{ active: teamFilter === f }" @click="setTeamFilter(f)">
                {{ teamFilterLabel(f) }}
              </button>
            </div>
            <div v-if="teamLoading" class="panel-loading"><div class="spinner sm" /></div>
            <div v-else class="team-asset-card">
              <p class="team-asset-label">{{ t('broker.teamTotalAssets') }}</p>
              <p class="team-asset-value">{{ teamAssetFmt }} <span class="team-asset-unit">USDT</span></p>
            </div>
          </div>

        </div>

        <!-- ── 返佣历史记录 ── -->
        <div class="panel dark-card" style="margin-top: var(--space-5);">
          <div class="panel-header">
            <h3 class="panel-title">{{ t('broker.rebateHistory') }}</h3>
          </div>
          <div v-if="historyLoading && !rewardHistory.length" class="panel-loading">
            <div class="spinner sm" />
          </div>
          <template v-else>
            <div v-if="!rewardHistory.length" class="panel-empty">{{ t('broker.emptyRebateHistory') }}</div>
            <table v-else class="data-table">
              <thead>
                <tr>
                  <th>{{ t('broker.thAccount') }}</th>
                  <th>{{ t('broker.thId') }}</th>
                  <th class="right">{{ t('broker.amountUsdt') }}</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(r, i) in rewardHistory" :key="i">
                  <td>{{ maskName(r.username) }}</td>
                  <td class="muted">{{ r.memberId }}</td>
                  <td class="right primary-text">+{{ truncate4(r.num) }}</td>
                </tr>
              </tbody>
            </table>
            <div class="load-more-row">
              <button v-if="historyHasMore" class="load-more-btn" :disabled="historyLoading" @click="store.fetchRewardHistory()">
                {{ historyLoading ? t('broker.loadingMore') : t('broker.loadMore') }}
              </button>
              <p v-else-if="rewardHistory.length" class="no-more">{{ t('broker.loadedAll') }}</p>
            </div>
          </template>
        </div>

      </template>
    </div>

    <!-- ── 编辑返佣比例弹窗 ── -->
    <Teleport to="body">
      <div v-if="editTarget" class="modal-overlay" @click.self="store.closeEdit()">
        <div class="modal dark-card">
          <div class="modal-header">
            <div>
              <p class="modal-sup">{{ t('broker.editModalTitle') }}</p>
              <p class="modal-uid">{{ editTarget.memberId ?? editTarget.id }}</p>
            </div>
            <button class="modal-close" @click="store.closeEdit()">✕</button>
          </div>

          <div class="rate-input-wrap">
            <label class="rate-label">{{ t('broker.perpRebateRate') }}</label>
            <div class="rate-field">
              <input
                v-model="editRateVal"
                type="number"
                min="0"
                max="100"
                class="rate-input"
                placeholder="0"
              />
              <span class="rate-unit">%</span>
            </div>
          </div>

          <div class="rate-input-wrap">
            <label class="rate-label">{{ t('broker.copyRebateRate') }}</label>
            <div class="rate-field">
              <input
                v-model="editFollowRateVal"
                type="number"
                min="0"
                max="100"
                class="rate-input"
                placeholder="0"
              />
              <span class="rate-unit">%</span>
            </div>
          </div>

          <p class="rate-tip">{{ t('broker.editTip') }}</p>
          <p v-if="editError" class="form-error">{{ editError }}</p>

          <div class="modal-actions">
            <button class="btn-cancel" @click="store.closeEdit()">{{ t('common.cancel') }}</button>
            <button class="btn-confirm" :disabled="editLoading" @click="submitEdit">
              {{ editLoading ? t('common.loading') : t('common.save') }}
            </button>
          </div>
        </div>
      </div>
    </Teleport>
  </main>
</template>

<style scoped>
.content {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  max-width: 1100px;
}

/* ── 面包屑 ── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.bc-link { color: var(--color-text-secondary); text-decoration: none; }
.bc-link:hover { color: var(--color-primary); }
.bc-sep { color: var(--color-text-muted); }

/* ── Loading / Error ── */
.loading-center { display: flex; justify-content: center; padding: var(--space-16); }
.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: spin .8s linear infinite;
}
.spinner.sm { width: 20px; height: 20px; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-card { padding: var(--space-8); text-align: center; color: var(--color-text-secondary); }
.retry-btn { margin-top: var(--space-4); background: transparent; border: 1px solid var(--color-primary); border-radius: var(--radius-md); color: var(--color-primary); padding: var(--space-2) var(--space-5); cursor: pointer; }

/* ── 欢迎卡片 ── */
.welcome-card {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.wc-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-primary); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.wc-greeting {
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.wc-meta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.wc-meta-item {
  display: flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-small); color: var(--color-text-secondary);
}

/* ── 提示横幅 ── */
.intro-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: rgba(240,185,11,.08);
  border: 1px solid rgba(240,185,11,.25);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.intro-banner svg { flex-shrink: 0; color: var(--color-primary); margin-top: 2px; }

/* ── 统计三卡 ── */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.stat-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.stat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-icon.green { background: rgba(14,203,129,.1); color: var(--color-up); }
.stat-icon.blue  { background: rgba(24,144,255,.1);  color: #1890ff; }
.stat-icon.gold  { background: rgba(240,185,11,.1);  color: var(--color-primary); }
.stat-label { font-size: var(--text-small); color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.stat-value { font-size: 22px; font-weight: var(--fw-bold); color: var(--color-text-primary); font-family: var(--font-family-num); }
.stat-value.up      { color: var(--color-up); }
.stat-value.primary { color: var(--color-primary); }

/* ── 主内容三栏 ── */
.main-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }

/* ── 面板通用 ── */
.panel { padding: var(--space-5); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.panel-title { font-size: var(--text-body); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.panel-loading { display: flex; justify-content: center; padding: var(--space-8); }
.panel-empty { text-align: center; padding: var(--space-8) 0; color: var(--color-text-muted); font-size: var(--text-small); }

/* ── 数据表格 ── */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.data-table th {
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
  font-size: var(--text-caption);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}
.data-table td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--color-text-primary);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-bg-card-hover); }
.right { text-align: right; }
.muted { color: var(--color-text-muted) !important; }
.primary-text { color: var(--color-primary); font-weight: var(--fw-medium); }

.uid-badge {
  font-family: var(--font-family-num);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}
.level-badge {
  font-size: var(--text-caption);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
}
.level-badge.broker { background: rgba(240,185,11,.15); color: var(--color-primary); }
.level-badge.normal { background: var(--color-bg-card); color: var(--color-text-muted); }

.ratio-cell { display: flex; align-items: center; gap: var(--space-2); }
.ratio-text { font-family: var(--font-family-num); font-size: var(--text-caption); color: var(--color-text-secondary); }
.edit-btn {
  background: transparent; border: 1px solid rgba(240,185,11,.4);
  border-radius: var(--radius-sm); padding: 3px 6px;
  color: var(--color-primary); cursor: pointer;
  display: flex; align-items: center;
  transition: background var(--transition);
}
.edit-btn:hover { background: rgba(240,185,11,.1); }

/* ── 团队明细 ── */
.team-filters { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.tf-btn {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  cursor: pointer;
  transition: all var(--transition);
}
.tf-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tf-btn.active { background: rgba(240,185,11,.1); border-color: var(--color-primary); color: var(--color-primary); }
.team-asset-card { text-align: center; padding: var(--space-6) 0; }
.team-asset-label { font-size: var(--text-small); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.team-asset-value { font-size: 28px; font-weight: var(--fw-bold); font-family: var(--font-family-num); color: var(--color-text-primary); }
.team-asset-unit { font-size: var(--text-body); font-weight: var(--fw-normal); color: var(--color-text-secondary); }

/* ── 加载更多 ── */
.load-more-row { text-align: center; padding: var(--space-4) 0; }
.load-more-btn { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); padding: var(--space-2) var(--space-8); cursor: pointer; font-size: var(--text-small); }
.load-more-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.load-more-btn:disabled { opacity: .5; cursor: not-allowed; }
.no-more { font-size: var(--text-caption); color: var(--color-text-muted); }

/* ── 编辑弹窗 ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { width: 420px; max-width: calc(100vw - var(--space-8)); padding: var(--space-6); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); }
.modal-sup { font-size: var(--text-small); color: var(--color-text-secondary); margin-bottom: 4px; }
.modal-uid { font-size: 20px; font-weight: var(--fw-bold); color: var(--color-text-primary); font-family: var(--font-family-num); }
.modal-close { background: none; border: none; color: var(--color-text-muted); font-size: 18px; cursor: pointer; flex-shrink: 0; }
.rate-input-wrap { margin-bottom: var(--space-4); }
.rate-label { display: block; font-size: var(--text-small); color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.rate-field {
  display: flex; align-items: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rate-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--color-text-primary); font-size: 18px; font-weight: var(--fw-semibold);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family-num);
}
.rate-unit {
  background: rgba(255,255,255,.06);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  border-left: 1px solid var(--color-border);
}
.rate-tip { font-size: var(--text-caption); color: var(--color-text-muted); margin-bottom: var(--space-5); line-height: 1.5; }
.form-error { font-size: var(--text-small); color: var(--color-down); margin-bottom: var(--space-4); }
.modal-actions { display: flex; gap: var(--space-3); }
.btn-cancel { flex: 1; padding: var(--space-3); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; }
.btn-confirm { flex: 2; padding: var(--space-3); background: var(--color-primary); border: none; border-radius: var(--radius-md); color: #000; font-weight: var(--fw-semibold); cursor: pointer; }
.btn-confirm:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 1024px) {
  .main-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .stats-row { grid-template-columns: 1fr; }
  .main-grid { grid-template-columns: 1fr; }
  .welcome-card { flex-direction: column; align-items: flex-start; }
}
</style>
