/* KeepAnyVideo — one stylesheet, one theme block per platform (colours/feel only). */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

/* ---------- Themes ---------- */
[data-theme="share"] {
  --bg: #F3F7F6; --surface: #FFFFFF; --surface-2: #EEF4F2; --ink: #0F1F1C; --muted: #4B5C58; --border: #D9E4E1;
  --accent: #0F766E; --accent-ink: #FFFFFF; --free-bg: #0F766E; --free-ink: #FFFFFF;
  --lock-border: #0F766E; --lock-ink: #0B5E58; --badge-bg: #FFF1D6; --badge-ink: #8A5300;
  --pill-bg: #DDF1EC; --pill-ink: #0B5E58; --ad-border: #A9BDB8; --ad-ink: #5A6B67;
  --footer-bg: #0F1F1C; --footer-ink: #BFD0CC; --footer-head: #FFFFFF; --num-bg: #0F766E; --num-ink: #FFFFFF;
  --font: Manrope, system-ui, sans-serif; --display: Manrope, system-ui, sans-serif;
  --radius: 16px; --btn-radius: 12px; --form-radius: 18px; --form-shadow: 0 8px 30px rgba(15,31,28,.07);
}
[data-theme="brand"] {
  --bg: #F6F5F1; --surface: #FFFFFF; --surface-2: #F6F5F1; --ink: #17161C; --muted: #5E5B66; --border: #E4E1EA;
  --accent: #5B3DF5; --accent-ink: #FFFFFF; --free-bg: #5B3DF5; --free-ink: #FFFFFF;
  --lock-border: #5B3DF5; --lock-ink: #3F25C9; --badge-bg: #FFF1D6; --badge-ink: #8A5300;
  --pill-bg: #ECE8FE; --pill-ink: #3F25C9; --ad-border: #B9B4C7; --ad-ink: #6E6A78;
  --footer-bg: #17161C; --footer-ink: #C9C6D1; --footer-head: #FFFFFF; --num-bg: #5B3DF5; --num-ink: #FFFFFF;
  --font: Inter, system-ui, sans-serif; --display: 'Space Grotesk', Inter, sans-serif;
  --radius: 16px; --btn-radius: 10px; --form-radius: 16px; --form-shadow: 0 8px 30px rgba(23,22,28,.06);
}
[data-theme="x"] {
  --bg: #000000; --surface: #000000; --surface-2: #16181C; --ink: #E7E9EA; --muted: #8B98A5; --border: #2F3336;
  --accent: #E7E9EA; --accent-ink: #000000; --free-bg: #E7E9EA; --free-ink: #000000;
  --lock-border: #1D9BF0; --lock-ink: #1D9BF0; --badge-bg: #1D9BF0; --badge-ink: #000000;
  --pill-bg: transparent; --pill-ink: #8B98A5; --ad-border: #536471; --ad-ink: #8B98A5;
  --footer-bg: #000000; --footer-ink: #8B98A5; --footer-head: #E7E9EA; --num-bg: #E7E9EA; --num-ink: #000000;
  --font: Inter, system-ui, sans-serif; --display: Inter, system-ui, sans-serif;
  --radius: 16px; --btn-radius: 999px; --form-radius: 999px; --form-shadow: none;
}
[data-theme="tiktok"] {
  --bg: #0B0B0E; --surface: #1A1A20; --surface-2: #0B0B0E; --ink: #FFFFFF; --muted: #B4B4BE; --border: #2C2C34;
  --accent: #FE2C55; --accent-ink: #FFFFFF; --free-bg: #25F4EE; --free-ink: #000000;
  --lock-border: #FE2C55; --lock-ink: #FF6B88; --badge-bg: #25F4EE; --badge-ink: #000000;
  --pill-bg: #1F1F27; --pill-ink: #25F4EE; --ad-border: #4A4A55; --ad-ink: #A8A8B3;
  --footer-bg: #0B0B0E; --footer-ink: #A8A8B3; --footer-head: #FFFFFF; --num-bg: #FE2C55; --num-ink: #FFFFFF;
  --font: Montserrat, system-ui, sans-serif; --display: Montserrat, system-ui, sans-serif;
  --radius: 18px; --btn-radius: 10px; --form-radius: 14px; --form-shadow: -4px -4px 0 rgba(37,244,238,.55), 4px 4px 0 rgba(254,44,85,.55);
}
[data-theme="instagram"] {
  --bg: #FAFAFA; --surface: #FFFFFF; --surface-2: #F2F2F2; --ink: #262626; --muted: #5C5C5C; --border: #DBDBDB;
  --accent: linear-gradient(90deg, #DD2A7B, #8134AF); --accent-ink: #FFFFFF; --free-bg: #0064E0; --free-ink: #FFFFFF;
  --lock-border: #C1246B; --lock-ink: #A61D5A; --badge-bg: #FCEAF3; --badge-ink: #A61D5A;
  --pill-bg: #FCEAF3; --pill-ink: #A61D5A; --ad-border: #C7C7C7; --ad-ink: #6B6B6B;
  --footer-bg: #FFFFFF; --footer-ink: #5C5C5C; --footer-head: #262626; --num-bg: linear-gradient(45deg, #DD2A7B, #8134AF); --num-ink: #FFFFFF;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif; --display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius: 14px; --btn-radius: 10px; --form-radius: 16px; --form-shadow: none;
}
[data-theme="snapchat"] {
  --bg: #FFFC00; --surface: #FFFFFF; --surface-2: #F4F4F4; --ink: #000000; --muted: #333333; --border: #000000;
  --accent: #000000; --accent-ink: #FFFC00; --free-bg: #000000; --free-ink: #FFFFFF;
  --lock-border: #000000; --lock-ink: #000000; --badge-bg: #FFFC00; --badge-ink: #000000;
  --pill-bg: #000000; --pill-ink: #FFFC00; --ad-border: #000000; --ad-ink: #000000;
  --footer-bg: #000000; --footer-ink: #D6D6D6; --footer-head: #FFFC00; --num-bg: #000000; --num-ink: #FFFC00;
  --font: Nunito, system-ui, sans-serif; --display: Nunito, system-ui, sans-serif;
  --radius: 22px; --btn-radius: 999px; --form-radius: 22px; --form-shadow: 6px 6px 0 #000000;
}

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--border); background: var(--surface); }
[data-theme="snapchat"] .site-header { background: var(--bg); border-bottom-width: 2px; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.logo svg { flex: 0 0 32px; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav a { padding: 10px 12px; border-radius: var(--btn-radius); text-decoration: none; font-size: 15px; font-weight: 600; }
.nav a:hover { background: var(--surface-2); }
.nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
[data-theme="tiktok"] .nav a[aria-current="page"] { background: #1F1F27; color: #FFFFFF; box-shadow: inset 0 -3px 0 #FE2C55; }
[data-theme="instagram"] .nav a[aria-current="page"] { background: #FCEAF3; color: #C1246B; }

/* ---------- Hero ---------- */
.hero { text-align: center; padding-top: clamp(40px, 7vw, 80px); padding-bottom: 24px; }
.pill { display: inline-block; margin: 0 0 18px; padding: 6px 14px; border-radius: 999px; background: var(--pill-bg); color: var(--pill-ink); font-size: 14px; font-weight: 700; }
[data-theme="x"] .pill { border: 1px solid var(--border); }
h1 { margin: 0 0 14px; font-family: var(--display); font-size: clamp(34px, 6vw, 62px); line-height: 1.05; letter-spacing: -.03em; font-weight: 800; }
[data-theme="tiktok"] h1 { font-weight: 900; text-shadow: -3px -2px 0 #25F4EE, 3px 2px 0 #FE2C55; }
[data-theme="snapchat"] h1 { font-weight: 900; }
.lead { margin: 0 auto 28px; max-width: 640px; color: var(--muted); font-size: clamp(16px, 2vw, 19px); }

.grab { max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--form-radius); box-shadow: var(--form-shadow); }
[data-theme="snapchat"] .grab { border-width: 2px; }
[data-theme="instagram"] .grab-ring { max-width: 760px; margin: 0 auto; padding: 2px; border-radius: 18px; background: linear-gradient(90deg, #F58529, #DD2A7B, #8134AF, #515BD4); }
[data-theme="instagram"] .grab { border: 0; }
.grab input { flex: 999 1 240px; min-width: 0; height: 54px; padding: 0 16px; border: 0; border-radius: calc(var(--btn-radius) * .9); background: var(--surface-2); color: var(--ink); font-size: 16px; }
[data-theme="x"] .grab input { background: #000000; padding: 0 20px; }
.grab input:focus-visible { outline: 3px solid var(--lock-border); outline-offset: 1px; }
.btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--btn-radius); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; }
.btn:disabled { opacity: .6; cursor: progress; }
.grab .btn { height: 54px; flex: 1 1 auto; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); }
[data-theme="snapchat"] .btn-ghost { border-width: 2px; background: #FFFFFF; }
.btn-primary { background: var(--accent); color: var(--accent-ink); font-size: 18px; padding: 0 26px; }
.btn-free { background: var(--free-bg); color: var(--free-ink); }
.btn-lock { background: transparent; color: var(--lock-ink); border: 2px solid var(--lock-border); }
[data-theme="snapchat"] .btn-lock { background: #FFFC00; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.chips a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 700; }
.chip-x { background: #000000; color: #FFFFFF; }
.chip-tiktok { background: #121212; color: #FFFFFF; box-shadow: -2px -2px 0 #25F4EE, 2px 2px 0 #FE2C55; }
.chip-instagram { background: linear-gradient(90deg, #F58529, #DD2A7B, #8134AF); color: #FFFFFF; }
.chip-snapchat { background: #FFFC00; color: #000000; }
.status { min-height: 24px; margin: 14px auto 0; max-width: 760px; font-weight: 600; }
.status.error { color: #E5484D; }
[data-theme="snapchat"] .status.error, [data-theme="brand"] .status.error, [data-theme="instagram"] .status.error { color: #B4232A; }

/* ---------- Results + side ads ---------- */
.results-row[hidden] { display: none; }
.ad-header-band { padding-top: 16px; padding-bottom: 0; }
.results-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-top: 16px; padding-bottom: 32px; }
.results-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
[data-theme="snapchat"] .card { border-width: 2px; box-shadow: 6px 6px 0 #000000; }
.result { padding: 20px; display: flex; flex-wrap: wrap; gap: 20px; }
.result[hidden] { display: none; }
.thumb { flex: 0 0 150px; height: 266px; margin: 0 auto; border-radius: 12px; background: #2A2833; object-fit: cover; }
[data-theme="tiktok"] .thumb { box-shadow: -3px -3px 0 #25F4EE, 3px 3px 0 #FE2C55; }
.meta { flex: 999 1 260px; min-width: 0; }
.meta .by { margin: 0; font-size: 14px; font-weight: 700; color: var(--lock-ink); }
.meta h2 { margin: 4px 0 16px; font-size: 18px; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.q { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
[data-theme="snapchat"] .q { border-top: 2px solid #F0F0F0; }
.q-label { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.badge { padding: 2px 8px; border-radius: 999px; background: var(--badge-bg); color: var(--badge-ink); font-size: 12px; font-weight: 800; }

/* ---------- Ads (grid-aligned; every unit is a fixed size) ---------- */
.ad { display: flex; align-items: center; justify-content: center; margin: 0 auto; overflow: hidden; }
.ad.preview { border: 2px dashed var(--ad-border); border-radius: 6px; color: var(--ad-ink); font-size: 13px; text-align: center; padding: 0 8px; }
.ad iframe { border: 0; display: block; }
.ad-leader { width: 100%; max-width: 728px; height: 90px; }
.ad-square { width: 300px; height: 250px; }
.ad-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.ad-side { flex: 1 1 300px; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 24px; }
.ad-band { padding-top: 8px; padding-bottom: 8px; }
.sticky-ad { position: sticky; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 8px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sticky-ad[hidden] { display: none; }
.sticky-ad .ad-leader { height: 90px; }
.sticky-close { width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }

/* ---------- Content ---------- */
section.block { padding-top: 32px; padding-bottom: 32px; }
h2.sec { margin: 0 0 20px; font-family: var(--display); font-size: clamp(26px, 3.5vw, 36px); letter-spacing: -.02em; font-weight: 800; text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.tile { padding: 22px; }
[data-theme="snapchat"] .tile { box-shadow: 4px 4px 0 #000000; }
[data-theme="tiktok"] .feature { border-top: 3px solid #25F4EE; }
.tile h3 { margin: 14px 0 6px; font-size: 18px; font-weight: 800; }
.feature h3 { margin-top: 0; }
.tile p { margin: 0; color: var(--muted); }
.num { display: inline-flex; width: 38px; height: 38px; border-radius: 10px; background: var(--num-bg); color: var(--num-ink); align-items: center; justify-content: center; font-weight: 900; font-size: 18px; }
[data-theme="x"] .num, [data-theme="instagram"] .num, [data-theme="snapchat"] .num { border-radius: 999px; }
.faq-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.faq-main { flex: 999 1 520px; min-width: 0; }
.faq-item { padding: 18px 20px; margin-bottom: 10px; }
.faq-item h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; }
.faq-item p { margin: 0; color: var(--muted); }
.faq-main .ad-leader { margin: 18px auto; }
.more { text-align: center; }
.more .chips { margin-top: 0; }
.prose { max-width: 760px; margin: 0 auto; padding: 48px clamp(16px, 4vw, 32px); }
.prose h1 { font-size: clamp(30px, 5vw, 44px); }
.prose h2 { margin-top: 28px; font-size: 22px; }
.prose a { color: var(--lock-ink); }

/* ---------- Footer ---------- */
.site-footer { margin-top: 32px; background: var(--footer-bg); color: var(--footer-ink); border-top: 1px solid var(--border); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; padding-top: 36px; padding-bottom: 28px; font-size: 14px; }
.site-footer .brand { flex: 1 1 280px; }
.site-footer .brand strong { display: block; margin-bottom: 6px; font-family: var(--display); font-size: 20px; color: var(--footer-head); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-content: flex-start; }
.site-footer a { color: var(--footer-head); padding: 6px 0; }
.site-footer .sister { flex: 1 1 100%; margin: 0; padding-top: 16px; border-top: 1px solid rgba(128,128,128,.3); }

/* ---------- Unlock modal ---------- */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { width: 100%; max-width: 420px; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 22px; padding: 24px 20px; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
[data-theme="tiktok"] .modal-box { box-shadow: -4px -4px 0 rgba(37,244,238,.6), 4px 4px 0 rgba(254,44,85,.6); }
[data-theme="snapchat"] .modal-box { border: 2px solid #000000; box-shadow: 6px 6px 0 #000000; }
.modal-box h2 { margin: 0; font-size: 22px; }
.modal-box p { margin: 0; color: var(--muted); }
.modal-box .btn { width: 100%; min-height: 54px; }
.countdown { width: 72px; height: 72px; border-radius: 999px; border: 4px solid var(--lock-border); display: inline-flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 900; }
.bar { width: 100%; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--lock-border); transition: width 1s linear; }

/* ---------- Responsive ad visibility ---------- */
@media (max-width: 999px) { .ad-desktop { display: none !important; } }
@media (max-width: 599px) {
  .ad-notphone { display: none !important; }
  .ad-leader.ad-top, .sticky-ad .ad-leader { max-width: 320px; height: 50px; }
  .faq-main .ad-leader { width: 300px; height: 250px; }
  .grab .btn { flex: 1 1 40%; }
}

/* ---------- ShareAnyFile tool ---------- */
.tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.tabs button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-weight: 800; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.panel[hidden] { display: none; }
.drop { max-width: 760px; margin: 0 auto; padding: 28px 20px; border: 2px dashed var(--accent); border-radius: var(--form-radius); background: var(--surface); display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; box-shadow: var(--form-shadow); }
.drop.over { background: var(--pill-bg); }
.drop strong { font-size: 19px; }
.drop small { color: var(--muted); }
.drop-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.drop select { min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 700; }
.progress { width: 100%; max-width: 420px; height: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.share-out { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.share-out[hidden] { display: none; }
.share-out h2 { margin: 0; font-size: 19px; }
.copy-row { display: flex; flex-wrap: wrap; gap: 10px; }
.copy-row input { flex: 999 1 220px; min-width: 0; height: 50px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--ink); font-weight: 700; font-size: 16px; }
.copy-row .btn { flex: 1 1 auto; height: 50px; }
.note { margin: 0; color: var(--muted); font-size: 14px; }
.landing { padding: 24px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.landing h1 { font-size: clamp(26px, 4vw, 38px); margin: 0; overflow-wrap: anywhere; }
.landing .dest { font-weight: 800; font-size: 18px; overflow-wrap: anywhere; }
.landing .btn { min-width: 240px; min-height: 54px; font-size: 18px; }
.linkish { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 14px; min-height: 44px; }

/* In-page ad break (file download) */
.modal-box.wide { max-width: 680px; }
.adbreak { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; min-height: 250px; width: 100%; }
.adbreak-label { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.adbreak-note { margin: 0; font-weight: 700; color: var(--ink) !important; }