/* =============================================
   Exchange UI v2 — Base Reset & Utilities
   ============================================= */

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'PingFang SC',
               'Microsoft YaHei', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg-page);
  color: var(--t1);
  height: 100%;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
button { border: none; outline: none; cursor: pointer; font-family: inherit; font-size: inherit; background: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-family: inherit; font-size: inherit; outline: none; border: none; -webkit-appearance: none; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }
svg { flex-shrink: 0; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }

/* ── Layout ── */
#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 540px;
  margin: 0 auto;
  position: relative;
  /*overflow: hidden;*/
}

/* ── Typography ── */
.text-t1  { color: var(--t1); }
.text-t2  { color: var(--t2); }
.text-t3  { color: var(--t3); }
.text-up   { color: var(--up); }
.text-down { color: var(--down); }
.text-accent  { color: var(--accent); }
.text-warn    { color: var(--warn); }
.text-info    { color: var(--info); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-left    { text-align: left; }

/* Font sizes */
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-15 { font-size: 15px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }

/* Font weights */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ── Flex ── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.flex-auto    { flex: 1 1 auto; min-width: 0; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.justify-end  { justify-content: flex-end; }

/* Gaps */
.gap-2  { gap: 2px; }
.gap-4  { gap: 4px; }
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }

/* ── Spacing ── */
.m-0  { margin: 0; }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.ml-4  { margin-left: 4px; }
.ml-8  { margin-left: 8px; }
.mr-4  { margin-right: 4px; }
.mr-8  { margin-right: 8px; }

.p-0   { padding: 0; }
.p-8   { padding: 8px; }
.p-12  { padding: 12px; }
.p-16  { padding: 16px; }
.p-20  { padding: 20px; }
.px-8  { padding-left: 8px; padding-right: 8px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-4  { padding-top: 4px; padding-bottom: 4px; }
.py-6  { padding-top: 6px; padding-bottom: 6px; }
.py-8  { padding-top: 8px; padding-bottom: 8px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }

/* ── Sizes ── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-w-0 { min-width: 0; }

/* ── Misc ── */
.hidden    { display: none !important; }
.invisible { visibility: hidden; }
.pointer   { cursor: pointer; }
.select-none { user-select: none; -webkit-user-select: none; }
.relative  { position: relative; }
.overflow-hidden { overflow: hidden; }
.rounded-4   { border-radius: 4px; }
.rounded-6   { border-radius: 6px; }
.rounded-8   { border-radius: 8px; }
.rounded-12  { border-radius: 12px; }
.rounded-full { border-radius: 50%; }

/* ── Background shortcuts ── */
.bg-card    { background: var(--bg-card); }
.bg-surface { background: var(--bg-surface); }
.bg-up      { background: var(--up-bg); }
.bg-down    { background: var(--down-bg); }
.bg-accent  { background: var(--accent-dim); }

/* ── Divider ── */
.divider {
  height: 1px;
  background: var(--divider);
  margin: 0;
}
.divider-v {
  width: 1px;
  background: var(--divider);
  align-self: stretch;
}

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { transform: translateX(-50%) translateY(100%); }
  to   { transform: translateX(-50%) translateY(0); }
}
@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-hover) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px;
}

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.badge-up      { background: var(--up-bg);    color: var(--up); }
.badge-down    { background: var(--down-bg);  color: var(--down); }
.badge-accent  { background: var(--accent-dim); color: var(--accent-text); }
.badge-warn    { background: var(--warn-bg);  color: var(--warn); }
.badge-info    { background: var(--info-bg);  color: var(--info); }
.badge-surface { background: var(--bg-surface); color: var(--t2); }