@import url("css2");
* { box-sizing: border-box; } html,body { margin:0; min-height:100%; } body { color:#f1f1fa; background:#05040d; font-family:Inter,Arial,sans-serif; font-size:12px; }
.app-shell { min-height:100vh; overflow:hidden; position:relative; }.space { position:fixed; z-index:0; inset:0; overflow:hidden; pointer-events:none; background:#05040d; }.space:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,3,13,.76) 0%,rgba(4,3,13,.33) 48%,rgba(4,3,13,.67) 100%); }.space-bg { height:100%; width:100%; object-fit:cover; object-position:center; opacity:.6; }.orbit { position:absolute; inset:0; margin:auto; opacity:.34; }.orbit-outer { width:min(95vw,1060px); animation:spin 60s linear infinite; }.orbit-inner { width:min(58vw,660px); animation:spin 30s linear infinite reverse; }
.nav-bar,.token-banner,main { position:relative; z-index:1; }.nav-bar { height:65px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(7,6,18,.83); display:flex; gap:25px; align-items:center; backdrop-filter:blur(16px); }.logo { color:#d7d7fa; text-decoration:none; font-size:42px; font-weight:800; letter-spacing:-4px; line-height:1; }.nav-bar nav { display:flex; align-items:center; gap:27px; }.nav-bar nav a { color:#767688; text-decoration:none; font-size:13px; }.nav-bar nav a.active { color:#fff; }.search { height:38px; max-width:576px; flex:1; margin:auto; padding:0 15px; border:1px solid #1b1b2c; border-radius:8px; background:#0c0b1b; display:flex; align-items:center; gap:10px; color:#9b9aad; }.search input { width:100%; border:0; outline:0; background:transparent; color:#fff; font-size:13px; }.search input::placeholder { color:#898899; }.wallet { min-width:58px; padding:7px 10px; border:1px solid #202033; border-radius:8px; background:#0d0c1c; text-align:center; }.wallet small,.market-stats small { color:#898899; font-size:9px; }.wallet strong { display:block; font-size:12px; }.profile { width:38px; height:38px; border:0; border-radius:10px; background:#d8ef61; color:#10101e; font-size:24px; font-weight:bold; }
.token-banner { min-height:82px; padding:12px 20px; border-bottom:1px solid rgba(255,255,255,.06); background:rgba(6,5,17,.74); display:flex; align-items:center; gap:12px; backdrop-filter:blur(12px); }.token-image { width:48px; height:48px; border-radius:50%; object-fit:cover; background:#191824; }.token-title { align-self:center; min-width:150px; }.token-title strong { display:block; font-size:19px; }.token-title div { display:flex; gap:7px; align-items:center; color:#88889a; font-size:11px; max-width:150px; white-space:nowrap; overflow:hidden; }.token-title span { overflow:hidden; text-overflow:ellipsis; }.token-title button { border:0; background:none; color:#818196; cursor:pointer; font-size:16px; }.market-stats { margin-left:auto; display:flex; align-items:center; gap:34px; }.market-stats div { display:flex; flex-direction:column; gap:5px; white-space:nowrap; }.market-stats b { font-size:13px; }.positive { color:#11bd83; }.negative { color:#df3560; }
main { width:min(100% - 32px, 538px); margin:25px auto 40px; }.panel { border:1px solid #252438; border-radius:17px; background:rgba(12,10,29,.9); box-shadow:0 16px 50px rgba(0,0,0,.18); backdrop-filter:blur(12px); }.vote-card { padding:21px 20px 20px; text-align:center; }.eyebrow { margin:0 0 10px; color:#8d8c9e; font-size:10px; }.vote-image { width:60px; height:60px; border-radius:50%; object-fit:cover; background:#1b1a29; }.vote-card h1 { margin:12px 0 7px; font-size:23px; line-height:1.1; letter-spacing:-1px; }.vote-card h1 span { color:#15bc83; }.intro { margin:0; color:#9594a6; font-size:13px; }.vote-labels { display:flex; justify-content:space-between; margin-top:23px; color:#10b985; font-size:11px; }.vote-labels span:last-child { color:#e33861; }.vote-bar { height:10px; margin-top:7px; border-radius:100px; overflow:hidden; background:#e33861; }.vote-bar i { display:block; width:80%; height:100%; border-radius:100px 0 0 100px; background:#10b685; transition:width .25s ease; }.total { margin:12px 0 20px; color:#868596; font-size:11px; }.total i { display:inline-block; width:6px; height:6px; border-radius:50%; margin:0 5px 1px 0; background:#10b685; }.vote-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.vote-actions button { height:49px; border:0; border-radius:28px; color:#fff; font-weight:800; font-size:15px; cursor:pointer; transition:filter .15s, transform .15s; }.vote-actions button:hover { filter:brightness(1.15); }.vote-actions button:active { transform:scale(.98); }.yes { background:#10b685; }.no { background:#e23760; }
.app-footer { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:16px; padding:0 20px 28px; color:#9594a6; font-size:12px; }.store-links { display:flex; gap:8px; }.store-links a { display:block; overflow:hidden; border-radius:6px; background:rgba(255,255,255,.2); backdrop-filter:blur(12px); transition:opacity .15s ease, box-shadow .15s ease, backdrop-filter .15s ease; }.store-links a:hover { opacity:.9; box-shadow:0 0 0 1px rgba(255,255,255,.4); backdrop-filter:blur(8px); }.store-links img { display:block; width:auto; height:40px; }
.activity { margin-top:15px; overflow:hidden; }.activity h2 { margin:0; padding:11px 16px; border-bottom:1px solid #26243a; font-size:13px; }.activity-head,.activity-row { display:grid; grid-template-columns:1fr 42px 45px 42px; padding:0 16px; column-gap:5px; }.activity-head { padding-top:12px; color:#838293; font-size:11px; }.activity-row { min-height:24px; align-items:center; font-size:11px; }.activity-row .voter { color:#edecf6; font-weight:600; }.activity-row .yes-vote { color:#11b984; }.activity-row .no-vote { color:#e33b62; }.activity-row .when { color:#858495; }
@keyframes spin { to { transform:rotate(360deg); } } @media(max-width:900px) { .market-stats { gap:16px; }.market-stats div:nth-child(4),.market-stats div:nth-child(5),.market-stats div:nth-child(6) { display:none; } } @media(max-width:650px) { .nav-bar { gap:15px; }.nav-bar nav,.wallet,.search { display:none; }.profile { margin-left:auto; }.token-banner { padding:10px 14px; }.market-stats { gap:14px; }.market-stats div:nth-child(2),.market-stats div:nth-child(3) { display:none; }.token-title { min-width:110px; }.token-title strong { font-size:17px; } main { margin-top:20px; }.orbit-outer { width:135vw; }.orbit-inner { width:90vw; } } @media(max-width:380px) { main { width:calc(100% - 20px); }.token-banner { gap:8px; }.token-image { width:42px; height:42px; }.market-stats { gap:8px; } }
.search svg { width:16px; height:16px; fill:none; stroke:#a19fb3; stroke-width:2; }.profile { padding:0; overflow:hidden; cursor:pointer; }.profile img { display:block; width:100%; height:100%; object-fit:cover; }.token-title button { width:16px; height:16px; padding:0; }.token-title button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }



/* Mobile resilience: keep every component legible and inside the viewport. */
body { overflow-x:hidden; }
.token-title, .market-stats, .market-stats div, .content, .vote-card, .activity { min-width:0; }
.intro { overflow-wrap:anywhere; }
@media (max-width: 650px) {
  .app-shell { min-height:100svh; }
  .nav-bar { height:60px; padding:calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
  .logo { font-size:36px; }
  .token-banner { align-items:center; min-height:70px; padding-inline:max(14px, env(safe-area-inset-left)); }
  .token-title { flex:1; max-width:calc(100vw - 130px); }
  .token-title div { max-width:100%; }
  .market-stats { margin-left:0; }
  .market-stats div { max-width:78px; overflow:hidden; }
  .market-stats b { overflow:hidden; text-overflow:ellipsis; }
  main { width:calc(100% - 24px); margin:16px auto 28px; }
  .vote-card { padding:18px 14px; border-radius:15px; }
  .vote-card h1 { font-size:clamp(20px, 6vw, 23px); }
  .intro { font-size:12px; line-height:1.45; }
  .vote-labels { margin-top:18px; }
  .vote-actions button { height:48px; font-size:14px; }
  .activity-head, .activity-row { grid-template-columns:minmax(0, 1fr) 38px 36px 42px; padding-inline:13px; }
  .app-footer { flex-direction:column; gap:10px; padding:0 max(14px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); text-align:center; }
}
@media (max-width: 360px) {
  .token-banner { gap:7px; }
  .token-image { width:38px; height:38px; }
  .market-stats { gap:8px; }
  .vote-actions { gap:8px; }
  .store-links { width:100%; justify-content:center; gap:5px; }
  .store-links a { transform:scale(.92); transform-origin:center; }
}

/* Store badge sizing: both badges use the same full, uncropped footprint. */
.store-links { align-items:center; flex-wrap:nowrap; }
.store-links a { flex:0 0 auto; overflow:visible; line-height:0; }
.store-links img { display:block; width:150px; height:50px; max-width:none; object-fit:contain; }