/* Styles for VidSrc clone */
:root{
  --bg:#0f0610;
  --panel:#1d1222;
  --muted:#9b78b4;
  --accent1:#ff6fd8;
  --accent2:#8b49f0;
  --card:#2a1727;
  --glass:rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(ellipse at top left, rgba(139,73,240,0.06) 0%, rgba(255,111,216,0.02) 30%), var(--bg);
  color:#e8d8ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:1400px;margin:0 auto;padding:20px 40px}
.site-header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg, rgba(0,0,0,0.15), transparent);backdrop-filter: blur(2px);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.logo{font-family:Poppins, Inter; font-weight:700; color:var(--accent1); font-size:22px}
.nav a{color:var(--muted); margin-left:20px; text-decoration:none; font-weight:600}

.hero{padding:40px 0 60px; text-align:center}
.title{font-family:Poppins; font-size:64px; margin:0; line-height:1.1; font-weight:700; background:linear-gradient(90deg,var(--accent1),var(--accent2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.subtitle{font-size:36px;margin:20px 0;color:#f2c7ff;opacity:0.95;font-weight:600}
.lead{color:var(--muted);max-width:900px;margin:20px auto 32px;font-size:17px;line-height:1.6}
.actions{display:flex;gap:16px;justify-content:center;margin-bottom:32px}
.btn{padding:14px 28px;border-radius:10px;border:1px solid rgba(139,73,240,0.4);cursor:pointer;font-weight:700;font-size:15px;transition:all 0.2s}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#120016;box-shadow:0 8px 30px rgba(139,73,240,0.3)}
.btn-outline{background:rgba(139,73,240,0.08);color:var(--accent1);border:1px solid rgba(139,73,240,0.3)}

.embed-form{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:28px;margin-bottom:32px}
.input{padding:14px 18px;border-radius:10px;border:1px solid rgba(139,73,240,0.3);background:rgba(45,20,55,0.6);color:#fff;font-size:16px}
.id-input{width:160px;text-align:center;font-weight:700}
.season-input, .episode-input{width:100px;text-align:center;font-weight:700}
.url-box{background:rgba(45,20,55,0.7);padding:14px 20px;border-radius:10px;color:#dbb8ff;min-width:500px;font-size:15px;border:1px solid rgba(139,73,240,0.2)}
.copy-btn{padding:14px 20px;border-radius:10px;background:rgba(139,73,240,0.08);border:1px solid rgba(139,73,240,0.3);color:var(--accent1);cursor:pointer;font-weight:600;font-size:14px}

.player-wrap{display:flex;justify-content:center;margin-top:18px}
.player{width:100%;max-width:1100px;height:520px;background:#000;border-radius:6px;border:1px solid rgba(255,255,255,0.06);box-shadow:0 10px 40px rgba(0,0,0,0.6);overflow:hidden}
.player-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#222;background:linear-gradient(180deg,#000,#000)}

.features{padding:60px 20px}
.section-title{font-size:28px;color:var(--accent1);text-align:center;margin-bottom:6px}
.section-desc{color:var(--muted);text-align:center;margin-bottom:28px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:rgba(45,20,55,0.5);padding:22px;border-radius:10px;border:1px solid rgba(139,73,240,0.25);text-align:left}
.card-icon{font-size:26px;margin-bottom:12px}
.card h4{margin:0 0 6px;font-size:16px;color:#f1d1ff}
.card p{margin:0;color:var(--muted);font-size:13px}

.api{padding:40px 20px 80px}
.docs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.doc{background:rgba(45,20,55,0.5);border-radius:10px;padding:0;border:1px solid rgba(139,73,240,0.25)}
.doc-header{background:linear-gradient(90deg,var(--accent1),var(--accent2));padding:10px 14px;border-radius:10px 10px 0 0;font-weight:700;color:#120016}
.doc-body{padding:14px;color:var(--muted);font-size:14px}
.doc-body code{display:block;background:rgba(20,10,25,0.8);padding:8px;border-radius:6px;color:#8ad; margin:8px 0;border:1px solid rgba(139,73,240,0.15)}
.doc-body ul{margin:8px 0 12px 18px;color:var(--muted)}
.muted{color:var(--muted);font-weight:700;margin-top:8px}

.site-footer{padding:28px 0;background:transparent;border-top:1px solid rgba(255,255,255,0.02);text-align:center;color:var(--muted)}

/* Responsive */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .docs{grid-template-columns:1fr}
  .player{width:100%;height:360px}
  .url-box{min-width:220px}
}
@media (max-width:560px){
  .title{font-size:28px}
  .subtitle{font-size:18px}
  .header-inner{padding:12px}
  .cards{grid-template-columns:1fr}
}