:root{--bg:#f8fafc;--card:#fff;--accent:#6a2fb3;--muted:#6b7280}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Roboto,Arial;background:var(--bg);color:#111;-webkit-font-smoothing:antialiased}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid #eee;position:sticky;top:0}
.brand{font-weight:700;color:var(--accent)}
.container{max-width:720px;margin:16px auto;padding:0 12px}
.card{background:var(--card);border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 6px 18px rgba(20,20,30,0.04)}
.center{max-width:420px;margin:40px auto;padding:18px}
.auth-card h1{text-align:center;margin-bottom:12px}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{flex:1;padding:10px;border-radius:8px;border:1px solid #e6e9ef;background:#fff;cursor:pointer}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.form label{display:block;margin-bottom:10px}
.form input{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e9ef}
.primary{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:10px;cursor:pointer}
.secondary{background:#fff;border:1px solid #e6e9ef;padding:9px 12px;border-radius:10px;cursor:pointer}
.hidden{display:none}
.muted{color:var(--muted);font-size:13px}
.points{font-size:20px;color:green;margin:10px 0;font-weight:700}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.video-wrap{width:100%;background:#000;border-radius:8px;overflow:hidden}
video{width:100%;height:auto;display:block;border-radius:8px;background:#000}
.list .item{padding:10px;border-radius:8px;border:1px dashed #eee;margin-bottom:8px;font-size:14px}
.link{background:none;border:none;color:var(--accent);cursor:pointer}
.small{font-size:12px}
@media(min-width:800px){.container{padding:0 24px}}


/* Full-page centered layout for login */
body.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: var(--bg);
}

/* Redeem UI */
.redeem-container {
  transition: all .2s ease;
  border: 1px solid #ede7fb;
  background: linear-gradient(180deg, #fbf8ff, #ffffff);
  padding: 14px;
  border-radius: 12px;
}
.redeem-container input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e6e1f6;
  width: 100%;
  margin-top:8px;
  margin-bottom:6px;
}
.redeem-success {
  border: 1px solid #d4f5e6;
  background: linear-gradient(180deg,#f0fff6,#ffffff);
  padding: 12px;
  border-radius: 12px;
  color: #036635;
  box-shadow: 0 6px 20px rgba(3,102,53,0.06);
  max-width: 720px;
  margin: 10px auto;
  animation: slideDown 0.28s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* Minimal Apple-like theme */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #f5f5f7;
  color: #1d1d1f;
  margin: 0;
  padding: 0;
}

header, footer {
  text-align: center;
  padding: 12px;
  font-size: 14px;
  color: #86868b;
}

.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  padding: 16px;
  margin: 12px;
}

button.primary, .btn-primary {
  background: #007aff;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}
button.primary:hover, .btn-primary:hover {
  background: #005ecb;
}
button.secondary {
  background: #e5e5ea;
  color: #1d1d1f;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
}

input, select {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #d2d2d7;
  font-size: 16px;
  box-sizing: border-box;
}

.redeem-container {
  margin-top: 15px;
  animation: fadeIn 0.3s ease;
}

.redeem-success {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #e6f7ec;
  border: 1px solid #a8e5b0;
  color: #065f46;
  border-radius: 12px;
  padding: 12px;
  margin-top: 15px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}