:root {
  --bg: #07070a;
  --panel: rgba(20, 20, 27, .72);
  --panel-solid: #111117;
  --text: #f7f7f8;
  --muted: #9b9ba7;
  --line: rgba(255,255,255,.09);
  --accent: #a78bfa;
  --accent2: #67e8f9;
  --danger: #fb7185;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Vazirmatn, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 15%, rgba(167,139,250,.13), transparent 28rem),
    radial-gradient(circle at 85% 75%, rgba(103,232,249,.09), transparent 28rem),
    var(--bg);
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

.splash {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: #060609; overflow: hidden; text-align: center;
}
.splash-orb { position:absolute; width: 320px; height:320px; border-radius:50%; filter:blur(90px); opacity:.3; }
.orb-one { background:#8b5cf6; top:-100px; right:-80px; }
.orb-two { background:#06b6d4; bottom:-120px; left:-100px; }
.brand-mark, .brand-mini {
  display:grid; place-items:center; font-weight:800; color:#09090b;
  background: linear-gradient(135deg, #fff, #c4b5fd);
  box-shadow: 0 0 60px rgba(167,139,250,.25);
}
.brand-mark { width:76px; height:76px; border-radius:24px; font-size:34px; }
.splash-title { position:absolute; margin-top:165px; font-size:25px; font-weight:700; }
.loader { position:absolute; margin-top:245px; width:150px; height:3px; background:#202028; border-radius:99px; overflow:hidden; }
.loader span { display:block; height:100%; width:45%; background:linear-gradient(90deg, var(--accent), var(--accent2)); animation:load 1.1s infinite ease-in-out; }
.splash-caption { position:absolute; margin-top:285px; color:#777784; font-size:12px; }
@keyframes load { 0%{transform:translateX(260%)} 100%{transform:translateX(-260%)} }

.app-shell { max-width: 1180px; margin:auto; padding: 26px; min-height:100vh; }
.topbar { display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mini { width:42px; height:42px; border-radius:13px; font-size:19px; }
.brand strong { display:block; font-size:16px; }
.brand small { color:#72727e; font-size:10px; }
.contact-btn, .ghost-btn {
  background:rgba(255,255,255,.045); border:1px solid var(--line); color:#ddd;
  padding:10px 15px; border-radius:12px; cursor:pointer; transition:.2s;
}
.contact-btn:hover, .ghost-btn:hover { background:rgba(255,255,255,.09); transform:translateY(-1px); }
.contact-btn span { margin-right:6px; color:#b7a1ff; }
.hero { min-height:calc(100vh - 120px); display:grid; grid-template-columns:1fr 440px; gap:70px; align-items:center; }
.hero-copy { padding-bottom:50px; }
.eyebrow { color:#a99bff; font-size:10px; letter-spacing:2px; font-weight:700; }
.hero h1 { font-size:clamp(38px, 5vw, 66px); line-height:1.2; margin:16px 0; letter-spacing:-2px; }
.hero h1 span { color:#9d8cf5; }
.hero-copy p { color:var(--muted); max-width:500px; line-height:2; font-size:14px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:26px; padding:30px; box-shadow:0 30px 100px rgba(0,0,0,.35); backdrop-filter:blur(22px); }
.login-card { position:relative; overflow:hidden; }
.login-card:before { content:""; position:absolute; width:180px; height:180px; background:#8b5cf6; opacity:.08; filter:blur(50px); top:-90px; right:-60px; }
.card-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; background:rgba(167,139,250,.12); color:#b8a7ff; margin-bottom:22px; }
.card h2 { margin:0 0 7px; font-size:21px; }
.muted { color:var(--muted); font-size:12px; line-height:1.9; margin-top:0; }
label { display:block; margin:25px 0 8px; font-size:11px; color:#aaaab5; }
.input-wrap { display:flex; align-items:center; gap:10px; border:1px solid var(--line); background:rgba(0,0,0,.2); border-radius:13px; padding:0 13px; }
.input-wrap span { color:#777; }
input { width:100%; border:0; outline:0; background:transparent; color:white; padding:14px 2px; direction:ltr; }
.primary-btn { width:100%; margin-top:13px; border:0; padding:14px; border-radius:13px; cursor:pointer; color:#0b0b0d; font-weight:700; background:linear-gradient(100deg,#ddd6fe,#67e8f9); transition:.2s; display:flex; justify-content:center; gap:16px; }
.primary-btn:hover { transform:translateY(-2px); box-shadow:0 12px 35px rgba(103,232,249,.13); }
.message { min-height:20px; margin-top:13px; font-size:11px; color:#fb9aaa; line-height:1.8; }
.player-card { grid-column:1 / -1; }
.player-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.remaining { padding:8px 12px; border:1px solid var(--line); border-radius:12px; font-size:11px; color:#bdb0ff; }
.video-frame { position:relative; background:#000; border-radius:18px; overflow:hidden; aspect-ratio:16/9; }
video { width:100%; height:100%; display:block; background:#000; }
video::-webkit-media-controls-download-button { display:none; }
.play-overlay { position:absolute; inset:0; display:grid; place-items:center; align-content:center; gap:10px; cursor:pointer; background:linear-gradient(transparent,rgba(0,0,0,.2)); transition:.25s; }
.play-overlay:hover .big-play { transform:scale(1.06); }
.play-overlay.loading, .play-overlay.disabled { cursor:default; pointer-events:none; }
.play-overlay.disabled .big-play { opacity:.35; }
.buffer-spinner { position:absolute; top:50%; left:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; animation:spin 1s linear infinite; pointer-events:none; display:none; }
.video-frame.buffering .buffer-spinner { display:block; }
.play-overlay.loading .big-play { animation:spin 1s linear infinite; font-size:0; border:3px solid rgba(0,0,0,.12); border-top-color:#111; background:rgba(255,255,255,.9); }
@keyframes spin { to { transform:rotate(360deg); } }
.play-overlay .big-play { transition:transform .2s; width:70px; height:70px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.95); color:#111; padding-right:3px; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.play-overlay span { font-size:11px; color:#ddd; }
.player-foot { display:flex; justify-content:space-between; align-items:center; margin-top:14px; }
#userLabel { color:#777783; font-size:11px; direction:ltr; }
footer { text-align:center; color:#44444d; font-size:9px; padding:25px 0; }
.modal { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:20px; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(10px); }
.modal-box { position:relative; z-index:1; width:min(400px,100%); padding:34px; border-radius:26px; background:#121218; border:1px solid var(--line); text-align:center; box-shadow:0 30px 100px #000; animation:pop .2s ease-out; }
@keyframes pop { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }
.modal-close { position:absolute; top:12px; left:15px; border:0; background:transparent; color:#777; font-size:26px; cursor:pointer; }
.modal-icon { width:52px; height:52px; margin:0 auto 20px; border-radius:16px; display:grid; place-items:center; background:rgba(103,232,249,.08); color:#67e8f9; }
.modal-box p { color:#8f8f9a; font-size:12px; line-height:2; }
.phone { display:block; color:#e7e2ff; direction:ltr; font-size:25px; font-weight:700; letter-spacing:1px; text-decoration:none; margin:20px 0; }
.copy-btn { width:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.05); color:#ddd; cursor:pointer; }
.copy-message { height:20px; color:#67e8b2; font-size:10px; margin-top:8px; }

@media (max-width: 850px) {
  .app-shell { padding:18px; }
  .hero { grid-template-columns:1fr; gap:30px; padding-top:60px; min-height:auto; }
  .hero-copy { padding-bottom:0; text-align:center; }
  .hero-copy p { margin-inline:auto; }
  .hero h1 { font-size:42px; }
  .login-card { max-width:520px; width:100%; margin:auto; }
  .player-card { width:100%; }
}
@media (max-width: 500px) {
  .hero h1 { font-size:34px; }
  .card { padding:22px; border-radius:20px; }
  .player-head { align-items:flex-start; gap:12px; }
}