/* ==========================================================================
   Aminachu.moe — Design System
   Tokens + layout + components. Built from the design handoff tokens.
   ========================================================================== */

:root {
  /* Brand */
  --c-primary: #9b4dca;
  --c-primary-dark: #7c3aed;
  --c-primary-2: #8b5cf6;
  --c-accent: #ec4899;
  --c-accent-light: #f472b6;
  --c-accent-purple: #c084fc;
  --c-hero-mid: #c44ec6;
  --c-kofi: #FF5E5B;
  --c-kofi-shadow: #d94340;

  /* Text */
  --c-text: #241733;
  --c-body: #4f4660;
  --c-body-2: #5b5366;
  --c-muted: #a98fbe;
  --c-muted-2: #6b5d7a;

  /* Surfaces */
  --c-bg: #fdf5fa;
  --c-card: #ffffff;
  --c-panel: #faf7fb;
  --c-border: #f0e3ee;
  --c-border-2: #f2e6ef;
  --c-footer: #241733;

  /* State */
  --c-success: #16a34a;
  --c-warning: #f59e0b;

  /* Platforms */
  --c-youtube: #FF0000;
  --c-twitch: #9146FF;
  --c-instagram: #E4405F;
  --c-twitter: #1DA1F2;
  --c-tiktok: #111111;

  /* Gradients */
  --g-hero: linear-gradient(120deg, #8b5cf6, #c44ec6 55%, #ec4899);
  --g-cta: linear-gradient(135deg, #9b4dca, #ec4899);
  --g-avatar: linear-gradient(135deg, #c084fc, #ec4899);
  --g-mediakit: linear-gradient(160deg, #7c3aed, #ec4899);
  --g-kofi: linear-gradient(160deg, #FF5E5B, #ec4899);
  --g-kofi-135: linear-gradient(135deg, #FF5E5B, #ec4899);
  --stripe-pink: repeating-linear-gradient(135deg, #f3e3f1, #f3e3f1 11px, #ecd3ea 11px, #ecd3ea 22px);
  --stripe-purple: repeating-linear-gradient(135deg, #efe7f4, #efe7f4 11px, #e7daf0 11px, #e7daf0 22px);

  /* Radii */
  --r-card: 22px;
  --r-card-lg: 24px;
  --r-chip: 12px;
  --r-pill: 999px;

  /* Shadows */
  --sh-card: 0 8px 24px rgba(155, 77, 202, .10);
  --sh-card-lg: 0 12px 34px rgba(155, 77, 202, .12);
  --sh-sticker: 0 6px 0 #f3dcec;
  --sh-sticker-sm: 0 4px 0 #f3dcec;
  --sh-nav: 0 2px 14px rgba(155, 77, 202, .3);

  /* Fonts */
  --f-head: 'Poppins', system-ui, -apple-system, sans-serif;
  --f-play: 'Baloo 2', 'Poppins', cursive;
  --f-body: 'Nunito', system-ui, -apple-system, sans-serif;
}

/* --- Reset ---------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

@keyframes amfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ampulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }

/* --- Layout scaffolding --------------------------------------------------- */
.site { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

.container { max-width: 1200px; margin: 0 auto; padding: 40px 24px 64px; }
.container--mediakit { max-width: 1140px; }
.container--support  { max-width: 1000px; }
.container--contact  { max-width: 920px; }
.container--narrow   { max-width: 820px; }
.container--cosplay  { max-width: 1100px; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.hero__stripes { position: absolute; inset: 0; background: var(--stripe-purple); }
.hero__gradient { position: absolute; inset: 0; background: var(--g-hero); }
.hero__image { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__deco { position: absolute; animation: amfloat 4.5s ease-in-out infinite; pointer-events: none; }
.hero__inner { position: relative; z-index: 2; }
.hero__wordmark { font-family: var(--f-head); font-size: 64px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 3px 26px rgba(0, 0, 0, .26); }
.hero__tagline { font-family: var(--f-head); font-weight: 700; font-size: 15px; letter-spacing: .26em; margin-top: 10px; opacity: .95; }

/* --- Navigation ----------------------------------------------------------- */
.nav {
  background: var(--c-primary);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: var(--sh-nav);
}
.nav__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 16px;
  height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.nav__social { display: flex; gap: 10px; font-size: 15px; color: #fff; }
.nav__social a { transition: opacity .15s ease; }
.nav__social a:hover { opacity: .75; }
.nav__links { display: flex; gap: 3px; font-family: var(--f-head); font-weight: 600; font-size: 14px; align-items: center; flex-wrap: wrap; }
.nav__link { color: rgba(255, 255, 255, .92); padding: 6px 11px; border-radius: var(--r-pill); transition: background .15s ease; }
.nav__link:hover { background: rgba(255, 255, 255, .16); }
.nav__link.is-active { background: #fff; color: var(--c-primary); }
.nav__toggle { display: none; color: #fff; font-size: 20px; }

/* --- Footer --------------------------------------------------------------- */
.footer { background: var(--c-footer); color: #fff; margin-top: auto; }
.footer__inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 28px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer__brand { font-family: var(--f-play); font-weight: 800; font-size: 26px; }
.footer__about { color: rgba(255, 255, 255, .72); font-size: 14px; margin-top: 12px; max-width: 320px; }
.footer h4 { font-family: var(--f-head); font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.footer__links { display: flex; flex-direction: column; gap: 9px; }
.footer__links a { color: rgba(255, 255, 255, .72); font-size: 14px; transition: color .15s ease; }
.footer__links a:hover { color: #fff; }
.footer__social { display: flex; gap: 14px; font-size: 18px; }
.footer__social a { color: rgba(255, 255, 255, .82); transition: color .15s ease; }
.footer__social a:hover { color: var(--c-accent-light); }
.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); text-align: center; padding: 18px 24px; color: rgba(255, 255, 255, .55); font-size: 13px; }

/* --- Typography helpers --------------------------------------------------- */
.page-title { font-family: var(--f-head); font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.section-title { font-family: var(--f-head); font-size: 26px; font-weight: 800; margin-bottom: 20px; }
.kicker { font-family: var(--f-head); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent); }
.lead { color: var(--c-body); font-size: 16px; }
.text-muted { color: var(--c-muted); }
.text-accent { color: var(--c-accent); }
.text-primary { color: var(--c-primary); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-head); font-weight: 700; font-size: 14px;
  padding: 11px 20px; border-radius: var(--r-chip); cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--g-cta); color: #fff; box-shadow: 0 8px 20px rgba(155, 77, 202, .28); }
.btn--kofi { background: var(--c-kofi); color: #fff; box-shadow: 0 5px 0 var(--c-kofi-shadow); }
.btn--kofi:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--c-kofi-shadow); }
.btn--twitch { background: var(--c-twitch); color: #fff; }
.btn--white { background: #fff; color: var(--c-primary); }
.btn--outline { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .7); }
.btn--block { display: flex; width: 100%; justify-content: center; }

/* --- Badges / Pills / Chips ---------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-play); font-weight: 700; font-size: 12px;
  padding: 6px 14px; border-radius: var(--r-pill); color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
}
.badge--tilt { transform: rotate(-4deg); }
.badge--flat { box-shadow: none; }
.badge--primary { background: var(--c-primary); }
.badge--accent { background: var(--c-accent); }
.badge--pink-light { background: var(--c-accent-light); }
.badge--success { background: var(--c-success); }
.badge--warning { background: var(--c-warning); }
.badge--kofi { background: var(--c-kofi); }
.badge--muted { background: #9b8aa8; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-play); font-weight: 700; font-size: 12px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--c-panel); color: var(--c-muted-2);
}

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--f-head); font-weight: 600; font-size: 13px;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: #fff; color: var(--c-body); box-shadow: var(--sh-sticker-sm);
  cursor: pointer; transition: transform .15s ease;
}
.chip:hover { transform: translateY(-2px); }
.chip.is-active { background: var(--c-primary); color: #fff; box-shadow: none; }

/* --- Cards ---------------------------------------------------------------- */
.card { background: var(--c-card); border-radius: var(--r-card-lg); box-shadow: var(--sh-card); overflow: hidden; }
.card--lift { transition: transform .18s ease, box-shadow .18s ease; }
.card--lift:hover { transform: translateY(-5px); box-shadow: var(--sh-card-lg); }
.card__media { position: relative; background: var(--stripe-pink); }
.card__media--purple { background: var(--stripe-purple); }
/* Placeholder icon: only a DIRECT child <i> fills+centers the media area.
   Icons nested inside badges / play-overlays keep their own (inline) size. */
.card__media > i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(155, 77, 202, .35); font-size: 34px; }
.card__body { padding: 22px 24px 24px; }
.card__title { font-family: var(--f-head); font-weight: 700; font-size: 18px; line-height: 1.3; }
.card__meta { font-size: 13px; color: var(--c-muted); font-weight: 700; margin: 8px 0; }
.card__excerpt { color: var(--c-body); font-size: 14.5px; margin: 10px 0 14px; }
.card__more { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-head); font-weight: 800; font-size: 14px; color: var(--c-primary); }

/* --- Grids ---------------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.section { margin: 52px 0; }
.section:first-child { margin-top: 0; }

/* --- Image placeholder ---------------------------------------------------- */
.ph { background: var(--stripe-pink); position: relative; }
.ph--purple { background: var(--stripe-purple); }
.ph--tag { position: absolute; }

/* --- Progress bar --------------------------------------------------------- */
.progress { height: 12px; border-radius: var(--r-pill); background: var(--c-border); overflow: hidden; }
.progress__bar { height: 100%; border-radius: var(--r-pill); background: var(--g-cta); }

/* --- Forms ---------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--f-head); font-weight: 600; font-size: 13px; margin-bottom: 7px; color: var(--c-text); }
.input, .textarea, .select {
  width: 100%; font-family: var(--f-body); font-size: 15px;
  padding: 12px 14px; border-radius: var(--r-chip);
  border: 1.5px solid var(--c-border); background: #fff; color: var(--c-text);
  transition: border-color .15s ease;
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--c-primary); }
.textarea { resize: vertical; min-height: 130px; }
.form-error { color: #dc2626; font-size: 13px; margin-top: 5px; }

/* --- Alerts / flash ------------------------------------------------------- */
.alert { border-radius: var(--r-chip); padding: 14px 18px; font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.alert--success { background: #dcfce7; color: #15803d; }
.alert--error { background: #fee2e2; color: #b91c1c; }

/* --- CTA banner ----------------------------------------------------------- */
.cta-banner {
  background: var(--g-cta); color: #fff; border-radius: var(--r-card-lg);
  padding: 44px 40px; text-align: center; box-shadow: var(--sh-card-lg);
}
.cta-banner h2 { font-family: var(--f-head); font-weight: 800; font-size: 28px; margin-bottom: 10px; }
.cta-banner p { opacity: .92; margin-bottom: 22px; }

/* --- Empty state ---------------------------------------------------------- */
.empty {
  background: #fff; border: 2px dashed var(--c-border); border-radius: var(--r-card);
  padding: 48px; text-align: center; color: var(--c-muted);
}

/* --- Home layout ----------------------------------------------------------- */
.home-top { display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; margin-bottom: 6px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.section-head__title { font-family: var(--f-head); font-size: 26px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.section-head__title span { color: var(--c-accent); font-size: 22px; }
.section-head__link { color: var(--c-primary); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; }
.tile { display: flex; align-items: stretch; overflow: hidden; }
.tile__media { width: 150px; flex-shrink: 0; }
.tile__media--video { width: 180px; }
.tile__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; color: var(--c-primary); font-size: 18px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.tile__length { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.support-cta { background: linear-gradient(135deg, #7c3aed, #ec4899); border-radius: var(--r-card-lg); padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 30px; color: #fff; position: relative; overflow: hidden; }
.support-cta__deco { position: absolute; top: 20px; right: 30%; font-size: 22px; color: rgba(255,255,255,.4); animation: amfloat 5s ease-in-out infinite; }
.support-cta h2 { font-family: var(--f-head); font-size: 25px; font-weight: 800; }
.support-cta p { font-size: 15px; opacity: .94; margin-top: 8px; max-width: 520px; line-height: 1.6; }
.support-cta__btn { flex-shrink: 0; background: #fff; color: var(--c-primary); padding: 15px 28px; border-radius: 14px; font-family: var(--f-head); font-weight: 700; font-size: 15px; box-shadow: 0 7px 0 rgba(0,0,0,.13); white-space: nowrap; }

/* --- Pagination ------------------------------------------------------------ */
.pager__circle { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--c-primary); box-shadow: 0 4px 12px rgba(155,77,202,.12); }
.pager__num { min-width: 40px; height: 40px; padding: 0 6px; border-radius: 12px; background: #fff; color: var(--c-primary); font-family: var(--f-head); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(155,77,202,.12); }
.pager__num.is-active { background: var(--c-primary); color: #fff; box-shadow: none; }

/* --- Video thumbnail overlays --------------------------------------------- */
.vid-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255,255,255,.92); display: inline-flex; align-items: center; justify-content: center; color: var(--c-primary); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.vid-play i { margin-left: 3px; }
.vid-plat { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 4px; background: var(--c-primary); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.vid-len { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,.72); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }

/* --- Squirrel home widget -------------------------------------------------- */
.sq-widget { background: var(--c-card); border-radius: var(--r-card-lg); box-shadow: var(--sh-card-lg); overflow: hidden; display: flex; flex-direction: column; max-height: 560px; }
.sq-widget__banner { height: 54px; flex: none; background: var(--g-hero); }
.sq-widget__head { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 10px 80px; }
.sq-widget__avatar { position: absolute; top: -24px; left: 20px; width: 48px; height: 48px; border-radius: 50%; background: var(--g-avatar); border: 3px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--f-play); font-weight: 800; font-size: 20px; box-shadow: 0 4px 12px rgba(155,77,202,.25); }
.sq-widget__name { font-family: var(--f-head); font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 5px; }
.sq-widget__name span { font-size: 13px; }
.sq-widget__handle { font-size: 12px; color: var(--c-muted); font-weight: 700; }
.sq-widget__all { font-size: 13px; font-weight: 800; color: var(--c-primary); }
.sq-widget__feed { padding: 6px 0 8px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sq-widget__nut { padding: 13px 20px; border-top: 1px solid #f6edf4; display: flex; gap: 12px; }
.sq-widget__nut-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--g-avatar); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--f-play); font-weight: 800; font-size: 14px; }
.sq-widget__nut-meta { font-size: 13px; margin-bottom: 3px; }
.sq-widget__nut-meta .sq-widget__nut-name { font-family: var(--f-head); font-weight: 700; }
.sq-widget__nut-meta span:last-child { color: var(--c-muted); font-weight: 600; }
.sq-widget__nut-text { font-size: 14px; line-height: 1.5; color: var(--c-body); }
.sq-widget__nut-actions { display: flex; gap: 18px; margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--c-muted); }
.sq-widget__nut-actions span { display: inline-flex; align-items: center; gap: 5px; }
.sq-widget__like { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--c-muted); }
.sq-widget__like.is-liked { color: var(--c-accent); }
.sq-widget__cta { flex: none; margin: 6px 14px 12px; text-align: center; background: var(--g-cta); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 14px; padding: 11px; border-radius: 12px; }

/* --- Live dot ------------------------------------------------------------- */
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c-success); animation: ampulse 1.4s ease-in-out infinite; display: inline-block; }

/* --- Rich-text content (blog body, legal texts) --------------------------- */
.blog-body ul, .blog-body ol,
.legal-body ul, .legal-body ol { padding-left: 2em; margin: 0 0 1.1em; }
.blog-body li, .legal-body li { margin-bottom: .5em; }
.blog-body li::marker, .legal-body li::marker { color: var(--c-primary); }
.blog-body p, .legal-body p { margin: 0 0 1.1em; }
.blog-body h2, .blog-body h3,
.legal-body h2, .legal-body h3 { font-family: var(--f-head); font-weight: 800; margin: 1.4em 0 .5em; line-height: 1.3; }
.blog-body a, .legal-body a { color: var(--c-primary); font-weight: 700; text-decoration: underline; }
.blog-body img, .legal-body img { max-width: 100%; height: auto; border-radius: var(--r-chip); margin: 1em 0; }
.blog-body blockquote, .legal-body blockquote { margin: 0 0 1.1em; padding: 8px 18px; border-left: 4px solid var(--c-accent); background: var(--c-panel); border-radius: 0 10px 10px 0; }
.blog-body > *:last-child, .legal-body > *:last-child { margin-bottom: 0; }

/* --- Lightbox -------------------------------------------------------------- */
.lb-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(20, 10, 30, .9); display: flex; align-items: center; justify-content: center; padding: 40px; opacity: 0; transition: opacity .18s ease; }
.lb-overlay.is-open { opacity: 1; }
.lb-figure { max-width: 92vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb-img { max-width: 92vw; max-height: 82vh; border-radius: var(--r-chip); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); object-fit: contain; }
.lb-caption { color: rgba(255, 255, 255, .85); font-size: 14px; font-weight: 600; text-align: center; }
.lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; }
.lb-btn:hover { background: rgba(255, 255, 255, .28); }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-close { position: absolute; top: 20px; right: 22px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease; }
.lb-close:hover { background: rgba(255, 255, 255, .28); }
@media (max-width: 640px) {
  .lb-btn { width: 42px; height: 42px; font-size: 16px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
}

/* --- Polls ----------------------------------------------------------------- */
.poll__q { font-family: var(--f-head); font-weight: 800; font-size: 20px; margin-bottom: 16px; }
.poll__opt { display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1.5px solid var(--c-border); border-radius: var(--r-chip); margin-bottom: 10px; cursor: pointer; font-weight: 600; transition: border-color .15s ease, background .15s ease; }
.poll__opt:hover { border-color: var(--c-primary); background: var(--c-panel); }
.poll__opt input { accent-color: var(--c-primary); width: 18px; height: 18px; flex: none; }
.poll__row { margin-bottom: 12px; }
.poll__row-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.poll__bar { height: 12px; border-radius: var(--r-pill); background: var(--c-border); overflow: hidden; }
.poll__bar-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); min-width: 2px; transition: width .3s ease; }
.poll__total { margin-top: 14px; font-size: 13px; color: var(--c-muted-2); font-weight: 700; }

/* --- Home community-poll widget (design from umfrage.md) ------------------- */
.am-poll-widget { margin-bottom: 50px; }
.am-poll{
  --am-purple:#9b4dca; --am-pink:#ec4899; --am-ink:#241733; --am-mauve:#a98fbe;
  display:grid; grid-template-columns:0.9fr 1.1fr;
  background:#fff; border:2px solid #f0d8ea; border-radius:22px; overflow:hidden;
  box-shadow:0 12px 34px rgba(155,77,202,.16);
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
}
/* `display:grid` above would otherwise override the native [hidden] behaviour,
   causing all slides to stack. Keep hidden slides hidden so switching works. */
.am-poll[hidden]{ display:none; }
.am-poll__intro{ background:linear-gradient(150deg,#7c3aed,#ec4899); padding:32px 34px; color:#fff; position:relative; overflow:hidden; }
.am-poll__badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4);
  padding:5px 13px; border-radius:999px;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:12px; margin-bottom:16px;
}
.am-poll__q{ font-family:'Poppins',sans-serif; font-weight:800; font-size:24px; line-height:1.25; }
.am-poll__sub{ font-size:14px; opacity:.92; line-height:1.55; margin-top:10px; }
.am-poll__meta{ font-size:12px; font-weight:700; opacity:.85; margin-top:16px; }
/* Header row with shorts-style pager arrows (reuses .pager__circle). */
.am-poll-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.am-poll-head__label{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:800; font-size:18px; color:var(--c-text); }
.am-poll-head__label i{ color:var(--c-primary); }
.am-poll__options{ padding:28px 32px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.am-poll__opt{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:14px 17px; border:1.5px solid #e8d6e6; border-radius:13px;
  background:#fff; cursor:pointer; font:inherit; text-align:left; transition:border-color .2s;
}
.am-poll__opt:hover:not([disabled]){ border-color:var(--am-purple); }
.am-poll__opt[disabled]{ cursor:default; }
.am-poll__bar{
  position:absolute; left:0; top:0; bottom:0; width:0; z-index:0;
  background:#f6edf4; transition:width .5s cubic-bezier(.2,.8,.2,1);
}
.am-poll__opt[aria-checked="true"] .am-poll__bar{ background:linear-gradient(90deg,#f6d6ea,#f3c9e4); }
.am-poll__opt[aria-checked="true"]{ border-color:var(--am-pink); }
.am-poll__label{
  position:relative; z-index:1; font-weight:700; font-size:15px; color:var(--am-ink);
  display:inline-flex; align-items:center; gap:10px;
}
.am-poll__label i{ color:var(--am-purple); width:18px; text-align:center; }
.am-poll__pct{
  position:relative; z-index:1;
  font-family:'Baloo 2',cursive; font-weight:800; font-size:15px; color:var(--am-purple);
  opacity:0; transition:opacity .3s;
}
.am-poll.is-voted .am-poll__pct{ opacity:1; }
@media (max-width:720px){ .am-poll{ grid-template-columns:1fr; } }

/* --- Shorts carousel ------------------------------------------------------- */
.shorts-rail { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.shorts-rail::-webkit-scrollbar { display: none; }
.shorts-rail__item { flex: 0 0 calc((100% - 5 * 16px) / 6); scroll-snap-align: start; }
@media (max-width: 900px) { .shorts-rail__item { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 560px) { .shorts-rail__item { flex-basis: calc((100% - 16px) / 2); } }

/* --- Video lightbox -------------------------------------------------------- */
.vlb-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(20, 10, 30, .92); display: none; align-items: center; justify-content: center; padding: 40px; }
.vlb-overlay.is-open { display: flex; }
.vlb-box { width: min(960px, 92vw); }
.vlb-frame { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: var(--r-chip); overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.vlb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vlb-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.vlb-title { color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 16px; flex: 1; min-width: 0; }
.vlb-overlay.is-portrait .vlb-box { width: min(420px, 92vw); }
.vlb-overlay.is-portrait .vlb-frame { aspect-ratio: 9/16; max-height: 82vh; }

/* --- Responsive ----------------------------------------------------------- */
/* Custom split layouts (inline grid-template-columns) collapse to one column.
   !important overrides the inline ratio only at this breakpoint. */
@media (max-width: 820px) {
  .rgrid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .home-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero__wordmark { font-size: 44px; }
  .nav__links { display: none; position: absolute; top: 56px; left: 0; right: 0; background: var(--c-primary); flex-direction: column; padding: 12px 16px; gap: 6px; box-shadow: var(--sh-nav); }
  .nav__links.is-open { display: flex; }
  .nav__toggle { display: block; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 28px; }
  .container { padding: 28px 16px 48px; }
  .support-cta { flex-direction: column; align-items: flex-start; text-align: left; }
  .tile__media { width: 120px; }
  .tile__media--video { width: 130px; }
  /* Ko-fi / gradient banners: wrap and let the button go full-width. */
  .kofi-banner { flex-wrap: wrap; text-align: center; justify-content: center; }
  .kofi-banner__btn { width: 100%; text-align: center; white-space: normal !important; }
  /* Section header: let the title + trailing count/arrows wrap instead of
     colliding/overflowing on narrow screens. */
  .section-head { flex-wrap: wrap; gap: 10px; }
  .section-head__title { font-size: 20px !important; }
  .section-head__title span { font-size: 18px; }
}