/* ============================================================
   TIWANA STUDIOS — GLOBAL CSS (CLEAN MINIMAL)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg:        #0a0a0a;
  --bg-card:   #111111;
  --bg-card2:  #161616;
  --bg-input:  #1a1a1a;
  --red:       #E02020;
  --red-dark:  #a01515;
  --white:     #ffffff;
  --gray:      #888888;
  --gray-light:#aaaaaa;
  --border:    #242424;
  --border-light:#2e2e2e;
  --font-head: 'Anton', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --radius:    6px;
  --radius-lg: 10px;
}
[data-theme="light"] {
  --bg:        #f5f5f5;
  --bg-card:   #ffffff;
  --bg-card2:  #f0f0f0;
  --bg-input:  #f8f8f8;
  --white:     #111111;
  --gray:      #555555;
  --gray-light:#777777;
  --border:    #e0e0e0;
  --border-light:#ebebeb;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,textarea,select { font-family:var(--font-body); font-size:14px; outline:none; }

/* ---- TYPOGRAPHY ---- */
h1,h2,h3,h4,h5 {
  font-family:var(--font-head);
  letter-spacing:0.03em;
  text-transform:uppercase;
  line-height:1.1;
}
.section-title { font-size:clamp(22px,3vw,38px); margin-bottom:28px; }
.red-text { color:var(--red); }
.gray-text { color:var(--gray); }

/* ---- LAYOUT ---- */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.container-narrow { max-width:800px; margin:0 auto; padding:0 24px; }
.section { padding:64px 0; }

/* ---- BUTTONS ---- */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 22px;
  font-family:var(--font-head);
  font-size:15px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  border-radius:var(--radius);
  transition:background 0.15s, opacity 0.15s;
  cursor:pointer;
  white-space:nowrap;
}
.btn-red  { background:var(--red); color:#fff; }
.btn-red:hover { background:#c81c1c; }
.btn-dark { background:var(--bg-card2); color:var(--white); border:1px solid var(--border-light); }
.btn-dark:hover { border-color:var(--gray); }
.btn-sm   { padding:7px 16px; font-size:13px; }
.btn-full { width:100%; justify-content:center; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }

/* ---- FORMS ---- */
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:12px; font-weight:600;
  letter-spacing:0.07em; text-transform:uppercase;
  color:var(--gray-light); margin-bottom:6px;
}
.form-control {
  width:100%; padding:10px 14px;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--white);
  transition:border-color 0.15s;
  font-size:14px;
}
.form-control:focus { border-color:var(--red); }
.form-control::placeholder { color:#444; }
textarea.form-control { resize:vertical; min-height:110px; }
select.form-control {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}

/* ---- GRID ---- */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ---- CARD ---- */
.card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.card-body { padding:18px; }
.card:hover { border-color:var(--border-light); }

/* ---- BADGE ---- */
.badge {
  display:inline-block; padding:2px 9px;
  font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; border-radius:3px;
}
.badge-red   { background:rgba(224,32,32,0.15); color:var(--red); }
.badge-dark  { background:#222; color:var(--gray); }
.badge-green { background:rgba(76,175,80,0.12); color:#5cb85c; }

/* ---- TABS ---- */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:28px; overflow-x:auto; }
.tab-btn {
  padding:10px 18px; font-family:var(--font-head); font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--gray);
  border-bottom:2px solid transparent; white-space:nowrap;
  transition:color 0.15s, border-color 0.15s;
}
.tab-btn:hover  { color:var(--white); }
.tab-btn.active { color:var(--red); border-bottom-color:var(--red); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ---- SKELETON ---- */
.skeleton {
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-card2) 50%,var(--bg-card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.3s infinite;
  border-radius:var(--radius);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel-line { height:14px; margin-bottom:8px; }
.skel-line.short { width:55%; }
.skel-thumb { width:100%; aspect-ratio:16/9; }

/* ---- TOAST ---- */
#toast-container {
  position:fixed; bottom:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  padding:12px 18px; border-radius:6px; font-size:13px; font-weight:600;
  color:#fff; max-width:320px; display:flex; align-items:center; gap:8px;
  animation:toastIn 0.25s ease;
  pointer-events:all;
}
.toast-success { background:#1c2e1c; border-left:3px solid #5cb85c; }
.toast-error   { background:#2e1c1c; border-left:3px solid var(--red); }
.toast-info    { background:#1c1c2e; border-left:3px solid #5b8dd9; }
@keyframes toastIn { from{transform:translateX(40px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ---- MODAL ---- */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.75);
  z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); max-width:560px; width:100%;
  max-height:88vh; overflow-y:auto; padding:28px; position:relative;
}
.modal-close {
  position:absolute; top:14px; right:16px;
  font-size:20px; color:var(--gray); cursor:pointer; line-height:1;
}
.modal-close:hover { color:var(--white); }
.modal-title { font-family:var(--font-head); font-size:22px; margin-bottom:18px; }

/* ---- DIVIDER ---- */
hr.divider { border:none; border-top:1px solid var(--border); margin:24px 0; }

/* ---- STAT CARD ---- */
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 24px; }
.stat-card .stat-val { font-family:var(--font-head); font-size:40px; color:var(--red); line-height:1; }
.stat-card .stat-lbl { font-size:12px; color:var(--gray); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }

/* ---- POLL VOTE BAR ---- */
.vote-bar-wrap { background:var(--bg-card2); border-radius:3px; height:6px; overflow:hidden; margin-top:5px; }
.vote-bar-fill { height:100%; background:var(--red); border-radius:3px; transition:width 0.5s ease; }

/* ---- SCROLL TOP ---- */
#scroll-top {
  position:fixed; bottom:24px; right:24px;
  width:38px; height:38px; background:var(--red); color:#fff;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:16px; opacity:0; pointer-events:none; z-index:500;
  transition:opacity 0.2s; box-shadow:0 2px 10px rgba(224,32,32,0.35);
}
#scroll-top.visible { opacity:1; pointer-events:all; }

/* ---- POINTS FLASH ---- */
.points-flash {
  position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  background:var(--red); color:#fff; font-family:var(--font-head);
  font-size:18px; padding:8px 22px; border-radius:20px; z-index:9000;
  animation:pFlash 1.8s ease forwards; pointer-events:none;
}
@keyframes pFlash {
  0%  {opacity:0;transform:translateX(-50%) translateY(10px)}
  20% {opacity:1;transform:translateX(-50%) translateY(0)}
  75% {opacity:1}
  100%{opacity:0;transform:translateX(-50%) translateY(-20px)}
}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .section{padding:40px 0}
}