:root {
  --ink: #17131f;
  --muted: #746c80;
  --soft: #f8f6fb;
  --violet: #7c3aed;
  --violet-deep: #6527d7;
  --pink: #ec4899;
  --line: rgba(38, 22, 55, 0.09);
  --shadow: 0 22px 70px rgba(87, 40, 132, 0.13);
  --font: "Helvetica Neue", "Neue Haas Grotesk Text Pro", Arial, sans-serif;
}
[hidden] { display:none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.ambient {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .16;
}
.ambient::before { top: -22rem; left: -12rem; background: #9d4edd; }
.ambient::after { right: -17rem; bottom: -24rem; background: #ff70b7; }

.topbar {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 4vw;
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(18px);
  transition: box-shadow .25s ease, background .25s ease;
}
.topbar.scrolled { box-shadow: 0 10px 35px rgba(40, 20, 60, .06); background: rgba(255,255,255,.9); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-weight: 760; letter-spacing: -.03em; line-height: 1; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  color: white;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  box-shadow: 0 8px 22px rgba(124,58,237,.25);
}
.brand-mark svg { width: 17px; height: 17px; }
.nav { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(246,242,250,.78); }
.nav a { padding: 9px 17px; border-radius: 999px; color: var(--muted); font-size: .9rem; font-weight: 590; transition: .2s ease; }
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--violet-deep); background: white; box-shadow: 0 4px 18px rgba(60,30,80,.08); }
.account { justify-self: end; border: 0; background: transparent; color: var(--muted); font-size: .9rem; font-weight: 650; cursor: pointer; padding: 10px 4px; }
.account:hover { color: var(--violet); }

.home {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 120px 20px 72px;
}
.hero { width: min(820px, 100%); text-align: center; transform: translateY(-2vh); }
.eyebrow { margin: 0 0 18px; color: var(--violet); font-size: .8rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0 auto; max-width: 720px; font-size: clamp(2.35rem, 5.5vw, 4.35rem); line-height: 1.03; letter-spacing: -.062em; font-weight: 760; }
.gradient-text { color: transparent; background: linear-gradient(110deg, var(--violet-deep), var(--pink)); background-clip: text; -webkit-background-clip: text; }
.link-form {
  display: flex;
  gap: 10px;
  width: min(720px, 100%);
  margin: 40px auto 0;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 24px 75px rgba(97,49,139,.14), 0 0 0 1px rgba(80,35,111,.06);
}
.link-form:focus-within { box-shadow: 0 28px 80px rgba(124,58,237,.18), 0 0 0 2px rgba(124,58,237,.22); }
.link-form input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; padding: 0 18px; color: var(--ink); font-size: 1rem; }
.link-form input::placeholder { color: #9b94a5; }
.primary {
  border: 0;
  color: white;
  border-radius: 15px;
  padding: 15px 21px;
  font-weight: 690;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(120deg, var(--violet), var(--pink));
  box-shadow: 0 12px 25px rgba(124,58,237,.22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.primary:hover { transform: translateY(-1px); box-shadow: 0 15px 32px rgba(124,58,237,.3); }
.primary:active { transform: translateY(0); }
.microcopy { max-width: 620px; margin: 20px auto 0; color: var(--muted); font-size: .98rem; line-height: 1.65; }
.form-error { min-height: 22px; margin: 12px 0 -8px; color: #c72d69; font-size: .9rem; }

.page { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 136px 0 80px; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.page-head h1 { margin: 0; max-width: 620px; font-size: clamp(2.3rem, 5vw, 4rem); }
.page-head p { margin: 14px 0 0; max-width: 580px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.search { width: min(310px, 100%); padding: 14px 18px; border: 0; outline: 0; border-radius: 16px; background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(70,35,90,.04); }
.search:focus { box-shadow: inset 0 0 0 2px rgba(124,58,237,.24); }
.filters { display: flex; align-items: flex-start; gap: 9px; padding: 0 0 6px; margin-bottom: 26px; }
.filter-chips { display: flex; flex: 1; min-width: 0; gap: 9px; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter { flex: none; border: 0; border-radius: 999px; padding: 10px 16px; background: #f7f4fa; color: var(--muted); font-size: .9rem; font-weight: 630; cursor: pointer; transition: .2s ease; }
.filter:hover { color: var(--violet); }
.filter.active { color: white; background: linear-gradient(115deg, var(--violet), var(--pink)); box-shadow: 0 9px 24px rgba(124,58,237,.18); }
.filter-menu { position: relative; flex: none; margin-left: auto; }
.filter-menu-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 39px; padding: 9px 13px; border: 1px solid rgba(68,43,84,.1); border-radius: 999px; color: #403849; background: #fff; box-shadow: 0 6px 20px rgba(48,25,64,.06); cursor: pointer; font-size: .86rem; font-weight: 650; transition: border-color .2s ease,color .2s ease,box-shadow .2s ease; }
.filter-menu-trigger:hover,.filter-menu-trigger.active { border-color: rgba(124,58,237,.25); color: var(--violet-deep); box-shadow: 0 8px 24px rgba(78,37,105,.1); }
.filter-menu-trigger:focus-visible { outline: 3px solid rgba(124,58,237,.2); outline-offset: 2px; }
.filter-menu-trigger svg { width: 18px; height: 18px; }
.filter-count { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; color: #fff; background: linear-gradient(120deg,var(--violet),var(--pink)); font-size: .64rem; font-style: normal; }
.filter-panel { position: absolute; z-index: 25; top: calc(100% + 10px); right: 0; width: min(350px,calc(100vw - 40px)); padding: 20px; border: 1px solid rgba(56,31,73,.09); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 24px 65px rgba(48,25,64,.17); }
.filter-panel[hidden] { display: none; }
.filter-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.filter-panel-head > strong { font-size: .98rem; letter-spacing: -.02em; }
.filter-panel-head button { border: 0; padding: 4px; color: var(--violet-deep); background: transparent; cursor: pointer; font-size: .75rem; font-weight: 680; }
.filter-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-panel legend { width: 100%; margin-bottom: 10px; color: #8a8190; font-size: .66rem; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.platform-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.platform-options label { cursor: pointer; }
.platform-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.platform-options span { display: block; padding: 8px 10px; border: 1px solid rgba(61,38,76,.09); border-radius: 9px; color: #6f6677; background: #faf8fb; font-size: .75rem; font-weight: 630; transition: .18s ease; }
.platform-options input:checked + span { border-color: rgba(124,58,237,.24); color: var(--violet-deep); background: rgba(124,58,237,.08); box-shadow: inset 0 0 0 1px rgba(124,58,237,.06); }
.platform-options input:focus-visible + span { outline: 3px solid rgba(124,58,237,.18); outline-offset: 2px; }
.sort-options { display: grid; gap: 7px; margin-top: 20px !important; padding-top: 18px !important; border-top: 1px solid var(--line) !important; }
.sort-options label { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; cursor: pointer; transition: background .18s ease; }
.sort-options label:hover { background: #faf8fb; }
.sort-options input { width: 16px; height: 16px; margin: 0; accent-color: var(--violet); }
.sort-options label > span { display: grid; gap: 2px; }
.sort-options strong { color: #342d39; font-size: .78rem; }
.sort-options small { color: #928a98; font-size: .67rem; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card { border-radius: 24px; background: white; overflow: hidden; box-shadow: 0 16px 48px rgba(48,25,64,.085); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 23px 60px rgba(59,28,82,.14); }
.thumb { position: relative; aspect-ratio: 16/10; display: flex; align-items: end; padding: 20px; overflow: hidden; color: white; background: linear-gradient(135deg, #5f2bd4, #c33ea0); }
.thumb.t2 { background: linear-gradient(135deg, #151024, #7c3aed 58%, #f05a9d); }
.thumb.t3 { background: linear-gradient(135deg, #ef3a82, #7f37dd 70%, #391a76); }
.thumb.t4 { background: linear-gradient(135deg, #7c3aed, #5261ff 58%, #ef4b9a); }
.thumb.t5 { background: linear-gradient(135deg, #181121, #4e248f 54%, #dd3d8d); }
.thumb.t6 { background: linear-gradient(135deg, #a437dc, #f24691 62%, #ff8f6c); }
.thumb::before { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; top: -80px; right: -40px; background: rgba(255,255,255,.15); filter: blur(2px); }
.thumb-word { position: relative; font-size: clamp(1.45rem, 3vw, 2.1rem); font-weight: 760; letter-spacing: -.045em; line-height: 1.02; }
.type { position: absolute; top: 16px; left: 16px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(10px); font-size: .76rem; font-weight: 700; }
.card-media-labels { position: absolute; z-index: 5; top: 0; left: 0; display: flex; align-items: flex-start; gap: 8px; max-width: calc(100% - 12px); }
.card-pro-mark { display: grid; place-items: center; flex: 0 0 auto; width: 58px; height: 54px; border-radius: 0 0 17px 0; background: #fff; box-shadow: 5px 6px 18px rgba(35,17,49,.08); }
.card-pro-mark img { display: block; width: 43px; height: 43px; object-fit: contain; }
.card-media-labels .type { position: relative; top: auto; left: auto; overflow: hidden; max-width: 100%; margin-top: 11px; color: #fff; background: rgba(28,14,39,.78); box-shadow: 0 5px 16px rgba(20,9,29,.13); text-overflow: ellipsis; white-space: nowrap; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.14); }
.card-body { padding: 19px 20px 21px; }
.creator { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--muted); font-size: .82rem; }
.avatar { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; overflow: hidden; border-radius: 50%; color: white; object-fit: cover; font-size: .7rem; font-weight: 750; background: linear-gradient(135deg, var(--violet), var(--pink)); }
.type.live-kind { background: rgba(38,27,47,.76); }
.card h2 { margin: 0; font-size: 1.05rem; line-height: 1.35; letter-spacing: -.02em; }
.meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 15px; color: #8d8496; font-size: .79rem; }
.empty { display: none; padding: 70px 20px; text-align: center; color: var(--muted); }

.overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(255,255,255,.58); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.overlay.open { opacity: 1; pointer-events: auto; }
.loader-wrap { text-align: center; color: var(--muted); }
.spinner { width: 46px; height: 46px; margin: 0 auto 17px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 10%, var(--violet), var(--pink), transparent 92%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.auth-card { position: relative; width: min(430px, 100%); padding: 32px; border-radius: 26px; background: rgba(255,255,255,.98); box-shadow: var(--shadow), 0 0 80px rgba(216,64,151,.08); transform: translateY(12px) scale(.98); transition: transform .25s ease; }
.overlay.open .auth-card { transform: none; }
.close { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f7f4fa; color: var(--muted); cursor: pointer; font-size: 1.2rem; }
.auth-card h2 { margin: 4px 35px 8px 0; font-size: 1.65rem; letter-spacing: -.04em; }
.auth-card > p { margin: 0 0 24px; color: var(--muted); line-height: 1.55; }
.auth-card label { display: block; margin: 15px 0 7px; font-size: .86rem; font-weight: 650; }
.auth-card input { width: 100%; padding: 14px 15px; border: 0; outline: 0; border-radius: 13px; background: var(--soft); box-shadow: inset 0 0 0 1px rgba(50,20,70,.05); }
.auth-card input:focus { box-shadow: inset 0 0 0 2px rgba(124,58,237,.24); }
.auth-card .primary { width: 100%; margin-top: 18px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 15px; background: var(--soft); }
.auth-tab { border: 0; border-radius: 11px; padding: 11px; background: transparent; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.auth-tab.active { background: white; color: var(--ink); box-shadow: 0 3px 12px rgba(50,20,70,.08); }
.auth-error { min-height: 20px; margin: 11px 0 -7px !important; color: #b4235f !important; font-size: .82rem; line-height: 1.4 !important; }
.auth-submit[disabled] { cursor: wait; opacity: .65; }
.or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #9a919f; font-size: .78rem; }
.or::before, .or::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.google { width: 100%; border: 0; border-radius: 13px; padding: 13px; background: #f7f4fa; color: var(--ink); font-weight: 650; cursor: pointer; }
.auth-note { margin: 18px 0 0 !important; text-align: center; font-size: .82rem; }
.provider-auth[hidden] { display: none; }
.provider-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 13px; color: #9a919f; font-size: .72rem; }
.provider-divider::before, .provider-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.tiktok-auth { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; border: 1px solid #211b26; border-radius: 12px; padding: 12px 15px; color: #fff; background: #17131b; box-shadow: 0 9px 24px rgba(28,20,34,.13); cursor: pointer; font-size: .86rem; font-weight: 690; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.tiktok-auth svg { width: 18px; height: 18px; color: #fff; filter: drop-shadow(1.4px 0 #25f4ee) drop-shadow(-1.4px 0 #fe2c55); }
.tiktok-auth:hover { background: #28202e; box-shadow: 0 12px 28px rgba(28,20,34,.18); transform: translateY(-1px); }
.tiktok-auth:disabled { cursor: wait; opacity: .72; transform: none; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; transform: translate(-50%, 20px); padding: 12px 18px; border-radius: 999px; color: white; background: #21172b; box-shadow: 0 12px 35px rgba(30,15,40,.22); opacity: 0; pointer-events: none; transition: .25s ease; font-size: .9rem; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 840px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .page-head { align-items: stretch; flex-direction: column; }
  .search { width: 100%; }
}
@media (max-width: 620px) {
  .topbar { height: 70px; grid-template-columns: auto 1fr; padding: 0 18px; }
  .brand span:last-child { display: none; }
  .nav { justify-self: end; }
  .nav a { padding: 8px 12px; font-size: .84rem; }
  .account { display: none; }
  .home { padding-top: 100px; }
  .hero { transform: none; }
  .eyebrow { margin-bottom: 14px; }
  h1 { font-size: clamp(2.25rem, 11vw, 3.25rem); }
  .link-form { margin-top: 30px; flex-direction: column; padding: 9px; border-radius: 20px; }
  .link-form input { min-height: 50px; text-align: center; padding: 0 10px; }
  .primary { width: 100%; }
  .microcopy { font-size: .91rem; }
  .page { width: min(100% - 28px, 1180px); padding-top: 110px; }
  .page-head { margin-bottom: 25px; }
  .cards { grid-template-columns: 1fr; gap: 18px; }
  .auth-card { padding: 27px 21px; }
}

/* Topbar image correction: contained, lossless and organically masked. */
.topbar-art {
  top: 0;
  left: auto;
  right: 0;
  width: min(66vw, 1120px);
  height: clamp(150px, 19vh, 190px);
  -webkit-mask-image: radial-gradient(ellipse 88% 125% at 100% 0%, #000 0%, rgba(0,0,0,.94) 38%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.12) 79%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 125% at 100% 0%, #000 0%, rgba(0,0,0,.94) 38%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.12) 79%, transparent 100%);
}
.topbar-art img {
  object-fit: cover;
  object-position: 63% 31%;
  opacity: .92;
  filter: saturate(1.03) contrast(1.04);
}

@media (max-width: 620px) {
  .topbar-art {
    top: 0;
    left: auto;
    right: 0;
    width: 92vw;
    height: 145px;
    -webkit-mask-image: radial-gradient(ellipse 100% 120% at 100% 0%, #000 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,.2) 76%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 120% at 100% 0%, #000 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,.2) 76%, transparent 100%);
  }
  .topbar-art img { object-position: 70% 34%; opacity: .84; }
}

/* Community topbar: intentionally independent from the home masthead. */
.community-body .community-topbar {
  height: 76px;
  padding: 0 clamp(24px, 4vw, 72px);
  border-bottom: 1px solid rgba(44, 27, 59, .07);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(42, 24, 58, .035);
}
.community-body .community-topbar.scrolled {
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 35px rgba(42, 24, 58, .075);
}
.community-topbar .wordmark,
.community-topbar .wordmark span {
  color: transparent;
  background: linear-gradient(95deg, #4338ca, #7c3aed 34%, #ec4899 82%);
  background-clip: text;
  -webkit-background-clip: text;
}
.community-topbar .nav { background: #f7f4fa; }
.community-topbar .nav a.active { color: #fff; background: linear-gradient(115deg, var(--violet), var(--pink)); box-shadow: 0 6px 18px rgba(124,58,237,.2); }
.community-topbar .account { color: #4c4652; }
.community-body .page { padding-top: 112px; }
.community-body .page-head { padding-top: 28px; }

@media (max-width: 620px) {
  .community-body .community-topbar { height: 68px; padding: 0 16px; }
  .community-topbar .nav { gap: 2px; padding: 4px; }
  .community-topbar .nav a { padding: 8px 10px; font-size: .78rem; }
  .community-body .page { padding-top: 86px; }
  .community-body .page-head { padding-top: 14px; }
}

/* Shared route chrome and soft navigation. */
@view-transition { navigation: none; }
.site-topbar { view-transition-name: lumina-topbar; }
.home main, .community-body main { view-transition-name: lumina-content; }
.community-body { overflow-x: hidden; background: #f9f9f7; }
.community-frame {
  position: relative;
  min-height: 100svh;
  padding: clamp(24px, 3.2vw, 48px) clamp(22px, 5.5vw, 88px) clamp(42px, 4vw, 68px);
  isolation: isolate;
}
.community-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -2;
  background: linear-gradient(90deg, rgba(124,58,237,.035), transparent 28%), #fff;
}
.community-frame > .topbar-art { z-index: -1; }
.community-body .site-topbar {
  position: relative;
  inset: auto;
  z-index: 4;
  height: auto;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  grid-template-columns: 1fr auto 1fr;
}
.community-body .site-topbar.scrolled { background: transparent; box-shadow: none; }
.community-body .site-topbar .nav { padding: 0; gap: clamp(18px, 3vw, 42px); background: transparent; border-radius: 0; }
.community-body .site-topbar .nav a { position: relative; padding: 7px 0 10px; border-radius: 0; color: #6f6a72; font-size: .78rem; font-weight: 560; background: transparent; box-shadow: none; }
.community-body .site-topbar .nav a.active { color: #17131f; background: transparent; box-shadow: none; }
.community-body .site-topbar .nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1.5px; background: linear-gradient(90deg, #7c3aed, #ec4899); transform-origin: left; animation: navLineIn .35s ease both; }
.community-body .site-topbar .account { padding: 7px 0; color: #38343b; font-size: .78rem; font-weight: 560; }
.community-body .page { width: min(1480px, 100%); margin: 0 auto; padding: clamp(92px, 10vw, 132px) 0 30px; }
.route-enter { animation: routeEnter .42s cubic-bezier(.22,.8,.28,1) both; }
.route-leaving { animation: routeLeave .2s ease both; pointer-events: none; }

@keyframes routeEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes routeLeave { to { opacity: 0; transform: translateY(-7px); } }
@keyframes navLineIn { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: scaleX(1); } }
::view-transition-group(lumina-topbar) { animation-duration: .38s; animation-timing-function: cubic-bezier(.22,.8,.28,1); }
::view-transition-old(lumina-content) { animation: routeLeave .2s ease both; }
::view-transition-new(lumina-content) { animation: routeEnter .42s cubic-bezier(.22,.8,.28,1) both; }

@media (max-width: 620px) {
  .community-frame { padding: 20px 18px 42px; }
  .community-frame::before { inset: 7px; }
  .community-body .site-topbar { grid-template-columns: auto 1fr; }
  .community-body .site-topbar .nav { justify-self: end; gap: 17px; }
  .community-body .site-topbar .nav a { padding: 7px 0 10px; font-size: .78rem; }
  .community-body .site-topbar .account { display: none; }
  .community-body .page { padding-top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .route-enter, .route-leaving, .community-body .site-topbar .nav a.active::after { animation: none; }
}

/* Fluxo real de divulgação e comunidade */
.community-body { min-height: 100vh; background: #fff; }
.community-body .topbar-art { position: fixed; z-index: 0; pointer-events: none; }
.community-body .topbar { background: rgba(255,255,255,.48); }
.community-body .page { position: relative; z-index: 1; width: min(1480px, calc(100% - 64px)); padding-top: 150px; }
.community-body .page-head { padding: 34px 0 10px; }
.community-body .page-head h1 { font-size: clamp(2.25rem, 4vw, 3.7rem); }
.cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.card { display: flex; min-width: 0; flex-direction: column; border: 1px solid rgba(50,20,70,.055); border-radius: 18px; }
.thumb { aspect-ratio: 16/9; padding: 0; background: linear-gradient(135deg, #6d35dc, #ea4c9a); }
.thumb > img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.card:hover .thumb > img { transform: scale(1.025); }
.thumb:has(img)::before { display: none; }
.type { z-index: 1; top: 12px; left: 12px; padding: 6px 9px; background: rgba(20,14,28,.66); }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.card h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .98rem; }
.card-description { display: -webkit-box; overflow: hidden; margin: 8px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.card .meta { margin-top: auto; padding-top: 14px; }
.account.signed-in { color: var(--violet-deep); }

/* Profile links are identities, not video thumbnails. */
.profile-promotion-card { border-color: rgba(124,58,237,.14); background: #fff; }
.profile-promotion-card .card-body { padding-top: 14px; }
.profile-promotion-media { display: grid; aspect-ratio: 16/9; place-items: center; isolation: isolate; background: radial-gradient(circle at 82% 8%,rgba(244,114,182,.42),transparent 29%),linear-gradient(128deg,#2c164b 0%,#7134dc 58%,#bd35a6 100%); }
.profile-promotion-media::before { content: ""; position: absolute; z-index: 1; inset: 0; width: auto; height: auto; border: 0; border-radius: 0; pointer-events: none; background: linear-gradient(180deg,rgba(30,12,47,.03) 38%,rgba(39,12,62,.45) 100%); filter: none; }
.profile-promotion-media::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(118deg,rgba(91,39,153,.12),transparent 48%,rgba(226,54,159,.12)); }
.profile-promotion-media > img { z-index: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; box-shadow: none; }
.profile-promotion-media > .card-media-spinner,.profile-promotion-media > img,.profile-promotion-media > .profile-promotion-symbol { grid-area: 1/1; }
.profile-promotion-media > .card-media-spinner,.profile-promotion-media > .profile-promotion-symbol { z-index: 2; }
.profile-promotion-card:hover .profile-promotion-media > img { transform: scale(1.035); }
.profile-promotion-symbol { display: grid; place-items: center; width: clamp(82px,6.2vw,96px); aspect-ratio: 1; border: 3px solid rgba(255,255,255,.94); border-radius: 50%; color: #fff; background: linear-gradient(145deg,#8b5cf6,#ec4899); box-shadow: 0 13px 30px rgba(16,4,29,.3); font-size: 2rem; font-weight: 800; }
.type.profile-kind { z-index: 3; left: 12px; right: auto; background: rgba(30,14,43,.76); }
.profile-promotion-identity { display: flex; min-width: 0; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 13px; }
.profile-promotion-identity h2 { margin: 0; font-size: 1.02rem; }
.profile-promotion-handle { overflow: hidden; max-width: 100%; color: #7138d7; font-size: .78rem; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.profile-promotion-card .card-description { margin-top: 7px; }
.profile-featured-media { display: grid; place-items: center; background: radial-gradient(circle at 70% 25%,rgba(236,72,153,.36),transparent 32%),linear-gradient(135deg,#24102f,#5b2083 55%,#8e2a91); }
.featured-card .profile-featured-media > img { width: min(46%,240px); height: auto; aspect-ratio: 1; border: 4px solid rgba(255,255,255,.9); border-radius: 50%; object-fit: cover; box-shadow: 0 24px 55px rgba(10,2,18,.34); }
.profile-featured-media > .card-media-spinner,.profile-featured-media > img,.profile-featured-media > .profile-promotion-symbol { grid-area: 1/1; }

.preview-card { position: relative; display: grid; grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr); width: min(820px, 100%); overflow: hidden; border-radius: 26px; background: white; box-shadow: var(--shadow); transform: translateY(12px) scale(.98); transition: transform .25s ease; }
.overlay.open .preview-card { transform: none; }
.preview-media { position: relative; min-height: 390px; overflow: hidden; background: linear-gradient(140deg, #34205c, #7c3aed 55%, #ec4899); }
.preview-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,8,19,.5)); }
.preview-media.profile-preview:not(.has-image)::before { content: attr(data-initial); position: absolute; z-index: 1; top: 50%; left: 50%; display: grid; place-items: center; width: 126px; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.88); border-radius: 50%; color: #fff; background: rgba(255,255,255,.13); box-shadow: 0 20px 46px rgba(15,4,27,.3); font-size: 2.75rem; font-weight: 800; transform: translate(-50%,-50%); }
.preview-media img { width: 100%; height: 100%; object-fit: cover; }
.preview-media > span { position: absolute; z-index: 2; left: 20px; bottom: 20px; padding: 7px 11px; border-radius: 999px; color: white; background: rgba(18,12,24,.67); backdrop-filter: blur(9px); font-size: .78rem; font-weight: 700; }
.preview-content { padding: 38px 34px 30px; }
.preview-kicker { margin: 0 0 10px; color: var(--violet); font-size: .75rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.preview-content h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -.035em; }
.preview-content > p:not(.preview-kicker):not(.tos-message):not(.auth-error) { margin: 13px 0 22px; color: var(--muted); line-height: 1.5; }
.terms-check { display: flex; align-items: flex-start; gap: 11px; padding: 15px; border-radius: 14px; background: var(--soft); color: #4d4656; font-size: .84rem; line-height: 1.45; cursor: pointer; }
.terms-check input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--violet); }
.terms-check a { color: var(--violet-deep); text-decoration: underline; }
.tos-message { margin: 11px 2px 0; color: #8c8394; font-size: .74rem; line-height: 1.4; }
.publish-button { width: 100%; margin-top: 10px; }
.publish-button:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }

.ad-modal-card { position: relative; display: flex; z-index: 1; flex-direction: column; gap: 16px; width: min(400px, 100%); padding: 26px 24px 22px; border-radius: 26px; background: white; box-shadow: var(--shadow); transform: translateY(12px) scale(.98); transition: transform .25s ease; }
.overlay.open .ad-modal-card { transform: none; }
.ad-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ad-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--soft); color: var(--violet-deep); font-size: .72rem; font-weight: 760; letter-spacing: .03em; text-transform: uppercase; }
.ad-badge img { display: block; width: 18px; height: 18px; }
.ad-timer-count { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--soft); color: var(--violet); font-size: .82rem; font-weight: 760; font-variant-numeric: tabular-nums; }
.ad-slot .card { box-shadow: none; border-radius: 18px; }
.ad-slot .card:hover { transform: none; }
.ad-progress { position: relative; height: 6px; border-radius: 999px; overflow: hidden; background: var(--soft); }
.ad-progress i { position: absolute; inset: 0; width: 0%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--pink)); }
.ad-fineprint { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.4; text-align: center; }
@media (max-width: 460px) { .ad-modal-card { padding: 22px 18px 18px; } }

@media (max-width: 1180px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 880px) {
  .community-body .page { width: min(100% - 36px, 1480px); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-card { grid-template-columns: 1fr; max-height: calc(100vh - 32px); overflow-y: auto; }
  .preview-media { min-height: 220px; max-height: 280px; }
}
@media (max-width: 620px) {
  .community-body .page { width: min(100% - 28px, 1480px); padding-top: 104px; }
  .community-body .page-head { padding-top: 20px; }
  .cards { grid-template-columns: 1fr; }
  .preview-content { padding: 28px 21px 22px; }
  .preview-media { min-height: 190px; }
}

/* Image-led masthead and final interaction details. */
.topbar-art {
  position: absolute;
  z-index: -1;
  top: 10px;
  left: 10px;
  right: 10px;
  height: clamp(190px, 28vh, 285px);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.96) 42%, rgba(0,0,0,.3) 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.96) 42%, rgba(0,0,0,.3) 76%, transparent 100%);
}
.topbar-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: .76;
  filter: saturate(.9) contrast(.98);
}
.home-frame .chromatic-orbit { display: none; }
.home-topbar .wordmark,
.home-topbar .wordmark span {
  color: transparent;
  background: linear-gradient(95deg, #4338ca 0%, #7c3aed 24%, #c43fd7 50%, #ec4899 76%, #f43f5e 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.home-topbar .nav a,
.home-topbar .account {
  transition: color .2s ease, transform .2s ease, opacity .2s ease;
}
.home-topbar .nav a:hover {
  color: #6f35d7;
  transform: translateY(-2px);
}
.home-topbar .nav a.active:hover { color: #17131f; }
.home-topbar .account:hover {
  color: #c23798;
  transform: translateY(-2px);
}
.home .hero::after { display: none; }
.home h1 {
  color: #161318;
  font-size: clamp(2.8rem, 3.1vw, 3.75rem);
  font-weight: 590;
}
.home .link-form {
  grid-template-columns: 24px minmax(0, 1fr) auto;
}
.home .arrow-submit {
  display: grid;
  place-items: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 12px;
  color: #fff;
  background: #111014;
}
.home .arrow-submit:hover {
  background: #000;
  transform: translateY(-1px);
}
.home .arrow-submit svg { width: 20px; height: 20px; }

@media (max-width: 620px) {
  .topbar-art {
    top: 7px;
    left: 7px;
    right: 7px;
    height: 190px;
  }
  .topbar-art img { object-position: 68% top; opacity: .67; }
  .home h1 { font-size: clamp(2.5rem, 12vw, 3.2rem); }
  .home .link-form { grid-template-columns: 22px minmax(0, 1fr) 46px; }
  .home .arrow-submit {
    grid-column: auto;
    width: 46px;
    min-width: 46px;
    height: 46px;
    border-radius: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Editorial direction */
body { letter-spacing: -.012em; }
.wordmark { font-size: 1.08rem; font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.wordmark span { color: var(--pink); }
.home-body { height: 100svh; min-height: 560px; overflow: hidden; background: #f9f9f7; }
.home-frame {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(24px, 3.2vw, 48px) clamp(22px, 5.5vw, 88px) clamp(22px, 3vw, 42px);
  isolation: isolate;
}
.home-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(124,58,237,.035), transparent 28%),
    #fff;
}
.chromatic-orbit {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.orbit-top {
  width: clamp(330px, 38vw, 660px);
  aspect-ratio: 1;
  top: clamp(-430px, -29vw, -250px);
  right: clamp(-260px, -12vw, -80px);
  background: radial-gradient(circle at 31% 70%, #fff 0 44%, transparent 45%),
              linear-gradient(142deg, #702ee7, #d93b9c 58%, #ff8abf);
  opacity: .96;
  transform: rotate(-14deg);
}
.orbit-bottom {
  width: clamp(250px, 27vw, 490px);
  aspect-ratio: 1;
  left: clamp(-330px, -17vw, -150px);
  bottom: clamp(-330px, -20vw, -170px);
  background: radial-gradient(circle at 72% 25%, #fff 0 48%, transparent 49%),
              linear-gradient(135deg, #5931d8, #ee4e9a);
  opacity: .85;
}
.home-topbar {
  position: relative;
  inset: auto;
  z-index: 4;
  height: auto;
  min-height: 38px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  grid-template-columns: 1fr auto 1fr;
}
.home-topbar.scrolled { background: transparent; box-shadow: none; }
.home-topbar .nav { padding: 0; gap: clamp(18px, 3vw, 42px); background: transparent; border-radius: 0; }
.home-topbar .nav a {
  position: relative;
  padding: 7px 0;
  border-radius: 0;
  color: #747076;
  font-size: .78rem;
  font-weight: 560;
  letter-spacing: .015em;
}
.home-topbar .nav a.active { color: #17131f; background: transparent; box-shadow: none; }
.home-topbar .nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 14px;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--pink));
}
.home-topbar .account { padding: 7px 0; color: #38343b; font-size: .78rem; font-weight: 560; }
.home {
  min-height: 0;
  padding: 0;
  place-items: center;
}
.home .hero {
  width: min(760px, 86vw);
  text-align: left;
  transform: translateY(-1vh);
}
.home .eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 clamp(18px, 3vh, 32px);
  color: #777279;
  font-size: .68rem;
  font-weight: 570;
  letter-spacing: .18em;
}
.home .eyebrow i {
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--pink));
}
.home h1 {
  max-width: none;
  margin: 0;
  color: #141215;
  font-size: clamp(3.25rem, 8.4vh, 6.5rem);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.075em;
}
.home h1 strong { font-weight: 760; }
.home h1 em {
  color: transparent;
  font-style: normal;
  font-weight: 400;
  background: linear-gradient(96deg, #7139dc 10%, #d23f9b 72%);
  background-clip: text;
  -webkit-background-clip: text;
}
.home .link-form {
  width: min(700px, 100%);
  margin: clamp(28px, 4.5vh, 48px) 0 0;
  padding: 5px 5px 5px 22px;
  border-radius: 3px;
  background: #f7f5f7;
  box-shadow: inset 0 0 0 1px rgba(27,18,31,.09);
}
.home .link-form:focus-within { box-shadow: inset 0 0 0 1px #6f37d6, 0 15px 45px rgba(94,43,137,.08); }
.home .link-form input { padding: 0 14px 0 0; font-size: .92rem; }
.home .primary {
  width: auto;
  border-radius: 1px;
  padding: 14px 20px;
  color: #fff;
  background: #171417;
  box-shadow: none;
  font-size: .84rem;
  font-weight: 600;
}
.home .primary:hover { transform: none; background: #6e34d6; box-shadow: none; }
.home .primary span { margin-left: 12px; color: #f6a2ce; }
.home .form-error { margin: 9px 0 -6px; font-size: .8rem; }
.home .microcopy {
  max-width: 510px;
  margin: 14px 0 0;
  color: #777278;
  font-size: .76rem;
  line-height: 1.45;
}
.home-footer {
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8b868c;
  font-size: .68rem;
  letter-spacing: .04em;
}
.home-footer span:last-child { color: #6f37d6; }

/* Carry the sharper language into the community and overlays. */
.page h1 { font-weight: 440; line-height: .95; }
.page .gradient-text { font-weight: 560; }
.card { border-radius: 4px; box-shadow: 0 12px 36px rgba(48,25,64,.065); }
.thumb { border-radius: 0; }
.filter, .search, .auth-card, .auth-card input, .google { border-radius: 3px; }
.auth-card .primary, .close { border-radius: 2px; }

@media (max-width: 620px) {
  .home-body { min-height: 520px; }
  .home-frame { min-height: 520px; padding: 20px 18px 18px; }
  .home-frame::before { inset: 7px; }
  .home-topbar { grid-template-columns: auto 1fr; }
  .home-topbar .brand span:last-child { display: inline; }
  .home-topbar .nav { justify-self: end; gap: 17px; }
  .home-topbar .account { display: none; }
  .home { padding: 0 7px; }
  .home .hero { width: 100%; transform: translateY(-1vh); }
  .home h1 { font-size: clamp(3.1rem, 14.8vw, 5rem); line-height: .87; }
  .home .eyebrow { font-size: .6rem; margin-bottom: 20px; }
  .home .link-form { margin-top: 30px; padding: 5px; background: #f5f3f5; }
  .home .link-form input { min-height: 48px; padding: 0 13px; text-align: left; }
  .home .primary { width: 100%; min-height: 46px; }
  .home .microcopy { padding: 0 5px; font-size: .72rem; }
  .home-footer span:first-child { max-width: 180px; }
  .orbit-top { top: -270px; right: -200px; opacity: .74; }
  .orbit-bottom { display: none; }
}

@media (max-height: 690px) and (min-width: 621px) {
  .home h1 { font-size: clamp(3rem, 7.7vh, 5rem); }
  .home .link-form { margin-top: 24px; }
  .home .eyebrow { margin-bottom: 18px; }
}

/* Quiet canvas: compact hierarchy, tactile paper texture. */
.home-frame::before {
  inset: 10px;
  background:
    radial-gradient(circle at 16% 24%, rgba(124,58,237,.035), transparent 25%),
    radial-gradient(circle at 84% 72%, rgba(236,72,153,.026), transparent 28%),
    #fdfdfc;
}
.home-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  pointer-events: none;
  opacity: .075;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}
.chromatic-orbit {
  filter: blur(68px);
  border-radius: 45% 55% 62% 38%;
}
.orbit-top {
  width: clamp(210px, 24vw, 430px);
  top: -22%;
  right: 4%;
  opacity: .12;
  background: linear-gradient(145deg, #6e34df, #ee4d9c);
  transform: rotate(28deg) scaleX(1.7);
}
.orbit-bottom {
  width: clamp(190px, 21vw, 370px);
  left: 10%;
  bottom: -27%;
  opacity: .1;
  background: linear-gradient(145deg, #6e34df, #ee4d9c);
  transform: rotate(-20deg) scaleX(1.8);
}
.home .hero {
  position: relative;
  width: min(690px, 80vw);
  transform: translateY(-.5vh);
}
.home .hero::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 1px;
  right: -114px;
  top: 49%;
  background: linear-gradient(90deg, rgba(124,58,237,.12), rgba(236,72,153,.78));
}
.home .eyebrow {
  margin-bottom: clamp(16px, 2.3vh, 23px);
  font-size: .64rem;
  letter-spacing: .205em;
}
.home h1 {
  font-size: clamp(2.4rem, 2.8vw, 3.3rem);
  font-weight: 470;
  line-height: .98;
  letter-spacing: -.057em;
}
.home h1 em {
  font-weight: 620;
  background: linear-gradient(96deg, #6636d9 4%, #d83d9a 65%, #e64d8e);
  background-clip: text;
  -webkit-background-clip: text;
}
.home .link-form {
  position: relative;
  width: 100%;
  margin-top: clamp(27px, 4vh, 39px);
  padding-left: 24px;
  background: rgba(248,246,248,.82);
  box-shadow: inset 0 0 0 1px rgba(27,18,31,.08), 0 14px 42px rgba(64,32,80,.035);
  backdrop-filter: blur(8px);
}
.home .link-form::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #7439de, #e34398);
}
.home .primary {
  min-width: 132px;
  letter-spacing: .005em;
}
.home .microcopy {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  max-width: 540px;
  margin-top: 15px;
  line-height: 1.5;
}
.home .microcopy span {
  color: #9f45c5;
  font-size: .62rem;
  letter-spacing: .06em;
  padding-top: 1px;
}
.home-footer { opacity: 1; }

@media (max-width: 620px) {
  .home-frame::before,
  .home-frame::after { inset: 7px; }
  .home .hero { width: 100%; }
  .home .hero::after { display: none; }
  .home h1 { font-size: clamp(2.35rem, 11.2vw, 3.25rem); line-height: 1; }
  .home .link-form { padding-left: 5px; }
  .home .link-form::before { display: none; }
  .home .microcopy { grid-template-columns: 20px 1fr; }
  .orbit-top { right: -18%; top: -15%; }
}

@media (max-height: 680px) and (min-width: 621px) {
  .home h1 { font-size: clamp(2.35rem, 7vh, 3.35rem); }
  .home .link-form { margin-top: 22px; }
}

/* Radar-inspired control proportions, adapted to the light system. */
.home .hero {
  width: min(740px, 82vw);
  text-align: center;
}
.home .eyebrow { justify-content: center; }
.home h1 {
  font-family: Inter, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.85rem, 3.2vw, 3.85rem);
  font-weight: 610;
  line-height: 1.02;
  letter-spacing: -.057em;
}
.home h1 em { font-weight: 450; }
.home .link-form {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  margin-top: clamp(27px, 3.8vh, 38px);
  padding: 7px 7px 7px 18px;
  border-radius: 18px;
  background: rgba(247,245,248,.92);
  box-shadow:
    inset 0 0 0 1px rgba(41,30,49,.13),
    0 18px 48px rgba(48,25,64,.07);
}
.home .link-form::before { display: none; }
.home .link-form:focus-within {
  box-shadow:
    inset 0 0 0 1px rgba(108,54,216,.55),
    0 20px 54px rgba(94,43,137,.1);
}
.link-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #8a8290;
}
.link-icon svg { width: 18px; height: 18px; }
.home .link-form input {
  height: 52px;
  padding: 0;
  font-size: .9rem;
  font-weight: 440;
  letter-spacing: -.005em;
}
.home .primary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 54px;
  padding: 6px 7px 6px 19px;
  border-radius: 13px;
  font-size: .86rem;
  font-weight: 650;
  background: #171419;
}
.home .primary > span { margin: 0; color: white; }
.home .primary i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #763ce0, #dd4399);
}
.home .primary i svg { width: 18px; height: 18px; }
.home .microcopy {
  display: block;
  max-width: 600px;
  margin: 8px auto 0;
  padding: 0;
  color: #8a838d;
  font-size: .7rem;
  line-height: 1.4;
  text-align: center;
}
.home .hero::after { top: 45%; }

@media (max-width: 620px) {
  .home .hero { width: 100%; text-align: center; }
  .home .eyebrow { justify-content: center; }
  .home h1 { font-size: clamp(2.45rem, 11.5vw, 3.2rem); }
  .home .link-form {
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    min-height: auto;
    padding: 8px 8px 8px 15px;
    border-radius: 16px;
  }
  .home .primary {
    grid-column: 1 / -1;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    padding-left: 17px;
    border-radius: 11px;
  }
  .home .primary i { width: 36px; height: 36px; }
  .home .microcopy { margin-top: 7px; text-align: center; padding: 0 4px; }
}

/* Final cascade: image masthead and arrow-only submit. */
.home-topbar .wordmark,
.home-topbar .wordmark span {
  color: transparent;
  background: linear-gradient(95deg, #4338ca 0%, #7c3aed 24%, #c43fd7 50%, #ec4899 76%, #f43f5e 100%);
  background-clip: text;
  -webkit-background-clip: text;
}
.home .hero::after { display: none; }
.home h1 {
  color: #161318;
  font-size: clamp(2.8rem, 3.1vw, 3.75rem);
  font-weight: 590;
}
.home .link-form { grid-template-columns: 24px minmax(0, 1fr) auto auto; }
.home .arrow-submit {
  display: grid;
  place-items: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 12px;
  color: #fff;
  background: #111014;
}
.home .arrow-submit:hover { background: #000; transform: translateY(-1px); }
.home .arrow-submit svg { width: 20px; height: 20px; }
.home .profile-share-trigger {
  display: grid !important;
  visibility: visible;
  opacity: 1;
  place-items: center;
  width: 50px;
  min-width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid rgba(103, 55, 179, .16);
  border-radius: 12px;
  color: #6e35d5;
  background: #eee8f8;
  transition: transform .2s ease, color .2s ease, background .2s ease;
}
.home .profile-share-trigger:hover { color: #fff; background: #7138dc; transform: translateY(-1px); }
.home .profile-share-trigger svg { width: 21px; height: 21px; }

@media (max-width: 620px) {
  .home h1 { font-size: clamp(2.5rem, 12vw, 3.2rem); }
  .home .link-form { grid-template-columns: 22px minmax(0, 1fr) 46px 46px; }
  .home .arrow-submit {
    grid-column: auto;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 10px;
  }
  .home .profile-share-trigger { width: 46px; min-width: 46px; height: 46px; border-radius: 10px; }
}

.profile-share-card {
  position: relative;
  width: min(460px, calc(100vw - 28px));
  padding: 34px;
  border: 1px solid #e9e1f1;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(40, 21, 57, .2);
}
.profile-share-card h2 { margin: 8px 0 9px; color: #1d1820; font-size: clamp(1.85rem, 4vw, 2.45rem); letter-spacing: -.045em; }
.profile-share-intro { margin: 0 0 22px; color: #756d7b; font-size: .9rem; line-height: 1.55; }
.profile-share-account { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; color: #fff; background: linear-gradient(125deg, #2d1749, #7433d8 60%, #d23d9a); }
.profile-share-avatar { display: grid; flex: 0 0 58px; place-items: center; width: 58px; height: 58px; overflow: hidden; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; color: #fff; font-size: 1.2rem; font-weight: 800; background: rgba(255,255,255,.12); }
.profile-share-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-share-account strong, .profile-share-account small { display: block; }
.profile-share-account strong { font-size: 1rem; }
.profile-share-account small { margin-top: 4px; color: rgba(255,255,255,.75); font-size: .73rem; }
.profile-share-link-wrap { margin-top: 20px; }
.profile-share-link-wrap label { display: block; margin-bottom: 8px; color: #302a34; font-size: .78rem; font-weight: 750; }
.profile-share-link-wrap input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid #ded5e7; border-radius: 13px; outline: 0; background: #faf8fc; }
.profile-share-link-wrap input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.profile-share-link-wrap small { display: block; margin-top: 7px; color: #8a8290; font-size: .68rem; line-height: 1.45; }
.profile-share-submit, .profile-share-connect { width: 100%; margin-top: 18px; justify-content: space-between; }
.profile-share-submit span { margin-left: auto; }
@media (max-width: 620px) { .profile-share-card { padding: 28px 22px 22px; border-radius: 22px; } }

/* Final image fit: right-side masthead rather than full-width banner. */
.topbar-art {
  top: 0;
  left: auto;
  right: 0;
  width: min(66vw, 1120px);
  height: clamp(150px, 19vh, 190px);
  -webkit-mask-image: radial-gradient(ellipse 88% 125% at 100% 0%, #000 0%, rgba(0,0,0,.94) 38%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.12) 79%, transparent 100%);
  mask-image: radial-gradient(ellipse 88% 125% at 100% 0%, #000 0%, rgba(0,0,0,.94) 38%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.12) 79%, transparent 100%);
}
.topbar-art img {
  object-fit: cover;
  object-position: 63% 31%;
  opacity: .92;
  filter: saturate(1.03) contrast(1.04);
}

@media (max-width: 620px) {
  .topbar-art {
    top: 0;
    left: auto;
    right: 0;
    width: 92vw;
    height: 145px;
    -webkit-mask-image: radial-gradient(ellipse 100% 120% at 100% 0%, #000 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,.2) 76%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 120% at 100% 0%, #000 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,.2) 76%, transparent 100%);
  }
  .topbar-art img { object-position: 70% 34%; opacity: .84; }
}

/* Final route geometry: identical header coordinates on both pages. */
.community-body .site-topbar {
  position: relative;
  inset: auto;
  z-index: 4;
  height: auto;
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  grid-template-columns: 1fr auto 1fr;
}
.community-body .site-topbar.scrolled { background: transparent; box-shadow: none; }
.community-body .site-topbar .nav { padding: 0; gap: clamp(18px,3vw,42px); background: transparent; border-radius: 0; }
.community-body .site-topbar .nav a { position: relative; padding: 7px 0 10px; border-radius: 0; color: #6f6a72; font-size: .78rem; font-weight: 560; background: transparent; box-shadow: none; }
.community-body .site-topbar .nav a.active { color: #17131f; background: transparent; box-shadow: none; }
.community-body .site-topbar .nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1.5px; background: linear-gradient(90deg,#7c3aed,#ec4899); }
.community-body .site-topbar .account { padding: 7px 0; color: #38343b; font-size: .78rem; font-weight: 560; }
.community-body .page { width: min(1480px,100%); padding: clamp(92px,10vw,132px) 0 30px; }
.community-body .page-head { padding-top: 0; }

@media (max-width: 620px) {
  .community-body .site-topbar { grid-template-columns: auto 1fr; }
  .community-body .site-topbar .nav { justify-self: end; gap: 17px; }
  .community-body .site-topbar .account { display: none; }
  .community-body .page { padding-top: 76px; }
}

/* Community introduction and simple profile. */
.community-intro {
  max-width: 780px !important;
  margin: 0 !important;
  color: #2c2730 !important;
  font-size: clamp(1.35rem, 2.15vw, 2rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -.035em;
}
.community-intro span { color: var(--violet-deep); }
.profile-page { width: min(1180px, 100%); margin: 0 auto; padding: clamp(82px, 9vw, 118px) 0 30px; }
.profile-avatar { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 20px; color: white; background: linear-gradient(135deg,var(--violet),var(--pink)); font-size: 1.15rem; font-weight: 760; }
.profile-avatar.has-image { overflow: hidden; box-shadow: inset 0 0 0 1px rgba(35,22,44,.08); }
.profile-avatar.has-image img { width: 100%; height: 100%; object-fit: cover; }
.profile-identity p { margin: 0 0 4px; color: var(--violet); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.profile-identity h1 { margin: 0; font-size: clamp(1.5rem,3vw,2.15rem); line-height: 1.05; letter-spacing: -.045em; }
.profile-identity span { display: block; margin-top: 6px; color: var(--muted); font-size: .86rem; }
.profile-stat { display: grid; min-width: 95px; text-align: center; }
.profile-stat strong { font-size: 1.55rem; }
.profile-stat span { color: var(--muted); font-size: .75rem; }
.profile-logout { border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; color: #6b6372; background: white; cursor: pointer; font-size: .8rem; }
.profile-logout:hover { color: #b4235f; border-color: rgba(180,35,95,.18); }
.profile-content { margin-top: 42px; }
.profile-plan { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 18px 20px; border: 1px solid rgba(124,58,237,.16); border-radius: 18px; background: rgba(250,247,255,.94); }
.profile-plan[hidden] { display: none; }
.profile-plan p { margin: 0 0 3px; color: var(--violet); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.profile-plan strong { margin-right: 10px; }
.profile-plan span { color: var(--muted); font-size: .8rem; }
.profile-plan button { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; color: #7b5367; background: #fff; cursor: pointer; font-size: .76rem; }
.profile-section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.profile-section-head h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.03em; }
.profile-section-head a { color: var(--violet-deep); font-size: .84rem; font-weight: 650; }
.profile-page .cards { grid-template-columns: repeat(3,minmax(0,1fr)); }

@media (max-width: 760px) {
  .profile-page { padding-top: 70px; }
  .profile-stat { justify-self: start; text-align: left; }
  .profile-logout { justify-self: end; }
  .profile-page .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .community-body .page-head { align-items: stretch; }
  .profile-page .cards { grid-template-columns: 1fr; }
}

/* Final refinements: compact community copy and owned-card actions. */
.community-intro {
  max-width: 620px !important;
  color: var(--muted) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  letter-spacing: -.012em;
}
.community-intro span { color: var(--muted); }
.profile-card-item { position: relative; min-width: 0; }
.profile-card-item > .card { height: 100%; }
.delete-publication { position: absolute; z-index: 3; top: 10px; right: 10px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; color: white; background: rgba(24,16,30,.7); backdrop-filter: blur(9px); cursor: pointer; transition: transform .18s ease, background .18s ease; }
.delete-publication:hover { background: #b4235f; transform: translateY(-1px); }
.delete-publication svg { width: 18px; height: 18px; }
.feature-publication { position: absolute; z-index: 3; top: 10px; right: 54px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; color: white; background: rgba(24,16,30,.7); backdrop-filter: blur(9px); cursor: pointer; transition: transform .18s ease, color .18s ease, background .18s ease; }
.feature-publication:hover { color: #ffe58a; transform: translateY(-1px); }
.feature-publication.active { color: #ffdc61; background: #55308c; }
.feature-publication:disabled { cursor: wait; opacity: .6; }
.feature-publication svg { width: 18px; height: 18px; }
.confirm-card { width: min(390px,100%); padding: 30px; border-radius: 24px; text-align: center; background: white; box-shadow: var(--shadow); transform: translateY(10px) scale(.98); transition: transform .22s ease; }
.overlay.open .confirm-card { transform: none; }
.confirm-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 15px; border-radius: 15px; color: #b4235f; background: #fff0f5; }
.confirm-icon svg { width: 24px; height: 24px; }
.confirm-card h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.035em; }
.confirm-card > p:not(.auth-error) { margin: 10px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.confirm-actions button { border: 0; border-radius: 12px; padding: 12px; font-weight: 680; cursor: pointer; }
#cancel-delete { color: #4f4855; background: var(--soft); }
#confirm-delete { color: white; background: #b4235f; }
#confirm-delete:disabled { cursor: wait; opacity: .65; }

/* Dark shared masthead and plans page. */
.topbar-art { display: none !important; }
.home-frame, .community-frame { padding-top: clamp(64px,calc(10.6vh - 5px),113px); }
.home-frame { grid-template-rows: 1fr auto; }
.home-frame > .site-topbar,
.community-frame > .site-topbar,
.community-body .site-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  height: clamp(64px,calc(10.6vh - 5px),113px);
  min-height: 64px;
  padding: 0 clamp(22px,5.5vw,88px);
  border: 0;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  grid-template-columns: 1fr auto 1fr;
}
.home-frame > .site-topbar.scrolled,
.community-frame > .site-topbar.scrolled {
  background: transparent;
  box-shadow: none;
}
.site-topbar .wordmark,
.site-topbar .wordmark span { color: transparent; background: linear-gradient(95deg,#5b21b6,#8b35d3 48%,#db2777); background-clip: text; -webkit-background-clip: text; }
.home-frame > .site-topbar .nav,
.community-frame > .site-topbar .nav,
.community-body .site-topbar .nav { padding: 0; gap: clamp(18px,3vw,42px); background: transparent; border-radius: 0; }
.home-frame > .site-topbar .nav a,
.community-frame > .site-topbar .nav a,
.community-body .site-topbar .nav a { position: relative; padding: 8px 0 11px; border-radius: 0; color: #514b56; background: transparent; box-shadow: none; font-size: .8rem; font-weight: 620; }
.home-frame > .site-topbar .nav a:hover,
.community-frame > .site-topbar .nav a:hover { color: #241c2c; }
.home-frame > .site-topbar .nav a.active,
.community-frame > .site-topbar .nav a.active,
.community-body .site-topbar .nav a.active { color: #201827; background: transparent; box-shadow: none; }
.site-topbar .nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: 999px; background: #7c3aed; }
.home-frame > .site-topbar .account,
.community-frame > .site-topbar .account,
.community-body .site-topbar .account { padding: 8px 0; color: #3d3345; font-size: .8rem; }
.site-topbar .account.signed-in { display: inline-flex; align-items: center; justify-content: flex-end; gap: 9px; color: #28222d; }
.site-topbar .brand { position: relative; z-index: 3; }
.site-topbar .account { position: relative; z-index: 3; min-width: 0; }
.account-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: white; background: #33243f; box-shadow: 0 4px 13px rgba(52,36,65,.18); object-fit: cover; font-size: .64rem; font-weight: 760; letter-spacing: -.02em; transition: transform .18s ease, box-shadow .18s ease; }
.account-name { font-weight: 650; }
.site-topbar::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: -48px;
  left: 0;
  right: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,#d9bcff 0%,#e4d1ff 38%,rgba(241,231,255,.76) 67%,rgba(255,255,255,0) 100%);
}
.site-topbar::after { display: none; }
.site-topbar > * { position: relative; z-index: 1; }
.home-frame::before, .community-frame::before { inset: 0 12px 12px; background: #fff; }
.home-frame::after { display: none; }
.community-body .page { padding-top: clamp(56px,7vw,92px); }
.profile-page { padding-top: clamp(56px,7vw,92px); }

.plans-page { width: min(980px,100%); margin: 0 auto; padding: clamp(54px,7vw,88px) 0 38px; }
.plans-heading { max-width: 720px; margin: 0 auto 42px; text-align: center; }
.plans-heading > p:first-child { margin: 0 0 14px; color: var(--violet); font-size: .75rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.plans-heading h1 { max-width: none; font-size: clamp(2.5rem,5vw,4.4rem); }
.plans-heading h1 span { color: transparent; background: linear-gradient(100deg,var(--violet),var(--pink)); background-clip: text; -webkit-background-clip: text; }
.plans-heading > p:last-child { max-width: 650px; margin: 20px auto 0; color: var(--muted); line-height: 1.65; }
.pricing-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.pricing-card { position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: 0 18px 54px rgba(48,25,64,.07); }
.pricing-card.featured { border-color: rgba(124,58,237,.24); box-shadow: 0 22px 64px rgba(124,58,237,.13); }
.recommended { position: absolute; top: 20px; right: 20px; padding: 6px 9px; border-radius: 999px; color: #fff; background: #17131f; font-size: .7rem; font-weight: 700; }
.plan-name { margin: 0 0 12px; color: var(--violet-deep); font-size: .82rem; font-weight: 750; }
.pricing-card h2 { margin: 0; font-size: 2.15rem; letter-spacing: -.045em; }
.pricing-card > div > span { color: var(--muted); font-size: .78rem; }
.pricing-card ul { display: grid; gap: 12px; margin: 28px 0; padding: 0; list-style: none; color: #514a58; font-size: .9rem; }
.pricing-card li::before { content: "✓"; margin-right: 9px; color: var(--violet); font-weight: 800; }
.plan-button { display: block; width: 100%; margin-top: auto; border: 0; border-radius: 13px; padding: 14px; text-align: center; font-weight: 700; cursor: pointer; }
.plan-button.secondary { color: #312b36; background: var(--soft); }
.plans-note { margin: 18px 0 0; text-align: center; color: #8a828e; font-size: .76rem; }
.checkout-card { position: relative; width: min(560px,100%); padding: 32px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); transform: translateY(12px) scale(.98); transition: transform .25s ease; }
.overlay.open .checkout-card { transform: none; }
.checkout-kicker { margin: 0 0 8px; color: var(--violet); font-size: .74rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.checkout-card h2 { margin: 0 42px 10px 0; font-size: 1.75rem; letter-spacing: -.04em; }
.checkout-copy { margin: 0 0 22px; color: var(--muted); line-height: 1.55; }
.checkout-options { display: grid; gap: 11px; }
.checkout-options button { position: relative; display: grid; gap: 5px; width: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 16px; text-align: left; color: var(--ink); background: #fff; cursor: pointer; transition: .2s ease; }
.checkout-options button:hover { border-color: rgba(124,58,237,.35); background: #fbf9fe; transform: translateY(-1px); }
.checkout-options button:disabled { cursor: wait; opacity: .58; }
.checkout-options strong { font-size: .98rem; }
.checkout-options span { padding-right: 90px; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.checkout-options em { position: absolute; top: 16px; right: 16px; padding: 6px 8px; border-radius: 999px; color: #fff; background: var(--violet); font-size: .65rem; font-style: normal; font-weight: 720; }
.checkout-card small { display: block; margin-top: 16px; color: #8a828e; line-height: 1.45; }

.checkout-months { display: flex; flex-direction: column; gap: 14px; }
.checkout-months-back { align-self: flex-start; padding: 0; border: none; background: none; color: var(--violet); font-size: .82rem; font-weight: 720; cursor: pointer; }
.checkout-months label { color: var(--ink); font-size: .92rem; font-weight: 720; }
.checkout-months input[type="range"] { width: 100%; height: 6px; margin: 4px 0; border-radius: 999px; background: var(--soft); appearance: none; -webkit-appearance: none; }
.checkout-months input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--pink)); box-shadow: 0 2px 8px rgba(124,58,237,.4); cursor: pointer; }
.checkout-months input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--pink)); box-shadow: 0 2px 8px rgba(124,58,237,.4); cursor: pointer; }
.checkout-months-summary { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: var(--soft); }
.checkout-months-summary strong { font-size: 1rem; }
.checkout-months-summary span { color: var(--violet-deep); font-size: 1.15rem; font-weight: 760; }
.checkout-months-hint { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }

/* Pro highlights: intentionally compact, horizontal and free of autoplay. */
.featured-section { margin: 4px 0 36px; }
.featured-section[hidden] { display: none; }
.featured-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.featured-heading p { margin: 0 0 4px; color: var(--violet); font-size: .68rem; font-weight: 780; letter-spacing: .11em; text-transform: uppercase; }
.featured-heading h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.035em; }
.featured-controls { display: flex; gap: 7px; }
.featured-controls button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: #453b4d; background: #fff; cursor: pointer; transition: .18s ease; }
.featured-controls button:hover { color: #fff; border-color: var(--violet); background: var(--violet); }
.featured-track { display: flex; gap: 18px; overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(124,58,237,.22) transparent; }
.featured-card { position: relative; flex: 0 0 clamp(470px,51vw,720px); aspect-ratio: 16/7.6; min-height: 270px; overflow: visible; border-radius: 24px; color: white; background: transparent; box-shadow: none; scroll-snap-align: start; isolation: isolate; }
.featured-media, .featured-shade { position: absolute; inset: 0; border-radius: inherit; }
.featured-media { overflow: hidden; background: linear-gradient(135deg,#2a143f,#7c3aed); box-shadow: 0 28px 38px -22px rgba(45,24,62,.28); }
.featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.22,.8,.28,1); }
.featured-card:hover .featured-media img { transform: scale(1.025); }
.featured-shade { z-index: 1; background: linear-gradient(90deg,rgba(17,10,24,.9) 0%,rgba(22,11,30,.65) 48%,rgba(18,10,24,.16) 100%), linear-gradient(0deg,rgba(15,8,21,.52),transparent 55%); }
.featured-content { position: absolute; z-index: 2; inset: auto 0 0; width: min(76%,570px); padding: clamp(22px,3vw,34px); }
.featured-pro-mark { position: absolute; z-index: 4; top: -1px; left: -1px; display: grid; place-items: center; width: 79px; height: 75px; border: 0; border-radius: 0 0 22px 0; background: #fff; box-shadow: none; }
.featured-pro-mark img { display: block; width: 57px; height: 57px; object-fit: contain; }
.featured-live-check { position: absolute; z-index: 4; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(24,15,31,.68); backdrop-filter: blur(9px); font-size: .66rem; font-weight: 720; }
.featured-live-check svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.featured-live-check.online { background: rgba(203,31,84,.86); box-shadow: 0 7px 20px rgba(174,24,69,.24); }
.featured-content h3 { margin: 0; font-size: clamp(1.45rem,2.3vw,2.2rem); line-height: 1.04; letter-spacing: -.045em; }
.featured-content > p { display: -webkit-box; overflow: hidden; margin: 10px 0 17px; color: rgba(255,255,255,.78); font-size: .84rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.featured-meta { display: flex; justify-content: space-between; gap: 18px; color: rgba(255,255,255,.82); font-size: .72rem; }
.featured-creator { display: flex; align-items: center; gap: 7px; }
.featured-avatar { width: 22px; height: 22px; box-shadow: 0 0 0 1px rgba(255,255,255,.28); }

@media (max-width: 700px) {
  .home-frame, .community-frame { padding-top: 63px; }
  .home-frame > .site-topbar, .community-frame > .site-topbar, .community-body .site-topbar { height: 63px; min-height: 63px; padding: 0 18px; grid-template-columns: auto 1fr; }
  .site-topbar .nav { justify-self: end; gap: 14px !important; }
  .site-topbar .nav a { font-size: .75rem !important; }
  .site-topbar .account { display: none !important; }
  .pricing-grid { grid-template-columns: 1fr; }
  .plans-page { padding-top: 46px; }
  .checkout-card { padding: 27px 20px; }
  .checkout-options span { padding-right: 0; }
  .checkout-options em { position: static; justify-self: start; margin-top: 3px; }
  .profile-plan { align-items: stretch; flex-direction: column; }
  .featured-section { margin-top: 0; }
  .featured-card { flex-basis: 86vw; min-height: 330px; aspect-ratio: 4/4.2; }
  .featured-shade { background: linear-gradient(0deg,rgba(15,8,21,.94) 0%,rgba(20,10,28,.55) 58%,rgba(18,10,24,.1) 100%); }
  .featured-content { width: 100%; padding: 22px; }
  .featured-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
}

/* Exact three-part topbar: left action, centered original wordmark, right actions. */
.home-frame > .site-topbar,
.community-frame > .site-topbar,
.community-body .site-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: initial;
}
.site-topbar > .brand {
  display: inline-flex;
  grid-column: 2;
  align-items: center;
  align-self: center;
  justify-self: center;
  width: auto;
  color: #17131f;
  font-size: 1.04rem;
  font-weight: 790;
  letter-spacing: -.045em;
}
.site-topbar > .brand .wordmark,
.site-topbar > .brand .wordmark span { color: #17131f; background: none; -webkit-text-fill-color: currentColor; }
.site-topbar > .brand .wordmark span { color: #df277f; }
.site-topbar .nav-left { grid-column: 1; justify-self: end; padding-right: clamp(24px,3vw,46px); }
.site-topbar .nav-right { grid-column: 3; justify-self: start; padding-left: clamp(24px,3vw,46px); }
.site-topbar .plans-link { display: grid; place-items: center; width: 34px; height: 34px; padding: 0 !important; border-radius: 11px !important; }
.site-topbar .plans-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.site-topbar .plans-link:hover { color: var(--violet-deep); background: #f4effa; }
.site-topbar .plans-link.active { color: white !important; background: #29212f !important; }
.site-topbar .plans-link.active::after { display: none; }
body.community-body:not(.profile-body):not(.plans-body) .site-topbar { position: fixed; inset: 0 0 auto; }

@media (max-width: 700px) {
  .site-topbar > .brand { font-size: .94rem; }
  .site-topbar .nav-left { padding-right: 15px; }
  .site-topbar .nav-right { padding-left: 15px; gap: 10px !important; }
  .site-topbar .plans-link { width: 31px; height: 31px; }
}

/* Corrected single wordmark and inset floating footer. */
body { padding-bottom: 82px; }
.site-topbar .nav .brand {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 8px 0 11px;
  color: #17131f;
  font-size: 1.03rem;
  font-weight: 790;
  letter-spacing: -.045em;
}
.site-topbar .nav .brand::after { display: none; }
.site-topbar .nav .brand .wordmark,
.site-topbar .nav .brand .wordmark span {
  color: #17131f;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.site-topbar .nav .brand .wordmark span { color: #df277f; }
.site-footer {
  left: clamp(12px,2vw,30px);
  right: clamp(12px,2vw,30px);
  bottom: 14px;
  min-height: 50px;
  padding: 0 clamp(18px,3vw,40px);
  border: 1px solid rgba(38,25,48,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 38px rgba(45,28,57,.12);
}
.site-footer nav { align-items: center; column-gap: 11px; }
.site-footer nav b { margin-right: 6px; color: #38313d; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer nav i { color: #c5bdc9; font-style: normal; }
.site-footer nav a { padding: 6px 2px; }

@media (max-width: 700px) {
  body { padding-bottom: 72px; }
  .site-topbar .nav .brand { font-size: .92rem; }
  .site-footer { left: 10px; right: 10px; bottom: 10px; min-height: 46px; border-radius: 14px; }
  .site-footer nav { gap: 9px; }
  .site-footer nav b { margin-right: 3px; }
}

/* Neutral shared navigation and persistent legal footer. */
body { padding-bottom: 46px; }
.home-frame > .site-topbar,
.community-frame > .site-topbar,
.community-body .site-topbar {
  display: flex;
  justify-content: center;
  height: 70px;
  min-height: 70px;
  padding: 0 clamp(18px,4.5vw,72px);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(33,25,40,.07);
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.home-frame, .community-frame { padding-top: 70px; }
.site-topbar::before { display: none; }
.site-topbar > .brand { display: none; }
.home-frame > .site-topbar .nav,
.community-frame > .site-topbar .nav,
.community-body .site-topbar .nav { align-items: center; gap: clamp(18px,2.7vw,40px); }
.site-topbar .nav-brand {
  color: #17131f !important;
  font-size: 1.03rem !important;
  font-weight: 790 !important;
  letter-spacing: -.045em;
}
.site-topbar .nav-brand span { color: #df277f; }
.site-topbar .nav-brand::after { display: none !important; }
.site-topbar .account { position: absolute; top: 50%; right: clamp(18px,4.5vw,72px); transform: translateY(-50%); }
.site-footer {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 46px;
  padding: 0 clamp(18px,4.5vw,72px);
  color: #777078;
  background: rgba(255,255,255,.93);
  border-top: 1px solid rgba(33,25,40,.07);
  box-shadow: 0 -8px 28px rgba(45,28,57,.035);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: .68rem;
  letter-spacing: .025em;
}
.site-footer nav { display: flex; gap: 22px; }
.site-footer a { transition: color .18s ease; }
.site-footer a:hover, .site-footer a.active { color: var(--violet-deep); }
.site-footer > span:last-child { justify-self: end; color: #777078; }
.legal-page { width: min(760px,100%); margin: 0 auto; padding: clamp(58px,7vw,92px) 0 90px; }
.legal-kicker { margin: 0 0 12px; color: var(--violet); font-size: .72rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.legal-page h1 { margin: 0; font-size: clamp(2.5rem,6vw,4.7rem); letter-spacing: -.06em; }
.legal-lead { margin: 18px 0 42px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.legal-page section { padding-top: 4px; border-top: 1px solid var(--line); }
.legal-page h2 { margin: 32px 0 8px; font-size: 1.08rem; letter-spacing: -.025em; }
.legal-page section p { margin: 0; color: #69616f; font-size: .91rem; line-height: 1.7; }

@media (max-width: 700px) {
  body { padding-bottom: 42px; }
  .home-frame, .community-frame { padding-top: 62px; }
  .home-frame > .site-topbar, .community-frame > .site-topbar, .community-body .site-topbar { height: 62px; min-height: 62px; padding: 0 12px; }
  .home-frame > .site-topbar .nav, .community-frame > .site-topbar .nav, .community-body .site-topbar .nav { justify-self: auto; gap: 12px !important; }
  .site-topbar .nav a { padding-inline: 0 !important; font-size: .7rem !important; }
  .site-topbar .nav-brand { font-size: .92rem !important; }
  .site-footer { min-height: 42px; grid-template-columns: 1fr; padding: 0 16px; }
  .site-footer > span { display: none; }
  .site-footer nav { justify-content: center; gap: 28px; }
  .legal-page { padding: 46px 2px 72px; }
}

/* v0.9 chrome — final overrides kept last intentionally. */
body { padding-bottom: 82px; }
.home-frame, .community-frame { padding-top: 70px; }
.home-frame > .site-topbar,
.community-frame > .site-topbar,
.community-body .site-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: initial;
  height: 70px;
  min-height: 70px;
  padding: 0 clamp(18px,4.5vw,72px);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid rgba(33,25,40,.07);
  box-shadow: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-topbar::before { display: none; }
.site-topbar > .brand {
  display: inline-flex;
  grid-column: 2;
  align-items: center;
  align-self: center;
  justify-self: center;
  width: auto;
  color: #17131f;
  font-size: 1.04rem;
  font-weight: 790;
  letter-spacing: -.045em;
}
.site-topbar > .brand .wordmark,
.site-topbar > .brand .wordmark span { color: #17131f; background: none; -webkit-text-fill-color: currentColor; }
.site-topbar > .brand .wordmark span { color: #df277f; }
.home-frame > .site-topbar .nav,
.community-frame > .site-topbar .nav,
.community-body .site-topbar .nav { align-items: center; gap: clamp(18px,2.7vw,40px); }
.site-topbar .nav-left { grid-column: 1; justify-self: end; padding-right: clamp(24px,3vw,46px); }
.site-topbar .nav-right { grid-column: 3; justify-self: start; padding-left: clamp(24px,3vw,46px); }
.site-topbar .plans-link { display: grid; place-items: center; width: 34px; height: 34px; padding: 0 !important; border-radius: 11px !important; }
.site-topbar .plans-link svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.site-topbar .plans-link:hover { color: var(--violet-deep); background: #f4effa; }
.site-topbar .plans-link.active { color: white !important; background: #29212f !important; }
.site-topbar .plans-link.active::after { display: none; }
.site-topbar .account { position: absolute; top: 50%; right: clamp(18px,4.5vw,72px); transform: translateY(-50%); }
body.community-body:not(.profile-body):not(.plans-body) .site-topbar { position: fixed; inset: 0 0 auto; }
.site-footer {
  position: fixed;
  z-index: 45;
  left: clamp(12px,2vw,30px);
  right: clamp(12px,2vw,30px);
  bottom: 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 50px;
  padding: 0 clamp(18px,3vw,40px);
  color: #777078;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(38,25,48,.09);
  border-radius: 16px;
  box-shadow: 0 12px 38px rgba(45,28,57,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-footer nav { display: flex; align-items: center; justify-content: center; gap: 11px; }
.site-footer nav i { color: #c5bdc9; font-style: normal; }
.site-footer nav a { padding: 6px 2px; }
.site-footer > span:last-child { justify-self: end; color: #777078; }

@media (max-width: 700px) {
  body { padding-bottom: 72px; }
  .home-frame, .community-frame { padding-top: 62px; }
  .home-frame > .site-topbar, .community-frame > .site-topbar, .community-body .site-topbar { height: 62px; min-height: 62px; padding: 0 12px; }
  .site-topbar > .brand { font-size: .94rem; }
  .site-topbar .nav-left { justify-self: end; padding-right: 15px; }
  .site-topbar .nav-right { justify-self: start; padding-left: 15px; gap: 10px !important; }
  .site-topbar .plans-link { width: 31px; height: 31px; }
  .site-footer { left: 10px; right: 10px; bottom: 10px; min-height: 46px; grid-template-columns: 1fr; padding: 0 16px; border-radius: 14px; }
  .site-footer > span { display: none; }
}

/* Final spacing and generated Pro mark. */
.home-frame > .site-topbar .nav-left,
.community-frame > .site-topbar .nav-left,
.community-body .site-topbar .nav-left { margin-right: clamp(24px,3vw,46px); padding-right: 0; }
.home-frame > .site-topbar .nav-right,
.community-frame > .site-topbar .nav-right,
.community-body .site-topbar .nav-right { margin-left: clamp(24px,3vw,46px); padding-left: 0; }
.site-topbar .plans-link img { display: block; width: 25px; height: 25px; object-fit: contain; transition: transform .2s ease, filter .2s ease; }
.site-topbar .plans-link:hover img { transform: translateY(-1px) scale(1.06); filter: saturate(1.08); }
.site-topbar .plans-link.active { background: rgba(124,58,237,.07) !important; box-shadow: inset 0 0 0 1px rgba(174,120,22,.16); }
.preview-notice { margin: 11px 2px 0 !important; color: #8b838f !important; font-size: .7rem !important; line-height: 1.45 !important; }
.type.live-now { color: #fff; background: rgba(211,31,88,.88); box-shadow: 0 5px 18px rgba(181,23,71,.24); }
.type.live-now::before,.type.live-kind::before { content: "✓"; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 5px; border-radius: 50%; color: #34203d; background: #fff; font-size: .58rem; font-weight: 900; vertical-align: 1px; }
.type.live-now::after,.type.live-kind::after,.featured-live-check::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: #ff315f; box-shadow: 0 0 0 0 rgba(255,49,95,.48); animation: liveDotPulse 1.8s ease-out infinite; }
@keyframes liveDotPulse { 0%,35% { box-shadow: 0 0 0 0 rgba(255,49,95,.48); } 75%,100% { box-shadow: 0 0 0 6px rgba(255,49,95,0); } }
@media (prefers-reduced-motion:reduce) { .type.live-now::after,.type.live-kind::after,.featured-live-check::after { animation: none; box-shadow: 0 0 0 3px rgba(255,49,95,.14); } }
.site-topbar .account:hover { transform: translateY(-50%); }
.site-topbar .account.signed-in:hover .account-avatar { transform: scale(1.06); box-shadow: 0 7px 18px rgba(52,36,65,.22); }

/* Live previews are created only after a deliberate desktop hover. */
.has-live-preview { cursor: pointer; }
.has-live-preview .thumb::after,
.has-live-preview .featured-media::after {
  content: "Passe o mouse para assistir";
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(20,12,27,.7);
  box-shadow: 0 5px 18px rgba(10,5,15,.14);
  backdrop-filter: blur(8px);
  font-size: .62rem;
  font-weight: 680;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.has-live-preview:hover .thumb::after,
.has-live-preview:focus-visible .thumb::after,
.has-live-preview:hover .featured-media::after,
.has-live-preview:focus-visible .featured-media::after { opacity: 1; transform: none; }
.has-live-preview.live-preview-pending { box-shadow: 0 22px 58px rgba(124,58,237,.16); }
.live-inline-preview {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(110deg,#21132f 25%,#40215a 45%,#21132f 65%);
  background-size: 300% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  animation: livePreviewLoading 1.25s ease infinite;
}
.live-inline-preview.open { opacity: 1; }
.live-inline-preview.loaded { animation: none; }
.live-inline-preview iframe { display: block; width: 100%; height: 100%; border: 0; background: #160f1d; opacity: 0; transition: opacity .16s ease; }
.live-inline-preview.loaded iframe { opacity: 1; }
.live-inline-preview.twitch iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 300px;
  transform: translate(-50%,-50%) scale(var(--twitch-preview-scale,1));
}
.live-inline-label {
  position: absolute;
  z-index: 4;
  left: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(24,15,31,.74);
  box-shadow: 0 5px 18px rgba(0,0,0,.16);
  backdrop-filter: blur(9px);
  font-size: .66rem;
  font-weight: 720;
}
@keyframes livePreviewLoading { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (max-width: 700px) {
  .home-frame > .site-topbar .nav-left, .community-frame > .site-topbar .nav-left, .community-body .site-topbar .nav-left { margin-right: 14px; }
  .home-frame > .site-topbar .nav-right, .community-frame > .site-topbar .nav-right, .community-body .site-topbar .nav-right { margin-left: 14px; }
  .site-topbar .plans-link img { width: 23px; height: 23px; }
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .has-live-preview .thumb::after,
  .has-live-preview .featured-media::after,
  .live-inline-preview { display: none; }
}

/* Plans v2: an editorial creator pass instead of a generic pricing table. */
.plans-body { background: #fbfafc; }
.plans-body .community-frame { overflow: hidden; }
.plans-body .community-frame::before {
  background:
    radial-gradient(circle at 81% 34%,rgba(137,78,226,.10),transparent 27%),
    radial-gradient(circle at 16% 64%,rgba(236,72,153,.045),transparent 24%),
    #fdfcfe;
}
.plans-page { width: min(1240px,calc(100% - 48px)); padding: clamp(44px,6vw,78px) 0 104px; }
.plans-stage { display: grid; grid-template-columns: minmax(0,.88fr) minmax(520px,1.12fr); align-items: center; gap: clamp(48px,7vw,110px); min-height: 540px; }
.plans-heading { max-width: 520px; margin: 0; text-align: left; }
.plans-kicker { display: flex; align-items: center; gap: 11px; margin: 0 0 24px !important; color: #6c6272 !important; font-size: .68rem !important; font-weight: 760; letter-spacing: .16em; text-transform: uppercase; }
.plans-kicker span { width: 29px; height: 1px; background: linear-gradient(90deg,#7c3aed,#ec4899); }
.plans-heading h1 { margin: 0; max-width: 560px; font-size: clamp(3.25rem,6.2vw,6.2rem); font-weight: 620; line-height: .88; letter-spacing: -.078em; }
.plans-heading h1 span { color: transparent; background: linear-gradient(105deg,#7033de 8%,#bc3fc4 54%,#e93c86 96%); background-clip: text; -webkit-background-clip: text; }
.plans-heading > p:not(.plans-kicker) { max-width: 490px; margin: 30px 0 0; color: #746c7b; font-size: 1rem; line-height: 1.72; }
.free-route { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 46px; padding: 18px 0; border-top: 1px solid rgba(49,31,62,.11); border-bottom: 1px solid rgba(49,31,62,.11); }
.free-route div { display: grid; gap: 3px; }
.free-route small { color: #958d9b; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.free-route strong { color: #29232e; font-size: .9rem; }
.free-route div span { color: #817986; font-size: .75rem; }
.free-route > a { flex: none; padding: 10px 0; color: #682bd4; font-size: .78rem; font-weight: 720; }
.free-route > a span { display: inline-block; margin-left: 5px; transition: transform .18s ease; }
.free-route > a:hover span { transform: translate(2px,-2px); }

.pro-pass { position: relative; min-height: 520px; overflow: hidden; padding: clamp(30px,4vw,46px); border: 1px solid rgba(255,255,255,.1); border-radius: 38px; color: #fff; background: linear-gradient(145deg,#17111d 0%,#24132f 43%,#4b1761 76%,#792764 100%); box-shadow: 0 35px 85px rgba(53,23,68,.24),0 4px 0 rgba(255,255,255,.45) inset; isolation: isolate; transform: rotate(1.2deg); transition: transform .42s cubic-bezier(.22,.8,.28,1),box-shadow .42s ease; }
.pro-pass:hover { transform: rotate(0) translateY(-5px); box-shadow: 0 44px 100px rgba(53,23,68,.29),0 4px 0 rgba(255,255,255,.45) inset; }
.pro-pass::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .34; background: repeating-linear-gradient(118deg,transparent 0 41px,rgba(255,255,255,.035) 42px 43px); }
.pro-pass::after { content: ""; position: absolute; z-index: -1; width: 460px; height: 460px; right: -200px; bottom: -250px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#ff8bcb 0%,#bb43db 32%,rgba(107,43,180,.3) 58%,transparent 72%); filter: blur(2px); opacity: .78; }
.pass-orbit { position: absolute; z-index: -1; top: -88px; right: -62px; width: 290px; height: 290px; border: 1px solid rgba(255,229,164,.22); border-radius: 50%; }
.pass-orbit::before,.pass-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: inherit; }
.pass-orbit::before { inset: 30px; }
.pass-orbit::after { inset: 70px; }
.pass-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #f6ca69; box-shadow: 0 0 18px rgba(246,202,105,.8); }
.pass-orbit i:nth-child(1) { left: 25px; bottom: 70px; }
.pass-orbit i:nth-child(2) { left: 91px; bottom: 27px; width: 4px; height: 4px; }
.pass-orbit i:nth-child(3) { left: 79px; bottom: 91px; width: 5px; height: 5px; }
.pass-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pass-brand { display: flex; align-items: center; gap: 11px; font-size: .9rem; font-weight: 720; }
.pass-brand img { width: 31px; height: 31px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(0,0,0,.25)); }
.pass-edition { color: rgba(255,255,255,.54); font-size: .6rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
.pass-core { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: clamp(64px,7vw,92px); }
.pass-core > p { margin: 0; color: rgba(255,255,255,.7); font-size: clamp(1rem,1.6vw,1.35rem); line-height: 1.3; letter-spacing: -.025em; }
.pass-price { display: grid; grid-template-columns: auto auto; align-items: start; justify-content: end; line-height: .84; }
.pass-price small { margin: 7px 6px 0 0; color: #f2ce7a; font-size: .85rem; }
.pass-price strong { font-size: clamp(3.5rem,6.3vw,6.3rem); font-weight: 560; letter-spacing: -.085em; }
.pass-price span { grid-column: 2; margin-top: 10px; color: rgba(255,255,255,.54); font-size: .68rem; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.pass-includes { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 46px 0 34px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); list-style: none; }
.pass-includes li { display: grid; gap: 5px; padding: 0 18px; border-right: 1px solid rgba(255,255,255,.1); }
.pass-includes li:first-child { padding-left: 0; }
.pass-includes li:last-child { padding-right: 0; border-right: 0; }
.pass-includes strong { color: #f4d27e; font-size: 1.1rem; font-weight: 620; }
.pass-includes span { color: rgba(255,255,255,.64); font-size: .68rem; line-height: 1.35; }
.pass-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pro-pass .plan-button { display: flex; align-items: center; justify-content: space-between; width: min(290px,100%); margin: 0; padding: 14px 18px; color: #24152c; background: linear-gradient(105deg,#fff7df,#f5d782 52%,#f1a5cd); box-shadow: 0 14px 34px rgba(17,8,22,.25); }
.pro-pass .plan-button:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(17,8,22,.34); }
.pass-footer > small { max-width: 130px; color: rgba(255,255,255,.5); font-size: .63rem; line-height: 1.4; text-align: right; }

.plan-signals { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(36px,6vw,84px); margin-top: 84px; padding: 38px 0 4px; border-top: 1px solid rgba(49,31,62,.1); }
.plan-signals > header p { margin: 0 0 12px; color: #7c3aed; font-size: .65rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.plan-signals > header h2 { margin: 0; max-width: 380px; font-size: clamp(1.55rem,2.5vw,2.35rem); line-height: 1.08; letter-spacing: -.052em; }
.plan-signals > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.plan-signals article { position: relative; padding-top: 8px; }
.plan-signals article > span { display: block; margin-bottom: 30px; color: #b7afbc; font-size: .63rem; letter-spacing: .1em; }
.plan-signals article strong { display: block; color: #2d2632; font-size: .88rem; }
.plan-signals article p { margin: 9px 0 0; color: #817987; font-size: .76rem; line-height: 1.55; }
.plans-page > .plans-note { margin: 34px 0 0; text-align: right; }

@media (max-width: 980px) {
  .plans-stage { grid-template-columns: 1fr; gap: 48px; }
  .plans-heading { max-width: 690px; }
  .plans-heading > p:not(.plans-kicker) { max-width: 600px; }
  .pro-pass { width: min(680px,100%); justify-self: center; transform: none; }
  .pro-pass:hover { transform: translateY(-4px); }
  .plan-signals { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .plans-page { width: min(100% - 28px,600px); padding-top: 42px; }
  .plans-heading h1 { font-size: clamp(3.1rem,17vw,4.6rem); }
  .plans-heading > p:not(.plans-kicker) { margin-top: 24px; font-size: .92rem; }
  .free-route { align-items: flex-start; }
  .free-route div span { max-width: 160px; }
  .pro-pass { min-height: 0; padding: 26px 22px; border-radius: 28px; }
  .pass-core { display: grid; margin-top: 58px; }
  .pass-price { justify-content: start; }
  .pass-price span { text-align: left; }
  .pass-includes { grid-template-columns: 1fr; gap: 13px; margin: 34px 0 28px; }
  .pass-includes li,.pass-includes li:first-child,.pass-includes li:last-child { grid-template-columns: 36px 1fr; align-items: center; padding: 0; border: 0; }
  .pass-footer { align-items: stretch; flex-direction: column; }
  .pro-pass .plan-button { width: 100%; }
  .pass-footer > small { max-width: none; text-align: left; }
  .plan-signals { margin-top: 60px; }
  .plan-signals > div { grid-template-columns: 1fr; gap: 0; }
  .plan-signals article { display: grid; grid-template-columns: 32px 1fr; padding: 18px 0; border-bottom: 1px solid rgba(49,31,62,.08); }
  .plan-signals article > span { grid-row: 1 / 3; margin: 2px 0 0; }
  .plan-signals article p { grid-column: 2; }
  .plans-page > .plans-note { text-align: left; line-height: 1.5; }
}

/* Plans route theme: the whole page enters the Pro palette. */
.plans-body {
  color: #fff8ff;
  background: #150817;
  transition: background-color .35s ease,color .35s ease;
}
.plans-body::before {
  content: "";
  position: fixed;
  z-index: -4;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 4% 20%,rgba(255,21,133,.44),transparent 25%),
    radial-gradient(circle at 96% 82%,rgba(137,48,211,.4),transparent 29%),
    linear-gradient(145deg,#270b2e 0%,#16091c 48%,#260b32 100%);
}
.plans-body .community-frame { min-height: calc(100svh - 12px); }
.plans-body .community-frame::before {
  inset: 12px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 12%,rgba(240,34,135,.2),transparent 25%),
    radial-gradient(circle at 81% 35%,rgba(157,65,230,.18),transparent 31%),
    linear-gradient(135deg,rgba(76,16,81,.96) 0%,rgba(38,12,48,.98) 44%,rgba(24,10,34,.99) 100%);
  box-shadow: 0 28px 90px rgba(4,0,8,.42),inset 0 1px rgba(255,255,255,.05);
}
.plans-body .community-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 110px;
  right: -9vw;
  width: min(58vw,850px);
  height: 520px;
  pointer-events: none;
  background: repeating-radial-gradient(ellipse at 100% 50%,transparent 0 17px,rgba(237,142,255,.06) 18px 19px,transparent 20px 29px);
  -webkit-mask-image: linear-gradient(110deg,transparent 4%,#000 48%,transparent 96%);
  mask-image: linear-gradient(110deg,transparent 4%,#000 48%,transparent 96%);
  transform: rotate(-8deg);
}

.plans-body .community-frame > .site-topbar,
.plans-body.community-body .site-topbar {
  color: #fdf5ff;
  border-bottom-color: rgba(255,255,255,.08);
  background: rgba(30,8,36,.62);
  box-shadow: 0 14px 38px rgba(8,1,12,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.plans-body .site-topbar > .brand .wordmark,
.plans-body .site-topbar > .brand .wordmark span { color: #fff8ff; background: none; -webkit-text-fill-color: currentColor; }
.plans-body .site-topbar > .brand .wordmark span { color: #ff4b9e; }
.plans-body .site-topbar .nav a,
.plans-body.community-body .site-topbar .nav a { color: rgba(255,246,255,.58); }
.plans-body .site-topbar .nav a:hover,
.plans-body .site-topbar .nav a.active,
.plans-body.community-body .site-topbar .nav a.active { color: #fff; }
.plans-body .site-topbar .nav a.active::after { background: linear-gradient(90deg,#f5cd72,#ff4eaa); }
.plans-body .site-topbar .plans-link.active { background: rgba(255,255,255,.09) !important; box-shadow: inset 0 0 0 1px rgba(246,205,114,.34),0 8px 24px rgba(8,1,12,.18); }
.plans-body .nav-toggle { color: #fff; }
.plans-body .nav-toggle:hover { background: rgba(255,255,255,.1); }
.plans-body .site-topbar .account,
.plans-body.community-body .site-topbar .account { color: rgba(255,248,255,.78); }
.plans-body .site-topbar .account:hover { color: #fff; }
.plans-body .account-avatar { background: linear-gradient(145deg,#7f35d9,#e33e94); box-shadow: 0 5px 18px rgba(3,0,6,.28); }

.plans-body .plans-kicker { color: rgba(255,239,255,.58) !important; }
.plans-body .plans-kicker span { background: linear-gradient(90deg,#f3cb72,#ff4a9f); box-shadow: 0 0 13px rgba(255,74,159,.4); }
.plans-body .plans-heading h1 { color: #fff9ff; text-shadow: 0 10px 42px rgba(9,1,12,.2); }
.plans-body .plans-heading h1 span { background-image: linear-gradient(105deg,#d595ff 4%,#ff6db2 58%,#f3cb72 105%); }
.plans-body .plans-heading > p:not(.plans-kicker) { color: rgba(249,230,250,.64); }
.plans-body .free-route { border-color: rgba(255,255,255,.11); }
.plans-body .free-route small { color: rgba(255,240,255,.42); }
.plans-body .free-route strong { color: #fff8ff; }
.plans-body .free-route div span { color: rgba(255,240,255,.5); }
.plans-body .free-route > a { color: #f2cf7c; }

.plans-body .pro-pass {
  border-color: rgba(247,206,112,.28);
  background: linear-gradient(145deg,#140e19 0%,#2b1236 38%,#551958 72%,#7e255f 100%);
  box-shadow: 0 40px 100px rgba(7,0,12,.48),0 0 0 7px rgba(255,255,255,.025),0 4px 0 rgba(255,255,255,.14) inset;
}
.plans-body .pro-pass:hover { box-shadow: 0 50px 115px rgba(7,0,12,.56),0 0 0 7px rgba(255,255,255,.035),0 4px 0 rgba(255,255,255,.16) inset; }
.plans-body .plan-signals { border-color: rgba(255,255,255,.1); }
.plans-body .plan-signals > header p { color: #f1ca73; }
.plans-body .plan-signals > header h2,
.plans-body .plan-signals article strong { color: #fff8ff; }
.plans-body .plan-signals article > span { color: rgba(255,235,255,.34); }
.plans-body .plan-signals article p { color: rgba(249,230,250,.56); }
.plans-body .plans-note { color: rgba(255,238,255,.42); }

.plans-body + .site-footer,
.plans-body .site-footer { color: rgba(255,240,255,.53); }
.plans-body ~ .site-footer,
.plans-body > .site-footer {
  color: rgba(255,240,255,.56);
  border-color: rgba(255,255,255,.09);
  background: rgba(30,8,36,.78);
  box-shadow: 0 14px 44px rgba(5,0,9,.38);
}
.plans-body > .site-footer nav i { color: rgba(255,255,255,.2); }
.plans-body > .site-footer nav a:hover { color: #f2cd77; }
.plans-body > .site-footer > span:last-child { color: rgba(255,240,255,.4); }

.plans-body .overlay { background: rgba(14,3,18,.68); }
.plans-body .checkout-card { color: #fff8ff; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(145deg,#211027,#32123c); box-shadow: 0 38px 110px rgba(4,0,7,.65); }
.plans-body .checkout-kicker { color: #f1cb75; }
.plans-body .checkout-copy,
.plans-body .checkout-card small { color: rgba(255,239,255,.58); }
.plans-body .checkout-options button { color: #fff8ff; border-color: rgba(255,255,255,.11); background: rgba(255,255,255,.055); }
.plans-body .checkout-options button:hover { border-color: rgba(241,203,117,.4); background: rgba(255,255,255,.09); }
.plans-body .checkout-options span { color: rgba(255,239,255,.55); }
.plans-body .checkout-options em { color: #28112f; background: #f2cd78; }
.plans-body .checkout-months-back { color: #f1cb75; }
.plans-body .checkout-months label { color: #fff8ff; }
.plans-body .checkout-months input[type="range"] { background: rgba(255,255,255,.16); }
.plans-body .checkout-months input[type="range"]::-webkit-slider-thumb { background: linear-gradient(135deg,#f1cb75,#ff4a9f); box-shadow: 0 2px 10px rgba(241,203,117,.45); }
.plans-body .checkout-months input[type="range"]::-moz-range-thumb { background: linear-gradient(135deg,#f1cb75,#ff4a9f); box-shadow: 0 2px 10px rgba(241,203,117,.45); }
.plans-body .checkout-months-summary { background: rgba(255,255,255,.08); }
.plans-body .checkout-months-summary strong { color: #fff8ff; }
.plans-body .checkout-months-summary span { color: #f1cb75; }
.plans-body .checkout-months-hint { color: rgba(255,239,255,.55); }
.plans-body .close { color: rgba(255,255,255,.68); background: rgba(255,255,255,.08); }
.plans-body .auth-error { color: #ff85bd !important; }

@media (max-width: 700px) {
  .plans-body .community-frame::before { inset: 0px; border-radius: 22px; }
  .plans-body .community-frame::after { right: -45vw; width: 120vw; opacity: .72; }
  .plans-body .community-frame > .site-topbar,
  .plans-body.community-body .site-topbar { background: rgba(30,8,36,.78); }
  .plans-body .plan-signals article { border-bottom-color: rgba(255,255,255,.08); }
}

/* Plans v3: one quiet orbit, one clear action. */
.orbit-page { display: flex; width: min(900px,calc(100% - 36px)); min-height: calc(100svh - 70px); align-items: center; flex-direction: column; padding: 30px 0 96px; }
.orbit-heading { position: relative; z-index: 3; text-align: center; }
.orbit-heading p { margin: 0 0 8px; color: #f1cd79; font-size: .61rem; font-weight: 730; letter-spacing: .17em; text-transform: uppercase; }
.orbit-heading h1 { margin: 0; color: #fff9ff; font-size: 1.35rem; font-weight: 650; line-height: 1.2; letter-spacing: -.035em; }
.orbit-heading > span { display: block; margin-top: 8px; color: rgba(255,239,255,.5); font-size: .73rem; }
.pro-orbit-scene { display: flex; align-items: center; flex-direction: column; width: 100%; }
.pro-orbit { position: relative; width: min(720px,100%); height: 430px; margin-top: 4px; }
.orbit-line { position: absolute; top: 50%; left: 50%; display: block; border: 1px solid rgba(235,188,255,.14); border-radius: 50%; pointer-events: none; }
.orbit-line::before,.orbit-line::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f0cb75; box-shadow: 0 0 14px rgba(240,203,117,.85); }
.orbit-line-one { width: 610px; height: 300px; transform: translate(-50%,-50%) rotate(-8deg); }
.orbit-line-one::before { top: 45px; left: 75px; }
.orbit-line-one::after { right: 42px; bottom: 77px; width: 3px; height: 3px; }
.orbit-line-two { width: 430px; height: 380px; border-color: rgba(255,255,255,.07); transform: translate(-50%,-50%) rotate(27deg); }
.orbit-line-two::before { top: 63px; right: 31px; width: 3px; height: 3px; background: #ff70b5; box-shadow: 0 0 13px rgba(255,83,167,.72); }
.orbit-line-two::after { left: 45px; bottom: 64px; background: #b98aff; box-shadow: 0 0 13px rgba(185,138,255,.72); }
.orbit-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; gap: 14px; transform: translate(-50%,-50%); }
.orbit-core::before { content: ""; position: absolute; z-index: -2; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle,rgba(186,75,225,.27) 0%,rgba(225,49,143,.12) 43%,transparent 72%); filter: blur(3px); }
.orbit-icon { position: relative; display: grid; place-items: center; width: 204px; height: 204px; border: 1px solid rgba(244,208,124,.21); border-radius: 50%; background: radial-gradient(circle at 43% 37%,rgba(255,255,255,.1),rgba(88,24,104,.24) 48%,rgba(17,7,23,.45) 72%); box-shadow: inset 0 0 44px rgba(226,74,175,.1),0 25px 70px rgba(5,0,8,.3); }
.orbit-icon::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255,255,255,.055); border-radius: inherit; }
.orbit-icon img { display: block; width: 156px; height: 156px; object-fit: contain; filter: drop-shadow(0 18px 25px rgba(4,0,7,.4)); transform: translateY(-2px); }
.orbit-core > strong { color: rgba(255,249,255,.78); font-size: .72rem; font-weight: 620; letter-spacing: .08em; text-transform: uppercase; }
.orbit-benefit { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; color: rgba(255,244,255,.66); font-size: .68rem; white-space: nowrap; animation: orbitBenefitFloat 5s ease-in-out infinite; }
.orbit-benefit > i { display: block; width: 6px; height: 6px; border: 1px solid #f1cd79; border-radius: 50%; box-shadow: 0 0 11px rgba(241,205,121,.45); }
.orbit-benefit strong { color: #fff9ff; font-weight: 690; }
.benefit-one { top: 100px; left: 46px; }
.benefit-two { top: 134px; right: 35px; animation-delay: -1.7s; }
.benefit-three { left: 92px; bottom: 76px; animation-delay: -3.2s; }
.benefit-four { right: 85px; bottom: 52px; animation-delay: -4.6s; }
@keyframes orbitBenefitFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.orbit-purchase { position: relative; z-index: 4; display: grid; width: min(300px,100%); justify-items: center; margin-top: -24px; }
.orbit-purchase > p { display: flex; align-items: baseline; gap: 7px; margin: 0 0 15px; }
.orbit-purchase > p strong { color: #fffaff; font-size: 1.08rem; font-weight: 650; letter-spacing: -.025em; }
.orbit-purchase > p span { color: rgba(255,239,255,.42); font-size: .65rem; }
.orbit-purchase .plan-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 14px 17px; color: #27132e; background: linear-gradient(105deg,#fff8e7,#f3d075 55%,#f0a2cb); box-shadow: 0 16px 35px rgba(5,0,8,.28); }
.orbit-purchase .plan-button:hover { transform: translateY(-2px); box-shadow: 0 20px 43px rgba(5,0,8,.38); }
.orbit-purchase > small { margin-top: 10px; color: rgba(255,239,255,.39); font-size: .61rem; }
.orbit-page-foot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 35px; color: rgba(255,239,255,.38); font-size: .63rem; }
.orbit-page-foot > a { color: rgba(255,246,255,.58); transition: color .18s ease; }
.orbit-page-foot > a:hover { color: #f1cd79; }
.orbit-page-foot > a::after { content: ""; display: inline-block; width: 1px; height: 11px; margin-left: 18px; vertical-align: -2px; background: rgba(255,255,255,.13); }
.orbit-page-foot .plans-note { margin: 0; color: inherit; font-size: inherit; }

@media (max-width: 700px) {
  .orbit-page { min-height: calc(100svh - 62px); padding-top: 28px; }
  .orbit-heading > span { font-size: .68rem; }
  .pro-orbit { height: 350px; margin-top: 8px; }
  .orbit-line-one { width: 330px; height: 215px; }
  .orbit-line-two { width: 245px; height: 290px; }
  .orbit-icon { width: 154px; height: 154px; }
  .orbit-icon img { width: 118px; height: 118px; }
  .orbit-core::before { width: 205px; height: 205px; }
  .orbit-core > strong { font-size: .63rem; }
  .orbit-benefit { gap: 6px; font-size: .6rem; }
  .benefit-one { top: 61px; left: 0; }
  .benefit-two { top: 94px; right: 0; }
  .benefit-three { left: 8px; bottom: 52px; }
  .benefit-four { right: 4px; bottom: 30px; }
  .orbit-purchase { margin-top: -10px; }
  .orbit-page-foot { flex-direction: column; gap: 8px; margin-top: 28px; }
  .orbit-page-foot > a::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-benefit { animation: none; }
}

/* Plans v3.1: bare oversized Pro mark and richer orbit labels. */
.pro-orbit { height: 460px; }
.orbit-line-one { width: 650px; height: 320px; }
.orbit-line-two { width: 470px; height: 410px; }
.orbit-core { gap: 3px; }
.orbit-core::before { display: none; }
.orbit-icon { width: 264px; height: 264px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.orbit-icon::before { display: none; }
.orbit-icon img { width: 236px; height: 236px; filter: drop-shadow(0 24px 30px rgba(4,0,7,.4)); }
.orbit-core > strong { margin-top: -20px; }
.orbit-benefit { align-items: flex-start; gap: 10px; }
.orbit-benefit > i { flex: 0 0 auto; margin-top: 5px; }
.orbit-benefit > div { display: grid; gap: 5px; }
.orbit-benefit strong { display: block; color: #fffaff; font-size: .9rem; font-weight: 650; letter-spacing: -.015em; }
.orbit-benefit p { margin: 0; color: rgba(255,239,255,.44); font-size: .63rem; line-height: 1.35; }
.benefit-one { top: 88px; left: 22px; }
.benefit-two { top: 128px; right: 2px; }
.benefit-three { left: 70px; bottom: 62px; }
.benefit-four { right: 64px; bottom: 40px; }
.orbit-purchase { margin-top: -29px; }

@media (max-width: 700px) {
  .pro-orbit { height: 385px; }
  .orbit-line-one { width: 350px; height: 230px; }
  .orbit-line-two { width: 270px; height: 310px; }
  .orbit-icon { width: 194px; height: 194px; }
  .orbit-icon img { width: 176px; height: 176px; }
  .orbit-core > strong { margin-top: -15px; }
  .orbit-benefit { width: 132px; white-space: normal; }
  .orbit-benefit strong { font-size: .72rem; }
  .orbit-benefit p { font-size: .55rem; }
  .benefit-one { top: 48px; left: 0; }
  .benefit-two { top: 101px; right: -5px; }
  .benefit-three { left: 5px; bottom: 37px; }
  .benefit-four { right: 1px; bottom: 18px; }
  .orbit-purchase { margin-top: -17px; }
}

/* Plans v3.2: high-resolution centerpiece and fuller vertical rhythm. */
.pro-orbit { width: min(860px,100%); height: 540px; }
.orbit-line-one { width: 760px; height: 370px; }
.orbit-line-two { width: 535px; height: 490px; }
.orbit-icon { width: 366px; height: 366px; }
.orbit-icon img { width: 336px; height: 336px; filter: drop-shadow(0 28px 38px rgba(4,0,7,.38)); }
.orbit-core > strong { margin-top: -30px; font-size: .78rem; }
.orbit-benefit strong { font-size: 1.03rem; }
.orbit-benefit p { font-size: .72rem; line-height: 1.42; }
.benefit-one { top: 108px; left: 0; }
.benefit-two { top: 170px; right: -2px; }
.benefit-three { left: 42px; bottom: 78px; }
.benefit-four { right: 38px; bottom: 50px; }
.orbit-purchase { margin-top: -39px; }
.orbit-page-foot { margin-top: 43px; }

@media (max-width: 700px) {
  .pro-orbit-scene { margin-top: 46px; }
  .pro-orbit { width: 100%; height: 430px; }
  .orbit-line-one { width: 375px; height: 255px; }
  .orbit-line-two { width: 295px; height: 350px; }
  .orbit-icon { width: 236px; height: 236px; }
  .orbit-icon img { width: 218px; height: 218px; }
  .orbit-core > strong { margin-top: -21px; font-size: .67rem; }
  .orbit-benefit { width: 145px; }
  .orbit-benefit strong { font-size: .8rem; }
  .orbit-benefit p { font-size: .61rem; line-height: 1.38; }
  .benefit-one { top: 47px; left: -2px; }
  .benefit-two { top: 119px; right: -8px; }
  .benefit-three { left: 1px; bottom: 40px; }
  .benefit-four { right: -4px; bottom: 12px; }
  .orbit-purchase { margin-top: 25px; }
  .orbit-page-foot { margin-top: 135px; }
}

/* Shared navigation and home finishing alignment. */
.site-topbar > .brand { transform: translateY(-2px); }
.home .eyebrow { gap: 0; }
.home .eyebrow i { display: none; }

/* Bump: a temporary lift for the creator's latest publication. */
.preview-notice { text-align: center; }
.bump-trigger {
  position: fixed;
  z-index: 47;
  right: clamp(18px,3vw,46px);
  bottom: 75px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid #117a45;
  border-radius: 12px;
  color: #fff;
  background: #168a52;
  box-shadow: 0 12px 28px rgba(22,138,82,.25);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 740;
  letter-spacing: .01em;
  transition: transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.bump-trigger:hover { transform: translateY(-2px); background: #117a45; box-shadow: 0 16px 34px rgba(22,138,82,.32); }
.bump-trigger:focus-visible { outline: 3px solid rgba(22,138,82,.24); outline-offset: 3px; }
/* Em espera, o botão vira relógio: o anel fecha conforme a hora do banco passa. */
.bump-trigger.is-waiting {
  border-color: rgba(70,39,90,.12);
  color: #5d5566;
  background: #fff;
  box-shadow: 0 12px 28px rgba(42,20,57,.14);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
/* O botão já tem z-index e posição próprios, então o pseudo-elemento fica
   confinado atrás do seu fundo opaco: só os 2px que sobram viram anel. */
.bump-trigger.is-waiting::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  border-radius: 14px;
  background: conic-gradient(from 180deg, #168a52 calc(var(--bump-progress,0) * 360deg), rgba(70,39,90,.12) 0);
}
.bump-trigger.is-waiting:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 16px 34px rgba(42,20,57,.18); }
@media (prefers-reduced-motion: reduce) {
  .bump-trigger.is-waiting:hover { transform: none; }
}
.bump-card {
  position: relative;
  width: min(430px,100%);
  padding: 34px;
  border: 1px solid rgba(70,39,90,.08);
  border-radius: 25px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 30px 90px rgba(42,20,57,.2);
  transform: translateY(12px) scale(.98);
  transition: transform .24s ease;
}
.overlay.open .bump-card { transform: none; }
.bump-card-icon { display: block; width: 62px; height: 62px; margin: -4px 0 18px -5px; }
.bump-card-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bump-kicker { margin: 0 0 8px !important; color: #7c3aed !important; font-size: .67rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.bump-card h2 { margin: 0 40px 10px 0; color: #17131f; font-size: 1.65rem; letter-spacing: -.04em; }
.bump-card > p:not(.bump-kicker):not(.bump-status) { margin: 0; color: #756e7b; font-size: .86rem; line-height: 1.55; }
.bump-recent { overflow: hidden; margin-top: 22px; padding: 14px 15px; border-radius: 13px; color: #332a39; background: #f7f4f9; font-size: .82rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.bump-recent::before { content: "Mais recente"; display: block; margin-bottom: 4px; color: #938a99; font-size: .58rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.bump-status { min-height: 18px; margin: 10px 2px 0; color: #827787; font-size: .72rem; text-align: center; }
.bump-card .primary { width: 100%; margin-top: 8px; }
.bump-card .primary:disabled { cursor: not-allowed; opacity: .52; transform: none; }
.bump-card > small { display: block; margin-top: 13px; color: #958c9a; font-size: .65rem; text-align: center; }

@media (max-width:700px) {
  .filter-menu { margin-left: 0; }
  .filter-menu-trigger > span { display: none; }
  .filter-panel { right: 0; width: min(320px,calc(100vw - 32px)); max-height: min(70vh,480px); overflow-y: auto; }
  .bump-trigger { right: 14px; bottom: 63px; min-width: 70px; height: 40px; padding: 0 17px; border-radius: 11px; }
  .bump-trigger.is-waiting::before { border-radius: 13px; }
  .bump-card { padding: 28px 21px; }
  .featured-pro-mark { width: 68px; height: 64px; border-radius: 0 0 19px 0; }
  .featured-pro-mark img { width: 49px; height: 49px; }
  .featured-live-check { top: 13px; right: 13px; }
}

/* Galáxia mensal — campanha trimestral por TikTok. */
.galaxy-teaser {
  position: fixed;
  z-index: 35;
  right: clamp(18px,2.5vw,44px);
  bottom: 78px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: #2b2231;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.galaxy-teaser[hidden] { display: none; }
.galaxy-teaser-orbit { position: relative; display: grid; place-items: center; width: clamp(108px,10vw,154px); aspect-ratio: 1; }
.galaxy-teaser img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }
.galaxy-teaser-orbit::after,
.giveaway-galaxy-wrap::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,transparent 34%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.95) 49%,rgba(173,226,255,.48) 54%,transparent 66%);
  background-size: 250% 100%;
  background-position: 180% 0;
  -webkit-mask: url("/galaxy-gift.png") center/contain no-repeat;
  mask: url("/galaxy-gift.png") center/contain no-repeat;
  mix-blend-mode: screen;
  animation: galaxySheen 3.8s cubic-bezier(.4,0,.2,1) infinite;
}
.galaxy-teaser:hover .galaxy-teaser-orbit::after { animation-duration: 2.7s; }

.giveaway-overlay { z-index: 80; padding: 22px; background: rgba(17,8,24,.58); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); }
.giveaway-card { position: relative; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(340px,.92fr); width: min(1080px,100%); max-height: min(760px,calc(100svh - 44px)); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 30px; color: #fff; background: linear-gradient(145deg,#1b1024 0%,#29113a 58%,#401456 100%); box-shadow: 0 35px 100px rgba(18,5,29,.44); transform: translateY(18px) scale(.985); transition: transform .28s ease; }
.giveaway-overlay.open .giveaway-card { transform: none; }
.giveaway-close { z-index: 5; top: 18px; right: 18px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.12); }
.giveaway-copy { overflow-y: auto; padding: clamp(28px,4vw,54px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.giveaway-kicker { margin: 0 0 13px; color: #efc96f; font-size: .68rem; font-weight: 780; letter-spacing: .13em; text-transform: uppercase; }
.giveaway-copy h2 { max-width: 580px; margin: 0; font-size: clamp(2rem,3.5vw,3.5rem); line-height: .98; letter-spacing: -.06em; }
.giveaway-lead { max-width: 620px; margin: 19px 0 0; color: rgba(255,255,255,.65); font-size: .88rem; line-height: 1.62; }
.giveaway-status { display: flex; align-items: center; gap: 13px; margin-top: 25px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.055); }
.giveaway-status-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #c6b8ce; box-shadow: 0 0 0 5px rgba(198,184,206,.09); }
.giveaway-status[data-state="progress"] .giveaway-status-dot { background: #f2ca70; box-shadow: 0 0 0 5px rgba(242,202,112,.1); }
.giveaway-status[data-state="eligible"] .giveaway-status-dot { background: #4fe3a3; box-shadow: 0 0 0 5px rgba(79,227,163,.1); }
.giveaway-status div { display: grid; gap: 3px; }
.giveaway-status strong { font-size: .87rem; }
.giveaway-status small { color: rgba(255,255,255,.55); font-size: .7rem; line-height: 1.35; }
.referral-panel { margin-top: 20px; }
.referral-count { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.referral-count span { font-size: 1.32rem; font-weight: 760; letter-spacing: -.035em; }
.referral-count span b { color: #efc96f; }
.referral-count small,.referral-pending { color: rgba(255,255,255,.48); font-size: .68rem; }
.referral-progress,.kitten-progress { height: 6px; overflow: hidden; margin-top: 10px; border-radius: 999px; background: rgba(255,255,255,.09); }
.referral-progress i,.kitten-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#7c3aed,#d64ece,#f2cb73); transition: width .55s cubic-bezier(.2,.8,.2,1); }
.referral-pending { min-height: 1em; margin: 8px 0 17px; }
.referral-panel > label { display: block; margin-bottom: 7px; color: rgba(255,255,255,.58); font-size: .66rem; font-weight: 680; }
.referral-link-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.referral-link-row input { min-width: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px 13px; color: rgba(255,255,255,.78); background: rgba(8,3,13,.25); outline: 0; font: inherit; font-size: .72rem; }
.referral-link-row input:focus { border-color: rgba(216,101,230,.55); }
.referral-link-row button,.giveaway-auth { border: 0; border-radius: 12px; padding: 0 17px; color: #231326; background: linear-gradient(110deg,#f5da82,#f2a5cb); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 760; }
.giveaway-auth { width: 100%; min-height: 44px; margin-top: 18px; }
.giveaway-auth:disabled { cursor: wait; opacity: .6; }
.giveaway-error { min-height: 1em; margin: 9px 0 0; color: #ffafc7; font-size: .7rem; }
.giveaway-fineprint { margin: 13px 0 0; color: rgba(255,255,255,.34); font-size: .6rem; line-height: 1.45; }
.giveaway-fineprint a { color: rgba(255,255,255,.64); text-decoration: underline; text-underline-offset: 2px; }
.kitten-goal { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 14px; margin-top: 21px; padding: 12px 15px 12px 7px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(255,255,255,.045); }
.kitten-visual { position: relative; display: grid; place-items: center; height: 68px; }
.kitten-visual img { width: 74px; height: 82px; object-fit: contain; filter: grayscale(.75) saturate(.55); opacity: .38; }
.kitten-visual span { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #f5d377; background: rgba(21,8,29,.8); font-size: .72rem; }
.kitten-goal.unlocked .kitten-visual img { filter: none; opacity: 1; animation: kittenHello 3.2s ease-in-out infinite; }
.kitten-goal.unlocked .kitten-visual span { color: #10271d; background: #69efb2; }
.kitten-goal-copy { display: grid; gap: 3px; }
.kitten-goal-copy p { margin: 0; color: #efc96f; font-size: .58rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.kitten-goal-copy strong { font-size: .8rem; }
.kitten-goal-copy small { color: rgba(255,255,255,.44); font-size: .62rem; }
.kitten-progress { height: 4px; margin-top: 5px; }
.giveaway-art { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 580px; padding: 42px; overflow: hidden; text-align: center; background: transparent; }
.giveaway-art::before { display: none; }
.giveaway-galaxy-wrap { position: relative; display: grid; place-items: center; width: min(82%,370px); aspect-ratio: 1; }
.giveaway-galaxy { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: none; }
.giveaway-art p { position: relative; z-index: 1; margin: 2px 0 5px; color: #efc96f; font-size: .62rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.giveaway-art strong { position: relative; z-index: 1; font-size: 1.15rem; text-transform: capitalize; }
.giveaway-art small { position: relative; z-index: 1; max-width: 250px; margin-top: 7px; color: rgba(255,255,255,.45); font-size: .65rem; line-height: 1.45; }

@keyframes galaxySheen {
  0%,54% { background-position: 180% 0; opacity: 0; }
  60% { opacity: 1; }
  80% { background-position: -80% 0; opacity: 1; }
  81%,100% { background-position: -80% 0; opacity: 0; }
}
@keyframes proTriggerSheen {
  0%,54% { background-position: 280% 0; opacity: 0; }
  60% { opacity: 1; }
  78% { background-position: -220% 0; opacity: 1; }
  82%,100% { background-position: -220% 0; opacity: 0; }
}
@keyframes kittenHello { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-2deg) translateY(-2px); } }

@media (max-width:800px) {
  .galaxy-teaser { right: 14px; bottom: 69px; }
  .galaxy-teaser-orbit { width: 104px; }
  .giveaway-overlay { padding: 10px; }
  .giveaway-card { grid-template-columns: 1fr; max-height: calc(100svh - 20px); overflow-y: auto; border-radius: 23px; }
  .giveaway-copy { overflow: visible; padding: 30px 22px 24px; }
  .giveaway-copy h2 { padding-right: 25px; font-size: clamp(2rem,10vw,3rem); }
  .giveaway-art { grid-row: 1; min-height: 270px; padding: 25px; }
  .giveaway-galaxy-wrap { width: min(72vw,280px); }
  .giveaway-art p { margin-top: 0; }
  .kitten-goal { grid-template-columns: 65px 1fr; }
}

@media (max-width:430px) {
  .giveaway-art { min-height: 235px; }
  .giveaway-galaxy-wrap { width: 235px; }
  .giveaway-copy { padding: 26px 17px 21px; }
  .referral-count { align-items: start; flex-direction: column; gap: 2px; }
}

@media (prefers-reduced-motion:reduce) {
  .galaxy-teaser-orbit::after,.giveaway-galaxy-wrap::after,.pro-trigger::after,.kitten-goal.unlocked .kitten-visual img { animation: none; }
  .galaxy-teaser-orbit::after,.giveaway-galaxy-wrap::after,.pro-trigger::after { opacity: 0; }
}

/* Solid edge-to-edge chrome. */
.home-frame > .site-topbar,
.community-frame > .site-topbar,
.community-body .site-topbar,
.home-frame > .site-topbar.scrolled,
.community-frame > .site-topbar.scrolled,
.community-body .site-topbar.scrolled {
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-footer,
.home-footer.site-footer {
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 50px;
  border: 0;
  border-top: 1px solid rgba(33,25,40,.08);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 -8px 28px rgba(45,28,57,.035);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width:700px) {
  .site-footer,
  .home-footer.site-footer { left: 0; right: 0; bottom: 0; min-height: 46px; border-radius: 0; }
}

/* Campaign collections. */
.profile-campaigns { margin-top: 42px; padding: 25px; border: 1px solid rgba(124,58,237,.12); border-radius: 22px; background: linear-gradient(135deg,#fbf9ff,#fff 58%); box-shadow: 0 16px 50px rgba(58,30,78,.05); }
.profile-campaigns .profile-section-head { margin-bottom: 17px; }
.profile-campaigns .profile-section-head p { margin: 0 0 5px; color: var(--violet); font-size: .67rem; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.campaign-create-trigger,.campaign-share { border: 0; border-radius: 12px; padding: 11px 15px; color: #fff; background: #7137d6; box-shadow: 0 10px 24px rgba(113,55,214,.2); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 720; }
.campaign-create-trigger:hover,.campaign-share:hover { background: #612bc5; transform: translateY(-1px); }
.campaign-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.campaign-empty { padding: 25px; border: 1px dashed rgba(124,58,237,.18); border-radius: 15px; color: #857b8b; text-align: center; font-size: .84rem; }
.campaign-tile { overflow: hidden; border: 1px solid rgba(49,37,58,.09); border-radius: 17px; background: #fff; box-shadow: 0 9px 28px rgba(42,24,55,.055); }
.campaign-tile-main { display: block; min-height: 170px; padding: 20px; color: inherit; text-decoration: none; }
.campaign-tile-main > span { color: var(--violet); font-size: .61rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.campaign-tile h3 { margin: 10px 0 7px; font-size: 1.08rem; letter-spacing: -.025em; }
.campaign-tile p { display: -webkit-box; overflow: hidden; min-height: 39px; margin: 0 0 15px; color: var(--muted); font-size: .76rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.campaign-tile small { color: #8f8495; font-size: .68rem; }
.campaign-tile-actions { display: flex; gap: 8px; padding: 11px 13px; border-top: 1px solid var(--line); background: #fcfbfd; }
.campaign-tile-actions button { border: 0; padding: 6px 7px; color: #665d6c; background: transparent; cursor: pointer; font: inherit; font-size: .7rem; font-weight: 650; }
.campaign-tile-actions button:hover { color: var(--violet-deep); }
.campaign-tile-actions .danger { margin-left: auto; color: #a33b63; }
.campaign-editor-card { position: relative; width: min(620px,100%); max-height: min(86svh,780px); overflow-y: auto; padding: 31px; border: 1px solid rgba(70,39,90,.08); border-radius: 23px; background: #fff; box-shadow: 0 30px 90px rgba(42,20,57,.2); transform: translateY(12px) scale(.98); transition: transform .24s ease; }
.overlay.open .campaign-editor-card { transform: none; }
.campaign-editor-kicker { margin: 0 0 7px; color: var(--violet); font-size: .67rem; font-weight: 760; letter-spacing: .12em; text-transform: uppercase; }
.campaign-editor-card h2 { margin: 0 38px 8px 0; font-size: 1.55rem; letter-spacing: -.04em; }
.campaign-editor-copy { margin: 0 0 22px; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.campaign-field { display: grid; gap: 7px; margin-top: 14px; color: #443b49; font-size: .76rem; font-weight: 680; }
.campaign-field small { color: #9a909f; font-weight: 500; }
.campaign-field input,.campaign-field textarea { width: 100%; border: 1px solid rgba(58,41,67,.13); border-radius: 11px; padding: 12px 13px; color: #241f28; background: #faf9fb; font: inherit; font-size: .84rem; resize: vertical; }
.campaign-field input:focus,.campaign-field textarea:focus { outline: 3px solid rgba(124,58,237,.11); border-color: rgba(124,58,237,.35); }
.campaign-picker { margin: 19px 0 0; padding: 0; border: 0; }
.campaign-picker legend { margin-bottom: 9px; color: #443b49; font-size: .76rem; font-weight: 680; }
#campaign-item-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 230px; overflow-y: auto; padding: 2px; }
.campaign-option { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; }
.campaign-option:has(input:checked) { border-color: rgba(124,58,237,.32); background: #faf7ff; }
.campaign-option input { accent-color: var(--violet); }
.campaign-option span { display: grid; min-width: 0; }
.campaign-option strong { overflow: hidden; color: #352e3a; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.campaign-option small { margin-top: 2px; color: #948a99; font-size: .62rem; }
.campaign-picker-empty { grid-column: 1/-1; margin: 0; padding: 18px; border-radius: 11px; color: var(--muted); background: #f8f6fa; text-align: center; font-size: .78rem; }
.campaign-save { width: 100%; margin-top: 8px; }

.campaign-page { width: min(1180px,100%); margin: 0 auto; padding: clamp(62px,8vw,105px) 0 36px; }
.campaign-hero { position: relative; display: flex; align-items: end; justify-content: space-between; gap: 32px; overflow: hidden; padding: clamp(27px,5vw,54px); border: 1px solid rgba(124,58,237,.12); border-radius: 29px; background: radial-gradient(circle at 90% 10%,rgba(244,114,182,.18),transparent 34%),linear-gradient(135deg,#f5eeff,#fff 62%); box-shadow: 0 22px 70px rgba(64,31,88,.09); }
.campaign-hero > div { position: relative; z-index: 1; max-width: 760px; }
.campaign-public-kicker { margin: 0 0 13px; color: var(--violet); font-size: .7rem; font-weight: 780; letter-spacing: .13em; text-transform: uppercase; }
.campaign-hero h1 { margin: 0; font-size: clamp(2.25rem,5vw,4.9rem); line-height: .98; letter-spacing: -.06em; }
.campaign-hero #campaign-description { max-width: 670px; margin: 20px 0 0; color: #6e6474; font-size: clamp(.9rem,1.4vw,1.05rem); line-height: 1.65; }
.campaign-creator { display: flex; align-items: center; gap: 9px; margin-top: 22px; color: #5e5364; font-size: .76rem; font-weight: 650; }
.campaign-creator .creator-avatar { width: 28px; height: 28px; }
.campaign-share { position: relative; z-index: 1; flex: 0 0 auto; }
.campaign-content { margin-top: 38px; }
.campaign-content-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.campaign-content-head h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.035em; }
.campaign-content-head span { color: #8d8392; font-size: .75rem; }
.campaign-page .cards { grid-template-columns: repeat(3,minmax(0,1fr)); }

@media (max-width:820px) {
  .campaign-list,.campaign-page .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .campaign-hero { align-items: flex-start; flex-direction: column; }
}
@media (max-width:560px) {
  .profile-campaigns { padding: 19px; }
  .campaign-list,.campaign-page .cards,#campaign-item-options { grid-template-columns: 1fr; }
  .profile-campaigns .profile-section-head { align-items: flex-end; }
  .campaign-editor-card { padding: 27px 19px; }
  .campaign-page { padding-top: 56px; }
  .campaign-hero { border-radius: 21px; }
  .campaign-share { width: 100%; }
}

/* Campaign cards live in the community feed, with a visual preview of the collection. */
.campaign-feed-card { border-color: rgba(124,58,237,.2); background: linear-gradient(#fff,#fdfbff); box-shadow: 0 16px 48px rgba(90,42,128,.11); }
.campaign-feed-cover { background: linear-gradient(135deg,#2b1644,#7c3aed 58%,#ed5a9b); }
.campaign-feed-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent,rgba(25,10,38,.2)); pointer-events: none; }
.campaign-feed-badge { z-index: 2; background: rgba(59,24,91,.8); backdrop-filter: blur(8px); }
.campaign-thumbnail-strip { position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-end; min-height: 45px; margin-top: -15px; padding: 0 16px; pointer-events: none; }
.campaign-mini { display: grid; place-items: center; overflow: hidden; width: 53px; height: 38px; margin-left: -7px; border: 3px solid #fff; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#8b5bea,#ef6eaa); box-shadow: 0 6px 16px rgba(48,25,64,.17); font-size: .72rem; font-weight: 760; }
.campaign-mini:first-child { margin-left: 0; }
.campaign-mini img { width: 100%; height: 100%; object-fit: cover; }
.campaign-mini-more { color: #6331b7; background: #f1e9ff; }
.campaign-mini-empty { font-size: 1rem; }
.campaign-feed-card .card-body { margin-top: -2px; padding-top: 7px; }
.campaign-feed-card .meta span:last-child { color: var(--violet-deep); font-weight: 690; }

.campaign-cover-field { display: grid; grid-template-columns: 145px 1fr; align-items: center; gap: 17px; margin: 20px 0 4px; padding: 13px; border: 1px solid rgba(124,58,237,.12); border-radius: 14px; background: #faf8fd; }
.campaign-cover-preview { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 16/9; border-radius: 10px; color: #8f8198; background: linear-gradient(135deg,#eee7f7,#f9eaf2); font-size: .68rem; font-weight: 720; text-transform: uppercase; }
.campaign-cover-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.campaign-cover-button { display: inline-flex; border: 1px solid rgba(124,58,237,.2); border-radius: 10px; padding: 9px 12px; color: #6630c1; background: #fff; cursor: pointer; font-size: .74rem; font-weight: 720; }
.campaign-cover-field p { margin: 8px 0 0; color: #94899a; font-size: .64rem; line-height: 1.45; }
.campaign-cover-status { min-height: 17px; margin: 7px 2px 0; font-size: .7rem; }
.campaign-cover-status.checking { color: #6d55a0; }
.campaign-cover-status.approved { color: #168a52; }
.campaign-cover-status.rejected { color: #b4235f; }
.campaign-tile-main.has-cover { padding-top: 0; }
.campaign-tile-cover { display: block; width: calc(100% + 40px); height: 92px; margin: 0 -20px 17px; object-fit: cover; }

.campaign-hero-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.campaign-hero.has-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(15,7,23,.88),rgba(15,7,23,.6) 58%,rgba(15,7,23,.24)); }
.campaign-hero.has-cover h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.18); }
.campaign-hero.has-cover .campaign-public-kicker { color: #e4caff; }
.campaign-hero.has-cover #campaign-description,.campaign-hero.has-cover .campaign-creator { color: rgba(255,255,255,.84); }
.campaign-hero.has-cover .campaign-share { border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.16); backdrop-filter: blur(10px); }

@media (max-width:560px) {
  .campaign-cover-field { grid-template-columns: 110px 1fr; }
  .campaign-mini { width: 48px; height: 35px; }
}

/* Community loading states and profile sidebar. */
.community-body .page.community-page {
  display: grid;
  grid-template-columns: minmax(0,1fr) 270px;
  align-items: start;
  gap: clamp(22px,2vw,28px);
  width: 100%;
  margin-right: auto;
  margin-left: 0;
}
.community-main-column { min-width: 0; }
.community-main-column > .cards { grid-template-columns: repeat(4,minmax(0,1fr)); }
.community-profile-box {
  position: sticky;
  top: 92px;
  transform: translateX(clamp(14px,2.4vw,44px));
  overflow: hidden;
  min-height: 330px;
  border: 1px solid rgba(74,52,87,.1);
  border-radius: 22px;
  background: linear-gradient(155deg,#fff 0%,#fcf9ff 68%,#f5edff 100%);
  box-shadow: 0 18px 55px rgba(55,27,73,.08);
}
.community-profile-inner { position: relative; z-index: 1; margin-top: -22px; padding: 18px 23px 22px; }
.community-profile-avatar { position: relative; display: grid; place-items: center; overflow: hidden; width: 100%; height: 146px; margin: 0; border-radius: 0; color: #fff; background: radial-gradient(circle at 75% 22%,rgba(255,255,255,.2),transparent 32%),linear-gradient(135deg,#5d24c5,#ec579b); font-size: 1.5rem; font-weight: 780; }
.community-profile-avatar::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0; height: 48px; pointer-events: none; background: linear-gradient(transparent,rgba(253,250,255,.82)); }
.community-profile-avatar.has-image { background: #eee8f3; }
.community-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.community-profile-box h2 { overflow: hidden; margin: 0; color: #231d28; font-size: 1.25rem; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.community-profile-link { display: inline-block; margin-top: 7px; color: #766c7c; font-size: .7rem; font-weight: 620; }
.community-profile-link:hover { color: var(--violet-deep); }
.community-profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 23px; }
.community-profile-stats > div { min-width: 0; padding: 13px 10px; border: 1px solid rgba(124,58,237,.09); border-radius: 12px; background: rgba(255,255,255,.72); }
.community-profile-stats strong { display: block; overflow: hidden; color: #2d2532; font-size: 1.15rem; letter-spacing: -.035em; text-overflow: ellipsis; }
.community-profile-stats span { display: block; margin-top: 3px; color: #968b9c; font-size: .58rem; line-height: 1.2; }
.community-profile-note { margin: 17px 0 0; color: #827788; font-size: .68rem; line-height: 1.5; }
.community-profile-footer { padding: 12px; border-top: 1px solid rgba(74,52,87,.08); background: rgba(255,255,255,.72); }
.community-profile-footer a { position: relative; display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 9px; overflow: hidden; min-height: 58px; padding: 7px 10px 7px 7px; border: 1px solid rgba(255,213,91,.34); border-radius: 15px; color: #fff; background: radial-gradient(circle at 12% 10%,rgba(236,72,153,.58),transparent 34%),linear-gradient(125deg,#3f177d 0%,#6d28d9 54%,#9b2ac5 100%); box-shadow: 0 12px 28px rgba(83,35,146,.25),inset 0 1px rgba(255,255,255,.22); text-decoration: none; transition: transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.community-profile-footer a::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 28%,rgba(255,255,255,.16) 47%,transparent 66%); transform: translateX(-115%); transition: transform .52s ease; }
.community-profile-footer a:hover { filter: saturate(1.08); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(83,35,146,.31),inset 0 1px rgba(255,255,255,.25); }
.community-profile-footer a:hover::after { transform: translateX(115%); }
.community-pro-emblem { position: relative; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,222,116,.38); border-radius: 12px; background: linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.05)); box-shadow: inset 0 1px rgba(255,255,255,.22),0 7px 16px rgba(26,8,57,.2); }
.community-pro-emblem img { display: block; width: 35px; height: 35px; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(31,8,67,.28)); }
.community-pro-copy { position: relative; z-index: 1; display: block; min-width: 0; }
.community-pro-copy strong,.community-pro-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.community-pro-copy strong { font-size: .69rem; font-weight: 780; letter-spacing: -.01em; }
.community-pro-copy small { margin-top: 3px; color: rgba(255,255,255,.68); font-size: .53rem; font-weight: 560; }
.community-pro-arrow { position: relative; z-index: 1; color: #ffe079; font-size: 1rem; transition: transform .18s ease; }
.community-profile-footer a:hover .community-pro-arrow { transform: translateX(2px); }
.community-profile-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 12px; color: #918697; background: rgba(253,251,255,.94); font-size: .68rem; transition: opacity .22s ease; }
.community-profile-box:not(.is-loading) .community-profile-loading { opacity: 0; pointer-events: none; }
.community-profile-spinner,.card-media-spinner { width: 28px; height: 28px; border: 3px solid rgba(124,58,237,.14); border-top-color: #7c3aed; border-radius: 50%; animation: spin .72s linear infinite; }

.community-loading-card { pointer-events: none; }
.community-loading-media { display: grid; place-items: center; }
.community-loading-media::before { display: none; }
.community-loading-body { gap: 11px; }
.loading-line { position: relative; display: block; overflow: hidden; height: 10px; border-radius: 999px; background: #eeeaf1; }
.loading-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent); transform: translateX(-100%); animation: cardShimmer 1.25s ease-in-out infinite; }
.loading-creator { width: 46%; height: 9px; }
.loading-title { width: 82%; height: 14px; margin-top: 2px; }
.loading-description { width: 100%; }
.loading-footer { width: 58%; margin-top: auto; }
.thumb.media-is-loading,.featured-media.media-is-loading { display: grid; place-items: center; }
.thumb.media-is-loading .card-media-spinner,.featured-media.media-is-loading .card-media-spinner { position: absolute; z-index: 2; }
.thumb > img,.featured-media > img { opacity: 0; }
.thumb > img.media-is-ready,.featured-media > img.media-is-ready { opacity: 1; transition: opacity .24s ease,transform .3s ease; }

@keyframes cardShimmer { to { transform: translateX(100%); } }

@media (max-width:1050px) {
  .community-body .page.community-page { grid-template-columns: minmax(0,1fr) 240px; gap: 24px; }
  .community-main-column > .cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .community-body .page.community-page { grid-template-columns: 1fr; }
  .community-profile-box { position: relative; top: auto; width: min(100%,520px); margin: 4px auto 0; transform: none; }
}
@media (max-width:620px) {
  .community-main-column > .cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .loading-line::after { animation: none; }
}

/* Creator hub: expressive profile, editable avatar and compact workspace. */
.profile-body { background: #f7f4fa; }
.profile-hub { width: min(1280px,100%); padding-bottom: 54px; }
.profile-hub .profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(230px,1fr) minmax(330px,.9fr) auto;
  grid-template-areas: "avatar identity metrics logout" "avatar identity plan plan" "status status status status";
  align-items: center;
  gap: 17px 28px;
  overflow: hidden;
  min-height: 255px;
  padding: 34px 36px 24px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 31px;
  color: #fff;
  background: radial-gradient(circle at 82% 15%,rgba(233,73,163,.4),transparent 29%),radial-gradient(circle at 8% 110%,rgba(124,58,237,.48),transparent 34%),linear-gradient(128deg,#1b1027 0%,#321543 48%,#561953 100%);
  box-shadow: 0 32px 75px rgba(47,22,61,.2),inset 0 1px rgba(255,255,255,.12);
  isolation: isolate;
}
.profile-hero-glow { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .28; background: repeating-linear-gradient(118deg,transparent 0 48px,rgba(255,255,255,.04) 49px 50px); }
.profile-avatar-uploader { grid-area: avatar; position: relative; align-self: center; width: 132px; cursor: pointer; }
.profile-hub .profile-avatar { display: grid; place-items: center; overflow: hidden; width: 124px; height: 124px; border: 3px solid rgba(255,255,255,.5); border-radius: 34px; color: #fff; background: linear-gradient(145deg,#7c3aed,#ec4899); box-shadow: 0 20px 38px rgba(8,2,14,.28); font-size: 1.7rem; }
.profile-hub .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-edit { position: absolute; right: -2px; bottom: -7px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; color: #2d1738; background: #fff; box-shadow: 0 9px 22px rgba(12,4,19,.24); font-size: .61rem; font-weight: 740; white-space: nowrap; transition: transform .18s ease; }
.profile-avatar-edit svg { width: 14px; height: 14px; }
.profile-avatar-uploader:hover .profile-avatar-edit { transform: translateY(-2px); }
.profile-avatar-uploader.is-uploading { cursor: wait; opacity: .7; pointer-events: none; }
.profile-hub .profile-identity { grid-area: identity; min-width: 0; }
.profile-hub .profile-identity p { color: #e7bdff; }
.profile-hub .profile-identity h1 { overflow: hidden; color: #fff; font-size: clamp(2.25rem,4.3vw,4.4rem); text-overflow: ellipsis; white-space: nowrap; }
.profile-hub .profile-identity > span { color: rgba(255,255,255,.68); }
.profile-hub .profile-identity small { display: block; margin-top: 18px; color: rgba(255,255,255,.48); font-size: .67rem; }
.profile-hub .profile-logout { grid-area: logout; align-self: start; border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.72); background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.profile-hub .profile-logout:hover { color: #fff; border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.14); }
.profile-metrics { grid-area: metrics; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.profile-hub .profile-stat { min-width: 0; width: 100%; padding: 16px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(255,255,255,.075); backdrop-filter: blur(10px); text-align: left; }
.profile-hub .profile-stat strong { overflow: hidden; color: #fff; font-size: 1.55rem; text-overflow: ellipsis; }
.profile-hub .profile-stat span { margin-top: 3px; color: rgba(255,255,255,.56); }
.profile-avatar-status { grid-area: status; min-height: 17px; margin: 0; font-size: .68rem; }
.profile-avatar-status.checking { color: #e4c9ff; }
.profile-avatar-status.approved { color: #8ff0bd; }
.profile-avatar-status.rejected { color: #ff9abb; }
.profile-hub .profile-plan { grid-area: plan; display: grid; grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 11px; min-width: 0; margin: 0; padding: 9px 11px; border-color: rgba(255,217,105,.3); color: #fff; background: rgba(28,8,40,.28); backdrop-filter: blur(12px); }
.profile-hub .profile-plan[hidden] { display: none; }
.profile-hub .profile-plan > img { width: 43px; height: 43px; object-fit: contain; }
.profile-hub .profile-plan p { color: #f4cf76; }
.profile-hub .profile-plan strong { color: #fff; }
.profile-hub .profile-plan span { color: rgba(255,255,255,.56); }
.profile-hub .profile-plan button { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.72); background: rgba(255,255,255,.08); }
.profile-feature-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.profile-feature-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(66,40,80,.1); border-radius: 999px; color: #6c6272; background: #fff; font-size: .78rem; font-weight: 650; cursor: pointer; transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.profile-feature-tab svg { width: 17px; height: 17px; flex: 0 0 auto; }
.profile-feature-tab:hover { color: #3a2f42; border-color: rgba(124,58,237,.24); }
.profile-feature-tab.active { color: #fff; border-color: transparent; background: linear-gradient(135deg,#7c3aed,#ec4899); box-shadow: 0 12px 28px rgba(124,58,237,.24); }
.profile-workspace { display: block; margin-top: 26px; }
.profile-workspace > .profile-campaigns,.profile-workspace > .profile-content { margin-top: 0; }
.profile-hub .profile-campaigns,.profile-hub .profile-content { margin: 0; padding: 24px; border: 1px solid rgba(66,40,80,.09); border-radius: 25px; background: rgba(255,255,255,.94); box-shadow: 0 18px 54px rgba(53,28,68,.07); }
.profile-hub .profile-section-head p { margin: 0 0 5px; color: var(--violet); font-size: .65rem; font-weight: 770; letter-spacing: .11em; text-transform: uppercase; }
.profile-hub .profile-section-head h2 { font-size: 1.55rem; }
.profile-hub .campaign-list { grid-template-columns: 1fr; }
.profile-hub .campaign-tile-main { min-height: 155px; }
.campaign-tile-metrics { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.campaign-tile-metrics small:last-child { color: var(--violet-deep); font-weight: 680; }
.profile-hub .profile-content .cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.profile-hub .profile-content .profile-section-head a { padding: 9px 12px; border-radius: 11px; background: #f3edff; }

/* Private saved collections. */
.save-card-button { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; margin: -7px -5px -7px auto; padding: 0; border: 1px solid rgba(91,52,116,.12); border-radius: 9px; color: #8d8496; background: #f7f3fa; transition: color .18s ease,background .18s ease,transform .18s ease; }
.save-card-button:hover { color: #6f35d5; background: #eee7fb; transform: translateY(-1px); }
.save-card-button.saved { color: #fff; border-color: #7739dd; background: linear-gradient(135deg,#7438dd,#ca3d9d); box-shadow: 0 6px 16px rgba(112,53,211,.22); }
.save-card-button svg { width: 16px; height: 16px; }
.collection-save-card { position: relative; width: min(460px,calc(100vw - 28px)); padding: 32px; border: 1px solid #e8dfef; border-radius: 26px; background: #fff; box-shadow: 0 30px 100px rgba(40,20,54,.22); }
.collection-kicker { margin: 0 0 7px; color: #7c3aed; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.collection-save-card h2 { margin: 0; color: #211a26; font-size: 1.7rem; letter-spacing: -.04em; }
.collection-target-title { overflow: hidden; margin: 8px 0 20px; color: #807586; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.collection-options { display: grid; gap: 8px; max-height: 310px; overflow-y: auto; padding-right: 3px; }
.collection-options-loading { padding: 24px; color: #8c8292; text-align: center; }
.collection-option { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: 1px solid #eee7f2; border-radius: 14px; color: #302736; background: #fcfbfd; text-align: left; }
.collection-option:hover { border-color: #d8c4ef; background: #faf6ff; }
.collection-option.selected { border-color: rgba(124,58,237,.28); background: #f6f0ff; }
.collection-option-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #7136d5; background: #eee6fb; font-weight: 800; }
.collection-option.selected .collection-option-mark { color: #fff; background: linear-gradient(145deg,#7136d8,#d13c9a); }
.collection-option strong,.collection-option small { display: block; }
.collection-option strong { font-size: .84rem; }
.collection-option small { margin-top: 3px; color: #8c8392; font-size: .67rem; }
.collection-create-inline { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #eee8f2; }
.collection-create-inline input { min-width: 0; height: 44px; padding: 0 12px; border: 1px solid #dfd6e6; border-radius: 11px; outline: 0; background: #faf8fb; }
.collection-create-inline input:focus { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.09); }
.collection-create-inline button { padding: 0 17px; border-radius: 11px; color: #fff; background: #181419; font-weight: 720; }
.collection-limit-note { margin: 9px 2px 0; color: #918794; font-size: .65rem; line-height: 1.4; }
.profile-collections { margin-top: 26px; padding: 24px; border: 1px solid rgba(66,40,80,.09); border-radius: 25px; background: rgba(255,255,255,.94); box-shadow: 0 18px 54px rgba(53,28,68,.07); }
.profile-collections > .profile-section-head { margin-bottom: 18px; }
#profile-collection-limit { color: #8d8292; font-size: .7rem; }
.profile-collections-shell { display: grid; grid-template-columns: minmax(210px,260px) minmax(0,1fr); gap: 20px; }
.profile-collection-tabs { display: grid; align-content: start; gap: 8px; }
.profile-collection-tabs button { display: grid; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 11px; padding: 8px; border: 1px solid transparent; border-radius: 15px; color: #3a303f; background: #f8f5fa; text-align: left; }
.profile-collection-tabs button:hover,.profile-collection-tabs button.active { border-color: rgba(124,58,237,.18); background: #f2ebfc; }
.profile-collection-mosaic { display: grid; grid-template-columns: repeat(2,1fr); width: 52px; height: 52px; overflow: hidden; border-radius: 12px; color: #7439dc; background: linear-gradient(145deg,#eee7fa,#f9e9f3); }
.profile-collection-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.profile-collection-mosaic img:first-child:nth-last-child(3) { grid-row: 1/3; }
.profile-collection-mosaic i { grid-column: 1/3; display: grid; place-items: center; font-style: normal; font-size: 1.2rem; }
.profile-collection-tabs strong,.profile-collection-tabs small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-collection-tabs strong { font-size: .82rem; }
.profile-collection-tabs small { margin-top: 3px; color: #8e8492; font-size: .65rem; }
.profile-collection-view { min-width: 0; padding-left: 20px; border-left: 1px solid #eee8f1; }
.profile-collection-view-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; }
.profile-collection-view-head p { margin: 0 0 3px; color: #7c3aed; font-size: .62rem; font-weight: 780; letter-spacing: .1em; text-transform: uppercase; }
.profile-collection-view-head h3 { margin: 0; font-size: 1.25rem; }
.profile-collection-view-head button { padding: 8px 10px; border: 1px solid #f0cedb; border-radius: 10px; color: #b7295c; background: #fff7fa; font-size: .68rem; }
.profile-collection-view .cards { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
@media (max-width: 980px) { .profile-collections-shell { grid-template-columns: 1fr; } .profile-collection-tabs { display: flex; overflow-x: auto; padding-bottom: 4px; } .profile-collection-tabs button { min-width: 205px; } .profile-collection-view { padding: 17px 0 0; border-top: 1px solid #eee8f1; border-left: 0; } .profile-collection-view .cards { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px) { .collection-save-card { padding: 27px 20px 21px; border-radius: 22px; } .profile-collections { padding: 19px; border-radius: 21px; } .profile-collection-view .cards { grid-template-columns: 1fr; } }

/* Campaign reach sits directly on the public cover. */
.campaign-hero-side { position: relative; z-index: 2; display: grid; justify-items: stretch; flex: 0 0 min(245px,34%); gap: 10px; }
.campaign-reach { min-width: 220px; padding: 17px 18px; border: 1px solid rgba(124,58,237,.13); border-radius: 18px; color: #352440; background: rgba(255,255,255,.76); box-shadow: 0 14px 34px rgba(50,24,67,.1); backdrop-filter: blur(12px); }
.campaign-reach span,.campaign-reach small { display: block; color: #88788f; font-size: .62rem; }
.campaign-reach span { font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.campaign-reach strong { display: block; margin: 5px 0 2px; font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.campaign-hero-side .campaign-share { width: 100%; }
.campaign-hero.has-cover .campaign-reach { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(20,8,29,.5); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.campaign-hero.has-cover .campaign-reach span,.campaign-hero.has-cover .campaign-reach small { color: rgba(255,255,255,.64); }

@media (max-width:980px) {
  .profile-hub .profile-hero { grid-template-columns: 122px minmax(0,1fr) auto; grid-template-areas: "avatar identity logout" "metrics metrics metrics" "plan plan plan" "status status status"; }
  .profile-workspace { grid-template-columns: 1fr; }
  .profile-hub .profile-campaigns { position: static; }
  .profile-hub .campaign-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .profile-hub { padding-top: 52px; }
  .profile-hub .profile-hero { grid-template-columns: 92px minmax(0,1fr) auto; grid-template-areas: "avatar identity logout" "metrics metrics metrics" "plan plan plan" "status status status"; column-gap: 14px; padding: 22px 18px 20px; border-radius: 24px; }
  .profile-avatar-uploader { width: 92px; }
  .profile-hub .profile-avatar { width: 92px; height: 92px; border-radius: 25px; }
  .profile-avatar-edit { right: -6px; bottom: -8px; padding: 6px 8px; font-size: 0; }
  .profile-avatar-edit svg { margin: 0; }
  .profile-avatar-edit span:last-child { display: none; }
  .profile-hub .profile-identity h1 { font-size: 1.55rem; }
  .profile-hub .profile-identity small { display: none; }
  .profile-hub .profile-logout { align-self: start; padding: 7px 10px; font-size: .63rem; }
  .profile-hub .profile-plan { grid-template-columns: 42px 1fr; }
  .profile-hub .profile-plan button { grid-column: 1/-1; }
  .profile-hub .campaign-list,.profile-hub .profile-content .cards { grid-template-columns: 1fr; }
  .profile-hub .profile-campaigns,.profile-hub .profile-content { padding: 19px; border-radius: 21px; }
  .profile-feature-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .profile-feature-tab { flex: 0 0 auto; padding: 9px 13px; font-size: .73rem; }
  .campaign-hero-side { width: 100%; flex-basis: auto; }
  .campaign-reach { min-width: 0; }
}
@media (max-width:430px) {
  .profile-hub .profile-hero { grid-template-columns: 76px minmax(0,1fr) auto; column-gap: 11px; padding: 20px 16px 18px; }
  .profile-avatar-uploader { width: 76px; }
  .profile-hub .profile-avatar { width: 76px; height: 76px; border-radius: 21px; }
  .profile-hub .profile-identity h1 { font-size: 1.3rem; }
  .profile-hub .profile-logout { padding: 6px 9px; font-size: .6rem; }
  .profile-metrics { grid-template-columns: 1fr; }
  .profile-hub .profile-stat { display: flex; align-items: baseline; justify-content: space-between; }
  .profile-hub .profile-section-head { align-items: flex-end; }
}

/* Grupos / Círculos */
.groups-page,.group-detail-page { width:min(1280px,calc(100% - 64px)); margin:0 auto; padding:78px 0 100px; }
.groups-page { padding-top:54px; }
.groups-main-column { min-width:0; }
.groups-kicker { margin:0 0 10px; color:#c4b5fd; font-size:.7rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.groups-toolbar { display:grid; grid-template-columns:minmax(250px,1fr) auto auto; gap:18px; align-items:center; margin:0 0 26px; padding:12px; border:1px solid rgba(63,35,75,.08); border-radius:19px; background:#fff; box-shadow:0 12px 38px rgba(61,34,72,.05); }
.groups-search { display:flex; align-items:center; gap:10px; padding:0 12px; color:#998ca0; }
.groups-search input { width:100%; height:42px; padding:0; border:0; outline:0; font:inherit; }
.group-platform-filters { display:flex; gap:5px; }
.group-platform-filters button { padding:10px 13px; color:#786e7e; font-weight:700; border:0; border-radius:11px; background:transparent; cursor:pointer; }
.group-platform-filters button.active { color:#fff; background:#2d1838; }
.group-sort { display:flex; align-items:center; gap:8px; padding:0 5px 0 13px; border-left:1px solid #eee9f0; color:#8a7e90; font-size:.75rem; }
.group-sort select { height:39px; padding:0 9px; border:0; border-radius:10px; background:#f7f3fa; color:#35243d; font-weight:700; }
.group-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.group-card { position:relative; overflow:hidden; min-height:330px; display:flex; flex-direction:column; border:1px solid rgba(75,43,90,.1); border-radius:25px; background:#fff; box-shadow:0 16px 50px rgba(55,27,70,.07); transition:transform .22s ease,box-shadow .22s ease; }
.group-card[role="link"] { cursor:pointer; }
.group-card[role="link"]:focus-visible { outline:3px solid rgba(124,58,237,.25); outline-offset:3px; }
.group-card:hover { transform:translateY(-4px); box-shadow:0 23px 60px rgba(55,27,70,.12); }
.group-card::before { content:""; position:absolute; inset:0 0 auto; height:105px; background:linear-gradient(120deg,#f4f0f8,#fbf8fd); }
.group-card.platform-whatsapp::before { background:linear-gradient(120deg,#e4fff0,#f8fffb); }
.group-card.platform-telegram::before { background:linear-gradient(120deg,#e6f7ff,#f7fcff); }
.group-card.platform-discord::before { background:linear-gradient(120deg,#eeeeff,#fafaff); }
.group-card-top { position:relative; z-index:1; display:flex; align-items:flex-start; gap:10px; min-height:110px; padding:24px 22px 12px; }
.group-card-logo { display:grid; place-items:center; flex:0 0 74px; width:74px; height:74px; overflow:hidden; color:#fff; font-size:1.6rem; font-weight:850; border:5px solid #fff; border-radius:23px; background:linear-gradient(135deg,#7c3aed,#ec4899); box-shadow:0 11px 25px rgba(65,31,80,.16); }
.group-card-logo img,.group-detail-logo img { width:100%; height:100%; object-fit:cover; }
.group-card-labels { display:flex; flex-wrap:wrap; gap:5px; padding-top:5px; }
.group-platform-badge,.group-card-verified,.group-adult-badge,.group-verified { display:inline-flex; align-items:center; width:max-content; padding:5px 8px; font-size:.65rem; font-weight:800; border-radius:999px; background:#fff; color:#4d3d55; box-shadow:0 4px 13px rgba(48,24,62,.08); }
.group-card-verified,.group-verified { color:#15935d; }
.group-adult-badge { color:#c02655; }
.group-pro-mark { position:absolute; right:18px; top:18px; display:grid; place-items:center; width:35px; height:35px; border-radius:12px; background:#fff; box-shadow:0 8px 20px rgba(74,37,90,.12); }
.group-pro-mark img { width:27px; height:27px; object-fit:contain; }
.group-card-body { flex:1; padding:8px 22px 18px; }
.group-card-category { margin:0 0 8px; color:#8b5cf6; font-size:.67rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.group-card h2 { margin:0; color:#27172f; font-size:1.25rem; letter-spacing:-.025em; }
.group-card-description { min-height:43px; margin:10px 0 18px; color:#766b7c; font-size:.82rem; line-height:1.55; }
.group-card-stats { display:flex; gap:18px; color:#918698; font-size:.7rem; }
.group-card-stats strong { display:block; color:#2e2035; font-size:.92rem; }
.group-card footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 20px; border-top:1px solid #f0ebf2; }
.group-card footer > span { display:flex; align-items:center; gap:7px; min-width:0; color:#827687; font-size:.7rem; }
.group-card footer .avatar { width:25px; height:25px; flex:0 0 25px; }
.group-card footer a { color:#6d28d9; font-size:.74rem; font-weight:800; text-decoration:none; }
.group-card.compact { min-height:300px; }
.group-loading-card { display:grid; place-items:center; min-height:330px; }
.groups-empty { padding:75px 20px; text-align:center; color:#8d8292; }
.group-editor-card,.group-report-card { width:min(640px,calc(100% - 30px)); max-height:calc(100vh - 34px); overflow:auto; padding:30px; border-radius:27px; background:#fff; box-shadow:0 28px 90px rgba(32,16,42,.28); }
.group-editor-card h2,.group-report-card h2 { margin:0 0 23px; color:#281632; font-size:1.65rem; letter-spacing:-.035em; }
.group-invite-row > label,.group-preview-fields > label,.group-form-pair label,.group-report-card label { display:grid; gap:7px; margin-top:15px; color:#5b4c63; font-size:.75rem; font-weight:750; }
.group-invite-row > div { display:flex; gap:8px; }
.group-invite-row input,.group-preview-fields input,.group-preview-fields textarea,.group-preview-fields select,.group-report-card select,.group-report-card textarea { width:100%; padding:12px 13px; color:#312039; font:inherit; border:1px solid #e8dfed; border-radius:12px; outline:0; background:#fcfaff; }
.group-invite-row input { min-width:0; }
.group-invite-row small { display:block; margin-top:7px; color:#a397a9; font-size:.68rem; }
.group-reading { display:flex; align-items:center; justify-content:center; gap:12px; margin:20px 0 2px; padding:18px; color:#776a7d; font-size:.78rem; border-radius:15px; background:#f8f4fa; }
.group-reading[hidden] { display:none !important; }
.group-reading .card-media-spinner { position:static; transform:none; }
.group-editor-preview { display:flex; align-items:center; gap:14px; margin:22px 0 4px; padding:15px; border:1px solid #eee6f2; border-radius:17px; background:linear-gradient(120deg,#faf7fd,#fff); }
.group-logo-preview { display:grid; place-items:center; width:65px; height:65px; overflow:hidden; color:#fff; font-size:1.3rem; font-weight:850; border-radius:19px; background:linear-gradient(135deg,#7c3aed,#ec4899); }
.group-logo-preview img { width:100%; height:100%; object-fit:cover; }
.group-logo-preview.has-image > span { display:none; }
.group-editor-preview > div:last-child { display:grid; align-items:start; gap:4px; }
.group-editor-preview strong { color:#2d1b36; }
.group-editor-preview small { color:#94889a; font-size:.66rem; }
.group-form-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.group-check { display:flex !important; grid-template-columns:auto 1fr; align-items:flex-start; gap:9px !important; font-weight:600 !important; }
.group-check input { width:auto; margin-top:2px; accent-color:#7c3aed; }
.group-check a { color:#6d28d9; }
.group-publish { width:100%; margin-top:5px; }
.group-pro-field { padding:14px; border:1px solid rgba(124,58,237,.13); border-radius:14px; background:linear-gradient(135deg,#fbf8ff,#f5ecfa); }
.group-pro-field > small { float:right; color:#8b35d3; font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.group-rules-editor { display:grid; gap:10px; margin-top:15px; padding:15px; border:1px solid rgba(124,58,237,.13); border-radius:15px; background:linear-gradient(135deg,#fbf8ff,#f7f1fb); }
.group-rules-editor > div { display:grid; gap:3px; }
.group-rules-editor > div strong { color:#38213f; font-size:.78rem; }
.group-rules-editor > div small,.group-rules-editor > small { color:#96899d; font-size:.63rem; line-height:1.45; }
.group-rules-editor > label:not(.group-check) { display:grid; gap:7px; color:#5b4c63; font-size:.72rem; font-weight:750; }
.group-rules-editor textarea { width:100%; padding:12px 13px; color:#312039; font:inherit; border:1px solid #e8dfed; border-radius:12px; outline:0; background:#fff; resize:vertical; }
.group-rules-editor textarea:focus { border-color:rgba(124,58,237,.45); box-shadow:0 0 0 3px rgba(124,58,237,.08); }
.group-rules-editor textarea:disabled { color:#756b7b; background:#f0ebf3; cursor:not-allowed; opacity:.78; }
.group-rules-default { margin:2px 0 0; padding:10px 11px; border-radius:11px; background:#fff; }
.groups-profile-footer { display:grid; gap:8px; }
.group-sidebar-create { position:relative; display:grid; grid-template-columns:42px minmax(0,1fr) 18px; align-items:center; gap:9px; width:100%; min-height:58px; padding:7px 10px 7px 7px; color:#3b2546; text-align:left; border:1px solid rgba(71,42,84,.1); border-radius:15px; background:linear-gradient(135deg,#fff,#f6f0fa); box-shadow:0 9px 22px rgba(57,30,69,.08); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
.group-sidebar-create:hover { transform:translateY(-2px); box-shadow:0 13px 27px rgba(57,30,69,.13); }
.group-sidebar-create-icon { display:grid; place-items:center; width:42px; height:42px; color:#fff; font-size:1.2rem; border-radius:12px; background:linear-gradient(135deg,#2d1838,#7c3aed); }
.group-sidebar-create > span:nth-child(2) { display:block; min-width:0; }
.group-sidebar-create strong,.group-sidebar-create small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-sidebar-create strong { font-size:.69rem; }
.group-sidebar-create small { margin-top:3px; color:#96899d; font-size:.53rem; }
.group-sidebar-create i { color:#7c3aed; font-size:1rem; font-style:normal; }
.profile-groups { margin-top:22px; padding:24px; border:1px solid rgba(66,40,80,.09); border-radius:25px; background:#fff; box-shadow:0 18px 54px rgba(53,28,68,.07); }
.profile-group-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:17px; }
.profile-group-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px; border:1px solid #eee7f1; border-radius:17px; background:#fcfaff; }
.profile-group-row > a { display:flex; align-items:center; gap:11px; min-width:0; color:inherit; text-decoration:none; }
.profile-group-row .group-card-logo { width:48px; height:48px; flex-basis:48px; border-width:3px; border-radius:15px; font-size:1rem; }
.profile-group-row a > span:last-child { display:grid; min-width:0; }
.profile-group-row small { color:#8b5cf6; font-size:.61rem; text-transform:uppercase; }
.profile-group-row strong { overflow:hidden; color:#302037; font-size:.85rem; text-overflow:ellipsis; white-space:nowrap; }
.profile-group-row em { color:#988d9d; font-size:.64rem; font-style:normal; }
.profile-group-row button { color:#ae315b; font-size:.67rem; border:0; background:transparent; cursor:pointer; }
.profile-metrics { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.group-detail-body { background:#eee9f1; }
.group-detail-body .community-frame::before {
  background:
    radial-gradient(circle at 87% 12%,rgba(217,70,168,.08),transparent 25%),
    radial-gradient(circle at 8% 77%,rgba(124,58,237,.08),transparent 29%),
    linear-gradient(145deg,#faf8fb 0%,#f4eff7 54%,#f9f6fa 100%);
}
.group-detail-page { max-width:1180px; padding-top:54px; }
.group-pro-showcase { position:relative; min-height:620px; overflow:hidden; padding:30px 34px 36px; color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:34px; background:linear-gradient(145deg,#17111d 0%,#24132f 42%,#4b1761 76%,#792764 100%); box-shadow:0 38px 90px rgba(53,23,68,.28),inset 0 3px 0 rgba(255,255,255,.11); isolation:isolate; }
.group-pro-showcase::before { content:""; position:absolute; z-index:-2; inset:0; opacity:.4; background:repeating-linear-gradient(118deg,transparent 0 52px,rgba(255,255,255,.025) 53px 54px); }
.group-pro-showcase::after { content:""; position:absolute; z-index:-1; right:-160px; bottom:-260px; width:540px; height:540px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff91cb 0%,#bd47dc 28%,rgba(107,43,180,.28) 59%,transparent 72%); }
.group-pro-masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.11); }
.group-pro-brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; }
.group-pro-brand img { width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 7px 12px rgba(0,0,0,.3)); }
.group-pro-brand span { display:grid; gap:2px; }
.group-pro-brand strong { font-size:.88rem; }
.group-pro-brand small,.group-pro-edition { color:rgba(255,255,255,.5); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; }
.group-pro-composition { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,360px) minmax(210px,.72fr); align-items:center; gap:clamp(28px,4vw,58px); min-height:500px; padding-top:24px; }
.group-pro-story { min-width:0; }
.group-pro-tags { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:48px; }
.group-pro-tags span { padding:7px 9px; color:rgba(255,255,255,.72); font-size:.58rem; font-weight:750; border:1px solid rgba(255,255,255,.12); border-radius:8px; background:rgba(255,255,255,.05); }
.group-pro-tags span:first-child { color:#f3d37f; }
.group-pro-eyebrow,.group-pro-reach > p { margin:0 0 12px; color:#e5bbff; font-size:.61rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.group-pro-story h1 { margin:0; font-size:clamp(2.2rem,4vw,4.1rem); font-weight:610; line-height:.94; letter-spacing:-.065em; }
.group-pro-description { max-width:370px; margin:22px 0 0; color:rgba(255,255,255,.67); font-size:.77rem; line-height:1.72; }
.group-pro-rules { margin-top:34px; padding-top:17px; border-top:1px solid rgba(255,255,255,.12); }
.group-pro-rules span { color:#f2d37f; font-size:.58rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.group-pro-rules p { max-width:380px; margin:9px 0 0; color:rgba(255,255,255,.58); font-size:.68rem; line-height:1.65; }
.group-pro-portrait { position:relative; display:grid; place-items:center; min-height:440px; }
.group-pro-portrait::before { content:""; position:absolute; width:112%; aspect-ratio:1; border:1px solid rgba(247,210,126,.23); border-radius:50%; box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.018); }
.group-pro-logo { position:relative; display:grid; place-items:center; width:100%; height:430px; overflow:hidden; color:#fff; font-size:5rem; font-weight:700; border:1px solid rgba(255,255,255,.16); border-radius:48% 48% 26px 26px / 34% 34% 13% 13%; background:linear-gradient(145deg,#6d28d9,#d946a8); box-shadow:0 28px 60px rgba(8,3,12,.42); }
.group-pro-logo img { width:100%; height:100%; object-fit:cover; }
.group-pro-portrait-mark { position:absolute; right:14px; bottom:30px; padding:7px 10px; color:rgba(255,255,255,.75); font-size:.59rem; letter-spacing:.08em; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:rgba(20,10,25,.6); backdrop-filter:blur(10px); }
.group-pro-portrait-mark b { color:#f2d37f; }
.group-pro-reach { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding-left:28px; border-left:1px solid rgba(255,255,255,.11); }
.group-pro-reach > strong { color:#f3d37f; font-size:clamp(3.6rem,6vw,6.8rem); font-weight:520; line-height:.82; letter-spacing:-.08em; }
.group-pro-reach > span { margin-top:12px; color:rgba(255,255,255,.5); font-size:.66rem; }
.group-pro-member-stat { display:grid; gap:4px; margin-top:34px; padding:19px 0; border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); }
.group-pro-member-stat strong { font-size:1.2rem; }
.group-pro-member-stat span { color:rgba(255,255,255,.5); font-size:.64rem; }
.group-pro-creator { display:flex; align-items:center; gap:8px; margin-top:20px; color:rgba(255,255,255,.62); font-size:.65rem; }
.group-pro-creator .avatar { width:28px; height:28px; }
.group-pro-actions { display:grid; grid-template-columns:1fr 44px; gap:8px; margin-top:24px; }
.group-pro-actions a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; color:#26142e; font-size:.69rem; font-weight:800; border-radius:12px; background:linear-gradient(105deg,#fff7df,#f5d782 52%,#f1a5cd); box-shadow:0 14px 34px rgba(17,8,22,.25); text-decoration:none; }
.group-pro-actions button { color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.07); cursor:pointer; }
.group-detail-page.is-pro > .group-detail-header,.group-detail-page.is-pro > .group-detail-tabs,.group-detail-page.is-pro > .group-detail-layout { display:none; }
.pro-group-active .group-back { color:#6f6474; }
.pro-group-active .related-groups { margin-top:34px; border-color:rgba(255,255,255,.08); background:linear-gradient(145deg,#211725,#321c39); }
.pro-group-active .related-head p { color:#d9b4ff; }
.pro-group-active .related-head h2 { color:#fff; }
.group-back { display:inline-block; margin-bottom:28px; color:#817985; font-size:.74rem; font-weight:700; text-decoration:none; }
.group-back:hover { color:#6d28d9; }
.group-detail-header { padding:0 30px; border:1px solid rgba(73,42,85,.1); border-radius:25px; background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(242,233,248,.94)); box-shadow:0 22px 55px rgba(59,32,70,.08); }
.group-detail-tags { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-height:54px; }
.group-detail-tags > span:first-child { padding:6px 9px; color:#6d28d9; font-size:.66rem; font-weight:800; border-radius:8px; background:#f4effb; }
.group-detail-tags .group-platform-badge,.group-detail-tags .group-verified,.group-detail-tags .group-adult-badge { box-shadow:none; border:1px solid #ebe6ee; }
.group-detail-identity { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:24px; padding:34px 0 38px; }
.group-detail-logo { display:grid; place-items:center; width:104px; height:104px; overflow:hidden; color:#fff; font-size:2rem; font-weight:850; border:1px solid #e7e1ea; border-radius:28px; background:linear-gradient(135deg,#7c3aed,#d946a8); box-shadow:0 13px 30px rgba(53,31,64,.12); }
.group-detail-copy { min-width:0; }
.group-detail-title-line { display:flex; align-items:center; gap:10px; }
.group-detail-title-line h1 { overflow:hidden; margin:0; color:#211b24; font-size:clamp(2rem,4vw,3.35rem); line-height:1; letter-spacing:-.055em; text-overflow:ellipsis; }
.group-detail-title-line img { width:31px; height:31px; object-fit:contain; }
.group-detail-metrics { display:flex; align-items:center; gap:12px; margin-top:13px; color:#756e78; }
.group-detail-metrics > span { display:flex; align-items:baseline; gap:5px; }
.group-detail-metrics strong { color:#332b36; font-size:.78rem; }
.group-detail-metrics small { font-size:.67rem; }
.group-detail-metrics i { width:3px; height:3px; border-radius:50%; background:#bbb4be; }
.group-detail-creator { display:flex; align-items:center; gap:8px; margin-top:15px; color:#817985; font-size:.7rem; }
.group-detail-creator .avatar { width:27px; height:27px; }
.group-detail-actions { display:flex; gap:8px; }
.group-detail-actions a { display:flex; align-items:center; justify-content:space-between; gap:22px; min-width:178px; padding:14px 16px; color:#fff; font-size:.75rem; font-weight:800; border-radius:12px; background:#6d28d9; box-shadow:0 10px 22px rgba(109,40,217,.17); text-decoration:none; }
.group-detail-actions a:hover { background:#5b21b6; }
.group-detail-actions a span { color:#e9ddff; font-size:1rem; }
.group-detail-actions button { width:47px; color:#4d4551; font-size:1rem; border:1px solid #e4dfe7; border-radius:12px; background:#fff; cursor:pointer; }
.group-detail-tabs { display:flex; gap:30px; height:60px; margin-top:14px; padding:0 24px; align-items:flex-end; border:1px solid rgba(73,42,85,.09); border-radius:16px; background:rgba(255,255,255,.7); box-shadow:0 12px 34px rgba(59,32,70,.045); }
.group-detail-tabs span { position:relative; padding:0 2px 17px; color:#9a929e; font-size:.77rem; font-weight:750; }
.group-detail-tabs span.active { color:#251e28; }
.group-detail-tabs span.active::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:2px; background:#7c3aed; }
.group-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:34px; padding:30px 0 54px; }
.group-detail-main > section:first-child { min-height:170px; padding:30px; border:1px solid rgba(73,42,85,.09); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,239,249,.94)); box-shadow:0 18px 45px rgba(59,32,70,.055); }
.group-detail-section-kicker { margin:0 0 9px; color:#7c3aed !important; font-size:.64rem !important; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.group-detail-main h2,.group-detail-sidebar h2 { margin:0; color:#2a222d; font-size:1.35rem; letter-spacing:-.025em; }
.group-detail-main > section:first-child > p:last-child { max-width:730px; margin:20px 0 0; color:#6f6873; font-size:.86rem; line-height:1.75; }
.group-detail-rules { margin-top:18px; padding:22px 26px; border:1px solid rgba(109,40,217,.1); border-radius:17px; background:#f5eff9; }
.group-detail-rules > p:last-child { margin:0; color:#6f6575; font-size:.76rem; line-height:1.68; }
.group-entry-note { display:grid; grid-template-columns:42px 1fr; gap:14px; margin-top:18px; padding:20px; border:1px solid rgba(109,40,217,.11); border-radius:16px; background:linear-gradient(135deg,#eee7f7,#f7f2fa); }
.group-entry-note > span { display:grid; place-items:center; width:42px; height:42px; color:#6d28d9; border-radius:12px; background:#f3edfb; }
.group-entry-note h3 { margin:1px 0 6px; color:#332a36; font-size:.83rem; }
.group-entry-note p { margin:0; color:#857d89; font-size:.72rem; line-height:1.55; }
.group-detail-sidebar section { padding:23px; color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:19px; background:linear-gradient(145deg,#2f2235,#472a50); box-shadow:0 20px 42px rgba(51,27,61,.16); }
.group-detail-sidebar .group-detail-section-kicker { color:#d8b4fe !important; }
.group-detail-sidebar h2 { color:#fff; }
.group-detail-sidebar dl { margin:19px 0 0; }
.group-detail-sidebar dl > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,.11); }
.group-detail-sidebar dt { color:rgba(255,255,255,.58); font-size:.69rem; }
.group-detail-sidebar dd { margin:0; color:#fff; font-size:.7rem; font-weight:750; text-align:right; }
.group-detail-sidebar > button { width:100%; margin-top:10px; padding:12px; color:#9e3158; font-size:.69rem; font-weight:750; border:0; background:transparent; cursor:pointer; }
.related-groups { padding:28px; border:1px solid rgba(73,42,85,.09); border-radius:22px; background:rgba(255,255,255,.66); box-shadow:0 18px 45px rgba(59,32,70,.05); }
.related-head { margin-bottom:20px; }
.related-head p { margin:0 0 5px; color:#7c3aed; font-size:.67rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.related-head h2 { margin:0; color:#2f1d37; font-size:1.6rem; }
.group-report-card { width:min(460px,calc(100% - 30px)); }
.group-report-card .primary { width:100%; margin-top:16px; }
@media (max-width:980px) {
  .groups-toolbar { grid-template-columns:1fr; }
  .group-sort { border-left:0; }
  .group-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .group-detail-layout { grid-template-columns:minmax(0,1fr) 270px; gap:30px; }
  .group-pro-composition { grid-template-columns:minmax(0,1fr) minmax(250px,330px); }
  .group-pro-reach { grid-column:1/-1; display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:14px; padding:22px 0 0; border-top:1px solid rgba(255,255,255,.11); border-left:0; }
  .group-pro-reach > p { grid-column:1/-1; margin:0; }
  .group-pro-reach > strong { font-size:3.8rem; }
  .group-pro-reach > span { margin:0; }
  .group-pro-member-stat { margin:0; padding:0 20px; border:0; border-left:1px solid rgba(255,255,255,.1); }
  .group-pro-creator { margin:0; }
  .group-pro-actions { grid-column:1/-1; width:min(360px,100%); margin-top:6px; }
}
@media (max-width:700px) {
  .groups-page,.group-detail-page { width:min(100% - 28px,1280px); padding:45px 0 75px; }
  .group-platform-filters { overflow-x:auto; padding-bottom:3px; }
  .group-platform-filters button { white-space:nowrap; }
  .group-card-grid,.profile-group-list { grid-template-columns:1fr; }
  .group-form-pair { grid-template-columns:1fr; }
  .group-invite-row > div { display:grid; }
  .profile-metrics { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .group-detail-header { padding:0 18px; border-radius:21px; }
  .group-pro-showcase { min-height:0; padding:24px 20px 28px; border-radius:26px; }
  .group-pro-edition { display:none; }
  .group-pro-composition { grid-template-columns:1fr; gap:30px; }
  .group-pro-tags { margin-bottom:30px; }
  .group-pro-portrait { grid-row:1; min-height:360px; }
  .group-pro-story { grid-row:2; }
  .group-pro-logo { width:min(300px,88%); height:350px; }
  .group-pro-reach { grid-row:3; grid-template-columns:auto 1fr; }
  .group-pro-member-stat { padding-left:16px; }
  .group-pro-creator,.group-pro-actions { grid-column:1/-1; }
  .group-detail-identity { grid-template-columns:82px minmax(0,1fr); gap:17px; padding:25px 0 29px; }
  .group-detail-logo { width:82px; height:82px; border-radius:23px; }
  .group-detail-actions { grid-column:1/-1; }
  .group-detail-actions a { flex:1; }
  .group-detail-tabs { padding:0 18px; }
  .group-detail-layout { grid-template-columns:1fr; gap:25px; padding-top:24px; }
  .group-detail-main > section:first-child { min-height:0; }
  .related-groups { padding:20px; }
}

/* Pro groups take over the full page; the chrome keeps its structure and joins the palette. */
.group-detail-body.pro-group-active { color:#fff8ff; background:#180b20; }
.pro-group-active .community-frame { padding-right:0; padding-left:0; }
.pro-group-active .community-frame::before {
  inset:0;
  background:
    radial-gradient(circle at 78% 28%,rgba(143,48,181,.25),transparent 33%),
    radial-gradient(circle at 9% 74%,rgba(225,54,139,.12),transparent 28%),
    linear-gradient(135deg,#160b1c 0%,#24102d 43%,#3b1448 72%,#5a1c54 100%);
}
.pro-group-active .community-frame::after { content:""; position:absolute; z-index:-1; top:82px; right:-9vw; width:min(62vw,980px); height:72%; pointer-events:none; opacity:.8; background:repeating-radial-gradient(ellipse at 100% 48%,transparent 0 21px,rgba(241,164,255,.05) 22px 23px,transparent 24px 36px); -webkit-mask-image:linear-gradient(112deg,transparent 3%,#000 45%,transparent 96%); mask-image:linear-gradient(112deg,transparent 3%,#000 45%,transparent 96%); transform:rotate(-7deg); }
.group-detail-page.is-pro { width:100%; max-width:none; margin:0; padding:clamp(34px,4vw,66px) clamp(34px,6vw,112px) 112px; }
.group-detail-page.is-pro .group-back { margin-bottom:clamp(28px,3vw,48px); color:rgba(255,240,255,.5); }
.group-detail-page.is-pro .group-back:hover { color:#f2cf7c; }
.group-detail-page.is-pro .group-pro-showcase { min-height:calc(100svh - 205px); overflow:visible; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.group-detail-page.is-pro .group-pro-showcase::before { inset:-18px clamp(-28px,-2vw,-10px); opacity:.38; }
.group-detail-page.is-pro .group-pro-showcase::after { right:-112px; bottom:-180px; width:560px; height:560px; opacity:.7; }
.group-detail-page.is-pro .group-pro-masthead { padding:0 0 27px; }
.group-detail-page.is-pro .group-pro-composition { grid-template-columns:minmax(280px,1.08fr) minmax(360px,500px) minmax(250px,.82fr); gap:clamp(40px,6vw,105px); min-height:calc(100svh - 310px); padding:clamp(34px,4vw,70px) 0 28px; }
.group-detail-page.is-pro .group-pro-logo { height:clamp(470px,57vh,650px); }
.group-detail-page.is-pro .group-pro-story h1 { font-size:clamp(3rem,5vw,6.4rem); }
.group-detail-page.is-pro .group-pro-description { max-width:470px; font-size:.86rem; }
.group-detail-page.is-pro .group-pro-rules p { max-width:470px; }
.group-detail-page.is-pro .group-pro-reach { padding-left:clamp(26px,3vw,50px); }
.pro-group-active .related-groups { margin:0 0 72px; padding:42px 0 0; border:0; border-top:1px solid rgba(255,255,255,.1); border-radius:0; background:transparent; box-shadow:none; }
.pro-group-active.community-body .site-topbar,
.pro-group-active .community-frame > .site-topbar,
.pro-group-active.community-body .site-topbar.scrolled { color:#fdf5ff; border-bottom-color:rgba(255,255,255,.08); background:#1d0c25; box-shadow:0 14px 38px rgba(8,1,12,.2); }
.pro-group-active .site-topbar > .brand .wordmark,
.pro-group-active .site-topbar > .brand .wordmark span { color:#fff8ff; background:none; -webkit-text-fill-color:currentColor; }
.pro-group-active .site-topbar > .brand .wordmark span { color:#ff4b9e; }
.pro-group-active .site-topbar .nav a,
.pro-group-active.community-body .site-topbar .nav a { color:rgba(255,246,255,.6); }
.pro-group-active .site-topbar .nav a:hover,
.pro-group-active .site-topbar .nav a.active,
.pro-group-active.community-body .site-topbar .nav a.active { color:#fff; }
.pro-group-active .site-topbar .nav a.active::after { background:linear-gradient(90deg,#f5cd72,#ff4eaa); }
.pro-group-active .site-topbar .plans-link:hover { background:rgba(255,255,255,.08); }
.pro-group-active .site-topbar .account,
.pro-group-active.community-body .site-topbar .account { color:rgba(255,248,255,.78); }
.pro-group-active > .site-footer { color:rgba(255,240,255,.56); border-top-color:rgba(255,255,255,.09); background:#1d0c25; box-shadow:0 -12px 38px rgba(5,0,9,.3); }
.pro-group-active > .site-footer nav i { color:rgba(255,255,255,.2); }
.pro-group-active > .site-footer nav a:hover { color:#f2cd77; }
.pro-group-active > .site-footer > span:last-child { color:rgba(255,240,255,.4); }

@media (max-width:1100px) {
  .group-detail-page.is-pro .group-pro-composition { grid-template-columns:minmax(0,1fr) minmax(290px,390px); gap:50px; }
  .group-detail-page.is-pro .group-pro-reach { padding-left:0; }
}
@media (max-width:700px) {
  .pro-group-active .community-frame { padding-right:0; padding-left:0; }
  .group-detail-page.is-pro { width:100%; padding:30px 20px 86px; }
  .group-detail-page.is-pro .group-pro-showcase { min-height:0; padding:0; border-radius:0; }
  .group-detail-page.is-pro .group-pro-composition { grid-template-columns:1fr; gap:34px; min-height:0; padding-top:30px; }
  .group-detail-page.is-pro .group-pro-logo { height:390px; }
  .pro-group-active .related-groups { margin:0 0 60px; padding-top:30px; }
}

/* Pro group single-screen composition. */
.group-detail-page.is-pro .group-pro-masthead { padding-bottom:0; border-bottom:0; }
.group-detail-page.is-pro .group-pro-showcase::after { display:none; }
.group-detail-page.is-pro .group-pro-logo {
  width:min(100%,clamp(460px,66vh,680px));
  height:auto;
  aspect-ratio:1;
  border:0;
  border-radius:50%;
  box-shadow:none;
  transform:translateY(-20px);
  -webkit-mask-image:radial-gradient(circle at 50% 48%,#000 0 70%,rgba(0,0,0,.96) 76%,rgba(0,0,0,.58) 87%,transparent 100%);
  mask-image:radial-gradient(circle at 50% 48%,#000 0 70%,rgba(0,0,0,.96) 76%,rgba(0,0,0,.58) 87%,transparent 100%);
}
.group-detail-page.is-pro .group-pro-logo img { border-radius:50%; }
.group-detail-page.is-pro .group-pro-portrait-mark { right:8%; bottom:10%; }
.pro-group-active .related-groups { display:none !important; }

@media (min-width:901px) {
  body.group-detail-body.pro-group-active { box-sizing:border-box; height:100svh; min-height:100svh; overflow:hidden; padding-bottom:50px; }
  .pro-group-active .community-frame { box-sizing:border-box; height:calc(100svh - 50px); min-height:0; overflow:hidden; padding:69px 0 0; }
  .group-detail-page.is-pro { display:grid; grid-template-rows:auto minmax(0,1fr); row-gap:12px; box-sizing:border-box; height:100%; min-height:0; padding:18px clamp(34px,6vw,112px) 10px; overflow:hidden; }
  .group-detail-page.is-pro .group-back { margin:0; align-self:center; }
  .group-detail-page.is-pro .group-pro-showcase { display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; height:100%; }
  .group-detail-page.is-pro .group-pro-masthead { min-height:42px; }
  .group-detail-page.is-pro .group-pro-composition { min-height:0; height:100%; padding:0; }
  .group-detail-page.is-pro .group-pro-portrait { min-height:0; height:100%; }
}

@media (max-width:900px) {
  .group-detail-page.is-pro .group-pro-logo { width:min(520px,92vw); transform:translateY(-20px); }
}

/* Final Pro portrait cleanup. */
.group-detail-page.is-pro .group-pro-masthead { position:relative; z-index:2; transform:translateY(20px); }
.group-detail-page.is-pro .group-pro-portrait::before { display:none; }
.group-detail-page.is-pro .group-pro-logo {
  border:1px solid rgba(244,210,126,.48);
  box-shadow:none;
  -webkit-mask-image:none;
  mask-image:none;
}
.group-pro-portrait-mark { display:none !important; }

/* Resolve the group tier before revealing either presentation. */
.group-detail-page { position:relative; }
.group-detail-page:not(.is-ready) > :not(.group-detail-loading) { visibility:hidden; }
.group-detail-loading { position:absolute; inset:90px 0 0; z-index:6; display:flex; align-items:center; justify-content:center; gap:11px; color:#817687; font-size:.72rem; }
.group-detail-loading .card-media-spinner { position:static; width:24px; height:24px; transform:none; }
.group-detail-page.is-ready .group-detail-loading { display:none; }
.group-pro-story .group-pro-masthead { width:100%; transform:translateY(20px); }
.group-pro-story .group-pro-tags { margin-top:78px; }

@media (min-width:901px) {
  .group-detail-page.is-pro .group-pro-showcase { display:block; }
  .group-detail-page.is-pro .group-pro-composition { height:100%; }
}

@media (max-width:700px) {
  .group-detail-loading { inset:70px 0 0; }
.group-pro-story .group-pro-tags { margin-top:70px; }
}

/* Shared information ticker and editorial home shell. */
.site-ticker {
  position:fixed;
  z-index:29;
  top:70px;
  left:0;
  right:0;
  height:34px;
  overflow:hidden;
  color:#fff;
  background:#111014;
  box-shadow:0 8px 20px rgba(20,12,25,.08);
}
.site-ticker-track { display:flex; width:max-content; height:100%; animation:siteTickerFlow 34s linear infinite; will-change:transform; }
.site-ticker-set { display:flex; flex:none; align-items:center; height:100%; }
.site-ticker-set span { display:flex; align-items:center; flex:none; padding:0 clamp(25px,3vw,54px); font-size:.67rem; font-weight:680; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.site-ticker-set span::before { content:""; width:5px; height:5px; margin-right:14px; border-radius:50%; background:linear-gradient(135deg,#9b66f1,#ec4899); box-shadow:0 0 0 3px rgba(155,102,241,.12); }
body.has-site-ticker .home-frame,
body.has-site-ticker .community-frame { padding-top:104px; }

@keyframes siteTickerFlow { to { transform:translateX(-50%); } }

.home-body {
  --home-shell:clamp(760px,62vw,1180px);
  background:#fff;
}
.home-body .home-frame {
  z-index:2;
  width:var(--home-shell);
  margin:0 auto;
  background:#fff;
  box-shadow:none;
}
.home-body .home-frame::before { display:none; }
.home-body .home-frame > .site-topbar,
.home-body .site-ticker {
  left:50%;
  right:auto;
  width:var(--home-shell);
  transform:translateX(-50%);
}
.home-body .home-frame > .site-topbar { border-radius:0 0 18px 18px; }
.home-side-visual {
  position:fixed;
  z-index:1;
  top:0;
  bottom:0;
  width:calc((100vw - var(--home-shell)) / 2);
  min-width:0;
  overflow:hidden;
  border:0;
  background:#09070c;
  box-shadow:none;
  will-change:opacity,transform;
}
.home-side-visual::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 42%,rgba(0,0,0,.3));
  pointer-events:none;
}
.home-side-visual img { display:block; width:100%; height:100%; border-radius:0; object-fit:cover; opacity:1; transform:scale(1); transition:opacity .26s ease,transform .52s cubic-bezier(.22,.75,.22,1); }
.home-side-visual.is-changing img { opacity:0; transform:scale(1.018); }
.home-side-visual-left { left:0; border-radius:0 clamp(34px,4vw,72px) clamp(34px,4vw,72px) 0; animation:homeVisualEnterLeft .72s cubic-bezier(.22,.75,.22,1) both; }
.home-side-visual-right { right:0; border-radius:clamp(34px,4vw,72px) 0 0 clamp(34px,4vw,72px); animation:homeVisualEnterRight .72s .1s cubic-bezier(.22,.75,.22,1) both; }
.home-side-visual-left img { object-position:43% center; }
.home-side-visual-right img { object-position:55% center; }
.home-body .home-footer.site-footer { left:50%; right:auto; width:var(--home-shell); transform:translateX(-50%); }

@keyframes homeVisualEnterLeft { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:none; } }
@keyframes homeVisualEnterRight { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:none; } }
@keyframes homeVisualExitLeft { to { opacity:0; transform:translateX(-24px); } }
@keyframes homeVisualExitRight { to { opacity:0; transform:translateX(24px); } }
.home-body.home-visuals-leaving .home-side-visual-left { animation:homeVisualExitLeft .19s ease both; }
.home-body.home-visuals-leaving .home-side-visual-right { animation:homeVisualExitRight .19s ease both; }
.home-body.home-visuals-leaving .galaxy-teaser { animation:routeLeave .19s ease both; pointer-events:none; }
.home-body.home-visuals-leaving .home-frame > .site-topbar,
.home-body.home-visuals-leaving .site-ticker {
  width:100vw;
  border-radius:0;
  transition:width .19s ease,border-radius .19s ease;
}

@media (min-width:901px) {
  body.has-site-ticker.group-detail-body.pro-group-active .community-frame { padding-top:103px; }
}

@media (max-width:1100px) {
  .home-body { --home-shell:100vw; background:#fff; }
  .home-side-visual { display:none; }
  .home-body .home-frame { width:100%; box-shadow:none; }
  .home-body .home-frame > .site-topbar { border-radius:0; }
}

@media (max-width:700px) {
  .site-ticker { top:62px; height:32px; }
  .site-ticker-set span { padding:0 24px; font-size:.6rem; }
  body.has-site-ticker .home-frame,
  body.has-site-ticker .community-frame { padding-top:94px; }
}

@media (prefers-reduced-motion:reduce) {
  .site-ticker-track { animation:none; transform:none; }
  .home-side-visual { opacity:1; transform:none; animation:none; }
  .home-side-visual img { transition:none; }
}

/* Keep the profile navigation visible while its longer private sections scroll. */
.profile-body.community-body .site-topbar {
  position: fixed;
  inset: 0 0 auto;
}

/* Lumina Pro benefits — a quiet floating layer around the existing orbit. */
.pro-benefits-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: -15px;
  padding: 7px 10px;
  border: 1px solid rgba(244,208,124,.22);
  border-radius: 999px;
  color: rgba(255,249,255,.76);
  background: rgba(22,7,28,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  font-size: .64rem;
  font-weight: 690;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.pro-benefits-trigger span { color: #f2ce79; font-size: .72rem; transition: transform .18s ease; }
.pro-benefits-trigger:hover { color: #fff; border-color: rgba(244,208,124,.46); background: rgba(45,13,55,.68); transform: translateY(-1px); }
.pro-benefits-trigger:hover span { transform: translate(2px,-2px); }
.pro-benefits-overlay { z-index: 90; padding: 22px; background: rgba(11,2,15,.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pro-benefits-card {
  position: relative;
  width: min(880px,100%);
  max-height: min(820px,calc(100svh - 34px));
  overflow-y: auto;
  padding: clamp(25px,4vw,44px);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 30px;
  color: #fff9ff;
  background: radial-gradient(circle at 92% 4%,rgba(202,62,167,.2),transparent 31%),linear-gradient(145deg,#180b1e 0%,#27112f 58%,#3d174b 100%);
  box-shadow: 0 38px 110px rgba(3,0,5,.68),inset 0 1px rgba(255,255,255,.08);
  scrollbar-width: thin;
  scrollbar-color: rgba(244,208,124,.25) transparent;
  transform: translateY(18px) scale(.985);
  transition: transform .26s cubic-bezier(.22,.75,.22,1);
}
.pro-benefits-overlay.open .pro-benefits-card { transform: none; }
.pro-benefits-close { z-index: 4; top: 20px; right: 20px; color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.07); }
.pro-benefits-head { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 17px; padding-right: 48px; }
.pro-benefits-head img { display: block; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 12px 20px rgba(5,0,8,.45)); }
.pro-benefits-head p { margin: 0 0 5px; color: #f2ce79; font-size: .62rem; font-weight: 760; letter-spacing: .15em; text-transform: uppercase; }
.pro-benefits-head h2 { margin: 0; color: #fffaff; font-size: clamp(1.45rem,3vw,2.15rem); line-height: 1.08; letter-spacing: -.045em; }
.pro-benefits-head span { display: block; margin-top: 8px; color: rgba(255,239,255,.52); font-size: .78rem; line-height: 1.5; }
.pro-benefits-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 28px; }
.pro-benefits-grid > article { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 13px; min-height: 104px; padding: 16px; border: 1px solid rgba(255,255,255,.075); border-radius: 17px; background: rgba(255,255,255,.045); transition: border-color .18s ease,background .18s ease,transform .18s ease; }
.pro-benefits-grid > article:hover { border-color: rgba(244,208,124,.2); background: rgba(255,255,255,.07); transform: translateY(-2px); }
.pro-benefits-grid i { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(244,208,124,.2); border-radius: 13px; color: #f4d17e; background: linear-gradient(145deg,rgba(244,208,124,.12),rgba(225,71,172,.08)); font-size: .68rem; font-style: normal; font-weight: 800; letter-spacing: -.02em; }
.pro-benefits-grid strong { display: block; margin: 1px 0 6px; color: #fffaff; font-size: .82rem; }
.pro-benefits-grid p { margin: 0; color: rgba(255,239,255,.48); font-size: .68rem; line-height: 1.47; }
.pro-benefits-foot { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09); }
.pro-benefits-foot > div { display: flex; align-items: baseline; gap: 8px; }
.pro-benefits-foot > div strong { color: #fffaff; font-size: 1.16rem; }
.pro-benefits-foot > div span { color: rgba(255,239,255,.42); font-size: .65rem; }
.pro-benefits-foot .plan-button { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 220px; padding: 13px 16px; color: #28132e; background: linear-gradient(105deg,#fff8e7,#f3d075 55%,#f0a2cb); box-shadow: 0 14px 32px rgba(5,0,8,.3); }
@media (max-width:700px) {
  .pro-benefits-overlay { padding: 10px; }
  .pro-benefits-card { max-height: calc(100svh - 20px); padding: 25px 18px 20px; border-radius: 23px; }
  .pro-benefits-close { top: 13px; right: 13px; }
  .pro-benefits-head { grid-template-columns: 46px minmax(0,1fr); gap: 12px; padding-right: 34px; }
  .pro-benefits-head img { width: 46px; height: 46px; }
  .pro-benefits-grid { grid-template-columns: 1fr; margin-top: 22px; }
  .pro-benefits-grid > article { min-height: 0; }
  .pro-benefits-foot { align-items: stretch; flex-direction: column; }
  .pro-benefits-foot .plan-button { width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  .pro-benefits-card,.pro-benefits-trigger,.pro-benefits-grid > article { transition: none; }
}

/* ============================================================
   Ajustes de interface no mobile (v0255)
   ============================================================ */

/* Botão Pro ao lado do Bump.
   Só aparece no mobile, onde a caixa de perfil da Comunidade —
   que hospedava esta chamada — fica oculta. */
.pro-trigger { display: none; }

@media (max-width: 700px) {
  /* A caixa de perfil repete dados já presentes no topo e no /perfil/,
     e no mobile empurrava as divulgações para fora da primeira dobra. */
  .community-profile-box { display: none; }

  .pro-trigger,
  .bump-trigger {
    position: fixed;
    z-index: 47;
    bottom: 63px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 11px;
    font-size: .82rem;
    font-weight: 740;
  }
  .bump-trigger { right: 14px; min-width: 70px; padding: 0 17px; }
  .pro-trigger {
    /* 14px da borda + largura mínima do bump + folga */
    right: 94px;
    gap: 7px;
    min-width: 70px;
    padding: 0 14px;
    border: 1px solid rgba(101, 39, 215, .22);
    color: #fff;
    background: linear-gradient(95deg, var(--violet-deep), var(--pink));
    box-shadow: 0 12px 28px rgba(101, 39, 215, .26);
    font-size: .74rem;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .pro-trigger { overflow: hidden; }
  .pro-trigger img { display: block; width: 20px; height: 20px; object-fit: contain; }
  .pro-trigger::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg,transparent 34%,rgba(255,255,255,.08) 42%,rgba(255,255,255,.95) 49%,rgba(173,226,255,.48) 54%,transparent 66%);
    background-size: 400% 100%;
    background-position: 280% 0;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
    animation: proTriggerSheen 6.5s cubic-bezier(.4,0,.2,1) infinite;
  }
  .pro-trigger:hover::after { animation-duration: 4.5s; }
  .pro-trigger:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(101, 39, 215, .34); }
  .pro-trigger:focus-visible { outline: 3px solid rgba(124, 58, 237, .28); outline-offset: 3px; }
}

/* A órbita depende de espaço horizontal para não sobrepor o núcleo.
   Abaixo de 700px os quatro benefícios colidem com o preço, então
   saem daqui e seguem disponíveis no modal "Ver benefícios". */
@media (max-width: 700px) {
  .orbit-benefit { display: none; }
  .pro-orbit { height: 300px; }
  .orbit-line-one { width: 290px; height: 190px; }
  .orbit-line-two { width: 215px; height: 255px; }
}

/* ------------------------------------------------------------
   Navegação lateral no mobile
   No desktop a navegação continua inteira na barra superior.
   Abaixo de 620px os links não cabem ao lado da marca (ficavam
   comprimidos contra o logotipo), então saem para uma gaveta.
   ------------------------------------------------------------ */

.nav-toggle { display: none; }

/* 700px é o mesmo ponto em que a folha já reorganiza a barra
   (regra por volta da linha 1323). Usar o mesmo valor evita uma
   faixa entre 621px e 700px sem menu e sem hambúrguer. */
@media (max-width: 700px) {
  /* Os links e a conta passam a viver na gaveta. A conta já é
     ocultada aqui por uma regra com !important, então nada de
     tentar trazê-la de volta: o acesso ao perfil fica no rodapé
     da gaveta, junto do resto da navegação. */
  .topbar .nav { display: none; }

  /* Uma coluna só: a marca se centraliza nela e o hambúrguer sai
     do fluxo por cima, à esquerda. Com duas colunas a marca ficaria
     centrada na célula, não na tela.
     Sem mexer em position: a barra já é fixed (ou absolute dentro
     do frame da home), e qualquer troca aqui a solta do topo. */
  .topbar,
  .home-frame > .site-topbar,
  .community-frame > .site-topbar,
  .community-body .site-topbar {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 16px;
    padding-left: 12px;
  }

  .nav-toggle {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 4;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #2a2230;
    cursor: pointer;
    transition: background .18s ease;
  }
  .nav-toggle:hover { background: rgba(124, 58, 237, .08); }
  .nav-toggle:focus-visible { outline: 3px solid rgba(124, 58, 237, .3); outline-offset: 2px; }
  .nav-toggle i {
    display: block;
    flex: 0 0 auto;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1), opacity .16s ease;
  }
  /* As três barras viram um X enquanto a gaveta está aberta.
     7px = altura da barra (2) + o gap (5). */
  .nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .topbar .brand,
  .site-topbar .brand { grid-row: 1; grid-column: 1; justify-self: center; }
}

.nav-drawer {
  position: fixed;
  z-index: 60;
  inset: 0;
  display: none;
}
.nav-drawer.open { display: block; }

.nav-drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(23, 14, 34, .46);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: navScrimIn .2s ease both;
}

.nav-drawer-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(312px, 84vw);
  height: 100%;
  padding: 22px 20px 26px;
  background: #fff;
  border-radius: 0 24px 24px 0;
  box-shadow: 26px 0 70px rgba(48, 22, 78, .22);
  animation: navPanelIn .28s cubic-bezier(.22, 1, .36, 1) both;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.nav-drawer-head .wordmark {
  color: transparent;
  background: linear-gradient(95deg, #5b21b6, #8b35d3 48%, #db2777);
  background-clip: text;
  -webkit-background-clip: text;
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -.055em;
}
.nav-drawer-close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #6b6275;
  background: var(--soft);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  transition: color .18s ease, background .18s ease;
}
.nav-drawer-close:hover { color: var(--ink); background: #efe9f7; }
.nav-drawer-close:focus-visible { outline: 3px solid rgba(124, 58, 237, .3); outline-offset: 2px; }

.nav-drawer-links { display: flex; flex-direction: column; gap: 2px; }
.nav-drawer-links a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 14px;
  color: #4a4353;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -.01em;
  transition: color .18s ease, background .18s ease;
}
.nav-drawer-links a:hover { color: var(--ink); background: var(--soft); }
.nav-drawer-links a.active { color: var(--violet-deep); background: rgba(124, 58, 237, .07); }
/* Mesma marca de seção usada na barra superior do desktop. */
.nav-drawer-links a.active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3px;
  height: 20px;
  border-radius: 999px;
  background: #7c3aed;
  transform: translateY(-50%);
}
.nav-drawer-links a:focus-visible { outline: 3px solid rgba(124, 58, 237, .3); outline-offset: -2px; }
.nav-drawer-links img { display: block; width: 22px; height: 22px; object-fit: contain; }
.nav-drawer-links svg { display: block; flex: 0 0 auto; width: 20px; height: 20px; }

.nav-drawer-foot { margin-top: auto; padding-top: 24px; }
.nav-drawer-foot .nav-drawer-account {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 680;
  transition: border-color .18s ease, background .18s ease;
}
.nav-drawer-foot .nav-drawer-account:hover { border-color: rgba(124, 58, 237, .3); background: var(--soft); }
.nav-drawer-foot .nav-drawer-account:focus-visible { outline: 3px solid rgba(124, 58, 237, .3); outline-offset: 2px; }

/* Trava a rolagem do conteúdo atrás da gaveta. */
html.nav-drawer-open, html.nav-drawer-open body { overflow: hidden; }

@keyframes navScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes navPanelIn { from { transform: translateX(-100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer-scrim, .nav-drawer-panel { animation: none; }
  .nav-toggle i { transition: none; }
}

/* Acima de 700px a gaveta nunca aparece, mesmo se ficar aberta
   quando a janela é redimensionada. */
@media (min-width: 701px) {
  .nav-drawer { display: none !important; }
}

/* CTA de assinatura na gaveta — mesmo convite da caixa de perfil
   da Comunidade, sempre visível, acima do botão de conta. */
.nav-drawer-pro {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  margin-bottom: 10px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(95deg, var(--violet-deep), var(--pink));
  box-shadow: 0 14px 30px rgba(101, 39, 215, .24);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav-drawer-pro:hover { transform: translateY(-1px); box-shadow: 0 18px 36px rgba(101, 39, 215, .3); }
.nav-drawer-pro:focus-visible { outline: 3px solid rgba(124, 58, 237, .3); outline-offset: 2px; }
.nav-drawer-pro img { flex: 0 0 auto; display: block; width: 30px; height: 30px; object-fit: contain; }
.nav-drawer-pro-copy { display: flex; flex-direction: column; gap: 1px; text-align: left; }
.nav-drawer-pro-copy strong { font-size: .9rem; font-weight: 700; letter-spacing: -.01em; }
.nav-drawer-pro-copy small { font-size: .74rem; color: rgba(255, 255, 255, .82); }
.nav-drawer-pro-arrow { margin-left: auto; font-size: 1rem; }
/* Denúncia: bandeirinha ao lado do salvar e a caixa flutuante de análise. */
/* O salvar carrega uma margem direita negativa para encostar na borda do card.
   Com o denunciar ao lado, essa folga passa a ser dele. */
.save-card-button:has(+ .report-card-button) { margin-right: 0; }
.report-card-button {
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -7px -5px -7px 7px;
  padding: 0;
  border: 1px solid rgba(91,52,116,.12);
  border-radius: 9px;
  color: #8d8496;
  background: #f7f3fa;
  cursor: pointer;
  transition: color .18s ease,background .18s ease,transform .18s ease;
}
.report-card-button:hover { color: #c2344f; background: #fbeaee; transform: translateY(-1px); }
.report-card-button:focus-visible { outline: 3px solid rgba(194,52,79,.2); outline-offset: 2px; }
.report-card-button.is-done { color: #a8a0b0; background: #f2eef5; cursor: default; }
.report-card-button.is-done:hover { transform: none; }
.report-card-button[hidden] { display: none; }
.report-card-button svg { width: 16px; height: 16px; }

.report-popover { position: fixed; z-index: 96; inset: 0; background: rgba(28,14,40,.22); opacity: 0; transition: opacity .18s ease; }
.report-popover.open { opacity: 1; }
.report-popover[hidden] { display: none; }
.report-popover-panel {
  position: absolute;
  width: min(360px,calc(100vw - 28px));
  padding: 22px 22px 18px;
  border: 1px solid rgba(70,39,90,.1);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(42,20,57,.26);
  transform: translateY(6px);
  transition: transform .18s ease;
}
.report-popover.open .report-popover-panel { transform: none; }
.report-popover-panel .close { position: absolute; top: 12px; right: 12px; }
.report-kicker { margin: 0 0 6px; color: #c2344f; font-size: .62rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.report-popover-panel h2 { margin: 0 34px 8px 0; color: #17131f; font-size: 1.12rem; letter-spacing: -.03em; }
.report-target { overflow: hidden; margin: 0 0 15px; color: #756e7b; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.report-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.report-reason {
  padding: 7px 12px;
  border: 1px solid rgba(91,52,116,.14);
  border-radius: 999px;
  color: #4b4353;
  background: #f8f5fb;
  cursor: pointer;
  font-size: .74rem;
  font-weight: 620;
  transition: color .16s ease,background .16s ease,border-color .16s ease;
}
.report-reason:hover:not(:disabled) { border-color: rgba(194,52,79,.3); color: #a52c43; background: #fbeaee; }
.report-reason.selected { border-color: #c2344f; color: #fff; background: #c2344f; }
.report-reason:disabled { cursor: default; opacity: .6; }
.report-reason:focus-visible { outline: 3px solid rgba(194,52,79,.22); outline-offset: 2px; }
.report-details-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; color: #5e5568; font-size: .72rem; font-weight: 640; }
.report-details-label span { color: #9b93a4; font-weight: 560; }
#report-details {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(91,52,116,.16);
  border-radius: 11px;
  color: #2f2838;
  background: #fcfafd;
  font: inherit;
  font-size: .8rem;
  resize: vertical;
}
#report-details:focus-visible { border-color: #9a63e8; outline: 3px solid rgba(124,58,237,.16); outline-offset: 0; }
#report-details:disabled { color: #8a8294; background: #f4f1f7; }
.report-feedback { min-height: 0; margin: 11px 0 0; font-size: .76rem; line-height: 1.5; }
.report-feedback:empty { margin: 0; }
.report-feedback[data-state="working"] { color: #756e7b; }
.report-feedback[data-state="error"] { color: #c2344f; }
.report-feedback[data-state="blocked"] { padding: 11px 12px; border-radius: 11px; color: #8c2038; background: #fbeaee; }
.report-feedback[data-state="kept"] { padding: 11px 12px; border-radius: 11px; color: #1f6b46; background: #e9f6ef; }
.report-popover-panel .primary { width: 100%; margin-top: 12px; }
.report-popover-panel .primary:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.report-popover-panel .primary[hidden] { display: none; }
.report-popover-panel > small { display: block; margin-top: 11px; color: #958c9a; font-size: .64rem; line-height: 1.5; text-align: center; }

@media (max-width: 700px) {
  /* No celular a caixa vira folha inferior: mais alcance para o polegar. */
  .report-popover-panel {
    top: auto !important;
    right: 0;
    bottom: 0;
    left: 0 !important;
    width: 100%;
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius: 21px 21px 0 0;
    transform: translateY(100%);
  }
  .report-popover.open .report-popover-panel { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .report-popover,
  .report-popover-panel { transition: none; }
  .report-card-button:hover { transform: none; }
}

/* No perfil, a divulgação bloqueada continua visível para o dono, mas apagada. */
.profile-card-item.is-blocked .card { opacity: .5; filter: saturate(.35); pointer-events: none; }
.profile-card-blocked {
  display: grid;
  gap: 3px;
  margin: 9px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(194,52,79,.18);
  border-radius: 12px;
  background: #fbeaee;
  font-size: .74rem;
  line-height: 1.5;
}
.profile-card-blocked strong { color: #8c2038; font-size: .62rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.profile-card-blocked span { color: #7a4450; }
.feature-publication[hidden] { display: none; }

/* Notificações: sino na topbar e painel ancorado nele. */
.notification-wrap { position: relative; display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
@media (max-width: 700px) {
  /* Acima de 700px o wrapper fica na coluna implícita que era do account
     (mesma posição, sem alterar a contagem de colunas). No mobile a barra
     vira uma única coluna e o account some por regra própria — sem uma
     posição explícita aqui, o wrapper herdaria o auto-flow e criaria uma
     linha fantasma abaixo da marca sempre que o sino estivesse visível. */
  .notification-wrap { grid-row: 1; grid-column: 1; }
}
.notification-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(91,52,116,.14);
  border-radius: 11px;
  color: #5e5568;
  background: rgba(255,255,255,.9);
  cursor: pointer;
  transition: color .18s ease,background .18s ease,border-color .18s ease;
}
.notification-bell:hover { color: #6f35d5; border-color: rgba(111,53,213,.3); background: #f6f1fd; }
.notification-bell:focus-visible { outline: 3px solid rgba(124,58,237,.2); outline-offset: 2px; }
.notification-bell[hidden] { display: none; }
.notification-bell svg { width: 19px; height: 19px; }
.notification-bell.has-unread { color: #6f35d5; border-color: rgba(111,53,213,.26); }
.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg,#7438dd,#ca3d9d);
  box-shadow: 0 3px 9px rgba(112,53,211,.34);
  font-size: .58rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1;
}
.notification-badge[hidden] { display: none; }

.notification-panel {
  position: absolute;
  z-index: 92;
  top: calc(100% + 9px);
  right: 0;
  width: min(340px,calc(100vw - 28px));
  border: 1px solid rgba(70,39,90,.1);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(42,20,57,.22);
}
.notification-panel[hidden] { display: none; }
.notification-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 11px; border-bottom: 1px solid rgba(70,39,90,.08); }
.notification-panel-head strong { color: #17131f; font-size: .86rem; letter-spacing: -.02em; }
.notification-panel-head button { padding: 0; border: 0; color: #7c3aed; background: none; cursor: pointer; font-size: .68rem; font-weight: 640; }
.notification-panel-head button:hover { text-decoration: underline; }
.notification-list { max-height: min(60vh,420px); overflow-y: auto; padding: 6px; }
.notification-empty { margin: 0; padding: 22px 16px; color: #8d8496; font-size: .76rem; line-height: 1.55; text-align: center; }
.notification-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 11px;
  padding: 11px 10px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background .16s ease;
}
a.notification-item:hover { background: #f7f4fa; }
.notification-item.is-unread { background: #f6f1fd; }
a.notification-item.is-unread:hover { background: #efe6fc; }
.notification-item-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #6f35d5; background: #efe7fb; }
.notification-item[data-kind="promotion_blocked"] .notification-item-icon,
.notification-item[data-kind="pro_revoked"] .notification-item-icon { color: #c2344f; background: #fbeaee; }
.notification-item[data-kind="referral_valid"] .notification-item-icon { color: #1f6b46; background: #e9f6ef; }
.notification-item-icon svg { width: 16px; height: 16px; }
.notification-item-copy { display: grid; gap: 3px; min-width: 0; }
.notification-item-copy strong { color: #221c2c; font-size: .78rem; font-weight: 660; line-height: 1.35; }
.notification-item-copy span { color: #756e7b; font-size: .73rem; line-height: 1.45; }
.notification-item-copy small { color: #9b93a4; font-size: .64rem; }

@media (max-width: 700px) {
  .notification-wrap { margin-right: 5px; }
  .notification-bell { width: 34px; height: 34px; border-radius: 10px; }
  .notification-bell svg { width: 17px; height: 17px; }
  /* Ancorar direto no sino (top:auto + bottom) deixava a altura do painel
     ambígua para o navegador resolver, e ele podia acabar flutuando perto
     do rodapé em vez de ficar preso à barra. Ancorando pelo topo, logo
     abaixo da topbar, o painel sempre abre no mesmo lugar, perto do sino. */
  .notification-panel { position: fixed; top: 74px; right: 10px; bottom: auto; left: 10px; width: auto; max-height: calc(100vh - 90px); overflow-y: auto; }
  .notification-list { max-height: min(56vh,380px); }
}

@media (prefers-reduced-motion: reduce) {
  .notification-bell,
  .notification-item { transition: none; }
}

/* Corrige o grupo conta+sino no desktop.
   .notification-wrap (criado em runtime ao redor do .account) nunca recebeu
   grid-column própria acima de 700px: como as 3 colunas explícitas da grade
   já estavam ocupadas por nav-left/brand/nav-right, o wrapper caía numa
   linha implícita, jogando nome+avatar+sino para baixo da barra.
   Além disso, o .account manteve a regra antiga "position: absolute; right:
   clamp(...)" que só fazia sentido quando ele era filho direto do
   .site-topbar; agora que ele mora dentro do wrapper (que tem position:
   relative), essa mesma regra passou a ancorá-lo dentro do wrapper minúsculo
   em vez da barra inteira. A correção move a ancoragem à direita para o
   wrapper e devolve o .account ao fluxo normal do flex. */
@media (min-width: 701px) {
  .site-topbar .notification-wrap {
    position: absolute;
    top: 50%;
    right: clamp(18px, 4.5vw, 72px);
    transform: translateY(-50%);
    flex-direction: row-reverse;
  }
  .notification-wrap .account,
  .notification-wrap .account:hover {
    position: static;
    top: auto;
    right: auto;
    transform: none;
  }
}