/* ═══════════════ VARIABLES ═══════════════ */
:root {
  --bg:     #030c18;
  --bg2:    #071223;
  --bg3:    #0d1d35;
  --card:   rgba(11,24,46,0.92);
  --card2:  rgba(15,32,60,0.75);
  --border: rgba(55,130,210,0.14);
  --border2:rgba(55,130,210,0.28);
  --cyan:   #41b8f5;
  --cyan2:  #1e7fd8;
  --green:  #1ed98a;
  --gold:   #f5c438;
  --purple: #9a6bff;
  --red:    #ff5577;
  --orange: #ff8844;
  --text:   #c0d8ee;
  --text2:  #6488af;
  --text3:  #364e6a;
  --font-head: 'Orbitron', sans-serif;
  --font-body: 'Rajdhani', sans-serif;
  --glow:  0 0 18px rgba(65,184,245,0.28);
  --glow2: 0 0 36px rgba(65,184,245,0.16);
  --r:     14px;
}

/* ═══════════════ RESET ═══════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select { font-family: inherit; }
.hidden { display: none !important; }

/* ═══════════════ STARS ═══════════════ */
.stars, .stars-bg {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.star {
  position: absolute; border-radius: 50%;
  animation: twinkle var(--d, 3s) ease-in-out infinite var(--delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--op, 0.3); transform: scale(1); }
  50%       { opacity: 1; transform: scale(1.4); }
}

/* ═══════════════ SPLASH ═══════════════ */
#splash {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #071428 0%, #030912 60%, #010509 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
#splash.fade-out { opacity: 0; transform: scale(1.04); pointer-events: none; }

.splash-content {
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 2;
}
.logo-wrap {
  width: 180px; height: 180px; display: flex; align-items: center; justify-content: center;
  position: relative; margin-bottom: 24px;
}
.logo-svg {
  width: 180px; height: 180px;
  filter: drop-shadow(0 0 16px rgba(65,184,245,0.5));
  animation: logoFloat 3s ease-in-out infinite, logoPulse 4s ease-in-out infinite;
}
.logo-glow {
  position: absolute; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, rgba(65,184,245,0.14) 0%, transparent 70%);
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes logoPulse { 0%,100%{filter:drop-shadow(0 0 16px rgba(65,184,245,0.5))} 50%{filter:drop-shadow(0 0 26px rgba(65,184,245,0.8))} }
@keyframes glowPulse { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.3);opacity:1} }

.splash-title {
  font-family: var(--font-head); font-size: 42px; font-weight: 900;
  letter-spacing: 6px; line-height: 1; margin-bottom: 8px;
}
.splash-title .t1 { color: white; }
.splash-title .t2 { color: var(--cyan); text-shadow: 0 0 18px rgba(65,184,245,0.8); }
.splash-sub {
  font-family: var(--font-head); font-size: 10px; letter-spacing: 5px;
  color: var(--text2); margin-bottom: 52px;
}
.progress-wrap { width: 240px; text-align: center; }
.progress-track {
  width: 100%; height: 2px; background: rgba(65,184,245,0.1);
  border-radius: 2px; overflow: hidden; margin-bottom: 14px;
}
.progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan2), var(--cyan));
  box-shadow: 0 0 8px var(--cyan); border-radius: 2px;
  transition: width 0.3s ease;
}
.progress-text {
  font-family: var(--font-head); font-size: 9px; letter-spacing: 3px;
  color: var(--text2); animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:0.5} 50%{opacity:1} }

/* ═══════════════ APP LAYOUT ═══════════════ */
#app {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  overflow: hidden; animation: appReveal 0.6s ease forwards;
}
@keyframes appReveal { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* ─── HEADER ─── */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 14px 10px;
  background: linear-gradient(180deg, rgba(3,12,24,0.98) 0%, rgba(3,12,24,0.9) 100%);
  border-bottom: 1px solid var(--border2); backdrop-filter: blur(18px);
  z-index: 10; flex-shrink: 0;
  box-shadow: 0 2px 14px rgba(0,0,0,0.45);
}
.header-logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-head); font-size: 16px; letter-spacing: 2px; color: var(--text);
}
.header-logo b { color: var(--cyan); font-weight: 700; }
.header-right { display: flex; align-items: center; gap: 10px; }
.net-badge {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-head); font-size: 9px; letter-spacing: 1.4px;
  color: var(--green); background: rgba(30,217,138,0.12);
  border: 1px solid rgba(30,217,138,0.32); border-radius: 22px; padding: 5px 10px;
  box-shadow: 0 0 12px rgba(30,217,138,0.18);
}
.header-balances {
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.header-bal-item {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 12px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.header-bal-item:hover { transform: translateY(-1px); }
.header-bal-item.tcor-bal {
  color: var(--cyan); background: rgba(65,184,245,0.12); border: 1px solid var(--border2);
  box-shadow: 0 0 10px rgba(65,184,245,0.18);
}
.header-bal-item.ton-bal {
  color: #4ab0e8; background: rgba(0,136,204,0.12); border: 1px solid rgba(0,136,204,0.32);
  box-shadow: 0 0 10px rgba(0,136,204,0.18);
}

/* ─── PAGES ─── */
.pages {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  position: relative; z-index: 1; scroll-behavior: smooth; padding-bottom: 80px;
}
.pages::-webkit-scrollbar { width: 3px; }
.pages::-webkit-scrollbar-track { background: transparent; }
.pages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.page { display: none; padding: 18px 14px 10px; animation: pageIn 0.3s ease; }
.page.active { display: block; }
@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.page-header { margin-bottom: 18px; }
.page-header h2 {
  font-family: var(--font-head); font-size: 17px; font-weight: 700;
  letter-spacing: 3px; color: white; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(65,184,245,0.35);
}
.page-header .page-sub { font-size: 12px; color: var(--text2); margin-top: 3px; }

.section-title {
  font-family: var(--font-head); font-size: 9px; letter-spacing: 3px;
  color: var(--text3); text-transform: uppercase;
  margin: 20px 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--border);
}

/* SUB-TABS */
.sub-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  background: rgba(0,0,0,0.2); border-radius: 12px; padding: 4px;
  border: 1px solid var(--border);
}
.sub-tab {
  flex: 1; padding: 8px; border-radius: 9px;
  font-family: var(--font-head); font-size: 9px; letter-spacing: 1.5px;
  color: var(--text2); transition: all 0.2s;
}
.sub-tab.active {
  background: rgba(65,184,245,0.14); color: var(--cyan);
  box-shadow: 0 0 10px rgba(65,184,245,0.15);
}
.sub-content { display: none; }
.sub-content.active { display: block; }

.tab-desc { font-size: 12px; color: var(--text2); margin-bottom: 14px; }

/* ═══════════════ SHOP PAGE ═══════════════ */
.filter-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-btn {
  font-family: var(--font-head); font-size: 9px; letter-spacing: 1.5px;
  padding: 6px 13px; border-radius: 20px; font-weight: 600;
  border: 1px solid var(--border2); color: var(--text2);
  background: var(--card); transition: all 0.2s;
}
.filter-btn.active, .filter-btn:hover {
  border-color: var(--cyan); color: var(--cyan);
  background: rgba(65,184,245,0.1); box-shadow: 0 0 10px rgba(65,184,245,0.15);
}

.miners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

.miner-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 12px;
  position: relative; overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s; cursor: pointer;
}
.miner-card::before {
  content:''; position:absolute; inset:0; border-radius:var(--r);
  background: linear-gradient(135deg, rgba(65,184,245,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.miner-card:hover { border-color:var(--border2); box-shadow:0 4px 22px rgba(65,184,245,0.1); transform:translateY(-2px); }
.miner-card.tier-pro { border-color:rgba(245,196,56,0.18); }
.miner-card.tier-pro:hover { border-color:rgba(245,196,56,0.38); box-shadow:0 4px 22px rgba(245,196,56,0.1); }
.miner-card.tier-adv { border-color:rgba(154,107,255,0.18); }
.miner-card.tier-adv:hover { border-color:rgba(154,107,255,0.38); }

.miner-tier-badge {
  position:absolute; top:9px; right:9px;
  font-family:var(--font-head); font-size:7px; letter-spacing:1px;
  padding:2px 6px; border-radius:8px;
}
.badge-starter { background:rgba(65,184,245,0.12); color:var(--cyan); border:1px solid rgba(65,184,245,0.28); }
.badge-adv     { background:rgba(154,107,255,0.12); color:var(--purple); border:1px solid rgba(154,107,255,0.28); }
.badge-pro     { background:rgba(245,196,56,0.12); color:var(--gold); border:1px solid rgba(245,196,56,0.28); }

.miner-icon-wrap {
  width:46px; height:46px; margin-bottom:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(65,184,245,0.06); border-radius:11px; border:1px solid var(--border);
}
.miner-name {
  font-family:var(--font-head); font-size:10px; font-weight:600;
  color:white; letter-spacing:1px; margin-bottom:8px;
}
.miner-specs { display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.miner-spec { display:flex; justify-content:space-between; align-items:center; }
.miner-spec-label { font-size:10px; color:var(--text2); }
.miner-spec-val { font-family:var(--font-head); font-size:9px; font-weight:600; color:var(--cyan); }
.miner-spec-val.green { color:var(--green); }
.miner-spec-val.red   { color:var(--red); }

.miner-price-row {
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:8px; border-radius:9px;
  background:rgba(0,0,0,0.2); border:1px solid var(--border);
}
.miner-price-opt {
  font-family:var(--font-head); font-size:8px; font-weight:700;
  padding:3px 7px; border-radius:6px; flex:1; text-align:center;
}
.miner-price-opt.tcor { color:var(--cyan); background:rgba(65,184,245,0.1); }
.miner-price-opt.ton  { color:#4ab0e8;    background:rgba(0,136,204,0.1);  }
.miner-price-or { font-size:9px; color:var(--text3); }

/* ═══════════════ PROFILE PAGE ═══════════════ */
.profile-card {
  display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--border2);
  border-radius:var(--r); padding:14px; margin-bottom:16px;
}
.profile-name { font-family:var(--font-head); font-size:14px; font-weight:700; color:white; letter-spacing:1.5px; }
.profile-id   { font-size:11px; color:var(--text2); margin:3px 0; font-family:monospace; }
.profile-joined { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text2); }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.stat-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:12px;
  display:flex; flex-direction:column; gap:5px;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.stat-card:hover { border-color:var(--border2); box-shadow:var(--glow2); }
.stat-val { font-family:var(--font-head); font-size:13px; font-weight:700; color:white; }
.stat-label { font-size:10px; color:var(--text2); }

/* ELECTRICITY CARD */
.electricity-card {
  background:rgba(245,196,56,0.05); border:1px solid rgba(245,196,56,0.2);
  border-radius:12px; padding:12px; margin-bottom:6px;
}
.elec-header {
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-head); font-size:9px; letter-spacing:2px;
  color:var(--gold); margin-bottom:10px;
}
.elec-body { display:flex; flex-direction:column; gap:5px; }
.elec-stat { display:flex; justify-content:space-between; font-size:12px; color:var(--text2); }
.elec-val { font-family:var(--font-head); font-size:11px; font-weight:600; color:white; }
.elec-val.red   { color:var(--red); }
.elec-val.green { color:var(--green); }

/* MY MINERS */
.my-miners { display:flex; flex-direction:column; gap:7px; margin-bottom:6px; }
.my-miner-item {
  background:var(--card); border:1px solid var(--border);
  border-radius:11px; padding:11px 13px;
  display:flex; align-items:center; gap:11px;
}
.my-miner-icon {
  width:36px; height:36px; flex-shrink:0;
  background:rgba(65,184,245,0.07); border-radius:9px;
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
}
.my-miner-info { flex:1; }
.my-miner-name  { font-family:var(--font-head); font-size:10px; font-weight:600; color:white; letter-spacing:0.5px; }
.my-miner-stats { font-size:10px; color:var(--text2); margin-top:2px; }
.my-miner-elec  { font-size:10px; color:var(--red); margin-top:1px; opacity:0.8; }
.my-miner-status {
  font-family:var(--font-head); font-size:8px; letter-spacing:1px;
  padding:3px 7px; border-radius:8px;
  background:rgba(30,217,138,0.1); color:var(--green); border:1px solid rgba(30,217,138,0.22);
}

/* FINANCE BTNS */
.finance-btns { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-bottom:16px; }
.fin-btn {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:13px 8px; border-radius:13px;
  font-family:var(--font-head); font-size:9px; letter-spacing:1px;
  font-weight:600; transition:all 0.2s; border:1px solid;
}
.fin-btn.deposit  { background:rgba(30,217,138,0.07); border-color:rgba(30,217,138,0.22); color:var(--green); }
.fin-btn.withdraw { background:rgba(255,85,119,0.07); border-color:rgba(255,85,119,0.22); color:var(--red); }
.fin-btn.transfer { background:rgba(65,184,245,0.07); border-color:rgba(65,184,245,0.22); color:var(--cyan); }
.fin-btn:hover    { transform:translateY(-2px); filter:brightness(1.15); }

/* POOL INFO */
.pool-info-card {
  background:var(--card); border:1px solid rgba(65,184,245,0.2); border-radius:13px; padding:13px;
}
.pool-info-header {
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-head); font-size:9px; letter-spacing:2px;
  color:var(--cyan); margin-bottom:9px;
}
.pool-name { font-family:var(--font-head); font-size:12px; font-weight:600; color:white; display:block; }
.pool-members { font-size:11px; color:var(--text2); display:block; margin-top:2px; }

/* BUILDINGS */
.buildings-grid { display:flex; flex-direction:column; gap:10px; }
.building-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:14px;
  display:flex; align-items:center; gap:13px;
  transition:border-color 0.2s;
}
.building-card.owned { border-color:rgba(65,184,245,0.22); }
.building-icon {
  width:52px; height:52px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; border:1px solid;
}
.building-info { flex:1; }
.building-name { font-family:var(--font-head); font-size:11px; font-weight:600; color:white; margin-bottom:3px; }
.building-bonus { font-size:12px; font-weight:600; margin-bottom:3px; }
.building-desc  { font-size:10px; color:var(--text2); line-height:1.4; }
.building-level { font-family:var(--font-head); font-size:9px; color:var(--text2); margin-top:4px; }
.building-btn {
  flex-shrink:0; padding:9px 12px; border-radius:10px;
  font-family:var(--font-head); font-size:9px; letter-spacing:0.5px; font-weight:700;
  text-align:center; line-height:1.4; transition:all 0.2s;
}
.building-btn.buy {
  background:rgba(65,184,245,0.12); border:1px solid rgba(65,184,245,0.3); color:var(--cyan);
}
.building-btn.upgrade {
  background:rgba(245,196,56,0.1); border:1px solid rgba(245,196,56,0.28); color:var(--gold);
}
.building-btn span { font-size:8px; color:inherit; opacity:0.75; display:block; }
.building-btn:hover { transform:translateY(-1px); filter:brightness(1.15); }
.building-maxed {
  flex-shrink:0; padding:9px 12px; border-radius:10px;
  font-family:var(--font-head); font-size:9px; letter-spacing:1px;
  background:rgba(30,217,138,0.1); color:var(--green); border:1px solid rgba(30,217,138,0.25);
}

/* WORKSHOP */
.workshop-banner {
  background:rgba(154,107,255,0.07); border:1px solid rgba(154,107,255,0.2);
  border-radius:var(--r); padding:16px;
  display:flex; align-items:center; gap:12px; margin-bottom:6px;
}
.workshop-title { font-family:var(--font-head); font-size:13px; font-weight:600; color:white; margin-bottom:3px; }
.workshop-sub   { font-size:11px; color:var(--text2); line-height:1.4; }

.workshop-part {
  background:var(--card); border:1px solid var(--border);
  border-radius:11px; padding:11px 13px;
  display:flex; align-items:center; gap:10px; margin-bottom:7px;
}
.part-icon { font-size:20px; }
.part-info { flex:1; }
.part-name   { font-size:12px; font-weight:600; color:white; }
.part-rarity { font-family:var(--font-head); font-size:8px; letter-spacing:1px; margin-top:2px; }
.part-qty    { font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--text2); }
.part-val    { font-family:var(--font-head); font-size:10px; color:var(--cyan); min-width:70px; text-align:right; }

.workshop-craft-btn-wrap { margin-top:14px; }
.craft-btn {
  width:100%; padding:12px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-size:11px; letter-spacing:2px; font-weight:700;
  background:linear-gradient(135deg, rgba(154,107,255,0.2), rgba(154,107,255,0.1));
  border:1px solid rgba(154,107,255,0.38); color:var(--purple);
  transition:all 0.2s;
}
.craft-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(154,107,255,0.2); }

/* ═══════════════ POOLS PAGE ═══════════════ */
.pool-actions { display:flex; gap:9px; margin-bottom:18px; }
.pool-action-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:10px; border-radius:11px;
  font-family:var(--font-head); font-size:9px; letter-spacing:1.5px; font-weight:600;
  background:linear-gradient(135deg, rgba(30,127,216,0.22), rgba(65,184,245,0.12));
  border:1px solid rgba(65,184,245,0.32); color:var(--cyan); transition:all 0.2s;
}
.pool-action-btn.secondary { background:rgba(11,24,46,0.6); border-color:var(--border2); color:var(--text); }
.pool-action-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(65,184,245,0.18); }

.pools-list { display:flex; flex-direction:column; gap:9px; }
.pool-item {
  background:var(--card); border:1px solid var(--border);
  border-radius:13px; padding:13px; transition:border-color 0.2s, box-shadow 0.2s;
}
.pool-item:hover { border-color:var(--border2); box-shadow:var(--glow2); }
.pool-item-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.pool-item-name { font-family:var(--font-head); font-size:12px; font-weight:600; color:white; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pool-private-badge {
  font-size:8px; padding:2px 6px; border-radius:6px;
  background:rgba(154,107,255,0.12); color:var(--purple); border:1px solid rgba(154,107,255,0.25);
}
.pool-item-fee {
  font-family:var(--font-head); font-size:8px; letter-spacing:1px;
  padding:3px 7px; border-radius:8px;
  background:rgba(245,196,56,0.1); color:var(--gold); border:1px solid rgba(245,196,56,0.22);
}
.pool-item-stats { display:flex; gap:14px; }
.pool-stat { display:flex; flex-direction:column; gap:2px; }
.pool-stat-val   { font-family:var(--font-head); font-size:12px; font-weight:600; color:var(--cyan); }
.pool-stat-label { font-size:10px; color:var(--text2); }

.pool-join-btn {
  display:block; width:100%; margin-top:11px; padding:8px;
  border-radius:9px; text-align:center;
  font-family:var(--font-head); font-size:9px; letter-spacing:1.5px; font-weight:700;
  background:rgba(65,184,245,0.1); border:1px solid rgba(65,184,245,0.28); color:var(--cyan);
  transition:all 0.2s;
}
.pool-join-btn:hover { background:rgba(65,184,245,0.18); }
.pool-join-btn.joined { background:rgba(30,217,138,0.1); border-color:rgba(30,217,138,0.28); color:var(--green); }
.pool-join-btn.private { background:rgba(154,107,255,0.1); border-color:rgba(154,107,255,0.28); color:var(--purple); }

/* ═══════════════ EXCHANGE PAGE ═══════════════ */
.exchange-note {
  background:rgba(245,196,56,0.07); border:1px solid rgba(245,196,56,0.18);
  border-radius:10px; padding:10px 13px;
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--text2); margin-bottom:14px;
}
.exchange-note.dex {
  background:rgba(154,107,255,0.07); border-color:rgba(154,107,255,0.18);
}

.coins-list { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.coin-item {
  background:var(--card); border:1px solid var(--border);
  border-radius:13px; padding:11px 13px;
  display:flex; align-items:center; gap:11px; transition:border-color 0.2s;
}
.coin-item:hover { border-color:var(--border2); }
.coin-item.dex-coin { border-color:rgba(154,107,255,0.12); }
.coin-icon-wrap {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; border:1px solid var(--border);
}
.coin-icon-wrap.tcor   { background:rgba(65,184,245,0.1); }
.coin-icon-wrap.ton    { background:rgba(0,136,204,0.1);  }
.coin-icon-wrap.neon   { background:rgba(0,255,200,0.08); border-color:rgba(0,255,200,0.2); }
.coin-icon-wrap.flux   { background:rgba(255,140,68,0.08); border-color:rgba(255,140,68,0.2); }
.coin-icon-wrap.orbn   { background:rgba(154,107,255,0.08); border-color:rgba(154,107,255,0.2); }
.coin-icon-wrap.pulsar { background:rgba(245,196,56,0.08); border-color:rgba(245,196,56,0.2); }
.coin-icon-wrap.void   { background:rgba(255,85,119,0.08); border-color:rgba(255,85,119,0.2); }

.coin-info { flex:1; }
.coin-name {
  font-family:var(--font-head); font-size:12px; font-weight:600; color:white;
  display:flex; align-items:center; gap:6px;
}
.coin-fullname { font-size:10px; color:var(--text2); margin-top:2px; }
.coin-price-wrap { text-align:right; }
.coin-price  { font-family:var(--font-head); font-size:12px; font-weight:600; color:white; }
.coin-change { font-size:10px; margin-top:2px; font-weight:600; }
.coin-change.up   { color:var(--green); }
.coin-change.down { color:var(--red); }

.dex-risk-badge {
  font-family:var(--font-head); font-size:7px; padding:2px 5px;
  border-radius:6px; background:rgba(0,0,0,0.2);
}

.trade-panel {
  background:var(--card); border:1px solid var(--border2);
  border-radius:var(--r); padding:16px;
}
.trade-panel-header {
  font-family:var(--font-head); font-size:9px; letter-spacing:2px;
  color:var(--text2); margin-bottom:13px;
}
.trade-row { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.trade-coin-select {
  flex:1; background:rgba(0,0,0,0.28); border:1px solid var(--border);
  border-radius:11px; padding:9px 11px; display:flex; flex-direction:column; gap:5px;
}
.coin-mini {
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-head); font-size:10px; font-weight:700; color:white;
}
.trade-input {
  background:none; border:none; outline:none;
  font-family:var(--font-head); font-size:14px; font-weight:600; color:var(--cyan); width:100%;
}
.trade-input::placeholder { color:var(--text3); }
.swap-btn {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:rgba(65,184,245,0.1); border:1px solid var(--border2);
  display:flex; align-items:center; justify-content:center;
  color:var(--cyan); transition:all 0.22s;
}
.swap-btn:hover { background:rgba(65,184,245,0.18); transform:rotate(180deg); }
.trade-rate { font-size:11px; color:var(--text2); text-align:center; margin-bottom:11px; }
.trade-execute-btn {
  width:100%; padding:12px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--font-head); font-size:11px; letter-spacing:2px; font-weight:700;
  background:linear-gradient(135deg, #0c4eb0, #1e90e8);
  color:white; border:none; transition:all 0.2s;
  box-shadow:0 4px 18px rgba(30,127,216,0.35);
}
.trade-execute-btn:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(30,127,216,0.48); }
.dex-note {
  font-size:11px; color:var(--text3); text-align:center; margin-top:12px; line-height:1.5;
  padding:10px; background:rgba(0,0,0,0.15); border-radius:8px;
}

/* ═══════════════ BLACK MARKET ═══════════════ */
.market-top {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.market-commission-badge {
  display:flex; align-items:center; gap:5px;
  font-size:11px; color:var(--orange); background:rgba(255,136,68,0.08);
  border:1px solid rgba(255,136,68,0.22); border-radius:10px; padding:5px 11px;
}
.market-list-btn {
  display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:11px;
  font-family:var(--font-head); font-size:9px; letter-spacing:1.5px; font-weight:700;
  background:rgba(255,136,68,0.12); border:1px solid rgba(255,136,68,0.3); color:var(--orange);
  transition:all 0.2s;
}
.market-list-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(255,136,68,0.2); }
.market-filter-row { display:flex; gap:7px; margin-bottom:14px; flex-wrap:wrap; }

.market-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.market-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:13px 12px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:5px;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.market-card:hover { border-color:rgba(255,136,68,0.28); box-shadow:0 4px 18px rgba(255,136,68,0.08); }
.market-hot {
  position:absolute; top:9px; right:9px;
  font-size:8px; padding:2px 6px; border-radius:6px;
  background:rgba(255,85,119,0.15); color:var(--red); border:1px solid rgba(255,85,119,0.25);
  font-family:var(--font-head); letter-spacing:0.5px;
}
.market-item-icon { font-size:24px; }
.market-item-name {
  font-family:var(--font-head); font-size:10px; font-weight:600; color:white; line-height:1.3;
}
.market-item-seller { font-size:10px; color:var(--text2); }
.market-item-cond { font-size:10px; color:var(--gold); }
.market-item-prices { margin-top:4px; }
.market-price-tcor { font-family:var(--font-head); font-size:11px; font-weight:700; color:var(--cyan); }
.market-price-ton  { font-size:10px; color:#4ab0e8; margin-top:1px; }
.market-fee-note   { font-size:9px; color:var(--orange); opacity:0.7; }
.market-buy-btn {
  margin-top:6px; padding:7px; border-radius:9px; text-align:center;
  font-family:var(--font-head); font-size:9px; letter-spacing:1.5px; font-weight:700;
  background:rgba(255,136,68,0.12); border:1px solid rgba(255,136,68,0.3); color:var(--orange);
  transition:all 0.2s;
}
.market-buy-btn:hover { background:rgba(255,136,68,0.22); }

/* ═══════════════ STATS PAGE ═══════════════ */
.network-hero {
  background:var(--card); border:1px solid var(--border2);
  border-radius:var(--r); padding:22px; text-align:center; margin-bottom:14px;
  position:relative; overflow:hidden;
}
.network-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(65,184,245,0.06) 0%, transparent 60%);
}
.net-hero-value {
  font-family:var(--font-head); font-size:30px; font-weight:900;
  color:white; text-shadow:0 0 18px rgba(65,184,245,0.45); margin-bottom:4px;
}
.net-hero-label { font-size:12px; color:var(--text2); margin-bottom:14px; }
.net-hashbar { display:flex; gap:3px; justify-content:center; }
.hashbar-seg { height:4px; border-radius:2px; flex:1; background:rgba(65,184,245,0.12); }
.hashbar-seg.active {
  background:linear-gradient(90deg, var(--cyan2), var(--cyan));
  box-shadow:0 0 5px rgba(65,184,245,0.5);
}
.network-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:8px; }
.net-stat {
  background:var(--card); border:1px solid var(--border); border-radius:11px; padding:13px;
}
.net-stat-val   { font-family:var(--font-head); font-size:15px; font-weight:700; color:white; margin-bottom:3px; }
.net-stat-label { font-size:10px; color:var(--text2); }

.coin-stats-list { display:flex; flex-direction:column; gap:7px; }
.coin-stat-item {
  background:var(--card); border:1px solid var(--border); border-radius:11px; padding:13px;
}
.coin-stat-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.coin-stat-name {
  display:flex; align-items:center; gap:7px;
  font-family:var(--font-head); font-size:11px; font-weight:600; color:white;
}
.coin-stat-mined { font-size:10px; color:var(--text2); }
.coin-hashbar { height:3px; border-radius:2px; width:100%; background:rgba(65,184,245,0.1); overflow:hidden; }
.coin-hashbar-fill { height:100%; border-radius:2px; background:linear-gradient(90deg, var(--cyan2), var(--cyan)); }

/* ═══════════════ BOTTOM NAV ═══════════════ */
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0;
  display:flex; background:rgba(3,12,24,0.98);
  border-top:1px solid var(--border2); backdrop-filter:blur(22px);
  z-index:50; padding:10px 4px;
  padding-bottom:calc(env(safe-area-inset-bottom, 12px) + 10px);
  box-shadow:0 -6px 22px rgba(0,0,0,0.55);
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:13px 4px 11px; color:var(--text3);
  font-family:var(--font-head); font-size:10px; letter-spacing:0.8px;
  transition:transform 0.18s ease, color 0.18s, background 0.18s; border-radius:16px; min-height:68px;
  background:transparent; border:none; cursor:pointer; font-weight:700;
}
.nav-btn svg { width:28px; height:28px; transition:all 0.2s; }
.nav-btn:hover { color:var(--text); background:rgba(65,184,245,0.06); transform: translateY(-1px); }
.nav-btn:active { transform: scale(.95); }
.nav-btn.active {
  color:var(--cyan); text-shadow:0 0 10px rgba(65,184,245,0.65);
  background:linear-gradient(180deg, rgba(65,184,245,0.22), rgba(65,184,245,0.04));
  box-shadow:inset 0 1px 0 rgba(65,184,245,0.42), 0 0 18px rgba(65,184,245,0.15);
}
.nav-btn.active svg { filter:drop-shadow(0 0 8px rgba(65,184,245,0.8)); stroke:var(--cyan); transform:translateY(-2px) scale(1.06); }
.pages { padding-bottom:112px; }

/* ═══════════════ EXCHANGE CHART ═══════════════ */
.chart-card {
  background:linear-gradient(160deg, #0d1d35, #071324);
  border:1px solid var(--border2); border-radius:14px;
  padding:14px; margin-bottom:14px;
}
.chart-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.chart-pair { font-family:var(--font-head); font-size:13px; font-weight:700; color:#fff; letter-spacing:1px; }
.chart-price { font-family:var(--font-head); font-size:18px; font-weight:700; color:var(--cyan); }
.chart-change { font-size:11px; margin-left:6px; }
.chart-change.up { color:#1ed98a; } .chart-change.down { color:#ff5577; }
.chart-svg { width:100%; height:180px; display:block; background:rgba(0,0,0,0.25); border-radius:10px; }
.chart-periods { display:flex; gap:6px; margin-top:8px; }
.chart-periods button {
  flex:1; background:rgba(65,184,245,0.06); color:var(--text2);
  border:1px solid var(--border); border-radius:8px; padding:5px 0;
  font-family:var(--font-head); font-size:10px; cursor:pointer; letter-spacing:0.6px;
}
.chart-periods button.active { background:var(--cyan); color:#02101e; border-color:var(--cyan); font-weight:700; }

/* TON Connect block */
.tonconnect-block {
  background:linear-gradient(135deg, rgba(0,136,204,0.15), rgba(0,136,204,0.04));
  border:1px solid rgba(0,136,204,0.45); border-radius:14px;
  padding:14px; margin-bottom:14px;
}
.tc-status { font-size:11px; color:var(--text2); margin-bottom:8px; }
.tc-status b { color:#41b8f5; }
.tc-connect-btn {
  width:100%; padding:13px; border:none; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,#0088cc,#00a3e0); color:#fff;
  font-family:var(--font-head); font-weight:700; letter-spacing:1px; font-size:12px;
}
.tc-deposit-btn {
  width:100%; padding:13px; border:none; border-radius:12px; cursor:pointer; margin-top:10px;
  background:linear-gradient(135deg,#1ed98a,#16a86a); color:#02201a;
  font-family:var(--font-head); font-weight:800; letter-spacing:1px; font-size:13px;
}
.tc-deposit-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ═══════════════ TASKS ═══════════════ */
.task-card {
  background:linear-gradient(160deg,#0d1d35,#071324);
  border:1px solid var(--border2); border-radius:14px;
  padding:14px; margin-bottom:10px;
  display:flex; gap:12px; align-items:center;
}
.task-info { flex:1; }
.task-title { font-family:var(--font-head); font-weight:700; font-size:13px; color:#fff; letter-spacing:0.5px; }
.task-desc { font-size:11px; color:var(--text2); margin-top:3px; line-height:1.4; }
.task-progress { font-size:10px; color:#41b8f5; margin-top:4px; font-family:var(--font-head); }
.task-reward { font-family:var(--font-head); font-size:11px; color:#f5c438; font-weight:700; text-align:right; min-width:80px; }
.task-btn {
  background:linear-gradient(135deg,#41b8f5,#1e7fd8);
  color:#fff; border:none; border-radius:10px; padding:8px 14px;
  font-family:var(--font-head); font-size:10px; font-weight:700;
  letter-spacing:0.8px; cursor:pointer;
}
.task-btn.done { background:#1ed98a44; color:#1ed98a; cursor:default; }

/* ═══════════════ RATING ═══════════════ */
.rank-row {
  background:linear-gradient(160deg,#0d1d35,#071324);
  border:1px solid var(--border2); border-radius:12px;
  padding:12px 14px; margin-bottom:8px;
  display:flex; align-items:center; gap:12px;
}
.rank-pos { font-family:var(--font-head); font-size:18px; font-weight:800; color:#41b8f5; min-width:36px; text-align:center; }
.rank-pos.top1 { color:#f5c438; text-shadow:0 0 8px rgba(245,196,56,0.6); }
.rank-pos.top2 { color:#c9d8e6; }
.rank-pos.top3 { color:#d99a5c; }
.rank-name { flex:1; font-weight:600; }
.rank-value { font-family:var(--font-head); color:#1ed98a; font-size:12px; font-weight:700; }

/* ═══════════════ REFERRAL ═══════════════ */
.ref-card {
  background:linear-gradient(135deg, rgba(154,107,255,0.1), rgba(154,107,255,0.02));
  border:1px solid rgba(154,107,255,0.4); border-radius:14px;
  padding:16px; margin-bottom:14px;
}
.ref-code-box {
  display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,0.4); border-radius:10px; padding:10px 12px; margin:8px 0 12px;
}
.ref-code { flex:1; font-family:monospace; color:#9a6bff; font-size:13px; font-weight:700; }
.ref-copy {
  background:#9a6bff; color:#fff; border:none; border-radius:6px;
  padding:6px 10px; font-size:11px; cursor:pointer; font-weight:600;
}
.ref-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ref-stat { background:rgba(0,0,0,0.3); border-radius:10px; padding:10px; text-align:center; }
.ref-stat-val { font-family:var(--font-head); font-size:16px; font-weight:800; color:#9a6bff; }
.ref-stat-lbl { font-size:10px; color:var(--text2); margin-top:3px; }

/* ═══════════════ MODALS ═══════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(2,6,16,0.82); backdrop-filter:blur(8px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:overlayIn 0.24s ease;
}
@keyframes overlayIn { from{opacity:0} to{opacity:1} }

.modal-box {
  background:linear-gradient(180deg, #0d1d35 0%, #071223 100%);
  border:1px solid var(--border2); border-bottom:none;
  border-radius:20px 20px 0 0; padding:22px 18px 30px;
  width:100%; max-width:480px; position:relative;
  animation:slideUp 0.28s cubic-bezier(0.34,1.56,0.64,1);
  max-height:82vh; overflow-y:auto;
}
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-close {
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text2); transition:all 0.2s;
}
.modal-close:hover { background:rgba(255,255,255,0.1); color:white; }

.modal-title {
  font-family:var(--font-head); font-size:15px; font-weight:700;
  letter-spacing:2px; color:white; margin-bottom:5px; text-transform:uppercase;
}
.modal-sub { font-size:12px; color:var(--text2); margin-bottom:18px; }
.modal-field { margin-bottom:13px; }
.modal-label {
  font-family:var(--font-head); font-size:9px; letter-spacing:2px;
  color:var(--text2); margin-bottom:6px; display:block;
}
.modal-input {
  width:100%; padding:11px 13px;
  background:rgba(0,0,0,0.38); border:1px solid var(--border2);
  border-radius:9px; color:white; font-size:14px;
  outline:none; transition:border-color 0.2s;
}
.modal-input:focus { border-color:var(--cyan); box-shadow:0 0 0 2px rgba(65,184,245,0.1); }
.modal-input::placeholder { color:var(--text3); }

.modal-btn { width:100%; padding:12px; border-radius:11px; margin-top:4px; font-family:var(--font-head); font-size:11px; letter-spacing:2px; font-weight:700; transition:all 0.2s; }
.modal-btn.primary { background:linear-gradient(135deg, #0c4eb0, #1e90e8); color:white; border:none; box-shadow:0 4px 18px rgba(30,127,216,0.35); }
.modal-btn.primary:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(30,127,216,0.48); }

.ton-payment-info {
  background:rgba(0,136,204,0.07); border:1px solid rgba(0,136,204,0.22);
  border-radius:11px; padding:13px;
  display:flex; align-items:center; gap:11px; margin-bottom:15px;
}
.ton-payment-text { font-size:12px; color:var(--text); }
.ton-payment-text b { color:white; font-family:var(--font-head); }

/* TOGGLES */
.toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.toggle-label { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text); }
.toggle-switch { position:relative; display:inline-block; width:40px; height:22px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; border-radius:22px;
  background:rgba(65,184,245,0.12); border:1px solid var(--border2);
  cursor:pointer; transition:0.3s;
}
.toggle-slider::before {
  content:''; position:absolute;
  height:15px; width:15px; border-radius:50%;
  left:3px; bottom:3px; background:var(--text3);
  transition:0.3s;
}
.toggle-switch input:checked + .toggle-slider { background:rgba(65,184,245,0.22); border-color:var(--cyan); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(18px); background:var(--cyan); }

/* MANAGE STATS */
.manage-stats-row {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:14px;
}
.manage-stat {
  background:rgba(65,184,245,0.06); border:1px solid rgba(65,184,245,0.14);
  border-radius:10px; padding:10px; text-align:center;
}
.manage-stat-val   { font-family:var(--font-head); font-size:14px; font-weight:700; color:white; }
.manage-stat-label { font-size:9px; color:var(--text2); margin-top:2px; }

.kick-btn {
  padding:11px 14px; border-radius:9px;
  font-family:var(--font-head); font-size:9px; letter-spacing:1px; font-weight:700;
  background:rgba(255,85,119,0.12); border:1px solid rgba(255,85,119,0.28); color:var(--red);
  transition:all 0.2s; flex-shrink:0;
}
.kick-btn:hover { background:rgba(255,85,119,0.22); }

/* BUY MODAL */
.buy-miner-card {
  display:flex; align-items:center; gap:13px; margin-bottom:16px;
  background:rgba(65,184,245,0.05); border:1px solid var(--border2);
  border-radius:13px; padding:13px;
}
.buy-miner-icon-wrap {
  width:48px; height:48px; background:rgba(65,184,245,0.07);
  border:1px solid rgba(65,184,245,0.2); border-radius:11px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.buy-miner-details { flex:1; }
.buy-miner-name { font-family:var(--font-head); font-size:13px; font-weight:700; color:white; letter-spacing:1px; margin-bottom:3px; }
.buy-specs { display:flex; flex-direction:column; margin-bottom:14px; }
.buy-spec-row { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); }
.buy-spec-row:last-child { border-bottom:none; }
.buy-spec-k { font-size:11px; color:var(--text2); }
.buy-spec-v { font-family:var(--font-head); font-size:11px; font-weight:600; color:var(--cyan); }

.buy-currency-label {
  font-family:var(--font-head); font-size:9px; letter-spacing:2px;
  color:var(--text2); margin-bottom:9px;
}
.buy-currency-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; }
.buy-cur-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px; border-radius:10px;
  font-family:var(--font-head); font-size:10px; font-weight:700;
  background:rgba(65,184,245,0.07); border:1px solid var(--border); color:var(--text2);
  transition:all 0.2s;
}
.buy-cur-btn.active { background:rgba(65,184,245,0.14); border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 10px rgba(65,184,245,0.15); }

/* Stars background */
.stars-bg { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* ═══════════════ ANIMATED MINER SVG ═══════════════ */
.miner-anim-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 10px rgba(65,184,245,0.35)); }
.my-miner-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; background: linear-gradient(160deg,#0d1d35,#06101f); border: 1px solid var(--border2); overflow: hidden; }
@keyframes fanSpin  { from { transform: rotate(0); }     to { transform: rotate(360deg); } }
@keyframes fanSpinR { from { transform: rotate(360deg); } to { transform: rotate(0); } }
.miner-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.miner-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 22px rgba(65,184,245,0.18); }
.miner-card:active { transform: scale(.985); }

/* ═══════════════ STAKING UI ═══════════════ */
.stake-periods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.stake-period-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px 4px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg,#0d1d35,#06101f); border: 1px solid var(--border2);
  color: var(--text); font-family: var(--font-head); font-size: 13px; font-weight: 700;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.stake-period-btn:hover { transform: translateY(-2px); border-color: var(--cyan); }
.stake-period-btn.active { border-color: var(--green); box-shadow: 0 0 14px rgba(30,217,138,0.3); background: linear-gradient(160deg, rgba(30,217,138,0.15), rgba(15,32,60,0.7)); }
.stake-apy { color: var(--green); font-size: 11px; margin-top: 2px; }
.stake-input-row { display: flex; gap: 8px; align-items: center; }
.stake-input-row #stakeAmt { flex: 1; }
.stake-btn { width: auto !important; padding: 11px 22px !important; margin: 0 !important; white-space: nowrap; }

/* ═══════════════ GLOBAL UI ANIMATIONS ═══════════════ */
.modal-btn, .tc-deposit-btn, .tc-connect-btn, .market-list-btn, .pool-action-btn,
.fin-btn, .filter-btn, .sub-tab, .nav-btn, .stake-period-btn {
  position: relative; overflow: hidden;
}
.modal-btn:active, .tc-deposit-btn:active, .tc-connect-btn:active, .fin-btn:active,
.pool-action-btn:active, .market-list-btn:active { transform: scale(.96); }

.stat-card { transition: transform .2s, box-shadow .2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 18px rgba(65,184,245,0.18); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page.active > * { animation: fadeUp .35s ease both; }
.page.active > *:nth-child(2) { animation-delay: .04s; }
.page.active > *:nth-child(3) { animation-delay: .08s; }
.page.active > *:nth-child(4) { animation-delay: .12s; }
.page.active > *:nth-child(5) { animation-delay: .16s; }

/* notifications */
.notif { animation: notifSlide .35s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes notifSlide { from { opacity: 0; transform: translate(-50%, 30px); } to { opacity: 1; transform: translate(-50%, 0); } }
.lang-btn {
  background: linear-gradient(135deg,#0d1d35,#122840);
  border: 1px solid rgba(65,184,245,0.45);
  color: #41b8f5;
  font-family: 'Orbitron',sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 10px;
  letter-spacing: 0.6px;
  transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 0 8px rgba(65,184,245,0.18);
}
.lang-btn::after { content: '▾'; font-size: 9px; opacity: .8; }
.lang-btn:hover { box-shadow: 0 0 16px rgba(65,184,245,0.45); transform: translateY(-1px); }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: linear-gradient(160deg,#0d1d35,#071223);
  border: 1px solid rgba(65,184,245,0.3);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 20px rgba(65,184,245,0.15);
  padding: 6px;
  display: none;
  z-index: 1000;
}
.lang-menu.open { display: block; }
.lang-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #c0d8ee;
  padding: 8px 12px;
  font-family: 'Rajdhani',sans-serif;
  font-size: 13px;
  border-radius: 6px;
  transition: background 0.15s;
}
.lang-menu button:hover { background: rgba(65,184,245,0.12); }
.lang-menu button.active { background: rgba(65,184,245,0.2); color: #41b8f5; font-weight: 700; }

/* RTL поддержка */
html[dir="rtl"] .lang-menu { right: auto; left: 0; }
html[dir="rtl"] .lang-menu button { text-align: right; }
html[dir="rtl"] body { font-family: 'Rajdhani',Tahoma,Arial,sans-serif; }

html[dir="rtl"] .app-header,
html[dir="rtl"] .header-right,
html[dir="rtl"] .header-balances,
html[dir="rtl"] .header-bal-item,
html[dir="rtl"] .header-logo,
html[dir="rtl"] .bottom-nav,
html[dir="rtl"] .sub-tabs,
html[dir="rtl"] .filter-row,
html[dir="rtl"] .market-filter-row,
html[dir="rtl"] .finance-btns,
html[dir="rtl"] .pool-actions,
html[dir="rtl"] .trade-row,
html[dir="rtl"] .chart-head,
html[dir="rtl"] .market-top,
html[dir="rtl"] .profile-card { flex-direction: row-reverse; }

html[dir="rtl"] .stats-grid,
html[dir="rtl"] .miners-grid,
html[dir="rtl"] .buildings-grid,
html[dir="rtl"] .market-grid { direction: rtl; }
html[dir="rtl"] .stats-grid > *,
html[dir="rtl"] .miners-grid > *,
html[dir="rtl"] .buildings-grid > *,
html[dir="rtl"] .market-grid > * { direction: ltr; text-align: right; }

html[dir="rtl"] .miner-card,
html[dir="rtl"] .my-miner-card,
html[dir="rtl"] .pool-card,
html[dir="rtl"] .stat-card,
html[dir="rtl"] .coin-row,
html[dir="rtl"] .electricity-card,
html[dir="rtl"] .pool-info-card,
html[dir="rtl"] .market-card,
html[dir="rtl"] .modal-box,
html[dir="rtl"] .page-header,
html[dir="rtl"] .trade-panel,
html[dir="rtl"] .chart-card,
html[dir="rtl"] .exchange-note,
html[dir="rtl"] .section-title { text-align: right; }

html[dir="rtl"] .modal-close { left: 12px; right: auto; }
html[dir="rtl"] .nav-btn { text-align: center; }

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; direction: rtl; }

html[dir="rtl"] .trade-input,
html[dir="rtl"] input[type="number"] { direction: ltr; text-align: left; }

html[dir="rtl"] .pool-info-header,
html[dir="rtl"] .elec-header,
html[dir="rtl"] .chart-pair,
html[dir="rtl"] .pool-info-body,
html[dir="rtl"] .elec-stat { flex-direction: row-reverse; text-align: right; }

html[dir="rtl"] .progress-bar,
html[dir="rtl"] .net-hashbar { transform: scaleX(-1); transform-origin: center; }

/* ═══════ MAGAZIN: запчасти и мастерская ═══════ */
.parts-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
  margin-top:12px;
}
.part-card {
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:12px;
  padding:14px 12px;
  text-align:center;
  transition:transform .18s ease;
}
.part-card:hover { transform:translateY(-2px); }
.part-icon { font-size:28px; line-height:1; margin-bottom:6px; }
.part-name { font-family:var(--font-head); font-size:12px; letter-spacing:.5px; margin-bottom:2px; }
.part-rarity { font-size:10px; letter-spacing:1px; margin-bottom:6px; opacity:.85; }
.part-bonuses { display:flex; justify-content:space-around; gap:6px; font-size:11px; color:var(--text2); margin-bottom:8px; }
.part-prices { display:flex; flex-direction:column; gap:4px; }
.part-prices .btn { padding:7px 8px; font-size:11px; border-radius:7px; }

.workshop-wrap { display:flex; flex-direction:column; gap:18px; margin-top:12px; }
.workshop-section { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px; }
.my-parts-grid { display:flex; flex-direction:column; gap:8px; max-height:260px; overflow-y:auto; }
.my-part-item { display:flex; align-items:center; gap:10px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.my-part-icon { font-size:22px; width:30px; text-align:center; }
.my-part-meta { flex:1; min-width:0; }
.my-part-name { font-family:var(--font-head); font-size:12px; }
.my-part-stats { font-size:11px; color:var(--text2); }
.my-part-qty { font-size:11px; color:var(--text2); }
.my-part-qty .mute { color:var(--text3); }
.my-part-item .btn { padding:7px 10px; font-size:11px; }

.craft-builder { display:flex; flex-direction:column; gap:10px; }
.craft-builder input { background:var(--bg2); border:1px solid var(--border2); border-radius:8px; color:var(--text); padding:9px 10px; font-size:13px; }
.craft-stats { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--text2); }
.craft-stats b { color:var(--cyan); font-family:var(--font-head); margin-left:4px; }
.craft-slots { display:flex; flex-wrap:wrap; gap:6px; min-height:42px; background:var(--bg2); border:1px dashed var(--border2); border-radius:10px; padding:8px; }
.craft-slot { display:flex; align-items:center; gap:6px; background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:4px 8px; font-size:11px; }
.craft-slot .btn { padding:3px 8px; font-size:11px; line-height:1; border-radius:6px; }
.craft-empty { color:var(--text3); font-size:12px; padding:6px; }

.customs-list { display:flex; flex-direction:column; gap:6px; }
.custom-item { display:flex; align-items:center; gap:12px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:8px 12px; font-size:12px; }
.custom-name { font-family:var(--font-head); }
.custom-stats { color:var(--cyan); }
.custom-date { font-size:10px; margin-left:auto; }

.empty-state { color:var(--text3); text-align:center; padding:18px; font-size:12px; }

/* ═══════ MARKET ═══════ */
.market-filter-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:10px 0 14px; }
.market-filter-row .sort-select { margin-left:auto; background:var(--bg2); color:var(--text); border:1px solid var(--border2); border-radius:8px; padding:6px 8px; font-size:12px; }
.market-card { background:var(--card); border:1px solid var(--border2); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:6px; }
.market-card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.market-card-title { font-family:var(--font-head); font-size:13px; }
.market-card-meta { font-size:11px; }
.market-card-desc { font-size:12px; color:var(--text); opacity:.8; }
.market-card-price { color:var(--cyan); font-family:var(--font-head); font-size:14px; margin-top:4px; }
.market-card-actions { display:flex; gap:6px; margin-top:6px; }
.market-card-actions .btn { padding:7px 12px; font-size:11px; }
.tag { display:inline-block; padding:2px 8px; border-radius:6px; font-size:10px; letter-spacing:.5px; }
.tag.green { background:rgba(30,217,138,0.15); color:var(--green); }
.tag.red { background:rgba(255,85,119,0.15); color:var(--red); }
.tag.yellow { background:rgba(245,196,56,0.15); color:var(--gold); }

@media (max-width: 480px) {
  .parts-grid { grid-template-columns:repeat(2,1fr); }
}