/* ===== BEEZMP3 MODERN THEME ===== */
/* Light mode (default) + Dark toggle CSS */

/* ---- COLOR VARIABLES: LIGHT MODE ---- */
:root {
  --bee-bg: #f7f8fc;
  --bee-surface: #ffffff;
  --bee-card: #ffffff;
  --bee-card-hover: #f0f2fa;
  --bee-border: #d8dced;
  --bee-border-focus: #e8b300;
  --bee-hero-bg: linear-gradient(160deg, #fdefc0 0%, #fceacc 40%, #e8ecff 100%);
  --bee-yellow: #e6a800;
  --bee-yellow-text: #8c5e00;
  --bee-yellow-btn: #f5c518;
  --bee-yellow-light: rgba(245,197,24,0.12);
  --bee-yellow-glow: rgba(245,197,24,0.25);
  --bee-text: #1a1c2e;
  --bee-muted: #606376;
  --bee-subtle: #5c5f72;
  --bee-nav-bg: rgba(255,255,255,0.92);
  --bee-footer-bg: #f0f2fa;
  --bee-shadow: 0 4px 24px rgba(60,70,120,0.12);
  --bee-shadow-lg: 0 8px 40px rgba(60,70,120,0.18);
  --bee-radius: 16px;
  --bee-radius-lg: 24px;
  --bee-input-bg: #f5f6fb;
}

/* ---- DARK MODE ---- */
[data-theme="dark"] {
  --bee-bg: #0c0d14;
  --bee-surface: #13141f;
  --bee-card: #1a1b28;
  --bee-card-hover: #1e2030;
  --bee-border: rgba(255,255,255,0.08);
  --bee-border-focus: #f5c518;
  --bee-hero-bg: linear-gradient(160deg, #0e0d14 0%, #0c0f1a 50%, #0a0e18 100%);
  --bee-yellow: #f5c518;
  --bee-yellow-btn: #f5c518;
  --bee-yellow-light: rgba(245,197,24,0.10);
  --bee-yellow-glow: rgba(245,197,24,0.20);
  --bee-text: #e6e8f5;
  --bee-muted: #8789aa;
  --bee-subtle: #9395b5;
  --bee-yellow-text: #f5c518;
  --bee-nav-bg: rgba(12,13,20,0.92);
  --bee-footer-bg: #0e0f1a;
  --bee-shadow: 0 4px 24px rgba(0,0,0,0.4);
  --bee-shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --bee-input-bg: #1e1f2e;
}


/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bee-bg);
  color: var(--bee-text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
}

/* Typography hierarchy */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Syne', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.35rem; }


/* ===== DARK MODE TOGGLE ===== */
#theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bee-card);
  border: 1.5px solid var(--bee-border);
  box-shadow: var(--bee-shadow-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  color: var(--bee-text);
}

#theme-toggle:hover {
  background: var(--bee-yellow-btn);
  border-color: var(--bee-yellow-btn);
  color: #1a1c2e;
  transform: scale(1.1);
}

#theme-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-theme="dark"] .icon-sun { display: none; }
html:not([data-theme="dark"]) .icon-moon { display: none; }

#theme-toggle:focus-visible {
  outline: 3px solid var(--bee-yellow-btn);
  outline-offset: 2px;
}


/* ===== NAVIGATION ===== */
header, nav, .navigation, .nav, #navigation {
  background: var(--bee-nav-bg) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--bee-border) !important;
  padding: 0 !important;
  transition: background 0.3s ease !important;
}

.nav-logo, .logo {
  color: var(--bee-yellow-text) !important;
}

nav img[alt="logo"],
.navigation img[alt="logo"],
header img[alt="logo"],
img[alt="logo"] {
  width: 150px !important;
  height: 45px !important;
  min-width: 150px !important;
  min-height: 45px !important;
  max-height: 45px !important;
  object-fit: contain;
  object-position: left center;
  display: block;
  aspect-ratio: 150 / 45;
}


/* ===== HERO / SPLASH SECTION ===== */
.splash-container, #splash {
  background: var(--bee-hero-bg) !important;
  padding: 90px 20px 70px !important;
  position: relative;
  overflow: hidden;
}

.splash-container::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, var(--bee-yellow-glow) 0%, transparent 70%);
  pointer-events: none;
}

#splash_wrapper {
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center;
  position: relative;
}

h1.splash-head, #bigmessage {
  color: var(--bee-text) !important;
  margin-bottom: 16px !important;
}

[data-theme="dark"] h1.splash-head,
[data-theme="dark"] #bigmessage {
  color: #fff !important;
}

h1.splash-head span, #bigmessage span {
  color: var(--bee-yellow-text) !important;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bee-yellow-light);
  border: 1px solid var(--bee-yellow-glow);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--bee-yellow-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-sub {
  color: var(--bee-muted);
  font-size: 15px;
  margin-bottom: 36px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--bee-muted);
  font-size: 12.5px;
  font-weight: 500;
}

.trust-item svg { flex-shrink: 0; }


/* ===== SEARCH FORM ===== */
.form.g, #tiktok_form {
  background: #ffffff !important;
  border: 2px solid #c8ccde !important;
  border-radius: 100px !important;
  padding: 6px 6px 6px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 660px !important;
  margin: 0 auto !important;
  box-shadow: 0 2px 0 #c2c6d8, 0 6px 20px rgba(60,70,120,0.13), 0 16px 56px rgba(60,70,120,0.20) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  position: relative;
}

.form.g:focus-within, #tiktok_form:focus-within {
  border-color: var(--bee-yellow-btn) !important;
  box-shadow: 0 0 0 4px var(--bee-yellow-light), 0 6px 20px rgba(60,70,120,0.13), 0 16px 56px rgba(60,70,120,0.20) !important;
}

[data-theme="dark"] .form.g,
[data-theme="dark"] #tiktok_form {
  background: var(--bee-card) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow: 0 2px 0 rgba(255,255,255,0.05), 0 12px 48px rgba(0,0,0,0.55) !important;
}

.form-control, #main_page_text {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--bee-text) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  flex: 1 !important;
  min-width: 0 !important;
  padding: 14px 0 !important;
  line-height: normal !important;
  height: auto !important;
}

.form-control::placeholder, #main_page_text::placeholder {
  color: var(--bee-subtle) !important;
}

#paste {
  background: #f0f2fa !important;
  border: 1px solid #c8ccde !important;
  color: var(--bee-muted) !important;
  border-radius: 100px !important;
  padding: 12px 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  white-space: nowrap;
  flex-shrink: 0 !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

#paste:hover {
  background: #e4e7f2 !important;
  color: var(--bee-text) !important;
}

[data-theme="dark"] #paste {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

#paste svg path {
  stroke: currentColor !important;
}

#paste:focus-visible {
  outline: 3px solid var(--bee-yellow-btn);
  outline-offset: 2px;
}

#submit, button.button-primary, .vignette_active {
  background: var(--bee-yellow-btn) !important;
  color: #1a1c2e !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 12px 24px !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  text-transform: uppercase;
  box-shadow: 0 4px 16px var(--bee-yellow-glow) !important;
  flex-shrink: 0 !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

#submit:hover, button.button-primary:hover {
  background: #ffd426 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 24px var(--bee-yellow-glow) !important;
}

#submit:focus-visible {
  outline: 3px solid var(--bee-yellow-btn);
  outline-offset: 2px;
}

#main_loader {
  position: absolute !important;
  right: 110px;
}

#downloadOptions, #target {
  margin-top: 28px !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ===== MAIN CONTENT ===== */
main {
  overflow: hidden;
  will-change: auto;
}

.content-visibility, .content-visibility > div {
  background: transparent !important;
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

#main-content, main {
  position: relative !important;
  z-index: 1 !important;
  contain: layout;
}

.text__container {
  max-width: 100%;
  margin: 0 auto;
  padding: 56px 24px;
  text-align: center;
}

section.text h2 {
  color: var(--bee-text) !important;
  margin-bottom: 16px !important;
}

section.text p, .text__desc, .text__desc p {
  color: var(--bee-muted) !important;
  font-size: 15px !important;
  max-width: 620px;
  margin: 0 auto;
}

p[style*="color:#252e69"] {
  color: var(--bee-subtle) !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
}


/* ===== APP BANNER ===== */
.text__container.mt-10 {
  margin-top: 0 !important;
  padding: 0 !important;
}

.ig-section, .ig-gr-content {
  background: linear-gradient(135deg, var(--bee-yellow-btn) 0%, #d99800 100%) !important;
  border-radius: var(--bee-radius-lg) !important;
  margin: 40px 24px !important;
  overflow: hidden !important;
  position: relative;
  border: none !important;
}

.ig-gr-content::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 250px;
  height: 250px;
  background: rgba(255,255,255,0.14);
  border-radius: 50%;
}

.section-app-download {
  padding: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.app-text h2 {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #1a1c2e !important;
  margin-bottom: 10px !important;
}

.app-text p {
  color: #1a1c2e !important;
  max-width: 420px;
}

.center {
  text-align: center;
}

.center img[alt="Google Playstore"] {
  aspect-ratio: 200 / 59;
  height: auto;
}

.shapes-left, .shapes-right {
  display: none !important;
}


/* ===== HOW-TO SECTION ===== */
.b-blk {
  background: var(--bee-card) !important;
  border: 1px solid var(--bee-border) !important;
  border-radius: var(--bee-radius-lg) !important;
  padding: 48px !important;
  max-width: 780px !important;
  margin: 0 auto 40px !important;
  box-shadow: var(--bee-shadow) !important;
}

.b-blk h3 {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--bee-text) !important;
  margin-bottom: 28px !important;
}

.b-blk ol {
  padding-left: 0 !important;
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: step-counter;
}

.b-blk ol li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  background: var(--bee-input-bg) !important;
  border: 1px solid var(--bee-border) !important;
  border-radius: 12px !important;
  counter-increment: step-counter;
}

.b-blk ol li::before {
  content: counter(step-counter);
  min-width: 30px;
  height: 30px;
  background: var(--bee-yellow-btn);
  color: #1a1c2e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.b-blk ol li b {
  color: var(--bee-text) !important;
  font-weight: 600 !important;
}

.b-blk ol li span {
  color: var(--bee-muted) !important;
  font-size: 14px !important;
}

.b-blk ol li img {
  width: 100%;
  height: auto;
  border-radius: var(--bee-radius);
}


/* ===== SIX ITEMS GRID ===== */
#six__items {
  padding: 40px 24px !important;
  background: var(--bee-surface) !important;
}

.six__items_header h2, .six__items_header > * {
  font-family: 'Syne', sans-serif !important;
  color: var(--bee-text) !important;
  text-align: center !important;
}

.six__items_header p {
  color: var(--bee-muted) !important;
  font-size: 15px !important;
  margin-bottom: 36px !important;
  font-weight: 400 !important;
  text-align: center;
}

.six-i-1w {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 18px !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

.six-i-i {
  background: var(--bee-bg) !important;
  border: 1px solid var(--bee-border) !important;
  border-radius: var(--bee-radius) !important;
  padding: 28px 20px !important;
  text-align: center !important;
  transition: all 0.25s ease !important;
}

.six-i-i:hover {
  border-color: var(--bee-yellow-btn) !important;
  background: var(--bee-card) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--bee-shadow-lg) !important;
}

.six-i-i-img {
  width: 64px;
  height: 64px;
  background: var(--bee-yellow-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.six-i-i-img img {
  width: 36px !important;
  height: 36px !important;
  object-fit: contain !important;
  aspect-ratio: 1 / 1;
}

p.six-i-t {
  color: var(--bee-muted) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}


/* ===== MAIN CONTENT (device sections) ===== */
.main__content {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 20px 24px 60px !important;
}

.main-c-c {
  margin-bottom: 60px !important;
}

.main-c-c.d-flex {
  display: flex !important;
  align-items: center !important;
  gap: 48px !important;
}

.main-c-c h3 {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--bee-text) !important;
  margin-bottom: 14px !important;
}

.main-c-c p, .main-c-c li, .text--text p {
  color: var(--bee-muted) !important;
  font-size: 14.5px !important;
}

.img-w img {
  border-radius: var(--bee-radius) !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto !important;
  display: block;
}

.info-arrow span {
  background: var(--bee-yellow-light) !important;
  color: var(--bee-yellow-text) !important;
  border: 1px solid var(--bee-yellow-glow) !important;
  padding: 4px 14px !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}


/* ===== FAQ SECTION ===== */
#accordion {
  padding: 20px 24px 60px !important;
  background: var(--bee-bg) !important;
}

.accordion__container {
  max-width: 780px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.faq-drawer {
  background: var(--bee-card) !important;
  border: 1px solid var(--bee-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: var(--bee-shadow) !important;
}

.faq-drawer:has(input:checked) {
  border-color: var(--bee-yellow-btn) !important;
  box-shadow: 0 4px 20px var(--bee-yellow-light) !important;
}

.faq-d-t {
  display: none !important;
}

.faq-drawer__title, label.accordion {
  display: block !important;
  padding: 20px 56px 20px 24px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--bee-text) !important;
  cursor: pointer !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  user-select: none;
  width: 100%;
}

.faq-drawer__title::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: var(--bee-yellow-light);
  color: var(--bee-yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  transition: all 0.2s ease;
}

.faq-d-t:checked ~ .faq-drawer__title::after {
  content: '−';
  background: var(--bee-yellow-btn);
  color: #1a1c2e;
}

.faq-d-w, .panel {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s ease !important;
}

.faq-d-t:checked ~ .faq-d-w, .faq-d-t:checked ~ .panel {
  max-height: 800px !important;
}

.faq-drawer__content {
  padding: 18px 24px 24px !important;
  color: var(--bee-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  border-top: 1px solid var(--bee-border) !important;
}

.faq-drawer__title:focus-visible {
  outline: 3px solid var(--bee-yellow-btn);
  outline-offset: 2px;
}


/* ===== FOOTER ===== */
footer#footer {
  background: var(--bee-nav-bg) !important;
  border-top: 1px solid var(--bee-border) !important;
  padding: 48px 40px !important;
  margin-top: 0 !important;
  contain: layout style;
}

.footer__container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
}

.footer__navigation .footer-row a {
  color: var(--bee-muted) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: color 0.2s ease !important;
  margin-right: 24px !important;
  display: inline-block;
  margin-bottom: 8px;
}

.footer__navigation .footer-row a:hover {
  color: var(--bee-yellow-text) !important;
}

.footer__navigation .footer-row a:focus-visible {
  outline: 3px solid var(--bee-yellow-btn);
  outline-offset: 2px;
}

.author-info, .author-info * {
  color: var(--bee-subtle) !important;
  font-size: 13px !important;
  text-align: center;
}

#language-switcher {
  list-style: none !important;
}

#language-switcher > li {
  position: relative;
}

#language-switcher img {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
}

#menuLink1 {
  color: var(--bee-muted) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  padding: 8px 16px !important;
  background: var(--bee-card) !important;
  border: 1px solid var(--bee-border) !important;
  border-radius: 100px !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
}

#menuLink1:hover {
  border-color: var(--bee-yellow-btn) !important;
  color: var(--bee-text) !important;
}

#menuLink1:focus-visible {
  outline: 3px solid var(--bee-yellow-btn);
  outline-offset: 2px;
}

.menu-children {
  background: var(--bee-card) !important;
  border: 1px solid var(--bee-border) !important;
  border-radius: 12px !important;
  list-style: none !important;
  padding: 8px 0 !important;
  min-width: 160px !important;
  position: absolute !important;
  bottom: 100% !important;
  right: 0 !important;
  box-shadow: var(--bee-shadow-lg) !important;
}

.menu-children .menu-item a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  color: var(--bee-muted) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  transition: background 0.2s ease !important;
}

.menu-children .menu-item a:hover,
.menu-children .menu-item.active a {
  background: var(--bee-yellow-light) !important;
  color: var(--bee-yellow-text) !important;
}

.menu-children .menu-item a:focus-visible {
  outline: 3px solid var(--bee-yellow-btn);
  outline-offset: -2px;
}


/* ===== ERROR / ALERTS ===== */
#errorContainer .alert, .alert-danger {
  background: rgba(220,60,60,0.08) !important;
  border: 1px solid rgba(220,60,60,0.25) !important;
  color: #c0392b !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  margin: 16px auto !important;
  max-width: 680px !important;
  font-size: 14px !important;
}

[data-theme="dark"] #errorContainer .alert,
[data-theme="dark"] .alert-danger {
  color: #ff8080 !important;
  background: rgba(255,80,80,0.10) !important;
  border-color: rgba(255,80,80,0.25) !important;
}


/* ===== UTILITY CLASSES ===== */
.relative.u-fw {
  display: contents !important;
}

.text-center {
  text-align: center;
}

.d-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.flex-column {
  flex-direction: column;
}


/* ===== WAVE DIVIDER ===== */
.wave-divider {
  line-height: 0;
  overflow: hidden;
  margin-top: -2px;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: 50px;
}


/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#bigmessage {
  animation: fadeUp 0.55s ease both;
}

#tiktok_form {
  animation: fadeUp 0.55s 0.12s ease both;
}


/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .splash-container {
    padding: 60px 16px 50px !important;
  }

  h1.splash-head, #bigmessage {
    font-size: 1.85rem !important;
  }

  .form.g, #tiktok_form {
    padding: 5px 5px 5px 16px !important;
    border-radius: 14px !important;
  }

  #submit {
    padding: 10px 18px !important;
    font-size: 13px !important;
    height: 40px !important;
  }

  .main-c-c.d-flex {
    flex-direction: column !important;
    gap: 28px !important;
  }

  .d-flex.text-pr {
    flex-direction: column-reverse !important;
  }

  .section-app-download {
    padding: 32px !important;
  }

  .b-blk {
    padding: 28px 20px !important;
  }

  footer#footer {
    padding: 32px 20px !important;
  }

  .footer__container {
    flex-direction: column !important;
  }

  .six-i-1w {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #theme-toggle {
    bottom: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 480px) {
  .six-i-1w {
    grid-template-columns: 1fr !important;
  }

  #paste span {
    display: none !important;
  }

  #paste {
    height: 40px !important;
    padding: 10px 12px !important;
  }
}


/* ===== LAYOUT SHIFT PREVENTION ===== */
img {
  content-visibility: auto;
}

img[width]:not([height]) {
  height: auto;
}

/* Prevent font-swap layout shift */
@font-face {
  font-family: 'Syne';
  size-adjust: 100%;
}