.tool-smellable {
  --bg:#000;
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);
  --line:rgba(255,255,255,.08);
  --btn:#12121a;
  --btn2:#171722;
}.tool-smellable * {margin:0;padding:0;box-sizing:border-box;}.tool-smellable {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:#fff;

  
  min-height:100vh;
  width:100vw;
  overflow-x:hidden;
  overflow-y:auto;
}.tool-smellable .app {
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}.tool-smellable .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);
}.tool-smellable .logo {font-weight:700;letter-spacing:.3px;font-size:18px;}.tool-smellable .menu-btn {
  border:1px solid var(--line);background:transparent;color:#fff;
  border-radius:10px;padding:8px 10px;cursor:pointer;
}.tool-smellable .main {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;

  overflow-y:auto;
  -webkit-overflow-scrolling: touch;

  
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}.tool-smellable .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);
}.tool-smellable .smell-media {position:relative;width:100%;height:300px;background:#111;}.tool-smellable .smell-media img {width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .25s ease;}.tool-smellable .smell-overlay {position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.65));}.tool-smellable .smell-content {padding:18px 18px 16px;display:flex;flex-direction:column;gap:14px;}.tool-smellable .smell-info h1 {font-size:28px;line-height:1.1;}.tool-smellable .smell-category {margin-top:6px;color:var(--muted2);font-size:13px;letter-spacing:.2px;text-transform:uppercase;}.tool-smellable .actions {display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:6px;}.tool-smellable .votes-block {display:flex;flex-direction:column;gap:8px;}.tool-smellable .votes-question {font-size:13px;color:var(--muted2);font-weight:750;}.tool-smellable .votes {display:flex;gap:8px;align-items:center;}.tool-smellable .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;
}.tool-smellable .vote-btn:hover {background:var(--btn2);}.tool-smellable .vote-btn.active {outline:2px solid rgba(255,255,255,.24);background:rgba(255,255,255,.10);}.tool-smellable .count {color:var(--muted);font-weight:800;}.tool-smellable .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;
}.tool-smellable .wa-btn:hover {background:var(--btn2);}.tool-smellable .wa-ico {width:75px;height:75px;fill:#fff;opacity:.92;}.tool-smellable .panel {border:1px solid var(--line);background:rgba(0,0,0,.25);border-radius:18px;padding:12px;}.tool-smellable .panel-title {font-size:13px;letter-spacing:.2px;color:var(--muted);margin-bottom:10px;font-weight:800;text-transform:uppercase;}.tool-smellable .details {padding:0;overflow:hidden;}.tool-smellable .panel-summary {list-style:none;cursor:pointer;padding:12px;font-size:13px;letter-spacing:.2px;color:var(--muted);font-weight:800;text-transform:uppercase;}.tool-smellable .panel-summary::-webkit-details-marker {display:none;}.tool-smellable .panel-inner {padding:0 12px 12px;}.tool-smellable details[open] .panel-summary {border-bottom:1px solid var(--line);}.tool-smellable .field {display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}.tool-smellable .field span {font-size:12px;color:var(--muted2);}.tool-smellable .field input {background:#0c0c12;border:1px solid var(--line);color:#fff;border-radius:14px;padding:10px 12px;outline:none;}.tool-smellable .field input::placeholder {color:rgba(255,255,255,.35);}.tool-smellable .comment-form {display:flex;gap:8px;}.tool-smellable .comment-form input {flex:1;background:#0c0c12;border:1px solid var(--line);color:#fff;border-radius:14px;padding:10px 12px;outline:none;}.tool-smellable .comment-form input::placeholder {color:rgba(255,255,255,.35);}.tool-smellable .primary {background:#fff;color:#000;border:none;border-radius:14px;padding:10px 14px;font-weight:900;cursor:pointer;}.tool-smellable .primary:active {transform: translateY(1px);}.tool-smellable .comments {display:flex;flex-direction:column;gap:10px;margin-top:10px;}.tool-smellable .comment {border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.04);}.tool-smellable .comment .meta {display:flex;justify-content:space-between;gap:10px;color:var(--muted2);font-size:11px;margin-bottom:6px;}.tool-smellable .comment .text {font-size:14px;line-height:1.35;color:#fff;word-break:break-word;}.tool-smellable .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;

  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 5;
}.tool-smellable .next-btn:hover {background:rgba(255,255,255,.10);}.tool-smellable .hintline {text-align:center;color:var(--muted2);}.tool-smellable .micro {font-size:11px;opacity:.7;letter-spacing:.2px;margin-top:8px;}.tool-smellable .hint {
  padding:12px 16px;
  text-align:center;
  border-top:1px solid var(--line);
  color:var(--muted2);
  font-size:12px;
}

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