/* מיני־דרמה — עיצוב משותף (לפי מבנה VibeShort: כהה, פוסטרים, גרדיאנט חם) */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root {
  --bg:#0a0a0c; --card:#15111c; --card2:#1a1a22; --line:#26262f;
  --txt:#fff; --sub:#c9c9d4; --dim:#8b8b98;
  --grad:linear-gradient(90deg,#ff5a3c,#ff2e88 55%,#b44dff);
  --glow:0 8px 30px rgba(255,46,136,.35);
}
html,body { background:var(--bg); color:var(--txt); font-family:-apple-system,"Segoe UI",Arial,sans-serif; min-height:100%; }
body { max-width:480px; margin:0 auto; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* כפתור גרדיאנט */
.gbtn { display:block; width:100%; padding:15px 10px; border:none; border-radius:999px;
  font-size:17px; font-weight:800; color:#fff; text-align:center; background:var(--grad); box-shadow:var(--glow); transition:transform .12s; }
.gbtn:active { transform:scale(.97); }

/* פוסטר */
.poster { aspect-ratio:2/3; border-radius:14px; overflow:hidden; position:relative; background:var(--card); }
.poster img { width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
.poster .fb { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:12px; }
.poster .fb .em { position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); font-size:46px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.poster .fb h3 { font-size:14px; font-weight:800; line-height:1.3; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.poster .fb small { color:rgba(255,255,255,.75); font-size:10.5px; margin-top:3px; }
.poster .badge { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  border-radius:8px; padding:3px 8px; font-size:10.5px; font-weight:700; }
.poster .badge.hot { background:var(--grad); }

/* ניווט תחתון */
.nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px;
  display:flex; background:rgba(10,10,12,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  padding:8px 0 max(10px, env(safe-area-inset-bottom)); z-index:50; }
.nav button { flex:1; background:none; border:none; color:var(--dim); font-size:11px; display:flex; flex-direction:column; align-items:center; gap:3px; }
.nav button .ic { font-size:21px; line-height:1; }
.nav button.on { color:#fff; }

/* Bottom sheet */
.sheetwrap { position:fixed; inset:0; background:rgba(5,5,8,.7); backdrop-filter:blur(4px); display:none; z-index:100; align-items:flex-end; }
.sheetwrap.show { display:flex; }
.sheet { width:100%; max-width:480px; margin:0 auto; background:#15111c; border:1px solid #2c2438; border-bottom:none;
  border-radius:22px 22px 0 0; padding:14px 22px calc(26px + env(safe-area-inset-bottom)); text-align:center; animation:up .25s ease; }
@keyframes up { from { transform:translateY(40%); opacity:.4; } to { transform:none; opacity:1; } }
.sheet .grab { width:42px; height:4px; border-radius:2px; background:#3a3050; margin:0 auto 14px; }
.sheet .emoji { font-size:42px; }
.sheet h2 { font-size:19px; margin:8px 0 6px; line-height:1.35; }
.sheet p { color:var(--sub); font-size:14.5px; line-height:1.6; }
.sheet .gbtn { margin-top:16px; }
.sheet .later { margin-top:12px; background:none; border:none; color:#77778a; font-size:13px; }
.sheet input { width:100%; margin-top:14px; padding:13px; border-radius:12px; border:1px solid #3a3050;
  background:#0d0a14; color:#fff; font-size:16px; text-align:center; font-family:inherit; }
.sheet .ok { color:#7ee0a3; font-size:15px; margin-top:12px; line-height:1.6; }
.step { display:none; } .step.show { display:block; }

/* טוסט */
#toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:#26262f; color:#fff;
  padding:11px 20px; border-radius:999px; font-size:14px; opacity:0; transition:opacity .25s; z-index:200; pointer-events:none; white-space:nowrap; }
#toast.show { opacity:1; }