/* Discord-style product mocks shared by the home preview, features and docs:
   messages, embeds, buttons, a compact panel frame, leaderboard rows and the
   dashboard's right-click menu. Colours follow Discord's dark theme, nudged
   toward the brand violet. */

.dwin{position:relative;border-radius:16px;overflow:hidden;background:#15141f;border:1px solid rgba(255,255,255,.1);
  color:#dbdee1;font:400 14px/1.45 Inter,system-ui,sans-serif;text-align:left;
  box-shadow:0 0 0 1px rgba(124,58,237,.12),0 40px 90px -40px rgba(0,0,0,.95),0 0 80px -30px rgba(124,58,237,.5)}
.dwin::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(500px circle at var(--lx,30%) var(--ly,0%),rgba(255,255,255,.06),transparent 45%)}
.dwin-head{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-bottom:1px solid rgba(0,0,0,.4);
  box-shadow:0 1px 0 rgba(255,255,255,.03);font-weight:600;color:#f2f3f5;font-size:14.5px}
.dwin-head .ic{color:#80848e;font-size:18px}
.dwin-head small{margin-left:auto;font:500 11px/1 var(--mono,monospace);color:#80848e;letter-spacing:.06em;text-transform:uppercase}
.dwin-body{display:grid;gap:14px;padding:16px}

/* messages */
.m{display:flex;gap:12px;align-items:flex-start}
.m.anim{animation:m-in .45s var(--ease-expo) both}
@keyframes m-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.av{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;
  font-weight:650;font-size:15px;color:#fff;background:var(--a,#5865f2);overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.m-body{min-width:0;flex:1}
.m-used{display:flex;align-items:center;gap:6px;margin:0 0 2px;font-size:12.5px;color:#949ba4}
.m-used b{color:#c9cdd3;font-weight:500}
.m-used code{color:#a5b4fc;font:inherit}
.m-meta{display:flex;align-items:baseline;gap:8px;margin:0}
.m-meta b{font-weight:600;color:var(--n,#f2f3f5)}
.tag-app{padding:1px 5px;border-radius:4px;font-size:10px;font-weight:700;line-height:1.4;color:#fff;background:#5865f2;letter-spacing:.02em}
.m-meta time{font-size:12px;color:#80848e}
.m-text{margin:2px 0 0;color:#dbdee1}
.m-text .ic,.em .ic{color:var(--ic,#a78bfa);margin-right:4px}
.men{padding:0 3px;border-radius:4px;color:#c9cdfb;background:rgba(88,101,242,.3)}

/* embeds */
.em{margin-top:6px;max-width:460px;padding:12px 14px;border-radius:6px;background:#1b1a27;border-left:4px solid var(--em,#7c3aed)}
.em-t{display:flex;align-items:center;gap:6px;font-weight:650;color:#f2f3f5;margin-bottom:6px}
.em-b{font-size:13.5px;color:#d0d3d8}
.em-b p{margin:4px 0}
.em-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.em-cols b{display:block;font-size:12.5px;margin-bottom:4px}
.em-cols > div > span{display:block;font-size:12.5px;color:#b5bac1}
.em-bar{height:6px;border-radius:9px;margin:8px 0 2px;background:#2b2a3a;overflow:hidden}
.em-bar i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--cyan));transition:width .9s var(--ease-expo)}
.up{color:#4ade80;font-weight:600}.down{color:#f87171;font-weight:600}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.btns span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:5px;font-size:13px;font-weight:500;background:#2b2a3a;color:#e3e5e8;transition:background-color .35s ease,color .35s ease}
.btns span.ok{background:#248046;color:#fff}
.btns span.no{background:#2a2633;color:#7f7887}
.btns span.pick{background:#5865f2;color:#fff}
.ring-t{display:flex;align-items:center;gap:14px}
.ring-t svg{width:58px;height:58px;transform:rotate(-90deg)}
.ring-t circle{fill:none;stroke-width:6}
.ring-t .bgc{stroke:#2b2a3a}
.ring-t .fg{stroke:var(--cyan);stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:var(--off,157);transition:stroke-dashoffset 1.2s var(--ease-expo)}
.ring-t b{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* DM-style secret word cards (Imposter) */
.dm-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dm-card{padding:16px;border-radius:12px;text-align:center;background:#1b1a27;border:1px solid rgba(255,255,255,.08)}
.dm-card small{display:block;font-size:11.5px;color:#949ba4}
.dm-card b{display:block;margin:6px 0 4px;font-size:18px;color:#f2f3f5;letter-spacing:-.01em}
.dm-card span{font-size:11px;color:#80848e}
.dm-card.bad{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.3)}
.dm-card.bad b{color:#fca5a5}
.dm-card.bad span{color:#f87171}

/* leaderboard rows (dashboard Points tab) */
.lb{display:grid}
.lb-row{display:grid;grid-template-columns:34px 30px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid rgba(255,255,255,.05)}
.lb-row:first-child{border-top:0}
.lb-pos{text-align:right;font-size:13px;color:#80848e;font-variant-numeric:tabular-nums}
.lb-av{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:10px;font-weight:600;color:#d0d3d8;background:rgba(255,255,255,.08)}
.lb-name{display:flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;color:#f2f3f5}
.lb-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rk{padding:2px 6px;border-radius:5px;font-size:10.5px;font-weight:600;color:var(--r);background:color-mix(in srgb,var(--r) 14%,transparent)}
.lb-pts{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.lb-edit{padding:3px 9px;border-radius:7px;font-size:12px;color:#b5bac1;border:1px solid rgba(255,255,255,.1)}

/* dashboard right-click menu */
.ctx{width:236px;padding:4px 0;border-radius:10px;font-size:13.5px;background:#1b1a27;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.9)}
.ctx div{display:flex;align-items:center;gap:10px;padding:8px 12px;color:#e3e5e8}
.ctx .ic{color:#949ba4}
.ctx .sub{padding-left:30px;font-size:13px;color:#c9cdd3;background:rgba(0,0,0,.22)}
.ctx .chev{margin-left:auto}
.ctx hr{margin:4px 0;border:0;border-top:1px solid rgba(255,255,255,.08)}

/* vote bars (DEV vote power) */
.vbars{display:grid;gap:10px}
.vbar small{display:flex;justify-content:space-between;font-size:12px;color:#b5bac1;margin-bottom:5px}
.vbar small b{color:#f2f3f5}
.vbar div{height:8px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden}
.vbar i{display:block;height:100%;border-radius:inherit;width:var(--w);background:var(--c)}