:root{
  --bg:#0b0d12; --panel:#121623; --muted:#8b94a7; --text:#e9edf7; --accent:#5b8cff; --green:#30d158; --red:#ff453a;
  --border:#1c2133; --btn:#182036; --btnText:#cfe3ff;
}
*{box-sizing:border-box}
body{
  margin:0; font:14px/1.45 system-ui, Segoe UI, Roboto, Inter, Arial;
  color:var(--text); background:linear-gradient(180deg,#0b0d12 0%,#0d1020 100%);
}

/* Topbar */
.topbar{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border); background:rgba(10,12,20,.6); backdrop-filter: blur(8px);
  position:sticky; top:0; z-index:10;
}
.topbar h1{margin:0; font-size:18px}
.topbar .tabs{display:flex; gap:8px}
.topbar .tabs button{
  background:transparent; color:var(--muted); border:1px solid var(--border);
  border-radius:10px; padding:6px 12px; cursor:pointer;
}
.topbar .tabs button.active{color:var(--text); border-color:var(--accent)}
.topbar .right{display:flex; align-items:center; gap:10px}
#connectBtn{
  background:var(--accent); border:0; color:white; padding:6px 10px; border-radius:10px; cursor:pointer;
}
#accountLabel{color:var(--muted); font-size:12px}

/* Layout */
.container{max-width:1050px; margin:20px auto; padding:0 16px;}
.hidden{display:none}
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.toolbar button{padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--btn); color:var(--btnText); cursor:pointer}
#status{color:var(--muted)}

/* Grid */
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px;
}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px;
}
.card-head{display:flex; align-items:center; justify-content:space-between}
.card h3{margin:0; font-size:16px}
.tokenid{font-size:12px; color:var(--muted)}
.desc{margin:0; color:#c8d2ea}
audio{width:100%}
.meta{display:flex; gap:8px; color:var(--muted); align-items:center; justify-content:space-between}
.vote-bar{display:flex; gap:8px}
.vote-btn{
  border:1px solid var(--border); background:var(--btn); color:var(--btnText);
  padding:6px 10px; border-radius:10px; cursor:pointer;
}
.vote-btn.up{border-color:#2a7b2a;}
.vote-btn.down{border-color:#8a2a2a;}
.vote-btn:disabled{opacity:.6; cursor:not-allowed}

/* Mint */
.mint-card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; max-width:720px;
}
.mint-card h2{margin:0 0 10px}
.row{display:flex; gap:8px; align-items:center; margin:10px 0}
.row span{min-width:160px; color:var(--muted)}
.row input{flex:1; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:#0f1424; color:var(--text)}
#geoBtn{padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--btn); color:var(--btnText); cursor:pointer}
.recorder{margin:12px 0; display:flex; flex-direction:column; gap:8px}
.rec-bar{display:flex; align-items:center; gap:10px}
#recordBtn{background:var(--red); color:white; border:0; padding:8px 12px; border-radius:10px; cursor:pointer}
#recStatus{color:var(--muted)}
.actions{display:flex; align-items:center; gap:12px; margin-top:8px}
#mintBtn{background:var(--green); color:black; border:0; padding:10px 16px; border-radius:12px; cursor:pointer}
#mintStatus{color:var(--muted)}
.footer{opacity:.7; text-align:center; padding:20px}