/* MacroEquity — UI refresh 2026
   Visual layer only: no application logic. */
:root{
  --surface-0:#07080B;
  --surface-1:#0A0C11;
  --surface-2:#0E1118;
  --surface-3:#121620;
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.13);
  --shadow:0 28px 80px -48px rgba(0,0,0,.95);
  --shadow-soft:0 16px 48px -34px rgba(0,0,0,.85);
  --radius-lg:22px;
  --radius-md:15px;
}

body{
  background:
    radial-gradient(900px 640px at 8% -6%, rgba(181,124,255,.105), transparent 62%),
    radial-gradient(900px 650px at 94% 12%, rgba(62,255,192,.07), transparent 60%),
    #07080B;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 84%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 84%);
}

/* Header */
header{ padding-top:13px; }
.nav{
  background:linear-gradient(180deg,rgba(15,17,24,.78),rgba(10,12,17,.62));
  border-color:rgba(255,255,255,.075);
  box-shadow:0 12px 42px -34px rgba(0,0,0,.9), inset 0 1px rgba(255,255,255,.035);
}
header.scrolled .nav{ background:rgba(8,10,15,.88); box-shadow:0 12px 42px -26px rgba(0,0,0,.94); }
.logo{ letter-spacing:-.15px; }
.logo .dot{ width:8px; height:8px; box-shadow:0 0 0 4px rgba(62,255,192,.07),0 0 16px rgba(62,255,192,.55); }
.navlinks{ gap:28px; }
.navlinks a{ position:relative; }
.navlinks a::after{
  content:""; position:absolute; left:50%; right:50%; bottom:-10px; height:1px;
  background:linear-gradient(90deg,var(--neon),var(--neon-2)); transition:left .25s ease,right .25s ease,opacity .25s; opacity:0;
}
.navlinks a:hover::after,.navlinks a.active::after{ left:8%; right:8%; opacity:.75; }
.navcta,.btn-primary{ box-shadow:0 8px 28px -17px rgba(62,255,192,.55); }

/* Generic page hero */
.page-head{ position:relative; }
.page-head::after{
  content:""; position:absolute; left:32px; right:32px; bottom:0; height:1px;
  background:linear-gradient(90deg,rgba(62,255,192,.25),rgba(181,124,255,.14),transparent 78%);
}
.page-head h1{ text-wrap:balance; }
.page-head p{ color:#9299aa; }
.eyebrow{ letter-spacing:1.7px; }

/* Section headings */
.section-head{ position:relative; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.065); }
.section-head::before{
  content:""; position:absolute; left:0; bottom:-1px; width:92px; height:1px;
  background:linear-gradient(90deg,var(--neon),var(--neon-2),transparent);
}
.section-head h2{ letter-spacing:-.7px; }
.section-title{
  position:relative; padding:0 0 14px 14px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:20px !important;
}
.section-title::before{
  content:""; position:absolute; left:0; top:3px; width:3px; height:18px; border-radius:9px;
  background:linear-gradient(var(--neon),var(--neon-2)); box-shadow:0 0 14px rgba(62,255,192,.22);
}
.section-title .tag{ padding:4px 7px; border:1px solid rgba(255,255,255,.065); border-radius:6px; background:rgba(255,255,255,.02); }

/* Home article cards */
body[data-page="home"] .section{ padding-top:86px; padding-bottom:88px; }
body[data-page="home"] .grid{ gap:18px; }
body[data-page="home"] .card{
  min-height:278px; border-radius:20px; padding:24px;
  background:linear-gradient(155deg,rgba(255,255,255,.047),rgba(255,255,255,.018));
  border-color:rgba(255,255,255,.075); box-shadow:var(--shadow-soft);
  isolation:isolate;
}
body[data-page="home"] .card::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 33%,transparent 72%,rgba(62,255,192,.018));
}
body[data-page="home"] .card:hover{
  transform:translateY(-5px); border-color:rgba(255,255,255,.135);
  box-shadow:0 30px 70px -44px rgba(0,0,0,.98),0 0 0 1px rgba(62,255,192,.025);
}
body[data-page="home"] .card img{
  filter:saturate(.78) contrast(1.03) brightness(.88); transition:filter .35s ease,transform .55s cubic-bezier(.2,.7,.2,1);
}
body[data-page="home"] .card:hover img{ filter:saturate(.96) contrast(1.05) brightness(.96); transform:scale(1.018); }
body[data-page="home"] .card .pill{
  border-color:color-mix(in srgb,currentColor 38%,transparent); background:rgba(8,10,14,.62);
  padding:5px 9px; font-size:9.5px; letter-spacing:.7px;
}
body[data-page="home"] .card .date{ font-size:10px; letter-spacing:.25px; }
body[data-page="home"] .card h3{ font-size:19px; letter-spacing:-.3px; line-height:1.32; margin-top:3px; }
body[data-page="home"] .card p{ color:#959cad; }
body[data-page="home"] .card .foot{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.055); }
body[data-page="home"] .card .read{ font-weight:600; color:#dce1e9; }
body[data-page="home"] .card:hover .read{ color:var(--neon); }
body[data-page="home"] #portfolio{ position:relative; }

/* Market page */
body[data-page="markets"] .page-head{ padding-top:72px; padding-bottom:42px; }
body[data-page="markets"] .section{ padding-top:30px; }
body[data-page="markets"] .stat-grid{ gap:14px; margin-bottom:58px; }
body[data-page="markets"] .stat-card{
  position:relative; overflow:hidden; padding:22px 21px 20px; border-radius:18px;
  background:linear-gradient(155deg,rgba(255,255,255,.048),rgba(255,255,255,.016));
  border-color:rgba(255,255,255,.075); box-shadow:var(--shadow-soft);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
body[data-page="markets"] .stat-card::after{
  content:""; position:absolute; width:100px; height:100px; right:-42px; top:-42px; border-radius:50%;
  background:radial-gradient(circle,rgba(62,255,192,.09),transparent 70%); pointer-events:none;
}
body[data-page="markets"] .stat-card:hover{ transform:translateY(-3px); border-color:rgba(62,255,192,.16); background:linear-gradient(155deg,rgba(255,255,255,.058),rgba(255,255,255,.02)); }
body[data-page="markets"] .stat-card .lbl{ font-size:10px; letter-spacing:.85px; }
body[data-page="markets"] .stat-card .val{ font-size:27px; letter-spacing:-.7px; }
body[data-page="markets"] .stat-card .sub{ font-family:'IBM Plex Mono',monospace; font-size:11px; }
body[data-page="markets"] .heat-grid{ gap:10px; margin-bottom:58px; }
body[data-page="markets"] .heat-card{
  min-height:112px; display:flex; flex-direction:column; justify-content:flex-end; border-radius:17px;
  box-shadow:inset 0 1px rgba(255,255,255,.04); transition:transform .22s ease,filter .22s ease,border-color .22s ease;
}
body[data-page="markets"] .heat-card:hover{ transform:translateY(-3px) scale(1.01); filter:brightness(1.08); border-color:rgba(255,255,255,.16); }
body[data-page="markets"] .heat-card .name{ color:rgba(255,255,255,.8); }
body[data-page="markets"] .heat-card .chg{ letter-spacing:-.5px; }
body[data-page="markets"] .movers-grid{ gap:16px; margin-bottom:58px; }
body[data-page="markets"] .movers-card{
  border-radius:20px; padding:22px 22px 12px; background:linear-gradient(160deg,rgba(255,255,255,.044),rgba(255,255,255,.015));
  border-color:rgba(255,255,255,.075); box-shadow:var(--shadow-soft);
}
body[data-page="markets"] .movers-card h3{ padding-bottom:12px; margin-bottom:3px; border-bottom:1px solid rgba(255,255,255,.06); }
body[data-page="markets"] .mover-row{ padding:13px 2px; border-color:rgba(255,255,255,.05); transition:padding .18s ease,background .18s ease; }
body[data-page="markets"] .mover-row:hover{ padding-left:7px; padding-right:7px; background:rgba(255,255,255,.018); }
body[data-page="markets"] .trend-row{ gap:9px; }
body[data-page="markets"] .trend-chip{
  border-radius:10px; background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.07);
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
body[data-page="markets"] .trend-chip:hover{ transform:translateY(-2px); border-color:rgba(181,124,255,.2); background:rgba(181,124,255,.04); }

/* Prices page */
body[data-page="prices"] .page-head{ padding-top:72px; padding-bottom:40px; }
body[data-page="prices"] .search-box input{
  min-height:45px; width:310px; border-radius:12px; background:rgba(255,255,255,.026); border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px rgba(255,255,255,.025); transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
body[data-page="prices"] .search-box input:focus{ background:rgba(255,255,255,.038); box-shadow:0 0 0 3px rgba(62,255,192,.055); }
body[data-page="prices"] .section{ padding-top:28px; }
body[data-page="prices"] .table-wrap{
  border-radius:20px; background:linear-gradient(170deg,rgba(255,255,255,.042),rgba(255,255,255,.012));
  border-color:rgba(255,255,255,.075); box-shadow:var(--shadow); overflow:auto;
}
body[data-page="prices"] thead{ background:rgba(5,7,10,.6); backdrop-filter:blur(12px); }
body[data-page="prices"] thead th{ padding-top:15px; padding-bottom:15px; border-color:rgba(255,255,255,.065); }
body[data-page="prices"] tbody tr{ border-color:rgba(255,255,255,.045); }
body[data-page="prices"] tbody tr:hover{ background:linear-gradient(90deg,rgba(62,255,192,.025),rgba(181,124,255,.018)); }
body[data-page="prices"] td{ padding-top:16px; padding-bottom:16px; }
body[data-page="prices"] .coin-cell img{ width:27px; height:27px; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
body[data-page="prices"] .coin-cell .nm{ letter-spacing:-.15px; }
body[data-page="prices"] .rank-cell{ opacity:.65; }

/* Footer */
footer{ padding-top:34px; }
.foot-card{
  position:relative; overflow:hidden; border-radius:21px;
  background:linear-gradient(155deg,rgba(255,255,255,.037),rgba(255,255,255,.014));
  border-color:rgba(255,255,255,.07); box-shadow:var(--shadow-soft);
}
.foot-card::before{
  content:""; position:absolute; top:0; left:0; width:150px; height:1px; background:linear-gradient(90deg,var(--neon),var(--neon-2),transparent); opacity:.72;
}
.foot-links{ gap:19px; }
.foot-links a{ transition:color .2s ease; }
.disclaimer{ color:#7f8798; }

/* Modals */
.modal{
  background:linear-gradient(165deg,#10131b,#0a0c11); border-color:rgba(255,255,255,.1); border-radius:20px;
  box-shadow:0 40px 110px -34px rgba(0,0,0,.98),inset 0 1px rgba(255,255,255,.035);
}
.field input,.field textarea,.field select{ background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.08); }
.field input:focus,.field textarea:focus,.field select:focus{ box-shadow:0 0 0 3px rgba(62,255,192,.055); }

/* Mobile */
@media (max-width:760px){
  .wrap{ padding-left:18px; padding-right:18px; }
  header{ padding:10px 0; }
  .nav{ height:52px; padding:0 14px; border-radius:14px; }
  .logo{ font-size:16px; }
  .navcta{ padding:8px 12px; font-size:11.5px; }
  .account-link{ font-size:11.5px !important; }
  .bottom-nav{
    left:10px; right:10px; bottom:9px; border:1px solid rgba(255,255,255,.08); border-radius:16px;
    padding:9px 6px calc(9px + env(safe-area-inset-bottom)); box-shadow:0 18px 55px -20px rgba(0,0,0,.95);
  }
  .bottom-nav a{ font-size:11px; border-radius:10px; }
  .bottom-nav a.active{ background:rgba(62,255,192,.055); }
  body[data-page="home"] .section{ padding:68px 18px; }
  body[data-page="home"] .section-head{ align-items:flex-start; margin-bottom:28px; }
  body[data-page="home"] .card{ min-height:0; padding:21px; }
  body[data-page="markets"] .page-head,body[data-page="prices"] .page-head{ padding-top:46px; }
  .page-head::after{ left:18px; right:18px; }
  body[data-page="markets"] .stat-grid{ gap:10px; margin-bottom:42px; }
  body[data-page="markets"] .stat-card{ padding:19px; }
  body[data-page="markets"] .heat-grid{ gap:8px; margin-bottom:42px; }
  body[data-page="markets"] .heat-card{ min-height:98px; padding:16px; }
  body[data-page="markets"] .movers-grid{ margin-bottom:42px; }
  body[data-page="prices"] .search-box,body[data-page="prices"] .search-box input{ width:100%; }
  body[data-page="prices"] .table-wrap{ border-radius:16px; }
  footer{ padding-left:18px; padding-right:18px; padding-bottom:92px; }
  .foot-card{ padding:24px 20px; }
  .foot-links{ gap:12px 16px; }
}

@media (max-width:480px){
  body[data-page="markets"] .stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="markets"] .stat-card .val{ font-size:22px; }
  body[data-page="markets"] .heat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-page="home"] .hero-actions{ flex-direction:column; align-items:stretch; }
  body[data-page="home"] .hero-actions a{ text-align:center; }
}

@media (prefers-reduced-motion:no-preference){
  .card,.stat-card,.heat-card,.movers-card,.trend-chip,.table-wrap{ animation:uiFade .5s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes uiFade{ from{ opacity:.01; transform:translateY(9px); } to{ opacity:1; transform:translateY(0); } }
}