:root{
  --bg:#000;
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.08);
  --btn:#12121a;
  --btn2:#171722;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:#fff;
  height:100vh;
  width:100vw;
  overflow:hidden;
}

.app{height:100vh;display:flex;flex-direction:column;}

.top-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.35);backdrop-filter: blur(10px);
}
.logo{font-weight:700;letter-spacing:.3px;font-size:18px;}
.menu-btn{
  border:1px solid var(--line);background:transparent;color:#fff;
  border-radius:10px;padding:8px 10px;cursor:pointer;
}

.main{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;}

.smell-card{
  width:min(520px, 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}

.smell-media{position:relative;width:100%;height:300px;background:#111;}
.smell-media img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .25s ease;}
.smell-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.65));}

.smell-content{padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px;}

.smell-info h1{font-size:28px;line-height:1.1;}
.smell-category{margin-top:6px;color:var(--muted2);font-size:13px;letter-spacing:.2px;text-transform:uppercase;}

.actions{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:6px;}

.votes-block{display:flex;flex-direction:column;gap:8px;}
.votes-question{font-size:13px;color:var(--muted2);font-weight:750;}
.votes{display:flex;gap:8px;align-items:center;}

.vote-btn{
  background:var(--btn);
  border:1px solid var(--line);
  color:#fff;
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:700;
}
.vote-btn:hover{background:var(--btn2);}
.vote-btn.active{outline:2px solid rgba(255,255,255,.24);background:rgba(255,255,255,.10);}
.count{color:var(--muted);font-weight:800;}

.wa-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;
  background:var(--btn);border:1px solid var(--line);
  cursor:pointer;text-decoration:none;
}
.wa-btn:hover{background:var(--btn2);}
.wa-ico{width:75px;height:75px;fill:#fff;opacity:.92;}

.panel{border:1px solid var(--line);background:rgba(0,0,0,.25);border-radius:18px;padding:12px;}
.panel-title{font-size:13px;letter-spacing:.2px;color:var(--muted);margin-bottom:10px;font-weight:800;text-transform:uppercase;}

.details{padding:0;overflow:hidden;}
.panel-summary{list-style:none;cursor:pointer;padding:12px;font-size:13px;letter-spacing:.2px;color:var(--muted);font-weight:800;text-transform:uppercase;}
.panel-summary::-webkit-details-marker{display:none;}
.panel-inner{padding:0 12px 12px;}
details[open] .panel-summary{border-bottom:1px solid var(--line);}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.field span{font-size:12px;color:var(--muted2);}
.field input{background:#0c0c12;border:1px solid var(--line);color:#fff;border-radius:14px;padding:10px 12px;outline:none;}
.field input::placeholder{color:rgba(255,255,255,.35);}

.comment-form{display:flex;gap:8px;}
.comment-form input{flex:1;background:#0c0c12;border:1px solid var(--line);color:#fff;border-radius:14px;padding:10px 12px;outline:none;}
.comment-form input::placeholder{color:rgba(255,255,255,.35);}

.primary{background:#fff;color:#000;border:none;border-radius:14px;padding:10px 14px;font-weight:900;cursor:pointer;}
.primary:active{transform: translateY(1px);}

.comments{display:flex;flex-direction:column;gap:10px;margin-top:10px;}
.comment{border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.04);}
.comment .meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted2);font-size:11px;margin-bottom:6px;}
.comment .text{font-size:14px;line-height:1.35;color:#fff;word-break:break-word;}

.next-btn{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;border-radius:16px;padding:12px 14px;font-size:14px;font-weight:900;cursor:pointer;}
.next-btn:hover{background:rgba(255,255,255,.10);}

.hintline{text-align:center;color:var(--muted2);}
.micro{font-size:11px;opacity:.7;letter-spacing:.2px;margin-top:8px;}

.hint{padding:12px 16px;text-align:center;border-top:1px solid var(--line);color:var(--muted2);font-size:12px;}

@media (max-width:500px){
  .smell-media{height:260px;}
  .smell-info h1{font-size:26px;}
}