:root{
  --wine:#6b1d2b;
  --accent:#c9a227;
  --bg:#140a0d;
  --panel:#1e1114;
  --text:#f4ece6;
  --muted:#d6cac3;
  --line:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:radial-gradient(120% 90% at 50% 0%, #2a151a 0%, var(--bg) 60%);
  color:var(--text);
  min-height:100dvh;
  display:flex;flex-direction:column;
}

/* Top bar */
.sb-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.sb-brand{font-weight:600;letter-spacing:.3px;font-size:.98rem;opacity:.95}
.sb-back{color:var(--text);text-decoration:none;font-size:.9rem;font-weight:600;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.06);padding:7px 14px;border-radius:6px;transition:.15s}
.sb-back:hover{background:rgba(255,255,255,.16);border-color:#fff}

/* Main */
.sb-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 20px 28px;gap:18px}
.sb-title{font-size:1.5rem;font-weight:600;margin:0}
.sb-sub{color:var(--muted);max-width:520px;margin:0;font-size:1rem}

/* Talk button */
.sb-orb{
  position:relative;width:170px;height:170px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 50% 38%, #8a2738 0%, var(--wine) 55%, #4a1320 100%);
  color:#fff;font-size:1.05rem;font-weight:600;letter-spacing:.3px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .15s;
  display:flex;align-items:center;justify-content:center;
}
.sb-orb:active{transform:scale(.97)}
.sb-orb .sb-orb-label{display:flex;flex-direction:column;align-items:center;gap:6px}
.sb-orb .sb-orb-ico{font-size:2rem;line-height:1}
.sb-orb[data-state="live"]{background:radial-gradient(circle at 50% 38%,#caa23a 0%,var(--accent) 55%,#8a6e14 100%);color:#2a2003}
.sb-pulse{position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:none}
.sb-orb[data-state="live"] .sb-pulse{animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.95);opacity:.6}100%{transform:scale(1.35);opacity:0}}

.sb-status{min-height:22px;color:var(--muted);font-size:.98rem}
.sb-secondary{background:transparent;border:1px solid var(--line);color:var(--text);padding:9px 18px;border-radius:6px;cursor:pointer;font-size:.9rem}
.sb-secondary:hover{border-color:var(--accent)}
.sb-hidden{display:none !important}

/* Wine cards */
.sb-cards{width:100%;max-width:640px;display:flex;flex-direction:column;gap:14px}
.sb-card{
  display:flex;gap:14px;text-align:left;background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:14px;animation:rise .35s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sb-card.sb-pick{border-color:var(--accent)}
.sb-card img{width:64px;height:96px;object-fit:cover;border-radius:8px;background:#2a1a1e;flex:0 0 auto}
.sb-card .sb-card-body{flex:1;min-width:0}
.sb-card h3{margin:0 0 2px;font-size:1.05rem}
.sb-card .sb-tag{display:inline-block;font-size:.76rem;font-weight:600;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:2px 9px;margin-bottom:6px}
.sb-card p{margin:5px 0 0;color:var(--muted);font-size:.94rem;line-height:1.5}
.sb-card .sb-why{color:var(--text)}
.sb-card a.sb-more{color:var(--accent);font-size:.9rem;text-decoration:none}

/* Totem tweaks */
body.totem .sb-title{font-size:2rem}
body.totem .sb-sub{font-size:1.2rem;max-width:680px}
body.totem .sb-orb{width:220px;height:220px;font-size:1.2rem}
body.totem .sb-card h3{font-size:1.25rem}