:root{
  --orange: #FF7a00;
  --char: #1C1C1C;
  --cream: #FFF;
  --accentblue: #007bff;
  --accent: #FFD166;
  --muted: #8b8b8b;
  --maxw: 900px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#fff 0%, #fff 100%);color:var(--char);min-height:100vh}
.container{max-width:var(--maxw);margin:0 auto;padding:18px}
.site-header{background:#fff;border-bottom:1px solid #eee;position:sticky;top:0;z-index:50}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--char);font-weight:700}
.logo img{height:46px}
nav a{margin-left:12px;text-decoration:none;color:var(--char)}
nav a.btn{background:var(--orange);color:white;padding:8px 12px;border-radius:8px}

.grid{display:grid;grid-template-columns: 1fr 320px;gap:20px;padding:22px 0}
.main-col{min-height:400px}
.challenge-card{background:linear-gradient(90deg, #fff, #fff);border-radius:14px;padding:18px;box-shadow:0 6px 20px rgba(0,0,0,0.05);border-left:6px solid var(--orange)}
.challenge-card h2{margin:0 0 8px 0;font-family:Poppins, system-ui;font-weight:700}
.challenge-card .muted{color:var(--muted)}
.btn{display:inline-block;background:var(--orange);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;border:none;font-weight:600}
.feed{margin-top:22px}
.response-card{background:#fff;padding:14px;border-radius:12px;margin-bottom:12px;box-shadow:0 4px 12px rgba(0,0,0,0.03)}
.response-card .meta{font-size:14px;color:var(--char);margin-bottom:8px}
.response-card .body{font-size:15px;line-height:1.45}
.actions{margin-top:10px;display:flex;gap:8px}
.small{background:#eee;padding:6px 10px;border-radius:8px;border:none;font-weight:400px;font-size:bold}
.side-col .card{background:#fff;padding:14px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,0.03);margin-bottom:12px}
.leaderboard ol{padding-left:18px;margin:0}
.ad-slot .ad{height:250px;background:linear-gradient(135deg,#fffaf0,#fff5e6);display:flex;align-items:center;justify-content:center;border-radius:12px;border:1px dashed #f0caa6;color:#c07b00}

/* auth */
.center{display:flex;align-items:center;justify-content:center;min-height:80vh;background:linear-gradient(180deg,#fff,#fffaf5)}
.card.auth{width:420px;padding:28px;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.05);background:#fff}
input, textarea{width:100%;padding:12px;border-radius:8px;border:1px solid #eee;margin-bottom:10px;font-size:15px}
.alert{background:#ffe8e0;color:#8b2b00;padding:8px;border-radius:8px;margin-bottom:10px}
.muted{color:var(--muted);font-size:13px}
.inline-form{display:inline}
.attach{
    height:660px;
  }
  img{
  width:100%;
  height:100%;
}

.btn-vote{font-weight:bold;font-size: 15px;}


/* responsive */
@media (max-width:980px){
  .grid{grid-template-columns: 1fr; padding:10px}
  .side-col{order:2}
  .main-col{order:1}

  .attach{
    height:400px;
  }
  img{
  width:100%;
  height:100%;
}
}


/* ================================
   CHEETAR - MAIN UI THEME
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
  --primary: linear-gradient(135deg, #CC5500, #0A3D62);
  --orange: #CC5500;
  --blue: #0A3D62;
  --text-dark: #1E1E1E;
  --text-light: #FFFFFF;
  --bg-light: #F8F9FB;
  --card-bg: #FFFFFF;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: var(--bg-light);
  color: var(--text-dark);
  overflow-x: hidden;
}

/* HEADER / NAVIGATION */
header {
  background: var(--primary);
  color: var(--text-light);
  padding: 18px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow);
}

header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* MAIN CONTENT */
.container {
  width: 98%;
  max-width: 800px;
  margin: 20px auto;
}

/* CARDS */
.card {
  background: var(--card-bg);
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
  padding: 16px;
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 8px;
}

.card p {
  font-size: 14px;
  color: #555;
}

/* BUTTONS */
.btn {
  background: var(--primary);
  border: none;
  color: white;
  padding: 10px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: var(--shadow);
  transition: 0.3s;
}

.btn:hover {
  transform: scale(1.03);
}

/* FOOTER NAVIGATION */
nav.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: var(--primary);
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  color: white;
}

nav.bottom-nav a {
  text-decoration: none;
  color: white;
  font-size: 14px;
  font-weight: 500;
  transition: 0.3s;
}

nav.bottom-nav a:hover {
  opacity: 0.8;
}


/* ================================
   ANIMATIONS & LOADER
   ================================ */

/* Loader screen */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: opacity 0.5s ease;
}

/* Fade-in for cards */
.card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button click animation */
.btn:active {
  transform: scale(0.97);
}

/* Floating nav animation */
nav.bottom-nav {
  transition: bottom 0.3s ease;
}

/* Hide nav on scroll down */
nav.bottom-nav.hidden {
  bottom: -70px;
}
/* cheetar-logo.css */

/* Page background */


/* Logo container */
.cheetar-logo {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.2rem;
  animation: fadeIn 1.2s ease-in-out;
}

/* Lightning icon with energy pulse */
.lightning {
  font-size: 1.5rem;
  margin-right: 0.5rem;
  color: #ffffff;
  text-shadow: 0 0 20px #fff, 0 0 30px #ffae00, 0 0 50px #ffaa00;
  animation: flicker 1s infinite alternate, pulse 2.5s ease-in-out 2s infinite;
}

/* Sequential letter animation */
.letters span {
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.6s forwards ease-out;
  display: inline-block;
}

/* Delay each letter to appear one after another */
.letters span:nth-child(1) { animation-delay: 0.2s; }
.letters span:nth-child(2) { animation-delay: 0.4s; }
.letters span:nth-child(3) { animation-delay: 0.6s; }
.letters span:nth-child(4) { animation-delay: 0.8s; }
.letters span:nth-child(5) { animation-delay: 5s; }
.letters span:nth-child(6) { animation-delay: 1.2s; }
.letters span:nth-child(7) { animation-delay: 1.4s; }

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flicker {
  from { opacity: 0.8; text-shadow: 0 0 10px #ff8c00; }
  to { opacity: 1; text-shadow: 0 0 25px #ffae00, 0 0 40px #ff8c00; }
}

/* Energy pulse and forward motion */
@keyframes pulse {
  0% { transform: translateX(0) scale(1); }
  25% { transform: translateX(3px) scale(1.05); }
  50% { transform: translateX(0) scale(1.1); }
  75% { transform: translateX(-3px) scale(1.05); }
  100% { transform: translateX(0) scale(1); }
}


.none{
  background: transparent;
}

.response-media {
  display: block;
  margin: 10px auto;
  border-radius: 10px;
  background: #000;
}

.desc{
  max-height: 170px;
  overflow:scroll
}