@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@500;600;700&display=swap');

:root {
  --ink: #171713;
  --muted: #696961;
  --paper: #f6f5f1;
  --line: #d9d7cf;
  --lime: #dfff55;
  --blue: #3869f7;
  --blue-soft: #e8edff;
  --white: #fff;
  --shadow: 0 24px 70px rgba(23,23,19,.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle at 76% 8%, rgba(56,105,247,.09), transparent 29rem), radial-gradient(circle at 18% 28%, rgba(223,255,85,.10), transparent 24rem);
}

button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid rgba(56,105,247,.3); outline-offset: 3px; }
.inline-icon, .icon-button { display: inline-grid; place-items: center; flex: 0 0 auto; }
.inline-icon { width: 18px; height: 18px; }
.icon-button { width: 28px; height: 28px; border-radius: 50%; background: var(--lime); color: var(--ink); }
.inline-icon svg, .icon-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; text-decoration: none; }

.back-to-top { position: fixed; right: max(18px,calc((100vw - 1320px) / 2)); bottom: 22px; z-index: 70; width: 58px; height: 58px; display: grid; place-items: center; gap: 1px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: #171713; color: var(--lime); box-shadow: 0 14px 38px rgba(0,0,0,.25); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, background .18s ease; }
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--blue); color: white; }
.back-to-top span { font: 700 8px/1 Manrope,sans-serif; letter-spacing: .12em; }
.back-to-top svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.site-header {
  width: min(1180px, calc(100% - 48px));
  height: 88px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 45;
}

.brand { display: flex; gap: 11px; align-items: center; font: 700 21px/1 Manrope, sans-serif; letter-spacing: -.5px; }
.brand-mark { position: relative; width: 27px; height: 27px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: rotate(-8deg); }
.brand-mark i { display: block; border-radius: 5px 2px 2px 5px; background: var(--ink); }
.brand-mark i:last-child { border-radius: 2px 5px 5px 2px; background: var(--blue); transform: translateY(5px); }
.site-nav { display: flex; flex: 1 1 auto; align-items: center; gap: 28px; color: var(--muted); font-size: 13px; }
.site-nav a { position: relative; }
.site-nav a:hover, .site-nav a.active { color: var(--ink); }
.site-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: var(--blue); }
.nav-pill { padding: 11px 15px; border: 1px solid var(--ink); border-radius: 999px; font-size: 13px; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.account-actions { display: inline-flex; align-items: center; gap: 8px; }
.global-meme-search { position: relative; }
.global-search-toggle { min-height: 42px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); color: var(--ink); cursor: pointer; font: 600 12px/1 "DM Sans",sans-serif; }
.global-search-toggle:hover,.global-search-toggle[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
.global-search-toggle svg,.global-search-field svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.global-search-popup { position: absolute; z-index: 90; top: calc(100% + 10px); right: 0; width: min(410px,calc(100vw - 24px)); padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--ink); box-shadow: 0 24px 70px rgba(23,23,19,.2); }
.global-search-popup > label { display: block; margin: 0 0 9px 3px; color: var(--muted); font: 700 9px/1 Manrope,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.global-search-field { height: 46px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); color: var(--muted); }
.global-search-field:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(56,105,247,.1); }
.global-search-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 15px/1.2 "DM Sans",sans-serif; }
.global-search-results { max-height: min(440px,60vh); margin-top: 10px; overflow-y: auto; overscroll-behavior: contain; }
.global-search-results > p { margin: 0; padding: 22px 10px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.4; }
.global-search-result { padding: 8px; display: grid; grid-template-columns: 72px minmax(0,1fr) auto; gap: 11px; align-items: center; border-radius: 10px; }
.global-search-result:hover,.global-search-result:focus { outline: 0; background: var(--blue-soft); }
.global-search-result img,.global-search-result-placeholder { width: 72px; height: 45px; display: grid; place-items: center; border-radius: 7px; background: #171713; color: var(--lime); object-fit: cover; }
.global-search-result span { min-width: 0; display: grid; gap: 4px; }
.global-search-result strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.2 Manrope,sans-serif; }
.global-search-result small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.global-search-result > b { color: var(--muted); font: 600 10px/1 Manrope,sans-serif; }
.language-switcher { flex: 0 0 auto; padding: 3px; display: inline-grid; grid-template-columns: repeat(2,36px); gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
.language-switcher button { width: 36px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font: 700 10px/1 Manrope,sans-serif; letter-spacing: .04em; }
.language-switcher button[aria-pressed="true"] { background: var(--ink); color: var(--lime); }
.language-switcher button:hover { color: var(--blue); }
.reels-shortcut { height: 42px; padding: 4px 13px 4px 4px; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(23,23,19,.16); border-radius: 999px; background: var(--lime); color: var(--ink); font-family: Manrope,sans-serif; box-shadow: 0 6px 18px rgba(23,23,19,.1); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; }
.reels-shortcut::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 22%,rgba(255,255,255,.12) 45%,transparent 68%); transform: translateX(-130%); transition: transform .55s ease; }
.reels-play-mark { width: 32px; height: 32px; position: relative; z-index: 1; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); animation: reels-mark-pulse 2.2s ease-in-out infinite; }
.reels-play-mark::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(215,255,57,.44); border-radius: 50%; animation: reels-mark-ring 2.2s ease-out infinite; }
.reels-play-mark i { z-index: 1; width: 0; height: 0; margin-left: 3px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid var(--lime); animation: reels-mark-arrow 1.25s ease-in-out infinite; }
.reels-shortcut-copy { position: relative; z-index: 1; display: grid; gap: 2px; }
.reels-shortcut-copy small { display: none; }
.reels-shortcut-copy b { font-size: 11px; line-height: 1; white-space: nowrap; }
.reels-shortcut:hover { box-shadow: 0 12px 30px rgba(23,23,19,.17); transform: translateY(-2px); }
.reels-shortcut:hover::after { transform: translateX(130%); }
.reels-shortcut:active { box-shadow: 0 4px 12px rgba(23,23,19,.12); transform: translateY(0) scale(.98); }
.reels-shortcut:focus-visible { outline: 3px solid rgba(215,255,57,.34); outline-offset: 3px; }
@keyframes reels-mark-pulse { 50% { transform: rotate(-4deg) scale(1.06); } }
@keyframes reels-mark-ring { 0%,35% { opacity: .72; transform: scale(.82); } 85%,100% { opacity: 0; transform: scale(1.16); } }
@keyframes reels-mark-arrow { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
.account-chip { min-height: 42px; padding: 5px 12px 5px 5px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
.account-chip > span, .account-chip > img { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: white; object-fit: cover; font-weight: 700; }
.account-chip > b { min-width: 0; display: grid; gap: 2px; line-height: 1; }
.account-chip > b > span { font: 700 11px/1 Manrope,sans-serif; }
.account-chip > b > small { max-width: 105px; overflow: hidden; color: var(--muted); font: 500 9px/1 "DM Sans",sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.account-chip.signed-out > span { background: white; color: var(--blue); box-shadow: 0 1px 8px rgba(0,0,0,.1); }
.account-provider-mark.profile { position: relative; background: white; color: var(--blue); box-shadow: inset 0 0 0 1px rgba(23,23,19,.1); }
.account-provider-mark.profile::before { content: ""; position: absolute; top: 6px; left: 10px; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.account-provider-mark.profile > em { position: absolute; left: 7px; bottom: 5px; width: 14px; height: 7px; border: 2px solid currentColor; border-bottom: 0; border-radius: 10px 10px 0 0; }
.account-menu { position: relative; }
.account-menu summary { cursor: pointer; list-style: none; user-select: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary i { color: var(--muted); font-style: normal; transition: transform .16s ease; }
.account-menu[open] summary i { transform: rotate(180deg); }
.account-menu-panel { position: absolute; z-index: 50; top: calc(100% + 9px); right: 0; width: 210px; padding: 7px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 18px 45px rgba(30,30,24,.14); }
.account-menu-panel a, .account-menu-panel button { width: 100%; min-height: 40px; padding: 9px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; display: grid; gap: 2px; text-align: left; font: 500 13px/1.2 "DM Sans", sans-serif; }
.account-menu-panel a:hover, .account-menu-panel button:hover { background: var(--paper); }
.account-menu-panel small { color: var(--muted); font-size: 10px; font-weight: 400; }
.account-language { margin: 4px 0; padding: 11px; display: grid; gap: 9px; border-radius: 10px; background: var(--paper); }
.account-language > span { color: var(--muted); font: 700 9px/1 "DM Sans",sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.account-menu-panel .account-language .language-switcher { width: 100%; padding: 3px; grid-template-columns: repeat(2,minmax(0,1fr)); border-color: #d8d7d0; background: white; }
.account-menu-panel .account-language .language-switcher button { width: auto; height: 34px; min-height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font: 700 11px/1 "DM Sans",sans-serif; letter-spacing: 0; text-align: center; }
.account-menu-panel .account-language .language-switcher button[aria-pressed="true"] { box-shadow: 0 2px 8px rgba(23,23,19,.16); }
.account-menu-panel form { margin: 3px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.account-menu-panel form button { color: #b33a2c; }


.scroll-nav { position: fixed; z-index: 40; top: 50%; right: 18px; width: 42px; padding: 11px 0; display: grid; gap: 2px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(23,23,19,.84); box-shadow: 0 16px 44px rgba(0,0,0,.18); backdrop-filter: blur(16px); opacity: 0; transform: translate(12px,-50%); pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.scroll-nav.is-visible { opacity: 1; transform: translate(0,-50%); pointer-events: auto; }
.scroll-nav-rail { position: absolute; top: 27px; bottom: 27px; left: 20px; width: 1px; background: rgba(255,255,255,.13); }
.scroll-nav a { width: 40px; height: 36px; position: relative; display: grid; place-items: center; color: white; }
.scroll-nav a i { z-index: 1; width: 7px; height: 7px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: #252522; transition: width .18s ease, height .18s ease, border-color .18s ease, background .18s ease; }
.scroll-nav a span { position: absolute; top: 50%; right: 48px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: white; box-shadow: 0 8px 24px rgba(0,0,0,.18); font: 600 10px/1 Manrope,sans-serif; letter-spacing: .03em; white-space: nowrap; opacity: 0; transform: translate(5px,-50%); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.scroll-nav a:hover span, .scroll-nav a:focus-visible span { opacity: 1; transform: translate(0,-50%); }
.scroll-nav a.active i { width: 13px; height: 13px; border-color: var(--lime); background: var(--lime); box-shadow: 0 0 0 5px rgba(215,255,57,.12); }
.scroll-nav a:focus-visible { outline: 0; }

.hero { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 66px 0 104px; }
.eyebrow, .section-kicker { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 9px; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(56, 105, 247, .11); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 27px 0 28px; max-width: 960px; font: 600 clamp(60px, 8.2vw, 108px)/.94 Manrope, sans-serif; letter-spacing: -.068em; text-wrap: balance; }
h1 em { color: var(--blue); font-style: normal; }
.hero-copy { max-width: 580px; margin: 0; color: var(--muted); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.45; letter-spacing: -.02em; }
.editor-manifesto { margin: 21px 0 0; display: flex; gap: 8px; align-items: center; font: 700 12px/1 Manrope,sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.editor-manifesto strong { padding: 8px 10px; border-radius: 7px; background: var(--ink); color: white; }
.editor-manifesto span { padding: 8px 10px; border-radius: 7px; background: var(--lime); color: var(--ink); transform: rotate(-1deg); }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 22px; }
.primary-button { min-height: 50px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: white; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 14px; box-shadow: 0 10px 28px rgba(23,23,19,.16); transition: transform .18s ease, box-shadow .18s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(23,23,19,.2); }
.app-store-button { min-height: 62px; padding-inline: 18px 22px; gap: 11px; }
.app-store-button > svg { width: 27px; height: 27px; fill: currentColor; }
.app-store-button > span { display: grid; gap: 1px; }
.app-store-button small { font: 500 9px/1 Manrope, sans-serif; letter-spacing: .04em; }
.app-store-button strong { font: 600 20px/1.05 Manrope, sans-serif; letter-spacing: -.035em; }
.hero-demo-link { color: var(--ink); font: 600 13px/1.2 Manrope, sans-serif; border-bottom: 1px solid var(--ink); }
.hero-demo-link:hover { color: var(--blue); border-color: var(--blue); }
.availability { min-height: 58px; padding: 8px 10px 8px 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ink); border-radius: 14px; background: var(--lime); box-shadow: 5px 5px 0 var(--blue); transform: rotate(-1deg); }
.availability > i { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(56,105,247,.15); animation: version-pulse 1.8s ease-in-out infinite; }
.availability > span { display: grid; gap: 2px; }
.availability small { font: 700 9px/1 Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.availability strong { color: var(--ink); font: 700 16px/1.05 Manrope, sans-serif; letter-spacing: -.025em; }
.availability > b { margin-left: 3px; padding: 6px 7px; border-radius: 7px; background: var(--ink); color: white; font: 700 8px/1 Manrope, sans-serif; letter-spacing: .1em; }
@keyframes version-pulse { 50% { box-shadow: 0 0 0 8px rgba(56,105,247,0); } }
.access-summary { max-width: 800px; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(23,23,19,.1); border-radius: 16px; background: rgba(255,255,255,.68); box-shadow: 0 12px 36px rgba(23,23,19,.055); backdrop-filter: blur(12px); list-style: none; }
.access-summary li { min-width: 0; padding: 14px 16px; display: grid; gap: 4px; border-right: 1px solid var(--line); }
.access-summary li:last-child { border-right: 0; }
.access-summary strong { font: 600 12px/1.2 Manrope, sans-serif; }
.access-summary span { color: var(--muted); font-size: 11px; }
.site-stats { max-width: 780px; margin: 42px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.site-stats div { padding: 20px 20px 0 0; }
.site-stats dt { font: 600 27px/1 Manrope, sans-serif; letter-spacing: -.04em; }
.site-stats dd { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

.editor-preview { margin-top: 76px; border: 1px solid #353530; border-radius: 18px; overflow: hidden; background: #171715; color: white; box-shadow: 0 34px 80px rgba(30,30,24,.18); }
.preview-toolbar { height: 52px; padding: 0 17px; background: #252522; color: #8f8f88; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #353530; font-size: 10px; letter-spacing: .05em; }
.preview-title { color: #e8e8e1; font-weight: 600; letter-spacing: 0; }
.preview-title i { width: 7px; height: 7px; margin-right: 8px; display: inline-block; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(56,105,247,.14); }
.preview-mode { color: #aaa9a1; }
.preview-status { justify-self: end; color: var(--lime); font-size: 9px; }
.preview-workspace { min-height: 390px; display: grid; grid-template-columns: 105px minmax(0,1fr) 180px; background: #1c1c1a; }
.preview-tools { padding: 17px 10px; display: grid; align-content: start; gap: 6px; border-right: 1px solid #34342f; background: #20201d; }
.preview-tools span { min-height: 54px; padding: 8px 5px; display: grid; place-items: center; gap: 4px; border-radius: 9px; color: #81817a; font-size: 9px; }
.preview-tools span.active { background: #30302c; color: white; }
.preview-tools b { color: var(--lime); font-size: 17px; }
.preview-stage { padding: 28px; display: grid; place-items: center; background-color: #181816; background-image: linear-gradient(#232320 1px, transparent 1px), linear-gradient(90deg,#232320 1px,transparent 1px); background-size: 22px 22px; }
.preview-video { width: min(100%, 560px); aspect-ratio: 16 / 9; position: relative; overflow: hidden; border-radius: 9px; background: linear-gradient(135deg,#315bd7,#87a3ff); box-shadow: 0 20px 50px rgba(0,0,0,.36); }
.preview-video > img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.9) contrast(1.04) brightness(.72); }
.preview-video::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,rgba(0,0,0,.58)); }
.preview-caption { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 9%; color: white; font: 700 clamp(16px,2.2vw,30px)/.95 Manrope,sans-serif; letter-spacing: -.04em; text-shadow: 0 2px 12px rgba(0,0,0,.72); }
.preview-caption small { margin-bottom: 5px; display: block; color: var(--lime); font-size: .38em; letter-spacing: .12em; }
.preview-play { position: absolute; z-index: 3; top: 50%; left: 50%; width: 48px; height: 48px; padding-left: 3px; transform: translate(-50%,-50%); display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: 0 8px 25px rgba(0,0,0,.24), 0 0 0 5px rgba(215,255,57,.12); font-size: 13px; }
.preview-safe-area { position: absolute; z-index: 2; inset: 7%; border: 1px dashed rgba(255,255,255,.22); border-radius: 4px; }
.preview-inspector { padding: 21px 16px; display: grid; align-content: start; gap: 5px; border-left: 1px solid #34342f; background: #20201d; }
.preview-inspector > span { margin-top: 13px; color: #74746e; font-size: 8px; letter-spacing: .11em; }
.preview-inspector > span:first-child { margin-top: 0; }
.preview-inspector > strong { color: #d8d8d1; font-size: 11px; font-weight: 500; }
.preview-inspector div { margin-top: 22px; display: flex; gap: 7px; }
.preview-inspector i { width: 20px; height: 20px; border-radius: 6px; background: var(--blue); }
.preview-inspector i:nth-child(2) { background: var(--lime); }
.preview-inspector i:nth-child(3) { background: #f6f5f1; }
.preview-timeline { height: 172px; padding: 16px 18px 15px 54px; position: relative; display: grid; gap: 6px; border-top: 1px solid #353530; background: #11110f; }
.timeline-ruler { display: flex; justify-content: space-between; color: #5f5f59; font: 8px/1 monospace; }
.timeline-track { min-width: 0; height: 32px; position: relative; display: flex; gap: 4px; }
.timeline-track > b { width: 28px; margin-left: -36px; display: grid; place-items: center; color: #66665f; font-size: 8px; }
.timeline-clip { min-width: 0; padding: 0 9px; display: flex; align-items: center; overflow: hidden; border-radius: 5px; color: #d8d8d2; background: #343431; font: 600 8px/1 Manrope,sans-serif; letter-spacing: .07em; white-space: nowrap; }
.timeline-clip.video { width: 64%; }
.timeline-clip.reaction { flex: 1; background: var(--blue); color: white; }
.timeline-clip.captions { width: 72%; margin-left: 13%; background: var(--lime); color: var(--ink); }
.timeline-clip.audio { width: 88%; color: #a8c2ff; background: #202c50; letter-spacing: .16em; }
.preview-playhead { position: absolute; z-index: 3; left: 58%; top: 10px; bottom: 10px; width: 1px; background: #ff6654; }
.preview-playhead i { position: absolute; top: 0; left: -4px; width: 9px; height: 9px; border-radius: 2px 2px 50% 50%; background: #ff6654; }

.app-showcase {
  margin-top: 76px;
  padding: 56px clamp(22px, 5vw, 64px) 64px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--ink);
  background: linear-gradient(135deg,#f0ffb7 0%,var(--lime) 58%,#ccec43 100%);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--blue), 0 24px 64px rgba(30,30,24,.1);
}
.showcase-heading { max-width: 620px; margin: 0 auto; text-align: center; }
.showcase-heading > span { display: flex; align-items: center; gap: 9px; color: var(--ink); font: 700 10px/1 Manrope,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.showcase-heading > span { justify-content: center; }
.showcase-heading > span i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(56,105,247,.12); }
.showcase-heading h2 { margin: 18px 0 10px; font: 600 clamp(34px,4.4vw,56px)/1 Manrope,sans-serif; letter-spacing: -.05em; }
.showcase-heading p { margin: 0; color: rgba(23,23,19,.66); font-size: 15px; line-height: 1.55; }
.showcase-stage { max-width: 980px; margin: 48px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 42px 30px; }
.showcase-phone { min-width: 0; margin: 0; position: relative; }
.showcase-start, .showcase-editor, .showcase-text, .showcase-hold { width: min(100%, 320px); grid-column: 1; justify-self: end; }
.showcase-profile, .showcase-filters, .showcase-move { width: min(100%, 320px); grid-column: 2; justify-self: start; }
.showcase-start, .showcase-profile { grid-row: 1; }
.showcase-editor, .showcase-filters { grid-row: 2; }
.showcase-text { grid-row: 3; justify-self: center; grid-column: 1 / -1; }
.showcase-pro { grid-column: 1 / -1; grid-row: 4; margin-top: 6px; }
.showcase-hold, .showcase-move { grid-row: 5; }
.phone-screen { position: relative; overflow: hidden; aspect-ratio: 1206 / 2622; border: 1px solid #363633; border-radius: clamp(25px, 3vw, 40px); background: #050505; box-shadow: 0 18px 38px rgba(0,0,0,.3); }
.showcase-editor .phone-screen { border-color: #3c3c38; }
.showcase-pro .phone-screen { aspect-ratio: 2622 / 1206; border-radius: 22px; border-color: #3c3c38; }
.phone-screen img { width: 100%; height: 100%; display: block; object-fit: cover; }
.showcase-phone figcaption { margin-top: 14px; display: flex; justify-content: space-between; gap: 18px; color: rgba(23,23,19,.66); font-size: 11px; line-height: 1.4; }
.showcase-phone figcaption strong { color: var(--ink); font: 700 13px/1.3 Manrope,sans-serif; white-space: nowrap; }
.showcase-pro figcaption { max-width: none; }
.feature-detail-grid { max-width: 1100px; margin: 46px auto 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.feature-detail-grid article { padding: 25px; border: 1px solid rgba(23,23,19,.14); border-radius: 22px; background: rgba(255,255,255,.45); }
.feature-detail-grid span { color: var(--blue); font: 800 10px/1 Manrope,sans-serif; letter-spacing: .13em; }
.feature-detail-grid h3 { margin: 13px 0 12px; font: 650 22px/1.08 Manrope,sans-serif; letter-spacing: -.035em; }
.feature-detail-grid p { margin: 8px 0 0; color: rgba(23,23,19,.68); font-size: 13px; line-height: 1.55; }

.plan-comparison { padding: 108px max(24px, calc((100vw - 1100px) / 2)); background: #f3f2ec; }
.plan-heading { max-width: 760px; }
.plan-heading h2 { margin: 0; font: 600 clamp(44px, 6vw, 72px)/.98 Manrope,sans-serif; letter-spacing: -.055em; }
.plan-heading h2 em { color: var(--blue); font-style: normal; }
.plan-heading > p:last-child { max-width: 650px; margin: 24px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.plan-grid { margin-top: 52px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; align-items: stretch; }
.plan-card { padding: clamp(24px,4vw,42px); border: 1px solid var(--line); border-radius: 26px; background: white; box-shadow: 0 18px 48px rgba(23,23,19,.07); }
.plan-pro { position: relative; overflow: hidden; border-color: #30302c; background: #171715; color: white; box-shadow: 8px 8px 0 var(--lime); }
.plan-pro::after { content: "PRO"; position: absolute; right: -12px; top: 36px; color: rgba(215,255,57,.08); font: 800 100px/1 Manrope,sans-serif; transform: rotate(90deg); pointer-events: none; }
.plan-card-title { position: relative; z-index: 1; display: grid; gap: 12px; }
.plan-card-title span { width: fit-content; padding: 7px 9px; border-radius: 7px; background: var(--ink); color: white; font: 800 10px/1 Manrope,sans-serif; letter-spacing: .12em; }
.plan-pro .plan-card-title span { background: var(--lime); color: var(--ink); }
.plan-card-title strong { font: 600 clamp(24px,3vw,34px)/1.1 Manrope,sans-serif; letter-spacing: -.04em; }
.plan-card ul { position: relative; z-index: 1; margin: 28px 0 0; padding: 0; display: grid; gap: 15px; list-style: none; }
.plan-card li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; color: var(--muted); line-height: 1.4; }
.plan-card li::before { content: "✓"; color: var(--blue); font-weight: 800; }
.plan-pro li { color: #c7c7bf; }
.plan-pro li::before { color: var(--lime); }
.plan-pro .primary-button { position: relative; z-index: 1; margin-top: 30px; background: var(--lime); color: var(--ink); box-shadow: none; }

.upload-trust { padding: 96px max(24px, calc((100vw - 960px) / 2)); text-align: center; background: #171715; color: white; }
.upload-trust h2 { margin: 16px 0 22px; font: 600 clamp(42px, 6vw, 74px)/.98 Manrope,sans-serif; letter-spacing: -.055em; }
.upload-trust > p:not(.section-kicker) { max-width: 700px; margin: 0 auto 28px; color: #aaa9a1; font-size: 17px; line-height: 1.65; }
.upload-trust h2 em { color: var(--lime); font-style: normal; }
.upload-anywhere { max-width: 760px; margin: 38px auto 0; padding: 24px; border: 1px solid #45453f; border-radius: 18px; background: linear-gradient(120deg,#20201d,#292925); text-align: left; }
.upload-anywhere > span { color: var(--lime); font: 700 9px/1 Manrope,sans-serif; letter-spacing: .12em; }
.upload-anywhere > strong { display: block; margin-top: 10px; font: 600 25px/1.1 Manrope,sans-serif; letter-spacing: -.035em; }
.upload-anywhere > p { margin: 10px 0 17px; color: #aaa9a1; font-size: 14px; line-height: 1.55; }
.upload-anywhere > a { color: var(--lime); font-size: 13px; font-weight: 700; }
.processing-points { max-width: 960px; margin: 42px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; list-style: none; text-align: left; }
.processing-points li { min-width: 0; padding: 20px; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; border: 1px solid #3b3b36; border-radius: 14px; background: #20201d; }
.processing-points b { color: var(--lime); font: 700 10px/1 Manrope,sans-serif; }
.processing-points span { display: grid; gap: 7px; color: #929189; font-size: 13px; line-height: 1.45; }
.processing-points strong { color: white; font: 600 15px/1.2 Manrope,sans-serif; }
.upload-trust .text-button { display: inline-flex; color: var(--ink); background: var(--lime); border-color: var(--lime); }

.steps { padding: 110px max(24px, calc((100vw - 1180px) / 2)); background: var(--white); display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; }
.section-kicker { margin-bottom: 22px; }
.steps h2, .community h2 { margin-bottom: 0; font: 600 clamp(43px, 5vw, 68px)/1 Manrope, sans-serif; letter-spacing: -.055em; }
.step-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.step-list li { padding: 25px 0; display: grid; grid-template-columns: 75px 1fr; border-bottom: 1px solid var(--line); }
.step-number { color: var(--blue); font: 600 12px/1 Manrope, sans-serif; }
.step-list h3 { margin-bottom: 7px; font: 600 21px/1.2 Manrope, sans-serif; letter-spacing: -.03em; }
.step-list p { max-width: 470px; margin-bottom: 0; color: var(--muted); line-height: 1.55; }

.clip-library { padding: 110px max(24px, calc((100vw - 1180px) / 2)); background: #20201d; color: white; }
.library-heading { margin-bottom: 46px; display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; }
.library-heading h2 { margin: 0; font: 600 clamp(43px, 5vw, 68px)/1 Manrope, sans-serif; letter-spacing: -.055em; }
.library-heading > p { max-width: 400px; margin: 0; color: #aaa9a1; font-size: 17px; line-height: 1.5; }
.clip-library .section-kicker { color: #929189; }
.catalog-search { margin-bottom: 38px; }
.clip-search { width: min(100%,760px); min-height: 56px; padding: 4px; display: flex; align-items: center; gap: 4px; overflow: hidden; border: 1px solid #565650; border-radius: 999px; background: #292925; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.clip-search:focus-within { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(223,255,85,.1); }
.clip-search input { min-width: 0; height: 46px; flex: 1; padding: 0 16px; border: 0; outline: 0; background: transparent; color: white; font: 400 16px/1.3 "DM Sans", sans-serif; }
.clip-search input::placeholder { color: #85857d; }
.clip-search button { min-width: 112px; height: 46px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink); cursor: pointer; font: 700 13px/1 "DM Sans", sans-serif; white-space: nowrap; }
.clip-search button:hover { background: white; }
.tag-list { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tag-list > span { margin-right: 3px; color: #85857d; font-size: 12px; }
.tag-chip { padding: 7px 10px; border: 1px solid #4a4a44; border-radius: 999px; background: transparent; color: #c7c6bf; cursor: pointer; font: 500 12px/1 "DM Sans", sans-serif; }
.tag-chip:hover { border-color: var(--lime); color: var(--lime); }
.search-status { min-height: 18px; margin: 12px 0 0; color: #929189; font-size: 12px; }
.clip-grid.is-searching { opacity: .48; transition: opacity .15s ease; }
.clip-search-empty { grid-column: 1 / -1; min-height: 180px; padding: 42px 20px; display: grid; place-items: center; border: 1px dashed #45453f; border-radius: 12px; color: #929189; text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.clip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 14px; }
.clip-card, .clip-card-link { min-width: 0; }
.clip-card-link { display: block; }
.clip-poster { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 11px; background: #30302c; }
.clip-poster img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .28s ease; }
.clip-card:hover .clip-poster img { transform: scale(1.025); }
.clip-play { position: absolute; inset: 50% auto auto 50%; width: 48px; height: 48px; padding-left: 3px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); font-size: 14px; }
.clip-duration { position: absolute; right: 9px; bottom: 9px; padding: 4px 6px; border-radius: 4px; background: rgba(18,18,16,.78); font-size: 11px; }
.clip-card-copy { padding: 10px 2px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.clip-card-copy h3 { overflow: hidden; margin: 0; font: 600 14px/1.3 Manrope, sans-serif; letter-spacing: -.015em; white-space: nowrap; text-overflow: ellipsis; }
.clip-card-copy span { max-width: 35%; flex: none; overflow: hidden; color: #929189; font-size: 10px; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }
.clip-card-stats { min-height: 28px; padding: 5px 2px 0; display: flex; align-items: center; gap: 12px; color: #77776f; font-size: 10px; }
.card-like { min-height: 26px; margin-left: auto; padding: 2px 7px; border: 1px solid #45453f; border-radius: 999px; background: transparent; color: #9b9a92; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: 600 10px/1 "DM Sans", sans-serif; }
.card-like:hover, .card-like.active { border-color: var(--lime); color: var(--lime); }
.heart-icon { display: inline-block; min-width: .9em; color: currentColor; font-size: 1.25em; line-height: 1; text-align: center; }
.library-more { margin-top: 52px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.load-more-button { min-width: 190px; min-height: 46px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid #56564f; border-radius: 999px; background: transparent; color: white; cursor: pointer; font: 500 14px/1 "DM Sans", sans-serif; transition: border-color .2s ease, background .2s ease; }
.load-more-button:hover { border-color: #aaa99f; background: #292925; }
.load-more-button:disabled { cursor: wait; opacity: .6; }
.library-more p { margin: 0; color: #929189; font-size: 12px; }

.community { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 120px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; }
.community-stamp { display: inline-block; margin-bottom: 35px; padding: 7px 10px; border: 1px solid var(--ink); border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .11em; transform: rotate(-2deg); }
.community-copy > p { max-width: 520px; margin: 28px 0 0; color: var(--muted); font-size: 18px; line-height: 1.55; }
.community-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; transform: rotate(2deg); }
.community-grid span { min-height: 108px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); display: flex; align-items: flex-end; font: 600 19px/1 Manrope, sans-serif; }
.community-grid span:nth-child(2), .community-grid span:nth-child(5) { background: var(--blue); color: white; border-color: var(--blue); }
.community-grid span:nth-child(3) { background: var(--lime); border-color: #cadd45; }

.explore-modes { padding: 110px max(24px, calc((100vw - 1180px) / 2)); background: white; display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.explore-modes h2 { margin: 0; font: 600 clamp(43px, 5vw, 68px)/1 Manrope, sans-serif; letter-spacing: -.055em; }
.mode-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.mode-links > a { min-height: 330px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; display: flex; flex-direction: column; box-shadow: 0 10px 32px rgba(23,23,19,.055); transition: transform .2s ease, box-shadow .2s ease; }
.mode-links > a:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.mode-links span { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.mode-links strong { margin-top: auto; font: 600 27px/1.05 Manrope, sans-serif; letter-spacing: -.04em; }
.mode-links p { margin: 15px 0 24px; color: var(--muted); line-height: 1.45; }
.mode-links i { display: inline-flex; align-items: center; gap: 7px; font-style: normal; font-size: 13px; font-weight: 600; }
.mode-links .reels-mode { border-color: var(--blue); background: var(--blue); color: white; }
.mode-links .reels-mode span, .mode-links .reels-mode p { color: rgba(255,255,255,.7); }

.tags-page { min-height: 70vh; }
.tags-hero { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 82px 0 62px; }
.tags-hero h1 { margin-bottom: 30px; }
.tags-hero-copy { max-width: 570px; color: var(--muted); font-size: 19px; line-height: 1.5; }
.tags-search { margin: 34px 0 0; }
.tags-search .clip-search { border-color: #33332f; box-shadow: 0 16px 38px rgba(23,23,19,.12); }
.tags-search .clip-search button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tags-search .search-status { color: var(--muted); }
.tag-browser { padding: 22px max(24px, calc((100vw - 1180px) / 2)); background: var(--ink); color: white; }
.tag-directory-heading { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.tag-directory-heading strong { font: 600 17px/1.2 Manrope,sans-serif; }
.tag-directory-heading span { color: #85857d; font-size: 11px; }
.tag-directory { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.directory-tag { min-height: 46px; padding: 9px 11px; border: 1px solid #3d3d38; border-radius: 8px; color: #c8c7c0; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.directory-tag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-tag b { color: #77776f; font-weight: 500; font-size: 11px; }
.directory-tag:hover, .directory-tag.active { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.directory-tag.active b, .directory-tag:hover b { color: var(--ink); }
.tag-results { padding: 90px max(24px, calc((100vw - 1180px) / 2)); background: #20201d; color: white; }
.empty-state { padding: 60px 0; color: #929189; }
.detail-tags { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 7px; }
.detail-tags a { padding: 6px 9px; border: 1px solid #44443f; border-radius: 999px; color: #aaa9a1; font-size: 11px; }
.detail-stats { margin-top: 22px; display: flex; gap: 18px; color: #929189; font-size: 12px; }

.reels-body { width: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; background: #080808; color: white; }
.reels-body .brand-mark i { background: white; }
.reels-body .brand-mark i:last-child { background: var(--blue); }
.reels-header { position: fixed; z-index: 20; top: 0; left: 50%; width: min(100% - 32px, 1180px); height: 72px; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.reels-header > * { pointer-events: auto; }
.reels-header > span { color: rgba(255,255,255,.62); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.reels-close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(10,10,10,.3); backdrop-filter: blur(12px); font-size: 23px; font-weight: 300; }
.reels-feed { position: absolute; z-index: 2; top: 31.4%; left: 15.1%; width: 54.6%; height: 48.5%; margin: 0; overflow: hidden; border-radius: 13% / 10%; background: #050505; box-shadow: inset 0 0 45px #000; touch-action: pan-x; }
.reels-feed::-webkit-scrollbar { display: none; }
.reels-tv-cabinet { position: fixed; z-index: 1; top: 50%; left: 50%; width: min(94vw, 900px); aspect-ratio: 4 / 3; transform: translate(-50%,-54%); filter: drop-shadow(0 28px 34px rgba(0,0,0,.7)); }
.reels-tv-photo { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.reels-tv-cabinet::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -8%; height: 12%; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(16px); }
.reel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; isolation: isolate; visibility: hidden; opacity: 0; pointer-events: none; background: #080808; }
.reel.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #080808; filter: saturate(.9) contrast(1.04); }
.reel::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 29px / 22px; background: repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,rgba(0,0,0,.055) 2px,rgba(0,0,0,.055) 4px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.4) 100%); mix-blend-mode: screen; pointer-events: none; }
.reel-tv-static { position: absolute; z-index: 10; inset: 0; width: 100%; height: 100%; border-radius: 29px / 22px; opacity: 0; pointer-events: none; image-rendering: pixelated; filter: contrast(1.65) brightness(1.08); }
.reel.is-tuning .reel-tv-static { opacity: 1; animation: tv-static-flash .32s ease-out both; }
@keyframes tv-static-flash { 0% { opacity: 0; transform: scaleY(.02); } 14% { opacity: 1; transform: scaleY(1); } 78% { opacity: .94; } 100% { opacity: 0; } }
.reel-shade { display: none; }
.reel > .reel-info, .reel > .reel-actions { display: none; }
@media (prefers-reduced-motion: reduce) {
  .reels-play-mark, .reels-play-mark::after, .reels-play-mark i, .js-reel-like.active .reel-heart, .reel.is-tuning .reel-tv-static { animation: none; }
}
.reels-info-dock { position: fixed; z-index: 29; left: 50%; bottom: max(92px, calc(env(safe-area-inset-bottom) + 82px)); width: min(620px,calc(100% - 32px)); transform: translateX(-50%); pointer-events: none; }
.reel-info { padding: 8px 16px; text-align: center; pointer-events: auto; text-shadow: 0 2px 14px rgba(0,0,0,.9); }
.reel-kicker { margin-bottom: 10px; color: rgba(255,255,255,.63); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.reel-info h1 { max-width: 560px; margin: 0 auto 10px; display: -webkit-box; overflow: hidden; font-size: clamp(21px, 4vw, 30px); line-height: 1.08; letter-spacing: -.035em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.reel-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.reel-tags a { color: rgba(255,255,255,.72); font-size: 12px; }
.reel-stats { margin-top: 16px; display: flex; justify-content: center; gap: 16px; color: rgba(255,255,255,.64); font-size: 12px; }
.reels-action-dock { position: fixed; z-index: 30; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); max-width: calc(100% - 24px); transform: translateX(-50%); }
.reel-actions { width: max-content; max-width: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px; border: 1px solid rgba(215,255,57,.38); border-radius: 20px; background: rgba(13,13,11,.84); box-shadow: 0 14px 44px rgba(0,0,0,.48),0 0 0 1px rgba(0,0,0,.5); backdrop-filter: blur(18px); }
.reel-action { width: 64px; height: 56px; padding: 6px 4px 5px; border: 0; border-radius: 14px; background: transparent; color: white; display: grid; grid-template-rows: 22px 10px; place-items: center; align-content: center; gap: 5px; cursor: pointer; font: 500 12px/1 "DM Sans", sans-serif; transition: background .18s ease, color .18s ease; }
.reel-action:hover { background: rgba(255,255,255,.1); }
.reel-action small { position: static; height: 10px; color: rgba(255,255,255,.68); font-size: 8px; line-height: 10px; letter-spacing: .01em; }
.reel-action-icon { width: 21px; height: 21px; overflow: visible; align-self: center; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reel-action-icon circle { fill: currentColor; stroke: none; }
.reel-action.active { background: rgba(223,255,85,.11); color: var(--lime); }
.reel-action.active small { color: var(--lime); }
.reel-heart { width: 22px; height: 22px; display: grid; place-items: center; font-family: Arial, sans-serif; font-size: 24px; line-height: 22px; color: white; transform-origin: center; transition: color .16s ease, filter .2s ease, transform .2s ease; }
.js-reel-like.active .reel-heart { color: var(--lime); filter: drop-shadow(0 0 7px rgba(215,255,57,.72)); animation: reel-heart-fill .42s cubic-bezier(.2,1.55,.45,1); }
@keyframes reel-heart-fill {
  0% { transform: scale(.72); color: white; filter: drop-shadow(0 0 0 rgba(215,255,57,0)); }
  55% { transform: scale(1.3) rotate(-7deg); color: var(--lime); filter: drop-shadow(0 0 12px rgba(215,255,57,.9)); }
  100% { transform: scale(1); color: var(--lime); filter: drop-shadow(0 0 7px rgba(215,255,57,.72)); }
}

footer { width: min(1180px, calc(100% - 48px)); margin: auto; min-height: 150px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
footer > div { display: flex; align-items: center; gap: 16px; }
footer p { margin: 0; }
.footer-links { display: flex; align-items: center; gap: 18px; }
.footer-links a:hover { color: var(--ink); }
.footer-mark { color: var(--ink); font: 700 25px/1 Manrope, sans-serif; }
.changelog-page { width: min(100% - 48px, 1040px); margin: 0 auto; padding: 92px 0 120px; }
.changelog-hero { max-width: 760px; }
.changelog-hero h1 { margin: 14px 0 24px; font-size: clamp(58px,9vw,116px); line-height: .83; letter-spacing: -.075em; }
.changelog-hero h1 em { color: var(--blue); font-style: normal; }
.changelog-hero > p:last-child { max-width: 590px; color: var(--muted); font-size: clamp(17px,2vw,22px); line-height: 1.55; }
.changelog-feed { display: grid; gap: 32px; margin-top: 72px; }
.changelog-entry { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: clamp(28px,6vw,76px); padding: clamp(30px,5vw,64px); border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: 0 24px 70px rgba(20,20,18,.08); }
.changelog-entry-ios { border-color: rgba(215,255,57,.7); background: radial-gradient(circle at 100% 0,rgba(215,255,57,.24),transparent 44%),#fff; }
.changelog-entry-lara { border-color: rgba(56,105,247,.35); background: radial-gradient(circle at 100% 0,rgba(56,105,247,.12),transparent 42%),#fff; }
.changelog-entry-meta { display: flex; flex-direction: column; gap: 12px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.changelog-entry-meta span { align-self: flex-start; padding: 7px 9px; border-radius: 7px; background: var(--lime); color: var(--ink); }
.changelog-entry h2 { max-width: 650px; margin: 13px 0 20px; font-size: clamp(37px,5vw,66px); line-height: .95; letter-spacing: -.055em; }
.changelog-entry p,.changelog-entry li { color: var(--muted); line-height: 1.65; }
.changelog-entry li strong { color: var(--ink); }
.changelog-entry a { color: var(--blue); font-weight: 750; }
.changelog-entry ul { margin: 26px 0 0; padding-left: 20px; }
.toast { position: fixed; z-index: 10; bottom: 24px; left: 50%; padding: 11px 15px; border-radius: 8px; background: var(--ink); color: white; font-size: 13px; opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: .2s ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

.clip-body { min-height: 100vh; background: #171713; color: white; }
.clip-header { border-color: #373732; }
.clip-body .brand-mark i { background: white; }
.clip-body .brand-mark i:last-child { background: var(--blue); }
.back-link { color: #aaa9a1; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.back-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.back-link:hover { color: white; }
.clip-discovery-search { width: min(1180px,calc(100% - 48px)); margin: 30px auto 0; padding: 13px 14px 13px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #383833; border-radius: 14px; background: #20201d; }
.clip-discovery-search > div { min-width: 0; display: grid; gap: 5px; }
.clip-discovery-search span { color: var(--blue); font: 700 8px/1 Manrope,sans-serif; letter-spacing: .12em; }
.clip-discovery-search strong { overflow: hidden; color: #d8d7d0; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.2 Manrope,sans-serif; }
.clip-discovery-search button,.related-clips-heading button { min-height: 42px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 999px; background: var(--lime); color: var(--ink); cursor: pointer; font: 700 12px/1 "DM Sans",sans-serif; white-space: nowrap; }
.clip-discovery-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.clip-page { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 32px 0 76px; display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(330px, .58fr); gap: 58px; align-items: start; }
.clip-media-column { min-width: 0; }
.clip-details { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.clip-player-shell { position: relative; overflow: hidden; border-radius: 14px; background: #080808; box-shadow: 0 32px 90px rgba(0,0,0,.32); }
.clip-player-shell video { width: 100%; max-height: 72vh; display: block; background: #080808; }
.source-badge { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 7px 9px; border-radius: 6px; background: rgba(20,20,18,.76); color: white; backdrop-filter: blur(8px); font: 600 11px/1 Manrope, sans-serif; letter-spacing: .02em; }
.clip-transcript { margin-top: 18px; padding: 18px 20px; border: 1px solid #383833; border-radius: 12px; background: #20201d; }
.clip-transcript h2 { margin: 0 0 9px; color: #77776e; font: 700 10px/1 Manrope,sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.clip-transcript p { margin: 0; color: #e4e3dc; font-size: 15px; line-height: 1.58; white-space: normal; }
.related-clips { padding: 68px max(24px,calc((100vw - 1180px) / 2)) 90px; border-top: 1px solid #30302c; background: #20201d; }
.related-clips-heading { margin-bottom: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.related-clips-heading .section-kicker { margin-bottom: 8px; color: #77776e; }
.related-clips-heading h2 { margin: 0; color: white; font: 600 clamp(30px,4vw,48px)/1 Manrope,sans-serif; letter-spacing: -.045em; }
.clip-details .section-kicker { color: #929189; }
.clip-details h1 { max-width: 520px; margin: 12px 0 14px; font-size: clamp(28px, 3vw, 44px); line-height: 1.06; letter-spacing: -.045em; }
.clip-details > p:not(.section-kicker):not(.origin-note) { max-width: 520px; color: #aaa9a1; font-size: 14px; line-height: 1.5; }
.share-panel { min-width: 0; max-width: 100%; margin-top: 32px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 9px; }
.share-panel button svg,.share-panel a svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.clip-body .primary-button { border: 0; background: var(--lime); color: var(--ink); cursor: pointer; font: 500 14px/1 "DM Sans", sans-serif; }
.social-link { min-height: 44px; padding: 0 16px; border: 1px solid #44443f; border-radius: 999px; background: transparent; color: #dddcd5; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font: 500 13px/1 "DM Sans", sans-serif; }
.share-panel .primary-button { grid-column: 1 / -1; min-height: 50px; }
.copy-video-link { color: #8d8d84; border-color: #343430; }
.copy-video-link:hover { color: #dddcd5; border-color: #77776e; }
.social-link:hover { border-color: #77776e; }
.social-link.active { border-color: var(--lime); background: rgba(223,255,85,.1); color: var(--lime); }
.heart-icon { width: 19px; height: 19px; display: inline-grid; place-items: center; flex: 0 0 auto; }
.heart-icon svg { width: 18px; height: 18px; fill: transparent; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.active .heart-icon svg { fill: currentColor; }
.clip-play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.origin-note { margin: 25px 0 0; color: #77776e; font-size: 12px; }
.origin-note a { color: #aaa9a1; }
.creator-byline { margin: 20px 0 10px; color: #aaa9a1; }
.report-box { min-width: 0; max-width: 100%; margin-top: 22px; color: #aaa9a1; font-size: 13px; }
.report-box summary { cursor: pointer; }
.report-box form { min-width: 0; max-width: 100%; margin-top: 10px; display: grid; gap: 8px; }
.report-box textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 90px; padding: 12px; border: 1px solid #44443f; border-radius: 10px; background: #20201d; color: white; resize: vertical; }
.report-box button { width: max-content; max-width: 100%; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--lime); cursor: pointer; }

.account-page { width: min(1100px, calc(100% - 48px)); margin: auto; padding: 70px 0 110px; }
.account-page.narrow { max-width: 760px; }
.account-hero { max-width: 820px; margin-bottom: 60px; }
.account-hero h1 { font-size: clamp(54px, 8vw, 98px); }
.account-hero > p:not(.section-kicker) { max-width: 640px; color: var(--muted); font-size: 18px; line-height: 1.55; }
.auth-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.google-button, .apple-button { width: max-content; padding: 13px 20px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 999px; background: white; box-shadow: 0 8px 28px rgba(0,0,0,.07); }
.google-button b { color: var(--blue); font-size: 18px; }
.apple-button { border-color: #000; background: #000; color: #fff; }
.apple-button span { font-size: 20px; line-height: 1; }
.auth-legal { max-width: 460px !important; margin-top: 16px; font-size: 12px !important; }
.auth-legal a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.legal-page { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 72px 0 110px; }
.legal-hero { padding-bottom: 68px; border-bottom: 1px solid var(--line); }
.legal-hero h1 { margin-bottom: 25px; font-size: clamp(58px, 8vw, 104px); }
.legal-hero > p:last-child { color: var(--muted); font-size: 13px; }
.legal-layout { padding-top: 55px; display: grid; grid-template-columns: 250px minmax(0, 720px); justify-content: space-between; gap: 70px; }
.legal-layout aside { height: max-content; position: sticky; top: 30px; padding: 20px; border-radius: 13px; background: var(--lime); }
.legal-layout aside strong { font: 600 18px Manrope, sans-serif; }
.legal-layout aside p { margin: 10px 0 0; font-size: 13px; line-height: 1.55; }
.legal-copy section { padding: 0 0 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.legal-copy section:last-child { border: 0; }
.legal-copy h2 { margin-bottom: 16px; font: 600 29px/1.15 Manrope, sans-serif; letter-spacing: -.035em; }
.legal-copy h3 { margin: 24px 0 8px; font: 600 17px/1.3 Manrope, sans-serif; }
.legal-copy p, .legal-copy li { color: #4f4f48; font-size: 16px; line-height: 1.72; }
.legal-copy p { margin-bottom: 14px; }
.legal-copy ul { padding-left: 22px; }
.legal-copy li { margin-bottom: 8px; }
.legal-copy a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.legal-copy code { padding: 2px 5px; border-radius: 4px; background: #e9e7df; font-size: .88em; }
.leaderboard { display: grid; gap: 10px; }
.leaderboard article { min-height: 104px; padding: 18px 22px; display: grid; grid-template-columns: 40px 56px 1fr auto; align-items: center; gap: 16px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.leaderboard article.podium { border-color: #cbd7f7; box-shadow: 0 14px 38px rgba(56,105,247,.08); }
.leaderboard article.podium-1 { border-color: #bddc58; background: linear-gradient(110deg,#fbffe9,#fff 58%); }
.leader-position { color: var(--blue); font-size: 20px; }
.creator-avatar { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--lime); font: 700 19px Manrope, sans-serif; }
.creator-avatar img { width: 100%; height: 100%; object-fit: cover; }
.creator-avatar.large { width: 88px; height: 88px; font-size: 30px; }
.leaderboard h2, .leaderboard p { margin: 0; }
.leaderboard h2 { font-size: 18px; }
.leaderboard p { margin-top: 4px; color: var(--muted); font-size: 13px; }
.leaderboard article > strong { color: var(--blue); text-align: right; font-size: 20px; }
.leaderboard small { margin-top: 4px; display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.leaderboard-hero { position: relative; }
.reward-rule { width: max-content; margin-top: 24px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; border-radius: 999px; background: var(--ink); color: white; }
.reward-rule b { color: var(--lime); font: 700 18px/1 Manrope,sans-serif; }
.reward-rule span { color: #aaa9a1; font-size: 12px; }
.leader-xp-track { width: min(260px,100%); height: 4px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #e9e8e2; }
.leader-xp-track i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--lime)); }
.leaderboard-footnote { margin: 18px 4px 0; color: var(--muted); font-size: 11px; }
.profile-summary { padding-bottom: 40px; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--line); }
.profile-summary h1 { margin: 4px 0; font-size: clamp(38px, 6vw, 68px); }
.profile-summary p { margin-bottom: 0; color: var(--muted); }
.profile-summary form { margin-left: auto; }
.text-button { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; }
.community-columns { padding: 45px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.community-panel { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.community-panel h2, .my-clips h2, .admin-section h2 { font: 600 28px Manrope, sans-serif; letter-spacing: -.04em; }
.community-panel > p { color: var(--muted); line-height: 1.5; }
.limit-warning { padding: 12px; border-left: 3px solid var(--blue); background: #f1f4ff; }
.stack-form { display: grid; gap: 14px; }
.stack-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.stack-form input, .stack-form textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: inherit; }
.stack-form textarea { min-height: 90px; resize: vertical; }
.stack-form .primary-button { border: 0; cursor: pointer; }
.stack-form .avatar-picker { padding: 12px; grid-template-columns: 52px 1fr; align-items: center; gap: 12px; border: 1px dashed #b9b6ac; border-radius: 12px; background: var(--paper); cursor: pointer; }
.avatar-picker > span:nth-child(2) { display: grid; gap: 4px; color: var(--ink); }
.avatar-picker strong { font-size: 14px; }
.avatar-picker small { color: var(--muted); font-size: 11px; font-weight: 400; }
.stack-form .avatar-picker input { grid-column: 1 / -1; padding: 8px; background: white; cursor: pointer; }
.panel-subtitle { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.my-clips { padding-top: 30px; }
.my-clips .clip-grid { margin-top: 25px; }
.my-clips .clip-card { color: var(--ink); }
.account-notice { margin: 0 0 24px; padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 6px 12px; border: 1px solid #cad3e8; border-radius: 14px; background: #f2f6ff; }
.account-notice b { color: var(--blue); }
.account-notice span { color: var(--muted); }
.account-notice.success { border-color: #c8df91; background: #f6ffe2; }
.account-notice.review { border-color: #b9cbff; background: #eef3ff; }
.publish-choice { padding: 14px; display: grid !important; grid-template-columns: auto 1fr; align-items: start; gap: 12px; border: 1px solid #ccd7f5; border-radius: 12px; background: #f3f6ff; }
.publish-choice input { width: 19px !important; height: 19px; margin: 2px 0 0; }
.publish-choice span { display: grid; gap: 4px; }
.publish-choice small { color: var(--muted); line-height: 1.4; }
.my-clips-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.my-clips-heading .section-kicker { margin-bottom: 7px; }
.my-clips-heading > p { max-width: 430px; color: var(--muted); line-height: 1.5; }
.owned-clip-grid { margin-top: 25px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.owned-clip { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; }
.owned-clip .clip-card { border: 0; border-radius: 0; box-shadow: none; }
.owned-status { min-height: 75px; padding: 13px 15px; display: grid; gap: 4px; border-top: 1px solid var(--line); background: #f4f4f0; }
.owned-status b { font: 700 11px/1.2 Manrope,sans-serif; letter-spacing: .03em; text-transform: uppercase; }
.owned-status span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.owned-status.status-pending { background: #eff3ff; }
.owned-status.status-pending b { color: var(--blue); }
.owned-status.status-visible { background: #f4ffda; }
.owned-status.status-visible b { color: #536800; }
.owned-status.status-rejected { background: #fff1ee; }
.owned-status.status-rejected b { color: #a33d2d; }
.owned-actions { padding: 11px; display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--line); }
.owned-actions form { margin: 0; }
.owned-actions button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; font: 600 10px/1 Manrope,sans-serif; }
.owned-actions .publish-button { border-color: var(--blue); background: var(--blue); color: white; }
.owned-actions .danger { color: #a33d2d; }
.owner-visibility { color: var(--blue); font: 700 9px/1 Manrope,sans-serif; letter-spacing: .08em; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.creator-dashboard-body { background: #f2f1eb; }
.creator-dashboard { width: min(1240px, calc(100% - 48px)); }
.creator-dashboard-header { padding-bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.creator-identity { display: flex; align-items: center; gap: 20px; }
.creator-identity h1 { margin: 3px 0 4px; font: 600 clamp(40px,5vw,64px)/1 Manrope,sans-serif; letter-spacing: -.055em; }
.creator-identity p:last-child { margin: 0; color: var(--muted); }
.dashboard-header-actions { display: flex; align-items: center; gap: 8px; }
.dashboard-settings-link,.dashboard-admin-link { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: 13px; font-weight: 700; }
.dashboard-admin-link { border-color: var(--ink); background: var(--ink); color: var(--lime); }
.dashboard-settings-link:hover { border-color: var(--blue); color: var(--blue); }
.dashboard-admin-link:hover { background: var(--blue); color: white; }
.creator-stat-strip { margin-bottom: 38px; padding: 8px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 18px; background: #171713; color: white; box-shadow: 0 22px 55px rgba(31,31,27,.12); }
.creator-stat-strip article { min-height: 92px; padding: 16px 20px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #363631; }
.creator-stat-strip article:last-child { border-right: 0; }
.creator-stat-strip span { color: #8f8f88; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.creator-stat-strip strong { color: var(--lime); font: 600 31px/1 Manrope,sans-serif; }
.creator-game-card { margin: -10px 0 28px; padding: 22px 24px; display: grid; grid-template-columns: .75fr 1.8fr .72fr; align-items: center; gap: 28px; border-radius: 20px; background: linear-gradient(118deg,#171713,#23231f); color: white; box-shadow: 0 22px 55px rgba(31,31,27,.16); }
.game-level, .game-reward { display: grid; gap: 5px; }
.game-level > span, .game-reward > span { color: var(--lime); font: 700 9px/1 Manrope,sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.game-level strong { font: 600 21px/1.15 Manrope,sans-serif; }
.game-level small, .game-reward small { color: #929189; font-size: 10px; }
.game-progress > div:first-child { margin-bottom: 8px; display: flex; justify-content: space-between; color: #adada5; font: 600 10px/1 Manrope,sans-serif; }
.xp-track { height: 10px; padding: 2px; overflow: hidden; border-radius: 99px; background: #383833; }
.xp-track i { height: 100%; min-width: 4px; display: block; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--lime)); box-shadow: 0 0 16px rgba(215,255,57,.28); }
.game-progress p { margin: 9px 0 0; color: #929189; font-size: 10px; }
.game-progress p b { color: white; }
.game-reward { padding-left: 24px; border-left: 1px solid #3d3d38; }
.game-reward > b { color: var(--lime); font: 700 30px/1 Manrope,sans-serif; }
.reward-notice { animation: reward-pop .45s ease-out both; }
@keyframes reward-pop { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }
.meme-manager { padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: 0 20px 55px rgba(31,31,27,.07); }
.meme-manager-heading { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.meme-manager-heading h2 { margin: 5px 0 0; font: 600 30px/1.1 Manrope,sans-serif; letter-spacing: -.04em; }
.meme-manager-heading .primary-button { border: 0; }
.meme-table-shell { overflow-x: auto; }
.meme-table { width: 100%; border-collapse: collapse; }
.meme-table th { padding: 11px 13px; color: #898980; border-bottom: 1px solid var(--line); text-align: left; font: 700 9px/1 Manrope,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.meme-table td { padding: 13px; border-bottom: 1px solid #ecebe5; vertical-align: middle; }
.meme-table tbody tr { transition: background .16s ease; }
.meme-table tbody tr:hover { background: #fafaf6; }
.meme-cell { min-width: 270px; }
.meme-cell-content { display: flex; align-items: center; gap: 13px; }
.meme-table-preview { width: 88px; height: 56px; flex: 0 0 auto; position: relative; overflow: hidden; display: grid; place-items: center; border-radius: 9px; background: #171713; color: white; }
.meme-table-preview img { width: 100%; height: 100%; object-fit: cover; }
.meme-table-preview i { position: absolute; right: 5px; bottom: 4px; padding: 3px 4px; border-radius: 4px; background: rgba(0,0,0,.7); color: white; font: 700 8px/1 Manrope,sans-serif; font-style: normal; }
.meme-cell-content > div { min-width: 0; display: grid; gap: 5px; }
.meme-cell strong { max-width: 220px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px/1.25 Manrope,sans-serif; }
.meme-cell small { max-width: 220px; overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap; }
.meme-rating { display: grid; gap: 2px; }
.meme-rating b { color: var(--blue); font: 700 16px/1 Manrope,sans-serif; }
.meme-rating small, .moderation-note { color: var(--muted); font-size: 9px; }
.metric-value { font: 600 14px/1 Manrope,sans-serif; }
.status-pill { width: max-content; padding: 6px 8px; display: inline-flex; border-radius: 999px; background: #ecece7; color: #66665f; font: 700 9px/1 Manrope,sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.status-pill.status-visible { background: #e8fbb7; color: #4f6300; }
.status-pill.status-pending { background: #e8efff; color: #2854c7; }
.status-pill.status-rejected { background: #ffebe7; color: #a63a2a; }
.moderation-note { max-width: 150px; margin-top: 5px; display: block; line-height: 1.35; }
.meme-row-actions { width: 50px; text-align: right; }
.meme-row-actions details { position: relative; }
.meme-row-actions summary { width: 34px; height: 34px; margin-left: auto; display: grid; place-items: center; list-style: none; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; font-weight: 700; letter-spacing: 1px; }
.meme-row-actions summary::-webkit-details-marker { display: none; }
.meme-row-actions details > div { position: absolute; z-index: 20; top: 40px; right: 0; width: 185px; padding: 7px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 18px 45px rgba(20,20,18,.16); }
.meme-row-actions a, .meme-row-actions button { width: 100%; min-height: 35px; padding: 8px 9px; display: block; border: 0; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 500 11px/1.2 "DM Sans",sans-serif; }
.meme-row-actions a:hover, .meme-row-actions button:hover { background: var(--paper); }
.meme-row-actions form { margin: 0; }
.meme-row-actions .danger { color: #b12e21; }
.meme-table-empty { padding: 55px !important; text-align: center; }
.meme-table-empty strong, .meme-table-empty span { display: block; }
.meme-table-empty span { margin-top: 6px; color: var(--muted); }
.rating-explainer { margin: 15px 0 0; color: var(--muted); font-size: 10px; }
.upload-workspace { margin-top: 28px; padding: 34px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 55px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.upload-workspace h2 { margin: 8px 0 12px; font: 600 30px/1.1 Manrope,sans-serif; letter-spacing: -.04em; }
.upload-workspace > div > p:last-child { color: var(--muted); line-height: 1.55; }
.upload-quest { margin-top: 24px; padding: 16px; display: grid; gap: 5px; border-radius: 14px; background: #171713; color: white; }
.upload-quest span { color: var(--lime); font: 700 9px/1 Manrope,sans-serif; letter-spacing: .1em; }
.upload-quest strong { font: 600 16px/1.2 Manrope,sans-serif; }
.upload-quest strong i { font-style: normal; }
.upload-quest small { color: #929189; font-size: 10px; }
.upload-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.upload-dropzone { padding: 17px !important; border: 1px dashed #9fa8bd; border-radius: 12px; background: #f4f7ff; color: var(--blue) !important; }
.upload-dropzone > b { width: max-content; padding: 5px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font-size: 10px; }
.upload-dropzone input { margin-top: 4px; background: white; }
.upload-dropzone small { display: block; margin-top: 8px; color: #68708a; font-size: 11px; line-height: 1.4; }
.upload-source-options { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.upload-source-options > span { align-self: center; color: #929189; font: 700 9px/1 Manrope,sans-serif; letter-spacing: .1em; }
.youtube-url-field { padding: 17px !important; border: 1px solid #d6d3ca; border-radius: 12px; background: #faf9f6; }
.youtube-url-field input { margin-top: 10px; }
.youtube-url-field small,.upload-processing-note { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.upload-processing-note { margin: 0; }
.upload-error { border-color: rgba(215,59,59,.35); background: rgba(215,59,59,.08); }
.upload-form :disabled { cursor: not-allowed; opacity: .55; }
.settings-page { max-width: 1000px; }
.settings-header { margin-bottom: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.settings-header h1 { margin: 4px 0 8px; font: 600 clamp(48px,7vw,76px)/1 Manrope,sans-serif; letter-spacing: -.055em; }
.settings-header p:last-child { margin: 0; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.settings-card { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.settings-language-card { grid-column: 1 / -1; padding-block: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.settings-language-card .settings-card-heading { margin: 0; align-items: center; }
.settings-language-card .language-switcher { grid-template-columns: repeat(2,48px); }
.settings-language-card .language-switcher button { width: 48px; height: 36px; }
.settings-icon.language { background: var(--ink); color: var(--lime); font-size: 13px; }
.settings-card-heading { margin-bottom: 25px; display: flex; gap: 13px; align-items: flex-start; }
.settings-card-heading h2, .settings-danger h2 { margin: 0 0 5px; font: 600 24px/1.15 Manrope,sans-serif; letter-spacing: -.035em; }
.settings-card-heading p, .settings-danger p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.settings-icon { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--lime); font-weight: 700; }
.settings-icon.blue { background: #e4ebff; color: var(--blue); }
.settings-danger { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 30px; border-color: #e5c5c0; }
.settings-danger .stack-form { grid-template-columns: 1fr auto; align-items: end; }
.settings-danger > a { margin: 0 0 14px; white-space: nowrap; }
.owner-view-label { margin-bottom: 20px; display: flex; align-items: center; gap: 9px; }
.owner-view-label small { color: #77776e; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.clip-details .detail-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.clip-details .detail-stats > span { padding: 12px; display: grid; gap: 5px; border: 1px solid #383833; border-radius: 10px; }
.clip-details .detail-stats small { color: #77776e; font-size: 9px; text-transform: uppercase; }
.clip-details .detail-stats b { color: white; font: 600 18px/1 Manrope,sans-serif; }
.owner-clip-panel { margin-top: 18px; padding: 17px; border: 1px solid #3b3b36; border-radius: 13px; background: #20201d; }
.owner-clip-panel strong { font: 600 14px/1.25 Manrope,sans-serif; }
.owner-clip-panel p { margin: 6px 0 0; color: #929189; font-size: 11px; line-height: 1.45; }
.owner-clip-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.owner-clip-actions form { margin: 0; }
.owner-clip-actions button { min-height: 40px; }
.owner-clip-actions .danger { color: #ff8f80; }

.admin-body { background: #171713; color: white; }
.admin-body .brand-mark i { background: white; }
.admin-mobile-header { display: none; }
.admin-shell { width: min(1540px,100%); min-height: 100vh; margin: auto; padding: 18px; display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 18px; }
.admin-sidebar { position: sticky; top: 18px; height: calc(100vh - 36px); padding: 18px 12px 12px; display: flex; flex-direction: column; border: 1px solid #353531; border-radius: 18px; background: #20201d; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.admin-mobile-section-select { display: none; }
.admin-sidebar-heading { padding: 4px 8px 22px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #343430; }
.admin-sidebar-heading > div { display: grid; gap: 3px; }
.admin-sidebar-heading b { font: 800 12px/1 Manrope,sans-serif; letter-spacing: .08em; }
.admin-sidebar-heading small { color: #73736c; font: 800 8px/1 Manrope,sans-serif; letter-spacing: .16em; }
.admin-sidebar-mark { width: 32px; height: 32px; padding: 6px; display: flex; align-items: flex-end; gap: 4px; border-radius: 9px; background: var(--lime); transform: rotate(-4deg); }
.admin-sidebar-mark i { width: 8px; display: block; background: #171713; }
.admin-sidebar-mark i:first-child { height: 12px; }
.admin-sidebar-mark i:last-child { height: 20px; }
.admin-sidebar nav { margin-top: 15px; display: grid; gap: 4px; }
.admin-sidebar nav a,.admin-sidebar-site,.admin-sidebar-footer button { min-width: 0; padding: 10px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 0; border-radius: 10px; color: #a7a79f; background: transparent; text-align: left; cursor: pointer; }
.admin-sidebar nav a > span,.admin-sidebar-site > span,.admin-sidebar-footer button > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #3d3d38; border-radius: 8px; color: #9a9a92; font: 800 12px/1 Manrope,sans-serif; }
.admin-sidebar nav a div,.admin-sidebar-site div,.admin-sidebar-footer button div { min-width: 0; display: grid; gap: 3px; }
.admin-sidebar nav a b,.admin-sidebar-site b,.admin-sidebar-footer button b { overflow: hidden; color: #d2d2ca; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar nav a small,.admin-sidebar-site small,.admin-sidebar-footer button small { overflow: hidden; color: #696961; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.admin-sidebar nav a em { min-width: 23px; padding: 5px 6px; border-radius: 999px; background: #30302c; color: #8d8d85; font: 800 8px/1 Manrope,sans-serif; text-align: center; }
.admin-sidebar nav a em.is-alert { background: #ff8b7b; color: #171713; }
.admin-sidebar nav a:hover,.admin-sidebar nav a.is-active { background: #30302b; color: white; }
.admin-sidebar nav a.is-active > span { border-color: var(--lime); background: var(--lime); color: #171713; }
.admin-sidebar nav a.is-active b { color: white; }
.admin-sidebar-footer { margin-top: auto; padding-top: 12px; display: grid; gap: 3px; border-top: 1px solid #343430; }
.admin-sidebar-footer form { margin: 0; }
.admin-sidebar-footer button { width: 100%; font: inherit; }
.admin-sidebar-site:hover,.admin-sidebar-footer button:hover { background: #292925; }
.admin-shell .admin-page { width: auto; min-width: 0; margin: 0; padding: 22px 20px 72px; }
.admin-page-heading { margin-bottom: 26px; padding-bottom: 21px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 1px solid #343430; }
.admin-page-heading p { margin: 0 0 7px; }
.admin-page-heading h1 { margin: 0; font: 600 clamp(38px,4vw,58px)/.95 Manrope,sans-serif; letter-spacing: -.055em; }
.admin-viewer { display: flex; align-items: center; gap: 9px; }
.admin-viewer > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: #171713; font-weight: 800; }
.admin-viewer div { display: grid; gap: 2px; }
.admin-viewer b { font-size: 11px; }
.admin-viewer small { color: #73736c; font-size: 8px; text-transform: uppercase; }
.admin-login { width: min(430px, calc(100% - 32px)); margin: 12vh auto; padding: 30px; border: 1px solid #3a3a35; border-radius: 18px; background: #20201d; }
.admin-login h1 { margin: 50px 0 30px; font-size: 42px; }
.admin-login .stack-form input { background: #171713; border-color: #44443f; color: white; }
.form-error { color: #ff8b7b; }
.admin-page { width: min(1320px, calc(100% - 48px)); margin: auto; padding: 32px 0 72px; }
.admin-section-nav { position: sticky; top: 8px; z-index: 20; width: max-content; max-width: 100%; margin: 0 0 12px; padding: 5px; display: flex; gap: 4px; overflow-x: auto; border: 1px solid #3a3a35; border-radius: 12px; background: rgba(23,23,19,.92); backdrop-filter: blur(14px); }
.admin-section-nav a { padding: 8px 12px; border-radius: 8px; color: #aaa9a1; font-size: 11px; font-weight: 800; white-space: nowrap; }
.admin-section-nav a:hover,.admin-section-nav a:focus { background: #30302b; color: white; }
.admin-section-nav b { margin-left: 4px; color: var(--lime); }
.admin-section-anchor { scroll-margin-top: 70px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.admin-stats article,.admin-stats > a { min-width: 0; padding: 18px; display: grid; gap: 4px; border: 1px solid transparent; border-radius: 13px; background: #292925; }
.admin-stats > a:hover { border-color: rgba(215,255,57,.34); background: #30302b; transform: translateY(-2px); }
.admin-stats b { display: block; color: var(--lime); font: 600 30px Manrope, sans-serif; }
.admin-stats span { color: #d2d2ca; font-size: 12px; font-weight: 700; }
.admin-stats small { margin-top: 7px; overflow: hidden; color: #77776e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-period-filter { width: max-content; max-width: 100%; margin: 0 0 10px; padding: 4px; display: flex; gap: 4px; border: 1px solid #3a3a35; border-radius: 10px; background: #20201d; }
.admin-period-filter a { padding: 7px 11px; border-radius: 7px; color: #8c8c84; font-size: 10px; font-weight: 700; }
.admin-period-filter a:hover,.admin-period-filter a.is-active { background: #343430; color: white; }
.admin-period-filter a.is-active { box-shadow: inset 0 0 0 1px rgba(215,255,57,.22); }
.admin-analytics-kpis { grid-template-columns: repeat(5,minmax(0,1fr)); }
.admin-funnel { margin-top: 15px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.admin-funnel article { min-width: 0; padding: 14px; display: grid; gap: 10px; border: 1px solid #3a3a35; border-radius: 11px; background: #20201d; }
.admin-funnel article > div { display: grid; grid-template-columns: 19px minmax(0,1fr); gap: 3px 8px; align-items: center; }
.admin-funnel article span { grid-row: span 2; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 6px; background: var(--lime); color: #171713; font-size: 9px; font-weight: 900; }
.admin-funnel article b { overflow: hidden; color: #d8d8d1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-funnel article small { color: #77776e; font-size: 8px; }
.admin-funnel article strong { color: var(--lime); font: 700 27px/1 Manrope,sans-serif; }
.admin-funnel article > i { height: 5px; overflow: hidden; border-radius: 99px; background: #343430; }
.admin-funnel article > i em { height: 100%; display: block; border-radius: inherit; background: var(--lime); }
.admin-activity-summary { margin-top: 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.admin-activity-summary article { padding: 14px 16px; display: flex; align-items: baseline; gap: 9px; border-radius: 11px; background: #292925; }
.admin-activity-summary b { color: var(--lime); font: 700 25px/1 Manrope,sans-serif; }
.admin-activity-summary span { color: #aaa9a1; font-size: 11px; }
.admin-activity-summary small { color: #73736c; font-size: 9px; }
.admin-installation-chart { margin-top: 8px; padding: 16px; border: 1px solid #3a3a35; border-radius: 11px; background: #20201d; }
.admin-installation-chart > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.admin-installation-chart h3 { margin: 0; font-size: 13px; }
.admin-installation-chart p { margin: 0; color: #77776e; font-size: 10px; }
.admin-installation-chart p b { color: var(--lime); font-size: 13px; }
.admin-chart-legend { margin-top: 12px; display: flex; gap: 13px; color: #aaa9a1; font-size: 9px; }
.admin-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.admin-chart-legend i { width: 7px; height: 7px; border-radius: 2px; background: var(--lime); }
.admin-chart-legend span + span i { background: #7cb8ff; }
.admin-installation-bars { height: 190px; margin-top: 18px; display: grid; grid-template-columns: repeat(30,minmax(5px,1fr)); gap: clamp(2px,.5vw,7px); align-items: stretch; }
.admin-installation-day { min-width: 0; display: grid; grid-template-rows: 15px 1fr 15px; gap: 4px; text-align: center; }
.admin-installation-day > b { min-height: 15px; color: #d8d8d1; font-size: 8px; }
.admin-installation-day > span { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; align-items: end; overflow: hidden; border-bottom: 1px solid #44443f; border-radius: 4px 4px 0 0; background: linear-gradient(to top,rgba(255,255,255,.025),transparent); }
.admin-installation-day i { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(to top,#aacf1c,var(--lime)); box-shadow: 0 0 12px rgba(215,255,57,.2); }
.admin-installation-day em { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(to top,#4385d6,#7cb8ff); box-shadow: 0 0 12px rgba(124,184,255,.16); }
.admin-installation-day time { overflow: hidden; color: #66665f; font-size: 7px; }
.admin-web-activity .admin-activity-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
.admin-audience-filter { width: max-content; max-width: 100%; margin-top: 14px; padding: 4px; display: flex; gap: 4px; border: 1px solid #3a3a35; border-radius: 10px; background: #20201d; }
.admin-audience-filter a { padding: 7px 11px; border-radius: 7px; color: #8c8c84; font-size: 10px; font-weight: 700; }
.admin-audience-filter a:hover,.admin-audience-filter a.is-active { background: #343430; color: white; }
.admin-audience-filter a.is-active { box-shadow: inset 0 0 0 1px rgba(215,255,57,.22); }
.admin-audience-filter b { margin-left: 5px; color: var(--lime); }
.admin-analytics-note { margin: 12px 0 0; color: #66665f; font-size: 9px; line-height: 1.5; }
.admin-geo-grid { margin-top: 8px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(250px,.55fr); gap: 8px; }
.admin-country-map-panel,.admin-device-breakdown { min-width: 0; padding: 16px; border: 1px solid #3a3a35; border-radius: 11px; background: #20201d; }
.admin-country-map-panel h3,.admin-device-breakdown h3 { margin: 0; font-size: 13px; }
.admin-country-map-panel p,.admin-device-breakdown p { margin: 4px 0 0; color: #77776e; font-size: 9px; line-height: 1.45; }
#web-country-map { width: 100%; min-height: 230px; display: block; margin-top: 12px; }
#web-country-map-status { text-align: center; }
.admin-country-list { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-country-list span { padding: 6px 8px; display: flex; gap: 6px; border-radius: 7px; background: #292925; color: #8c8c84; font-size: 9px; }
.admin-country-list b { color: var(--lime); }
.admin-device-breakdown article { padding: 9px 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; border-top: 1px solid #343430; }
.admin-device-breakdown article:first-of-type { margin-top: 10px; }
.admin-device-breakdown article div { min-width: 0; display: grid; gap: 3px; }
.admin-device-breakdown article b { color: #d8d8d1; font-size: 11px; text-transform: capitalize; }
.admin-device-breakdown article span { overflow: hidden; color: #77776e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-device-breakdown article strong { color: var(--lime); font-size: 12px; }
.admin-activity-grid { margin-top: 8px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 8px; }
.admin-activity-grid > div { min-width: 0; padding: 14px 16px; border: 1px solid #3a3a35; border-radius: 11px; background: #20201d; }
.admin-activity-grid h3 { margin: 0 0 10px; font-size: 13px; }
.admin-activity-grid p { color: #77776e; font-size: 11px; }
.admin-feature-usage article,.admin-daily-activity article { min-width: 0; padding: 7px 0; display: grid; align-items: center; gap: 8px; border-top: 1px solid #343430; }
.admin-feature-usage article { grid-template-columns: minmax(0,1fr) auto; }
.admin-feature-usage article div { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.admin-feature-usage article b { overflow: hidden; text-overflow: ellipsis; color: #d8d8d1; font-size: 11px; text-transform: capitalize; white-space: nowrap; }
.admin-feature-usage article small,.admin-daily-activity span { color: #77776e; font-size: 9px; }
.admin-feature-usage article strong { color: var(--lime); font-size: 12px; }
.admin-more-rows { margin-top: 8px; border-top: 1px solid #343430; }
.admin-more-rows summary { width: max-content; padding: 9px 0 2px; color: var(--lime); font-size: 10px; font-weight: 800; cursor: pointer; }
.admin-more-rows[open] summary { margin-bottom: 4px; }
.admin-daily-activity article { grid-template-columns: 64px 1fr auto; font-size: 10px; }
.admin-daily-activity article b { color: #d8d8d1; }
.admin-section { margin-top: 32px; }
.admin-section-first { margin-top: 0; }
.admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.admin-section-heading .section-kicker { margin-bottom: 7px; }
.admin-section-note { max-width: 700px; color: #aaa9a1; }
.admin-provider-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.admin-provider-grid article { padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #3a3a35; border-radius: 14px; background: #20201d; }
.admin-provider-grid article > div { display: flex; align-items: center; gap: 11px; }
.admin-provider-grid article > div > div { display: grid; gap: 5px; }
.admin-provider-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(215,255,57,.12); color: var(--lime); font-size: 17px; }
.admin-provider-grid small { color: #ff8b7b; }
.admin-provider-grid small.is-enabled { color: var(--lime); }
.admin-provider-grid button { padding: 9px 13px; border: 1px solid #4a4a44; border-radius: 8px; background: transparent; color: white; cursor: pointer; }
.admin-provider-grid button.is-enable { border-color: var(--lime); background: var(--lime); color: #171713; font-weight: 800; }
.admin-provider-grid button.is-danger { border-color: #764139; color: #ff8b7b; }
.admin-announcement-form { margin-top: 18px; padding: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; border: 1px solid #3a3a35; border-radius: 14px; background: #20201d; }
.admin-announcement-form label { min-width: 0; display: grid; gap: 7px; color: #aaa9a1; font-size: 10px; font-weight: 800; }
.admin-announcement-form label.is-wide { grid-column: 1 / -1; }
.admin-announcement-form input,.admin-announcement-form textarea { min-width: 0; padding: 11px 12px; border: 1px solid #44443f; border-radius: 9px; background: #171713; color: white; font: inherit; }
.admin-announcement-form textarea { min-height: 120px; resize: vertical; }
.admin-announcement-form small { color: #73736c; font-size: 9px; line-height: 1.4; }
.admin-announcement-form .admin-publish-check { display: flex; flex-direction: row; align-items: center; gap: 9px; }
.admin-announcement-form .admin-publish-check input { width: 18px; height: 18px; }
.admin-announcement-submit { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.admin-announcement-submit button { padding: 10px 16px; border: 0; border-radius: 9px; background: var(--lime); color: #171713; font-weight: 900; cursor: pointer; }
.admin-announcement-submit a { color: #aaa9a1; font-size: 11px; font-weight: 800; }
.admin-announcement-list { margin-top: 16px; display: grid; gap: 10px; }
.admin-announcement-list > article { padding: 18px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 18px; align-items: center; border: 1px solid #3a3a35; border-radius: 14px; background: #20201d; }
.admin-announcement-list > article.is-published { border-color: rgba(215,255,57,.3); }
.admin-announcement-copy > div { display: flex; gap: 10px; align-items: center; }
.admin-announcement-copy > div span { padding: 5px 7px; border-radius: 6px; background: #343430; color: #aaa9a1; font-size: 8px; font-weight: 900; }
.admin-announcement-list .is-published .admin-announcement-copy > div span { background: var(--lime); color: #171713; }
.admin-announcement-copy time,.admin-announcement-copy p,.admin-announcement-copy a { color: #85857d; font-size: 10px; }
.admin-announcement-copy h3 { margin: 10px 0 5px; font-size: 16px; }
.admin-announcement-copy p { max-width: 720px; margin: 0; white-space: pre-wrap; line-height: 1.55; }
.admin-announcement-copy a { display: inline-block; margin-top: 9px; color: var(--lime); font-weight: 800; }
.admin-announcement-reach { min-width: 95px; display: grid; gap: 3px; text-align: right; }
.admin-announcement-reach strong { color: var(--lime); font: 700 28px/1 Manrope,sans-serif; }
.admin-announcement-reach span { color: #d2d2ca; font-size: 10px; font-weight: 800; }
.admin-announcement-reach small { color: #73736c; font-size: 8px; }
.admin-announcement-list form button { padding: 9px 12px; border: 1px solid #4a4a44; border-radius: 8px; background: transparent; color: white; cursor: pointer; }
.admin-announcement-list form button.is-enable { border-color: var(--lime); color: var(--lime); }
.admin-announcement-list form button.is-danger { border-color: #764139; color: #ff8b7b; }
.admin-announcement-actions { display: grid; gap: 7px; }
.admin-announcement-actions .admin-edit-link { padding: 9px 12px; border: 1px solid #4a4a44; border-radius: 8px; color: white; font-size: 11px; font-weight: 800; text-align: center; }
.admin-announcement-list form button.is-delete { border-color: transparent; color: #9c7a74; }
.admin-announcement-list form button.is-delete:hover { border-color: #764139; color: #ff8b7b; }
.admin-profile-conversion { margin-top: 20px; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(215,255,57,.32); border-radius: 13px; background: rgba(215,255,57,.07); }
.admin-profile-conversion h3 { margin: 5px 0; font-size: 18px; }
.admin-profile-conversion p { margin: 0; color: #929189; font-size: 11px; }
.admin-profile-conversion-stats { display: flex; align-items: center; gap: 10px; color: #929189; font-size: 10px; white-space: nowrap; }
.admin-profile-conversion-stats span { display: grid; gap: 3px; }
.admin-profile-conversion-stats b { color: white; font-size: 18px; }
.admin-profile-conversion-stats strong { padding: 8px; border-radius: 8px; background: var(--lime); color: #171713; font-size: 14px; }
.queue-count { padding: 8px 11px; border-radius: 999px; background: var(--lime); color: #171713; font: 700 11px/1 Manrope,sans-serif; }
.admin-list { display: grid; gap: 10px; }
.admin-list > article { padding: 18px; display: flex; justify-content: space-between; gap: 24px; border: 1px solid #3a3a35; border-radius: 12px; background: #20201d; }
.admin-list p, .admin-list blockquote { margin: 0 0 8px; }
.admin-list blockquote { color: #c9c8c0; }
.admin-list small { color: #77776e; }
.admin-empty { min-height: 210px; padding: 28px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed #41413c; border-radius: 14px; color: #85857d; text-align: center; }
.admin-empty > span { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: #292925; color: var(--lime); font-weight: 800; }
.admin-empty b { color: #d2d2ca; font-size: 13px; }
.admin-empty p { margin: 0; color: #73736c; font-size: 10px; }
.admin-shortcut-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.admin-shortcut-grid a { min-width: 0; padding: 16px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid #3a3a35; border-radius: 13px; background: #20201d; }
.admin-shortcut-grid a:hover { border-color: rgba(215,255,57,.38); }
.admin-shortcut-grid span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(215,255,57,.1); color: var(--lime); font-size: 11px; }
.admin-shortcut-grid div { min-width: 0; display: grid; gap: 4px; }
.admin-shortcut-grid b { font-size: 11px; }
.admin-shortcut-grid small { overflow: hidden; color: #77776e; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.admin-shortcut-grid i { color: #77776e; font-style: normal; }
.admin-queue-group { margin-top: 20px; }
.admin-queue-group.is-read { margin-top: 30px; }
.admin-queue-heading { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.admin-queue-heading h3 { margin: 0; font-size: 15px; }
.admin-queue-heading span { min-width: 23px; padding: 5px 7px; border-radius: 999px; background: #343430; color: #aaa9a1; font-size: 9px; font-weight: 800; text-align: center; }
.admin-queue-group:not(.is-read) .admin-queue-heading span { background: var(--lime); color: #171713; }
.admin-queue-group.is-read .admin-list > article { opacity: .82; }
.admin-message-copy { min-width: 0; flex: 1 1 auto; }
.admin-feedback-list article { justify-content: flex-start; }
.admin-feedback-avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: #171713; font-weight: 800; }
.admin-actions { display: flex; align-items: center; gap: 7px; }
.admin-actions form { margin: 0; }
.admin-actions a, .admin-actions button { padding: 8px 10px; border: 1px solid #4a4a44; border-radius: 7px; background: transparent; color: white; cursor: pointer; }
.admin-actions .danger { color: #ff8b7b; border-color: #764139; }
.admin-actions .danger-subtle { color: #c7a49e; border-color: #58423e; }
.admin-actions .approve { border-color: var(--lime); background: var(--lime); color: #171713; }
.admin-empty.is-compact { min-height: 130px; }
.admin-user-list { display: grid; gap: 8px; }
.admin-user-card { padding: 12px 14px; display: grid; grid-template-columns: minmax(200px,.8fr) minmax(380px,1.45fr) minmax(250px,.85fr); align-items: center; gap: 10px 16px; border: 1px solid #3a3a35; border-radius: 12px; background: #20201d; }
.admin-user-card > * { min-width: 0; }
.admin-user-card.is-blocked { border-color: rgba(255,139,123,.35); background: linear-gradient(110deg,rgba(118,65,57,.18),#20201d 35%); }
.admin-block-note { grid-column: 1 / -1; }
.admin-user-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.admin-user-identity > img,.admin-user-identity > span { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; background: var(--lime); color: #171713; object-fit: cover; font-weight: 800; }
.admin-user-identity > div { min-width: 0; }
.admin-user-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.admin-user-name b,.admin-user-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-profile-link:hover { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
.admin-user-name em { padding: 4px 6px; border-radius: 6px; background: var(--lime); color: #171713; font: 800 8px/1 Manrope,sans-serif; letter-spacing: .06em; }
.admin-user-name em.blocked { background: #ff8b7b; }
.admin-user-identity small { margin-top: 5px; color: #85857d; }
.admin-user-meta { margin: 0; display: grid; grid-template-columns: .65fr 1fr 1.6fr .6fr .8fr; gap: 12px; }
.admin-user-meta div { min-width: 0; }
.admin-user-meta dt { color: #73736c; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.admin-user-meta dd { margin: 3px 0 0; color: #d8d8d1; font-size: 11px; overflow-wrap: anywhere; }
.admin-user-actions { grid-column: 1 / -1; min-width: 0; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 7px; }
.admin-user-actions form { min-width: 0; margin: 0; display: flex; gap: 7px; }
.admin-user-actions form:first-of-type { flex: 1 1 280px; }
.admin-user-actions .admin-profile-button { padding: 9px 11px; border: 1px solid var(--lime); border-radius: 8px; color: var(--lime); font-size: 12px; font-weight: 700; }
.admin-user-actions .admin-profile-button:hover { background: var(--lime); color: #171713; }
.admin-user-actions input { width: auto; min-width: 0; max-width: 100%; flex: 1; padding: 8px 9px; border: 1px solid #44443f; border-radius: 8px; background: #171713; color: white; }
.admin-user-actions button { padding: 9px 11px; border: 1px solid #4a4a44; border-radius: 8px; background: transparent; color: white; cursor: pointer; }
.admin-user-actions .warning { border-color: #806d35; color: #f0cf68; }
.admin-user-actions .danger { border-color: #764139; color: #ff8b7b; }
.admin-user-actions .approve { border-color: var(--lime); background: var(--lime); color: #171713; }
.admin-user-search { margin: 18px 0; display: flex; gap: 8px; max-width: 780px; }
.admin-user-search input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid #44443f; border-radius: 10px; background: #171713; color: white; }
.admin-user-search select { min-width: 145px; padding: 10px 12px; border: 1px solid #44443f; border-radius: 10px; background: #171713; color: white; }
.admin-user-search button,.admin-user-search a { padding: 10px 14px; border: 1px solid #4a4a44; border-radius: 9px; background: transparent; color: white; cursor: pointer; }
.admin-registration-calendar { margin: 0 0 18px; padding: 14px; border: 1px solid #3a3a35; border-radius: 12px; background: #20201d; }
.admin-registration-calendar h3 { margin: 3px 0 12px; font-size: 16px; }
.admin-registration-calendar .section-kicker { margin: 0; }
.admin-calendar-weekdays,.admin-calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.admin-calendar-weekdays { margin-bottom: 5px; color: #73736c; font: 800 8px/1 Manrope,sans-serif; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.admin-calendar-days { gap: 4px; }
.admin-calendar-days > div { min-height: 45px; padding: 6px; display: flex; justify-content: space-between; align-items: flex-start; border: 1px solid #343430; border-radius: 7px; color: #aaa9a1; font-size: 10px; }
.admin-calendar-days > div.is-outside { opacity: .35; }
.admin-calendar-days > div.has-registrations { border-color: rgba(215,255,57,.5); background: rgba(215,255,57,.08); color: white; }
.admin-calendar-days b { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #171713; font-size: 9px; }
.admin-registration-days { margin: 0 0 12px; padding: 4px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; overflow-x: auto; border: 1px solid #3a3a35; border-radius: 12px; background: #20201d; }
.admin-registration-days a { min-width: 76px; padding: 9px 8px; display: grid; gap: 3px; border-radius: 8px; color: #aaa9a1; }
.admin-registration-days a:hover,.admin-registration-days a.is-active { background: #343430; color: white; }
.admin-registration-days a.is-active { box-shadow: inset 0 0 0 1px rgba(215,255,57,.35); }
.admin-registration-days span,.admin-registration-days small { color: #77776e; font-size: 9px; }
.admin-registration-days a.is-active span,.admin-registration-days a.is-active small { color: #d2d2ca; }
.admin-registration-days b { color: var(--lime); font-size: 11px; }
.admin-all-users-heading { margin-top: 34px; }
.admin-users-table-wrap { overflow-x: auto; border: 1px solid #3a3a35; border-radius: 12px; background: #20201d; }
.admin-users-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-users-table th { padding: 10px 12px; color: #77776e; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.admin-users-table td { padding: 11px 12px; border-top: 1px solid #343430; color: #d2d2ca; font-size: 11px; vertical-align: middle; }
.admin-users-table td a:not(.admin-table-user) { color: var(--lime); font-size: 10px; font-weight: 800; white-space: nowrap; }
.admin-table-user { min-width: 150px; display: flex; align-items: center; gap: 9px; }
.admin-table-user > img,.admin-table-user-placeholder { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: #171713; object-fit: cover; font-size: 12px; font-weight: 800; }
.admin-table-user-copy { min-width: 0; display: grid; gap: 4px; }
.admin-table-user b { color: white; font-size: 12px; }
.admin-table-user small { overflow: hidden; color: #85857d; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.admin-subscription-pill { padding: 5px 7px; border: 1px solid rgba(215,255,57,.42); border-radius: 999px; background: rgba(215,255,57,.1); color: var(--lime); font-size: 9px; font-weight: 800; white-space: nowrap; }
.admin-table-empty { padding: 18px !important; color: #85857d !important; }
.admin-user-management-list { margin-top: 16px; border: 1px solid #3a3a35; border-radius: 12px; background: #20201d; }
.admin-user-management-list > summary { padding: 12px 14px; color: var(--lime); font-size: 11px; font-weight: 800; cursor: pointer; }
.admin-user-management-list[open] > .admin-user-list { padding: 0 10px 10px; }
.admin-success { margin: 16px 0 0; padding: 11px 13px; border: 1px solid rgba(215,255,57,.38); border-radius: 10px; background: rgba(215,255,57,.1); color: var(--lime); font-size: 12px; font-weight: 800; }
.admin-access-summary { display: flex; flex-direction: column; gap: 4px; }
.admin-access-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-access-badges b { padding: 5px 7px; border: 1px solid #4a4a44; border-radius: 7px; color: #85857d; font: 800 9px/1 Manrope,sans-serif; letter-spacing: .05em; }
.admin-access-badges b.is-active { border-color: rgba(215,255,57,.45); background: rgba(215,255,57,.1); color: var(--lime); }
.admin-access-summary small { color: #85857d; }
.admin-access-origins { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-access-origins span { padding: 4px 6px; border: 1px solid #484842; border-radius: 999px; color: #9a9a92; font: 800 8px/1.1 Manrope,sans-serif; letter-spacing: .035em; white-space: nowrap; }
.admin-access-origins .is-apple { border-color: rgba(118,154,255,.48); background: rgba(118,154,255,.12); color: #aebeff; }
.admin-access-origins .is-admin { border-color: rgba(255,190,92,.45); background: rgba(255,190,92,.1); color: #ffc970; }
.admin-access-origins .is-achievement { border-color: rgba(215,255,57,.4); color: var(--lime); }
.admin-profile-hero { padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #3a3a35; border-radius: 18px; background: #20201d; }
.admin-profile-identity { min-width: 0; display: flex; align-items: center; gap: 18px; }
.admin-profile-identity > img,.admin-profile-identity > span { width: 76px; height: 76px; flex: 0 0 76px; display: grid; place-items: center; border-radius: 18px; background: var(--lime); color: #171713; object-fit: cover; font: 800 28px/1 Manrope,sans-serif; }
.admin-profile-identity h1 { margin: 5px 0 7px; overflow-wrap: anywhere; font: 600 clamp(34px,5vw,58px)/1 Manrope,sans-serif; letter-spacing: -.05em; }
.admin-profile-identity p { margin: 0; color: #929189; }
.admin-profile-meta { margin-top: 14px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.admin-profile-meta article { min-width: 0; padding: 18px; display: grid; gap: 7px; border-radius: 13px; background: #292925; }
.admin-profile-meta span { color: #73736c; font: 700 9px/1 Manrope,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.admin-profile-meta b { overflow-wrap: anywhere; color: var(--lime); font: 600 16px/1.2 Manrope,sans-serif; }
.admin-profile-meta small { overflow-wrap: anywhere; color: #929189; font-size: 10px; }
.admin-access-badges .is-blocked { border-color: rgba(255,139,123,.45); background: rgba(255,139,123,.1); color: #ff8b7b; }
.admin-upload-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.admin-upload-grid > article { min-width: 0; padding: 12px; display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 15px; border: 1px solid #3a3a35; border-radius: 14px; background: #20201d; }
.admin-upload-poster { position: relative; min-height: 108px; overflow: hidden; display: grid; place-items: center; border-radius: 9px; background: #080808; color: var(--lime); }
.admin-upload-poster img { width: 100%; height: 100%; object-fit: cover; }
.admin-upload-poster i { position: absolute; right: 6px; bottom: 6px; padding: 4px 5px; border-radius: 5px; background: rgba(0,0,0,.75); color: white; font: 700 9px/1 Manrope,sans-serif; font-style: normal; }
.admin-upload-grid h3 { margin: 9px 0 6px; overflow-wrap: anywhere; font: 600 17px/1.2 Manrope,sans-serif; }
.admin-upload-grid h3 a:hover { color: var(--lime); }
.admin-upload-grid p { margin: 0; color: #aaa9a1; font-size: 11px; line-height: 1.45; }
.admin-upload-grid small { display: block; margin-top: 8px; color: #73736c; font-size: 9px; }
.admin-upload-grid details { margin-top: 9px; color: #929189; font-size: 10px; }
.admin-upload-grid details p { max-height: 100px; margin-top: 7px; overflow: auto; white-space: pre-line; }
.admin-access-controls { grid-column: 1 / -1; padding-top: 8px; border-top: 1px solid #343430; }
.admin-access-controls summary { width: max-content; color: #aaa9a1; font-size: 10px; font-weight: 800; cursor: pointer; user-select: none; }
.admin-access-controls[open] { display: grid; gap: 8px; }
.admin-access-form { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) auto; gap: 8px; }
.admin-access-form input,.admin-access-form select { min-width: 0; padding: 9px 10px; border: 1px solid #44443f; border-radius: 8px; background: #171713; color: white; }
.admin-access-form button { padding: 9px 13px; border: 1px solid var(--lime); border-radius: 8px; background: var(--lime); color: #171713; font-weight: 800; cursor: pointer; }
.admin-access-form button.revoke { border-color: #806d35; background: transparent; color: #f0cf68; }
.admin-granted-state { display: flex; align-items: center; padding: 9px 12px; border: 1px solid rgba(215,255,57,.35); border-radius: 8px; background: rgba(215,255,57,.08); color: var(--lime); font-size: 11px; font-weight: 800; }
.admin-block-note { grid-column: 1/-1; margin: -8px 0 0; color: #c7867c; font-size: 11px; }
.admin-pagination { margin-top: 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.admin-pagination a { width: max-content; padding: 9px 12px; border: 1px solid #4a4a44; border-radius: 9px; }
.admin-pagination a:last-child { justify-self: end; }
.admin-pagination b { color: #8b8b83; font-size: 11px; }
.review-queue > article { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; align-items: center; }
.review-thumb { width: 110px; aspect-ratio: 16/10; overflow: hidden; display: grid; place-items: center; border-radius: 9px; background: #080808; }
.review-thumb img { width: 100%; height: 100%; object-fit: cover; }
.review-copy { min-width: 0; }
.review-meta { color: #aaa9a1; }
.review-form { margin-top: 24px; }
.review-form textarea { background: #20201d; border-color: #44443f; color: white; }
.admin-delete-form { margin-top: 18px; }
.admin-delete-form > button { padding: 9px 11px; border: 1px solid #764139; border-radius: 8px; background: transparent; color: #ff8b7b; cursor: pointer; }
.creator-table p { max-width: 520px; padding: 12px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #3a3a35; }
.admin-review { display: grid; grid-template-columns: 1.35fr .65fr; gap: 35px; align-items: center; }
.admin-review video { width: 100%; max-height: 75vh; border-radius: 14px; background: #080808; }
.admin-review h1 { margin: 15px 0 20px; font-size: 48px; }
.danger-zone { margin-top: 38px; padding-top: 30px; border-top: 1px solid rgba(215,59,59,.35); }
.danger-zone h2 { color: #d73b3b; }
.danger-zone > p { color: var(--muted); }
.danger-zone > a { display: inline-block; margin-top: 16px; color: var(--muted); font-size: 13px; }
.danger-button { min-height: 48px; padding: 0 18px; border: 1px solid #d73b3b; border-radius: 12px; background: rgba(215,59,59,.09); color: #b52323; font-weight: 700; cursor: pointer; }
.deletion-success { margin: 0 0 35px; padding: 20px 22px; display: grid; gap: 5px; border: 1px solid rgba(56,105,247,.25); border-radius: 14px; background: rgba(56,105,247,.08); }
.deletion-success strong { color: var(--blue); }
.deletion-success span { color: var(--muted); }

@media (max-width: 1100px) {
  .admin-shell .admin-user-card { grid-template-columns: 1fr; gap: 15px; }
  .admin-shell .admin-user-meta { padding-top: 13px; border-top: 1px solid #343430; }
}

@media (max-width: 900px) {
  .admin-mobile-header { display: flex; }
  .admin-shell { width: 100%; min-height: 0; padding: 0 12px; display: block; }
  .admin-sidebar { position: sticky; top: 0; z-index: 24; width: 100%; height: auto; padding: 8px 0; border-width: 1px 0; border-radius: 0; background: rgba(23,23,19,.95); box-shadow: 0 8px 30px rgba(0,0,0,.22); backdrop-filter: blur(15px); }
  .admin-sidebar-heading,.admin-sidebar-footer { display: none; }
  .admin-mobile-section-select { margin: 0 12px; display: grid; grid-template-columns: 92px minmax(0,1fr); align-items: center; gap: 10px; }
  .admin-mobile-section-select > span { color: #85857d; font-size: 10px; font-weight: 800; }
  .admin-mobile-section-select select { width: 100%; min-height: 40px; padding: 0 36px 0 12px; border: 1px solid #44443f; border-radius: 10px; background: #20201d; color: white; font: 700 12px Manrope,sans-serif; }
  .admin-sidebar nav { display: none; }
  .admin-shell .admin-page { padding: 25px 2px 70px; }
  .admin-page-heading { margin-bottom: 22px; }
  .admin-viewer { display: none; }
  .admin-shortcut-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .admin-registration-days { grid-template-columns: repeat(7,minmax(76px,1fr)); }
  .admin-users-table-wrap { overflow: visible; border: 0; background: transparent; }
  .admin-users-table,.admin-users-table tbody { width: 100%; display: grid; gap: 8px; }
  .admin-users-table thead { display: none; }
  .admin-users-table tr { padding: 10px 12px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px 12px; border: 1px solid #3a3a35; border-radius: 12px; background: #20201d; }
  .admin-users-table td { min-width: 0; padding: 0; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 7px; border: 0; font-size: 10px; }
  .admin-users-table td::before { content: attr(data-label); color: #77776e; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .admin-users-table td:first-child { grid-column: 1 / -1; display: block; padding-bottom: 7px; border-bottom: 1px solid #343430; }
  .admin-users-table td:first-child::before { content: none; }
  .admin-users-table td:last-child { justify-self: end; }
  .admin-users-table td.admin-table-empty { display: block; grid-column: 1 / -1; }
  .admin-users-table td.admin-table-empty::before { content: none; }
  .changelog-page { width: min(100% - 32px,1040px); padding: 62px 0 80px; }
  .changelog-entry { grid-template-columns: 1fr; gap: 28px; padding: 26px 22px; }
  .changelog-entry-meta { flex-direction: row; flex-wrap: wrap; align-items: center; }
  html,body { overflow-x: clip; }
  .back-to-top { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .account-actions { gap: 6px; }
  .global-search-toggle { width: 40px; padding: 0; justify-content: center; }
  .global-search-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .global-search-popup { position: fixed; top: 72px; right: 12px; left: 12px; width: auto; max-height: calc(100dvh - 84px); }
  .language-switcher button { width: 27px; height: 25px; }
  .scroll-nav { right: 8px; width: 34px; padding-block: 8px; border-radius: 18px; }
  .scroll-nav-rail { left: 16px; top: 23px; bottom: 23px; }
  .scroll-nav a { width: 32px; height: 32px; }
  .scroll-nav a span { display: none; }
  .scroll-nav a i { width: 6px; height: 6px; }
  .scroll-nav a.active i { width: 11px; height: 11px; }
  .site-header, .hero, .community, footer { width: min(100% - 32px, 1180px); }
  .site-header { height: auto; min-height: 110px; padding: 15px 0 11px; flex-wrap: wrap; row-gap: 12px; }
  .clip-header { width: min(100% - 24px,1180px); min-height: 72px; padding: 10px 0; flex-wrap: nowrap; gap: 10px; }
  .clip-header .brand { gap: 8px; font-size: 18px; }
  .clip-header .brand-mark { width: 24px; height: 24px; }
  .clip-header .back-link { display: none; }
  .clip-header .header-actions { min-width: 0; margin-left: auto; }
  .clip-header .account-actions { min-width: 0; }
  .site-nav { order: 3; width: 100%; display: flex; justify-content: space-between; gap: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
  .account-chip b { display: none; }
  .account-chip { padding-right: 5px; }
  .reels-shortcut { width: 42px; height: 42px; padding: 4px; justify-content: center; border-radius: 50%; }
  .reels-shortcut-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .site-nav a { flex: 1; padding: 6px 4px; text-align: center; border-radius: 7px; }
  .site-nav a.active { background: rgba(56,105,247,.08); color: var(--blue); }
  .site-nav a.active::after { display: none; }
  .nav-pill { padding: 10px 12px; font-size: 12px; }
  .hero { padding: 52px 0 72px; }
  h1 { margin-top: 22px; font-size: clamp(49px, 15.4vw, 78px); }
  .hero-copy { font-size: 18px; }
  .editor-manifesto { align-items: flex-start; flex-direction: column; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .access-summary { width: 100%; grid-template-columns: 1fr; }
  .access-summary li { border-right: 0; border-bottom: 1px solid var(--line); }
  .access-summary li:last-child { border-bottom: 0; }
  .site-stats { width: 100%; grid-template-columns: repeat(2, 1fr); }
  .availability { max-width: 100%; line-height: 1.4; }
  .editor-preview { margin-top: 54px; border-radius: 13px; }
  .app-showcase { width: calc(100vw - 32px); margin-left: calc((100% - (100vw - 32px)) / 2); margin-top: 54px; padding: 38px 0 34px; border-radius: 20px; }
  .showcase-heading { margin: 0 22px; text-align: left; }
  .showcase-heading > span { justify-content: flex-start; }
  .showcase-heading h2 { margin-top: 16px; font-size: 36px; }
  .showcase-heading p { max-width: 310px; }
  .showcase-stage { max-width: none; margin-top: 32px; padding: 0 14px; display: grid; grid-template-columns: 1fr; align-items: start; justify-items: center; gap: 34px; overflow: visible; }
  .showcase-phone { width: min(100%, 270px); transform: none; }
  .showcase-start, .showcase-profile, .showcase-editor, .showcase-filters, .showcase-text, .showcase-hold, .showcase-move { grid-column: 1; justify-self: center; }
  .showcase-start { grid-row: 1; }
  .showcase-profile { grid-row: 2; }
  .showcase-editor { grid-row: 3; }
  .showcase-filters { grid-row: 4; }
  .showcase-text { grid-row: 5; }
  .showcase-pro { width: 100%; grid-column: 1; grid-row: 6; margin: 0; }
  .showcase-hold { grid-row: 7; }
  .showcase-move { grid-row: 8; }
  .showcase-pro .phone-screen { border-width: 4px; border-radius: 15px; }
  .phone-screen { border-width: 1px; border-radius: 22px; }
  .showcase-phone figcaption { margin-top: 10px; display: grid; gap: 3px; font-size: 9px; }
  .showcase-phone figcaption strong { font-size: 11px; }
  .showcase-pro figcaption { margin-top: 13px; grid-template-columns: 58px 1fr; gap: 9px; font-size: 10px; }
  .showcase-pro figcaption strong { font-size: 13px; }
  .feature-detail-grid { margin: 32px 14px 0; grid-template-columns: 1fr; }
  .plan-comparison { padding-top: 76px; padding-bottom: 78px; }
  .plan-grid { margin-top: 36px; grid-template-columns: 1fr; }
  .plan-card { border-radius: 20px; }
  .plan-pro { box-shadow: 5px 5px 0 var(--lime); }
  .preview-toolbar { grid-template-columns: 1fr auto; }
  .preview-mode { display: none; }
  .preview-workspace { min-height: 315px; grid-template-columns: 66px minmax(0,1fr); }
  .preview-tools { padding-inline: 6px; }
  .preview-tools span { min-height: 48px; }
  .preview-inspector { display: none; }
  .preview-stage { padding: 15px; }
  .preview-timeline { height: 166px; padding-left: 49px; }
  .steps { padding-top: 76px; padding-bottom: 76px; grid-template-columns: 1fr; gap: 50px; }
  .upload-trust { padding-top: 76px; padding-bottom: 76px; }
  .processing-points { grid-template-columns: 1fr; }
  .step-list li { grid-template-columns: 50px 1fr; }
  .community { padding: 80px 0; grid-template-columns: 1fr; gap: 52px; }
  .community-grid { transform: none; }
  .community-grid span { min-height: 86px; }
  .explore-modes { padding-top: 76px; padding-bottom: 76px; grid-template-columns: 1fr; gap: 48px; }
  .mode-links { grid-template-columns: 1fr; }
  .mode-links > a { min-height: 260px; }
  .tags-hero { width: min(100% - 32px, 1180px); padding: 55px 0 45px; }
  .tags-search { margin-top: 28px; }
  .tag-browser { padding: 17px 16px 19px; }
  .tag-directory-heading { margin-bottom: 11px; }
  .tag-directory-heading span { display: inline; }
  .tag-directory { margin-inline: -16px; padding: 0 16px 5px; display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tag-directory::-webkit-scrollbar { display: none; }
  .directory-tag { min-width: max-content; min-height: 42px; flex: 0 0 auto; scroll-snap-align: start; }
  .tag-results { padding-top: 72px; }
  .clip-library { padding-top: 76px; padding-bottom: 76px; }
  .library-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .catalog-search { margin-bottom: 30px; }
  .clip-grid { grid-template-columns: repeat(2, 1fr); gap: 25px 10px; }
  .clip-card-copy { display: block; }
  .clip-card-copy span { display: block; margin-top: 3px; }
  .library-more { margin-top: 38px; }
  .share-panel { width: 100%; margin-top: 25px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .share-panel > * { width: 100%; min-width: 0; max-width: 100%; }
  .share-panel .primary-button { grid-column: 1 / -1; min-height: 54px; }
  .clip-discovery-search { display: none; }
  .clip-discovery-search strong { overflow: visible; text-overflow: clip; white-space: normal; }
  .clip-discovery-search button { width: 100%; }
  .clip-page { width: min(100% - 24px, 1180px); padding: 16px 0 58px; grid-template-columns: 1fr; gap: 28px; }
  .clip-player-shell { border-radius: 10px; }
  .clip-details h1 { font-size: clamp(30px, 9vw, 44px); }
  .clip-details .section-kicker { margin-bottom: 0; }
  .clip-details > p:not(.section-kicker):not(.origin-note) { font-size: 15px; }
  .clip-details .detail-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .related-clips { padding: 54px 16px 70px; }
  .related-clips-heading { align-items: stretch; flex-direction: column; }
  .related-clips-heading button { width: 100%; }
  .report-box, .report-box form, .report-box textarea { width: 100%; }
  footer { padding: 35px 0; min-height: 130px; align-items: flex-start; flex-direction: column; gap: 26px; }
  .account-page { width: min(100% - 32px, 1100px); padding-top: 45px; }
  .legal-page { width: min(100% - 32px, 1180px); padding-top: 48px; }
  .legal-hero { padding-bottom: 45px; }
  .legal-layout { padding-top: 35px; grid-template-columns: 1fr; gap: 38px; }
  .legal-layout aside { position: static; }
  .footer-links { flex-wrap: wrap; gap: 12px; }
  .community-columns { grid-template-columns: 1fr; }
  .profile-summary { align-items: flex-start; flex-wrap: wrap; }
  .profile-summary form { margin-left: 0; }
  .leaderboard article { grid-template-columns: 28px 48px 1fr; padding: 13px; gap: 9px; }
  .leaderboard article > strong { grid-column: 3; text-align: left; }
  .admin-body .site-header { width: calc(100% - 24px); min-height: 78px; padding-block: 12px; }
  .admin-body .site-header .brand { font-size: 16px; }
  .admin-body .account-actions { max-width: 100%; }
  .admin-profile-hero { align-items: flex-start; flex-direction: column; }
  .admin-profile-meta,.admin-upload-grid { grid-template-columns: 1fr; }
  .admin-upload-grid > article { grid-template-columns: 120px minmax(0,1fr); }
  .upload-source-options { grid-template-columns: 1fr; }
  .upload-source-options > span { justify-self: center; }
  .admin-body .reels-shortcut { display: none; }
  .admin-body .account-chip { max-width: 160px; }
  .admin-page { width: calc(100% - 24px); padding: 24px 0 70px; overflow: hidden; }
  .admin-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .admin-stats article { min-width: 0; padding: 16px; }
  .admin-stats b { font-size: 29px; }
  .admin-stats span { font-size: 11px; }
  .admin-stats small { white-space: normal; }
  .admin-activity-summary { grid-template-columns: 1fr; }
  .admin-web-activity .admin-activity-summary { grid-template-columns: 1fr; }
  .admin-installation-chart > div:first-child { align-items: flex-start; flex-direction: column; gap: 5px; }
  .admin-installation-bars { height: 160px; gap: 2px; }
  .admin-activity-grid { grid-template-columns: 1fr; }
  .admin-geo-grid { grid-template-columns: 1fr; }
  #web-country-map { min-height: 190px; }
  .admin-section { margin-top: 38px; }
  .admin-section-heading { align-items: flex-start; }
  .admin-section h2 { font-size: 24px; }
  .admin-list > article { flex-direction: column; }
  .admin-actions { flex-wrap: wrap; }
  .admin-actions form,.admin-actions a,.admin-actions button { max-width: 100%; }
  .admin-user-card { grid-template-columns: 1fr; gap: 16px; padding: 15px; }
  .admin-user-meta { grid-template-columns: 1fr 1fr; padding-top: 13px; border-top: 1px solid #343430; }
  .admin-user-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 7px; }
  .admin-user-actions form { width: auto; }
  .admin-user-actions form:first-of-type { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) auto; }
  .admin-user-actions input { width: auto; min-height: 36px; flex: 1; }
  .admin-user-actions .admin-profile-button,.admin-user-actions button { min-height: 36px; padding: 8px 9px; text-align: center; }
  .admin-user-actions button { flex: initial; }
  .admin-user-search { max-width: none; flex-wrap: wrap; }
  .admin-user-search input { flex-basis: 100%; }
  .admin-user-search select { flex: 1; }
  .admin-access-form { grid-column: auto; grid-template-columns: minmax(0,1fr) auto; }
  .admin-access-form button { min-height: 36px; padding: 8px 10px; }
  .creator-access-table article { grid-template-columns: minmax(0,1fr); }
  .creator-access-table form { grid-template-columns: minmax(0,1fr); }
  .owned-clip-grid { grid-template-columns: 1fr; }
  .my-clips-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .review-queue > article { grid-template-columns: 1fr; }
  .review-thumb { width: 100%; max-height: 220px; }
  .creator-dashboard-header, .settings-header { align-items: flex-start; flex-direction: column; }
  .creator-identity { align-items: flex-start; }
  .creator-avatar.large { width: 64px; height: 64px; }
  .creator-stat-strip { grid-template-columns: repeat(2,1fr); }
  .creator-stat-strip article:nth-child(2) { border-right: 0; }
  .creator-stat-strip article:nth-child(-n+2) { border-bottom: 1px solid #363631; }
  .creator-game-card { grid-template-columns: 1fr; gap: 18px; }
  .game-reward { padding: 18px 0 0; border-top: 1px solid #3d3d38; border-left: 0; }
  .meme-manager { padding: 19px 14px; }
  .meme-manager-heading { align-items: flex-start; flex-direction: column; }
  .meme-table-shell { overflow: visible; }
  .meme-table, .meme-table tbody { display: block; }
  .meme-table thead { display: none; }
  .meme-table tr { margin-bottom: 12px; padding: 13px; display: grid; grid-template-columns: repeat(3,1fr) 38px; gap: 13px 8px; border: 1px solid var(--line); border-radius: 14px; }
  .meme-table td { min-width: 0; padding: 0; display: grid; gap: 4px; border: 0; }
  .meme-table td::before { content: attr(data-label); color: var(--muted); font: 700 8px/1 Manrope,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
  .meme-table .meme-cell { grid-column: 1 / -1; }
  .meme-cell-content { display: flex; }
  .meme-table .meme-cell::before, .meme-table .meme-row-actions::before { display: none; }
  .meme-table td:nth-child(6) { grid-column: 1 / span 3; }
  .meme-row-actions { width: auto; grid-column: 4; grid-row: 2; align-self: end; }
  .meme-row-actions details > div { top: auto; right: 0; bottom: 40px; }
  .meme-table-empty { display: block !important; }
  .upload-workspace, .settings-grid, .settings-danger { grid-template-columns: 1fr; gap: 24px; }
  .upload-fields, .settings-danger .stack-form { grid-template-columns: 1fr; }
  .settings-danger { align-items: stretch; }
  .owner-clip-actions { display: grid; }
  .owner-clip-actions form { width: 100%; }
  .owner-clip-actions button { width: 100%; }
}

@media (max-width: 480px) {
  .clip-page { width: min(100% - 24px, 1180px); }
  .owner-clip-panel { padding: 14px; }
  .site-stats dt { font-size: 23px; }
  .site-stats dd { font-size: 10px; }
  .clip-search { display: grid; }
  .clip-search button { min-height: 42px; }
  .tags-search .clip-search { display: flex; }
  .tags-search .clip-search input { padding-inline: 12px 6px; font-size: 15px; }
  .tags-search .clip-search button { width: 46px; min-width: 46px; height: 46px; min-height: 46px; padding: 0; }
  .tags-search .clip-search button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .clip-grid { grid-template-columns: 1fr; }
  .reels-header { height: 62px; }
  .reels-hint { position: absolute; top: 68px; left: 50%; padding: 7px 10px; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(8,8,8,.42); backdrop-filter: blur(10px); white-space: nowrap; }
  .reels-tv-cabinet { width: min(112vw,560px); transform: translate(-50%,-44%); }
  .reel { width: 100%; }
  .reels-info-dock { bottom: max(78px, calc(env(safe-area-inset-bottom) + 68px)); width: calc(100% - 20px); }
  .reel-info { padding: 7px 10px; }
  .reel-info h1 { margin-bottom: 0; font-size: 16px; -webkit-line-clamp: 1; }
  .reel-kicker,.reel-tags,.reel-stats { display: none; }
  .reels-action-dock { bottom: max(8px, env(safe-area-inset-bottom)); }
  .reel-actions { padding: 4px; gap: 2px; }
  .reel-action { width: clamp(43px, 12vw, 52px); height: 50px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .reels-tv-cabinet { width: min(82vw,680px); }
  .reels-header { height: 54px; }
  .reels-header .brand { font-size: 16px; }
  .reels-header .brand-mark { width: 22px; height: 22px; }
  .reel-info { left: 20px; right: 20px; bottom: 82px; }
  .reel-info h1 { margin-bottom: 8px; font-size: clamp(27px, 5vw, 38px); }
  .reel-kicker { margin-bottom: 7px; }
  .reel-stats { margin-top: 9px; }
  .reels-action-dock { right: 10px; bottom: 8px; left: auto; transform: none; }
  .reels-info-dock { right: 10px; bottom: 74px; left: auto; width: min(420px,55vw); transform: none; }
  .reel-action { width: 58px; min-height: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Editorial landing composition */
.hero { padding: 72px 0 86px; }
.hero-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(400px,.82fr); gap: clamp(48px,7vw,92px); align-items: center; }
.hero-copy-block { min-width: 0; }
.hero h1 { max-width: 720px; margin: 26px 0 25px; font-size: clamp(62px,7.2vw,102px); line-height: .87; }
.hero-copy { max-width: 610px; }
.hero-actions { margin-top: 30px; gap: 18px; }
.hero-version { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.hero-version i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(215,255,57,.18); }
.hero-benefits { margin: 38px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hero-benefits li { display: grid; grid-template-columns: 36px 1fr; gap: 8px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.hero-benefits b { padding-top: 2px; color: var(--blue); font-size: 11px; letter-spacing: .08em; }
.hero-benefits span { display: grid; gap: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.hero-benefits strong { color: var(--ink); font-size: 14px; }
.hero-product { position: relative; min-height: 660px; overflow: hidden; isolation: isolate; border-radius: 34px; background: #181816; box-shadow: 12px 12px 0 var(--blue); }
.hero-product::before { position: absolute; inset: -20%; content: ""; background: radial-gradient(circle at 70% 26%,rgba(215,255,57,.24),transparent 28%),radial-gradient(circle at 18% 82%,rgba(87,112,255,.48),transparent 34%); z-index: -1; }
.hero-product-label { position: absolute; top: 27px; left: 28px; z-index: 4; padding: 7px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.hero-phone { position: absolute; top: 61px; left: 50%; z-index: 2; width: 270px; margin: 0; transform: translateX(-50%) rotate(-3deg); }
.hero-phone img { display: block; width: 100%; height: auto; border: 2px solid rgba(255,255,255,.22); border-radius: 36px; box-shadow: 0 28px 70px rgba(0,0,0,.52); }
.hero-timeline { position: absolute; right: -28px; bottom: 47px; z-index: 3; width: min(430px,90%); margin: 0; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 22px 55px rgba(0,0,0,.4); transform: rotate(4deg); }
.hero-timeline img { display: block; width: 100%; height: auto; border-radius: 11px; }
.hero-timeline figcaption { display: flex; justify-content: space-between; gap: 14px; padding: 10px 7px 5px; color: var(--ink); font-size: 9px; line-height: 1.35; }
.hero-timeline figcaption b { color: var(--blue); letter-spacing: .08em; }
.hero-timeline figcaption span { text-align: right; }
.hero-sticker { position: absolute; right: 22px; top: 90px; z-index: 4; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; background: var(--lime); color: var(--ink); font: 900 12px/1.05 Manrope,sans-serif; text-align: center; transform: rotate(9deg); }
.hero .site-stats { max-width: none; margin-top: 58px; }

.app-story { width: min(1180px,calc(100% - 48px)); margin: 0 auto 110px; padding: clamp(58px,7vw,90px); border-radius: 34px; background: #181816; color: #fff; }
.story-heading { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.65fr); column-gap: 80px; align-items: end; }
.story-heading .section-kicker { grid-column: 1 / -1; color: var(--lime); }
.story-heading h2 { margin: 12px 0 0; font-size: clamp(48px,6vw,84px); line-height: .91; letter-spacing: -.065em; }
.story-heading h2 em { color: var(--lime); font-style: normal; }
.story-heading > p:last-child { max-width: 430px; margin: 0 0 5px; color: #aaa9a2; font-size: 15px; line-height: 1.65; }
.feature-rail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 46px; }
.feature-rail-toolbar > span { color: #aaa9a2; font-size: 11px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.feature-rail-actions { display: flex; gap: 8px; }
.feature-rail-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: #2a2a27; color: #fff; font: 500 20px/1 Manrope,sans-serif; cursor: pointer; transition: border-color .2s,background .2s,color .2s,opacity .2s; }
.feature-rail-button:hover:not(:disabled) { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.feature-rail-button:disabled { opacity: .3; cursor: default; }
.feature-release-grid { display: flex; gap: 16px; margin: 14px calc(0px - clamp(58px,7vw,90px)) -18px; padding: 0 clamp(58px,7vw,90px) 30px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(58px,7vw,90px); overscroll-behavior-inline: contain; scrollbar-color: var(--lime) rgba(255,255,255,.1); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.feature-release-grid::-webkit-scrollbar { height: 7px; }
.feature-release-grid::-webkit-scrollbar-track { margin-inline: clamp(58px,7vw,90px); border-radius: 999px; background: rgba(255,255,255,.1); }
.feature-release-grid::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--lime); }
.release-feature { position: relative; min-height: 690px; flex: 0 0 clamp(430px,49vw,560px); display: grid; grid-template-rows: auto minmax(0,1fr); gap: 12px; overflow: hidden; padding: 24px 24px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: #242421; scroll-snap-align: start; scroll-snap-stop: always; }
.release-feature > div { position: relative; z-index: 2; }
.release-feature span { color: var(--lime); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.release-feature h3 { margin: 10px 0 8px; font-size: clamp(23px,2.15vw,31px); line-height: 1.02; letter-spacing: -.04em; }
.release-feature p { margin: 0; color: #aaa9a2; font-size: 12px; line-height: 1.45; }
.release-feature figure { align-self: end; justify-self: center; width: 100%; height: 500px; display: flex; align-items: flex-end; justify-content: center; margin: 0; }
.release-feature figure img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; border: 2px solid rgba(255,255,255,.2); border-radius: 24px; box-shadow: 0 20px 46px rgba(0,0,0,.4); }
.release-feature-points { border-color: rgba(215,255,57,.5); background: radial-gradient(circle at 92% 12%,rgba(215,255,57,.12),transparent 32%),#242421; }
.release-feature-reorder { border-color: rgba(215,255,57,.5); background: radial-gradient(circle at 90% 10%,rgba(215,255,57,.18),transparent 40%),#242421; }
.release-feature-templates { background: radial-gradient(circle at 10% 92%,rgba(87,112,255,.22),transparent 38%),#242421; }
.release-feature-tracking { flex-basis: clamp(470px,58vw,620px); border-color: rgba(230,111,218,.5); background: radial-gradient(circle at 82% 15%,rgba(230,111,218,.16),transparent 42%),#242421; }
.release-feature-tracking .tracking-captures { min-height: 0; display: flex; justify-content: center; align-items: end; gap: 14px; }
.release-feature-tracking .tracking-captures figure { flex: 0 1 205px; width: min(45%,205px); height: 335px; }
.release-feature-regular-timeline { flex-basis: clamp(470px,58vw,620px); }
.release-feature-regular-timeline figure { align-self: center; height: 335px; }
.release-feature-regular-timeline figure img { width: 100%; height: auto; max-height: 100%; border-radius: 16px; }

.plan-comparison { padding-top: 102px; padding-bottom: 102px; }
.plan-card { min-height: 0; }
.steps { grid-template-columns: minmax(230px,.7fr) minmax(430px,1.3fr); grid-template-areas: "intro list" "privacy list"; align-items: start; }
.steps .section-intro { grid-area: intro; }
.step-list { grid-area: list; }
.privacy-note { grid-area: privacy; margin-top: 26px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.privacy-note > span { color: var(--blue); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.privacy-note p { margin: 12px 0 15px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.privacy-note strong { color: var(--ink); }
.privacy-note a { color: var(--ink); font-size: 11px; font-weight: 800; }
.community-actions { display: grid; gap: 12px; }
.community-actions a { display: flex; min-height: 150px; padding: 24px; flex-direction: column; justify-content: space-between; border: 1px solid #383834; border-radius: 20px; background: #242421; color: #fff; transition: transform .2s,border-color .2s; }
.community-actions a:hover { border-color: var(--lime); transform: translateY(-3px); }
.community-actions a > span { color: var(--lime); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.community-actions a strong { font-size: 25px; letter-spacing: -.04em; }
.community-actions a i { color: #96968f; font-size: 11px; font-style: normal; }
.community-actions .reels-mode { background: var(--lime); color: var(--ink); }
.community-actions .reels-mode > span,.community-actions .reels-mode i { color: #555826; }

@media (max-width: 980px) {
  .hero-layout { grid-template-columns: minmax(0,1fr) minmax(330px,.7fr); gap: 40px; }
  .hero-product { min-height: 580px; }
  .hero-phone { width: 235px; }
  .hero-timeline { width: min(370px,94%); }
  .hero-sticker { width: 72px; height: 72px; font-size: 10px; }
  .story-heading { column-gap: 40px; }
  .release-feature { flex-basis: 470px; }
  .release-feature-tracking,.release-feature-regular-timeline { flex-basis: 540px; }
}

@media (max-width: 760px) {
  .hero { padding: 46px 0 66px; }
  .hero-layout { grid-template-columns: 1fr; gap: 42px; }
  .hero h1 { font-size: clamp(52px,15vw,76px); }
  .hero-actions { align-items: flex-start; }
  .hero-product { min-height: 560px; border-radius: 25px; box-shadow: 7px 7px 0 var(--blue); }
  .hero-product-label { top: 20px; left: 20px; }
  .hero-phone { top: 55px; width: 235px; }
  .hero-timeline { right: -28px; bottom: 30px; width: min(340px,94%); }
  .hero-sticker { top: 80px; right: 14px; }
  .hero .site-stats { margin-top: 48px; }
  .app-story { width: calc(100% - 32px); margin-bottom: 78px; padding: 52px 18px 18px; border-radius: 25px; }
  .story-heading { display: block; }
  .story-heading h2 { font-size: clamp(45px,13vw,64px); }
  .story-heading > p:last-child { margin-top: 22px; }
  .feature-rail-toolbar { margin-top: 34px; }
  .feature-release-grid { margin: 12px -18px -10px; padding: 0 18px 24px; scroll-padding-inline: 18px; }
  .feature-release-grid::-webkit-scrollbar-track { margin-inline: 18px; }
  .release-feature { min-height: 610px; flex-basis: min(90vw,390px); padding: 20px 18px 16px; }
  .release-feature figure { height: 430px; }
  .release-feature-tracking,.release-feature-regular-timeline { flex-basis: min(88vw,390px); }
  .release-feature-tracking .tracking-captures figure { width: min(46%,180px); height: 300px; }
  .release-feature-regular-timeline figure { height: 300px; }
  .steps { grid-template-columns: 1fr; grid-template-areas: "intro" "list" "privacy"; }
  .privacy-note { margin-top: 0; }
  .community-actions a { min-height: 130px; }
}

@media (max-width: 480px) {
  .hero-product { min-height: 525px; }
  .hero-phone { width: 215px; }
  .hero-timeline { width: 310px; }
  .hero-timeline figcaption span { display: none; }
  .feature-rail-toolbar > span { max-width: 175px; font-size: 9px; line-height: 1.4; }
  .feature-rail-button { width: 38px; height: 38px; }
  .release-feature { min-height: 580px; }
  .release-feature figure { height: 400px; }
  .release-feature-tracking .tracking-captures figure { height: 280px; }
  .release-feature-regular-timeline figure { height: 270px; }
}
/* Subscription and creator-access surfaces */
.access-card{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(280px,1.5fr) minmax(180px,.7fr);gap:22px;align-items:center;margin:18px 0;padding:22px;border:1px solid rgba(122,144,255,.25);border-radius:22px;background:linear-gradient(135deg,rgba(82,105,233,.17),rgba(18,22,32,.96) 54%,rgba(123,238,208,.08));box-shadow:0 18px 52px rgba(0,0,0,.22)}
.access-badge,.access-offer{display:flex;flex-direction:column;gap:5px}.access-badge>span{align-self:flex-start;padding:6px 10px;border-radius:8px;background:#88f1d2;color:#071510;font-size:.7rem;font-weight:900;letter-spacing:.12em}.access-badge strong{color:#fff;font-size:1.05rem}.access-card small,.access-card p{color:#adb6ca}.access-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:#f4f6ff;font-size:.84rem}.access-progress p{margin:8px 0 0;font-size:.82rem}.access-offer{padding:20px 22px;border:1px solid rgba(184,197,255,.18);border-radius:15px;background:rgba(9,13,24,.48)}.access-offer>b{color:#fff;font-size:1.35rem}.access-offer>b small{font-size:.72rem}.access-offer>span{font-weight:750;color:#cbd4ff}.access-free{border-color:rgba(122,144,255,.38);background:linear-gradient(135deg,rgba(65,83,181,.27),rgba(18,22,32,.98) 58%,rgba(107,128,235,.14))}.access-free .access-badge>span{background:#d7ff39;color:#151a08}.access-achievement,.access-admin_reward{border-color:rgba(136,241,210,.42)}
.access-store-link{min-height:38px;margin-top:10px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:10px;background:#d7ff39;color:#151a08;font-size:.76rem;font-weight:850}.access-store-link:hover{background:#fff}.access-store-link span{font-size:1rem}
.creator-access-table{display:grid;gap:10px}.creator-access-table article{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(420px,1.3fr);gap:20px;align-items:center;padding:14px 16px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.025)}.creator-access-table article>div{display:flex;flex-direction:column;gap:3px}.creator-access-table article span,.creator-access-table article small,.admin-hint{color:var(--muted)}.creator-access-table form{display:grid;grid-template-columns:1fr auto auto;gap:8px}.creator-access-table input,.creator-access-table select{min-width:0;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:#111622;color:#eef2ff;padding:9px 10px}.admin-hint{font-size:.82rem}
@media(max-width:760px){.access-card{grid-template-columns:1fr}.access-offer{padding:18px;border:1px solid rgba(184,197,255,.18)}.creator-access-table article{grid-template-columns:1fr}.creator-access-table form{grid-template-columns:1fr}.creator-access-table button{width:100%}.admin-provider-grid{grid-template-columns:1fr}.admin-announcement-form{grid-template-columns:1fr}.admin-announcement-form label.is-wide{grid-column:auto}.admin-announcement-list>article{grid-template-columns:1fr}.admin-announcement-reach{text-align:left}.admin-announcement-submit{grid-column:auto;justify-content:stretch}.admin-announcement-submit button{flex:1}}
@media(max-width:1100px){.admin-analytics-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.admin-analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.admin-profile-conversion{align-items:flex-start;flex-direction:column}.admin-profile-conversion-stats{width:100%;justify-content:space-between}}
@media(max-width:760px){.admin-funnel{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-installation-bars{gap:2px}.admin-installation-day> b{font-size:7px}}

/* Focused sales landing */
.header-store-link { flex: 0 0 auto; min-height: 42px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 12px/1 Manrope,sans-serif; box-shadow: 0 8px 22px rgba(23,23,19,.13); transition: transform .18s,background .18s; }
.header-store-link svg { width: 14px; height: 14px; flex: 0 0 auto; fill: currentColor; }
.header-store-link:hover { background: var(--blue); transform: translateY(-1px); }
.header-profile-link { flex: 0 0 auto; min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.7); font: 700 12px/1 Manrope,sans-serif; }
.header-profile-link:hover { border-color: var(--blue); color: var(--blue); }
.header-changelog-link { display: none; }
.mobile-account-nav { display: none; }
.mobile-site-menu { display: none; }
.hero-proofline { max-width: 570px; margin: 36px 0 0; padding: 17px 0 0 22px; border-top: 1px solid var(--line); border-left: 3px solid var(--lime); color: var(--muted); font-size: 13px; line-height: 1.55; }
.hero-proofline strong { display: block; margin-bottom: 3px; color: var(--ink); font: 700 14px/1.3 Manrope,sans-serif; }
.release-feature-gif { border-color: rgba(56,105,247,.45); background: radial-gradient(circle at 88% 12%,rgba(56,105,247,.2),transparent 38%),#242421; }
.release-feature-tracking { flex-basis: clamp(330px,39vw,440px); }
.release-feature-tracking figure { height: 335px; }
.plan-price { position: relative; z-index: 1; margin-top: 25px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; }
.plan-price > strong { color: var(--lime); font: 700 35px/1 Manrope,sans-serif; letter-spacing: -.05em; }
.plan-price > span { color: #d0d0c9; font-size: 13px; }
.plan-price > small { width: 100%; margin-top: 3px; color: #85857e; font-size: 10px; line-height: 1.4; }
.clip-library { padding-top: 88px; padding-bottom: 88px; }
.library-heading { margin-bottom: 34px; }
.clip-preview-rail { display: flex; gap: 14px; padding: 0 0 22px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; scrollbar-color: var(--lime) #3a3a35; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.clip-preview-rail::-webkit-scrollbar { height: 6px; }
.clip-preview-rail::-webkit-scrollbar-track { border-radius: 999px; background: #3a3a35; }
.clip-preview-rail::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--lime); }
.clip-preview-rail .clip-card { flex: 0 0 clamp(270px,28vw,355px); scroll-snap-align: start; }
.clip-showcase-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; }
.clip-showcase-actions a { min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #565650; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 700; }
.clip-showcase-actions a:hover { border-color: var(--lime); color: var(--lime); }
.clip-showcase-actions .clip-reels-link { border-color: var(--lime); background: var(--lime); color: var(--ink); }
.clip-showcase-actions .clip-reels-link:hover { background: #fff; color: var(--ink); }
.final-cta { width: min(1180px,calc(100% - 48px)); min-height: 570px; margin: 92px auto; padding: clamp(42px,6vw,76px); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.7fr); gap: 50px; align-items: center; border-radius: 34px; background: var(--lime); box-shadow: 10px 10px 0 var(--blue); }
.final-cta::after { position: absolute; right: -12%; bottom: -45%; width: 520px; height: 520px; content: ""; border-radius: 50%; background: rgba(56,105,247,.16); }
.final-cta-copy { position: relative; z-index: 2; }
.final-cta .section-kicker { color: #555826; }
.final-cta h2 { margin: 14px 0 22px; font: 600 clamp(48px,6vw,78px)/.91 Manrope,sans-serif; letter-spacing: -.062em; }
.final-cta h2 em { color: var(--blue); font-style: normal; }
.final-cta-copy > p:not(.section-kicker) { max-width: 580px; margin-bottom: 28px; color: rgba(23,23,19,.7); font-size: 16px; line-height: 1.6; }
.final-cta .app-store-button { width: fit-content; background: var(--ink); }
.final-cta figure { align-self: end; justify-self: center; z-index: 1; width: min(100%,265px); margin: 0 0 -150px; transform: rotate(4deg); }
.final-cta figure img { display: block; width: 100%; height: auto; border: 2px solid rgba(255,255,255,.5); border-radius: 34px; box-shadow: 0 28px 64px rgba(23,23,19,.32); }

@media (max-width: 760px) {
  .site-header { width: calc(100% - 28px); height: 70px; min-height: 70px; padding: 0; flex-wrap: nowrap; gap: 9px; }
  .site-header .brand { gap: 8px; font-size: 18px; }
  .site-header .brand-mark { width: 23px; height: 23px; }
  .site-header .site-nav,.site-header .header-actions { display: none; }
  .site-header > .mobile-site-menu ~ .account-actions { display: none; }
  .landing-header .header-actions { display: none; }
  .landing-header > .header-changelog-link,
  .landing-header > .header-profile-link,
  .landing-header > .header-store-link { display: none; }
  .mobile-site-menu { position: relative; display: block; margin-left: auto; }
  .mobile-site-menu summary { min-width: 86px; min-height: 42px; padding: 0 13px; display: grid; grid-template-columns: 17px auto; grid-template-rows: repeat(3,4px); column-gap: 8px; align-content: center; align-items: center; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer; list-style: none; }
  .mobile-site-menu summary::-webkit-details-marker { display: none; }
  .mobile-site-menu summary > span { width: 17px; height: 1.5px; display: block; grid-column: 1; border-radius: 2px; background: var(--lime); transition: transform .18s,opacity .18s; }
  .mobile-site-menu summary > b { grid-column: 2; grid-row: 1 / 4; font: 700 11px/1 Manrope,sans-serif; }
  .mobile-site-menu[open] summary > span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .mobile-site-menu[open] summary > span:nth-child(2) { opacity: 0; }
  .mobile-site-menu[open] summary > span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
  .mobile-site-menu nav { position: fixed; z-index: 100; top: 64px; right: 14px; left: 14px; padding: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.97); box-shadow: 0 24px 70px rgba(23,23,19,.22); backdrop-filter: blur(18px); }
  .mobile-site-menu nav a { min-height: 48px; padding: 0 13px; display: flex; align-items: center; justify-content: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: 700 12px/1.1 Manrope,sans-serif; text-align: left; }
  .mobile-site-menu nav a:active { border-color: var(--blue); color: var(--blue); }
  .mobile-site-menu .mobile-menu-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-site-menu .mobile-menu-icon.is-filled { fill: currentColor; stroke: none; }
  .mobile-site-menu nav .mobile-site-menu-reels { grid-column: 1 / -1; min-height: 58px; border-color: var(--ink); background: var(--ink); color: white; }
  .mobile-site-menu-reels .mobile-menu-icon { width: 22px; height: 22px; color: var(--lime); }
  .mobile-site-menu-reels > span { display: grid; gap: 3px; }
  .mobile-site-menu-reels small { color: #aaa9a1; font: 500 9px/1 "DM Sans",sans-serif; }
  .mobile-site-menu nav .mobile-site-menu-store { grid-column: 1 / -1; border-color: var(--ink); background: var(--lime); }
  .header-changelog-link { display: none; }
  .header-store-link { min-height: 38px; margin-left: auto; padding: 0 13px; font-size: 10px; }
  .scroll-nav,.back-to-top { display: none; }
  .hero { padding: 38px 0 52px; }
  .hero-layout { gap: 30px; }
  .hero h1 { margin: 18px 0 20px; font-size: clamp(46px,13.1vw,60px); line-height: .91; }
  .hero-copy { font-size: 16px; line-height: 1.5; }
  .hero-actions { margin-top: 24px; gap: 12px; }
  .hero-proofline { margin-top: 24px; padding: 13px 0 0 15px; }
  .hero-product { min-height: 440px; border-radius: 24px; }
  .hero-phone { top: 50px; width: 188px; }
  .hero-timeline { right: -24px; bottom: 24px; width: min(285px,88%); }
  .hero-sticker { display: none; }
  .app-story { margin-bottom: 0; padding-top: 44px; }
  .story-heading h2 { font-size: clamp(40px,11.5vw,53px); }
  .story-heading > p:last-child { margin-top: 16px; }
  .release-feature-tracking { flex-basis: min(82vw,340px); }
  .release-feature-tracking figure { height: 300px; }
  .plan-comparison { padding-top: 64px; padding-bottom: 68px; }
  .plan-heading h2 { font-size: clamp(40px,12vw,54px); }
  .plan-heading > p:last-child { margin-top: 18px; font-size: 15px; }
  .plan-grid { margin-top: 30px; gap: 14px; }
  .plan-card { padding: 24px 21px; }
  .clip-library { padding-top: 66px; padding-bottom: 66px; }
  .library-heading { margin-bottom: 28px; }
  .library-heading h2 { font-size: 43px; }
  .library-heading > p { font-size: 15px; }
  .clip-preview-rail { width: calc(100vw - 24px); margin-right: -8px; gap: 11px; }
  .clip-preview-rail .clip-card { flex-basis: min(78vw,300px); }
  .clip-showcase-actions { display: grid; grid-template-columns: 1fr; }
  .clip-showcase-actions a { width: 100%; }
  .final-cta { width: calc(100% - 32px); min-height: 650px; margin: 64px auto 70px; padding: 42px 24px 0; grid-template-columns: 1fr; gap: 28px; border-radius: 25px; box-shadow: 7px 7px 0 var(--blue); }
  .final-cta h2 { font-size: clamp(42px,12vw,57px); }
  .final-cta-copy > p:not(.section-kicker) { font-size: 14px; }
  .final-cta figure { width: 195px; margin-bottom: -125px; }
  footer { min-height: 0; }
}

@media (max-width: 390px) {
  .header-changelog-link { padding-inline: 9px; font-size: 10px; }
  .header-profile-link { padding-inline: 11px; }
  .header-store-link { padding-inline: 10px; }
  .site-header .brand > span:last-child { display: none; }
  .hero-product { min-height: 410px; }
  .hero-phone { width: 174px; }
  .hero-timeline { width: 265px; }
}

/* Clear, compact account navigation and creator profile on phones. */
@media (max-width: 760px) {
  .site-header.account-context-header { height: auto; min-height: 0; padding: 11px 0 9px; flex-wrap: wrap; gap: 10px; }
  .account-context-header .brand { flex: 0 0 auto; }
  .account-context-header .site-nav,.account-context-header .desktop-account-nav { display: none; }
  .mobile-account-nav { order: 3; width: 100%; padding-top: 9px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 6px; border-top: 1px solid var(--line); }
  .mobile-account-nav > a { min-height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.7); color: var(--muted); font-size: 12px; font-weight: 700; }
  .mobile-account-nav > a.active { border-color: var(--ink); background: var(--ink); color: var(--lime); }
  .mobile-account-nav .language-switcher { align-self: center; grid-template-columns: repeat(2,38px); }
  .mobile-account-nav .language-switcher button { width: 38px; height: 32px; }
  .mobile-account-nav.is-profile-page { grid-template-columns: minmax(0,1fr) auto; }
  .mobile-account-nav.is-settings-page { grid-template-columns: minmax(0,1fr); }
  .account-chip { max-width: 122px; padding-right: 9px; }
  .account-chip > b { display: grid; }
  .account-chip > b > small { display: none; }
  .account-menu-panel { position: fixed; top: 66px; right: 14px; width: min(300px,calc(100vw - 28px)); padding: 9px; border-radius: 16px; box-shadow: 0 22px 60px rgba(23,23,19,.22); }
  .account-menu-panel a,.account-menu-panel button { min-height: 46px; padding: 10px 12px; }
  .account-language { min-height: 56px; padding: 8px 12px; }
  .language-switcher { grid-template-columns: repeat(2,40px); }
  .language-switcher button { width: 40px; height: 34px; }
  .creator-dashboard { padding-top: 34px; }
  .creator-dashboard-header { width: 100%; padding-bottom: 22px; gap: 18px; }
  .creator-identity { width: 100%; align-items: center; gap: 14px; }
  .creator-identity > div:last-child { min-width: 0; }
  .creator-identity h1 { margin-block: 2px 5px; font-size: clamp(34px,10vw,44px); }
  .creator-identity p:last-child { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard-header-actions { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-header-actions > :only-child { grid-column: 1 / -1; }
  .dashboard-settings-link,.dashboard-admin-link { width: 100%; padding-inline: 12px; }
  .creator-stat-strip { margin-bottom: 20px; }
  .creator-stat-strip article { min-height: 76px; padding: 13px 15px; }
  .creator-stat-strip strong { font-size: 27px; }
  .access-card { margin: 20px 0 22px; padding: 18px; gap: 18px; border-radius: 18px; }
  .access-progress > div:first-child { align-items: flex-start; flex-direction: column; gap: 5px; }
  .access-offer { padding: 16px; }
  .creator-game-card { margin: 0 0 22px; padding: 19px; border-radius: 18px; }
  .meme-manager-heading .primary-button { width: 100%; min-height: 46px; }
  .upload-workspace { margin-top: 20px; padding: 22px 18px; }
  .settings-language-card { padding: 18px; align-items: stretch; flex-direction: column; gap: 16px; }
  .settings-language-card .language-switcher { width: 100%; grid-template-columns: repeat(2,1fr); }
  .settings-language-card .language-switcher button { width: auto; height: 40px; }
}

@media (max-width: 390px) {
  .account-context-header .brand > span:last-child { display: inline; }
  .mobile-account-nav { grid-template-columns: 1fr 1fr; }
  .mobile-account-nav .language-switcher { grid-column: 1 / -1; justify-self: stretch; grid-template-columns: repeat(2,1fr); }
  .mobile-account-nav .language-switcher button { width: auto; }
  .mobile-account-nav.is-profile-page { grid-template-columns: minmax(0,1fr) auto; }
  .mobile-account-nav.is-profile-page .language-switcher { grid-column: auto; justify-self: auto; grid-template-columns: repeat(2,38px); }
  .mobile-account-nav.is-profile-page .language-switcher button { width: 38px; }
  .mobile-account-nav.is-settings-page { grid-template-columns: minmax(0,1fr); }
  .creator-avatar.large { width: 56px; height: 56px; flex: 0 0 56px; }
  .creator-identity h1 { font-size: 32px; }
  .dashboard-header-actions { grid-template-columns: 1fr; }
}

/* Meme Reels → App Store: header CTA and a once-per-session promo sheet. */
.reels-header-actions { display: flex; align-items: center; gap: 8px; }
.reels-get-app { height: 38px; padding: 0 13px 0 11px; display: inline-flex; align-items: center; gap: 7px; border-radius: 12px; background: var(--lime); color: var(--ink); font: 700 12px/1 Manrope,sans-serif; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.reels-get-app svg { width: 16px; height: 16px; fill: currentColor; }
.reels-get-app:hover { background: #fff; }
.reels-promo { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(5,5,5,.72); backdrop-filter: blur(10px); }
.reels-promo[hidden] { display: none; }
.reels-promo-card { width: min(380px,100%); padding: 28px 24px 18px; display: grid; justify-items: start; gap: 14px; border: 1px solid rgba(215,255,57,.4); border-radius: 26px; background: #141412; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: reels-promo-in .32s cubic-bezier(.2,.9,.25,1.15) both; }
.reels-promo-kicker { margin: 0; color: var(--lime); font-size: 10px; letter-spacing: .1em; }
.reels-promo-card h2 { margin: 0; font-size: 34px; line-height: .98; letter-spacing: -.045em; }
.reels-promo-card > p:not(.reels-promo-kicker) { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.45; }
.reels-promo-store { width: 100%; min-height: 58px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 11px; border-radius: 16px; background: var(--lime); color: var(--ink); }
.reels-promo-store svg { width: 26px; height: 26px; fill: currentColor; }
.reels-promo-store > span { display: grid; gap: 1px; }
.reels-promo-store small { font: 500 9px/1 Manrope,sans-serif; letter-spacing: .04em; }
.reels-promo-store strong { font: 700 19px/1.05 Manrope,sans-serif; letter-spacing: -.03em; }
.reels-promo-dismiss { width: 100%; min-height: 46px; border: 0; border-radius: 14px; background: transparent; color: rgba(255,255,255,.7); font: 600 14px/1 Manrope,sans-serif; cursor: pointer; }
.reels-promo-dismiss:hover { color: #fff; background: rgba(255,255,255,.06); }
@keyframes reels-promo-in { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .reels-promo-card { animation: none; } }
@media (max-width: 480px) {
  .reels-header .brand > span:last-child { font-size: 16px; }
  .reels-get-app { height: 36px; padding: 0 11px 0 9px; font-size: 11px; }
}

/* Admin: work waiting for a decision comes before analytics. */
.admin-attention { margin: 0 0 26px; padding: 18px; border: 1px solid rgba(255,139,123,.45); border-radius: 16px; background: linear-gradient(135deg,rgba(255,139,123,.1),rgba(32,32,29,.6)); }
.admin-attention.is-clear { border-color: #3a3a35; background: #20201d; }
.admin-attention-heading .section-kicker { margin: 0 0 6px; }
.admin-attention-heading h2 { margin: 0 0 14px; font-size: 22px; letter-spacing: -.03em; }
.admin-attention-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.admin-attention-grid a { min-width: 0; min-height: 64px; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid #3a3a35; border-radius: 12px; background: #171713; color: #a7a79f; }
.admin-attention-grid b { color: #6f6f68; font: 800 26px/1 Manrope,sans-serif; }
.admin-attention-grid span { font-size: 13px; }
.admin-attention-grid i { color: #6f6f68; font-style: normal; }
.admin-attention-grid a.has-work { border-color: rgba(255,139,123,.6); color: white; }
.admin-attention-grid a.has-work b { color: #ff8b7b; }
.admin-attention-grid a:hover { border-color: var(--lime); }
.admin-mobile-pending { display: none; }
@media (max-width: 900px) {
  .admin-mobile-header .global-meme-search { display: none; }
  .admin-mobile-pending { margin-left: auto; padding: 9px 12px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: #ff8b7b; color: #171713; font: 700 12px/1 Manrope,sans-serif; white-space: nowrap; }
  .admin-mobile-pending + .account-actions { margin-left: 8px; }
}
@media (max-width: 760px) {
  .admin-attention { padding: 14px; }
  .admin-attention-grid { grid-template-columns: 1fr; }
  .admin-attention-grid a { min-height: 54px; }
}

/* Reels: "Use" opens the meme in the app. */
.reel-action.reel-use, .reel-action.reel-use small { color: var(--lime); }