/* HandAction Mobile: a clean, touch-first product surface. */
:root {
  --hm-bg: #07131f;
  --hm-surface: #0e2030;
  --hm-surface-2: #132b40;
  --hm-border: rgba(176, 211, 235, .14);
  --hm-text: #f4f8fb;
  --hm-muted: #8ba2b7;
  --hm-mint: #43e0b0;
  --hm-blue: #79a5ff;
  --hm-red: #ff7189;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.ha-mobile {
  margin: 0;
  color: var(--hm-text);
  background:
    radial-gradient(circle at 8% 0%, rgba(67, 224, 176, .13), transparent 30%),
    radial-gradient(circle at 94% 10%, rgba(121, 165, 255, .14), transparent 32%),
    var(--hm-bg) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
}

.ha-mobile a { color: inherit; text-decoration: none; }
.ha-mobile button, .ha-mobile input { font: inherit; }
.ha-mobile .ha-page { width: 100%; min-height: 100vh; padding-bottom: 92px; }
.ha-mobile .ha-wrap { width: min(100% - 32px, 720px); margin: 0 auto; }

.ha-mobile .ha-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; padding: 12px 16px;
  background: rgba(7, 19, 31, .82);
  border-bottom: 1px solid var(--hm-border);
  backdrop-filter: blur(20px);
}
.ha-mobile .ha-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.03em; }
.ha-mobile .ha-logo {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 11px; color: #06171a; background: linear-gradient(135deg, #8cf4d0, var(--hm-mint));
  box-shadow: 0 8px 24px rgba(67, 224, 176, .24); font-size: 12px; font-weight: 950;
}
.ha-mobile .ha-brand small { display: block; color: var(--hm-muted); font-size: 9px; letter-spacing: .16em; }
.ha-mobile .ha-icon-btn, .ha-mobile .ha-language {
  display: grid; place-items: center; min-width: 38px; min-height: 38px;
  border: 1px solid var(--hm-border); border-radius: 12px; color: var(--hm-text);
  background: rgba(255,255,255,.035); font-weight: 750;
}
.ha-mobile .ha-language { padding: 0 12px; font-size: 12px; }

.ha-mobile .ha-auth { min-height: 100vh; }
.ha-mobile .ha-auth-body { display: grid; gap: 24px; padding: 38px 0 30px; }
.ha-mobile .ha-auth-card {
  padding: 28px 22px 24px; border: 1px solid var(--hm-border); border-radius: 26px;
  background: linear-gradient(150deg, rgba(19,43,64,.96), rgba(10,27,43,.96));
  box-shadow: 0 28px 80px rgba(0,0,0,.25);
}
.ha-mobile .ha-kicker { color: var(--hm-mint); font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.ha-mobile h1 { margin: 9px 0 8px; color: var(--hm-text); font-size: 30px; line-height: 1.1; letter-spacing: -.045em; }
.ha-mobile .ha-lead { margin: 0 0 24px; color: var(--hm-muted); font-size: 14px; line-height: 1.6; }
.ha-mobile .ha-form { display: grid; gap: 14px; }
.ha-mobile .ha-field { display: grid; gap: 7px; }
.ha-mobile .ha-field label { color: #c9d8e5; font-size: 12px; font-weight: 700; }
.ha-mobile .ha-field input {
  width: 100%; min-height: 51px; padding: 0 15px; border: 1px solid var(--hm-border); border-radius: 14px;
  color: var(--hm-text); background: rgba(3, 13, 23, .62); outline: none; transition: .2s ease;
}
.ha-mobile .ha-field input::placeholder { color: #60768a; }
.ha-mobile .ha-field input:focus { border-color: var(--hm-mint); box-shadow: 0 0 0 4px rgba(67,224,176,.1); }
.ha-mobile .ha-primary {
  width: 100%; min-height: 53px; border: 0; border-radius: 14px; color: #06171a;
  background: linear-gradient(110deg, var(--hm-mint), var(--hm-blue)); font-weight: 850; cursor: pointer;
}
.ha-mobile .ha-secondary {
  display: block; width: 100%; padding: 14px; border: 1px solid var(--hm-border); border-radius: 14px;
  color: var(--hm-text); text-align: center; background: rgba(255,255,255,.035); font-weight: 750;
}
.ha-mobile .ha-form-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; color: var(--hm-muted); font-size: 13px; }
.ha-mobile .ha-form-links a:last-child { color: var(--hm-mint); font-weight: 750; }
.ha-mobile .ha-auth-note { display: flex; gap: 10px; align-items: flex-start; color: var(--hm-muted); font-size: 12px; line-height: 1.5; }
.ha-mobile .ha-auth-note b { color: var(--hm-mint); }
.ha-mobile .ha-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; margin: 0 0 18px; border-radius: 13px; background: rgba(0,0,0,.2); }
.ha-mobile .ha-tabs button { min-height: 38px; border: 0; border-radius: 9px; color: var(--hm-muted); background: transparent; cursor: pointer; }
.ha-mobile .ha-tabs button.is-active { color: var(--hm-text); background: var(--hm-surface-2); box-shadow: 0 5px 15px rgba(0,0,0,.18); }

.ha-mobile .ha-market-hero { padding: 24px 0 16px; }
.ha-mobile .ha-market-hero h1 { font-size: 28px; }
.ha-mobile .ha-market-hero p { margin: 0; color: var(--hm-muted); font-size: 13px; }
.ha-mobile .ha-hero-card { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; margin-top: 18px; padding: 18px; border: 1px solid var(--hm-border); border-radius: 20px; background: linear-gradient(135deg, rgba(67,224,176,.16), rgba(121,165,255,.1)); }
.ha-mobile .ha-gold-hero { position: relative; overflow: hidden; border-color: rgba(244, 194, 76, .34); background: linear-gradient(135deg, #453013, #1d2931 58%, #102f3a); }
.ha-mobile .ha-gold-hero::after { content: "XAU"; position: absolute; right: 78px; bottom: -22px; color: rgba(246, 205, 104, .11); font-size: 92px; font-weight: 950; letter-spacing: -.12em; }
.ha-mobile .ha-gold-hero .ha-kicker { color: #f5ca62; }
.ha-mobile .ha-gold-orb { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; border: 2px solid rgba(255, 233, 150, .72); border-radius: 50%; color: #5e4317; background: radial-gradient(circle at 30% 24%, #fffbdc, #f5c956 26%, #bd791e 70%, #6b3d13); box-shadow: 0 12px 28px rgba(246, 190, 70, .3); font-size: 13px; font-weight: 950; }
.ha-mobile .ha-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 12px; padding: 5px; border: 1px solid rgba(136, 173, 197, .17); border-radius: 18px; background: linear-gradient(180deg, rgba(24, 49, 65, .94), rgba(12, 28, 42, .96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.12); }
.ha-mobile .ha-quick-action { position: relative; display: grid; width: 100%; min-width: 0; height: 55px; box-sizing: border-box; align-content: center; justify-items: center; gap: 4px; padding: 5px 2px; overflow: hidden; border: 0; border-right: 1px solid rgba(136, 173, 197, .14); border-radius: 12px; color: var(--hm-text); background: transparent; box-shadow: none; font-size: 10px; transition: transform .18s ease, background .18s ease; }
.ha-mobile .ha-quick-action:last-child { border-right: 0; }
.ha-mobile .ha-quick-action::after { content: ""; position: absolute; right: -18px; bottom: -22px; width: 47px; height: 47px; border-radius: 50%; background: currentColor; opacity: .05; }
.ha-mobile .ha-quick-action:active { transform: translateY(1px) scale(.98); }
.ha-mobile .ha-quick-action:hover { background: rgba(116, 228, 196, .08); }
.ha-mobile .ha-quick-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #082019; background: linear-gradient(145deg, #73e7c3, #2bbf98); box-shadow: 0 4px 9px rgba(45, 209, 166, .14); }
.ha-mobile .ha-quick-icon svg { width: 13px; height: 13px; }
.ha-mobile .ha-quick-label { position: relative; z-index: 1; max-width: 100%; overflow: hidden; font-size: 9.5px; font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.ha-mobile .ha-quick-action small { display: none; }
.ha-mobile .ha-quick-spot .ha-quick-icon { color: #0b2141; background: linear-gradient(145deg, #a9d4ff, #6b9cff); box-shadow: 0 7px 15px rgba(107, 156, 255, .18); }
.ha-mobile .ha-quick-contract .ha-quick-icon { color: #3e2b06; background: linear-gradient(145deg, #ffe39a, #e8ae36); box-shadow: 0 7px 15px rgba(232, 174, 54, .18); }
.ha-mobile .ha-quick-support .ha-quick-icon { color: #27124f; background: linear-gradient(145deg, #d4c2ff, #a884ee); box-shadow: 0 7px 15px rgba(168, 132, 238, .18); }
.ha-mobile .ha-hero-card strong { display: block; margin-top: 4px; font-size: 23px; letter-spacing: -.04em; }
.ha-mobile .ha-hero-card span { color: var(--hm-muted); font-size: 12px; }
.ha-mobile .ha-orb { width: 54px; height: 54px; border-radius: 18px; background: radial-gradient(circle at 30% 25%, #fff, var(--hm-mint) 18%, #258f9c 60%, #14334d); box-shadow: 0 12px 28px rgba(67,224,176,.25); }
.ha-mobile .ha-section-title { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.ha-mobile .ha-section-title h2 { margin: 0; font-size: 17px; letter-spacing: -.025em; }
.ha-mobile .ha-section-title span { color: var(--hm-muted); font-size: 12px; }
.ha-mobile .ha-market { overflow: hidden; border: 1px solid var(--hm-border); border-radius: 20px; background: rgba(14,32,48,.78); }
.ha-mobile .ha-market-head, .ha-mobile .ha-market-row { display: grid; grid-template-columns: minmax(125px, 1.25fr) 1fr .75fr; align-items: center; gap: 8px; padding: 14px 15px; }
.ha-mobile .ha-market-head { color: var(--hm-muted); font-size: 11px; border-bottom: 1px solid var(--hm-border); }
.ha-mobile .ha-market-head span:nth-child(2), .ha-mobile .ha-market-head span:last-child { text-align: right; }
.ha-mobile .ha-market-row { min-height: 72px; border-bottom: 1px solid rgba(176,211,235,.08); transition: background .2s ease; }
.ha-mobile .ha-market-row:last-child { border-bottom: 0; }
.ha-mobile .ha-market-row:hover { background: rgba(255,255,255,.035); }
.ha-mobile .ha-coin { display: flex; align-items: center; min-width: 0; gap: 10px; }
.ha-mobile .ha-coin img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; background: rgba(255,255,255,.08); }
.ha-mobile .ha-coin b { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.ha-mobile .ha-coin small { display: block; margin-top: 3px; color: var(--hm-muted); font-size: 10px; }
.ha-mobile .ha-price, .ha-mobile .ha-change { text-align: right; font-size: 13px; font-weight: 760; }
.ha-mobile .ha-change { color: var(--hm-mint); }
.ha-mobile .ha-change.is-down { color: var(--hm-red); }

.ha-mobile .ha-bottom-nav { position: fixed; right: 12px; bottom: 12px; left: 12px; z-index: 30; display: grid; grid-template-columns: repeat(5,1fr); padding: 8px; border: 1px solid var(--hm-border); border-radius: 20px; background: rgba(13,34,51,.92); box-shadow: 0 16px 42px rgba(0,0,0,.3); backdrop-filter: blur(18px); }
.ha-mobile .ha-bottom-nav a { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border-radius: 13px; color: var(--hm-muted); font-size: 10px; }
.ha-mobile .ha-bottom-nav a.is-active { color: var(--hm-mint); background: rgba(67,224,176,.1); }
.ha-mobile .ha-bottom-nav i { font-size: 17px; font-style: normal; }
.ha-mobile .ha-legal { margin-top: 24px; color: #61798d; text-align: center; font-size: 11px; line-height: 1.5; }

@media (min-width: 640px) {
  .ha-mobile .ha-auth-body { grid-template-columns: minmax(0, 430px) minmax(180px, 260px); align-items: center; justify-content: center; min-height: calc(100vh - 64px); }
  .ha-mobile .ha-auth-aside { display: grid; gap: 10px; }
  .ha-mobile .ha-aside-card { padding: 15px; border: 1px solid var(--hm-border); border-radius: 16px; color: var(--hm-muted); background: rgba(14,32,48,.65); font-size: 12px; line-height: 1.45; }
}
@media (max-width: 639px) { .ha-mobile .ha-auth-aside { display: none; } }