/* Token + komponen kongsi (laman penonton dan dashboard) */
:root{
  --bg:#0b0a0f; --card:#17151d; --card2:#211e29; --line:rgba(255,255,255,.1);
  --ink:#f6f3f7; --ink2:#b5aebd; --ink3:#847c8d;
  --acc:#ff3d71; --acc2:#ff9a3d; --gold:#ffd27a; --ok:#4ade80;
  --grad:linear-gradient(100deg,var(--acc),var(--acc2));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 "Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3{margin:0; line-height:1.15; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
.wrap{width:min(1180px,100%); margin:0 auto; padding:0 20px}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:999px; border:1px solid var(--line);
  background:var(--card2); font-weight:700; cursor:pointer; white-space:nowrap;
}
.btn:hover{border-color:rgba(255,255,255,.3)}
.btn.primary{background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 8px 28px rgba(255,61,113,.35)}
.btn.small{min-height:34px; padding:0 14px; font-size:14px}
.btn.danger{color:#ff8a8a}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--acc2); outline-offset:2px}

.brand{font-weight:800; font-size:20px; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; white-space:nowrap}
.brand i{
  width:26px; height:26px; border-radius:8px; background:var(--grad); display:grid; place-items:center;
  font-style:normal; font-size:13px; color:#fff;
}

.demo{
  background:rgba(255,210,122,.1); border-bottom:1px solid rgba(255,210,122,.3); color:var(--gold);
  font-size:13px; text-align:center; padding:7px 16px;
}

/* Poster 2:3 — gambar yang dimuat naik, atau poster jana daripada warna + tajuk */
.poster{position:relative; aspect-ratio:2/3; border-radius:14px; overflow:hidden; background:var(--card)}
.poster img{width:100%; height:100%; object-fit:cover}
.poster.gen{
  background:
    radial-gradient(120% 70% at 20% 0%,hsl(var(--h) 90% 62% / .95),transparent 62%),
    radial-gradient(90% 60% at 100% 100%,hsl(calc(var(--h) + 50) 85% 50% / .8),transparent 60%),
    linear-gradient(160deg,hsl(var(--h) 60% 20%),hsl(calc(var(--h) - 30) 50% 8%));
}
.poster.gen::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.75),transparent 60%)}
.poster.gen span{
  position:absolute; z-index:1; left:9%; right:9%; bottom:8%;
  font-weight:800; font-size:clamp(13px,1.05em,20px); line-height:1.12; text-wrap:balance;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}

#toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:100;
  background:#fff; color:#111; font-weight:600; font-size:14px; padding:10px 18px; border-radius:999px;
  opacity:0; pointer-events:none; transition:.25s; max-width:calc(100vw - 32px);
}
#toast.on{opacity:1; transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }