/* TYVON visual skin — color/material overrides only.
   No layout, spacing, sizing, positioning or interaction rules live here. */
:root {
  --surface: #121821 !important;
  --surface-2: #19212c !important;
  --surface-3: #202a36 !important;
  --border: rgba(238, 205, 143, 0.16) !important;
  --border-strong: rgba(238, 205, 143, 0.28) !important;
  --text: #f7f3e9 !important;
  --text-2: #a2a7af !important;
  --text-3: #707782 !important;
  --gold: #edcc8d !important;
  --gold-2: #b98745 !important;
}

html,
body,
.phone,
.screen-content {
  background-color: #090d13 !important;
}

body {
  color: var(--text);
}

.glass {
  background-color: rgba(12, 17, 24, 0.92) !important;
  border-color: rgba(238, 205, 143, 0.16) !important;
}

.surface {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

.surface-2 {
  background-color: var(--surface-2) !important;
}

.gold-text {
  background-image: linear-gradient(135deg, #ffe0a3 0%, #edcc8d 48%, #b98745 100%) !important;
}

.gold-border {
  border-color: rgba(230, 201, 138, 0.32);
}

.tf-btn,
.ind-pill,
.qa-btn,
.period-btn {
  border-color: rgba(230, 201, 138, 0.22);
}

.tf-btn.tf-active,
.ind-pill.ind-active,
.period-btn.active {
  color: #f2d99f;
  border-color: rgba(230, 201, 138, 0.58);
  background-color: rgba(230, 201, 138, 0.17);
}

@media (min-width: 768px) {
  body {
    background-color: #080a0e;
    background-image: radial-gradient(circle at 50% 0%, rgba(230, 201, 138, 0.10), transparent 48%);
  }
}

/* Primary screens: visible TYVON material treatment without changing their grids. */
.home-screen,
.social-screen,
.eco-screen,
.wallet-screen {
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 88% 5%, rgba(237, 204, 141, .16), transparent 25%),
    linear-gradient(180deg, #0b1017 0%, #080a0e 42%, #080a0e 100%);
}

.home-screen .surface,
.social-screen .surface,
.eco-screen .surface,
.wallet-screen .surface {
  background-image: linear-gradient(145deg, rgba(25, 33, 44, .98), rgba(13, 18, 25, .98));
  border-color: rgba(237, 204, 141, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px -24px rgba(237,204,141,.45);
}

.wallet-screen .ucard,
.eco-screen .ucard {
  background:
    radial-gradient(circle at 80% 12%, rgba(237,204,141,.24), transparent 34%),
    linear-gradient(135deg, #27231c 0%, #11161d 58%, #0a0d12 100%);
  border-color: rgba(237,204,141,.38);
  box-shadow: 0 20px 50px -30px rgba(237,204,141,.65), inset 0 1px 0 rgba(255,255,255,.07);
}

.tyvon-mark {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 9px rgba(237,204,141,.38));
}
.tyvon-mark::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: linear-gradient(150deg,#ffe0a3,#b98745);
  clip-path: polygon(0 0,100% 0,50% 100%);
}
.tyvon-mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 14px;
  height: 15px;
  background: #0b0e13;
  clip-path: polygon(0 0,44% 22%,50% 100%,56% 22%,100% 0,63% 54%,50% 100%,37% 54%);
}
.home-hero {
  min-height: 126px;
  border: 1px solid rgba(237,204,141,.32);
  background:
    radial-gradient(ellipse at 84% 12%,rgba(237,204,141,.30),transparent 36%),
    linear-gradient(145deg,#211f1a 0%,#10151c 66%,#0b0f15 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05),0 16px 42px -30px rgba(237,204,141,.8);
}
.home-quick {
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 13px;
  background: linear-gradient(155deg,rgba(24,32,43,.96),rgba(8,13,19,.98));
  border: 1px solid rgba(245,215,158,.42);
  color: #f0ede6;
  font-size: 10px;
  font-weight:600;
  white-space: nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 22px -20px rgba(237,204,141,.7);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.home-quick:active{transform:scale(.96);border-color:rgba(237,204,141,.48);background:linear-gradient(155deg,rgba(39,40,36,.98),rgba(12,16,20,.98))}
.home-quick svg { width:22px;height:22px;color:#f2d292;stroke-width:1.9;filter:drop-shadow(0 0 7px rgba(237,204,141,.45)); }

.tab-btn{position:relative;color:#a5abb4;font-weight:550;transition:color .18s ease,transform .18s ease}
.tab-btn.tab-active{color:#edcc8d;background:linear-gradient(180deg,rgba(237,204,141,.08),transparent)}
.tab-btn.tab-active::after{content:"";position:absolute;bottom:0;width:4px;height:4px;border-radius:50%;background:#edcc8d;box-shadow:0 0 9px rgba(237,204,141,.9)}
.tab-btn.tab-active .tab-icon{filter:drop-shadow(0 0 7px rgba(237,204,141,.38))}
.tab-btn:active{transform:scale(.94)}
.home-launch { border-color:rgba(237,204,141,.22)!important; }
.tyvon-token {
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,#191e25,#0b0f14);border:1px solid rgba(237,204,141,.22);
}
.tyvon-token .tyvon-mark { width:22px;height:22px; }
.tyvon-token .tyvon-mark::after { left:5px;top:4px;width:12px;height:12px; }
.home-metric { padding:9px;background:#0b1016;border-radius:9px; }
.home-metric small { display:block;color:#666d77;font-size:8px;margin-bottom:4px; }
.home-metric b { font-size:13px; }
.home-primary {
  width:100%;height:39px;border-radius:10px;color:#17130d;font-size:12px;font-weight:800;
  background:linear-gradient(135deg,#f4d89e,#d7ae69);
}

/* Secondary DApp screens — visual treatment only; no sizing or business behavior. */
.screen-content:not(.home-screen):not(.trade-screen) {
  background-color:#070b11 !important;
  background-image:
    linear-gradient(180deg,rgba(3,8,14,.48) 0%,rgba(3,8,14,.72) 38%,#070b11 78%),
    url('/assets/ui/global-earth-bg.png') !important;
  background-size:100% auto !important;
  background-position:center top !important;
  background-repeat:no-repeat !important;
}
.screen-content:not(.home-screen):not(.trade-screen) > div:first-child {
  position:relative;
  z-index:1;
}
.screen-content:not(.home-screen):not(.trade-screen) h1,
.screen-content:not(.home-screen):not(.trade-screen) h2,
.screen-content:not(.home-screen):not(.trade-screen) h3 {
  color:#f8f6f0;
  font-weight:750;
  text-shadow:0 3px 16px rgba(0,0,0,.92);
}
.screen-content:not(.home-screen):not(.trade-screen) .surface {
  background:linear-gradient(145deg,rgba(20,29,39,.88),rgba(6,12,18,.94)) !important;
  border-color:rgba(222,228,234,.30) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 5px rgba(0,0,0,.30),0 12px 28px -20px rgba(0,0,0,.95) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.screen-content:not(.home-screen):not(.trade-screen) button.surface,
.screen-content:not(.home-screen):not(.trade-screen) button.surface-2 {
  border:1px solid rgba(238,209,151,.38) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -2px 5px rgba(0,0,0,.34),0 8px 17px -11px rgba(237,204,141,.52) !important;
}
.screen-content:not(.home-screen):not(.trade-screen) button[style*="linear-gradient"] {
  border:1px solid rgba(255,231,181,.70) !important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -3px 6px rgba(91,55,13,.18),0 10px 22px -12px rgba(237,204,141,.72) !important;
}
.screen-content:not(.home-screen):not(.trade-screen) button:active {
  filter:brightness(.94);
}

/* Unified 3D material system — presentation only. */
.screen-content .surface,
.screen-content [class~="border"],
.screen-content [class*="border-"] {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -2px 5px rgba(0,0,0,.32),
    0 9px 20px -15px rgba(0,0,0,.95),
    0 1px 0 rgba(238,205,143,.13);
}

.screen-content button {
  position:relative;
  border-color:rgba(221,226,232,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -2px 4px rgba(0,0,0,.30),
    0 7px 15px -11px rgba(0,0,0,.95),
    0 1px 0 rgba(238,205,143,.12);
  text-shadow:0 1px 2px rgba(0,0,0,.50);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.screen-content button:active {
  transform:translateY(1px) scale(.985);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.38),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 3px 8px -6px rgba(0,0,0,.9);
}
.screen-content input,
.screen-content textarea,
.screen-content select {
  border-color:rgba(221,226,232,.30) !important;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.52),inset 0 -1px 0 rgba(255,255,255,.055),0 1px 0 rgba(238,205,143,.08);
}

/* Bottom taskbar: clean frameless dock with embossed 3D labels. */
nav.fixed.bottom-0.glass {
  border:0 !important;
  background:linear-gradient(180deg,rgba(18,27,37,.965),rgba(5,10,16,.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -3px 8px rgba(0,0,0,.40),
    0 -10px 28px -18px rgba(237,204,141,.55),
    0 -4px 16px rgba(0,0,0,.48) !important;
}
nav.fixed.bottom-0 .tab-btn {
  margin:0;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-shadow:0 1px 0 rgba(255,255,255,.16),0 2px 2px rgba(0,0,0,.95),0 4px 7px rgba(0,0,0,.58);
}
nav.fixed.bottom-0 .tab-btn.tab-active {
  border:0 !important;
  background:radial-gradient(ellipse at center,rgba(237,204,141,.12),transparent 68%) !important;
  box-shadow:none !important;
  text-shadow:0 1px 0 rgba(255,245,218,.58),0 2px 2px rgba(74,43,8,.95),0 0 10px rgba(237,204,141,.52);
}
nav.fixed.bottom-0 .tab-btn .tab-icon {
  color:#d4b875;
  stroke:#d4b875;
  filter:drop-shadow(0 1px 0 rgba(255,241,204,.28)) drop-shadow(0 2px 1px rgba(47,27,4,.88));
}
nav.fixed.bottom-0 .tab-btn span {
  display:inline-block;
  min-width:31px;
  padding:2px 4px;
  border-radius:5px;
  color:#17130d;
  background:linear-gradient(135deg,#e5c896 0%,#c8a876 100%);
  -webkit-background-clip:border-box;
  background-clip:border-box;
  font-weight:800;
  line-height:1.2;
  -webkit-font-smoothing:antialiased;
  text-shadow:none !important;
}
nav.fixed.bottom-0 .tab-btn.tab-active span {
  color:#0d0a06;
  background:linear-gradient(135deg,#f4dca8 0%,#d9b66f 100%);
  -webkit-background-clip:border-box;
  background-clip:border-box;
  font-weight:850;
  text-shadow:none !important;
}
nav.fixed.bottom-0 .tab-btn.tab-active .tab-icon {
  color:#f3d797;
  stroke:#f3d797;
  filter:drop-shadow(0 1px 0 rgba(255,247,222,.45)) drop-shadow(0 2px 1px rgba(65,37,5,.88));
}