/* Classic baseline stylesheet (rollback) */
:root{
  --accent:#7c3aed; --accent-2:#0ea5e9; --surface:#0f142d; --muted:#9fb0d1;
  --bg: #0f142d; --ink:#e7eaf6; --ink-muted:#a8b3cf; --radius:16px; --border:rgba(255,255,255,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Vazirmatn,system-ui,Arial,sans-serif;background:#0b1022;color:var(--ink);}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:16px}
.row{display:flex;align-items:center}
.row.between{justify-content:space-between}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}}
.card{border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.03);overflow:hidden}
.glass{backdrop-filter: blur(6px)}
.p-3{padding:16px}
.mt-1{margin-top:8px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;border:1px solid transparent;background:linear-gradient(180deg,#2a2f52,#1b203d);color:#fff;cursor:pointer}
.btn.small{padding:8px 12px}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.btn.outline{background:transparent;border-color:var(--border)}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border);font-size:12px}
.input, input, select, textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.15);color:var(--ink)}
.site-header{position:sticky;top:0;background:rgba(15,20,45,.8);backdrop-filter: blur(6px);border-bottom:1px solid var(--border);z-index:10}
.brand{font-weight:800}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.06)}
.hero{padding:24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.grid.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.grid.videos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid.videos{grid-template-columns:1fr}}
.card .thumb{height:160px;object-fit:cover;background:#0c1330}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:right}
.small-text{font-size:12px;color:var(--ink-muted)}
.site-footer{border-top:1px solid var(--border);margin-top:32px;padding:16px 0}
.mobile-only{display:none}
@media(max-width:768px){.mobile-only{display:inline-flex} .nav{display:none} .nav.mobile-open{display:flex;flex-direction:column;gap:8px;margin-top:8px}}

.auth-page {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:80vh;
}
.auth-card {
  width:100%;
  max-width:400px;
  padding:32px;
  border-radius:20px;
  animation:fadeIn 0.4s ease-in-out;
}
.auth-card h2 {
  font-weight:700;
  margin-bottom:8px;
}
.auth-card form {
  margin-top:16px;
}
.auth-card input {
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:var(--ink);
}
.auth-card .btn.full {
  width:100%;
  margin-top:12px;
}
.text-center { text-align:center; }
.link { color:var(--accent-2); text-decoration:none; }
.link:hover { text-decoration:underline; }
@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}
.sea .pricing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:1000px){.sea .pricing{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.sea .pricing{grid-template-columns:1fr}}
.sea .plan{padding:22px}
.sea .plan .price{font-size:32px}
.sea .plan .features{list-style:none;margin:10px 0 0 0;padding:0}
.sea .plan .features li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.08)}


/* ========== Catalog polish ========== */
.filterbar {
  position: sticky; top: 12px; z-index: 8;
  padding: 14px 16px;
  border-radius: var(--radius);
}
.row.wrap { flex-wrap: wrap; }
.gap6 { gap: 6px; } .gap8 { gap: 8px; }
.g8 { gap: 8px; } .g6 { gap: 6px; }
.fx1 { flex: 1 1 220px; } .fx0 { flex: 0 0 auto; }
.m0 { margin: 0; }

/* chips/pills */
.pill {
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.04); font-size:13px;
}
.pill:hover { background: rgba(255,255,255,.08); }
.pill.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,58,237,.2) inset; }

/* video cards */
.card-video .thumb { height: 180px; object-fit: cover; background:#0c1330; }
@media(max-width:600px){ .card-video .thumb{ height:150px; } }

.badge.ghost { background: transparent; border-color: var(--border); }
.badge.gold  { background: linear-gradient(90deg,#ffb703,#ffd166); color:#222; border:0; }
.badge.free  { background: rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.35); }

/* empty state */
.empty-state { text-align:center; padding:28px; }
.empty-state h3 { margin:0 0 6px 0; }
.empty-state p { margin:0 0 12px 0; }

/* small polish */
input, select { min-height: 40px; }


/* ===== Video detail polish ===== */
.video-page { display: grid; gap: 16px; }
.video-head { padding: 16px; border-radius: var(--radius); }
.video-body { padding: 16px; border-radius: var(--radius); }

.player-wrap {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #0c1330;
}
.player {
  width: 100%;
  aspect-ratio: 16/9;           /* ویدیو واکنش‌گرا */
  max-height: 76vh;
  display: block;
  background: #0c1330;
}

.badge.ghost { background: transparent; border-color: var(--border); }
.badge.gold  { background: linear-gradient(90deg,#ffb703,#ffd166); color:#222; border:0; }
.badge.free  { background: rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.35); }

.g6{gap:6px}.g8{gap:8px}
.m0{margin:0}

/* ===== Home polish ===== */
.home-page { display: grid; gap: 16px; }
.notice { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.kicker { font-size:13px; color:var(--muted); letter-spacing:.3px; }
.hero-home { padding:24px; border-radius: var(--radius); text-align: start; }
.hero-home h1 { margin:6px 0 0 0; font-size: clamp(24px, 4vw, 36px); line-height:1.25; }
.hero-home .lead { margin-top:6px; color: var(--ink-muted); }
.hero-home .grad { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.row.wrap { flex-wrap: wrap; }
.g6{gap:6px} .g8{gap:8px}
.fx1{ flex:1 1 260px; } .fx0{ flex:0 0 auto; }
.m0{margin:0}

/* Pills (section shortcuts) */
.pill{
  display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px;
  border:1px solid var(--border); background:rgba(255,255,255,.04); font-size:13px;
}
.pill:hover{ background:rgba(255,255,255,.08); }

/* Video cards */
.card-video .thumb { height: 190px; object-fit: cover; background:#0c1330; border-bottom:1px solid var(--border); }
@media (max-width: 640px){ .card-video .thumb { height: 160px; } }

.badge.ghost{ background: transparent; border-color: var(--border); }
.badge.gold { background: linear-gradient(90deg,#ffb703,#ffd166); color:#222; border:0; }
.badge.free { background: rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.35); }

.empty-state { text-align:center; padding:26px; border-radius:var(--radius); }


/* ===== Pricing Polish ===== */
.pricing-page { display: grid; gap: 16px; }
.hero-pricing { padding: 20px; border-radius: var(--radius); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.plan-card {
  grid-column: span 12;
  padding: 18px;
  border-radius: calc(var(--radius) + 4px);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  border: 1px solid var(--border);
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
}
.plan-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }

@media(min-width:700px){
  .plan-card { grid-column: span 6; }
}
@media(min-width:1024px){
  .plan-card { grid-column: span 3; }
}

/* Ribbon for recommended */
.plan-card.recommended {
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 12px 28px rgba(124,58,237,.18);
}
.ribbon{
  position:absolute; inset-inline-start:-6px; top:12px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; padding:6px 10px; font-size:12px; border-radius:0 10px 10px 0;
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
}

/* Plan head & price */
.plan-head h3 { font-size: 20px; }
.plan-price .price {
  display:flex; align-items:baseline; gap:6px;
  font-weight:800; letter-spacing:.2px;
}
.plan-price .amount { font-size: 28px; line-height:1; }
.plan-price .unit { font-size: 13px; opacity:.85; }
.plan-price .price.free { font-size: 24px; font-weight:800; }
.plan-price .sub { margin-top:4px; }

/* Features list */
.features { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.features li { display:flex; align-items:center; gap:8px; }
.features .tick {
  width:18px; height:18px; border-radius:6px;
  border:1px solid rgba(16,185,129,.45);
  background: rgba(16,185,129,.12);
  position:relative; flex:0 0 18px;
}
.features .tick::after{
  content:""; position:absolute; inset:3px 5px 4px 4px;
  border-right:2px solid #10b981; border-bottom:2px solid #10b981;
  transform: rotate(35deg);
}

/* Tier accents (گرادیان‌های لطیف) */
.tier-free    { background-image: linear-gradient(180deg, rgba(16,185,129,.05), transparent); }
.tier-silver  { background-image: linear-gradient(180deg, rgba(156,163,175,.08), transparent); }
.tier-gold    { background-image: linear-gradient(180deg, rgba(234,179,8,.10), transparent); }
.tier-diamond { background-image: linear-gradient(180deg, rgba(14,165,233,.10), transparent); }

/* Buttons in card footer */
.plan-card .btn.full { width:100%; }

/* ==== پایه‌ی پلیر ==== */
.player-wrap {
  position: relative;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
}
.player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(82vh, 720px);
  object-fit: contain;
  background: #000;
}

/* ==== کنترل‌ها ==== */
.controls {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  height: 52px;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto auto auto auto; /* + Exit */
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.42));
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px 10px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 30;
  pointer-events: auto;
}
.controls.hidden { opacity: 0; pointer-events: none; transform: translateY(8px); }

.cbtn, .csel {
  min-height: 34px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff; font-size: 14px;
}
.cbtn { padding: 0 12px; cursor: pointer; }
.cbtn:hover { background: rgba(255,255,255,.14); }
.csel { padding: 6px 10px; }

.time { display:flex; align-items:center; gap:10px; min-width: 220px; }
.seek-wrap { position: relative; width: clamp(160px, 42vw, 560px); height: 18px; display: flex; align-items: center; }
#seek { width: 100%; accent-color: var(--accent); position: relative; z-index: 2; }
.buffer { position: absolute; inset: 50% 0 auto 0; transform: translateY(-50%); height: 4px; border-radius: 999px; background: rgba(255,255,255,.18); width: 0%; z-index: 1; }
.seek-tip { position: absolute; bottom: 140%; padding: 3px 6px; font-size: 12px; background: rgba(0,0,0,.65); color: #fff; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.seek-tip.show { opacity: 1; }

.vol { display:flex; align-items:center; gap:10px; }
#rangeVol { width: 110px; accent-color: var(--accent-2); }

.quality { display:flex; align-items:center; gap: 8px; }
.qlabel { font-size: 12px; padding: 2px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); }

/* Theater mode */
.player-wrap.theater { border-radius: 0; }
.player-wrap.theater .player { max-height: 86vh; }

/* Floating watermark */
.wm {
  position: absolute; left: 10px; top: 12%;
  font-weight: 800; font-size: clamp(14px, 2.4vw, 20px);
  color: rgba(255,255,255,.12);
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  transform: rotate(-12deg);
  z-index: 20;
}

/* Overlay Play */
.overlay-play{
  position:absolute; inset:0; margin:auto; width:72px; height:72px;
  border-radius:50%; border:1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,.06));
  color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  opacity:0; transform: scale(.9); transition:.18s ease;
  z-index: 40;
  pointer-events: none;
}
.overlay-play.show{ opacity:1; transform: scale(1); pointer-events: auto; }

/* ===== Fullscreen ===== */
.player-wrap:fullscreen,
.player-wrap:-webkit-full-screen {
  width: 100svw !important;
  height: 100svh !important;
  max-height: 100svh !important;
  border-radius: 0 !important;
  background: #000 !important;
}
.player-wrap:fullscreen .player,
.player-wrap:-webkit-full-screen .player {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}
.player-wrap.fs-active .controls {
  left: 16px !important; right: 16px !important; bottom: 16px !important;
}

/* ==== Responsive (Android/iOS friendly) ==== */
@media (max-width: 640px) {
  .controls{
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; height: auto; padding: 8px;
  }
  .controls .cbtn { min-height: 36px; }
  .controls .time{ order: 10; width: 100%; min-width: 0; }
  .controls .seek-wrap{ width: 100%; }
  #rangeVol{ width: 90px; }
  .qlabel{ display: none; }
  #rate{ min-width: 72px; }
}

/* ===== Mini Player (🗕) ===== */
.player-wrap.min {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: clamp(240px, 40vw, 420px);
  aspect-ratio: 16 / 9;
  height: auto;
  z-index: 2147483647; /* بالا از همه */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  background: #000;
}
.player-wrap.min .player {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
.player-wrap.min .controls { display: none; }  /* می‌تونی نگه داری؛ ترجیحاً پنهان */
.player-wrap.min .wm { display: none; }        /* واترمارک در اندازه کوچک دیده نشه بهتره */

/* اختیاری: کمی فضا بدیم که محتوای صفحه زیر مینی‌پلیر قایم نشه */
body.has-min { padding-bottom: 260px; }

@media (max-width: 640px) {
  .player-wrap.min {
    right: 12px;
    bottom: 12px;
    width: min(86vw, 420px);
  }
}