/* Basic responsive layout for ClipMaster demo */
:root{
  --accent:#ff5a5f;
  --text:#222;
  --muted:#666;
  --bg:#f6f7f9;
  --max-width:1100px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  line-height:1.45;
}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:1rem;
}
.site-header{
  background:#fff;
  border-bottom:1px solid #e6e6e6;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{margin:0;color:var(--accent);font-weight:800}
.main-nav a{margin:0 .5rem;color:var(--muted);text-decoration:none;font-size:.95rem}
.auth-links a{margin-left:.5rem;color:var(--accent)}
.hero{background:linear-gradient(90deg,#fff 0,#f7fbff 100%);padding:2rem;margin-top:1rem;border-radius:6px}
.features{display:flex;gap:1rem;margin:1rem 0}
.feature{background:#fff;padding:1rem;border-radius:6px;flex:1;border:1px solid #eee}
.container{display:block}
main.container{display:grid;grid-template-columns:1fr 300px;gap:1rem;align-items:start;padding:1rem}
.featured-videos .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.card{background:#fff;border-radius:6px;padding:.5rem;border:1px solid #eee}
.card video{width:100%;height:auto;border-radius:4px;background:#000}
.sidebar{position:sticky;top:1rem}
.site-footer{background:#fff;padding:1rem 0;border-top:1px solid #eaeaea;margin-top:2rem;text-align:center}
@media(max-width:900px){
  main.container{grid-template-columns:1fr}
  .features{flex-direction:column}
  .sidebar{position:static}
}