/* ============================================================
   PAGE STYLES — MINIMAL CLEAN
   ============================================================ */

/* ---- PAGE HEADER ---- */
.page-header { padding:36px 0 28px; border-bottom:1px solid var(--border); margin-bottom:32px; }
.page-header h1 { font-size:clamp(28px,4vw,48px); }
.page-header p  { color:var(--gray); font-size:14px; margin-top:6px; max-width:520px; }
.breadcrumb { display:flex; gap:6px; align-items:center; font-size:12px; color:var(--gray); margin-bottom:10px; }
.breadcrumb a:hover { color:var(--white); }
.breadcrumb span { color:var(--red); font-weight:600; }

/* ---- HERO ---- */
.hero {
  min-height:86vh; display:flex; align-items:center;
  background:var(--bg); position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 65% 50%, rgba(224,32,32,0.06) 0%, transparent 65%);
  pointer-events:none;
}
.hero-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; width:100%; }
.hero-overline {
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--red); margin-bottom:14px;
}
.hero-overline::before { content:''; width:24px; height:2px; background:var(--red); display:block; }
.hero-h1 { font-size:clamp(44px,6vw,84px); line-height:1.0; }
.hero-h1 .line1 { color:var(--white); display:block; }
.hero-h1 .line2 { color:var(--red); font-style:italic; display:block; }
.hero-desc { font-size:15px; color:var(--gray); margin:16px 0 28px; line-height:1.7; max-width:440px; }
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; }

/* ---- FEATURED VIDEO ---- */
.video-featured {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bg-card); border:1px solid var(--border); cursor:pointer;
}
.video-featured-thumb {
  width:100%; aspect-ratio:16/9; object-fit:cover; background:#111; display:block;
}
.video-featured-overlay {
  position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,0.65) 0%,transparent 55%);
  display:flex; align-items:center; justify-content:center;
}
.play-btn {
  width:60px; height:60px; border-radius:50%;
  background:rgba(224,32,32,0.9); display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; transition:transform 0.15s, background 0.15s;
}
.play-btn:hover { transform:scale(1.08); background:var(--red); }
.video-featured-info { position:absolute; bottom:0; left:0; right:0; padding:14px 16px; }
.video-featured-title { font-family:var(--font-head); font-size:16px; color:#fff; line-height:1.2; }
.video-featured-meta  { font-size:12px; color:rgba(255,255,255,0.65); margin-top:3px; }

/* ---- VIDEO CARD ---- */
.video-card { cursor:pointer; }
.video-thumb-wrap { position:relative; aspect-ratio:16/9; overflow:hidden; background:#111; }
.video-thumb-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.25s; }
.video-card:hover .video-thumb-wrap img { transform:scale(1.03); }
.video-dur {
  position:absolute; bottom:7px; right:8px;
  background:rgba(0,0,0,0.8); color:#fff; font-size:11px;
  font-weight:700; padding:2px 5px; border-radius:3px;
}
.video-card .card-body { padding:12px 14px; }
.video-title { font-family:var(--font-head); font-size:15px; margin-bottom:4px; line-height:1.2; }
.video-meta  { font-size:12px; color:var(--gray); display:flex; gap:8px; }

/* ---- ABOUT SECTION ---- */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.about-stats { display:flex; gap:28px; margin-top:24px; flex-wrap:wrap; }
.about-stat-val { font-family:var(--font-head); font-size:36px; color:var(--red); display:block; }
.about-stat-lbl { font-size:11px; color:var(--gray); text-transform:uppercase; letter-spacing:0.1em; }

/* ---- TEAM ---- */
.team-card { text-align:center; padding:20px 14px; }
.team-avatar {
  width:72px; height:72px; border-radius:50%; margin:0 auto 12px;
  background:var(--bg-card2); border:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:28px;
}
.team-name { font-family:var(--font-head); font-size:16px; }
.team-role { font-size:12px; color:var(--red); font-weight:600; margin-top:2px; }

/* ---- NEWSLETTER ---- */
.newsletter { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; text-align:center; }
.newsletter h2 { font-size:clamp(20px,3vw,32px); margin-bottom:6px; }
.newsletter p  { color:var(--gray); font-size:14px; margin-bottom:24px; }
.newsletter-form { display:flex; gap:10px; justify-content:center; max-width:400px; margin:0 auto; }
.newsletter-form input { flex:1; padding:10px 14px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--white); font-size:14px; }
.newsletter-form input:focus { border-color:var(--red); }

/* ---- POLL CARD ---- */
.poll-card { padding:22px; }
.poll-q { font-family:var(--font-head); font-size:18px; margin-bottom:18px; line-height:1.2; }
.poll-opt { margin-bottom:12px; }
.poll-opt-btn {
  width:100%; text-align:left; padding:9px 13px;
  background:var(--bg-card2); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--white); font-size:13px;
  display:flex; justify-content:space-between; align-items:center;
  transition:border-color 0.12s, background 0.12s;
}
.poll-opt-btn:hover  { border-color:var(--red); background:rgba(224,32,32,0.05); }
.poll-opt-btn.voted  { border-color:var(--red); background:rgba(224,32,32,0.08); color:var(--red); }
.poll-opt-btn.winner { border-color:gold; background:rgba(255,215,0,0.06); color:gold; }
.poll-pct { font-size:12px; font-weight:700; }
.poll-footer { display:flex; justify-content:space-between; align-items:center; margin-top:14px; font-size:12px; }
.poll-total { color:var(--gray); }
.poll-timer { color:var(--red); font-weight:700; font-family:var(--font-head); font-size:13px; }

/* ---- CHALLENGE CARD ---- */
.prize-tag {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,215,0,0.08); border:1px solid rgba(255,215,0,0.2);
  border-radius:20px; padding:3px 10px; font-size:12px; font-weight:700; color:gold; margin-bottom:10px;
}

/* ---- EVENTS ---- */
.event-badge { padding:2px 8px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; border-radius:3px; }
.event-shoot     { background:rgba(224,32,32,0.12); color:var(--red); }
.event-meetgreet { background:rgba(33,150,243,0.12); color:#5b8dd9; }
.event-podcast   { background:rgba(156,39,176,0.12); color:#b86dd9; }
.event-challenge { background:rgba(255,152,0,0.12); color:#ffaa00; }
.event-community { background:rgba(76,175,80,0.12); color:#5cb85c; }

/* ---- SHOP ---- */
.product-img { width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--bg-card2); display:flex; align-items:center; justify-content:center; font-size:64px; }
.product-price { font-size:20px; font-weight:700; color:var(--red); margin:6px 0 12px; }
.product-stock { font-size:12px; color:var(--gray); margin-bottom:10px; }

/* Cart panel */
#cart-panel {
  position:fixed; top:0; right:0; bottom:0; width:360px;
  background:var(--bg-card); border-left:1px solid var(--border);
  z-index:1000; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform 0.25s ease;
}
#cart-panel.open { transform:translateX(0); }
.cart-head { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid var(--border); }
.cart-head-title { font-family:var(--font-head); font-size:18px; }
.cart-close { font-size:20px; color:var(--gray); cursor:pointer; }
.cart-close:hover { color:var(--white); }
.cart-body { flex:1; overflow-y:auto; padding:14px 20px; }
.cart-item { display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.cart-item:last-child { border-bottom:none; }
.cart-item-icon { width:52px; height:52px; background:var(--bg-card2); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.cart-item-info { flex:1; }
.cart-item-name  { font-size:13px; font-weight:600; }
.cart-item-price { font-size:14px; color:var(--red); font-weight:700; }
.cart-qty { display:flex; align-items:center; gap:6px; margin-top:5px; }
.qty-btn  { width:24px; height:24px; background:var(--bg-card2); border:1px solid var(--border); border-radius:3px; color:var(--white); font-size:13px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.qty-btn:hover { border-color:var(--red); color:var(--red); }
.cart-remove { color:var(--gray); cursor:pointer; font-size:14px; }
.cart-remove:hover { color:var(--red); }
.cart-foot { padding:16px 20px; border-top:1px solid var(--border); }
.cart-sub  { display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:700; margin-bottom:14px; }
.cart-sub-val { color:var(--red); font-family:var(--font-head); font-size:22px; }
.cart-empty { text-align:center; padding:40px 20px; color:var(--gray); font-size:14px; }

/* ---- COMMUNITY ---- */
.post-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-bottom:20px; }
.post-box-input { width:100%; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--white); padding:10px 12px; resize:none; min-height:72px; font-size:14px; transition:border-color 0.15s; }
.post-box-input:focus { border-color:var(--red); }
.post-box-foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.c-post { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-bottom:12px; }
.c-post-author { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.c-post-avatar { width:36px; height:36px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-size:14px; font-family:var(--font-head); color:#fff; flex-shrink:0; }
.c-post-name  { font-size:14px; font-weight:600; }
.c-post-time  { font-size:11px; color:var(--gray); }
.c-post-body  { font-size:14px; line-height:1.6; margin-bottom:10px; }
.c-post-acts  { display:flex; gap:12px; }
.c-post-act   { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--gray); cursor:pointer; padding:4px 8px; border-radius:4px; transition:all 0.12s; }
.c-post-act:hover { color:var(--red); background:rgba(224,32,32,0.06); }
.c-post-act.liked { color:var(--red); }

/* ---- ARTICLE ---- */
.article-card img { width:100%; height:180px; object-fit:cover; background:var(--bg-card2); }
.article-cat { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--red); margin-bottom:6px; }
.article-title { font-family:var(--font-head); font-size:18px; margin-bottom:6px; line-height:1.2; }
.article-excerpt { font-size:13px; color:var(--gray); line-height:1.6; }
.article-by { display:flex; align-items:center; gap:7px; margin-top:12px; font-size:12px; color:var(--gray); }
.article-av { width:24px; height:24px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-size:11px; font-family:var(--font-head); color:#fff; }

/* Article page */
.article-body { font-size:15px; line-height:1.9; color:var(--gray-light); }
.article-body h2,.article-body h3 { color:var(--white); margin:24px 0 10px; font-size:22px; }
.article-body p { margin-bottom:14px; }
.article-body ul { list-style:disc; padding-left:22px; margin-bottom:14px; }
.article-body img { width:100%; border-radius:var(--radius); margin:18px 0; }

/* ---- AUTH ---- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:36px; width:100%; max-width:400px; }
.auth-title { font-size:28px; margin-bottom:4px; }
.auth-sub   { color:var(--gray); font-size:13px; margin-bottom:24px; }
.auth-or    { display:flex; align-items:center; gap:10px; margin:16px 0; }
.auth-or span { flex:1; height:1px; background:var(--border); }
.auth-or-txt { font-size:11px; color:var(--gray); text-transform:uppercase; letter-spacing:0.1em; }
.social-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; background:var(--bg-card2); border:1px solid var(--border); border-radius:var(--radius); color:var(--white); font-size:13px; font-weight:600; margin-bottom:8px; cursor:pointer; transition:border-color 0.15s; }
.social-btn:hover { border-color:var(--gray); }
.auth-switch { text-align:center; font-size:13px; color:var(--gray); margin-top:16px; }
.auth-switch a { color:var(--red); font-weight:600; }

/* ---- CONTACT ---- */
.contact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:40px; }
.contact-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 18px; text-align:center; transition:border-color 0.15s; }
.contact-card:hover { border-color:var(--red); }
.contact-icon  { font-size:28px; margin-bottom:8px; }
.contact-label { font-family:var(--font-head); font-size:15px; margin-bottom:4px; }
.contact-value { font-size:13px; color:var(--gray); }

/* ---- FOOTER ---- */
footer { background:var(--bg-card); border-top:1px solid var(--border); padding:48px 0 24px; margin-top:64px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand-name { font-family:var(--font-head); font-size:22px; color:var(--red); margin-bottom:10px; }
.footer-brand-desc { font-size:13px; color:var(--gray); line-height:1.7; max-width:260px; }
.footer-social { display:flex; gap:8px; margin-top:14px; }
.footer-social a { width:34px; height:34px; background:var(--bg-card2); border:1px solid var(--border); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--gray); transition:all 0.15s; }
.footer-social a:hover { background:var(--red); border-color:var(--red); color:#fff; }
.footer-heading { font-family:var(--font-head); font-size:14px; margin-bottom:14px; color:var(--white); }
.footer-link { display:block; font-size:13px; color:var(--gray); padding:3px 0; transition:color 0.12s; }
.footer-link:hover { color:var(--red); }
.footer-bottom { border-top:1px solid var(--border); padding-top:20px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--gray); flex-wrap:wrap; gap:8px; }

/* ---- ADMIN ---- */
.admin-layout { display:flex; min-height:100vh; }
.admin-sidebar {
  width:210px; background:var(--bg-card); border-right:1px solid var(--border);
  padding:20px 0; position:fixed; top:0; bottom:0; overflow-y:auto; z-index:100;
}
.admin-logo { padding:0 16px 18px; border-bottom:1px solid var(--border); margin-bottom:12px; }
.admin-logo-name { font-family:var(--font-head); font-size:18px; color:var(--red); }
.admin-logo-sub  { font-size:10px; color:var(--gray); letter-spacing:0.12em; text-transform:uppercase; margin-top:2px; }
.admin-nav { padding:8px 10px; font-size:13px; font-weight:500; color:var(--gray); border-radius:var(--radius); cursor:pointer; display:flex; align-items:center; gap:8px; transition:all 0.12s; margin:1px 6px; }
.admin-nav:hover  { color:var(--white); background:var(--bg-card2); }
.admin-nav.active { color:var(--red); background:rgba(224,32,32,0.07); }
.admin-main  { margin-left:210px; padding:28px; flex:1; min-width:0; }
.admin-section { display:none; }
.admin-section.active { display:block; }
.admin-pg-title { font-family:var(--font-head); font-size:28px; margin-bottom:22px; }
.stats-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.admin-table-wrap { overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th { text-align:left; padding:8px 12px; background:var(--bg-card2); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray); border-bottom:1px solid var(--border); }
.admin-table td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.admin-table tr:hover td { background:rgba(255,255,255,0.015); }
.admin-form-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; }

/* ---- TOGGLE (ANON) ---- */
.toggle-wrap { display:flex; align-items:center; gap:10px; padding:10px 0; }
.toggle { position:relative; width:40px; height:22px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--bg-card2); border:1px solid var(--border); border-radius:22px; cursor:pointer; transition:all 0.22s; }
.toggle-slider::before { content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; background:var(--gray); border-radius:50%; transition:transform 0.22s, background 0.22s; }
.toggle input:checked + .toggle-slider { background:rgba(224,32,32,0.15); border-color:var(--red); }
.toggle input:checked + .toggle-slider::before { transform:translateX(18px); background:var(--red); }

/* ---- RESPONSIVE ---- */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .about-grid  { grid-template-columns:1fr; }
  .stats-grid  { grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:repeat(2,1fr); }
  .admin-sidebar { width:190px; }
  .admin-main    { margin-left:190px; }
}
@media(max-width:768px) {
  .footer-grid   { grid-template-columns:1fr; }
  .contact-grid  { grid-template-columns:1fr; }
  .hero-grid     { grid-template-columns:1fr; }
  .newsletter-form { flex-direction:column; }
  .admin-sidebar { transform:translateX(-100%); position:fixed; }
  .admin-main    { margin-left:0; }
  .stats-grid    { grid-template-columns:1fr 1fr; }
}