/*
Theme Name: CoinPulse
Description: Live crypto prices homepage (blue & pink). Data from CoinGecko, cached server-side, refreshed every 30s in the browser.
Version: 1.1.0
Author: You
Text Domain: coinpulse
*/
:root{--ink:#0A1640;--blue:#2D5BFF;--pink:#FF3D9A;--mist:#F3F5FF;--line:#DDE3FA;--mute:#5B6690;--bg:#fff;--card:#fff}
@media(prefers-color-scheme:dark){:root{--ink:#EAF0FF;--mist:#0B1230;--line:#222C5C;--mute:#97A3D6;--bg:#070C24;--card:#0E1738;--blue:#6C8CFF}}
*{box-sizing:border-box}
body{margin:0;font-family:Sora,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.stats{background:#0A1640;color:#CFD8FF;font-size:.78rem}
.stats .wrap{display:flex;gap:22px;overflow-x:auto;padding-top:8px;padding-bottom:8px;white-space:nowrap}
.stats b{color:#fff;font-weight:600}
header.site{border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{font-weight:700;font-size:1.25rem;display:flex;align-items:center;gap:8px}
.logo i{width:14px;height:14px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px rgba(255,61,154,.22);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(255,61,154,0)}}
@media(prefers-reduced-motion:reduce){.logo i{animation:none}}
nav a{margin-right:20px;font-size:.92rem;color:var(--mute)}nav a:hover{color:var(--blue)}
#q{margin-left:auto;border:1px solid var(--line);background:var(--mist);color:var(--ink);border-radius:999px;padding:9px 16px;width:230px;font:inherit;font-size:.88rem}
.hero{padding:44px 0 28px}
.hero h1{font-size:clamp(2rem,4.5vw,3.3rem);line-height:1.1;margin:0 0 10px;letter-spacing:-.02em}
.hero p{margin:0;color:var(--mute);max-width:60ch}
.hero .big{color:var(--blue);font-weight:700}
.live{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--mute);margin-top:14px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--pink)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:34px}
@media(max-width:900px){.grid3{grid-template-columns:1fr}#q{display:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.card h2{font-size:1rem;margin:0 0 10px;display:flex;justify-content:space-between}
.card.t{border-top:4px solid var(--blue)}.card.g{border-top:4px solid var(--blue)}.card.l{border-top:4px solid var(--pink)}
.li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:.9rem}
.li img,td img{width:24px;height:24px;border-radius:50%}
.li .n{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.li small{color:var(--mute)}
.up{color:var(--blue)}.dn{color:var(--pink)}.up,.dn{font-weight:600}
.up::before{content:"▲ ";font-size:.65em}.dn::before{content:"▼ ";font-size:.65em}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:860px;font-size:.88rem}
th{font-weight:600;color:var(--mute);text-align:right;padding:12px 14px;background:var(--mist);cursor:pointer;white-space:nowrap}
td{padding:12px 14px;text-align:right;border-top:1px solid var(--line);white-space:nowrap}
th:nth-child(2),td:nth-child(2){text-align:left}
td:nth-child(2){display:flex;align-items:center;gap:10px}td small{color:var(--mute);margin-left:4px}
tr:hover td{background:var(--mist)}
.fu{animation:fu 1s}.fd{animation:fd 1s}
@keyframes fu{from{background:rgba(45,91,255,.25)}}@keyframes fd{from{background:rgba(255,61,154,.25)}}
.more{display:block;margin:20px auto 50px;background:var(--pink);color:#fff;border:0;border-radius:999px;padding:12px 28px;font:inherit;font-weight:600;cursor:pointer}
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--mute);font-size:.8rem}
/* coin pages */
.li a.n:hover,td a:hover b{color:var(--blue)}td a{color:inherit}
.coin{padding-top:20px;padding-bottom:50px}.crumb a{color:var(--mute);font-size:.88rem}
.chead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:14px 0 20px}
.chead>img{width:56px;height:56px;border-radius:50%}
.chead h1{margin:0;font-size:1.8rem}.chead h1 small{color:var(--mute);font-size:.55em;font-weight:600}
.rank{display:inline-block;background:var(--pink);color:#fff;border-radius:999px;padding:2px 12px;font-size:.78rem;font-weight:600}
.px{margin-left:auto;font-size:1.1rem}.px b{font-size:2rem;margin-right:8px}.px small{color:var(--mute);margin-left:6px}
.cchart{padding:14px}.rng{display:flex;gap:6px;justify-content:flex-end;margin-bottom:8px}
.rng button{border:1px solid var(--line);background:var(--mist);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:.8rem;cursor:pointer}
.rng button.on{background:var(--blue);color:#fff;border-color:var(--blue)}
.chartbox{position:relative;min-height:260px;touch-action:pan-y}.chartbox svg{width:100%;height:auto;display:block;color:var(--ink)}
.tip{position:absolute;top:6px;transform:translateX(-50%);background:var(--ink);color:var(--bg);border-radius:10px;padding:6px 10px;font-size:.78rem;pointer-events:none;opacity:0;white-space:nowrap;text-align:center}
.cstats{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:18px 0}
.st{padding:14px}.st small{display:block;color:var(--mute);font-size:.75rem}.st b{font-size:1.05rem}
.cabout h2{margin:0 0 10px}.desc{max-width:78ch;color:var(--ink)}.desc a{color:var(--blue);text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chips a,.chips span{border:1px solid var(--line);background:var(--mist);border-radius:999px;padding:5px 14px;font-size:.8rem}
.chips a{background:var(--blue);color:#fff;border-color:var(--blue)}
.empty{color:var(--mute);padding:30px 0;text-align:center}
@media(max-width:700px){.px{margin-left:0;width:100%}}