/* ============================================================
   COINPULSE — design tokens
   ============================================================ */
:root{
  --bg: #05060a;
  --bg-soft: #0a0d14;
  --surface: rgba(255,255,255,0.035);
  --surface-hover: rgba(255,255,255,0.065);
  --border: rgba(255,255,255,0.09);
  --border-soft: rgba(255,255,255,0.055);
  --white: #f4f6fa;
  --muted: #8892a4;
  --muted-dim: #5b6272;

  --violet: #7c5cfc;
  --violet-soft: rgba(124,92,252,0.16);
  --teal: #2fe6c9;
  --teal-soft: rgba(47,230,201,0.15);
  --pink: #ff4d8d;
  --pink-soft: rgba(255,77,141,0.15);
  --red: #ff5c66;
  --red-soft: rgba(255,92,102,0.15);

  --grad-pulse: linear-gradient(90deg, var(--violet), var(--teal) 55%, var(--pink));

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing: border-box; }
html{ color-scheme: dark; }
body{
  margin:0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4{ font-family: var(--font-display); margin:0; }
p{ margin:0; }
button{ font-family: inherit; }
button, input, select, textarea{ color: inherit; }
::selection{ background: var(--violet-soft); color: var(--white); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

:focus-visible{ outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position: sticky; top:0; z-index: 40;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 32px;
  background: rgba(5,6,10,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border-soft);
}
.brand{ display:flex; align-items:center; gap:9px; background:none; border:none; cursor:pointer; padding:4px 0; }
.brand-name{ font-family: var(--font-display); font-weight:600; font-size:1.15rem; letter-spacing:-0.01em; }
.topnav{ display:flex; gap:4px; }
.topnav-link{
  background:none; border:none; color: var(--muted); font-size:0.92rem; font-weight:500;
  padding: 8px 14px; border-radius: var(--radius-pill); cursor:pointer;
  transition: color .2s var(--ease-out), background .2s var(--ease-out);
}
.topnav-link:hover{ color: var(--white); background: var(--surface); }
.topnav-link.is-active{ color: var(--white); background: var(--surface); }
.topbar-actions{ display:flex; align-items:center; gap:10px; }

@media (max-width: 720px){
  .btn-ghost{ display:none; }
  .topbar{ padding: 14px 16px; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: var(--radius-pill);
  font-weight:600; font-size:0.9rem; letter-spacing:0.01em;
  padding: 10px 20px; cursor:pointer; border:1px solid transparent;
  transition: transform .18s var(--ease-spring), box-shadow .25s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out);
  white-space:nowrap;
}
.btn:active{ transform: scale(0.96); }
.btn-solid{
  background: var(--grad-pulse); color:#08070c;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 24px -8px rgba(124,92,252,0.55);
}
.btn-solid:hover{ box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 10px 30px -6px rgba(124,92,252,0.7); }
.btn-outline{
  background: transparent; border-color: var(--border); color: var(--white);
}
.btn-outline:hover{ border-color: rgba(255,255,255,0.3); background: var(--surface); }
.btn-ghost{ background:none; color: var(--muted); }
.btn-ghost:hover{ color: var(--white); }
.btn-lg{ padding: 14px 28px; font-size:0.97rem; }
.btn-block{ width:100%; }

/* ============================================================
   VIEW SWITCHING (morph)
   ============================================================ */
.view{
  display:none;
  opacity:0; transform: translateY(14px) scale(.99);
}
.view.view--active{
  display:block;
  animation: viewIn .55s var(--ease-out) forwards;
}
@keyframes viewIn{
  from{ opacity:0; transform: translateY(14px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ============================================================
   HOME / HERO
   ============================================================ */
#view-home{ position:relative; min-height: calc(100vh - 65px); align-items:center; justify-content:center; padding: 40px 24px 80px; }
#view-home.view--active{ display:flex; }

.pulse-field{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 92%);
}
#pulse-svg{ width:100%; height:100%; opacity:0.55; }
.pulse-glow{ animation: glowPulse 4.2s ease-in-out infinite; }
@keyframes glowPulse{
  0%,100%{ opacity:0.6; }
  50%{ opacity:1; }
}
.pulse-line{ filter: drop-shadow(0 0 10px rgba(124,92,252,0.45)); }
.pulse-line-echo{ opacity:0.28; transform: translateY(6px); }

.hero{ position:relative; z-index:2; max-width: 720px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:22px; }
.hero-title{
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  font-weight:600; letter-spacing:-0.02em; line-height:1.08;
  color: var(--white);
}
.hero-sub{
  font-size: clamp(0.98rem, 1.6vw, 1.12rem); color: var(--muted);
  line-height:1.6; max-width: 560px;
}
.hero-actions{ display:flex; gap:14px; margin-top:6px; flex-wrap:wrap; justify-content:center; }

.hero-stats{
  margin-top: 34px; display:flex; gap:0; border-top:1px solid var(--border-soft); padding-top:26px; width:100%;
  max-width: 560px; justify-content:space-between;
}
.hero-stat{ display:flex; flex-direction:column; gap:4px; align-items:center; flex:1; }
.hero-stat b{ font-family: var(--font-mono); font-size:1.35rem; font-weight:500; color: var(--white); }
.hero-stat span{ font-size:0.76rem; color: var(--muted-dim); text-transform: lowercase; }

@media (max-width: 560px){
  .hero-stats{ flex-wrap:wrap; row-gap:18px; }
  .hero-stat{ flex-basis: 45%; }
}

/* ============================================================
   LISTINGS
   ============================================================ */
#view-listings{ max-width: 1280px; margin: 0 auto; padding: 40px 28px 100px; }
.listings-head-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.listings-title{ font-size:1.7rem; font-weight:600; letter-spacing:-0.01em; }

.search-wrap{
  display:flex; align-items:center; gap:9px; background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-pill); padding: 9px 16px; width: 320px; max-width: 100%; color: var(--muted-dim);
  transition: border-color .2s;
}
.search-wrap:focus-within{ border-color: var(--violet); color: var(--white); }
.search-wrap input{ background:none; border:none; width:100%; font-size:0.88rem; color: var(--white); }
.search-wrap input::placeholder{ color: var(--muted-dim); }
.search-wrap input:focus{ outline:none; }

.tabs-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.tabs{ display:flex; gap:4px; background: var(--surface); padding:4px; border-radius: var(--radius-pill); border:1px solid var(--border-soft); }
.tab{
  background:none; border:none; color: var(--muted); font-weight:600; font-size:0.85rem;
  padding: 8px 18px; border-radius: var(--radius-pill); cursor:pointer; position:relative;
  transition: color .2s;
}
.tab:hover{ color: var(--white); }
.tab.is-active{ color:#08070c; }
.tab.is-active::before{
  content:''; position:absolute; inset:0; background: var(--grad-pulse); border-radius: var(--radius-pill); z-index:-1;
}

.filter-btn{
  display:flex; align-items:center; gap:8px; background: var(--surface); border:1px solid var(--border);
  color: var(--white); padding: 9px 16px; border-radius: var(--radius-pill); cursor:pointer; font-size:0.85rem; font-weight:600;
  transition: border-color .2s, background .2s;
}
.filter-btn:hover{ border-color: rgba(255,255,255,0.25); }
.filter-btn.is-open{ border-color: var(--teal); color: var(--teal); }
.filter-count{
  background: var(--grad-pulse); color:#08070c; font-size:0.68rem; font-weight:700;
  border-radius: var(--radius-pill); padding: 1px 7px; min-width:16px; text-align:center;
}

/* filter panel */
.filter-panel{
  overflow:hidden; max-height:0; opacity:0;
  transition: max-height .45s var(--ease-out), opacity .35s var(--ease-out), margin .45s var(--ease-out);
  margin-top:0;
}
.filter-panel.is-open{
  max-height: 420px; opacity:1; margin-top:16px;
}
.filter-panel-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px;
  font-size:0.8rem; color: var(--muted); font-weight:600;
}
.clear-all{ background:none; border:none; color: var(--pink); font-size:0.8rem; font-weight:600; cursor:pointer; }
.clear-all:hover{ text-decoration: underline; }

.filter-groups{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;
  background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-m); padding: 20px;
  backdrop-filter: blur(14px);
}
.filter-label{ font-size:0.74rem; text-transform: lowercase; letter-spacing:0.02em; color: var(--muted-dim); margin-bottom:10px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  background: rgba(255,255,255,0.02); border:1px solid var(--border); color: var(--muted);
  font-size:0.78rem; font-weight:500; padding:6px 13px; border-radius: var(--radius-pill); cursor:pointer;
  transition: all .18s var(--ease-out);
}
.chip:hover{ border-color: rgba(255,255,255,0.3); color: var(--white); }
.chip.is-active{ background: var(--violet-soft); border-color: var(--violet); color: var(--white); }

@media (max-width: 820px){
  .filter-groups{ grid-template-columns: 1fr; gap:18px; }
}

/* ============================================================
   TOKEN GRID + CARD
   ============================================================ */
.token-grid{
  margin-top: 26px;
  display:grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap:16px;
}

.token-card{
  position:relative; background: var(--surface); border:1px solid var(--border-soft);
  border-radius: var(--radius-m); padding:18px; cursor:pointer; overflow:hidden;
  transition: transform .28s var(--ease-out), border-color .25s var(--ease-out), background .25s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: cardIn .5s var(--ease-out) backwards;
}
@keyframes cardIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.token-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.18);
  background: var(--surface-hover);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
}
.token-card::after{
  content:''; position:absolute; inset:0; border-radius: inherit; padding:1px;
  background: var(--grad-pulse); opacity:0; transition: opacity .3s;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.token-card:hover::after{ opacity:0.5; }

.tc-promo{
  position:absolute; top:12px; right:12px; font-family: var(--font-mono); font-size:0.66rem; font-weight:600;
  padding:3px 8px; border-radius: var(--radius-pill); background: var(--pink-soft); color: var(--pink);
  border:1px solid rgba(255,77,141,0.35); letter-spacing:0.02em;
  animation: promoGlow 2.4s ease-in-out infinite;
}
@keyframes promoGlow{ 0%,100%{ box-shadow: 0 0 0 rgba(255,77,141,0); } 50%{ box-shadow: 0 0 12px rgba(255,77,141,0.45); } }

.tc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tc-id{ display:flex; gap:10px; align-items:center; min-width:0; }
.tc-avatar{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:0.95rem; color:#08070c;
}
.tc-name-block{ min-width:0; }
.tc-name{ font-size:0.95rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.tc-symbol{ color: var(--muted-dim); font-size:0.78rem; margin-left:5px; font-family: var(--font-mono); }
.tc-chain{ font-size:0.72rem; color: var(--muted); margin-top:2px; display:flex; align-items:center; gap:5px; }
.tc-chain-dot{ width:6px; height:6px; border-radius:50%; }

.tc-mcap{ text-align:right; flex-shrink:0; }
.tc-mcap b{ display:block; font-family: var(--font-mono); font-size:0.95rem; font-weight:500; }
.tc-mcap span{ font-size:0.68rem; color: var(--muted-dim); }
.tc-change{ font-family: var(--font-mono); font-size:0.72rem; font-weight:600; margin-top:3px; }
.tc-change.is-up{ color: var(--teal); }
.tc-change.is-down{ color: var(--red); }

.tc-chart{ margin: 12px 0 10px; height:44px; width:100%; }

.tc-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tc-metric{ display:flex; align-items:center; gap:5px; font-size:0.74rem; color: var(--muted); }
.tc-metric svg{ opacity:0.7; flex-shrink:0; }
.tc-metrics{ display:flex; gap:14px; }
.tc-tag{
  font-size:0.66rem; font-weight:600; padding:3px 9px; border-radius: var(--radius-pill);
  border:1px solid; letter-spacing:0.02em; font-family: var(--font-mono);
}
.tc-tag-new{ color: var(--teal); border-color: rgba(47,230,201,0.35); background: var(--teal-soft); }
.tc-tag-surge{ color: var(--pink); border-color: rgba(255,77,141,0.35); background: var(--pink-soft); }

.empty-state{
  display:flex; flex-direction:column; align-items:center; gap:14px; padding: 80px 20px; color: var(--muted-dim); text-align:center;
}
.empty-state p{ font-size:0.95rem; }

/* ============================================================
   MODALS (shared)
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding: 24px;
  background: rgba(4,5,8,0.6);
  backdrop-filter: blur(6px);
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease-out), visibility 0s linear .3s;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; transition: opacity .3s var(--ease-out); }

.modal{
  background: linear-gradient(180deg, rgba(16,18,26,0.92), rgba(9,10,15,0.96));
  border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.03) inset;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  width:100%; max-height: 88vh; overflow-y:auto; position:relative;
  transform: scale(0.92) translateY(18px); opacity:0;
  transition: transform .4s var(--ease-spring), opacity .3s var(--ease-out);
}
.modal-overlay.is-open .modal{ transform: scale(1) translateY(0); opacity:1; }
.modal::-webkit-scrollbar{ width:8px; }
.modal::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.12); border-radius:8px; }

.modal-close{
  position:absolute; top:16px; right:16px; z-index:5; width:32px; height:32px; border-radius:50%;
  background: rgba(5,6,10,0.55); border:1px solid var(--border); color: var(--white); cursor:pointer;
  display:flex; align-items:center; justify-content:center; backdrop-filter: blur(8px);
  transition: background .2s, transform .2s;
}
.modal-close:hover{ background: rgba(255,255,255,0.12); transform: rotate(90deg); }

/* ============================================================
   TOKEN DETAIL MODAL
   ============================================================ */
.token-modal{ max-width: 560px; }
.token-modal-banner{
  height: 130px; width:100%; position:relative; background-size: cover; background-position:center;
  border-radius: var(--radius-l) var(--radius-l) 0 0; overflow:visible;
}
.token-modal-avatar-wrap{ position:absolute; left:24px; bottom:-30px; }
.token-modal-avatar{
  width:76px; height:76px; border-radius:20px; border:4px solid #0c0d13;
  display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:1.7rem; color:#08070c;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.5);
}
.token-modal-body{ padding: 46px 24px 26px; }

.token-modal-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.tm-name{ font-size:1.3rem; font-weight:600; letter-spacing:-0.01em; }
.tm-meta{ display:flex; align-items:center; gap:7px; margin-top:5px; font-size:0.82rem; color: var(--muted); }
.tm-symbol{ font-family: var(--font-mono); }
.tm-dot{ color: var(--muted-dim); }
.tm-promo{
  font-family: var(--font-mono); font-size:0.64rem; font-weight:600; padding:2px 8px; border-radius: var(--radius-pill);
  background: var(--pink-soft); color: var(--pink); border:1px solid rgba(255,77,141,0.35); margin-left:2px;
}
.tm-change{ font-family: var(--font-mono); font-size:1rem; font-weight:600; padding:5px 12px; border-radius: var(--radius-pill); }
.tm-change.is-up{ color: var(--teal); background: var(--teal-soft); }
.tm-change.is-down{ color: var(--red); background: var(--red-soft); }

.tm-socials{ display:flex; gap:8px; margin-top:16px; }
.tm-social{
  width:34px; height:34px; border-radius:10px; background: var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color: var(--muted); transition: color .2s, border-color .2s;
}
.tm-social:hover{ color: var(--white); border-color: rgba(255,255,255,0.3); }

.tm-contract{
  margin-top:16px; display:flex; align-items:center; gap:8px; background: rgba(255,255,255,0.03);
  border:1px solid var(--border-soft); border-radius: var(--radius-s); padding:9px 12px;
}
.tm-contract-label{ font-size:0.72rem; color: var(--muted-dim); flex-shrink:0; }
.tm-contract-addr{ font-family: var(--font-mono); font-size:0.76rem; color: var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.tm-copy{
  background:none; border:none; color: var(--muted); cursor:pointer; flex-shrink:0; padding:4px; border-radius:6px; transition: color .2s, background .2s;
}
.tm-copy:hover{ color: var(--teal); background: var(--teal-soft); }
.tm-copy.is-copied{ color: var(--teal); }

.tm-desc{ margin-top:16px; font-size:0.88rem; line-height:1.6; color: var(--muted); }

.tm-chart-wrap{ margin-top:20px; border-radius: var(--radius-m); overflow:hidden; background: rgba(255,255,255,0.02); border:1px solid var(--border-soft); }
#tm-chart{ width:100%; height:150px; display:block; }

.tm-stats-grid{ margin-top:16px; display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.tm-stat{ background: var(--surface); border:1px solid var(--border-soft); border-radius: var(--radius-s); padding:11px 12px; }
.tm-stat span{ display:block; font-size:0.68rem; color: var(--muted-dim); margin-bottom:4px; }
.tm-stat b{ font-family: var(--font-mono); font-size:0.92rem; font-weight:500; }

.tm-vote-section{ margin-top:22px; padding-top:20px; border-top:1px solid var(--border-soft); }
.tm-vote-head{ display:flex; justify-content:space-between; font-size:0.8rem; color: var(--muted); margin-bottom:10px; }
.tm-vote-bar{ height:10px; border-radius: var(--radius-pill); overflow:hidden; display:flex; background: rgba(255,255,255,0.06); }
.tm-vote-bar-fill{ height:100%; transition: width .6s var(--ease-out); }
.tm-vote-up{ background: linear-gradient(90deg, var(--teal), #6df7dd); }
.tm-vote-down{ background: linear-gradient(90deg, #ff8aa8, var(--red)); }
.tm-vote-labels{ display:flex; justify-content:space-between; margin-top:8px; font-size:0.76rem; }
.tm-vote-label-up{ color: var(--teal); }
.tm-vote-label-down{ color: var(--red); }
.tm-vote-actions{ display:flex; gap:10px; margin-top:16px; }
.tm-vote-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:10px; border-radius: var(--radius-s); font-weight:600; font-size:0.84rem; cursor:pointer;
  border:1px solid var(--border); background: var(--surface); transition: all .2s var(--ease-out);
}
.tm-vote-btn-up:hover{ border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.tm-vote-btn-down:hover{ border-color: var(--red); color: var(--red); background: var(--red-soft); }
.tm-vote-btn.is-selected.tm-vote-btn-up{ border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.tm-vote-btn.is-selected.tm-vote-btn-down{ border-color: var(--red); color: var(--red); background: var(--red-soft); }

/* ============================================================
   LIST TOKEN FORM MODAL
   ============================================================ */
.list-modal{ max-width: 520px; padding: 30px 26px 28px; }
.list-modal-head h3{ font-size:1.28rem; font-weight:600; }
.list-modal-head p{ margin-top:8px; font-size:0.86rem; color: var(--muted); line-height:1.55; }

#list-form{ margin-top:22px; display:flex; flex-direction:column; gap:16px; }
.form-row{ display:flex; flex-direction:column; gap:7px; position:relative; }
.form-row-pair{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
label{ font-size:0.8rem; font-weight:600; color: var(--muted); }
.req{ color: var(--pink); }
.optional{ color: var(--muted-dim); font-weight:400; font-size:0.74rem; }

input[type="text"], input[type="url"], select, textarea{
  background: rgba(255,255,255,0.03); border:1px solid var(--border); border-radius: var(--radius-s);
  padding: 11px 13px; font-size:0.88rem; width:100%; transition: border-color .2s, background .2s;
}
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--violet); background: rgba(124,92,252,0.05); }
textarea{ resize: vertical; font-family: inherit; line-height:1.5; }
select{ appearance:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892a4' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 13px center; padding-right:32px; }
select:invalid{ color: var(--muted-dim); }

.field-error{ font-size:0.74rem; color: var(--red); min-height:0; display:none; }
.form-row.has-error input, .form-row.has-error select{ border-color: var(--red); }
.form-row.has-error .field-error{ display:block; }

.char-count{ align-self:flex-end; font-size:0.7rem; color: var(--muted-dim); font-family: var(--font-mono); }

.upload-zone{
  border: 1.5px dashed var(--border); border-radius: var(--radius-m); padding: 22px; text-align:center; cursor:pointer;
  transition: border-color .2s, background .2s;
}
.upload-zone:hover, .upload-zone.is-drag{ border-color: var(--violet); background: rgba(124,92,252,0.05); }
.upload-zone-inner{ display:flex; flex-direction:column; align-items:center; gap:6px; color: var(--muted); }
.upload-zone-inner p{ font-size:0.85rem; font-weight:500; color: var(--white); }
.upload-zone-inner span{ font-size:0.74rem; color: var(--muted-dim); }
.upload-preview{ width:64px; height:64px; border-radius:16px; object-fit:cover; margin:0 auto 8px; display:block; }

.promo-row label{ margin-bottom:2px; }
.promo-options{ display:flex; gap:8px; flex-wrap:wrap; }
.promo-pill{
  flex:1; min-width:90px; background: var(--surface); border:1px solid var(--border); color: var(--muted);
  padding:10px 10px 8px; border-radius: var(--radius-s); font-size:0.8rem; font-weight:600; cursor:pointer;
  transition: all .18s var(--ease-out); display:flex; flex-direction:column; align-items:center; gap:3px;
}
.promo-pill:hover:not(:disabled){ border-color: rgba(255,255,255,0.3); color: var(--white); }
.promo-pill.is-active{ background: var(--grad-pulse); color:#08070c; border-color:transparent; }
.promo-pill.is-active .pp-price{ color:#08070c; opacity:0.75; }
.pp-label{ font-size:0.8rem; font-weight:700; }
.pp-price{ font-size:0.7rem; font-weight:500; color: var(--muted-dim); font-family: var(--font-mono); }

/* ============================================================
   PAYMENT MODAL
   ============================================================ */
.payment-modal{ max-width:420px; padding:28px 24px 24px; }
.payment-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.payment-icon{
  width:44px; height:44px; border-radius:12px; background: var(--violet-soft); border:1px solid rgba(124,92,252,0.25);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.payment-head h3{ font-size:1.1rem; font-weight:600; margin-bottom:4px; }
.payment-head p{ font-size:0.82rem; color: var(--muted); }

.payment-summary{
  background: rgba(255,255,255,0.025); border:1px solid var(--border-soft);
  border-radius: var(--radius-m); padding:14px 16px; margin-bottom:20px; display:flex; flex-direction:column; gap:10px;
}
.payment-summary-row{ display:flex; justify-content:space-between; align-items:center; font-size:0.84rem; }
.payment-summary-row span:first-child{ color: var(--muted); }
.pay-highlight{ font-weight:700; color: var(--white); }
.pay-mono{ font-family: var(--font-mono); font-size:0.76rem; color: var(--muted); }
.payment-summary-divider{ height:1px; background: var(--border-soft); margin:2px 0; }

.payment-methods{ margin-bottom:20px; }
.payment-methods-label{ font-size:0.78rem; font-weight:600; color: var(--muted); margin-bottom:10px; }
.payment-method-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.pmt-tab{
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-s);
  padding:10px; font-size:0.86rem; font-weight:600; color: var(--muted); cursor:pointer;
  transition: all .18s var(--ease-out);
}
.pmt-tab:hover{ border-color: rgba(255,255,255,0.25); color: var(--white); }
.pmt-tab.is-active{ border-color: var(--violet); color: var(--white); background: var(--violet-soft); }

.payment-amount-display{
  background: var(--bg); border:1px solid var(--border); border-radius: var(--radius-s);
  padding:14px 16px; display:flex; align-items:center; justify-content:space-between;
}
.pay-amount-label{ font-size:0.8rem; color: var(--muted); }
.pay-amount-value{ font-family: var(--font-mono); font-size:1.1rem; font-weight:700; color: var(--white); }
.pay-amount-note{ font-size:0.72rem; color: var(--muted-dim); }
.payment-disclaimer{ font-size:0.74rem; color: var(--muted-dim); text-align:center; margin-top:12px; }

/* ============================================================
   REVIEW OVERLAY (submission loading)
   ============================================================ */
.review-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background: rgba(4,5,8,0.72); backdrop-filter: blur(10px);
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease-out), visibility 0s linear .35s;
}
.review-overlay.is-open{ opacity:1; visibility:visible; transition: opacity .35s var(--ease-out); }
.review-card{ display:flex; flex-direction:column; align-items:center; gap:20px; }
.review-pulse{ filter: drop-shadow(0 0 16px rgba(124,92,252,0.5)); }
#review-pulse-line{ stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawPulse 1.4s var(--ease-out) infinite; }
@keyframes drawPulse{
  0%{ stroke-dashoffset: 300; }
  60%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: -300; }
}
.review-status{ font-size:0.92rem; color: var(--muted); font-weight:500; letter-spacing:0.01em; transition: opacity .25s; }

/* ============================================================
   TOASTS
   ============================================================ */
.toast-stack{
  position:fixed; bottom:24px; left:50%; transform: translateX(-50%); z-index:300;
  display:flex; flex-direction:column; gap:10px; align-items:center; width:100%; padding:0 16px; pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:10px; background: rgba(14,16,22,0.92); border:1px solid var(--border);
  border-radius: var(--radius-pill); padding: 12px 20px; box-shadow: 0 16px 40px -14px rgba(0,0,0,0.7);
  backdrop-filter: blur(16px); font-size:0.86rem; font-weight:500;
  opacity:0; transform: translateY(16px) scale(0.95); transition: opacity .35s var(--ease-spring), transform .35s var(--ease-spring);
  max-width: 92vw;
}
.toast.is-visible{ opacity:1; transform: translateY(0) scale(1); }
.toast-icon{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.toast-success .toast-icon{ background: var(--teal-soft); color: var(--teal); }
.toast-info .toast-icon{ background: var(--violet-soft); color: var(--violet); }

/* ============================================================
   PROMOTION HINT
   ============================================================ */
.promo-hint{
  font-size:0.76rem; line-height:1.5; color: var(--muted-dim);
  background: rgba(255,255,255,0.025); border:1px solid var(--border-soft);
  border-radius: var(--radius-s); padding:9px 12px; margin-bottom:4px;
}

/* ============================================================
   PAYMENT — manual transfer block
   ============================================================ */
.pay-amount-left{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pay-amount-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.pay-copy-amount{
  background:none; border:1px solid var(--border); color: var(--muted);
  font-size:0.7rem; font-weight:600; padding:4px 9px; border-radius: var(--radius-pill);
  cursor:pointer; transition: all .18s var(--ease-out);
}
.pay-copy-amount:hover{ border-color: var(--teal); color: var(--teal); }

.pay-address-block{
  background: rgba(255,255,255,0.025); border:1px solid var(--border-soft);
  border-radius: var(--radius-m); padding:14px 16px; margin-bottom:18px;
}
.pay-address-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:0.78rem; font-weight:600; color: var(--muted); margin-bottom:9px;
}
.pay-network-tag{
  font-family: var(--font-mono); font-size:0.66rem; font-weight:600; letter-spacing:0.02em;
  color: var(--violet); background: var(--violet-soft); border:1px solid rgba(124,92,252,0.3);
  padding:2px 8px; border-radius: var(--radius-pill);
}
.pay-address-value{
  font-family: var(--font-mono); font-size:0.78rem; line-height:1.55; color: var(--white);
  background: var(--bg); border:1px solid var(--border); border-radius: var(--radius-s);
  padding:11px 12px; word-break: break-all; -webkit-user-select:all; user-select:all;
  margin-bottom:10px;
}
.pay-copy-addr{ font-size:0.82rem; padding:10px 16px; }
.pay-address-warn{
  display:flex; align-items:flex-start; gap:7px; margin-top:10px;
  font-size:0.72rem; line-height:1.45; color: var(--pink);
}
.pay-address-warn svg{ flex-shrink:0; margin-top:1px; }

.pay-tx-row{ margin-bottom:18px; }
.pay-tx-row input{ font-family: var(--font-mono); font-size:0.8rem; }

/* ============================================================
   SUBMITTED / PENDING MODAL
   ============================================================ */
.done-modal{ max-width:400px; padding:34px 24px 24px; text-align:center; }
.done-icon{
  width:60px; height:60px; margin:0 auto 16px; border-radius:50%;
  background: var(--teal-soft); border:1px solid rgba(47,230,201,0.3);
  display:flex; align-items:center; justify-content:center;
}
.done-title{ font-size:1.22rem; font-weight:600; margin-bottom:8px; }
.done-sub{ font-size:0.86rem; line-height:1.6; color: var(--muted); margin-bottom:20px; }
.done-meta{
  background: rgba(255,255,255,0.025); border:1px solid var(--border-soft); border-radius: var(--radius-m);
  padding:14px 16px; margin-bottom:20px; display:flex; flex-direction:column; gap:10px; text-align:left;
}
.done-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:0.82rem; }
.done-meta-row > span:first-child{ color: var(--muted); flex-shrink:0; }
.done-mono{ font-family: var(--font-mono); font-size:0.76rem; color: var(--white); word-break:break-all; text-align:right; }
.done-badge{
  font-size:0.7rem; font-weight:600; padding:3px 10px; border-radius: var(--radius-pill);
  background: rgba(255,196,77,0.14); color:#ffc44d; border:1px solid rgba(255,196,77,0.3); white-space:nowrap;
}

/* ============================================================
   AI CHAT WIDGET
   ============================================================ */
.ai-chat-toggle{
  position:relative; width:36px; height:36px; border-radius:50%; background: var(--surface); border:1px solid var(--border);
  color: var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: color .2s, border-color .2s, transform .3s var(--ease-spring);
}
.ai-chat-toggle:hover{ color: var(--white); border-color: rgba(255,255,255,0.25); }
.ai-chat-toggle[aria-expanded="true"]{ color: var(--teal); border-color: var(--teal); background: var(--teal-soft); }
.ai-chat-ping{
  position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%;
  background: var(--pink); border:2px solid var(--bg); animation: pingDot 2.6s ease-in-out infinite;
}
@keyframes pingDot{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.3); opacity:0.6; } }

.ai-chat-panel{
  position:fixed; bottom: 22px; right: 22px; z-index:250; width:320px; max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, rgba(16,18,26,0.95), rgba(9,10,15,0.98));
  border:1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.03) inset;
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform: translateY(16px) scale(0.94); pointer-events:none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-spring);
}
.ai-chat-panel.is-open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.ai-chat-panel[hidden]{ display:flex; } /* overridden by JS toggling is-open instead of the hidden attribute */

.ai-chat-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 12px; border-bottom:1px solid var(--border-soft); }
.ai-chat-head-id{ display:flex; align-items:center; gap:9px; }
.ai-chat-avatar{ width:30px; height:30px; border-radius:9px; background: var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ai-chat-title{ display:block; font-size:0.85rem; font-weight:600; }
.ai-chat-status{ display:block; font-size:0.68rem; color: var(--teal); margin-top:1px; }
.ai-chat-head #ai-chat-close{ position:static; width:26px; height:26px; }

.ai-chat-body{ padding:14px; display:flex; flex-direction:column; gap:10px; min-height:80px; max-height:280px; overflow-y:auto; }
.ai-msg{
  align-self:flex-start; max-width:86%; background: var(--surface); border:1px solid var(--border-soft);
  border-radius: 14px 14px 14px 4px; padding:9px 12px; font-size:0.82rem; line-height:1.5;
  opacity:0; transform: translateY(6px); animation: aiMsgIn .35s var(--ease-out) forwards;
}
.ai-typing{
  align-self:flex-start; display:flex; gap:4px; padding:11px 14px; background: var(--surface);
  border:1px solid var(--border-soft); border-radius:14px 14px 14px 4px;
}
.ai-typing span{ width:5px; height:5px; border-radius:50%; background: var(--muted); animation: aiTyping 1.1s ease-in-out infinite; }
.ai-typing span:nth-child(2){ animation-delay:.15s; }
.ai-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes aiTyping{ 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-3px); opacity:1; } }
@keyframes aiMsgIn{ to{ opacity:1; transform: translateY(0); } }

.ai-chat-cta{ margin:4px 14px 14px; width:auto; opacity:0; transform: translateY(6px); animation: aiMsgIn .35s var(--ease-out) forwards; }
.ai-chat-cta[hidden]{ display:none; }

@media (max-width:480px){
  .ai-chat-panel{ right:16px; left:16px; width:auto; bottom:16px; }
}

/* ============================================================
   SUPPORT — Telegram quick-contact banner
   ============================================================ */
.support-tg-banner{
  display:flex; align-items:center; gap:10px; background: var(--violet-soft); border:1px solid rgba(124,92,252,0.3);
  border-radius: var(--radius-m); padding:12px 14px; margin-bottom:22px; text-decoration:none; color: var(--white);
  font-size:0.84rem; font-weight:500; transition: border-color .2s, background .2s;
}
.support-tg-banner:hover{ border-color: var(--violet); background: rgba(124,92,252,0.22); }
.support-tg-icon{ width:30px; height:30px; border-radius:9px; background: rgba(124,92,252,0.25); color: var(--violet); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ============================================================
   RESPONSIVE — mobile first fixes
   ============================================================ */
/* scroll lock that doesn't jump on iOS */
body.is-locked{ position:fixed; left:0; right:0; width:100%; overflow:hidden; }

/* horizontally scrollable tab rail */
.tabs-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  margin: 0 -2px; padding: 2px; min-width:0;
}
.tabs-scroll::-webkit-scrollbar{ display:none; }

@media (max-width: 900px){
  #view-listings{ padding: 32px 20px 90px; }
}

@media (max-width: 720px){
  .topbar{ padding: 12px 14px; gap:8px; }
  .btn-ghost{ display:none; }
  .topnav{ gap:2px; }
  .topnav-link{ font-size:0.84rem; padding:7px 11px; }
  .brand-name{ font-size:1.05rem; }
  .btn{ padding: 10px 16px; font-size:0.86rem; }
}

@media (max-width: 640px){
  /* ---- layout ---- */
  #view-home{
    min-height: calc((var(--vh, 1vh) * 100) - 60px);
    padding: 28px 18px 64px;
  }
  .hero{ gap:18px; }
  .hero-sub{ font-size:0.94rem; }
  .hero-actions{ width:100%; flex-direction:column; gap:10px; }
  .hero-actions .btn{ width:100%; }
  .btn-lg{ padding:14px 22px; }
  .hero-stats{ margin-top:26px; padding-top:22px; }
  .hero-stat b{ font-size:1.15rem; }

  #view-listings{ padding: 26px 16px 80px; }
  .listings-head-top{ flex-direction:column; align-items:stretch; gap:14px; margin-bottom:18px; }
  .listings-title{ font-size:1.45rem; }
  .search-wrap{ width:100%; padding:11px 15px; }
  .search-wrap input{ font-size:16px; } /* stops iOS zoom-on-focus */

  .tabs-row{ flex-wrap:nowrap; gap:10px; align-items:center; }
  .tabs{ width:max-content; }
  .tab{ padding:9px 15px; font-size:0.82rem; white-space:nowrap; }
  .filter-btn{ flex-shrink:0; padding:10px 14px; }
  .filter-btn span:not(.filter-count){ display:none; }
  .filter-panel.is-open{ max-height: 700px; }
  .filter-groups{ grid-template-columns:1fr; padding:16px; gap:16px; }

  .token-grid{ grid-template-columns:1fr; gap:12px; margin-top:20px; }
  .token-card{ padding:16px; }
  .tc-name{ max-width: 46vw; }

  /* ---- modals become bottom sheets ---- */
  .modal-overlay{ padding:0; align-items:flex-end; }
  .modal{
    max-height: 92dvh; max-height: calc(var(--vh, 1vh) * 92);
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    border-bottom:none;
    transform: translateY(100%); opacity:1;
    transition: transform .38s var(--ease-out);
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
  .modal-overlay.is-open .modal{ transform: translateY(0); }
  .modal::before{
    content:''; position:sticky; top:0; display:block; width:38px; height:4px;
    margin:0 auto 4px; border-radius:99px; background: rgba(255,255,255,0.22); z-index:6;
  }
  .modal-close{ top:12px; right:12px; width:34px; height:34px; }

  .token-modal-banner{ height:110px; border-radius:0; }
  .token-modal-avatar-wrap{ left:18px; bottom:-26px; }
  .token-modal-avatar{ width:64px; height:64px; border-radius:18px; font-size:1.4rem; }
  .token-modal-body{ padding: 40px 18px 22px; }
  .token-modal-heading{ flex-direction:column; align-items:flex-start; gap:8px; }
  .tm-name{ font-size:1.18rem; }
  .tm-meta{ flex-wrap:wrap; }
  .tm-stats-grid{ grid-template-columns: repeat(2, 1fr); }
  #tm-chart{ height:130px; }
  .tm-vote-actions{ flex-direction:column; }
  .tm-vote-btn{ padding:13px; }
  .tm-social{ width:40px; height:40px; }

  .list-modal, .payment-modal, .done-modal{ max-width:none; padding:24px 18px 24px; }
  .list-modal-head h3{ font-size:1.18rem; }
  .form-row-pair{ grid-template-columns:1fr; gap:16px; }

  /* 16px inputs = no auto-zoom on iOS */
  input[type="text"], input[type="url"], input[type="email"], select, textarea{
    font-size:16px; padding:13px 13px;
  }
  select{ background-position: right 14px center; }

  .promo-options{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }
  .promo-pill{ min-width:0; padding:12px 8px 10px; }
  .promo-pill[data-promo="none"]{ grid-column: 1 / -1; }

  .payment-head{ gap:12px; margin-bottom:18px; }
  .payment-head h3{ font-size:1.02rem; }
  .payment-amount-display{ flex-direction:column; align-items:flex-start; gap:10px; }
  .pay-amount-right{ width:100%; justify-content:space-between; }
  .pay-amount-value{ font-size:1.18rem; }
  .pay-address-value{ font-size:0.74rem; }

  .done-meta-row{ flex-direction:column; align-items:flex-start; gap:4px; }
  .done-mono{ text-align:left; }

  .toast-stack{ bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .toast{ padding:11px 16px; font-size:0.82rem; }
}

@media (max-width: 380px){
  .brand-name{ display:none; }
  .hero-title{ font-size:2rem; }
  .hero-stat{ flex-basis:45%; }
  .promo-pill{ padding:11px 6px 9px; }
  .pp-label{ font-size:0.74rem; }
  .tc-name{ max-width: 40vw; }
}

/* landscape phones: don't let the hero eat the screen */
@media (max-height: 520px) and (orientation: landscape){
  #view-home{ min-height:auto; padding:40px 20px 60px; }
  .modal{ max-height: 96dvh; }
}

/* touch devices: kill hover-lift jank, widen tap targets */
@media (hover: none){
  .token-card:hover{ transform:none; box-shadow:none; }
  .token-card:active{ transform: scale(0.985); }
  .btn:hover, .chip:hover, .tab:hover{ transform:none; }
  .modal-close:hover{ transform:none; }
  .chip{ padding:9px 15px; }
}

/* ============================================================
   TOKEN LOGO IMAGES
   ============================================================ */
.tc-avatar.has-img, .token-modal-avatar.has-img{ padding:0; overflow:hidden; }
.tc-avatar.has-img img, .token-modal-avatar.has-img img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}

/* promoted cards: make room for the badge so it can't overlap mcap */
.token-card.is-promoted .tc-top{ padding-top: 24px; }
.tc-promo{ max-width: calc(100% - 24px); }

/* long coin names must truncate instead of colliding with the mcap */
.tc-id{ flex:1 1 auto; }
.tc-name{ display:inline-block; vertical-align:bottom; max-width:120px; }
@media (min-width: 641px){ .tc-mcap b{ font-size:0.9rem; } }

/* ============================================================
   FEE BOX + PROMOTION TOGGLE
   ============================================================ */
.fee-box{
  background: rgba(255,255,255,0.025); border:1px solid var(--border-soft);
  border-radius: var(--radius-m); padding:16px 18px;
  display:flex; flex-direction:column; gap:14px;
  transition: border-color .25s var(--ease-out);
}
.fee-box.promo-on{ border-color: rgba(124,92,252,0.45); }
.fee-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.fee-label{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.fee-name{ font-size:0.88rem; font-weight:600; color: var(--white); }
.fee-note{ font-size:0.74rem; line-height:1.45; color: var(--muted-dim); }
.fee-amount{ font-family: var(--font-mono); font-size:0.95rem; font-weight:500; color: var(--white); flex-shrink:0; }
.fee-divider{ height:1px; background: var(--border-soft); }
.fee-total .fee-name{ font-size:0.92rem; }
.fee-amount-total{
  font-size:1.15rem; font-weight:700;
  background: var(--grad-pulse); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fee-toggle-wrap{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.fee-row-toggle .fee-amount{ opacity:0.45; transition: opacity .2s; }
.fee-box.promo-on .fee-row-toggle .fee-amount{ opacity:1; }

.switch{
  width:46px; height:27px; border-radius:99px; padding:3px; cursor:pointer;
  background: rgba(255,255,255,0.09); border:1px solid var(--border);
  display:flex; align-items:center; flex-shrink:0;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.switch-knob{
  width:19px; height:19px; border-radius:50%; background: var(--muted);
  transition: transform .28s var(--ease-spring), background .25s var(--ease-out);
}
.switch.is-on{ background: var(--grad-pulse); border-color:transparent; }
.switch.is-on .switch-knob{ transform: translateX(19px); background:#08070c; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
  margin-top: 40px;
}
.footer-inner{
  max-width:1280px; margin:0 auto; padding: 48px 28px 32px;
  display:grid; grid-template-columns: 1.4fr 2fr; gap:44px;
}
.footer-brand .brand{ margin-bottom:12px; }
.footer-tag{ font-size:0.85rem; line-height:1.6; color: var(--muted); max-width:320px; }
.footer-cols{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; }
.footer-col{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.footer-col h4{
  font-family: var(--font-body); font-size:0.74rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--muted-dim); margin-bottom:2px;
}
.footer-link{
  background:none; border:none; padding:0; text-align:left; cursor:pointer;
  font-size:0.86rem; color: var(--muted); text-decoration:none;
  transition: color .2s var(--ease-out);
}
.footer-link:hover{ color: var(--white); }

.footer-bottom{
  max-width:1280px; margin:0 auto;
  padding: 20px 28px calc(28px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border-soft);
}
.footer-disclaimer{ font-size:0.74rem; line-height:1.55; color: var(--muted-dim); margin-bottom:12px; }
.footer-bottom-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:0.74rem; color: var(--muted-dim);
}
.footer-credit a{ color: var(--muted); text-decoration:none; border-bottom:1px solid var(--border); }
.footer-credit a:hover{ color: var(--white); }

@media (max-width: 860px){
  .footer-inner{ grid-template-columns:1fr; gap:32px; padding: 40px 20px 26px; }
}
@media (max-width: 640px){
  .site-footer{ margin-top:24px; }
  .footer-inner{ padding: 34px 16px 24px; gap:28px; }
  .footer-cols{ grid-template-columns: repeat(2, 1fr); gap:24px 18px; }
  .footer-tag{ font-size:0.82rem; max-width:none; }
  .footer-link{ padding:3px 0; }
  .footer-bottom{ padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .footer-bottom-row{ flex-direction:column; align-items:flex-start; gap:6px; }

  .fee-box{ padding:14px 15px; }
  .fee-row{ gap:10px; }
  .fee-note{ font-size:0.72rem; }
  .fee-toggle-wrap{ flex-direction:column-reverse; align-items:flex-end; gap:8px; }
}

/* [hidden] must win over the flex display (empty state was always rendering) */
.empty-state[hidden]{ display:none !important; }
@media (max-width: 640px){
  .fee-toggle-wrap{ flex-direction:column; align-items:flex-end; gap:8px; }
}

/* ============================================================
   MY LISTINGS VIEW
   ============================================================ */
.mylist-head{ padding: 40px 24px 20px; max-width: 1100px; margin: 0 auto; }
.mylist-sub{ font-size:0.88rem; color: var(--muted); margin-top:4px; }
.mylist-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 0 24px 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.mylist-card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-m); padding: 18px 18px 16px;
  animation: fadeUp 0.3s var(--ease-out) both;
  display: flex; flex-direction: column; gap: 14px;
}
.mylist-card-top{ display:flex; align-items:center; gap:12px; }
.mylist-avatar{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.85rem; color:#fff; font-family: var(--font-display);
}
.mylist-name-block{ flex:1; min-width:0; }
.mylist-name{ font-weight:700; font-size:0.95rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mylist-ticker{ font-size:0.78rem; color: var(--muted); font-family: var(--font-mono); }
.mylist-status-badge{
  font-size:0.7rem; font-weight:700; padding:4px 8px; border-radius:20px;
  background: rgba(47,230,201,0.12); color: var(--teal); border:1px solid rgba(47,230,201,0.25);
  white-space:nowrap; flex-shrink:0;
}
.mylist-meta{ display:flex; flex-direction:column; gap:8px; }
.mylist-meta-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.82rem;
}
.mylist-meta-row span:first-child{ color: var(--muted); }
.mylist-tx{
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.78rem; padding-top:10px;
  border-top:1px solid var(--border-soft);
}
.mylist-tx span:first-child{ color: var(--muted); }
.mylist-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:80px 24px; color: var(--muted); text-align:center;
}
.mylist-empty svg{ opacity:0.3; }
.mylist-empty p{ font-size:0.9rem; }
.mylist-empty[hidden]{ display:none !important; }

/* ============================================================
   SUPPORT VIEW
   ============================================================ */
.support-wrap{
  max-width: 560px; margin: 0 auto;
  padding: 40px 24px 80px;
}
.support-head{ margin-bottom:28px; }
.support-form{ display:flex; flex-direction:column; gap:18px; }
.support-confirm{
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:40px 0; text-align:center;
}
.support-confirm .done-meta{
  width:100%; background: rgba(255,255,255,0.025);
  border:1px solid var(--border-soft); border-radius: var(--radius-m);
  padding:14px 16px; display:flex; flex-direction:column; gap:10px;
}

@media (max-width:640px){
  .mylist-head{ padding:28px 16px 16px; }
  .mylist-grid{ padding:0 16px 48px; grid-template-columns:1fr; }
  .support-wrap{ padding:28px 16px 60px; }
}

/* mine tab cards */
.mine-card{ cursor:default; }
.mine-status-badge{
  font-size:0.7rem; font-weight:700; padding:4px 9px; border-radius:20px; flex-shrink:0;
}
.mine-status-pending{
  background: rgba(240,185,11,0.12); color:#F0B90B; border:1px solid rgba(240,185,11,0.25);
}
.mine-status-approved{
  background: rgba(47,230,201,0.12); color: var(--teal); border:1px solid rgba(47,230,201,0.25);
}
.mine-meta{ display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.mine-meta-row{
  display:flex; justify-content:space-between; font-size:0.81rem;
}
.mine-meta-row span:first-child{ color: var(--muted); }