* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #0f0f13;
  color: #e8e8ea;
  line-height: 1.5;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid #232329;
}
.logo { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.logo span { color: #6c5ce7; }
nav a { color: #a0a0aa; text-decoration: none; margin-left: 28px; font-size: 14px; }
nav a:hover { color: #fff; }
.btn { background: #6c5ce7; color: #fff; padding: 8px 18px; border-radius: 6px; font-size: 14px; text-decoration: none; display: inline-block; }

.hero { max-width: 780px; margin: 90px auto 60px; text-align: center; padding: 0 20px; }
.hero h1 { font-size: 42px; font-weight: 800; letter-spacing: -1px; margin-bottom: 18px; }
.hero p { color: #a0a0aa; font-size: 17px; margin-bottom: 32px; }
.hero .btn { padding: 12px 28px; font-size: 15px; }

.features { max-width: 960px; margin: 0 auto 100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 20px; }
.card { background: #17171d; border: 1px solid #232329; border-radius: 10px; padding: 24px; }
.card h3 { font-size: 16px; margin-bottom: 8px; }
.card p { color: #8a8a94; font-size: 14px; }

footer { text-align: center; padding: 30px; color: #5a5a64; font-size: 13px; border-top: 1px solid #232329; }

/* browse page */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.thumb { position: relative; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #2b2b38, #1a1a22); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; color: #4a4a56; font-size: 22px; }
.duration { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.75); font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.video-title { font-size: 14px; margin-top: 8px; }
.video-meta { font-size: 12px; color: #8a8a94; margin-top: 2px; }

/* pricing page */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 900px; margin: 60px auto; padding: 0 20px; }
.plan { background: #17171d; border: 1px solid #232329; border-radius: 10px; padding: 32px 24px; text-align: center; }
.plan.featured { border-color: #6c5ce7; }
.plan h3 { font-size: 18px; margin-bottom: 6px; }
.plan .price { font-size: 36px; font-weight: 800; margin: 14px 0; }
.plan .price span { font-size: 14px; color: #8a8a94; font-weight: 400; }
.plan ul { list-style: none; margin: 20px 0; text-align: left; color: #a0a0aa; font-size: 14px; }
.plan li { padding: 6px 0; border-bottom: 1px solid #1e1e24; }

/* upload page */
.dropzone { max-width: 700px; margin: 80px auto; border: 2px dashed #33333c; border-radius: 12px; padding: 70px 30px; text-align: center; color: #8a8a94; }
.dropzone h2 { color: #e8e8ea; margin-bottom: 10px; }
.dropzone .btn { margin-top: 20px; }

/* sign in page */
.auth-card { max-width: 380px; margin: 100px auto; background: #17171d; border: 1px solid #232329; border-radius: 10px; padding: 36px 30px; }
.auth-card h2 { margin-bottom: 20px; text-align: center; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: #a0a0aa; margin-bottom: 6px; }
.field input { width: 100%; padding: 10px 12px; background: #0f0f13; border: 1px solid #2c2c34; border-radius: 6px; color: #e8e8ea; font-size: 14px; }
.auth-card .btn { width: 100%; text-align: center; margin-top: 8px; border: none; cursor: pointer; }
.auth-foot { text-align: center; font-size: 13px; color: #8a8a94; margin-top: 16px; }
.auth-foot a { color: #6c5ce7; text-decoration: none; }