/* ============================================================================
   MOON.lite — 1of1 Design System · COMPONENTS
   Self-hosted fonts + real responsive components matched 1:1 to the comp.
   Requires ds_1of1_tokens.css. Fonts under /vendor/fonts-1of1/.
   ============================================================================ */
@font-face{font-family:"Fredoka";src:url("/vendor/fonts-1of1/fredoka-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("/vendor/fonts-1of1/inter-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-ui);
  color:var(--text-primary);
  background:var(--bg-base);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;position:relative;overflow-x:hidden;
}
/* cosmic ground: radial lift top-center + edge vignette over deep navy */
.sky{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(120% 80% at 50% -8%, var(--bg-lift) 0%, var(--bg-base) 42%, var(--bg-deep) 100%);}
#starfield{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;}

.container{max-width:var(--container);margin:0 auto;padding:0 32px;}

/* ---------- NAV ---------- */
.nav{height:88px;display:flex;align-items:center;gap:28px;padding:0 16px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto;margin-right:8px;}
.brand__mark{width:44px;height:44px;flex:0 0 auto;filter:drop-shadow(0 0 14px var(--glow-ice)) drop-shadow(0 0 30px var(--glow-soft));}
.brand__word{font-family:var(--font-brand);font-weight:600;font-size:30px;letter-spacing:-.01em;
  color:var(--text-wordmark);line-height:1;text-shadow:0 0 18px rgba(120,160,255,.35);}
.nav__links{display:flex;align-items:center;gap:6px;margin:0 auto;}
.nav__link{font-family:var(--font-ui);font-weight:500;font-size:16px;color:var(--text-nav);
  text-decoration:none;padding:9px 16px;border-radius:var(--r-pill);transition:color var(--dur),background var(--dur);}
.nav__link:hover{color:#dbe6fb;background:rgba(255,255,255,.03);}
.nav__link.is-active{color:var(--text-primary);
  background:linear-gradient(180deg,rgba(46,74,140,.34),rgba(20,38,78,.30));
  border:1px solid rgba(126,166,255,.42);
  box-shadow:0 0 0 1px rgba(94,139,239,.14),0 8px 22px -12px rgba(60,110,230,.6),
    inset 0 1px 0 rgba(180,205,255,.12);}
.nav__right{display:flex;align-items:center;gap:12px;flex:0 0 auto;}

/* theme toggle */
.icon-btn{width:42px;height:42px;border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--surface-inactive);border:1px solid var(--border-hair);color:var(--ice-100);
  cursor:pointer;transition:background var(--dur),border var(--dur);}
.icon-btn:hover{background:rgba(255,255,255,.05);border-color:var(--border-chip);}

/* wallet + arc chips */
.chip{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(16,26,44,.7),rgba(8,14,26,.7));
  border:1px solid var(--border-chip);color:var(--text-primary);font-weight:500;font-size:14.5px;
  backdrop-filter:blur(var(--blur-glass));cursor:pointer;transition:border var(--dur),background var(--dur);}
.chip:hover{border-color:rgba(150,180,235,.28);}
.chip__dot{width:16px;height:16px;border-radius:5px;background:linear-gradient(135deg,var(--ice-300),var(--ice-600));
  box-shadow:0 0 10px var(--glow-ice);}
.chip .caret{opacity:.6;margin-left:2px;}
.chip--arc .arc-glyph{width:17px;height:17px;color:var(--ice-200);}

/* ---------- SEARCH + FILTER ROW ---------- */
.tools{display:flex;align-items:center;gap:14px;padding:16px 8px 4px;}
.search{flex:1 1 auto;display:flex;align-items:center;gap:12px;height:56px;padding:0 18px;
  border-radius:var(--r-search);background:linear-gradient(180deg,rgba(11,20,36,.72),rgba(7,13,25,.72));
  border:1px solid var(--border-chip);backdrop-filter:blur(var(--blur-glass));
  transition:border var(--dur),box-shadow var(--dur);}
.search:focus-within{border-color:var(--ice-500);box-shadow:0 0 0 3px rgba(94,139,239,.18),0 0 26px -6px var(--glow-ice);}
.search svg{color:var(--text-placeholder);flex:0 0 auto;}
.search input{flex:1;background:none;border:0;outline:0;color:var(--text-primary);font:500 16px var(--font-ui);}
.search input::placeholder{color:var(--text-placeholder);}
.kbd{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 9px;border-radius:8px;
  background:var(--surface-elevated);border:1px solid var(--border-hair);
  color:#aebdd6;font:600 13px var(--font-ui);flex:0 0 auto;}

.pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-pill);
  background:var(--surface-inactive);border:1px solid var(--border-pill);color:var(--text-nav);
  font:500 15px var(--font-ui);cursor:pointer;white-space:nowrap;
  transition:background var(--dur),border var(--dur),color var(--dur);}
.pill:hover{background:rgba(255,255,255,.04);color:#cdd9ee;border-color:var(--border-chip);}
.pill svg{width:17px;height:17px;flex:0 0 auto;}
.pill.is-active{color:var(--text-primary);
  background:linear-gradient(180deg,var(--pill-active-top),var(--pill-active-bot));
  border:1px solid var(--pill-active-border);
  box-shadow:0 0 0 1px rgba(94,139,239,.12),0 10px 26px -12px rgba(60,110,230,.75),
    inset 0 1px 0 rgba(180,205,255,.18);}
.pill.is-active svg{color:var(--ice-100);}

.btn-create{display:inline-flex;align-items:center;gap:9px;height:56px;padding:0 26px;border-radius:var(--r-btn);
  border:0;cursor:pointer;font:600 16px var(--font-ui);color:var(--create-ink);
  background:linear-gradient(135deg,var(--create-hi) 0%,var(--create-mid) 52%,var(--create-lo) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 30px -10px var(--glow-cyan),0 0 34px -8px rgba(150,190,255,.5);
  transition:transform var(--dur-fast),box-shadow var(--dur);}
.btn-create:hover{transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 14px 36px -10px var(--glow-cyan),0 0 44px -6px rgba(150,190,255,.65);}
.btn-create .plus{font-size:20px;line-height:1;margin-top:-1px;}

/* ---------- GRADUATED PANEL ---------- */
.panel{margin-top:16px;border-radius:var(--r-panel);padding:32px;
  background:linear-gradient(180deg,rgba(10,19,34,.62),rgba(6,12,24,.62));
  border:1px solid var(--border-panel);backdrop-filter:blur(calc(var(--blur-glass) + 4px));
  box-shadow:var(--shadow-panel),inset 0 1px 0 rgba(180,205,255,.05);position:relative;}
.panel__head{display:flex;align-items:center;gap:14px;}
.panel__title{font:700 40px/1 var(--font-ui);letter-spacing:-.02em;color:var(--text-primary);margin:0;}
.count{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--surface-chip);border:1px solid var(--border-chip);
  color:var(--text-primary);font:600 15px var(--font-ui);}
.panel__sub{margin:10px 0 0;color:var(--text-secondary);font:400 16px/1.4 var(--font-ui);}

/* ---------- TOKEN GRID + CARD ---------- */
.grid{margin-top:26px;display:grid;grid-template-columns:repeat(var(--grid-cols),1fr);gap:var(--grid-gap);}
.card{position:relative;border-radius:var(--r-card);padding:14px;
  background:linear-gradient(180deg,var(--surface-card-top),var(--surface-card-bot));
  border:1px solid var(--border-card);box-shadow:var(--shadow-card);
  transition:transform var(--dur) var(--ease-out),border var(--dur),box-shadow var(--dur);}
.card:hover{transform:translateY(-3px);border-color:rgba(126,166,255,.34);
  box-shadow:0 22px 48px -26px rgba(0,6,20,.95),0 0 34px -12px var(--glow-ice);}
.card__art{position:relative;aspect-ratio:16/10;border-radius:var(--r-art);overflow:hidden;
  background:radial-gradient(80% 80% at 50% 42%,#0a1728 0%,#060c18 70%,#04080f 100%);
  display:grid;place-items:center;}
.card__art::before{content:"";position:absolute;width:66%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(94,139,239,.30) 0%,rgba(94,139,239,.10) 45%,transparent 68%);
  filter:blur(4px);pointer-events:none;}
.card__art img{width:100%;height:100%;object-fit:cover;display:block;}
.card__art svg.identicon{position:relative;width:88%;height:88%;object-fit:contain;
  filter:drop-shadow(0 0 22px var(--glow-ice)) drop-shadow(0 0 40px var(--glow-soft));}
.card__art .glow{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 70px -20px var(--glow-ice);border-radius:inherit;}
.tag{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;height:28px;
  padding:0 12px;border-radius:var(--r-tag);background:var(--surface-tag);
  border:1px solid rgba(158,190,255,.30);backdrop-filter:blur(8px);
  color:#e4eeff;font:600 13px var(--font-ui);letter-spacing:.01em;}
.card__name{margin:14px 0 0;font:600 20px/1.15 var(--font-ui);color:var(--text-primary);}
.card__ticker{margin:3px 0 0;font:600 15px var(--font-ui);color:var(--text-ticker);}
.card__mc{margin:8px 0 0;display:flex;align-items:baseline;gap:7px;}
.card__mc b{font:700 20px var(--font-ui);color:var(--text-primary);}
.card__mc span{font:600 12px var(--font-ui);color:var(--text-muted);letter-spacing:.04em;}
.card__foot{margin-top:10px;display:flex;align-items:center;justify-content:space-between;}
.card__addr{font:500 14px var(--font-ui);color:var(--text-muted);}
.card__age{font:500 14px var(--font-ui);color:var(--text-muted);}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1440px){.grid{--grid-cols:4;}}
@media(max-width:1120px){.grid{--grid-cols:3;} .nav__links{display:none;}}
@media(max-width:820px){.grid{--grid-cols:2;} .container{padding:0 18px;}
  .panel{padding:22px;} .panel__title{font-size:32px;} .tools{flex-wrap:wrap;} .btn-create{order:5;}}
@media(max-width:520px){.grid{--grid-cols:1;}}