/* Deltana AI v6.0 — premium Delta-themed UI
   Auto dark/light + Delta orange accents + glassmorphism */

:root {
  --orange:        #ff8534;
  --orange-2:      #ffb169;
  --orange-glow:   rgba(255, 133, 52, 0.35);
  --grad-accent:   linear-gradient(135deg, #ff8534 0%, #ffb169 100%);
  --grad-text:     linear-gradient(135deg, #ff8534 0%, #ffd28a 100%);

  /* Light defaults */
  --bg:        #fafbff;
  --bg-2:      #ffffff;
  --bg-3:      #f0f3fa;
  --fg:        #0a0e1d;
  --fg-2:      #2c3554;
  --fg-muted:  #6b7795;
  --tile-bd:   #e3e8f4;
  --shadow:    0 1px 3px rgba(20,30,80,0.06), 0 4px 12px rgba(20,30,80,0.04);
  --shadow-h:  0 6px 24px rgba(60,80,200,0.18);
  --glass:     rgba(255,255,255,0.6);
}

/* Elite utility + Delta Kim logo completion pass. */
.logo-mark:not(.has-custom-logo) {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow:
    0 0 0 1px rgba(255, 217, 132, .7),
    0 0 18px rgba(255, 139, 38, .36) !important;
}

.logo-mark:not(.has-custom-logo)::before {
  content: "" !important;
  position: absolute;
  inset: -8%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 183, 84, .30), transparent 58%),
    radial-gradient(circle at 34% 16%, rgba(255,255,255,.42), transparent 10%) !important;
  filter: blur(.2px) drop-shadow(0 0 10px rgba(255, 155, 61, .34));
  opacity: .95;
}

.logo-mark:not(.has-custom-logo)::after {
  content: "" !important;
  position: absolute;
  z-index: 2;
  inset: 0;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  clip-path: none !important;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22rg%22%20x1%3D%2214%22%20y1%3D%228%22%20x2%3D%2288%22%20y2%3D%2294%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff3b1%22%2F%3E%3Cstop%20offset%3D%22.18%22%20stop-color%3D%22%23ffc657%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%237b2b07%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%23ff9b26%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffe69f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tg%22%20x1%3D%2225%22%20y1%3D%228%22%20x2%3D%2276%22%20y2%3D%2294%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffe89d%22%2F%3E%3Cstop%20offset%3D%22.48%22%20stop-color%3D%22%23ff9b26%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238b3509%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-25%25%22%20y%3D%22-25%25%22%20width%3D%22150%25%22%20height%3D%22150%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%222%22%20stdDeviation%3D%221.7%22%20flood-color%3D%22%23000000%22%20flood-opacity%3D%22.42%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20fill%3D%22none%22%20stroke%3D%22%23ffdf82%22%20stroke-width%3D%221.5%22%20opacity%3D%22.9%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242.5%22%20fill%3D%22none%22%20stroke%3D%22url%28%23rg%29%22%20stroke-width%3D%2210.5%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236.8%22%20fill%3D%22none%22%20stroke%3D%22%23602407%22%20stroke-width%3D%222.2%22%20opacity%3D%22.82%22%2F%3E%3Cpath%20d%3D%22M50%205%20C64%2022%2083%2061%2091%2088%20C68%2096%2032%2096%209%2088%20C17%2061%2036%2022%2050%205Z%22%20fill%3D%22url%28%23tg%29%22%20stroke%3D%22%23fff0ad%22%20stroke-width%3D%223.2%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23s%29%22%2F%3E%3Cpath%20d%3D%22M50%2016%20C60%2029%2075%2059%2080%2078%20C63%2083%2037%2083%2020%2078%20C25%2059%2040%2029%2050%2016Z%22%20fill%3D%22none%22%20stroke%3D%22%237b3009%22%20stroke-width%3D%222.2%22%20opacity%3D%22.55%22%2F%3E%3Ctext%20x%3D%2250%22%20y%3D%2273%22%20text-anchor%3D%22middle%22%20font-family%3D%22Georgia%2CTimes%20New%20Roman%2Cserif%22%20font-size%3D%2260%22%20font-weight%3D%22900%22%20fill%3D%22%23075f2a%22%20stroke%3D%22%23043f1c%22%20stroke-width%3D%221.05%22%20filter%3D%22url%28%23s%29%22%3E%26%23948%3B%3C%2Ftext%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
  filter: drop-shadow(0 0 8px rgba(255, 155, 61, .42));
}

.logo-mark:not(.has-custom-logo)::after {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22rg%22%20x1%3D%2214%22%20y1%3D%228%22%20x2%3D%2288%22%20y2%3D%2294%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff3b1%22%2F%3E%3Cstop%20offset%3D%22.18%22%20stop-color%3D%22%23ffc657%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%237b2b07%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%23ff9b26%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffe69f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tg%22%20x1%3D%2228%22%20y1%3D%2212%22%20x2%3D%2272%22%20y2%3D%2288%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff0ad%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%23ffab35%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238b3509%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22hi%22%20x1%3D%2236%22%20y1%3D%2218%22%20x2%3D%2264%22%20y2%3D%2278%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%22.62%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-25%25%22%20y%3D%22-25%25%22%20width%3D%22150%25%22%20height%3D%22150%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221.8%22%20stdDeviation%3D%221.55%22%20flood-color%3D%22%23000000%22%20flood-opacity%3D%22.42%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20fill%3D%22none%22%20stroke%3D%22%23ffdf82%22%20stroke-width%3D%221.5%22%20opacity%3D%22.9%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242.5%22%20fill%3D%22none%22%20stroke%3D%22url%28%23rg%29%22%20stroke-width%3D%2210.5%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236.8%22%20fill%3D%22none%22%20stroke%3D%22%23602407%22%20stroke-width%3D%222.2%22%20opacity%3D%22.82%22%2F%3E%3Cpath%20d%3D%22M50%2013%20C61%2027%2078%2059%2084%2084%20C65%2090%2035%2090%2016%2084%20C22%2059%2039%2027%2050%2013Z%22%20fill%3D%22url%28%23tg%29%22%20stroke%3D%22%23fff0ad%22%20stroke-width%3D%222.9%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23s%29%22%2F%3E%3Cpath%20d%3D%22M50%2022%20C58%2034%2070%2058%2075%2075%20C61%2080%2039%2080%2025%2075%20C30%2058%2042%2034%2050%2022Z%22%20fill%3D%22none%22%20stroke%3D%22%237b3009%22%20stroke-width%3D%222%22%20opacity%3D%22.52%22%2F%3E%3Cpath%20d%3D%22M50%2016%20C58%2028%2070%2053%2076%2075%22%20fill%3D%22none%22%20stroke%3D%22url%28%23hi%29%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.8%22%2F%3E%3Ctext%20x%3D%2250%22%20y%3D%2269.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Georgia%2CTimes%20New%20Roman%2Cserif%22%20font-size%3D%2252%22%20font-weight%3D%22900%22%20fill%3D%22%23075f2a%22%20stroke%3D%22%23043f1c%22%20stroke-width%3D%22.95%22%20filter%3D%22url%28%23s%29%22%3E%26%23948%3B%3C%2Ftext%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
}

.logo-mark:not(.has-custom-logo)::after {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22rg%22%20x1%3D%2214%22%20y1%3D%228%22%20x2%3D%2288%22%20y2%3D%2294%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff3b1%22%2F%3E%3Cstop%20offset%3D%22.18%22%20stop-color%3D%22%23ffc657%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%237b2b07%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%23ff9b26%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffe69f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tg%22%20x1%3D%2230%22%20y1%3D%2216%22%20x2%3D%2270%22%20y2%3D%2282%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff0ad%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%23ffab35%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238b3509%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22hi%22%20x1%3D%2238%22%20y1%3D%2222%22%20x2%3D%2263%22%20y2%3D%2272%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%22.62%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-22%25%22%20y%3D%22-22%25%22%20width%3D%22144%25%22%20height%3D%22144%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221.45%22%20stdDeviation%3D%221.25%22%20flood-color%3D%22%23000000%22%20flood-opacity%3D%22.40%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20fill%3D%22none%22%20stroke%3D%22%23ffdf82%22%20stroke-width%3D%221.5%22%20opacity%3D%22.9%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242.5%22%20fill%3D%22none%22%20stroke%3D%22url%28%23rg%29%22%20stroke-width%3D%2210.5%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236.8%22%20fill%3D%22none%22%20stroke%3D%22%23602407%22%20stroke-width%3D%222.2%22%20opacity%3D%22.82%22%2F%3E%3Cpath%20d%3D%22M50%2018%20C58.5%2031%2072.5%2057%2077.5%2078%20C62%2083%2038%2083%2022.5%2078%20C27.5%2057%2041.5%2031%2050%2018Z%22%20fill%3D%22url%28%23tg%29%22%20stroke%3D%22%23fff0ad%22%20stroke-width%3D%222.7%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23s%29%22%2F%3E%3Cpath%20d%3D%22M50%2026%20C56%2037%2066%2057%2069.5%2071.5%20C58%2075%2042%2075%2030.5%2071.5%20C34%2057%2044%2037%2050%2026Z%22%20fill%3D%22none%22%20stroke%3D%22%237b3009%22%20stroke-width%3D%221.8%22%20opacity%3D%22.52%22%2F%3E%3Cpath%20d%3D%22M50%2021%20C57%2032%2068%2054%2073%2072%22%20fill%3D%22none%22%20stroke%3D%22url%28%23hi%29%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.78%22%2F%3E%3Ctext%20x%3D%2250%22%20y%3D%2266.5%22%20text-anchor%3D%22middle%22%20font-family%3D%22Georgia%2CTimes%20New%20Roman%2Cserif%22%20font-size%3D%2248%22%20font-weight%3D%22900%22%20fill%3D%22%23075f2a%22%20stroke%3D%22%23043f1c%22%20stroke-width%3D%22.9%22%20filter%3D%22url%28%23s%29%22%3E%26%23948%3B%3C%2Ftext%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
}

.logo-mark:not(.has-custom-logo)::after {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22rg%22%20x1%3D%2214%22%20y1%3D%228%22%20x2%3D%2288%22%20y2%3D%2294%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff3b1%22%2F%3E%3Cstop%20offset%3D%22.18%22%20stop-color%3D%22%23ffc657%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%237b2b07%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%23ff9b26%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffe69f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tg%22%20x1%3D%2232%22%20y1%3D%2220%22%20x2%3D%2268%22%20y2%3D%2276%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff0ad%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%23ffad37%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238b3509%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22hi%22%20x1%3D%2240%22%20y1%3D%2225%22%20x2%3D%2262%22%20y2%3D%2268%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%22.60%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221.1%22%20stdDeviation%3D%221.05%22%20flood-color%3D%22%23000000%22%20flood-opacity%3D%22.38%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20fill%3D%22none%22%20stroke%3D%22%23ffdf82%22%20stroke-width%3D%221.5%22%20opacity%3D%22.9%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242.5%22%20fill%3D%22none%22%20stroke%3D%22url%28%23rg%29%22%20stroke-width%3D%2210.5%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236.8%22%20fill%3D%22none%22%20stroke%3D%22%23602407%22%20stroke-width%3D%222.2%22%20opacity%3D%22.82%22%2F%3E%3Cpath%20d%3D%22M50%2022%20C57%2033%2068.5%2056%2072.5%2073.5%20C59.5%2077.5%2040.5%2077.5%2027.5%2073.5%20C31.5%2056%2043%2033%2050%2022Z%22%20fill%3D%22url%28%23tg%29%22%20stroke%3D%22%23fff0ad%22%20stroke-width%3D%222.35%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23s%29%22%2F%3E%3Cpath%20d%3D%22M50%2029%20C55%2038%2063%2055%2066%2068%20C56.5%2070.8%2043.5%2070.8%2034%2068%20C37%2055%2045%2038%2050%2029Z%22%20fill%3D%22none%22%20stroke%3D%22%237b3009%22%20stroke-width%3D%221.55%22%20opacity%3D%22.52%22%2F%3E%3Cpath%20d%3D%22M50%2024.5%20C56%2034%2065%2053%2069%2068%22%20fill%3D%22none%22%20stroke%3D%22url%28%23hi%29%22%20stroke-width%3D%22.9%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.76%22%2F%3E%3Ctext%20x%3D%2250%22%20y%3D%2264.2%22%20text-anchor%3D%22middle%22%20font-family%3D%22Georgia%2CTimes%20New%20Roman%2Cserif%22%20font-size%3D%2242%22%20font-weight%3D%22900%22%20fill%3D%22%23075f2a%22%20stroke%3D%22%23043f1c%22%20stroke-width%3D%22.78%22%20filter%3D%22url%28%23s%29%22%3E%26%23948%3B%3C%2Ftext%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
}

.logo-mark:not(.has-custom-logo)::after {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22rg%22%20x1%3D%2214%22%20y1%3D%228%22%20x2%3D%2288%22%20y2%3D%2294%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff3b1%22%2F%3E%3Cstop%20offset%3D%22.18%22%20stop-color%3D%22%23ffc657%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%237b2b07%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%23ff9b26%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffe69f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tg%22%20x1%3D%2232%22%20y1%3D%2218%22%20x2%3D%2268%22%20y2%3D%2274%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff0ad%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%23ffad37%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238b3509%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22hi%22%20x1%3D%2240%22%20y1%3D%2223%22%20x2%3D%2262%22%20y2%3D%2266%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%22.60%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-22%25%22%20y%3D%22-22%25%22%20width%3D%22144%25%22%20height%3D%22144%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221%22%20stdDeviation%3D%221%22%20flood-color%3D%22%23000000%22%20flood-opacity%3D%22.38%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20fill%3D%22none%22%20stroke%3D%22%23ffdf82%22%20stroke-width%3D%221.5%22%20opacity%3D%22.9%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242.5%22%20fill%3D%22none%22%20stroke%3D%22url%28%23rg%29%22%20stroke-width%3D%2210.5%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236.8%22%20fill%3D%22none%22%20stroke%3D%22%23602407%22%20stroke-width%3D%222.2%22%20opacity%3D%22.82%22%2F%3E%3Cpath%20d%3D%22M50%2019%20C56.8%2030%2067.4%2052%2071.2%2070.3%20C59.4%2074%2040.6%2074%2028.8%2070.3%20C32.6%2052%2043.2%2030%2050%2019Z%22%20fill%3D%22url%28%23tg%29%22%20stroke%3D%22%23fff0ad%22%20stroke-width%3D%222.25%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23s%29%22%2F%3E%3Cpath%20d%3D%22M50%2026.2%20C55%2036%2062.8%2053%2065.8%2066.2%20C56.2%2069%2043.8%2069%2034.2%2066.2%20C37.2%2053%2045%2036%2050%2026.2Z%22%20fill%3D%22none%22%20stroke%3D%22%237b3009%22%20stroke-width%3D%221.45%22%20opacity%3D%22.5%22%2F%3E%3Cpath%20d%3D%22M50%2022.2%20C55.8%2031.5%2064.8%2050.5%2068.5%2066%22%20fill%3D%22none%22%20stroke%3D%22url%28%23hi%29%22%20stroke-width%3D%22.85%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.74%22%2F%3E%3Cg%20filter%3D%22url%28%23s%29%22%20fill%3D%22none%22%20stroke%3D%22%23075f2a%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M57.5%2036.5%20C49%2040.5%2042.2%2049.5%2042%2059%20C41.8%2067.6%2048.2%2072%2055.6%2069.8%20C64.2%2067.3%2067%2057.2%2062.4%2050.7%20C58.8%2045.6%2051.4%2045.3%2046.6%2049.2%22%20stroke-width%3D%226.6%22%2F%3E%3Cpath%20d%3D%22M57.2%2035%20C52.4%2039%2048.2%2046%2045.5%2054%22%20stroke-width%3D%225.8%22%2F%3E%3C%2Fg%3E%3Cg%20filter%3D%22url%28%23s%29%22%20fill%3D%22none%22%20stroke%3D%22%23043f1c%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.55%22%3E%3Cpath%20d%3D%22M57.5%2036.5%20C49%2040.5%2042.2%2049.5%2042%2059%20C41.8%2067.6%2048.2%2072%2055.6%2069.8%20C64.2%2067.3%2067%2057.2%2062.4%2050.7%20C58.8%2045.6%2051.4%2045.3%2046.6%2049.2%22%20stroke-width%3D%222.2%22%2F%3E%3Cpath%20d%3D%22M57.2%2035%20C52.4%2039%2048.2%2046%2045.5%2054%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
}

.logo-mark:not(.has-custom-logo)::after {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22rg%22%20x1%3D%2214%22%20y1%3D%228%22%20x2%3D%2288%22%20y2%3D%2294%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff3b1%22%2F%3E%3Cstop%20offset%3D%22.18%22%20stop-color%3D%22%23ffc657%22%2F%3E%3Cstop%20offset%3D%22.42%22%20stop-color%3D%22%237b2b07%22%2F%3E%3Cstop%20offset%3D%22.66%22%20stop-color%3D%22%23ff9b26%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffe69f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22tg%22%20x1%3D%2232%22%20y1%3D%2218%22%20x2%3D%2268%22%20y2%3D%2274%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff0ad%22%2F%3E%3Cstop%20offset%3D%22.44%22%20stop-color%3D%22%23ffad37%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%238b3509%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22hi%22%20x1%3D%2240%22%20y1%3D%2223%22%20x2%3D%2262%22%20y2%3D%2266%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%22.62%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff8c9%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3Cfilter%20id%3D%22s%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeDropShadow%20dx%3D%220%22%20dy%3D%221%22%20stdDeviation%3D%22.95%22%20flood-color%3D%22%23000000%22%20flood-opacity%3D%22.36%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20fill%3D%22none%22%20stroke%3D%22%23ffdf82%22%20stroke-width%3D%221.5%22%20opacity%3D%22.9%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242.5%22%20fill%3D%22none%22%20stroke%3D%22url%28%23rg%29%22%20stroke-width%3D%2210.5%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236.8%22%20fill%3D%22none%22%20stroke%3D%22%23602407%22%20stroke-width%3D%222.2%22%20opacity%3D%22.82%22%2F%3E%3Cpath%20d%3D%22M50%2018.5%20C56.5%2029.5%2066.8%2050.5%2070.5%2067.8%20C61.6%2073.6%2038.4%2073.6%2029.5%2067.8%20C33.2%2050.5%2043.5%2029.5%2050%2018.5Z%22%20fill%3D%22url%28%23tg%29%22%20stroke%3D%22%23fff0ad%22%20stroke-width%3D%222.25%22%20stroke-linejoin%3D%22round%22%20filter%3D%22url%28%23s%29%22%2F%3E%3Cpath%20d%3D%22M50%2026%20C54.8%2035.4%2062.2%2052.6%2064.8%2063.8%20C57.4%2068.2%2042.6%2068.2%2035.2%2063.8%20C37.8%2052.6%2045.2%2035.4%2050%2026Z%22%20fill%3D%22none%22%20stroke%3D%22%237b3009%22%20stroke-width%3D%221.45%22%20opacity%3D%22.48%22%2F%3E%3Cpath%20d%3D%22M50%2022%20C55.6%2031.4%2064.2%2049.8%2067.4%2064.8%22%20fill%3D%22none%22%20stroke%3D%22url%28%23hi%29%22%20stroke-width%3D%22.85%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.74%22%2F%3E%3Ctext%20x%3D%2250%22%20y%3D%2265.8%22%20text-anchor%3D%22middle%22%20font-family%3D%22Segoe%20UI%20Symbol%2CArial%2Csans-serif%22%20font-size%3D%2238%22%20font-weight%3D%22800%22%20fill%3D%22%23075f2a%22%20stroke%3D%22%23043f1c%22%20stroke-width%3D%22.45%22%20filter%3D%22url%28%23s%29%22%3E%26%23948%3B%3C%2Ftext%3E%3C%2Fsvg%3E") center/contain no-repeat !important;
}

.quizzes-elite-page,
.tickets-elite-page,
.about-elite-page,
.knowledge-elite-page,
.legal-elite-page {
  width: min(100%, 980px);
  margin-inline: auto;
  display: grid;
  gap: 10px;
}

.home-elite-page > * + *,
.elite-social-pulse-page > * + *,
.creator-hub-page > * + *,
.public-profile-elite-page > * + *,
.own-profile-elite-page > * + *,
.settings-elite-page > * + *,
.analytics-elite-page > * + *,
.leaderboards-elite-page > * + *,
.quizzes-elite-page > * + *,
.tickets-elite-page > * + *,
.about-elite-page > * + *,
.knowledge-elite-page > * + *,
.legal-elite-page > * + * {
  margin-top: 0 !important;
}

.elite-page-topbar {
  position: sticky;
  top: 0;
  z-index: 880;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 2px 8px;
  background: linear-gradient(180deg, rgba(6,9,22,.98), rgba(6,9,22,.76));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.elite-page-topbar h1,
.elite-page-topbar p {
  margin: 0;
  min-width: 0;
}

.elite-page-topbar h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--elite-text);
  font-size: 20px;
  line-height: 1.05;
  font-weight: 950;
}

.elite-page-topbar p {
  color: var(--elite-muted);
  font-size: 11px;
  line-height: 1.25;
}

.elite-icon-btn,
.elite-avatar-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.045);
  color: var(--elite-text);
  overflow: hidden;
}

.elite-avatar-btn {
  border-color: rgba(255,155,61,.34);
  box-shadow: 0 0 16px rgba(255,155,61,.16);
}

.elite-avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elite-avatar-btn span {
  font-weight: 950;
  color: var(--elite-orange-2);
}

.elite-hub-tabs,
.leaderboard-category-tabs,
.leaderboard-cycle-tabs {
  display: grid;
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  background: rgba(5,8,22,.54);
}

.elite-hub-tabs {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.leaderboard-category-tabs {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.leaderboard-cycle-tabs {
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.elite-hub-tabs button,
.leaderboard-category-tabs button,
.leaderboard-cycle-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--elite-muted);
  display: grid;
  place-items: center;
  gap: 2px;
  font-weight: 850;
  font-size: 11px;
}

.leaderboard-category-tabs button strong,
.leaderboard-category-tabs button small {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-category-tabs button small {
  font-size: 8.5px;
  opacity: .84;
}

.elite-hub-tabs button.active,
.leaderboard-category-tabs button.active,
.leaderboard-cycle-tabs button.active {
  color: var(--elite-orange-2);
  background: radial-gradient(circle at 50% 0%, rgba(255,155,61,.20), rgba(255,155,61,.08));
  box-shadow: inset 0 0 0 1px rgba(255,155,61,.30), 0 0 18px rgba(255,155,61,.16);
}

.quiz-progress-hero,
.daily-challenge-card,
.featured-poll-card,
.all-polls-list,
.poll-detail-card,
.ticket-list-card,
.new-ticket-card,
.knowledge-ask-card,
.about-hero-card,
.about-community-card,
.legal-hero-card,
.legal-section-card,
.leaderboard-podium-card,
.my-rank-card,
.leaderboard-explain-card {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,155,61,.10), transparent 28%),
    linear-gradient(180deg, rgba(16,25,55,.84), rgba(9,14,34,.90));
  box-shadow: var(--elite-shadow);
  overflow: hidden;
}

.quiz-progress-hero {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.level-ring {
  width: 98px;
  height: 98px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle at center, rgba(7,10,24,.96) 0 52%, transparent 53%),
    conic-gradient(var(--elite-orange) var(--progress, 62%), var(--elite-purple) 0, rgba(255,255,255,.08));
  box-shadow: 0 0 24px rgba(255,155,61,.22), 0 0 22px rgba(139,92,246,.18);
}

.level-ring strong {
  color: var(--elite-text);
  font-size: 30px;
  line-height: 1;
}

.level-ring small,
.quiz-progress-copy p,
.daily-challenge-card p,
.knowledge-ask-card small,
.legal-hero-card p,
.legal-section-card p {
  color: var(--elite-muted);
}

.quiz-progress-copy {
  min-width: 0;
}

.quiz-progress-copy h2,
.daily-challenge-card h3,
.featured-poll-card h3,
.all-polls-list h3,
.new-ticket-card h3,
.ticket-list-card h3,
.about-community-card h3,
.legal-section-card h3 {
  margin: 0;
  color: var(--elite-text);
}

.quiz-progress-grid,
.poll-summary-grid,
.ticket-summary-grid,
.poll-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
  margin-top: 10px;
}

.quiz-progress-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.quiz-progress-grid span,
.poll-summary-grid article,
.ticket-summary-grid article,
.poll-detail-stats span {
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.quiz-progress-grid strong,
.poll-summary-grid strong,
.ticket-summary-grid strong,
.poll-detail-stats strong {
  color: var(--elite-text);
  font-size: 18px;
  line-height: 1;
}

.quiz-progress-grid small,
.poll-summary-grid small,
.ticket-summary-grid small,
.poll-detail-stats small {
  color: var(--elite-muted);
  font-size: 9.5px;
}

.daily-challenge-card,
.new-ticket-card,
.ticket-list-card,
.poll-detail-card,
.legal-section-card {
  padding: 12px;
}

.daily-challenge-card > div:first-child,
.knowledge-ask-card,
.my-rank-card,
.leaderboard-explain-card,
.legal-hero-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.daily-challenge-icon,
.quiz-mini-icon,
.poll-row-icon,
.daily-challenge-card .reward-pill,
.reward-pill,
.category-pill,
.timer-pill,
.support-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,155,61,.24);
  background: rgba(255,155,61,.09);
  color: var(--elite-orange-2);
  font-size: 11px;
  font-weight: 850;
}

.daily-challenge-icon,
.quiz-mini-icon,
.poll-row-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

.daily-question-preview {
  margin: 8px 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.daily-question-preview strong,
.featured-poll-body > strong,
.poll-detail-card h2 {
  color: var(--elite-text);
  line-height: 1.25;
}

.daily-question-preview small {
  display: block;
  margin-top: 4px;
  color: var(--elite-muted);
}

.daily-challenge-card footer,
.quiz-play-footer,
.ticket-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.quiz-category-section,
.trending-quiz-section,
.polls-hub-page {
  display: grid;
  gap: 9px;
}

.quizzes-elite-page > section[x-show],
.daily-challenge-card,
.featured-poll-card,
.all-polls-list,
.poll-detail-card {
  display: grid;
  gap: 9px;
}

.quizzes-elite-page .poll-summary-grid {
  margin-top: 0;
}

.quiz-category-grid,
.knowledge-topic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}

.quiz-category-card,
.knowledge-topic-card {
  min-height: 92px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(78,161,255,.12), transparent 58%),
    rgba(9,15,38,.76);
  color: var(--elite-text);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px;
  text-align: center;
}

.quiz-category-card .ui-svg,
.knowledge-topic-card .ui-svg {
  width: 25px;
  height: 25px;
  color: var(--elite-orange-2);
}

.quiz-category-card strong,
.knowledge-topic-card strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.quiz-category-card small,
.knowledge-topic-card small {
  color: var(--elite-muted);
  font-size: 9px;
}

.trending-quiz-row,
.poll-list-row,
.leaderboard-row-elite,
.ticket-row-elite,
.about-feature-list article {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(9,15,38,.68);
  color: var(--elite-text);
}

.poll-list-row,
.about-feature-list article {
  grid-template-columns: auto minmax(0,1fr) auto;
}

.trending-quiz-row strong,
.poll-list-row strong,
.leaderboard-row-elite strong,
.ticket-row-elite strong,
.about-feature-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.trending-quiz-row small,
.poll-list-row small,
.leaderboard-row-elite small,
.ticket-row-elite small,
.about-feature-list small {
  color: var(--elite-muted);
  font-size: 10px;
}

.quiz-play-page,
.poll-detail-page {
  display: grid;
  gap: 9px;
}

.quiz-play-top {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
}

.quiz-play-top strong {
  color: var(--elite-text);
  text-align: center;
}

.quiz-progress-line {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  color: var(--elite-muted);
  font-size: 11px;
}

.quiz-progress-line div,
.poll-result-line div,
.poll-option-bar,
.ticket-char-progress i {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.quiz-progress-line i,
.poll-result-line i,
.poll-option-bar i,
.ticket-char-progress i::before {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--elite-orange), var(--elite-purple), var(--elite-cyan));
}

.quiz-question-card {
  padding: 12px;
  border: 1px solid rgba(255,155,61,.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 16%, rgba(78,161,255,.14), transparent 36%),
    linear-gradient(180deg, rgba(16,25,55,.84), rgba(9,14,34,.90));
}

.quiz-meta-row,
.poll-detail-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.quiz-question-card h2 {
  color: var(--elite-text);
  font-size: 21px;
  line-height: 1.25;
  margin: 0 0 10px;
}

.quiz-visual-brain {
  height: 128px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(78,161,255,.24), transparent 46%),
    rgba(255,255,255,.035);
}

.quiz-visual-brain .ui-svg {
  width: 88px;
  height: 88px;
  color: var(--elite-cyan);
  filter: drop-shadow(0 0 22px rgba(78,161,255,.38));
}

.elite-answer-option,
.poll-detail-option {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(8,14,36,.72);
  color: var(--elite-text);
  text-align: left;
}

.elite-answer-option > span:first-child {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: var(--elite-muted);
  font-weight: 900;
}

.elite-answer-option strong {
  min-width: 0;
  font-size: 12px;
  line-height: 1.25;
}

.elite-answer-option.selected,
.poll-detail-option.selected {
  border-color: rgba(255,155,61,.58);
  box-shadow: inset 0 0 0 1px rgba(255,155,61,.18), 0 0 18px rgba(255,155,61,.14);
}

.elite-answer-option.correct {
  border-color: rgba(47,227,143,.55);
  background: rgba(47,227,143,.10);
}

.elite-answer-option.wrong {
  border-color: rgba(255,79,126,.55);
  background: rgba(255,79,126,.10);
}

.quiz-explanation-card {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(78,161,255,.18);
  border-radius: 14px;
  background: rgba(78,161,255,.07);
}

.quiz-explanation-card strong,
.quiz-explanation-card p {
  margin: 0;
}

.quiz-explanation-card p {
  margin-top: 4px;
  color: var(--elite-muted);
  font-size: 12px;
  line-height: 1.35;
}

.featured-poll-card {
  padding: 12px;
}

.featured-poll-body {
  width: 100%;
  display: grid;
  gap: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
}

.poll-result-line {
  display: grid;
  grid-template-columns: minmax(0,1fr) 45% 34px;
  align-items: center;
  gap: 8px;
  color: var(--elite-muted);
  font-size: 11px;
}

.poll-result-line span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-badge {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,155,61,.38);
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
  font-size: 9px;
  font-weight: 900;
}

.poll-detail-card p {
  color: var(--elite-muted);
  margin-top: 0;
}

.poll-detail-option {
  grid-template-columns: minmax(0,1fr) auto;
  align-items: stretch;
}

.poll-detail-option > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.poll-option-bar {
  grid-column: 1 / -1;
}

.poll-share-row,
.about-social-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.poll-share-row button,
.about-social-row button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--elite-text);
  background: rgba(255,255,255,.045);
}

.leaderboard-podium-card {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: end;
  gap: 8px;
  padding: 12px;
}

.podium-place {
  position: relative;
  min-height: 132px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  color: var(--elite-text);
  padding: 8px;
}

.podium-place.place-1 {
  min-height: 160px;
  border-color: rgba(255,155,61,.42);
  background: radial-gradient(circle at 50% 0%, rgba(255,155,61,.24), rgba(255,255,255,.045) 62%);
}

.podium-avatar,
.leaderboard-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,155,61,.32);
  background: rgba(255,255,255,.06);
}

.podium-avatar {
  width: 58px;
  height: 58px;
}

.podium-avatar img,
.leaderboard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.podium-place strong,
.podium-place small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-place small,
.podium-place em,
.leaderboard-row-elite em,
.my-rank-card em {
  color: var(--elite-orange-2);
  font-weight: 900;
  font-style: normal;
}

.leaderboard-row-elite {
  grid-template-columns: 30px 42px minmax(0,1fr) auto;
  margin-top: 7px;
}

.leaderboard-rank {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
  font-weight: 950;
}

.my-rank-card,
.leaderboard-explain-card {
  margin-top: 0;
}

.ticket-create-main {
  min-height: 48px;
  border: 1px solid rgba(255,184,106,.56);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffb86a, #ff7a1f);
  color: #120904;
  font-weight: 950;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 22px rgba(255,122,31,.28);
}

.ticket-category-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 10px 0;
}

.ticket-category-chips::-webkit-scrollbar {
  display: none;
}

.ticket-category-chips button {
  flex: 0 0 auto;
  min-height: 31px;
  border: 1px solid rgba(255,155,61,.22);
  border-radius: 999px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
  padding: 0 10px;
  font-size: 11px;
  font-weight: 850;
}

.new-ticket-card textarea,
.ticket-composer-elite textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(5,8,22,.68);
  color: var(--elite-text);
  padding: 10px;
}

.ticket-char-progress {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  color: var(--elite-muted);
  font-size: 11px;
  margin: 8px 0;
}

.ticket-char-progress i::before {
  content: "";
  width: 45%;
}

.ticket-char-progress i.valid::before {
  width: 100%;
  background: var(--elite-green);
}

.ticket-attach-card {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  border: 1px dashed rgba(78,161,255,.28);
  border-radius: 14px;
  background: rgba(78,161,255,.06);
  color: var(--elite-text);
  padding: 9px;
}

.ticket-preview-wrap {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.ticket-image-preview {
  max-height: 132px;
  border-radius: 12px;
  object-fit: cover;
}

.ticket-row-elite {
  grid-template-columns: 10px minmax(0,1fr) auto auto;
  margin-top: 7px;
}

.ticket-status-dot {
  width: 8px;
  height: 34px;
  border-radius: 999px;
  background: var(--elite-green);
}

.ticket-status-dot.status-closed,
.ticket-status-dot.status-resolved {
  background: var(--elite-muted);
}

.ticket-row-elite em {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.ticket-detail-elite {
  margin-top: 8px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(5,8,22,.42);
}

.ticket-chat-head,
.ticket-composer-elite > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.ticket-chat-head small {
  display: block;
  color: var(--elite-muted);
  margin-top: 3px;
}

.ticket-live {
  color: var(--elite-green);
  font-size: 11px;
  font-weight: 850;
}

.ticket-thread-elite {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.ticket-message {
  display: grid;
  gap: 3px;
}

.ticket-message.from-user {
  justify-items: end;
}

.ticket-message .bubble {
  max-width: 82%;
  padding: 9px 10px;
  border-radius: 14px;
  color: var(--elite-text);
  background: rgba(255,255,255,.06);
}

.ticket-message.from-user .bubble {
  background: rgba(255,155,61,.13);
  border: 1px solid rgba(255,155,61,.22);
}

.ticket-message small,
.ticket-closed-note {
  color: var(--elite-muted);
  font-size: 10px;
}

.ticket-composer-elite {
  display: grid;
  gap: 8px;
}

.about-hero-card {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
}

.about-deltana-orb {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(255,155,61,.20), transparent 70%);
}

.about-deltana-orb .logo-mark {
  width: 74px;
  height: 74px;
}

.about-hero-card h2 {
  color: var(--elite-text);
  font-size: 26px;
  margin: 0;
}

.about-hero-card p {
  margin: 0;
  color: var(--elite-orange-2);
}

.about-hero-card strong {
  max-width: 360px;
  color: var(--elite-muted);
  line-height: 1.45;
}

.about-feature-list {
  display: grid;
  gap: 8px;
}

.about-feature-list article > span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.09);
}

.about-community-card {
  padding: 12px;
}

.about-community-card p {
  color: var(--elite-muted);
  margin-bottom: 0;
}

.knowledge-ask-card {
  grid-template-columns: 58px minmax(0,1fr);
}

.knowledge-ask-card .orange-action {
  grid-column: 1 / -1;
}

.ai-orb-large {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #170b03;
  font-weight: 950;
  background: linear-gradient(135deg, #ffdd8a, #ff7a1f);
  box-shadow: 0 0 24px rgba(255,155,61,.26);
}

.knowledge-topic-grid {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.knowledge-topic-card {
  min-height: 118px;
}

.legal-hero-card,
.legal-section-card {
  padding: 12px;
}

.legal-hero-card > span {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}

.legal-hero-card h2,
.legal-section-card h3 {
  margin: 0;
  color: var(--elite-text);
}

.legal-section-card p {
  margin-bottom: 0;
  line-height: 1.48;
}

.elite-empty-card {
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  color: var(--elite-muted);
}

@media (max-width: 560px) {
  .home-elite-page,
  .elite-social-pulse-page,
  .creator-hub-page,
  .public-profile-elite-page,
  .own-profile-elite-page,
  .settings-elite-page,
  .analytics-elite-page,
  .leaderboards-elite-page,
  .quizzes-elite-page,
  .tickets-elite-page,
  .about-elite-page,
  .knowledge-elite-page,
  .legal-elite-page {
    gap: 8px !important;
  }

  .public-profile-actions {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .creator-performance-card {
    grid-template-columns: minmax(0, 1fr) 112px !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .creator-performance-card .performance-title {
    grid-column: 1 / -1 !important;
  }

  .creator-performance-card .performance-metrics-grid {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  .creator-performance-card .creator-ai-score-ring {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 104px !important;
    height: 104px !important;
    align-self: center;
  }

  .creator-performance-card .creator-ai-score-ring strong {
    font-size: 30px !important;
  }

  .creator-performance-card .best-platform-panel {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    min-height: 82px;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    padding: 9px !important;
  }

  .creator-performance-card .performance-metrics-grid article {
    min-height: 70px !important;
    padding: 7px !important;
  }

  .creator-performance-card .performance-metrics-grid .metric-icon {
    width: 26px !important;
    height: 26px !important;
  }

  .creator-performance-card .performance-metrics-grid small {
    font-size: 8.5px !important;
  }

  .creator-performance-card .performance-metrics-grid strong {
    font-size: 14px !important;
  }

  .quiz-progress-hero {
    grid-template-columns: 92px minmax(0,1fr);
    padding: 10px;
    gap: 9px;
  }

  .level-ring {
    width: 82px;
    height: 82px;
  }

  .level-ring strong {
    font-size: 25px;
  }

  .quiz-category-grid {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 6px;
  }

  .quiz-category-card {
    min-height: 78px;
    border-radius: 14px;
    padding: 6px;
  }

  .quiz-category-card strong {
    font-size: 9.5px;
  }

  .quiz-category-card small {
    font-size: 8px;
  }

  .leaderboard-category-tabs button {
    min-height: 44px;
  }

  .leaderboard-podium-card {
    min-height: 164px;
    padding: 9px;
  }

  .podium-place {
    min-height: 118px;
    padding: 6px;
  }

  .podium-place.place-1 {
    min-height: 140px;
  }

  .podium-avatar {
    width: 48px;
    height: 48px;
  }

  .ticket-summary-grid,
  .poll-detail-stats {
    gap: 6px;
  }

  .about-deltana-orb {
    width: 82px;
    height: 82px;
  }

  .about-deltana-orb .logo-mark {
    width: 64px;
    height: 64px;
  }
}

/* Elite profile/settings/analytics layer */
.public-profile-elite-page,
.own-profile-elite-page,
.settings-elite-page,
.analytics-elite-page,
.leaderboards-elite-page {
  width: min(100%, 980px);
  margin-inline: auto;
  display: grid;
  gap: 12px;
}

.profile-screen-topbar {
  position: sticky;
  top: 0;
  z-index: 880;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 2px 8px;
  background: linear-gradient(180deg, rgba(6,9,22,.98), rgba(6,9,22,.78));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.profile-screen-topbar h1 {
  margin: 0;
  color: var(--elite-text);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}
.profile-topbar-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}
.profile-topbar-actions .profile-glass-icon {
  min-width: 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 14px;
}
.profile-glass-icon,
.date-range-pill {
  min-width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  color: var(--elite-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.profile-glass-icon .ui-svg,
.date-range-pill .ui-svg { width: 20px; height: 20px; }
.date-range-pill {
  width: auto;
  color: var(--elite-muted);
  font-size: 12px;
  font-weight: 800;
}

.public-profile-hero-card,
.own-profile-hero-card,
.identity-access-card,
.profile-achievement-showcase,
.public-progress-panel,
.achievement-progress-card,
.edit-profile-studio,
.ai-banner-studio-card,
.connected-social-links-card,
.settings-hero-card,
.settings-group-card,
.settings-inline-panel,
.analytics-overview-card,
.top-performing-posts-elite,
.stats-support-grid,
.leaderboard-hero-card,
.leaderboard-list-card {
  border: 1px solid var(--elite-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% 0%, rgba(255,155,61,.08), transparent 28%),
    linear-gradient(180deg, rgba(16,25,55,.84), rgba(9,14,34,.88));
  box-shadow: var(--elite-shadow);
  overflow: hidden;
}

.public-profile-hero-card,
.own-profile-hero-card {
  position: relative;
  min-height: 420px;
  padding: 142px 18px 16px;
  background-size: cover;
  background-position: center;
  border-color: rgba(255,155,61,.24);
}
.public-profile-banner-art,
.own-profile-banner-mark {
  position: absolute;
  inset: 0 0 auto 0;
  height: 176px;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 22%, rgba(255,155,61,.24), transparent 20%),
    radial-gradient(circle at 72% 8%, rgba(78,161,255,.30), transparent 26%),
    linear-gradient(180deg, rgba(255,155,61,.10), transparent 76%);
}
.profile-emblem-orb,
.own-profile-banner-mark .logo-mark {
  position: absolute;
  left: 50%;
  top: 22px;
  width: 76px;
  height: 76px;
  transform: translateX(-50%);
  border-radius: 999px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 0 22px rgba(255,155,61,.42));
}
.profile-emblem-orb .logo-mark { width: 72px; height: 72px; }
.public-profile-main,
.own-profile-identity {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  z-index: 1;
}
.public-profile-avatar-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  flex: 0 0 auto;
}
.profile-avatar-glow {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  background: conic-gradient(from 180deg, var(--elite-orange), var(--elite-blue), var(--elite-pink), var(--elite-orange));
  filter: blur(.2px);
  box-shadow: 0 0 26px rgba(255,155,61,.36);
}
.public-profile-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  padding: 3px;
  background: rgba(4,8,22,.94);
  overflow: hidden;
}
.public-profile-avatar img,
.public-profile-avatar b {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: grid;
  place-items: center;
  object-fit: cover;
  color: var(--elite-orange-2);
  font-size: 34px;
  background: radial-gradient(circle, rgba(255,155,61,.18), rgba(7,10,24,.94));
}
.profile-online-dot {
  position: absolute;
  right: 1px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--elite-green);
  border: 4px solid #081024;
  box-shadow: 0 0 12px rgba(49,217,139,.65);
}
.public-profile-identity,
.own-profile-identity > div:last-child { min-width: 0; }
.public-profile-identity h2,
.own-profile-identity h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--elite-text);
  font-size: 25px;
  line-height: 1.05;
  font-weight: 950;
}
.verified-badge {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #2da8ff;
  flex: 0 0 auto;
}
.verified-badge .ui-svg { width: 22px; height: 22px; }
.profile-handle {
  margin: 5px 0 8px;
  color: var(--elite-muted);
  font-size: 13px;
  font-weight: 650;
}
.identity-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.identity-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--elite-muted);
  font-size: 10.5px;
  font-weight: 800;
}
.identity-pill .ui-svg,
.identity-pill .platform-svg { width: 14px; height: 14px; flex: 0 0 auto; }
.identity-pill b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.did-pill {
  color: var(--elite-orange-2);
  border-color: rgba(255,155,61,.24);
  max-width: 100%;
}
.did-pill b {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
.telegram-pill { color: #35d6ff; border-color: rgba(53,214,255,.22); }
.identity-pill.warn { color: #ffbc6d; opacity: .86; }
.online-pill i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--elite-green);
}

.public-profile-actions,
.own-profile-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.own-profile-actions { grid-template-columns: minmax(0,1fr) minmax(0, .7fr); }
.profile-primary-action,
.profile-secondary-action,
.profile-save-action {
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,155,61,.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  font-weight: 900;
}
.profile-primary-action,
.profile-save-action {
  color: #170b03;
  background: linear-gradient(135deg, #ffbd73, #ff7a1f);
  box-shadow: 0 0 24px rgba(255,155,61,.28);
}
.profile-secondary-action {
  color: var(--elite-muted);
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.10);
}
.profile-primary-action .ui-svg,
.profile-secondary-action .ui-svg { width: 18px; height: 18px; }

.profile-stat-strip {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(3,7,20,.46);
}
.profile-stat-strip button,
.profile-stat-strip span {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--elite-text);
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}
.profile-stat-strip .ui-svg {
  width: 19px;
  height: 19px;
  color: var(--elite-orange-2);
}
.profile-stat-strip strong {
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
}
.profile-stat-strip small {
  color: var(--elite-muted);
  font-size: 10px;
  line-height: 1;
}
.elite-profile-bio {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: var(--elite-text);
  font-size: 15px;
  line-height: 1.42;
}
.public-social-platform-row {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 12px;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.public-social-platform-chip {
  min-height: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  color: var(--elite-text);
  font-size: 12px;
  font-weight: 800;
}
.public-social-platform-chip .platform-svg { width: 20px; height: 20px; }

.elite-profile-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(108px, 1fr);
  gap: 0;
  overflow-x: auto;
  margin-top: 14px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(5,9,24,.58);
  scrollbar-width: none;
}
.elite-profile-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--elite-muted);
  font-weight: 850;
  font-size: 13px;
}
.elite-profile-tabs button.active {
  color: var(--elite-orange-2);
  background: radial-gradient(circle at 50% 0%, rgba(255,155,61,.20), rgba(255,155,61,.08));
  box-shadow: inset 0 0 0 1px rgba(255,155,61,.28), 0 0 20px rgba(255,155,61,.18);
}
.own-profile-tabs { position: sticky; top: 62px; z-index: 820; margin-top: 0; }
.compact-tabs { margin-top: 10px; grid-auto-columns: minmax(90px, 1fr); }

.creator-power-card {
  display: grid;
  grid-template-columns: minmax(0, .86fr) 130px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255,155,61,.22);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(78,161,255,.16), transparent 26%),
    linear-gradient(180deg, rgba(16,25,55,.84), rgba(9,14,34,.88));
  box-shadow: var(--elite-shadow);
}
.creator-power-head h3,
.creator-power-head p { margin: 0; }
.creator-power-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--elite-text);
  font-size: 17px;
}
.creator-power-head h3 .ui-svg { color: var(--elite-orange-2); }
.creator-power-head p { color: var(--elite-muted); font-size: 12px; margin-top: 4px; }
.creator-score-orb,
.achievement-progress-ring,
.post-score-ring {
  border-radius: 999px;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle at center, rgba(7,10,24,.96) 0 47%, transparent 48%),
    conic-gradient(from 210deg, var(--elite-blue), var(--elite-purple), var(--elite-orange), var(--elite-blue));
  box-shadow: 0 0 28px rgba(78,161,255,.22), 0 0 24px rgba(255,155,61,.16);
}
.creator-score-orb {
  width: 124px;
  height: 124px;
  justify-self: center;
}
.creator-score-orb strong { color: var(--elite-text); font-size: 38px; line-height: 1; }
.creator-score-orb small { color: var(--elite-muted); font-size: 10px; }
.creator-score-orb em { color: var(--elite-orange-2); font-size: 11px; font-style: normal; font-weight: 900; }
.creator-power-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.creator-power-copy strong { color: var(--elite-text); font-size: 16px; }
.creator-power-copy span { color: var(--elite-muted); font-size: 12.5px; line-height: 1.35; }
.creator-power-copy b { color: var(--elite-green); font-size: 12px; }
.mini-sparkline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 6px;
  height: 34px;
}
.mini-sparkline i {
  display: block;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--elite-orange-2), rgba(255,155,61,.12));
}
.mini-sparkline i:nth-child(1) { height: 35%; }
.mini-sparkline i:nth-child(2) { height: 52%; }
.mini-sparkline i:nth-child(3) { height: 44%; }
.mini-sparkline i:nth-child(4) { height: 68%; }
.mini-sparkline i:nth-child(5) { height: 88%; }

.profile-achievement-showcase,
.public-progress-panel,
.achievement-progress-card,
.edit-profile-studio,
.settings-group-card,
.settings-inline-panel,
.top-performing-posts-elite,
.leaderboard-list-card { padding: 14px; }
.achievement-showcase-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.showcase-badge-card {
  min-width: 0;
  min-height: 112px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  text-align: center;
}
.badge-medal,
.achievement-art {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background:
    radial-gradient(circle at 50% 35%, rgba(255,184,106,.30), transparent 62%),
    rgba(255,155,61,.08);
}
.badge-medal .ui-svg,
.achievement-art .ui-svg { width: 30px; height: 30px; }
.showcase-badge-card strong {
  color: var(--elite-text);
  font-size: 12.5px;
  line-height: 1.1;
}
.showcase-badge-card small {
  color: var(--elite-muted);
  font-size: 10px;
  line-height: 1.25;
}
.tier-purple .badge-medal,
.tier-purple .achievement-art { color: #d8b4fe; background: rgba(139,92,246,.14); }
.tier-blue .badge-medal,
.tier-blue .achievement-art { color: #93c5fd; background: rgba(78,161,255,.14); }
.tier-silver .badge-medal,
.tier-silver .achievement-art { color: #d7deea; background: rgba(215,222,234,.10); }

.achievement-progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: 12px;
  border-color: rgba(255,155,61,.24);
}
.achievement-progress-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: var(--elite-text);
  font-size: 19px;
}
.achievement-progress-card h3 .ui-svg { color: var(--elite-orange-2); }
.achievement-progress-card p {
  margin: 0 0 12px;
  color: var(--elite-text);
  font-size: 26px;
  font-weight: 900;
}
.achievement-progress-card p strong {
  color: var(--elite-orange);
  font-size: 46px;
}
.achievement-progress-card small { color: var(--elite-muted); font-size: 13px; }
.achievement-progress-line {
  height: 12px;
  max-width: 420px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  margin-bottom: 14px;
}
.achievement-progress-line i {
  display: block;
  height: 100%;
  width: var(--achievement-progress, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8a24, #ffc46b);
}
.achievement-progress-ring {
  width: 126px;
  height: 126px;
}
.achievement-progress-ring strong {
  color: var(--elite-orange-2);
  font-size: 35px;
}
.achievement-grid-elite {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.achievement-card-elite {
  position: relative;
  min-height: 196px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px 12px;
  border: 1px solid rgba(255,155,61,.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,155,61,.13), transparent 48%),
    rgba(10,16,38,.74);
  text-align: center;
}
.achievement-state {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--elite-green);
  border: 1px solid currentColor;
}
.achievement-state .ui-svg { width: 16px; height: 16px; }
.achievement-card-elite strong {
  color: var(--elite-text);
  font-size: 16px;
  line-height: 1.15;
}
.achievement-card-elite small {
  color: var(--elite-muted);
  font-size: 12px;
  line-height: 1.35;
}
.achievement-card-elite b {
  min-width: 82px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
  border: 1px solid rgba(255,155,61,.24);
}
.achievement-card-elite b .ui-svg { width: 15px; height: 15px; }
.achievement-card-elite.locked {
  filter: grayscale(.85);
  opacity: .62;
  border-color: rgba(255,255,255,.10);
}
.achievement-card-elite.locked .achievement-state { color: var(--elite-muted); }

.identity-access-card { padding: 14px; }
.identity-access-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.identity-access-grid article {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.identity-access-grid article > span:first-child {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}
.identity-access-grid .platform-svg,
.identity-access-grid .ui-svg { width: 21px; height: 21px; }
.identity-access-grid strong,
.identity-access-grid small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.identity-access-grid strong { color: var(--elite-text); font-size: 13px; }
.identity-access-grid small { color: var(--elite-muted); font-size: 11px; margin-top: 2px; }
.identity-access-grid b {
  color: var(--elite-orange-2);
  font-size: 11px;
}
.identity-access-grid b.ok { color: var(--elite-green); }
.avatar-source-inline { grid-template-columns: 40px minmax(0, 1fr) minmax(142px, auto) !important; }
.mini-segment {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(5,9,24,.55);
}
.mini-segment button {
  min-height: 26px;
  border: 0;
  border-radius: 999px;
  padding: 0 8px;
  background: transparent;
  color: var(--elite-muted);
  font-size: 10px;
  font-weight: 850;
}
.mini-segment button.active {
  color: #120802;
  background: linear-gradient(135deg, #ffbd73, #ff7a1f);
}
.avatar-source-select-wrap {
  min-width: 0;
  display: block;
}
.avatar-source-select {
  width: 100%;
  min-height: 36px;
  border: 1px solid rgba(255,155,61,.24);
  border-radius: 999px;
  padding: 0 34px 0 12px;
  color: var(--elite-text);
  background: linear-gradient(135deg, rgba(255,155,61,.16), rgba(255,255,255,.045));
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  outline: 0;
}
.avatar-source-select option {
  color: #080b18;
  background: #fff;
}

.profile-overview-elite,
.edit-profile-studio,
.profile-social-elite,
.profile-access-elite,
.analytics-elite-page.embedded {
  display: grid;
  gap: 12px;
}
.profile-field-stack {
  display: grid;
  gap: 10px;
}
.profile-field-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.profile-field-row > span:first-child {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}
.profile-field-row .ui-svg,
.profile-field-row .platform-svg { width: 21px; height: 21px; }
.profile-field-row small,
.profile-field-row strong,
.profile-field-row em {
  display: block;
  min-width: 0;
}
.profile-field-row small {
  color: var(--elite-muted);
  font-size: 11px;
}
.profile-field-row strong {
  color: var(--elite-text);
  font-size: 16px;
  margin-top: 2px;
}
.profile-field-row em {
  color: var(--elite-muted);
  font-style: normal;
  font-size: 11px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.profile-field-row.bio-row {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
}
.profile-field-row textarea,
.ai-banner-studio-card input,
.settings-inline-panel input,
.settings-inline-panel textarea,
.delta-bridge-card input,
.telegram-link-card input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  background: rgba(3,7,20,.48) !important;
  color: var(--elite-text) !important;
  font: inherit;
  padding: 11px 12px !important;
}
.profile-field-row textarea {
  min-height: 72px;
  margin-top: 6px;
  resize: vertical;
}
.ai-banner-studio-card { padding: 14px; }
.ai-banner-studio-card p {
  margin: 4px 0 12px;
  color: var(--elite-muted);
}
.banner-prompt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.profile-banner-upload {
  margin-top: 10px;
  display: inline-flex;
}
.theme-color-orbs {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.theme-color-orbs span {
  color: var(--elite-text);
  font-weight: 850;
}
.theme-color-orbs button,
.theme-color-orbs input[type="color"] {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.12);
  padding: 0;
  box-shadow: 0 0 18px rgba(255,255,255,.10);
}
.theme-color-orbs button.active { outline: 2px solid var(--elite-orange-2); outline-offset: 3px; }
.orb-orange { background: #ff9b3d; }
.orb-blue { background: #4ea1ff; }
.orb-purple { background: #8b5cf6; }
.orb-cyan { background: #35d6ff; }
.orb-pink { background: #ff4fd8; }
.theme-color-orbs input[type="color"] {
  background: transparent;
  overflow: hidden;
}
.premium-toggle-card {
  min-height: 74px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 62px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.premium-toggle-card > span:first-child {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}
.premium-toggle-card strong { color: var(--elite-text); }
.premium-toggle-card small { color: var(--elite-muted); display: block; margin-top: 2px; }
.premium-toggle-card input { position: absolute; opacity: 0; pointer-events: none; }
.premium-toggle-card i {
  position: relative;
  width: 58px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.premium-toggle-card i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  transition: transform .18s ease;
}
.premium-toggle-card input:checked + i {
  background: linear-gradient(135deg, #ffbd73, #ff7a1f);
}
.premium-toggle-card input:checked + i::after {
  transform: translateX(24px);
}
.connected-social-links-card { padding: 14px; }
.connected-link-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
.connected-link-row {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 38px minmax(94px, .9fr) minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  color: var(--elite-text);
  padding: 7px 9px;
}
.connected-link-row strong,
.connected-link-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connected-link-row small { color: var(--elite-muted); font-size: 12px; }
.connected-link-row em { color: var(--elite-green); font-style: normal; font-size: 11px; font-weight: 850; white-space: nowrap; }
.connected-link-row:not(.connected) em { color: var(--elite-orange-2); }

.settings-hero-card,
.leaderboard-hero-card {
  min-height: 144px;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-color: rgba(255,155,61,.34);
}
.settings-hero-icon,
.leaderboard-hero-icon {
  width: 96px;
  height: 96px;
  border-radius: 30px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background: radial-gradient(circle, rgba(255,155,61,.28), rgba(255,155,61,.06));
  box-shadow: 0 0 32px rgba(255,155,61,.24);
}
.settings-hero-icon .ui-svg,
.leaderboard-hero-icon .ui-svg { width: 54px; height: 54px; }
.settings-hero-card h2,
.leaderboard-hero-card h2 {
  margin: 0;
  color: var(--elite-text);
  font-size: 24px;
}
.settings-hero-card p,
.leaderboard-hero-card p {
  margin: 6px 0 0;
  color: var(--elite-muted);
  font-size: 15px;
  line-height: 1.35;
}
.settings-hero-card > button,
.leaderboard-hero-card > button {
  width: auto;
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgba(255,155,61,.28);
  border-radius: 999px;
  background: rgba(255,155,61,.10);
  color: var(--elite-orange-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  font-weight: 900;
}
.settings-row {
  width: 100%;
  min-width: 0;
  min-height: 74px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto 22px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 11px 0;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row-icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.05);
}
.settings-row-icon .ui-svg,
.settings-row-icon .platform-svg { width: 26px; height: 26px; }
.settings-row-icon.gold { color: var(--elite-orange-2); box-shadow: inset 0 0 0 1px rgba(255,155,61,.24); }
.settings-row-icon.blue { color: var(--elite-blue); box-shadow: inset 0 0 0 1px rgba(78,161,255,.20); }
.settings-row-icon.cyan { color: var(--elite-cyan); box-shadow: inset 0 0 0 1px rgba(53,214,255,.20); }
.settings-row-icon.purple { color: var(--elite-purple); box-shadow: inset 0 0 0 1px rgba(139,92,246,.24); }
.settings-row-icon.green { color: var(--elite-green); box-shadow: inset 0 0 0 1px rgba(49,217,139,.22); }
.settings-row-icon.orange { color: #ff765e; box-shadow: inset 0 0 0 1px rgba(255,118,94,.22); }
.settings-row-icon.pink { color: var(--elite-pink); box-shadow: inset 0 0 0 1px rgba(255,79,216,.22); }
.settings-row-icon .logo-mark { width: 36px; height: 36px; }
.settings-row strong,
.settings-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-row strong { color: var(--elite-text); font-size: 18px; }
.settings-row small { color: var(--elite-muted); margin-top: 3px; font-size: 13px; }
.settings-row em {
  color: var(--elite-green);
  font-style: normal;
  font-size: 11px;
  font-weight: 850;
}
.settings-row > i { color: var(--elite-muted); display: grid; place-items: center; }
.settings-row > i .ui-svg { width: 18px; height: 18px; }
.avatar-settings-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
.settings-inline-panel h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--elite-text);
}
.settings-inline-panel h3 .ui-svg { color: var(--elite-orange-2); }
.account-exit-panel {
  display: flex;
  justify-content: center;
}

.analytics-overview-card {
  padding: 18px;
  border-color: rgba(255,155,61,.34);
}
.analytics-overview-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.analytics-overview-head h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--elite-text);
  font-size: 22px;
}
.analytics-overview-head h2 .ui-svg { color: var(--elite-orange-2); }
.analytics-overview-head > strong {
  color: var(--elite-green);
  font-size: 23px;
  line-height: 1;
  text-align: right;
}
.analytics-overview-head > strong small {
  display: block;
  color: var(--elite-muted);
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}
.creator-score-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--elite-muted);
  font-size: 12px;
}
.creator-score-pills b,
.creator-score-pills em {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--elite-orange-2);
  font-style: normal;
}
.analytics-chart-grid {
  height: 238px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
  margin-top: 20px;
  padding: 14px 4px 0;
  border-top: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, transparent 24%, rgba(255,255,255,.05) 25%, transparent 26%),
    linear-gradient(180deg, transparent 49%, rgba(255,255,255,.05) 50%, transparent 51%),
    linear-gradient(180deg, transparent 74%, rgba(255,255,255,.05) 75%, transparent 76%);
}
.analytics-chart-grid span {
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 24px;
  align-items: end;
  justify-items: center;
  gap: 7px;
}
.analytics-chart-grid i {
  width: min(42px, 72%);
  height: var(--bar-height, 52%);
  border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, #ffba6b, rgba(255,122,31,.26) 68%, rgba(78,161,255,.20));
  border: 1px solid rgba(255,184,106,.60);
  box-shadow: 0 0 20px rgba(255,155,61,.28);
}
.analytics-chart-grid b {
  color: var(--elite-muted);
  font-size: 12px;
}
.analytics-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.analytics-metric-grid article {
  min-height: 136px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-content: center;
  gap: 4px 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
}
.analytics-metric-grid article > span {
  grid-row: 1 / 4;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}
.analytics-metric-grid .ui-svg { width: 28px; height: 28px; }
.analytics-metric-grid small { color: var(--elite-muted); font-size: 14px; }
.analytics-metric-grid strong { color: var(--elite-text); font-size: 30px; line-height: 1; }
.analytics-metric-grid em { color: var(--elite-green); font-style: normal; font-size: 12px; }
.metric-blue { border-color: rgba(78,161,255,.28) !important; }
.metric-blue > span { color: var(--elite-blue) !important; background: rgba(78,161,255,.12) !important; }
.metric-pink { border-color: rgba(255,79,216,.25) !important; }
.metric-pink > span { color: #ff6fa8 !important; background: rgba(255,79,216,.12) !important; }
.metric-green { border-color: rgba(49,217,139,.24) !important; }
.metric-green > span { color: var(--elite-green) !important; background: rgba(49,217,139,.10) !important; }
.top-performing-posts-elite { border-color: rgba(255,155,61,.24); }
.analytics-post-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.analytics-post-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px 54px 160px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
}
.analytics-post-rank {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--elite-orange-2);
  border: 1px solid rgba(255,155,61,.30);
  font-weight: 950;
}
.analytics-post-platform {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
}
.analytics-post-platform .platform-svg { width: 28px; height: 28px; }
.analytics-post-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: radial-gradient(circle, rgba(255,155,61,.28), rgba(7,10,24,.92));
}
.analytics-post-thumb img,
.analytics-post-thumb i { width: 100%; height: 100%; display: block; object-fit: cover; }
.analytics-post-copy { min-width: 0; display: grid; gap: 10px; }
.analytics-post-copy strong {
  color: var(--elite-text);
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.analytics-post-copy div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--elite-muted);
  font-size: 12px;
}
.analytics-post-copy div span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.analytics-post-copy .ui-svg { width: 15px; height: 15px; }
.post-score-ring {
  width: 68px;
  height: 68px;
  justify-self: end;
}
.post-score-ring strong { color: var(--elite-text); font-size: 23px; line-height: 1; }
.post-score-ring small { color: var(--elite-orange-2); font-size: 10px; }
.analytics-full-cta {
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 1px solid rgba(255,155,61,.24);
  border-radius: 16px;
  background: rgba(255,155,61,.08);
  color: var(--elite-orange-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 900;
}
.stats-support-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  padding: 14px;
}
.stats-support-grid article {
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}
.stats-support-grid .ui-svg { width: 22px; height: 22px; color: var(--elite-orange-2); }
.stats-support-grid strong { color: var(--elite-text); font-size: 22px; }
.stats-support-grid small { color: var(--elite-muted); font-size: 11px; }

.leaderboard-tabs { margin-top: 0; }
.leaderboard-cycle-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.leaderboard-cycle-tabs button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: var(--elite-muted);
  font-weight: 850;
}
.leaderboard-cycle-tabs button.active {
  color: var(--elite-orange-2);
  border-color: rgba(255,155,61,.28);
  background: rgba(255,155,61,.10);
}
.elite-lb-list {
  display: grid;
  gap: 8px;
}
.elite-lb-row {
  width: 100%;
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 38px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.032);
  color: inherit;
  text-align: left;
}
.elite-lb-row.rank-1,
.elite-lb-row.rank-2,
.elite-lb-row.rank-3 {
  border-color: rgba(255,155,61,.22);
  background:
    radial-gradient(circle at 0% 50%, rgba(255,155,61,.10), transparent 44%),
    rgba(255,255,255,.035);
}
.elite-lb-rank {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
  border: 1px solid rgba(255,155,61,.25);
  font-weight: 950;
}
.elite-lb-name {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.elite-lb-name strong,
.elite-lb-name small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elite-lb-name strong { color: var(--elite-text); font-size: 14px; }
.elite-lb-name small { color: var(--elite-muted); font-size: 11px; }
.elite-lb-pts {
  color: var(--elite-orange-2);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}
.elite-lb-row .top-avatar.small {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}
.leaderboard-hero-card .ui-svg { width: 18px; height: 18px; }

.elite-public-post {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 0%, rgba(255,155,61,.08), transparent 28%),
    linear-gradient(180deg, rgba(16,25,55,.78), rgba(9,14,34,.84));
  overflow: hidden;
  box-shadow: var(--elite-shadow);
}
.elite-public-post .feed-author-row { padding: 12px 12px 0; }
.elite-public-post .feed-post-body {
  padding: 10px 12px;
  color: var(--elite-text);
  font-size: 14px;
  line-height: 1.42;
}
.elite-public-post .feed-post-image {
  width: calc(100% - 24px);
  margin: 0 12px 10px;
  border-radius: 16px;
  max-height: 280px;
  object-fit: cover;
}
.public-post-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
  color: var(--elite-muted);
}
.public-post-metrics span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
}
.public-post-metrics .ui-svg { width: 16px; height: 16px; }
.elite-public-post .feed-external-link {
  margin: 0 12px 12px auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.drawer-nav .nav-ico,
.sidebar-nav .nav-ico {
  display: inline-grid;
  place-items: center;
}
.drawer-nav .nav-ico .ui-svg,
.drawer-nav .nav-ico .platform-svg,
.sidebar-nav .nav-ico .ui-svg,
.sidebar-nav .nav-ico .platform-svg,
.footer-action-btn .ui-svg {
  width: 19px;
  height: 19px;
}
.drawer-nav .chevron .ui-svg,
.sidebar-nav .chevron .ui-svg { width: 14px; height: 14px; }

@media (max-width: 700px) {
  .profile-screen-topbar {
    grid-template-columns: 48px minmax(0,1fr) auto;
    min-height: 58px;
  }
  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: 0;
    padding: 118px 14px 14px;
    border-radius: 22px;
  }
  .public-profile-banner-art,
  .own-profile-banner-mark { height: 152px; }
  .profile-emblem-orb,
  .own-profile-banner-mark .logo-mark {
    width: 60px;
    height: 60px;
    top: 18px;
  }
  .profile-emblem-orb .logo-mark { width: 58px; height: 58px; }
  .public-profile-main,
  .own-profile-identity {
    grid-template-columns: 88px minmax(0,1fr);
    gap: 12px;
  }
  .public-profile-avatar-wrap {
    width: 88px;
    height: 88px;
  }
  .public-profile-identity h2,
  .own-profile-identity h2 {
    font-size: 22px;
  }
  .identity-pill {
    min-height: 25px;
    max-width: 148px;
    padding: 4px 7px;
    font-size: 9.5px;
  }
  .identity-pill.did-pill {
    max-width: 100%;
  }
  .profile-stat-strip {
    gap: 6px;
    padding: 8px;
    border-radius: 16px;
  }
  .profile-stat-strip strong { font-size: 16px; }
  .profile-stat-strip small { font-size: 9px; }
  .profile-stat-strip .ui-svg { width: 17px; height: 17px; }
  .creator-power-card {
    grid-template-columns: minmax(0,1fr) 104px;
    gap: 10px;
    padding: 12px;
  }
  .creator-power-copy { grid-column: 1 / -1; }
  .creator-score-orb {
    width: 98px;
    height: 98px;
  }
  .creator-score-orb strong { font-size: 30px; }
  .achievement-showcase-row {
    grid-template-columns: repeat(4, minmax(74px, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }
  .showcase-badge-card {
    min-height: 102px;
    padding: 8px;
  }
  .badge-medal,
  .achievement-art {
    width: 48px;
    height: 48px;
    border-radius: 16px;
  }
  .showcase-badge-card strong { font-size: 11.5px; }
  .showcase-badge-card small { font-size: 9px; }
  .identity-access-grid {
    grid-template-columns: 1fr;
  }
  .avatar-source-inline { grid-template-columns: 40px minmax(0,1fr) !important; }
  .avatar-source-inline .mini-segment { grid-column: 1 / -1; justify-self: stretch; }
  .avatar-source-inline .avatar-source-select-wrap {
    grid-column: 1 / -1;
  }
  .mini-segment { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .achievement-progress-card {
    grid-template-columns: minmax(0,1fr) 96px;
  }
  .achievement-progress-card p { font-size: 20px; }
  .achievement-progress-card p strong { font-size: 36px; }
  .achievement-progress-ring {
    width: 88px;
    height: 88px;
  }
  .achievement-progress-ring strong { font-size: 25px; }
  .achievement-grid-elite {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .achievement-card-elite {
    min-height: 164px;
    border-radius: 17px;
    padding: 12px 8px;
  }
  .achievement-card-elite strong { font-size: 13px; }
  .achievement-card-elite small { font-size: 10.5px; }
  .achievement-card-elite b {
    min-width: 66px;
    min-height: 29px;
  }
  .banner-prompt-row {
    grid-template-columns: 1fr;
  }
  .connected-link-row {
    grid-template-columns: 36px minmax(80px,.8fr) minmax(0,1fr) auto;
  }
  .connected-link-row > i { display: none; }
  .settings-hero-card,
  .leaderboard-hero-card {
    grid-template-columns: 74px minmax(0, 1fr) auto;
    min-height: 116px;
    padding: 14px;
    border-radius: 22px;
  }
  .settings-hero-icon,
  .leaderboard-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
  }
  .settings-hero-icon .ui-svg,
  .leaderboard-hero-icon .ui-svg {
    width: 36px;
    height: 36px;
  }
  .settings-hero-card h2,
  .leaderboard-hero-card h2 {
    font-size: 20px;
  }
  .settings-hero-card p,
  .leaderboard-hero-card p {
    font-size: 12.5px;
  }
  .settings-row {
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    min-height: 66px;
    gap: 10px;
  }
  .settings-row em { display: none; }
  .settings-row-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .settings-row strong { font-size: 16px; }
  .settings-row small { font-size: 12px; }
  .avatar-settings-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .avatar-settings-row .mini-segment {
    grid-column: 1 / -1;
  }
  .avatar-settings-row .avatar-source-select-wrap {
    grid-column: 1 / -1;
  }
  .analytics-overview-card { padding: 14px; }
  .analytics-overview-head h2 { font-size: 20px; }
  .analytics-overview-head > strong { font-size: 19px; }
  .analytics-chart-grid {
    height: 210px;
    gap: 7px;
  }
  .analytics-chart-grid i { width: min(34px, 78%); }
  .analytics-metric-grid {
    gap: 10px;
  }
  .analytics-metric-grid article {
    min-height: 116px;
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 12px;
  }
  .analytics-metric-grid article > span {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }
  .analytics-metric-grid .ui-svg { width: 22px; height: 22px; }
  .analytics-metric-grid small { font-size: 12px; }
  .analytics-metric-grid strong { font-size: 25px; }
  .analytics-post-row {
    grid-template-columns: 30px 38px 88px minmax(0,1fr) 56px;
    gap: 7px;
    padding: 8px;
  }
  .analytics-post-rank {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }
  .analytics-post-platform {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }
  .analytics-post-platform .platform-svg {
    width: 22px;
    height: 22px;
  }
  .analytics-post-copy strong {
    font-size: 12.5px;
    -webkit-line-clamp: 2;
  }
  .analytics-post-copy div {
    gap: 7px;
    font-size: 10px;
  }
  .post-score-ring {
    width: 52px;
    height: 52px;
  }
  .post-score-ring strong { font-size: 18px; }
  .post-score-ring small { font-size: 8px; }
  .stats-support-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }
  .stats-support-grid strong { font-size: 17px; }
  .stats-support-grid small { font-size: 9px; }
  .elite-lb-row {
    grid-template-columns: 32px 40px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 62px;
  }
  .elite-lb-row .top-avatar.small {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .elite-lb-name strong { font-size: 13px; }
  .elite-lb-name small { font-size: 10px; }
  .elite-lb-pts { font-size: 12px; }
}

@media (max-width: 430px) {
  .public-profile-elite-page,
  .own-profile-elite-page,
  .settings-elite-page,
  .analytics-elite-page,
  .leaderboards-elite-page {
    gap: 10px;
  }
  .profile-screen-topbar h1 { font-size: 18px; }
  .profile-glass-icon,
  .date-range-pill {
    min-width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .date-range-pill { padding: 0 9px; font-size: 11px; }
  .public-profile-main,
  .own-profile-identity {
    grid-template-columns: 78px minmax(0,1fr);
    gap: 10px;
  }
  .public-profile-avatar-wrap {
    width: 78px;
    height: 78px;
  }
  .profile-online-dot {
    width: 18px;
    height: 18px;
    border-width: 3px;
  }
  .public-profile-identity h2,
  .own-profile-identity h2 {
    font-size: 19px;
  }
  .identity-pill-row {
    gap: 5px;
  }
  .identity-pill {
    max-width: 126px;
    font-size: 9px;
  }
  .profile-primary-action,
  .profile-secondary-action,
  .profile-save-action {
    min-height: 42px;
    border-radius: 14px;
    font-size: 12px;
  }
  .profile-stat-strip {
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
  .profile-stat-strip strong { font-size: 14px; }
  .profile-stat-strip small { font-size: 8.5px; }
  .elite-profile-tabs {
    grid-auto-columns: minmax(92px, 1fr);
  }
  .elite-profile-tabs button {
    min-height: 38px;
    font-size: 12px;
  }
  .achievement-grid-elite {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .achievement-card-elite {
    min-height: 158px;
  }
  .settings-row {
    min-height: 62px;
  }
  .analytics-post-row {
    grid-template-columns: 28px 36px minmax(0, 1fr) 52px;
  }
  .analytics-post-thumb {
    display: none;
  }
  .analytics-metric-grid article {
    min-height: 108px;
  }
  .analytics-metric-grid strong { font-size: 22px; }
  .leaderboard-hero-card > button {
    display: none;
  }
}

body.dark {
  --bg:        #07091a;
  --bg-2:      #0f1230;
  --bg-3:      #161a3a;
  --fg:        #e8eeff;
  --fg-2:      #b8c2e2;
  --fg-muted:  #7a85aa;
  --tile-bd:   rgba(255,255,255,0.06);
  --shadow:    0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
  --shadow-h:  0 8px 32px rgba(255,133,52,0.25);
  --glass:     rgba(20,25,55,0.5);
}

@media (prefers-color-scheme: dark) {
  body:not(.light) {
    --bg:        #07091a;
    --bg-2:      #0f1230;
    --bg-3:      #161a3a;
    --fg:        #e8eeff;
    --fg-2:      #b8c2e2;
    --fg-muted:  #7a85aa;
    --tile-bd:   rgba(255,255,255,0.06);
    --shadow:    0 1px 3px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
    --shadow-h:  0 8px 32px rgba(255,133,52,0.25);
    --glass:     rgba(20,25,55,0.5);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[x-cloak] { display: none !important; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--fg);
  background: var(--bg);
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.muted { color: var(--fg-muted); }
.small { font-size: 12px; }

/* ── Auth gate ───────────────────────────────────────────────── */
.auth-gate {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 20px;
}
.auth-gate::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, var(--orange-glow), transparent 60%),
              radial-gradient(circle at 80% 80%, var(--orange-glow), transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}
.auth-card {
  background: var(--bg-2);
  border: 1px solid var(--tile-bd);
  border-radius: 24px;
  padding: 36px 28px;
  max-width: 420px; width: 100%;
  text-align: center;
  box-shadow: var(--shadow-h);
  position: relative; z-index: 1;
}
.auth-logo { width: 72px; height: 72px; margin: 0 auto 18px; }
.auth-card h1 { font-size: 24px; margin: 8px 0; }
.auth-card p { color: var(--fg-2); font-size: 14px; line-height: 1.6; margin: 8px 0; }
.auth-card p.muted { font-size: 13px; color: var(--fg-muted); }
.auth-card p.small { font-size: 11px; opacity: 0.6; }
/* Loading spinner */
.spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,133,52,0.2);
  border-top-color: #ff8534;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-primary {
  background: var(--grad-accent); color: #0a0e1d; border: none;
  padding: 14px 28px; border-radius: 14px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 16px var(--orange-glow);
  transition: transform 0.15s;
}
.btn-primary.big { width: 100%; margin-top: 18px; padding: 16px; font-size: 16px; }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost {
  background: transparent; border: 1px solid var(--tile-bd);
  color: var(--fg-muted); padding: 8px 16px; border-radius: 10px;
  font-size: 12px; margin-top: 10px;
}

/* ── Header ──────────────────────────────────────────────────── */
.hdr {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  /* padding-top: calc(14px + env(safe-area-inset-top)); */
  background: var(--bg);
  border-bottom: 1px solid var(--tile-bd);
  position: sticky; top: 0; z-index: 100;
}
.ham {
  background: var(--bg-2); border: 1px solid var(--tile-bd); border-radius: 12px;
  width: 40px; height: 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; padding: 0;
}
.ham span { display: block; width: 18px; height: 2px; background: var(--fg); border-radius: 1px; }
.hdr-brand {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.logo-mark {
  width: 36px; height: 36px;
  background: var(--grad-accent);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px var(--orange-glow);
  flex-shrink: 0;
  position: relative;
}
.logo-mark::after {
  content: "△";
  font-size: 18px; font-weight: 900;
  color: #0a0e1d;
}
/* v0.62/v0.63: when applyBranding() injects a custom logo, hide the
   default triangle and gradient, and let the inner <img.brand-logo-img>
   fill the box. JS appends an <img> child — CSS just hides the ::after
   and removes the orange gradient. */
.logo-mark.has-custom-logo {
  background: var(--bg-3) !important;
  box-shadow: none;
  overflow: hidden;
  padding: 0;
}
.logo-mark.has-custom-logo::after { content: "" !important; display: none; }
.logo-mark .brand-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}
.logo-mark {
  border-radius: 999px;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.60), transparent 14%),
    radial-gradient(circle at 70% 76%, rgba(255,122,31,.32), transparent 24%),
    conic-gradient(from 210deg, #6f2c08, #ffcf6e, #ff7a1f, #7d3109, #ffcf6e, #6f2c08);
  box-shadow: 0 0 0 1px rgba(255, 205, 110, .55), 0 4px 14px rgba(255, 133, 52, .35);
}
.logo-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 66%;
  height: 60%;
  transform: translate(-50%, -48%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(145deg, #ffd983, #ff982f 58%, #8a3308);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 0 10px rgba(255,155,61,.36);
}
.logo-mark::after {
  content: "δ";
  position: relative;
  z-index: 1;
  color: #075f2a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,.36);
}
.logo-mark.has-custom-logo::before {
  display: none;
}
.brand-title {
  font-weight: 700; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-title .sparkle { color: var(--orange); }
.brand-sub {
  font-size: 11px; color: var(--fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-actions { display: flex; gap: 10px; align-items: center; }
.theme-toggle {
  background: var(--bg-2); border: 1px solid var(--tile-bd); border-radius: 10px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; padding: 0;
}
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--grad-accent); border: 2px solid var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  color: #0a0e1d; font-weight: 800; font-size: 16px;
  cursor: pointer; padding: 0; overflow: hidden;
  box-shadow: 0 2px 8px var(--orange-glow);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
img[data-broken] { display: none !important; }
img[data-broken] + span { display: flex !important; }

/* ── Side drawer ─────────────────────────────────────────────── */
.drawer { z-index: 200; }
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
}
.drawer-panel {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(82vw, 320px);
  background: var(--bg-2);
  border-right: 1px solid var(--tile-bd);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 201;
  display: flex; flex-direction: column;
  box-shadow: 8px 0 32px rgba(0,0,0,0.2);
  /* padding-top: env(safe-area-inset-top); */
}
.drawer.open .drawer-panel { transform: translateX(0); }
.drawer-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--tile-bd);
}
.brand-mini { display: flex; align-items: center; gap: 12px; }
.drawer-hdr .x {
  background: transparent; border: none; font-size: 18px; color: var(--fg-muted);
  width: 32px; height: 32px;
}
.drawer-nav {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; padding: 12px 0;
}
.drawer-nav button {
  background: transparent; border: none; color: var(--fg);
  padding: 14px 22px;
  text-align: left;
  font-size: 15px; font-weight: 500;
  display: flex; align-items: center; gap: 14px;
  border-radius: 0;
}
.drawer-nav button:hover { background: var(--bg-3); }
.drawer-nav button:active { background: var(--tile-bd); }
.drawer-nav .nav-ico { font-size: 18px; width: 24px; text-align: center; }
.drawer-nav hr { border: none; border-top: 1px solid var(--tile-bd); margin: 8px 0; }
.drawer-nav .nav-admin { color: var(--orange); font-weight: 600; }
.drawer-nav .nav-danger { color: #e85a5a; }

/* ── Main ────────────────────────────────────────────────────── */
main { padding: 16px; max-width: 1200px; width: 100%; box-sizing: border-box; margin: 0 auto; }
main.chatting { padding: 0; max-width: 100%; }
.home > * { margin-bottom: 14px; }

/* ── Hero card ───────────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(135deg, #0d1023 0%, #1a1f3d 100%);
  color: #e8eeff;
  border: 1px solid rgba(255,133,52,0.25);
  border-radius: 22px;
  padding: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}
body.light .hero {
  background: linear-gradient(135deg, #1a1f3d 0%, #2a3055 100%);
}
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 50%, var(--orange-glow), transparent 60%);
  pointer-events: none;
}
.hero-mascot {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
}
.hero-mascot svg {
  width: 100%; max-width: 200px; height: auto;
  filter: drop-shadow(0 8px 24px var(--orange-glow));
  animation: floaty 4s ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}
.hero-content { position: relative; z-index: 1; }
.hero-badge {
  display: inline-block;
  background: rgba(255,133,52,0.18);
  border: 1px solid rgba(255,133,52,0.4);
  color: var(--orange-2);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.hero-title {
  font-size: 28px; font-weight: 800;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #e8eeff;
}
.hero-title .accent {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-desc {
  color: #b8c2e2; font-size: 13px;
  margin: 0 0 12px;
}
.hero-features {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: grid; gap: 6px;
}
.hero-features li {
  display: flex; align-items: center; gap: 8px;
  color: #d8dfff; font-size: 13px;
}
.hero-features .dot {
  color: var(--orange-2); font-size: 14px; width: 18px;
}

/* AI input bar (inside hero) */
/* v0.57: tightened so it doesn't visually touch the hero's right edge
   on narrow Android webview. Outer glow reduced from 4px → 2px. */
.ai-input-bar {
  display: flex; align-items: center; gap: 8px;
  background: rgba(10,14,29,0.7);
  border: 1px solid rgba(255,133,52,0.3);
  border-radius: 999px;
  padding: 6px 6px 6px 10px;
  box-shadow: 0 0 0 2px rgba(255,133,52,0.08);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
.ai-pill {
  background: var(--grad-accent);
  color: #0a0e1d;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 12px;
  box-shadow: 0 0 12px var(--orange-glow);
  flex-shrink: 0;
}
.ai-input-bar input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #e8eeff;
  font-size: 11px;
  padding: 6px 4px;
  min-width: 0;
  width: 100%;
}
.ai-input-bar input::placeholder { color: rgba(232,238,255,0.5);font-size: 11px; }
body.light .ai-input-bar {
  background: rgba(255,255,255,0.94);
  border-color: rgba(255,133,52,0.32);
}
body.light .ai-input-bar input {
  color: #18213a;
}
body.light .ai-input-bar input::placeholder {
  color: rgba(44,53,84,0.62);
}
.ai-send {
  background: var(--grad-accent);
  color: #0a0e1d;
  border: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--orange-glow);
}
.ai-send:disabled { opacity: 0.4; box-shadow: none; }
.ai-send svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; padding: 20px; }
  .hero-mascot { order: 0; max-height: 180px; }
  .hero-mascot svg { max-width: 140px; }
  .hero-content { order: 1; }
  .hero-title { font-size: 24px; }
}

/* ── Stats row ───────────────────────────────────────────────── */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.stat {
  background: var(--bg-2);
  border: 1px solid var(--tile-bd);
  border-radius: 14px;
  padding: 12px;
  display: flex; align-items: center; gap: 10px;
}
.stat-ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  background: rgba(255,133,52,0.12);
  color: var(--orange);
  flex-shrink: 0;
}
.ico-bolt    { background: rgba(255,200,80,0.15); color: #ffcc55; }
.ico-groups  { background: rgba(125,140,255,0.15); color: #7d8cff; }
.ico-shield  { background: rgba(82,200,140,0.15); color: #52c88c; }
.stat-num { font-size: 15px; font-weight: 800; line-height: 1.1; }
.stat-lbl { font-size: 11px; color: var(--fg-muted); }

@media (max-width: 640px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 10px; }
  .stat-num { font-size: 14px; }
}

/* ── Tile grid ───────────────────────────────────────────────── */
.tile-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.tile {
  background: var(--bg-2);
  border: 1px solid var(--tile-bd);
  border-radius: 18px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  font: inherit; color: var(--fg);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 160px;
  overflow: hidden;
}
.tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255,133,52,0.3);
  box-shadow: var(--shadow-h);
}
.tile:active { transform: scale(0.98); }
.tile-illustration {
  font-size: 32px;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,133,52,0.15), rgba(255,177,105,0.05));
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.tile h3 { margin: 0; font-size: 17px; font-weight: 700; }
.tile p { margin: 0; font-size: 12px; color: var(--fg-muted); line-height: 1.45; }
.tile-cta {
  margin-top: auto;
  font-size: 13px; font-weight: 600; color: var(--orange);
  display: inline-flex; align-items: center; gap: 4px;
}
.tile-badge {
  position: absolute; top: 14px; right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
}
.tile-badge.live { background: rgba(82,200,140,0.18); color: #52c88c; border: 1px solid rgba(82,200,140,0.3); }
.tile-badge.new  { background: rgba(125,140,255,0.18); color: #7d8cff; border: 1px solid rgba(125,140,255,0.3); }

/* Quiz tile — purple gradient */
.quiz-tile {
  background: linear-gradient(135deg, #2a1d5e 0%, #4d2b8a 100%);
  border-color: rgba(120,80,200,0.3);
  color: #f0e8ff;
}
.quiz-tile h3, .quiz-tile p { color: #f0e8ff; }
.quiz-tile p { color: #c4b8e8; }
.quiz-tile .tile-illustration {
  background: linear-gradient(135deg, rgba(255,200,100,0.3), rgba(255,150,50,0.2));
}
.quiz-tile .tile-cta {
  color: #ffd28a;
  background: rgba(255,133,52,0.2);
  padding: 8px 16px;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: auto;
}

/* Leaderboard tile */
.leader-tile {
  display: flex; flex-direction: column; padding: 18px;
}
.leader-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px;
}
.leader-tile h3 { margin: 0; }
.tile-meta { font-size: 11px; color: var(--orange); font-weight: 600; }
.leader-podium {
  display: flex; justify-content: space-around; align-items: flex-end;
  margin: 14px 0 10px;
  min-height: 80px;
}
.podium-slot { text-align: center; opacity: 0.95; }
.podium-rank {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--fg);
  font-size: 11px; font-weight: 800;
  line-height: 22px;
  margin-bottom: -10px;
  position: relative; z-index: 2;
}
.podium-slot.rank-1 .podium-rank { background: linear-gradient(135deg,#ffd700,#ffa500); color: #0a0e1d; box-shadow: 0 0 12px rgba(255,215,0,0.5); }
.podium-slot.rank-2 .podium-rank { background: linear-gradient(135deg,#c0c0c0,#808080); color: #0a0e1d; }
.podium-slot.rank-3 .podium-rank { background: linear-gradient(135deg,#cd7f32,#8b4513); color: #fff; }
.podium-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-accent);
  color: #0a0e1d;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  border: 2px solid var(--bg-2);
  overflow: hidden;
  margin: 0 auto 4px;
}
.podium-avatar img { width: 100%; height: 100%; object-fit: cover; }
.podium-slot.rank-1 .podium-avatar { transform: scale(1.15); border-color: #ffd700; }
.podium-name { font-size: 11px; font-weight: 600; }
.podium-pts { font-size: 11px; color: var(--orange); font-weight: 700; }
.leader-tile .tile-cta { margin-top: auto; }

@media (max-width: 640px) {
  .x-replyon-actions {
    align-items: stretch;
  }
  .x-replyon-actions .chip,
  .x-replyon-delete-action {
    min-height: 44px;
  }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tile {
    min-width: 0;
    min-height: 154px;
    padding: 12px;
    gap: 5px;
  }
  .tile-illustration {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    font-size: 23px;
  }
  .tile h3 { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
  .tile p {
    font-size: 10px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .tile-cta { font-size: 11px; }
  .tile-badge { top: 8px; right: 8px; padding: 3px 6px; font-size: 8px; }
  .quiz-tile .tile-cta { padding: 6px 9px; }
}

/* ── Chat view ───────────────────────────────────────────────── */
.chat {
  padding: 0 16px 80px;
  max-width: 800px; margin: 0 auto;
}
.chat-msgs {
  display: flex; flex-direction: column;
  padding: 12px 0;
  overflow-y: auto;
}
.msg {
  display: flex; flex-direction: column;
  margin: 6px 0; max-width: 86%;
}
.msg.user { align-items: flex-end; margin-left: auto; }
.msg.assistant { align-items: flex-start; }
.bubble {
  padding: 10px 14px;
  border-radius: 18px;
  word-wrap: break-word;
  white-space: pre-wrap;
  line-height: 1.45;
}
.msg.user .bubble {
  background: var(--grad-accent); color: #0a0e1d;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.msg.assistant .bubble {
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--tile-bd);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow);
}
.bubble b { font-weight: 700; }
.bubble code { background: rgba(127,127,127,0.18); padding: 2px 5px; border-radius: 4px; font-size: 0.92em; }
.bubble a { color: var(--orange); text-decoration: none; }
.msg-time { font-size: 10px; color: var(--fg-muted); margin: 2px 8px; }
.bubble.typing { display: flex; gap: 4px; align-items: center; min-height: 18px; }
.bubble.typing span { width: 6px; height: 6px; background: var(--fg-muted); border-radius: 50%; animation: dot 1.2s infinite; }
.bubble.typing span:nth-child(2) { animation-delay: 0.2s; }
.bubble.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot { 0%,80%,100% { opacity: 0.3; } 40% { opacity: 1; } }

/* ── Composer (sticky bottom in chat mode) ───────────────────── */
.cmp {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; gap: 6px; align-items: flex-end;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  background: var(--bg-2);
  border-top: 1px solid var(--tile-bd);
  z-index: 50;
}
.cmp textarea {
  flex: 1; background: var(--bg);
  border: 1px solid var(--tile-bd);
  border-radius: 18px;
  padding: 10px 14px;
  resize: none; max-height: 120px; outline: none;
}
.cmp textarea:focus { border-color: var(--orange); }
.cmp-btn {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: var(--bg-3); color: var(--fg);
  font-size: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cmp-btn:active { transform: scale(0.93); }
.cmp-btn.send {
  background: var(--grad-accent); color: #0a0e1d;
  box-shadow: 0 0 12px var(--orange-glow);
}
.cmp-btn.send svg { width: 18px; height: 18px; }
.cmp-btn.send:disabled { opacity: 0.4; box-shadow: none; }
.cmp-btn.recording {
  background: #ff4d6c; color: white;
  animation: pulse 1.2s infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ── Footer credit ─────────────────────────────────────────── */
.home-footer { text-align: center; padding: 20px 0 30px; }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 300; padding: 16px;
  backdrop-filter: blur(8px);
}
.modal {
  background: var(--bg-2); border-radius: 22px;
  max-width: 540px; width: 100%; max-height: 82vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.modal-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tile-bd);
  font-weight: 700;
}
.modal-hdr .x {
  background: none; border: none; font-size: 18px; color: var(--fg-muted);
}
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-body button.primary {
  background: var(--grad-accent); color: #0a0e1d;
  border: none; padding: 10px 18px; border-radius: 12px;
  font-weight: 700; cursor: pointer; margin-top: 10px;
}
.modal-body input, .modal-body select, .modal-body textarea {
  width: 100%; background: var(--bg);
  color: var(--fg); border: 1px solid var(--tile-bd);
  border-radius: 10px; padding: 10px 12px;
  font: inherit; margin: 6px 0; outline: none;
}
.modal-body .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.modal-body .chip {
  background: var(--bg-3); padding: 6px 12px; border-radius: 16px;
  font-size: 12px; cursor: pointer;
  border: 1px solid transparent;
}
.modal-body .chip.active { background: var(--grad-accent); color: #0a0e1d; }
.qa-card {
  background: var(--glass);
  border: 1px solid var(--tile-bd);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.qa-opt {
  display: block;
  width: 100%;
  background: var(--bg-3);
  color: var(--fg);
  border: 1px solid var(--tile-bd);
  padding: 14px 16px;
  margin: 8px 0;
  border-radius: 12px;
  text-align: left;
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}
.qa-opt:not(:disabled):hover {
  border-color: var(--orange) !important;
  background: var(--bg-2) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--orange-glow) !important;
}
.qa-opt.correct {
  background: rgba(53, 184, 121, 0.12) !important;
  border-color: #35b879 !important;
  color: #35b879 !important;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(53, 184, 121, 0.25) !important;
}
.qa-opt.wrong {
  background: rgba(232, 90, 90, 0.12) !important;
  border-color: #e85a5a !important;
  color: #e85a5a !important;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(232, 90, 90, 0.25) !important;
}
.qa-opt.pending {
  opacity: .68;
  border-color: var(--orange) !important;
}
.qa-opt.correct,
.qa-opt.wrong,
.qa-opt.answered {
  pointer-events: none;
  cursor: default;
}
.qa-opt:disabled {
  cursor: default;
}
.qa-explanation {
  background: rgba(255, 133, 52, 0.06);
  border-left: 4px solid var(--orange);
  border-radius: 4px 12px 12px 4px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: left;
}
.qa-explanation-lbl {
  display: block;
  font-weight: 700;
  color: var(--orange);
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.qa-daily-card {
  background: linear-gradient(135deg, rgba(255, 133, 52, 0.12), rgba(255, 133, 52, 0.02)) !important;
  border: 1px solid rgba(255, 133, 52, 0.25) !important;
  border-radius: 16px !important;
  position: relative;
  overflow: hidden;
}
.qa-daily-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--orange);
  color: #07091a;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.qa-question-text {
  font-size: 16px;
  line-height: 1.55;
  margin: 14px 0;
  color: var(--fg);
  text-align: left;
}
.qa-result-banner {
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14.5px;
  margin-top: 12px;
  text-align: left;
}
.qa-result-banner.correct {
  background: rgba(53, 184, 121, 0.12);
  color: #35b879;
  border: 1px solid rgba(53, 184, 121, 0.25);
}
.qa-result-banner.wrong {
  background: rgba(232, 90, 90, 0.12);
  color: #e85a5a;
  border: 1px solid rgba(232, 90, 90, 0.25);
}
.poll-pct {
  float: right;
  font-weight: 700;
  color: var(--orange);
  margin-left: 10px;
}
.selected-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(255, 133, 52, 0.2);
  border: 1px solid var(--orange);
  color: var(--orange);
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 8px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.qa-opt.correct .selected-badge {
  background: rgba(53, 184, 121, 0.2) !important;
  border-color: #35b879 !important;
  color: #35b879 !important;
}
.qa-opt.wrong .selected-badge {
  background: rgba(232, 90, 90, 0.2) !important;
  border-color: #e85a5a !important;
  color: #e85a5a !important;
}
.qa-opt.selected {
  border-width: 2px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--shadow) !important;
}
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 10px;
  background: var(--bg); margin-bottom: 6px;
}
.lb-rank { font-size: 18px; width: 30px; }
.lb-name { flex: 1; font-weight: 600; }
.lb-pts { color: var(--orange); font-weight: 700; }
.admin-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px;
}
.admin-stats .stat {
  background: var(--bg); border: 1px solid var(--tile-bd);
  border-radius: 10px; padding: 10px; text-align: center;
  display: block;
}
.admin-stats .num { font-size: 20px; font-weight: 800; color: var(--orange); }
.admin-stats .lbl { font-size: 10px; color: var(--fg-muted); }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 100px; left: 50%;
  transform: translateX(-50%);
  background: var(--fg); color: var(--bg);
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 500; z-index: 400;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* ══════════════════════════════════════════════════════════════
   v0.28 — multi-page layout: topbar, page wrappers, profile,
   admin shell, leaderboard/groups tables, segmented controls.
   Appended; does not override v6.0 above.
   ══════════════════════════════════════════════════════════════ */

/* Top horizontal toggle bar */
.topbar {
  position: sticky; top: 64px; z-index: 80;
  display: flex; gap: 6px; padding: 8px 12px;
  background: var(--bg); border-bottom: 1px solid var(--tile-bd);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.topbar::-webkit-scrollbar { display: none; }
.topbar button {
  flex: 0 0 auto;
  background: var(--bg-3); color: var(--fg-2);
  border: 1px solid transparent; padding: 8px 14px;
  border-radius: 999px; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.topbar button:hover { border-color: var(--tile-bd); }
.topbar button.active {
  background: var(--grad-accent); color: #0a0e1d;
  box-shadow: 0 2px 10px rgba(255,133,52,0.25);
}

/* Page wrapper */
.page {
  max-width: 1100px; margin: 0 auto;
  padding: 14px 16px 80px;
}
/* v0.57: vertical breathing room between top-level sections on home
   (hero ↔ stats row ↔ leaderboard cards). Was missing → blocks looked
   stacked/glued together. */
.page > * + * { margin-top: 14px; }
.page-hdr {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 6px 4px 14px;
}
.page-hdr h2 { margin: 0; font-size: 22px; }

/* Generic card */
.card {
  background: var(--bg-2); border: 1px solid var(--tile-bd);
  border-radius: 18px; padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.card h3 { margin: 0 0 10px; font-size: 16px; }
.card h4 { margin: 12px 0 6px; font-size: 14px; }
.card label { display: block; margin: 10px 0 4px; font-size: 12px; color: var(--fg-muted); font-weight: 600; }
.card input, .card select, .card textarea {
  width: 100%; background: var(--bg);
  color: var(--fg); border: 1px solid var(--tile-bd);
  border-radius: 10px; padding: 10px 12px; font: inherit; outline: none;
}
.card textarea { resize: vertical; min-height: 70px; }

/* Buttons used across pages */
.btn-primary, .modal-body button.btn-primary, .card button.btn-primary {
  background: var(--grad-accent); color: #0a0e1d;
  border: none; padding: 10px 18px; border-radius: 12px;
  font-weight: 700; cursor: pointer; margin-top: 10px;
  display: inline-block;
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary.small { padding: 6px 12px; font-size: 13px; }
.btn-primary.big { font-size: 16px; padding: 14px 22px; }
.btn-ghost {
  background: transparent; color: var(--fg-muted);
  border: 1px solid var(--tile-bd); padding: 8px 14px;
  border-radius: 10px; font-weight: 600; cursor: pointer; margin-top: 8px;
}
.btn-ghost.small { padding: 5px 10px; font-size: 12px; }
.btn-danger {
  background: rgba(232,90,90,0.18); color: #e85a5a;
  border: 1px solid rgba(232,90,90,0.4); padding: 8px 14px;
  border-radius: 10px; font-weight: 600; cursor: pointer;
}

/* Segmented control */
.seg-ctrl {
  display: inline-flex; gap: 0; background: var(--bg-3);
  border: 1px solid var(--tile-bd); border-radius: 12px; padding: 3px;
  flex-wrap: wrap;
}
.seg-ctrl button {
  background: transparent; color: var(--fg-2);
  border: none; padding: 8px 14px; border-radius: 10px;
  font-weight: 600; font-size: 13px; cursor: pointer;
}
.seg-ctrl button.active { background: var(--grad-accent); color: #0a0e1d; }
.seg-ctrl.small button { padding: 6px 10px; font-size: 12px; }

/* Pills (status badges) */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; margin-right: 6px;
  background: var(--bg-3); color: var(--fg-2);
  border: 1px solid var(--tile-bd);
}
.pill-ok    { background: rgba(82,200,140,0.18); color: #52c88c; border-color: rgba(82,200,140,0.4); }
.pill-warn  { background: rgba(255,170,80,0.18); color: #ffaa50; border-color: rgba(255,170,80,0.4); }
.pill-admin { background: linear-gradient(135deg,#ff8534,#ffb169); color: #0a0e1d; border-color: transparent; }

/* Code block */
.code-block {
  display: block; background: var(--bg-3); padding: 8px 12px;
  border-radius: 8px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; word-break: break-all;
  border: 1px solid var(--tile-bd);
}

/* Profile page */
.profile-card .profile-top {
  display: flex; gap: 16px; align-items: center;
  padding-bottom: 14px; border-bottom: 1px solid var(--tile-bd);
  margin-bottom: 14px;
}
.profile-avatar-big {
  width: 84px; height: 84px; border-radius: 50%;
  overflow: hidden; flex: 0 0 84px;
  background: linear-gradient(135deg,#ff8534,#ffb169);
  display: grid; place-items: center;
  color: #0a0e1d; font-weight: 800; font-size: 30px;
}
.profile-avatar-big img { width: 100%; height: 100%; object-fit: cover; }
.profile-id h3 { margin: 0 0 2px; font-size: 20px; }
.profile-meta { margin-bottom: 8px; }
.profile-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-section { margin: 16px 0; }
.profile-section .section-label {
  display: block; font-size: 12px; color: var(--fg-muted);
  font-weight: 600; margin-bottom: 8px;
}

/* Stat grid for profile/stats pages */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.stat-grid.full { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.stat-mini {
  background: var(--bg); border: 1px solid var(--tile-bd);
  border-radius: 12px; padding: 12px; text-align: center;
}
.stat-mini .num { font-size: 22px; font-weight: 800; color: var(--orange); }
.stat-mini .lbl { font-size: 11px; color: var(--fg-muted); margin-top: 4px; }
.stat-mini.big { padding: 18px 12px; }
.stat-mini.big .num { font-size: 28px; }

/* Badges */
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-chip {
  background: var(--bg); border: 1px solid var(--tile-bd);
  padding: 6px 12px; border-radius: 999px; font-size: 13px;
  display: inline-flex; gap: 6px; align-items: center;
}

/* Link card */
.link-card .link-flow {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
  align-items: stretch; margin-top: 12px;
}
.link-option {
  background: var(--bg); border: 1px solid var(--tile-bd);
  border-radius: 14px; padding: 14px;
}
.link-option p { font-size: 13px; line-height: 1.5; }
.link-step {
  display: inline-block; background: var(--grad-accent); color: #0a0e1d;
  font-weight: 800; font-size: 11px; padding: 3px 10px;
  border-radius: 999px; margin-bottom: 8px;
}
.link-or {
  display: grid; place-items: center; color: var(--fg-muted);
  font-size: 12px; font-weight: 700; text-transform: uppercase;
}
@media (max-width: 640px) {
  .link-card .link-flow { grid-template-columns: 1fr; }
  .link-or { padding: 4px 0; }
}

/* Top-row widgets on Home */
.top-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 16px 0;
}
@media (max-width: 720px) { .top-grid { grid-template-columns: 1fr; } }
.top-card {
  background: var(--bg-2); border: 1px solid var(--tile-bd);
  border-radius: 18px; padding: 14px; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.2s;
}
.top-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }
.top-hdr { display: flex; justify-content: space-between; align-items: center; }
.top-hdr h3 { margin: 0; font-size: 14px; }
.top-hdr .more { font-size: 11px; color: var(--orange); font-weight: 700; }
.top-list { margin-top: 10px; }
.top-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--tile-bd);
}
.top-row:last-child { border-bottom: none; }
.top-rank {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg-3); color: var(--fg-2);
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.top-rank.r1 { background: linear-gradient(135deg,#ffd700,#ffb700); color: #0a0e1d; }
.top-rank.r2 { background: linear-gradient(135deg,#c0c0c0,#a8a8a8); color: #0a0e1d; }
.top-rank.r3 { background: linear-gradient(135deg,#cd7f32,#b8722d); color: #fff; }
.top-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-3); flex: 0 0 28px;
  overflow: hidden; display: grid; place-items: center;
  color: var(--fg-2); font-weight: 700; font-size: 12px;
  position: relative;
}
.top-avatar img { width: 100%; height: 100%; object-fit: cover; }
.top-avatar.small { width: 24px; height: 24px; flex: 0 0 24px; }
.top-name { flex: 1; font-weight: 600; font-size: 13px; }
.top-pts { color: var(--orange); font-weight: 700; font-size: 12px; }

/* Stats-row clickable indicator */
.stats-row .stat.clickable { cursor: pointer; }
.stats-row .stat.clickable:hover { background: var(--bg-3); }

/* Search input */
.search-input {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--tile-bd); background: var(--bg);
  color: var(--fg); outline: none; margin-bottom: 10px;
}

/* Group list */
.group-list { display: flex; flex-direction: column; gap: 8px; }
.group-card {
  background: var(--bg); border: 1px solid var(--tile-bd);
  border-radius: 14px; padding: 10px; display: flex;
  align-items: center; gap: 12px;
}
.group-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg,#ff8534,#ffb169);
  display: grid; place-items: center;
  color: #0a0e1d; font-weight: 800;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
/* v0.65: real TG group photo when loaded */
.group-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.group-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  z-index: 1;
}
.group-info { flex: 1; min-width: 0; }
.group-name { font-weight: 600; }

/* Ticket list */
.ticket-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ticket-row {
  display: flex; gap: 10px; padding: 10px;
  background: var(--bg); border: 1px solid var(--tile-bd);
  border-radius: 12px; cursor: pointer;
}
.ticket-row:hover { border-color: var(--orange); }
.ticket-status { font-size: 18px; }
.ticket-body { flex: 1; min-width: 0; }

/* Clickable indicator */
.clickable { cursor: pointer; }
.clickable:hover { filter: brightness(1.04); }
.lb-row.clickable:hover { border: 1px solid var(--orange); }

/* User row in admin */
.user-row {
  display: flex; gap: 10px; align-items: center;
  padding: 10px; background: var(--bg);
  border: 1px solid var(--tile-bd); border-radius: 12px;
  margin-top: 8px;
}
.user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-info .muted { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; }

/* Admin shell */
.admin-page { padding-bottom: 100px; }
.admin-shell {
  display: grid; grid-template-columns: 220px 1fr; gap: 16px;
}
@media (max-width: 800px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { display: flex; flex-direction: row; overflow-x: auto; gap: 6px; }
  .admin-nav button { white-space: nowrap; }
}
.admin-nav {
  background: var(--bg-2); border: 1px solid var(--tile-bd);
  border-radius: 16px; padding: 10px;
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 124px; height: max-content;
}
.admin-nav button {
  background: transparent; color: var(--fg-2);
  border: none; padding: 10px 12px;
  border-radius: 10px; font-weight: 600; font-size: 13px;
  text-align: left; cursor: pointer;
}
.admin-nav button:hover { background: var(--bg-3); }
.admin-nav button.active {
  background: var(--grad-accent); color: #0a0e1d;
}
.admin-main { min-width: 0; }
.admin-subtabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
}
.admin-subtabs button {
  background: var(--bg-3); border: 1px solid transparent;
  color: var(--fg-2); padding: 6px 12px;
  border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.admin-subtabs button.active { background: var(--grad-accent); color: #0a0e1d; }
.admin-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  gap: 8px; margin-bottom: 12px;
}

/* Chat-page wrapper override */
.chat-page { padding: 0; max-width: none; }

/* Drawer active item */
.drawer-nav button.active {
  background: var(--bg-3); color: var(--orange);
}
/* v0.58: drawer section headers — grouped labels between menu chunks */
.drawer-section {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  opacity: 0.55;
  padding: 12px 12px 4px;
  border-top: 1px solid var(--tile-bd);
  margin-top: 6px;
  display: flex; align-items: center;
}
.drawer-section:first-of-type { margin-top: 10px; }
.drawer-nav .nav-admin {
  background: linear-gradient(135deg, rgba(255,133,52,0.10), transparent);
  border-left: 3px solid var(--orange);
  border-radius: 8px;
}

/* Page transition */
[x-cloak] { display: none !important; }

/* Hide bottom chat composer if not chat view (handled in HTML, but defensive) */

/* ── v0.29 polish: avatar source preview + page transitions ── */

.avatar-source-preview {
  display: flex; gap: 10px; margin-top: 10px;
}
.src-preview {
  flex: 1; background: var(--bg); border: 1px solid var(--tile-bd);
  border-radius: 12px; padding: 10px; text-align: center;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  cursor: default;
}
.src-preview.chosen {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,133,52,0.15);
  transform: translateY(-2px);
}
.src-thumb {
  width: 44px; height: 44px; border-radius: 50%;
  margin: 0 auto 6px; overflow: hidden;
  background: var(--bg-3);
  display: grid; place-items: center;
  font-size: 18px;
}
.src-thumb img { width: 100%; height: 100%; object-fit: cover; }
.src-label { font-weight: 700; font-size: 13px; }
.src-state { margin-top: 2px; }

/* Smooth fade between pages */
.page[x-transition] {
  animation: pageIn 0.18s ease-out;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   v0.42 — UI bug-fixes
   ══════════════════════════════════════════════════════════════ */

/* Global .chip styling (was only defined inside .modal-body — caused
   white-on-white buttons everywhere else like Settings, Quizzes, Admin) */
.chip {
  background: var(--bg-3);
  color: var(--fg);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--tile-bd);
  display: inline-block;
  text-decoration: none;
  font-family: inherit;
  font-weight: 500;
}
.chip:hover { border-color: var(--orange); }
.chip.active { background: var(--grad-accent); color: #0a0e1d; border-color: transparent; }
.chip:disabled { opacity: 0.5; cursor: not-allowed; }

/* Number inputs and selects must inherit the dark theme on mobile webviews
   (some default to white background due to user-agent CSS). */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="url"],
select, textarea {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--tile-bd);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--orange); }

/* Admin sidebar on mobile — was a sticky block that ate half the screen.
   v0.54: scroll-snap + a fading right-edge arrow
   that disappears when you've scrolled to the end, so the 8-tab strip
   no longer looks like only 4 tabs exist. */
@media (max-width: 800px) {
  .admin-shell {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .admin-nav-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
  }
  .admin-nav-wrap::after {
    content: "›";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    display: grid; place-items: center;
    width: 28px;
    color: var(--fg-2);
    font-size: 20px; font-weight: 700;
    background: linear-gradient(to right, transparent, var(--bg-2) 50%);
    pointer-events: none;
    opacity: 0.85;
    animation: navHint 1.6s ease-in-out infinite;
  }
  @keyframes navHint {
    0%,100% { transform: translateX(0); }
    50%     { transform: translateX(-3px); }
  }
  .admin-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
    gap: 4px;
    max-height: 56px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav button {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 12px;
    scroll-snap-align: start;
  }
}

/* Chat: keep the composer fixed to the viewport bottom so it can never
   be scrolled out of view, regardless of message-list length. */
.cmp {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  border-top: 1px solid var(--tile-bd);
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px env(safe-area-inset-bottom);
  z-index: 200;
}
.cmp textarea {
  flex: 1; max-height: 120px; min-height: 40px;
  resize: none;
}
.cmp-btn {
  background: var(--bg-3); border: 1px solid var(--tile-bd);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--fg); cursor: pointer;
}
.cmp-btn.send { background: var(--grad-accent); color: #0a0e1d; border-color: transparent; }
.cmp-btn.recording { background: rgba(232,90,90,0.2); border-color: #e85a5a; color: #e85a5a; }
/* Chat page: leave room at bottom for the fixed composer */
.chat-page { padding-bottom: 100px; }
.chat-msgs { padding-bottom: 70px; }

/* v0.61: proper chat-composer styling (WhatsApp/Telegram look).
   Was unstyled — input had no background/border, barely visible. */
.chat-composer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  background: var(--bg-2);
  border-top: 1px solid var(--tile-bd);
  z-index: 200;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
}
.chat-composer textarea {
  flex: 1;
  min-height: 40px; max-height: 120px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--tile-bd);
  border-radius: 20px;
  padding: 10px 14px;
  resize: none;
  outline: none;
  font: inherit;
  line-height: 1.4;
}
.chat-composer textarea::placeholder { color: rgba(180,190,220,0.55); }
.chat-composer textarea:focus { border-color: var(--orange); }
.chat-composer .cmp-btn {
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  width: 40px; height: 40px;
  min-width: 40px;
  border-radius: 50%;
  color: var(--fg);
  display: grid; place-items: center;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-composer .cmp-btn:active { transform: scale(0.92); }
/* v0.64: send button MUCH more visible — was barely seen on dark theme. */
.chat-composer .cmp-btn.send {
  background: var(--grad-accent);
  color: #0a0e1d;
  border: 2px solid var(--orange-2);
  box-shadow: 0 0 18px var(--orange-glow), 0 2px 6px rgba(0,0,0,0.3);
  width: 44px; height: 44px;
  min-width: 44px;
}
.chat-composer .cmp-btn.send:disabled {
  opacity: 0.55;
  box-shadow: 0 0 6px var(--orange-glow);
  border-color: var(--tile-bd);
}
.chat-composer .cmp-btn.send svg {
  width: 22px; height: 22px;
  stroke-width: 3;
}
.chat-composer .cmp-btn.recording {
  background: #ff4d6c; color: white;
  animation: pulse 1.2s infinite;
}

/* Poll-row spacing */
.poll-row { margin: 4px 0; }

/* Tickets inline form spacing */
.ticket-list { margin-top: 12px; }


/* v0.44 — chat composer inside chat-page (replaces the separate .cmp footer) */
.chat-page {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 64px);
  padding-bottom: 0;
}
.chat-page .chat {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.chat-page .chat-msgs {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}
.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-2);
  border-top: 1px solid var(--tile-bd);
  position: sticky;
  bottom: 0;
  z-index: 10;
}
.chat-composer textarea {
  flex: 1; max-height: 120px; min-height: 40px;
  resize: none;
  border-radius: 20px;
  padding: 10px 14px;
}

/* Tickets — inline detail expansion */
.ticket-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--tile-bd);
  border-radius: 12px;
  cursor: pointer;
}
.ticket-row:hover { border-color: var(--orange); }
.ticket-body { flex: 1; min-width: 0; }
.ticket-detail {
  margin-top: 8px;
  padding: 0;
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  border-radius: 12px;
  overflow: hidden;
}
.ticket-chat-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--tile-bd);
  background: var(--bg-2);
}
.ticket-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #52c88c;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ticket-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #52c88c;
  box-shadow: 0 0 0 4px rgba(82,200,140,0.12);
}
.ticket-thread {
  height: min(48vh, 420px);
  min-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: var(--bg);
}
.ticket-thread .msg {
  width: fit-content;
  max-width: min(86%, 520px);
}
.ticket-thread .bubble {
  box-shadow: none;
}
.ticket-empty {
  margin: auto;
  text-align: center;
}
.ticket-composer {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-2);
  border-top: 1px solid var(--tile-bd);
}
.ticket-composer textarea {
  width: 100%;
  min-height: 56px;
  max-height: 140px;
  resize: vertical;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--tile-bd);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  line-height: 1.4;
  outline: none;
}
.ticket-composer textarea:focus {
  border-color: var(--orange);
}
.ticket-composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.ticket-composer-actions .btn-primary {
  min-width: 104px;
  margin-top: 0;
}
.ticket-closed-note {
  padding: 12px 14px;
  text-align: center;
  color: var(--fg-muted);
  background: var(--bg-2);
  border-top: 1px solid var(--tile-bd);
}
.support-ticket-modal {
  max-width: 640px;
  height: min(82vh, 760px);
  max-height: calc(100dvh - 28px);
}
.support-ticket-modal .modal-hdr {
  flex-shrink: 0;
}
.admin-ticket-thread {
  flex: 1;
  height: auto;
  min-height: 240px;
}
.admin-ticket-composer {
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .ticket-thread {
    height: min(46vh, 380px);
    padding: 10px;
  }
  .ticket-thread .msg {
    max-width: 92%;
  }
  .support-ticket-modal {
    height: calc(100dvh - 16px);
  }
}

/* v0.45 — home hero / stats spacing fix (was visually glued together) */
.hero { margin-bottom: 16px; }
.stats-row { margin-top: 8px; margin-bottom: 16px; }
.top-grid { margin-top: 4px; margin-bottom: 16px; }
.tile-grid { margin-top: 8px; }

/* Tickets — disable button when below min */
.ticket-detail .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* v0.61: proper .chat-composer styling (WhatsApp/Telegram look).
   The chat-page composer was unstyled — input had no background/border,
   barely visible against the page. This makes it look like a real chat. */
.chat-composer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0));
  background: var(--bg-2);
  border-top: 1px solid var(--tile-bd);
  z-index: 200;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
}
.chat-composer textarea {
  flex: 1;
  min-height: 40px; max-height: 120px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--tile-bd);
  border-radius: 20px;
  padding: 10px 14px;
  resize: none;
  outline: none;
  font: inherit;
  line-height: 1.4;
}
.chat-composer textarea::placeholder { color: rgba(180,190,220,0.55); }
.chat-composer textarea:focus { border-color: var(--orange); }
.chat-composer .cmp-btn {
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  width: 40px; height: 40px;
  min-width: 40px;
  border-radius: 50%;
  color: var(--fg);
  display: grid; place-items: center;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-composer .cmp-btn:active { transform: scale(0.92); }
/* v0.64: send button MUCH more visible — was barely seen on dark theme. */
.chat-composer .cmp-btn.send {
  background: var(--grad-accent);
  color: #0a0e1d;
  border: 2px solid var(--orange-2);
  box-shadow: 0 0 18px var(--orange-glow), 0 2px 6px rgba(0,0,0,0.3);
  width: 44px; height: 44px;
  min-width: 44px;
}
.chat-composer .cmp-btn.send:disabled {
  opacity: 0.55;
  box-shadow: 0 0 6px var(--orange-glow);
  border-color: var(--tile-bd);
}
.chat-composer .cmp-btn.send svg {
  width: 22px; height: 22px;
  stroke-width: 3;
}
.chat-composer .cmp-btn.recording {
  background: #ff4d6c; color: white;
  animation: pulse 1.2s infinite;
}

/* v5.6 — image upload preview + image gen */
.upload-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; background: rgba(255,133,52,0.08);
  border-top: 1px solid rgba(255,133,52,0.2);
  margin: 0;
}
.upload-preview img {
  width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
}
.upload-preview .chip.danger { margin-left: auto; }

/* v0.78: keep selected media visible above the chat input bar in both themes. */
.chat-page {
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}
.chat-page .chat-composer {
  position: sticky;
  bottom: 0;
  z-index: 20;
}
.chat-page .upload-preview {
  position: sticky;
  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 19;
  margin: 8px 10px;
  border: 1px solid rgba(255,133,52,0.28);
  border-radius: 14px;
  background: var(--bg-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

/* v0.78: the hero already shows identity; hide the duplicate visual card top. */
.profile-card .profile-top {
  display: none;
}
.profile-card {
  padding-top: 10px;
}

/* v5.6 — admin nav section labels */
.nav-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted, #888); padding: 10px 14px 4px;
}

/* v5.7 — admin submenu in drawer */
.nav-submenu {
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 14px; margin-bottom: 8px;
  border-left: 2px solid rgba(255,133,52,0.25);
  margin-left: 18px;
}
.nav-submenu button {
  text-align: left; padding: 6px 10px; background: transparent;
  border: none; color: var(--muted, #888); font-size: 13px;
  border-radius: 6px; cursor: pointer;
}
.nav-submenu button.active { color: var(--orange, #ff8534); background: rgba(255,133,52,0.08); }
.nav-submenu button:hover { background: rgba(255,133,52,0.05); }
.chevron { float: right; opacity: 0.6; }

/* v5.7 — Engagement hub cards */
/* v5.7 — Profile redesign hero */
.profile-hero {
  display: flex; gap: 14px; align-items: center;
  padding: 18px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,133,52,0.12), rgba(255,133,52,0.02));
  margin-bottom: 14px;
}
.profile-hero .avatar-big {
  width: 80px; height: 80px; border-radius: 50%;
  border: 3px solid var(--orange, #ff8534);
}
.profile-hero .name { font-size: 22px; font-weight: 700; margin: 0; }
.profile-hero .level-pill {
  display: inline-block; padding: 4px 10px; border-radius: 10px;
  background: var(--orange, #ff8534); color: white; font-size: 12px; font-weight: 600;
  margin-top: 4px;
}

.heatmap {
  display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px;
  margin-top: 10px;
}
.heat-cell {
  aspect-ratio: 1; border-radius: 2px; background: rgba(255,133,52,0.08);
}
.heat-cell[data-i="1"] { background: rgba(255,133,52,0.25); }
.heat-cell[data-i="2"] { background: rgba(255,133,52,0.5); }
.heat-cell[data-i="3"] { background: rgba(255,133,52,0.75); }
.heat-cell[data-i="4"] { background: rgba(255,133,52,1); }

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 520px) {
  .grid2 { grid-template-columns: 1fr; }
}

/* Retention hub, quests, seasons and community leagues */
.drawer-nav button { position: relative; }
.nav-count {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: #e63d4f;
  font-size: 11px;
  font-weight: 800;
}

.morning-hub,
.trending-widget {
  margin-bottom: 14px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-2);
  box-shadow: var(--shadow);
}
.morning-hub { padding: 16px; }
.morning-hub.compact { padding: 12px 14px; }
.morning-head,
.morning-footer,
.section-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.morning-head h2,
.section-line h3 { margin: 0; }
.admin-pulse-moderation {
  display: grid;
  gap: 12px;
}
.admin-pulse-posts {
  display: grid;
  gap: 8px;
}
.admin-pulse-post {
  align-items: center;
  background: var(--tile-bg);
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 9px 12px;
}
.admin-pulse-post-main {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}
.admin-pulse-post-main > span:last-child {
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-pulse-post-actions {
  display: flex;
  flex: none;
  gap: 6px;
}
.eyebrow {
  color: var(--orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.streak-number {
  display: grid;
  min-width: 72px;
  text-align: right;
}
.streak-number strong {
  color: var(--orange);
  font-size: 28px;
  line-height: 1;
}
.streak-number span { color: var(--fg-muted); font-size: 11px; }
.morning-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.morning-toggle {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--fg);
}
.morning-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.morning-summary::-webkit-scrollbar { display: none; }
.morning-summary > button,
.morning-summary > span {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 12px;
}
.morning-summary > button {
  border-color: rgba(255,133,52,.55);
  background: rgba(255,133,52,.12);
  color: var(--fg);
}
.morning-summary > button:disabled { opacity: .66; }
.morning-focus {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(255,133,52,.42);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,133,52,.12), var(--bg-3));
  color: var(--fg);
  text-align: left;
}
.morning-focus-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255,133,52,.16);
  font-size: 18px;
}
.morning-focus > span:nth-child(2) { min-width: 0; }
.morning-focus small,
.morning-focus strong,
.morning-focus em { display: block; }
.morning-focus small { color: var(--orange); font-size: 9px; font-weight: 800; }
.morning-focus strong { overflow-wrap: anywhere; }
.morning-focus em { color: var(--fg-muted); font-size: 11px; font-style: normal; }
.morning-focus b { color: var(--orange); font-size: 11px; white-space: nowrap; }
.momentum-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
}
.momentum-day {
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg-3);
  color: var(--fg-muted);
  font-size: 10px;
}
.momentum-day b { min-height: 14px; color: var(--fg-2); font-size: 12px; }
.momentum-day.active { border-color: color-mix(in srgb, var(--orange) 50%, var(--tile-bd)); }
.momentum-day.claimed { background: rgba(255,133,52,.13); color: var(--fg); }
.momentum-day.protected b { color: #65b9ff; }
.momentum-day.today { box-shadow: inset 0 0 0 1px var(--orange); }
.morning-rewards {
  margin-top: 10px;
  border-top: 1px solid var(--tile-bd);
  padding-top: 9px;
}
.morning-rewards summary {
  cursor: pointer;
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 800;
}
.morning-rewards > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  border-bottom: 1px solid var(--tile-bd);
}
.morning-rewards strong { min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.morning-rewards small { color: var(--fg-muted); font-size: 10px; white-space: nowrap; }
.morning-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.morning-action {
  min-height: 72px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-3);
}
.morning-action.primary {
  border-color: rgba(255,133,52,.55);
  background: rgba(255,133,52,.12);
}
.morning-action:disabled { cursor: default; opacity: .66; }
.morning-action strong,
.morning-action small { display: block; }
.morning-action small { color: var(--fg-muted); margin-top: 2px; }
.morning-icon { flex: 0 0 auto; font-size: 20px; }
.morning-footer { border-top: 1px solid var(--tile-bd); padding-top: 10px; }
.morning-footer > div:first-child { display: grid; }
.morning-season { min-width: 160px; font-size: 12px; }
.progress-track {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(127,136,170,.18);
}
.progress-track > div {
  height: 100%;
  border-radius: inherit;
  background: var(--grad-accent);
}
.comeback-banner,
.competition-banner {
  margin-top: 10px;
  padding: 9px 10px;
  border-left: 3px solid #35b879;
  background: rgba(53,184,121,.1);
  color: var(--fg-2);
  font-size: 12px;
}

.trending-widget { padding: 14px 16px; }
.live-dot {
  padding: 3px 7px;
  border-radius: 4px;
  color: #fff;
  background: #e63d4f;
  font-size: 10px;
  font-weight: 800;
}
.trend-strip {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.trend-strip::-webkit-scrollbar { display: none; }
.trend-item {
  flex: 0 0 min(280px, 82vw);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-left: 1px solid var(--tile-bd);
}
.trend-mark {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange-glow);
}
.trend-item strong,
.trend-item small { display: block; }
.trend-item small { color: var(--fg-muted); margin-top: 2px; }

.league-row,
.showcase-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--tile-bd);
}
.retention-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 133, 52, 0.05);
  border: 1px solid rgba(255, 133, 52, 0.15);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 14px;
  transition: all 0.3s ease;
}
.retention-action:hover {
  background: rgba(255, 133, 52, 0.08);
  border-color: rgba(255, 133, 52, 0.25);
  box-shadow: 0 4px 15px rgba(255, 133, 52, 0.15);
}
.retention-action strong {
  font-size: 14px;
  color: var(--fg);
}
.retention-action p {
  margin: 4px 0 0;
  color: var(--fg-muted);
}
.retention-action button.chip {
  background: var(--grad-accent);
  color: #07091a;
  border: none;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(255, 133, 52, 0.2);
  transition: all 0.2s ease;
}
.retention-action button.chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 133, 52, 0.35);
}

.quest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--tile-bd);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.dark .quest-row {
  background: rgba(255, 255, 255, 0.01);
}
.quest-row:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.quest-row.complete {
  border-color: rgba(53, 184, 121, 0.3);
  background: rgba(53, 184, 121, 0.04);
}
.quest-row.complete:not(.claimed) {
  border-color: var(--orange);
  animation: questPulse 2s infinite ease-in-out;
}
.quest-row.claimed {
  opacity: 0.6;
  border-color: var(--tile-bd);
  background: rgba(255, 255, 255, 0.01);
  pointer-events: none;
}
@keyframes questPulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(255, 133, 52, 0.2);
    border-color: rgba(255, 133, 52, 0.5);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 133, 52, 0.6);
    border-color: rgba(255, 133, 52, 1);
  }
}

.quest-main { min-width: 0; flex: 1; }
.quest-title { display: flex; align-items: center; gap: 8px; }
.quest-period {
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.quest-period.period-daily {
  color: var(--orange, #ff8534);
  background: rgba(255, 133, 52, 0.12);
}
.quest-period.period-weekly {
  color: #b169ff;
  background: rgba(177, 105, 255, 0.12);
}
.quest-period.period-monthly {
  color: #34d3ff;
  background: rgba(52, 211, 255, 0.12);
}

.quest-main p { margin: 4px 0 8px; color: var(--fg-muted); }
.quest-progress { display: flex; align-items: center; gap: 10px; }
.quest-progress .progress-track { flex: 1; }
.quest-progress span { min-width: 48px; color: var(--fg-muted); font-size: 11px; text-align: right; }
.quest-reward {
  width: 95px;
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 6px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
}
.quest-reward button.chip {
  background: var(--grad-accent);
  color: #07091a;
  border: none;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(255, 133, 52, 0.25);
}

.season-progress { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.season-progress .progress-track { flex: 1; }
.season-progress span { min-width: 85px; color: var(--fg-muted); font-size: 11px; }
.season-rewards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px;
  scrollbar-width: none;
}
.season-rewards::-webkit-scrollbar { display: none; }

.season-reward {
  flex: 0 0 155px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--tile-bd);
  border-radius: 12px;
  background: var(--bg-3);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Premium track border & background glow */
.season-reward.premium {
  border-color: rgba(53, 184, 121, 0.25);
  background: linear-gradient(135deg, rgba(53, 184, 121, 0.08), rgba(53, 184, 121, 0.02));
}

/* Unlocked & Unclaimed active state */
.season-reward.unlocked:not(.claimed) {
  border-color: rgba(255, 133, 52, 0.4);
  background: linear-gradient(135deg, rgba(255, 133, 52, 0.08), rgba(255, 133, 52, 0.02));
  box-shadow: 0 4px 12px rgba(255, 133, 52, 0.08);
}
.season-reward.unlocked:not(.claimed).premium {
  border-color: rgba(53, 184, 121, 0.5);
  background: linear-gradient(135deg, rgba(53, 184, 121, 0.12), rgba(53, 184, 121, 0.02));
  box-shadow: 0 4px 12px rgba(53, 184, 121, 0.15);
}

.season-reward.unlocked:not(.claimed):hover {
  transform: scale(1.04) translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 133, 52, 0.15);
}
.season-reward.unlocked:not(.claimed).premium:hover {
  box-shadow: 0 8px 20px rgba(53, 184, 121, 0.25);
}

/* Claimed state */
.season-reward.claimed {
  opacity: 0.5;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.01);
  border-color: var(--tile-bd);
}

/* Locked state */
.season-reward.locked {
  opacity: 0.5;
  pointer-events: none;
}

/* Small / text styling inside */
.season-reward small {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg-muted);
}
.season-reward.premium small {
  color: #35b879;
}
.season-reward strong {
  font-size: 13px;
  color: var(--fg);
  line-height: 1.3;
  margin: 6px 0;
}
.season-reward .reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  width: fit-content;
}

.season-reward .reward-badge.badge-locked {
  color: var(--fg-muted);
  background: rgba(127, 136, 170, 0.1);
}
.season-reward .reward-badge.badge-claim {
  color: #07091a;
  background: var(--grad-accent);
  box-shadow: 0 2px 6px rgba(255, 133, 52, 0.2);
}
.season-reward .reward-badge.badge-claim.premium-claim {
  color: #07091a;
  background: linear-gradient(135deg, #35b879 0%, #6be4a0 100%);
  box-shadow: 0 2px 6px rgba(53, 184, 121, 0.2);
}
.season-reward .reward-badge.badge-claimed {
  color: #35b879;
  background: rgba(53, 184, 121, 0.1);
}
.league-row { padding: 10px 0; }
.league-rank { width: 32px; color: var(--orange); font-weight: 800; }
.league-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--orange);
  color: #111;
  font-size: 12px;
  font-weight: 900;
}
.league-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.league-row strong { min-width: 0; flex: 1; }
.league-row b { color: var(--orange); white-space: nowrap; }
.competition-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.competition-banner div { display: grid; }
.competition-banner small { color: var(--fg-muted); }
.reminder-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}
.reminder-grid label,
.admin-number-grid label,
.admin-quest-values label { color: var(--fg-muted); font-size: 11px; }
.reminder-grid input,
.reminder-grid select { width: 100%; margin-top: 4px; }
.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
}
.switch span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: var(--fg-muted);
  transition: transform .2s ease;
}
.switch input:checked + span { background: rgba(255,133,52,.2); border-color: var(--orange); }
.switch input:checked + span::after { transform: translateX(18px); background: var(--orange); }

.profile-banner {
  min-height: 132px;
  background-position: center;
  background-size: cover;
  border: 1px solid transparent;
}
.profile-hero .avatar-big.avatar-fallback {
  display: grid;
  place-items: center;
  background: var(--grad-accent);
  color: #080b14;
  font-size: 28px;
  font-weight: 950;
}
.profile-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
  max-width: 420px;
}
.profile-quick-stats span,
.profile-quick-stats button {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 133, 52, 0.18);
  border-radius: 8px;
  background: rgba(6, 8, 20, 0.28);
  color: inherit;
  text-align: left;
}
.profile-quick-stats button {
  cursor: pointer;
}
.profile-quick-stats button:hover {
  border-color: rgba(255, 133, 52, 0.46);
  background: rgba(255, 133, 52, 0.08);
}
.profile-quick-stats strong {
  color: var(--fg);
  font-size: 14px;
  line-height: 1;
}
.profile-quick-stats small {
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.profile-quick-stats.public-stats {
  max-width: 360px;
}
.profile-customize-card label { display: block; margin-top: 10px; }
.char-count { margin-top: 3px; color: var(--fg-muted); font-size: 11px; text-align: right; }
.profile-banner-controls input { min-width: 0; flex: 1; }
.profile-banner-preview {
  width: 100%;
  aspect-ratio: 3 / 1;
  margin-top: 8px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--tile-bd);
}
.profile-style-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.profile-style-row input[type="color"] { width: 52px; height: 38px; padding: 2px; }
.toggle-line { display: flex !important; align-items: center; gap: 8px; }
.card input[type="checkbox"],
.toggle-line input[type="checkbox"],
.toggle-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  padding: 0;
  appearance: auto;
  -webkit-appearance: checkbox;
}
.showcase-list { margin-top: 8px; }
.showcase-row { min-height: 52px; padding: 7px 0; }
.showcase-icon { width: 30px; font-size: 20px; }
.showcase-name { min-width: 0; flex: 1; font-weight: 700; }
.showcase-row select { width: 118px; }

.home-social-card,
.public-profile-banner {
  margin: 14px 0;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
}
.home-social-list {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 12px;
}
.home-social-row {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: stretch;
  gap: 11px;
  min-height: 82px;
  padding: 8px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
}
.home-social-row:hover { border-color: var(--orange); }
.home-social-media {
  align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  display: grid;
  height: 100%;
  justify-items: center;
  min-height: 64px;
  overflow: hidden;
}
.home-social-media > img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.home-social-media.empty {
  background: linear-gradient(135deg, rgba(255,133,52,.12), rgba(125,140,255,.10));
}
.home-social-copy { min-width: 0; display: grid; align-content: center; gap: 4px; }
.home-social-copy > span {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}
.home-social-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-social-copy em {
  color: var(--orange);
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}
.home-social-copy small {
  color: var(--fg-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-social-copy b,
.home-social-score { color: var(--orange); font-size: 11px; font-weight: 700; }

.profile-banner-upload { display: inline-flex; margin-top: 10px; }
.social-link-editor { display: grid; gap: 8px; margin: 12px 0; }
.social-link-row {
  display: grid;
  grid-template-columns: 94px minmax(0, .65fr) minmax(0, 1.35fr);
  gap: 8px;
  align-items: center;
}
.social-link-row input { min-width: 0; margin: 0; }
.profile-post-compact {
  padding: 10px 0;
  border-top: 1px solid var(--tile-bd);
}
.profile-post-compact:first-of-type { border-top: 0; }
.profile-post-compact p { margin: 8px 0; white-space: pre-wrap; }
.creator-analytics-card {
  border-color: rgba(255, 133, 52, 0.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 190, 95, 0.10), transparent 36%),
    var(--bg-2);
}
.creator-analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.creator-analytics-grid > div {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--tile-bd);
  border-radius: 10px;
  background: rgba(from var(--bg-3) r g b / 55%);
}
.creator-analytics-grid strong {
  overflow: hidden;
  color: var(--fg);
  font-size: 19px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.creator-analytics-grid span {
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.public-profile-banner {
  min-height: 188px;
  background-position: center;
  background-size: cover;
}
.public-profile-bio {
  max-width: 680px;
  margin: 14px 0 8px;
  white-space: pre-wrap;
}
.public-follow-stats { display: flex; gap: 12px; color: var(--fg-muted); font-size: 12px; margin-top: 7px; }
.public-social-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.feed-page { max-width: 820px; }
.feed-page-header { align-items: flex-start; }
.feed-page-header p { margin: 4px 0 0; }
.feed-tabs { margin-bottom: 12px; }
.feed-list { display: grid; gap: 12px; }
.feed-composer {
  margin-bottom: 12px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid rgba(255,133,52,.35);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.feed-composer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.feed-composer-head > div { min-width: 0; display: grid; gap: 2px; }
.feed-composer-head small { color: var(--fg-muted); }
.feed-composer textarea {
  width: 100%;
  min-height: 116px;
  margin: 0 0 10px;
  resize: vertical;
}
.feed-composer-fields {
  display: grid;
  grid-template-columns: minmax(130px, .42fr) minmax(0, 1fr);
  gap: 8px;
}
.feed-composer-fields label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--fg-muted);
  font-size: 11px;
}
.feed-composer-fields input,
.feed-composer-fields select { width: 100%; margin: 0; }
.feed-composer-media {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
}
.feed-composer-media img {
  width: 92px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
}
.feed-composer-media > div { min-width: 0; display: grid; gap: 7px; }
.feed-composer-media strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.feed-composer-actions .file-picker.compact {
  display: inline-flex;
  width: auto;
  min-height: 34px;
  padding: 5px 10px;
}
.feed-composer-actions .muted { margin-left: auto; }
.feed-post {
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  overflow: hidden;
}
.public-profile-feed .feed-post {
  padding: 14px 0;
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--tile-bd);
}
.public-profile-feed .feed-post:last-child {
  border-bottom: none;
}
.feed-author-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
}
.feed-author-row > .feed-author-actions {
  margin-left: auto;
  flex: 0 0 auto;
}
.pulse-post .feed-author-row {
  padding: 14px 16px 0;
}
.pulse-post .feed-author-row > .feed-author-actions {
  align-self: center;
}
.feed-author-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.feed-author-name-row > strong {
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-author-name-row + .feed-author-meta {
  margin-top: 1px;
}
.post-kind-row {
  flex-basis: 100%;
  margin-bottom: -4px;
}
.post-kind-row .repost-lbl,
.post-kind-row .quote-lbl {
  color: var(--orange);
  font-weight: 600;
  font-size: 11px;
}
.pulse-viral-score {
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 133, 52, 0.3);
  background: rgba(255, 133, 52, 0.08);
  color: var(--orange);
  font-size: 10.5px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.feed-avatar-mini {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--orange);
  font-weight: 700;
  cursor: pointer;
}
.feed-avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.feed-author-info {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}
.feed-author-info > strong {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-author-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--fg-muted);
}
.pulse-post .feed-author-meta {
  flex-direction: row;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.feed-author-meta .meta-sep { color: var(--tile-bd); }
.platform-mini {
  min-width: 22px;
  min-height: 18px;
  display: inline-grid;
  place-items: center;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 133, 52, 0.10);
  color: var(--orange);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}
.platform-mini.mini-x { background: #080b14; color: #fff; }
.platform-mini.mini-instagram { background: #e1306c; color: #fff; }
.platform-mini.mini-tiktok { background: #fe2c55; color: #fff; }
.platform-mini.mini-youtube { background: #ff0000; color: #fff; }
.platform-mini.mini-facebook { background: #1877f2; color: #fff; }
.platform-mini.mini-socio { background: var(--orange); color: #080b14; }
.platform-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.dot-x { background: #71767b; }
.dot-instagram { background: #e1306c; }
.dot-tiktok { background: #fe2c55; }
.dot-youtube { background: #ff0000; }
.dot-facebook { background: #1877f2; }
.dot-socio { background: var(--orange); }
.feed-platform-tag {
  flex: 0 0 auto;
  font-size: 11px;
  opacity: 0.5;
  cursor: default;
}
.feed-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.feed-author-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}
.feed-follow { min-width: 76px; }
.feed-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--orange);
  font-weight: 800;
}
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.feed-avatar.compact { width: 36px; height: 36px; flex-basis: 36px; }
.feed-avatar.mini { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }
.feed-signal {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,133,52,.12);
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
}
.feed-post-body {
  margin: 14px 0 10px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.public-profile-feed .feed-post-body {
  margin: 8px 0 0 46px;
  font-size: 13px;
}
.public-profile-feed .pulse-reference {
  margin: 0 0 12px 46px;
}
.public-profile-feed .feed-post-image {
  margin-left: 46px;
  width: calc(100% - 46px);
}
.feed-post-image {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  background: var(--bg);
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
}
.feed-external-link {
  display: inline-flex;
  margin: 10px 0 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.public-profile-feed .feed-external-link {
  margin: 6px 0 2px 46px;
  font-size: 12px;
}
.public-profile-feed .card.muted {
  margin-left: 46px;
}
.public-profile-feed .platform-filter {
  margin-bottom: 4px;
}
.feed-outbound-count {
  opacity: 0.72;
  font-size: 12px;
}
.feed-actions { flex-wrap: wrap; margin-top: 12px; }
.feed-actions .chip.active { background: var(--grad-accent); color: #0a0e1d; }
.feed-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tile-bd);
}
.feed-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg-3);
}
.feed-comment strong {
  font-size: 13px;
  color: var(--fg);
  font-weight: 700;
}
.feed-comment p {
  margin: 3px 0 0;
  color: var(--fg-muted);
  font-size: 13px;
  white-space: pre-wrap;
  line-height: 1.4;
}
.feed-comment-compose {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.feed-comment-compose input {
  flex: 1;
  min-width: 0;
  margin: 0;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--tile-bd);
  border-radius: 20px;
  background: var(--bg);
  color: var(--fg);
  outline: none;
  font-size: 13px;
  transition: all 0.2s ease;
}
.feed-comment-compose input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 133, 52, 0.15);
}
.social-output-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

.spg {
  margin: 0 auto;
  max-width: 980px;
}
.spg-hero {
  padding: 6px 2px 16px;
}
.spg-eyebrow {
  color: #FF8534;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.spg-hero h2 {
  background: linear-gradient(90deg, #fff, #ffd9b3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 25px;
  font-weight: 800;
  margin: 6px 0 4px;
}
.spg-hero p {
  color: rgba(255, 255, 255, .6);
  font-size: 13px;
  margin: 0;
  max-width: 580px;
}
.spg-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .spg-grid {
    align-items: start;
    grid-template-columns: 1fr 1fr;
  }
}
.spg-card {
  background: linear-gradient(180deg, rgba(36, 26, 14, .55), rgba(15, 15, 26, .7));
  border: 1px solid rgba(255, 133, 52, .2);
  border-radius: 20px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .4);
  padding: 18px;
  position: relative;
}
.spg-field {
  margin-bottom: 15px;
}
.spg-field > label,
.spg-toggle > span {
  color: rgba(255, 255, 255, .6);
  font-size: 12px;
  font-weight: 600;
}
.spg-field > label {
  display: block;
  margin-bottom: 8px;
}
.spg-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.spg-chip {
  appearance: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: rgba(255, 255, 255, .82);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 15px;
  transition: all .15s;
}
.spg-chip:hover {
  border-color: rgba(255, 133, 52, .55);
}
.spg-chip.active {
  background: linear-gradient(135deg, #FF8534, #f5a623);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(255, 133, 52, .45);
  color: #1a1205;
}
.spg-row2 {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) {
  .spg-row2 {
    grid-template-columns: 1fr;
  }
}
.spg-seg {
  background: rgba(255, 255, 255, .05);
  border-radius: 12px;
  display: flex;
  gap: 4px;
  padding: 4px;
}
.spg-seg-btn {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 9px;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  padding: 9px;
  text-transform: capitalize;
  transition: all .15s;
}
.spg-seg-btn.active {
  background: linear-gradient(135deg, #FF8534, #f5a623);
  color: #1a1205;
}
.spg-input,
.spg-select {
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  box-sizing: border-box;
  color: #fff;
  font-size: 14px;
  padding: 12px 14px;
  width: 100%;
}
.spg-input:focus,
.spg-select:focus {
  border-color: #FF8534;
  box-shadow: 0 0 0 3px rgba(255, 133, 52, .16);
  outline: none;
}
.spg-range {
  accent-color: #FF8534;
  width: 100%;
}
.spg-toggle,
.spg-image-toggle {
  align-items: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  cursor: pointer;
  display: flex;
  gap: 11px;
  margin-bottom: 13px;
  padding: 12px 14px;
}
.spg-image-toggle span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spg-image-toggle strong {
  font-size: 14px;
}
.spg-image-toggle small {
  color: rgba(255, 255, 255, .48);
  font-size: 11px;
}
.spg-toggle input,
.spg-image-toggle input {
  accent-color: #FF8534;
  flex: none;
  height: 18px;
  width: 18px;
}
.spg-credits {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 13px;
}
.spg-generate {
  animation: spgshine 6s linear infinite;
  background: linear-gradient(135deg, #FF8534, #f5a623, #FF8534);
  background-size: 200% 100%;
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(255, 133, 52, .45);
  color: #1a1205;
  cursor: pointer;
  font-size: 15px;
  font-weight: 800;
  padding: 15px;
  transition: transform .2s, box-shadow .2s;
  width: 100%;
}
@keyframes spgshine {
  to {
    background-position: 200% 0;
  }
}
.spg-generate:hover:not(:disabled) {
  box-shadow: 0 12px 36px rgba(255, 133, 52, .62);
  transform: translateY(-1px);
}
.spg-generate:disabled {
  animation: none;
  cursor: not-allowed;
  opacity: .5;
}
.spg-progress {
  margin-top: 13px;
}
.spg-progress .muted.small {
  margin-bottom: 6px;
}
.spg-progress-track {
  background: rgba(255, 255, 255, .1);
  border-radius: 7px;
  height: 7px;
  overflow: hidden;
}
.spg-progress-fill {
  background: linear-gradient(90deg, #FF8534, #f5a623);
  border-radius: 7px;
  height: 100%;
  transition: width .4s ease;
  width: 100%;
}
.spg-progress-fill.is-writing {
  width: 35%;
}
.spg-progress-fill.is-image {
  width: 75%;
}
.spg-progress-fill.is-done {
  width: 100%;
}
.spg-preview-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.spg-img {
  border-radius: 14px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
  margin-bottom: 12px;
  width: 100%;
}
.spg-skel {
  animation: spgpulse 1.4s ease-in-out infinite;
  background: rgba(255, 255, 255, .04);
  border-radius: 14px;
  color: rgba(255, 255, 255, .6);
  margin-bottom: 12px;
  padding: 30px;
  text-align: center;
}
@keyframes spgpulse {
  0%,
  100% {
    opacity: .45;
  }
  50% {
    opacity: 1;
  }
}
.spg-post {
  background: rgba(0, 0, 0, .24);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  padding: 15px;
  white-space: pre-wrap;
}
.spg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}
.spg-publish {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 6px;
  padding-top: 15px;
}
.spg-publish h4 {
  font-size: 14px;
  margin: 0 0 11px;
}
.spg-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 13px;
}
.spg-target {
  align-items: center;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 7px;
  padding: 9px 13px;
}
.spg-target.active {
  background: rgba(255, 133, 52, .13);
  border-color: #FF8534;
}
.spg-err {
  color: #ff6b5e;
  font-size: 12px;
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.spg-posted {
  color: #54d18c;
  font-size: 13px;
  line-height: 1.6;
  margin-top: 13px;
}
.spg-posted a {
  color: #7fb3ff;
  overflow-wrap: anywhere;
}

.level-row .lb-name { min-width: 0; display: grid; gap: 4px; }
.level-row .lb-name small { display: flex; align-items: center; gap: 7px; color: var(--fg-muted); }
.level-mini-track {
  width: 72px;
  height: 5px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--bg-3);
}
.level-mini-track span { display: block; height: 100%; background: var(--grad-accent); }

.admin-retention {
  margin: 14px 0;
  padding-top: 14px;
  border-top: 1px solid var(--tile-bd);
}
.pack-section-nav {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.pack-section-nav::-webkit-scrollbar { display: none; }
.pack-section-nav .chip { flex: 0 0 auto; }
.loading-inline,
.empty-action {
  padding: 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
  color: var(--fg-muted);
}
.empty-action p { margin: 0 0 8px; }
.admin-retention h4 { margin: 0 0 10px; }
.pack-health {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--tile-bd);
  background: var(--tile-bg);
  border-radius: 8px;
}
.pack-health div { min-width: 0; }
.pack-health strong,
.pack-health small { display: block; }
.pack-health small { color: var(--fg-muted); margin-top: 2px; overflow-wrap: anywhere; }
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d54f4f;
  box-shadow: 0 0 0 4px color-mix(in srgb, #d54f4f 18%, transparent);
}
.status-dot.ok { background: #4bb98b; box-shadow: 0 0 0 4px color-mix(in srgb, #4bb98b 18%, transparent); }
.status-dot.warn { background: #e7a43c; box-shadow: 0 0 0 4px color-mix(in srgb, #e7a43c 18%, transparent); }
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.director-mode {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  border-radius: 6px;
}
.director-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.director-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--tile-bd);
  background: var(--tile-bg);
  border-radius: 8px;
}
.director-preview strong,
.director-preview small,
.director-history strong,
.director-history small { display: block; }
.director-preview small,
.director-history small { color: var(--fg-muted); margin-top: 2px; }
.director-history { padding: 8px 0; border-top: 1px solid var(--tile-bd); }
.admin-help {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg-3);
}
.admin-help summary { cursor: pointer; color: var(--orange); font-weight: 800; }
.admin-help p { margin: 8px 0 0; color: var(--fg-muted); font-size: 12px; line-height: 1.5; }
.admin-help pre {
  max-height: 280px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--fg-muted);
  font-size: 11px;
}
.admin-load-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg-3);
  color: var(--fg-muted);
  font-size: 12px;
}
.admin-load-banner .chip { margin-left: auto; }
.toggle-grid,
.admin-number-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.toggle-grid label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid var(--tile-bd);
  border-radius: 6px;
}
.setting-toggle { align-items: flex-start !important; }
.setting-toggle span { min-width: 0; display: grid; gap: 2px; }
.setting-toggle strong { color: var(--fg); font-size: 12px; }
.setting-toggle small,
.admin-number-grid small {
  display: block;
  color: var(--fg-muted);
  font-size: 10px;
  line-height: 1.35;
}
.admin-number-grid label {
  padding: 8px;
  border: 1px solid var(--tile-bd);
  border-radius: 6px;
}
.admin-number-grid input { width: 100%; margin: 4px 0; }
.admin-quest-row { padding: 10px 0; border-top: 1px solid var(--tile-bd); }
.admin-quest-copy {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(220px, 1.3fr);
  gap: 7px;
  margin: 7px 0;
}
.admin-quest-copy label {
  display: grid;
  gap: 3px;
  color: var(--fg-muted);
  font-size: 11px;
}
.admin-quest-copy input { width: 100%; }
.admin-quest-values {
  display: grid;
  grid-template-columns: minmax(130px, 1.2fr) 110px repeat(4, minmax(70px, 1fr)) auto;
  align-items: end;
  gap: 7px;
}
.admin-quest-values input,
.admin-quest-values select { width: 100%; margin-top: 3px; }
.admin-live-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.admin-live-tools label,
.qa-card > label,
.qa-card .grid2 label {
  display: grid;
  gap: 4px;
  color: var(--fg-muted);
  font-size: 11px;
}
.admin-live-tools .row { align-items: end; }
.welcome-button-editor {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
}
.welcome-button-row {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-top: 1px solid var(--tile-bd);
}
.welcome-button-fields {
  display: grid;
  grid-template-columns: minmax(100px, .7fr) minmax(150px, 1.3fr) 36px;
  gap: 7px;
  align-items: center;
}
.welcome-button-fields input { min-width: 0; margin: 0; }
.welcome-preview-buttons { display: flex; gap: 7px; margin-top: 7px; }
.clickable-preview {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 7px;
  cursor: zoom-in;
  margin-bottom: 10px;
}

.broadcast-media-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.broadcast-media-options label {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  font-size: 12px;
}
.broadcast-media-options input { width: 16px; flex: 0 0 16px; }
.file-picker {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px dashed var(--orange);
  border-radius: 7px;
  color: var(--orange);
  font-weight: 800;
  cursor: pointer;
}
.file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.broadcast-image-preview {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
}
.broadcast-image-preview img {
  width: 92px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
}
.broadcast-image-preview div { min-width: 0; display: grid; gap: 7px; }
.broadcast-image-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.broadcast-target-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.broadcast-target-row label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.broadcast-target-row label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.broadcast-target-row input[type="number"] { width: 100%; }
.broadcast-target-row input[type="checkbox"] {
  width: 22px;
  min-width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.setting-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 0;
}
.setting-line span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.setting-line small {
  color: var(--fg-muted);
  font-weight: 400;
}
.setting-line input[type="checkbox"] {
  width: 24px;
  min-width: 24px;
  height: 24px;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.form-grid-2 label {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.soft-divider {
  border: 0;
  border-top: 1px solid var(--tile-bd);
  margin: 14px 0;
}
.twofa-modal { max-width: 420px; }
.twofa-code-input {
  min-height: 56px;
  margin: 10px 0;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 6px;
}
.form-error {
  min-height: 18px;
  margin: 0 0 8px;
  color: #d94141;
  font-size: 12px;
}
.sync-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid var(--tile-bd);
  border-radius: 999px;
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 800;
}
.sync-fresh {
  border-color: rgba(46, 160, 104, 0.38);
  color: #3fbd7f;
  background: rgba(46, 160, 104, 0.08);
}
.sync-delayed,
.sync-unknown {
  border-color: rgba(235, 167, 45, 0.4);
  color: #d9a133;
  background: rgba(235, 167, 45, 0.08);
}
.sync-stale,
.sync-never {
  border-color: rgba(217, 65, 65, 0.35);
  color: #d95c5c;
  background: rgba(217, 65, 65, 0.07);
}
.resolved-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0;
  padding: 9px 10px;
  border: 1px solid rgba(46, 160, 104, 0.35);
  border-radius: 7px;
  background: rgba(46, 160, 104, 0.07);
}

/* v0.93 social profiles and Social Pulse */
.social-connect-center { border-color: rgba(46, 160, 104, 0.3); }
.social-connection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.social-connection {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-height: 126px;
  padding: 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 12px;
  background: var(--bg-2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.social-connection:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}
.social-connection.connected {
  border-color: rgba(46, 160, 104, 0.35);
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(46, 160, 104, 0.03) 100%);
  box-shadow: 0 0 15px rgba(46, 160, 104, 0.05);
}
.social-connection.connected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #31a66d;
}
.social-connection.disabled {
  opacity: 0.65;
}
.social-connection.error {
  border-color: rgba(232, 90, 90, 0.3);
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(232, 90, 90, 0.02) 100%);
}

.social-connection-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.social-provider-mark {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  color: var(--orange);
  font-size: 16px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.social-provider-mark.provider-x { background: #05070d; color: #fff; }
.social-provider-mark.provider-instagram {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: #fff;
}
.social-provider-mark.provider-tiktok {
  background: linear-gradient(135deg, #010101, #fe2c55);
  color: #fff;
}
.social-provider-mark.provider-youtube { background: #ff0033; color: #fff; }
.social-provider-mark.provider-facebook { background: #1877f2; color: #fff; }
.social-provider-mark.provider-socio {
  background: linear-gradient(135deg, #ff8534, #22285a);
  color: #fff;
}
.social-connection:hover .social-provider-mark {
  transform: scale(1.05);
  border-color: var(--orange-glow);
}

.social-connection-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.social-connection-copy strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--fg);
}
.social-connection-copy small {
  font-size: 12px;
  color: var(--fg-muted);
  overflow-wrap: anywhere;
}
.social-connection-copy .provider-note {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--fg-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.social-sync-ok {
  color: #31a66d !important;
  font-weight: 600;
  font-size: 11px !important;
}
.social-sync-error {
  color: #e85a5a !important;
  font-weight: 600;
  font-size: 11px !important;
}

/* Glowing status dots */
.connection-status-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #555;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.social-connection.connected .connection-status-dot {
  background: #31a66d;
  box-shadow: 0 0 8px rgba(49, 166, 109, 0.6);
  animation: glow-pulse-green 2s infinite ease-in-out;
}
.social-connection.error .connection-status-dot {
  background: #e85a5a;
  box-shadow: 0 0 8px rgba(232, 90, 90, 0.6);
}
.social-connection:not(.connected):not(.disabled) .connection-status-dot {
  background: var(--orange);
  box-shadow: 0 0 8px rgba(255, 133, 52, 0.6);
}

@keyframes glow-pulse-green {
  0% { transform: scale(1); box-shadow: 0 0 8px rgba(49, 166, 109, 0.4); }
  50% { transform: scale(1.15); box-shadow: 0 0 12px rgba(49, 166, 109, 0.8); }
  100% { transform: scale(1); box-shadow: 0 0 8px rgba(49, 166, 109, 0.4); }
}

.social-connection-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}
.social-connection-actions button {
  flex: 1;
  min-height: 34px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  white-space: nowrap;
}

/* Syncing spinner animation */
.sync-loader-wrapper {
  position: absolute;
  inset: 0;
  background: rgba(from var(--bg-2) r g b / 80%);
  display: grid;
  place-items: center;
  z-index: 10;
  backdrop-filter: blur(2px);
}
.sync-loader-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 133, 52, 0.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.connected-publish {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(46, 160, 104, 0.3);
  border-radius: 8px;
  background: rgba(46, 160, 104, 0.06);
}
.connected-publish-targets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
}
.connected-publish-targets label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
}
.public-profile-tabs { margin-top: 16px; }
.public-profile-feed { display: grid; gap: 10px; margin-top: 12px; }
.platform-filter {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scrollbar-width: none;
}
.platform-filter::-webkit-scrollbar { display: none; }
.platform-filter button {
  min-width: 32px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0 8px;
  border: 1px solid var(--tile-bd);
  border-radius: 6px;
  background: transparent;
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.platform-filter button:hover {
  border-color: var(--fg-muted);
  color: var(--fg);
}
.platform-filter button.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.platform-filter button.active.platform-all {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.platform-filter button.active.platform-x {
  background: #71767b;
  border-color: #71767b;
  color: #fff;
}
.platform-filter button.active.platform-instagram {
  background: #e1306c;
  border-color: #e1306c;
  color: #fff;
}
.platform-filter button.active.platform-tiktok {
  background: #fe2c55;
  border-color: #fe2c55;
  color: #fff;
}
.platform-filter button.active.platform-youtube {
  background: #ff0000;
  border-color: #ff0000;
  color: #fff;
}
.platform-filter button.active.platform-facebook {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}
.platform-filter button.active.platform-socio {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.verified-social { border-color: rgba(46, 160, 104, 0.4); }
.public-follow-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.public-follow-stats button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--fg-muted);
  font: inherit;
  cursor: pointer;
}
.public-follow-stats button:hover { color: var(--orange); }

.social-pulse-page {
  width: min(100%, 820px);
  margin-inline: auto;
}
.pulse-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--tile-bd);
}
.pulse-header h2 { margin: 3px 0 4px; }
.pulse-header p {
  max-width: 620px;
  margin: 0;
  color: var(--fg-muted);
  line-height: 1.5;
}
.pulse-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.icon-label-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.icon-label-btn .ui-svg {
  width: 14px;
  height: 14px;
}
.pulse-destinations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 10px;
  border-bottom: 1px solid var(--tile-bd);
}
.pulse-destinations button {
  min-height: 42px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--fg-muted);
  font-weight: 800;
}
.pulse-destinations button.active {
  border-bottom-color: var(--orange);
  color: var(--orange);
}
.pulse-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.pulse-summary .summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--tile-bd);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(255, 133, 52, 0.03) 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow);
}
.pulse-summary .summary-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 133, 52, 0.3);
  box-shadow: 0 8px 20px rgba(255, 133, 52, 0.08);
}
.pulse-summary .summary-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 133, 52, 0.1);
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--orange);
  flex-shrink: 0;
}
.pulse-summary .summary-card div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pulse-summary strong {
  color: var(--fg);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}
.pulse-summary span {
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.pulse-rising-strip {
  display: grid;
  gap: 9px;
  margin: -2px 0 14px;
  padding: 12px;
  border: 1px solid rgba(255, 133, 52, 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 133, 52, 0.12), transparent 34%),
    var(--bg-2);
}
.pulse-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pulse-strip-head strong {
  color: var(--fg);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
.pulse-rising-scroll {
  display: grid;
  grid-auto-columns: minmax(190px, 72%);
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}
.pulse-rising-item {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--tile-bd);
  border-radius: 10px;
  background: rgba(from var(--bg-3) r g b / 56%);
  color: var(--fg);
  text-align: left;
  scroll-snap-align: start;
}
.pulse-rising-item > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.pulse-rising-item strong,
.pulse-rising-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse-rising-item strong { font-size: 12px; }
.pulse-rising-item small { color: var(--fg-muted); font-size: 10px; }
.pulse-rising-item b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 133, 52, 0.34);
  border-radius: 50%;
  color: var(--orange);
  font-size: 13px;
}
.pulse-eyebrow,
.admin-section-kicker {
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.boost-missions-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}
.boost-missions-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 133, 52, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 190, 95, 0.16), transparent 32%),
    linear-gradient(135deg, rgba(255, 133, 52, 0.10), var(--bg-2));
  box-shadow: var(--shadow);
}
.boost-missions-head h3 {
  margin: 3px 0 4px;
  font-size: 20px;
}
.boost-missions-head p {
  margin: 0;
  color: var(--fg-muted);
  line-height: 1.45;
}
.xp-pill {
  min-width: 112px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 133, 52, 0.35);
  border-radius: 10px;
  background: rgba(255, 133, 52, 0.12);
  color: var(--fg);
  font-weight: 900;
  white-space: nowrap;
}
.boost-mission-list {
  display: grid;
  gap: 10px;
}
.boost-mission-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--bg-2), rgba(255, 133, 52, 0.04));
  box-shadow: var(--shadow);
}
.boost-mission-card.complete {
  border-color: rgba(53, 184, 121, 0.42);
  background: linear-gradient(135deg, rgba(53, 184, 121, 0.09), var(--bg-2));
}
.mission-art {
  width: 76px;
  height: 76px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 133, 52, 0.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 190, 95, 0.24), transparent 58%),
    rgba(255, 133, 52, 0.08);
  color: var(--orange);
  font-size: 28px;
  font-weight: 900;
}
.mission-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mission-art.mission-connect { color: #fff; background: #080b14; }
.mission-art.mission-comment { color: #b996ff; background: rgba(139, 92, 246, 0.13); }
.mission-art.mission-repost { color: #35b879; background: rgba(53, 184, 121, 0.12); }
.mission-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.mission-title-row,
.mission-reward-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.mission-title-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mission-status {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 133, 52, 0.14);
  color: var(--orange);
  font-size: 10px;
  font-weight: 900;
}
.mission-copy p,
.mission-copy small {
  margin: 0;
  color: var(--fg-muted);
  line-height: 1.35;
}
.mission-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mission-reward-row {
  color: var(--fg-2);
  font-size: 12px;
  font-weight: 800;
}
.mission-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 133, 52, 0.12);
}
.mission-progress > div {
  height: 100%;
  border-radius: inherit;
  background: var(--grad-accent);
  box-shadow: 0 0 10px rgba(255, 133, 52, 0.35);
}
.mission-action {
  min-width: 104px;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--grad-accent);
  color: #0a0e1d;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(255, 133, 52, 0.18);
}
.boost-mission-card.complete .mission-action {
  background: rgba(53, 184, 121, 0.18);
  color: #35b879;
  box-shadow: none;
}
.mission-action:disabled {
  cursor: default;
  opacity: 0.9;
}
.mission-empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 14px;
  border: 1px dashed rgba(255, 133, 52, 0.34);
  border-radius: 12px;
  background: rgba(255, 133, 52, 0.06);
  color: var(--fg-muted);
}
.mission-empty strong { color: var(--fg); }
.mission-empty > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-recommendation {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), var(--bg-2));
  color: var(--fg);
  text-align: left;
}
.ai-orb {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 133, 52, 0.35);
  background: rgba(255, 133, 52, 0.12);
  color: var(--orange);
  font-weight: 900;
}
.ai-recommendation span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.ai-recommendation small {
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-recommendation b {
  color: var(--orange);
  font-size: 24px;
}
.pulse-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 16px;
  background: rgba(from var(--bg-2) r g b / 85%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pulse-feed-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--bg-3);
  margin-bottom: 0;
}
.pulse-feed-tabs button {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--fg-muted);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}
.pulse-feed-tabs button:hover {
  color: var(--fg);
}
.pulse-feed-tabs button.active {
  background: var(--bg-2);
  color: var(--orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-weight: 800;
}

/* Platform filtering */
.platform-filter.feed-filter {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Preferences styling */
.pulse-preferences {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--tile-bd);
  color: var(--fg-muted);
  font-size: 12.5px;
}
.pulse-preferences label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.pulse-preferences label:hover {
  color: var(--fg);
}
.pulse-preferences input[type="checkbox"] {
  accent-color: var(--orange);
  cursor: pointer;
}
.pulse-time-filter select {
  min-height: 28px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--fg);
  padding: 2px 24px 2px 8px;
  cursor: pointer;
  outline: none;
  font-weight: 600;
  transition: all 0.2s ease;
}
.pulse-time-filter select:hover {
  border-color: var(--fg-muted);
}
.pulse-search {
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 16px;
  background: var(--bg-2);
}
.pulse-search-input {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  border-radius: 30px;
  padding: 4px 6px 4px 14px;
  transition: all 0.25s ease;
}
.pulse-search-input:focus-within {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 133, 52, 0.15);
}
.pulse-search-input .search-icon {
  font-size: 14px;
  color: var(--fg-muted);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.pulse-search-input input {
  flex: 1;
  min-width: 0;
  border: none !important;
  background: transparent !important;
  color: var(--fg) !important;
  padding: 8px 0 !important;
  font-size: 13.5px !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.pulse-search-input button {
  min-height: 34px !important;
  padding: 0 16px !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  flex-shrink: 0;
}
.pulse-search-results,
.social-graph-list { display: grid; gap: 6px; margin-top: 10px; }
.pulse-search-results > button,
.social-graph-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
  color: var(--fg);
  text-align: left;
}
.pulse-search-results > button > span:nth-child(2),
.social-graph-list > button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.pulse-search-results small,
.social-graph-list small { color: var(--fg-muted); }
.pulse-feed { display: grid; gap: 12px; }
.pulse-post {
  overflow: hidden;
  border: 1px solid var(--tile-bd);
  border-radius: 16px;
  background: var(--bg-2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow);
}
.pulse-post.hot {
  border-color: rgba(255, 133, 52, 0.34);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 133, 52, 0.12), transparent 30%),
    var(--bg-2);
}
.pulse-post.rising {
  border-color: rgba(37, 167, 187, 0.24);
}
.pulse-post:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 133, 52, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.pulse-momentum {
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(37, 167, 187, 0.08);
  color: #25a7bb;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.follow-btn {
  padding: 5px 12px;
  border-radius: 16px;
  border: 1px solid var(--orange);
  background: transparent;
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
}
.follow-btn:hover {
  background: rgba(255, 133, 52, 0.08);
}
.follow-btn.following {
  border-color: var(--tile-bd);
  color: var(--fg-muted);
  background: rgba(from var(--bg-3) r g b / 30%);
}
.follow-btn.following:hover {
  border-color: rgba(232, 90, 90, 0.4);
  color: #e85a5a;
  background: rgba(232, 90, 90, 0.05);
}
.pulse-body {
  margin: 0;
  padding: 14px 16px;
  line-height: 1.55;
  font-size: 14.5px;
  color: var(--fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pulse-reference {
  margin: 0 16px 14px;
  overflow: hidden;
  border: 1px solid var(--tile-bd);
  border-radius: 12px;
  background: var(--bg-3);
  transition: border-color 0.2s ease;
}
.pulse-reference:hover {
  border-color: var(--fg-muted);
}
.pulse-reference-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 0;
}
.pulse-reference-author img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.pulse-reference-author strong {
  font-size: 13.5px;
  font-weight: 700;
}
.pulse-reference-author small {
  color: var(--fg-muted);
  font-size: 11.5px;
}
.pulse-reference > p {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 13.5px;
  color: var(--fg-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pulse-reference > img {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-top: 1px solid var(--tile-bd);
}
.pulse-reference-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  border-top: 1px solid var(--tile-bd);
  background: var(--tile-bd);
}
.pulse-reference-media img {
  width: 100%;
  height: 100%;
  max-height: 300px;
  object-fit: cover;
  background: var(--bg);
}
.pulse-reference-media img:only-child { grid-column: 1 / -1; }
.pulse-media {
  position: relative;
  display: block;
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  border: 0;
  border-top: 1px solid var(--tile-bd);
  border-bottom: 1px solid var(--tile-bd);
  border-radius: 0;
  padding: 0;
  background: var(--bg-3);
  cursor: pointer;
}
.pulse-media img {
  display: block;
  width: 100%;
  max-height: 500px;
  object-fit: cover;
}
.pulse-media-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(6, 8, 20, 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(4px);
}
.external-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px 0;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 500;
  border-top: 1px solid rgba(from var(--tile-bd) r g b / 40%);
}
.external-metrics span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pulse-score-strip {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 12px 16px 0;
  padding: 10px;
  border: 1px solid rgba(255, 133, 52, 0.18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 133, 52, 0.08), rgba(37, 167, 187, 0.05));
}
.pulse-score-strip.solo {
  grid-template-columns: 1fr;
}
.viral-score-ring {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  align-content: center;
  border: 1px solid rgba(255, 133, 52, 0.38);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 190, 95, 0.22), transparent 58%),
    rgba(255, 133, 52, 0.08);
  color: var(--orange);
  box-shadow: 0 0 24px rgba(255, 133, 52, 0.10);
}
.viral-score-ring strong {
  color: var(--orange);
  font-size: 20px;
  line-height: 1;
}
.viral-score-ring span {
  color: var(--fg-muted);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}
.pulse-smart-note {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.pulse-smart-note strong {
  color: var(--fg);
  overflow-wrap: anywhere;
}
.pulse-smart-note small {
  color: var(--fg-muted);
  line-height: 1.35;
}
.pulse-boost {
  width: calc(100% - 32px);
  display: none;
  justify-content: space-between;
  align-items: center;
  margin: 12px auto 0;
  padding: 12px 16px;
  border: 1px solid var(--tile-bd);
  border-radius: 14px;
  background: var(--bg-3);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}
.pulse-boost:hover {
  transform: translateY(-1px) scale(0.99);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pulse-boost > span:first-child { display: grid; gap: 2px; }
.pulse-boost b {
  font-size: 13.5px;
  font-weight: 700;
  display: block;
  transition: color 0.2s ease;
}
.pulse-boost small {
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 2px;
  display: block;
}
.pulse-boost .arrow-icon {
  font-size: 16px;
  color: var(--fg-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.pulse-boost:hover .arrow-icon {
  transform: translate(2px, -2px);
  color: var(--fg);
}

/* Platform-specific premium CTA designs */
.pulse-boost.boost-x {
  border-color: rgba(255, 255, 255, 0.15);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
}
.pulse-boost.boost-x b { color: #fff; }
.pulse-boost.boost-x:hover { border-color: rgba(255, 255, 255, 0.3); }

.pulse-boost.boost-instagram {
  border-color: rgba(225, 48, 108, 0.25);
  background: linear-gradient(90deg, rgba(225, 48, 108, 0.08) 0%, rgba(225, 48, 108, 0.01) 100%);
}
.pulse-boost.boost-instagram b { color: #e1306c; }
.pulse-boost.boost-instagram:hover { border-color: rgba(225, 48, 108, 0.5); }

.pulse-boost.boost-youtube {
  border-color: rgba(255, 0, 0, 0.25);
  background: linear-gradient(90deg, rgba(255, 0, 0, 0.08) 0%, rgba(255, 0, 0, 0.01) 100%);
}
.pulse-boost.boost-youtube b { color: #ff0000; }
.pulse-boost.boost-youtube:hover { border-color: rgba(255, 0, 0, 0.5); }

.pulse-boost.boost-tiktok {
  border-color: rgba(0, 242, 254, 0.25);
  background: linear-gradient(90deg, rgba(0, 242, 254, 0.08) 0%, rgba(250, 44, 85, 0.04) 100%);
}
.pulse-boost.boost-tiktok b { color: #00f2fe; }
.pulse-boost.boost-tiktok:hover { border-color: rgba(0, 242, 254, 0.5); }

.pulse-boost.boost-facebook {
  border-color: rgba(24, 119, 242, 0.25);
  background: linear-gradient(90deg, rgba(24, 119, 242, 0.08) 0%, rgba(24, 119, 242, 0.01) 100%);
}
.pulse-boost.boost-facebook b { color: #1877f2; }
.pulse-boost.boost-facebook:hover { border-color: rgba(24, 119, 242, 0.5); }

.pulse-boost.boost-socio {
  border-color: rgba(139, 92, 246, 0.25);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.01) 100%);
}
.pulse-boost.boost-socio b { color: #8b5cf6; }
.pulse-boost.boost-socio:hover { border-color: rgba(139, 92, 246, 0.5); }

.pulse-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  margin-top: 12px;
  border-top: 1px solid var(--tile-bd);
  background: rgba(from var(--bg-3) r g b / 30%);
}
.pulse-actions button {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  border: 0;
  border-right: 1px solid var(--tile-bd);
  border-radius: 0;
  background: transparent;
  color: var(--fg-muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pulse-actions button:last-child { border-right: 0; }
.pulse-actions button small {
  max-width: 100%;
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pulse-actions button:hover {
  background: rgba(from var(--bg-3) r g b / 50%);
  color: var(--fg);
}
.pulse-actions button.active {
  color: var(--orange);
  background: rgba(255, 133, 52, 0.06);
}
.pulse-actions button.active small { color: var(--orange); }
.pulse-actions .pulse-action-primary {
  background: rgba(255, 133, 52, 0.10);
  color: var(--orange);
}
.pulse-post > .feed-comments { padding: 16px; }
.pulse-loading,
.pulse-empty {
  padding: 22px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg-muted);
  text-align: center;
}
.pulse-empty { display: grid; justify-items: center; gap: 8px; }
.pulse-empty strong { color: var(--fg); }
.pulse-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.modal-backdrop.social-flow-backdrop,
.modal-backdrop.social-graph-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 520;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding:
    max(16px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  background: rgba(4, 6, 18, .78);
  backdrop-filter: blur(10px);
}
.social-flow-dialog,
.social-graph-dialog {
  width: min(92vw, 480px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-2);
  box-shadow: 0 24px 70px rgba(0,0,0,.58);
}
.social-flow-dialog {
  display: grid;
  justify-items: start;
  gap: 10px;
}
.social-flow-dialog h2,
.social-flow-dialog p { margin: 0; }
.social-flow-dialog > small { color: var(--fg-muted); line-height: 1.45; }
.social-flow-progress { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.social-flow-progress span { height: 4px; border-radius: 4px; background: var(--tile-bd); }
.social-flow-progress.preparing span:first-child,
.social-flow-progress.ready span:first-child,
.social-flow-progress.blocked span:first-child,
.social-flow-progress.waiting span:nth-child(-n+2),
.social-flow-progress.success span { background: var(--orange); }
.social-graph-dialog .section-line { margin-bottom: 4px; }
.social-graph-list { max-height: 64vh; overflow-y: auto; }
.social-graph-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
}
.social-graph-profile {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--fg);
  text-align: left;
}
.social-graph-profile > span:last-child { min-width: 0; display: grid; gap: 2px; }

@media (max-width: 560px) {
  .pulse-header { align-items: stretch; flex-direction: column; }
  .pulse-header-actions { width: 100%; }
  .pulse-header-actions > * { flex: 1; }
  .social-connection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .social-connection {
    min-height: 132px;
    padding: 10px;
  }
  .social-connection-top {
    gap: 8px;
  }
  .social-provider-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 13px;
  }
  .social-connection-copy strong {
    font-size: 12px;
  }
  .social-connection-copy small {
    font-size: 10px;
  }
  .social-connection-copy .provider-note {
    -webkit-line-clamp: 1;
  }
  .social-connection-actions {
    gap: 5px;
  }
  .social-connection-actions button {
    min-height: 30px;
    padding-inline: 6px;
    font-size: 10.5px;
  }
  .profile-quick-stats,
  .creator-analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pulse-summary > div { padding: 9px; }
  .pulse-summary strong { font-size: 17px; }
  .pulse-destinations button { min-width: 0; padding-inline: 4px; font-size: 12px; }
  .pulse-rising-strip { padding: 10px; }
  .pulse-rising-scroll { grid-auto-columns: minmax(176px, 78%); }
  .pulse-search-input { align-items: center; flex-direction: row; }
  .pulse-search-results > button { grid-template-columns: 40px minmax(0,1fr); }
  .pulse-search-results > button > .muted { grid-column: 2; }
  .pulse-time-filter { flex: 1 1 140px; justify-content: space-between; }
  .boost-missions-head { align-items: stretch; flex-direction: column; }
  .xp-pill { width: fit-content; }
  .boost-mission-card {
    grid-template-columns: 54px minmax(0, 1fr) 88px;
    gap: 9px;
    align-items: center;
    padding: 10px;
  }
  .mission-art {
    width: 54px;
    height: 54px;
    font-size: 20px;
  }
  .mission-action {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 11px;
  }
  .mission-title-row,
  .mission-reward-row {
    align-items: center;
    flex-direction: row;
    gap: 4px;
  }
  .mission-title-row strong {
    font-size: 12px;
  }
  .mission-status {
    max-width: 72px;
    overflow: hidden;
    padding: 2px 6px;
    font-size: 8.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mission-copy {
    gap: 4px;
  }
  .mission-copy p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .mission-copy small {
    display: none;
  }
  .mission-reward-row {
    font-size: 10px;
  }
  .mission-progress {
    height: 5px;
  }
  .pulse-score-strip {
    grid-template-columns: 58px minmax(0, 1fr);
    margin-inline: 12px;
  }
  .viral-score-ring {
    width: 54px;
    height: 54px;
  }
  .pulse-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pulse-body { padding: 12px; font-size: 14px; }
  .pulse-reference { margin-inline: 12px; }
  .pulse-boost { width: calc(100% - 24px); }
  .social-flow-dialog,
  .social-graph-dialog {
    width: 100%;
    max-height: 84dvh;
    padding: 18px;
  }
}

/* v0.93 admin organization */
.admin-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}
.admin-quick-actions button {
  min-height: 104px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: center;
  gap: 4px 9px;
  padding: 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg);
  text-align: left;
}
.admin-quick-actions button > span { grid-row: 1 / 3; font-size: 22px; }
.admin-quick-actions button small { color: var(--fg-muted); line-height: 1.35; }
.account-doctor { border-color: rgba(25, 164, 184, 0.3); }
.account-doctor-search input { flex: 1; min-width: 0; }

.mystery-settings,
.setting-subcard {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
}
.compact-grid { align-items: end; margin: 8px 0; }
.mystery-reveal {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  padding: 14px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--tile));
}
.reward-rarity { text-transform: uppercase; font-size: 11px; font-weight: 800; }
.reward-chip-list { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.reward-chip {
  padding: 6px 9px;
  border: 1px solid var(--tile-bd);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.rarity-common { color: var(--text); }
.rarity-rare { color: #36b9d2; }
.rarity-epic { color: #b884ff; }
.rarity-legendary { color: #ff9c42; }
.eng-details { margin-top: 10px; }
.eng-details summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.reward-history-row,
.prediction-admin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--tile-bd);
}
.reward-history-row > div,
.prediction-admin-row > div { display: grid; gap: 3px; flex: 1; min-width: 0; }
.reward-history-row strong,
.prediction-admin-row strong { overflow-wrap: anywhere; }
.prediction-admin-list { margin-top: 12px; max-height: 360px; overflow-y: auto; }
.prediction-card {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--tile);
}
.prediction-card.featured { border-color: color-mix(in srgb, var(--accent) 65%, var(--tile-bd)); }
.prediction-cover {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
}
.prediction-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 12px; color: var(--muted); }
.prediction-deadline { font-size: 12px; color: var(--accent); margin: 8px 0; }
.prediction-stake { display: grid; gap: 5px; margin: 10px 0; }
.prediction-options { display: grid; gap: 8px; }
.prediction-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--card);
  color: var(--text);
  text-align: left;
}
.prediction-option small { color: var(--muted); text-align: right; }
.prediction-option.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.prediction-own-entry { color: var(--ok); font-size: 12px; font-weight: 700; }
.image-progress { display: grid; gap: 6px; margin: 12px 0; }
.image-history-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.image-history-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 0;
  min-width: 0;
  cursor: zoom-in;
}
.image-history-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.image-history-grid small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 4px; }
.generated-image-result { display: grid; gap: 8px; margin-top: 10px; }
.image-preview-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg);
  cursor: zoom-in;
}
.image-preview-button img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
}
.image-lightbox { z-index: 500; }
.image-lightbox-panel {
  width: min(96vw, 980px);
  max-height: 94vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-2);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.image-lightbox-panel > img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #050713;
}
.image-lightbox-actions { justify-content: flex-end; padding: 10px 14px; }
.doctor-telegram-check input { width: 100%; margin: 7px 0; }

@media (max-width: 520px) {
  .reward-history-row { align-items: flex-start; flex-wrap: wrap; }
  .prediction-option { align-items: flex-start; }
  .prediction-option small { max-width: 42%; }
  .welcome-button-fields { grid-template-columns: minmax(0, 1fr) 36px; }
  .welcome-button-fields input:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .welcome-button-fields .icon-btn { grid-column: 2; grid-row: 1; }
}
.doctor-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}
.doctor-summary span {
  padding: 9px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
  color: var(--fg-muted);
  text-align: center;
}
.doctor-summary b { display: block; color: var(--orange); font-size: 20px; }
.doctor-issue {
  margin-top: 6px;
  padding: 8px 10px;
  border-left: 3px solid #d9a133;
  background: rgba(217, 161, 51, 0.08);
  color: var(--fg);
}
.doctor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.doctor-actions > div {
  padding: 10px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
}
.doctor-actions strong,
.doctor-actions small { display: block; }
.doctor-actions small { min-height: 34px; margin: 4px 0 8px; color: var(--fg-muted); }
.doctor-actions .doctor-full-repair {
  grid-column: 1 / -1;
  border-color: rgba(255, 139, 70, .5);
  background: rgba(255, 139, 70, .06);
}
.profile-section-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 14px;
  padding: 6px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-2);
  position: sticky;
  top: 76px;
  z-index: 25;
}
.profile-section-tabs button {
  min-width: 0;
  min-height: 52px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}
.profile-section-tabs button span { font-size: 18px; line-height: 1; }
.profile-section-tabs button strong {
  max-width: 100%;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-section-tabs button.active {
  color: #0a0e1d;
  border-color: rgba(255, 177, 105, .7);
  background: var(--grad-accent);
  box-shadow: 0 5px 15px rgba(255, 133, 52, .18);
}
.profile-post-empty {
  padding: 14px;
  border: 1px dashed var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
}
.profile-post-empty p { margin-bottom: 0; }
.social-sync-ok { color: #55c88a; }
.social-sync-error {
  color: #ff7a7a;
  overflow-wrap: anywhere;
}
.social-connection-actions button:disabled {
  opacity: .55;
  cursor: wait;
}
.system-runtime-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.system-runtime-details > div {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
}
.system-runtime-details code {
  overflow-wrap: anywhere;
  white-space: normal;
}
.system-runtime-details .runtime-url-detail {
  border-color: rgba(46, 160, 104, .4);
}
.runtime-url-detail .chip {
  justify-self: start;
}
.runtime-url-detail small {
  line-height: 1.45;
}
.system-warning-list {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(241, 171, 60, .45);
  border-radius: 7px;
  background: rgba(241, 171, 60, .08);
}
.system-warning-list p { margin: 6px 0 0; color: var(--fg); }
@media (max-width: 520px) {
  .profile-section-tabs { top: 68px; }
  .profile-section-tabs button { min-height: 48px; }
  .profile-section-tabs button strong { font-size: 9px; }
  .system-runtime-details { grid-template-columns: 1fr; }
}
.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--tile-bd);
}
.admin-section-header h3 { margin: 3px 0 4px; font-size: 24px; }
.admin-section-header p { max-width: 720px; margin: 0; color: var(--fg-muted); line-height: 1.45; }
.broadcast-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, .85fr);
  gap: 12px;
  align-items: start;
}
.broadcast-side { display: grid; gap: 12px; }
.broadcast-composer-card textarea { width: 100%; }
.broadcast-option-panel {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
}
.broadcast-switches { margin-top: 10px; }
.broadcast-target-heading { margin-top: 14px; }
.broadcast-target-list {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.broadcast-target-row > label > span { min-width: 0; display: grid; gap: 2px; }
.broadcast-target-row > label > span strong,
.broadcast-target-row > label > span small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.broadcast-target-row > label > span small { color: var(--fg-muted); font-size: 10px; }
.broadcast-submit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.scheduled-broadcast-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--tile-bd);
}
.scheduled-broadcast-row > div { min-width: 0; display: grid; gap: 3px; }
.scheduled-broadcast-row small { color: var(--fg-muted); }
.scheduled-broadcast-row p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--fg-2);
  font-size: 12px;
}
.delivery-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.delivery-report-item {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid rgba(46, 160, 104, 0.32);
  border-radius: 7px;
  background: rgba(46, 160, 104, 0.06);
}
.delivery-report-item.failed {
  border-color: rgba(217, 65, 65, 0.3);
  background: rgba(217, 65, 65, 0.06);
}
.delivery-report-item small { color: var(--fg-muted); overflow-wrap: anywhere; }
.provider-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}
.provider-health-card {
  min-height: 176px;
  padding: 12px;
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  background: var(--bg-2);
}
.provider-health-card.ready { border-color: rgba(46, 160, 104, 0.38); }
.provider-health-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
}
.provider-health-head > div { min-width: 0; display: grid; gap: 2px; }
.provider-health-head small { color: var(--fg-muted); }
.provider-state {
  color: #d95c5c;
  font-size: 9px;
  font-weight: 900;
}
.provider-health-card.ready .provider-state { color: #31a66d; }
.provider-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 12px 0 8px;
}
.provider-capabilities span {
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--fg-muted);
  font-size: 9px;
  font-weight: 800;
}
.provider-capabilities span.on { color: #31a66d; }
.provider-missing { display: grid; gap: 4px; }
.provider-missing small { color: var(--fg-muted); }
.provider-missing code { overflow-wrap: anywhere; color: #d95c5c; font-size: 10px; }
.social-cost-guard {
  display: grid;
  gap: 12px;
  border-color: rgba(255, 145, 77, 0.28);
}
.social-cost-guard h3 { margin: 2px 0 5px; }
.social-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.social-policy-grid > div {
  display: grid;
  gap: 3px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg-2);
}
.social-policy-grid strong {
  color: var(--orange);
  font-size: 20px;
}
.social-policy-grid span {
  color: var(--fg-muted);
  font-size: 10px;
}
.social-admin-table { display: grid; }
.social-platform-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 10px;
  scrollbar-width: none;
}
.social-platform-tabs::-webkit-scrollbar { display: none; }
.social-platform-tabs button {
  align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  color: var(--fg);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 36px;
  padding: 7px 10px;
}
.social-platform-tabs button.active {
  background: var(--grad-accent);
  border-color: transparent;
  color: #0a0e1d;
}
.social-platform-tabs b {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 10px;
  min-width: 20px;
  padding: 2px 6px;
}
.social-provider-mark.small {
  height: 18px;
  width: 18px;
}
.social-admin-pagination {
  align-items: center;
  border-top: 1px solid var(--tile-bd);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 10px 0;
}
.social-admin-pagination > span,
.social-admin-pagination label span {
  color: var(--fg-muted);
  font-size: 12px;
}
.social-admin-pagination label {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}
.social-admin-pagination select {
  min-height: 34px;
  padding: 6px 28px 6px 10px;
}
.social-admin-pagination > div {
  display: inline-flex;
  gap: 6px;
}
.social-admin-row {
  display: grid;
  grid-template-columns: 38px minmax(130px, 1fr) minmax(150px, 1.2fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--tile-bd);
}
.social-admin-identity,
.social-admin-sync { min-width: 0; display: grid; gap: 2px; }
.social-admin-identity small,
.social-admin-sync small {
  overflow: hidden;
  color: var(--fg-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-admin-sync strong { color: #31a66d; font-size: 11px; text-transform: uppercase; }
.social-admin-sync strong.error { color: #d95c5c; }
.social-admin-more {
  align-items: center;
  border-top: 1px solid var(--tile-bd);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-top: 12px;
}
.social-admin-more span {
  color: var(--fg-muted);
  font-size: 12px;
}
.social-x-activity-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.daily-category-manager {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--tile-bd);
}
.daily-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.daily-category-toggle {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 9px;
  border: 1px solid var(--tile-bd);
  border-radius: 7px;
  background: var(--bg);
  color: var(--fg);
  text-align: left;
}
.daily-category-toggle strong { color: var(--fg-muted); font-size: 10px; }
.daily-category-toggle.active { border-color: rgba(46, 160, 104, 0.4); }
.daily-category-toggle.active strong { color: #31a66d; }

@media (max-width: 720px) {
  .morning-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .morning-footer { align-items: flex-start; }
  .reminder-grid,
  .toggle-grid,
  .admin-number-grid,
  .admin-live-tools,
  .director-actions-grid,
  .broadcast-media-options,
  .form-grid-2 { grid-template-columns: 1fr; }
  .admin-quest-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-health-grid,
  .social-policy-grid,
  .broadcast-workspace,
  .admin-quick-actions { grid-template-columns: 1fr; }
  .doctor-actions,
  .delivery-report-grid { grid-template-columns: 1fr; }
  .social-admin-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: start;
  }
  .social-admin-sync { grid-column: 2 / 4; }
  .social-admin-pagination {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .social-admin-pagination > div,
  .social-admin-pagination label {
    justify-content: space-between;
  }
  .pulse-header,
  .admin-section-header { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 440px) {
  .morning-hub { padding: 12px; }
  .morning-focus { grid-template-columns: 32px minmax(0, 1fr); }
  .morning-focus b { grid-column: 2; }
  .morning-action { min-height: 66px; padding: 8px; }
  .morning-footer { display: grid; }
  .morning-season { width: 100%; }
  .momentum-week { gap: 4px; }
  .momentum-day { min-height: 40px; }
  .morning-rewards > div { grid-template-columns: 20px minmax(0, 1fr); }
  .morning-rewards small { grid-column: 2; }
  .quest-row { display: grid; }
  .quest-reward {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .league-row { display: grid; grid-template-columns: 32px 34px minmax(0, 1fr) auto; }
  .league-row .muted { grid-column: 3; }
  .competition-banner { align-items: flex-start; display: grid; }
  .profile-banner-controls { align-items: stretch; flex-direction: column; }
  .showcase-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); }
  .showcase-row select { grid-column: 2; width: 100%; }
  .social-link-row { grid-template-columns: 1fr; }
  .home-social-list { grid-template-columns: 1fr; }
  .home-social-row { grid-template-columns: 58px minmax(0, 1fr); }
  .feed-author { align-items: flex-start; }
  .feed-signal { display: none; }
  .feed-composer-fields { grid-template-columns: 1fr; }
  .feed-composer-actions .muted { width: 100%; margin-left: 0; }
  .feed-comment-compose { grid-template-columns: 1fr; }
  .admin-quest-copy,
  .admin-quest-values { grid-template-columns: 1fr; }
  .broadcast-target-row { grid-template-columns: minmax(0, 1fr) 88px; }
  .pulse-author { align-items: flex-start; }
  .pulse-author-actions { display: grid; justify-items: end; }
  .pulse-momentum { display: none; }
  .pulse-toolbar { position: static; }
  .pulse-feed-tabs { overflow-x: auto; justify-content: flex-start; }
  .pulse-feed-tabs button { flex: 0 0 auto; }
  .doctor-summary,
  .daily-category-grid { grid-template-columns: 1fr; }
  .broadcast-submit-row { align-items: stretch; flex-direction: column; }
  .social-admin-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }
  .social-admin-row > button { grid-column: 2; justify-self: start; }
  .social-admin-sync { grid-column: 2; }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 1: Layout System, Collapsible Sidebar & Bottom Navigation
   ══════════════════════════════════════════════════════════════ */

:root {
  --sidebar-width: 260px;
  --bottom-nav-height: 0px;
}

.app-layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.app-layout.sidebar-collapsed {
  --sidebar-width: 76px;
}

.main-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Base visibility helpers */
.desktop-only {
  display: flex !important;
}
.mobile-only {
  display: none !important;
}

.mobile-bottom-nav {
  display: none;
}

/* Desktop Sidebar Styling */
.sidebar-desktop {
  width: var(--sidebar-width);
  height: 100vh;
  position: sticky;
  top: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border-right: 1px solid var(--tile-bd);
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  z-index: 150;
}

.sidebar-brand-wrapper {
  padding: 14px 18px;
  height: 68px; /* matching standard header height */
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--tile-bd);
  flex-shrink: 0;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar {
  display: none;
}

.sidebar-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--fg-muted);
  padding: 12px 14px 6px;
  font-weight: 700;
  opacity: 0.8;
}

.sidebar-nav button {
  background: transparent;
  border: none;
  color: var(--fg-2);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sidebar-nav button:hover {
  background: var(--bg-3);
  color: var(--fg);
}

.sidebar-nav button.active {
  background: rgba(255, 133, 52, 0.12);
  color: var(--orange);
  font-weight: 600;
}

.sidebar-nav .nav-ico {
  font-size: 18px;
  width: 24px;
  text-align: center;
  display: inline-block;
  flex-shrink: 0;
}

.sidebar-nav .nav-lbl {
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.sidebar-nav .nav-count {
  margin-left: auto;
  background: #e63d4f;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

.sidebar-user-footer {
  padding: 16px;
  border-top: 1px solid var(--tile-bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--bg-2);
  flex-shrink: 0;
}

.user-footer-details {
  min-width: 0;
}

.user-footer-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-footer-sub {
  font-size: 11px;
  color: var(--fg-muted);
}

.user-footer-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.footer-action-btn {
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--fg);
  transition: all 0.2s ease;
  padding: 0;
}

.footer-action-btn:hover {
  border-color: var(--orange);
  background: var(--bg-2);
}

.footer-action-btn.danger:hover {
  border-color: #e85a5a;
  color: #e85a5a;
}

/* Sidebar collapsed refinements */
.sidebar-desktop.collapsed {
  align-items: center;
}

.sidebar-desktop.collapsed .sidebar-brand-wrapper {
  justify-content: center;
  padding: 14px 0;
}

.sidebar-desktop.collapsed .sidebar-nav button {
  justify-content: center;
  padding: 10px 0;
  border-radius: 12px;
  width: 44px;
  height: 44px;
  margin: 2px auto;
}

.sidebar-desktop.collapsed .sidebar-user-footer {
  flex-direction: column;
  padding: 12px 8px;
  gap: 12px;
}

.sidebar-desktop.collapsed .user-footer-actions {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Header customization on Desktop */
@media (min-width: 801px) {
  .hdr .hdr-brand {
    cursor: default !important;
  }
  .hdr .hdr-brand .logo-mark {
    display: none !important;
  }
  .hdr .hdr-brand .brand-title {
    display: none !important;
  }
  .hdr .hdr-brand .brand-sub {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--fg) !important;
    text-transform: capitalize;
  }
  .drawer {
    display: none !important;
  }
}

/* Mobile Viewports styling overrides */
@media (max-width: 800px) {
  :root {
    --sidebar-width: 0px;
    --bottom-nav-height: calc(64px + env(safe-area-inset-bottom, 16px));
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: flex;
  }

  .sidebar-desktop {
    display: none !important;
  }

  body {
    padding-bottom: var(--bottom-nav-height) !important;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: var(--glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--tile-bd);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    z-index: 2000;
    box-sizing: border-box;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .bottom-nav-item {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    text-align: center;
    color: var(--fg-muted);
    transition: color 0.2s ease;
  }

  .bottom-nav-icon-wrapper {
    width: 48px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bottom-nav-ico {
    font-size: 20px;
  }

  .bottom-nav-lbl {
    font-size: 10px;
    font-weight: 600;
    margin-top: 2px;
    color: var(--fg-muted);
    transition: color 0.2s ease;
  }

  .bottom-nav-item.active .bottom-nav-icon-wrapper {
    background: rgba(255, 133, 52, 0.16);
  }

  .bottom-nav-item.active .bottom-nav-ico {
    transform: scale(1.1);
  }

  .bottom-nav-item.active .bottom-nav-lbl {
    color: var(--orange);
  }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 2: Streamlining Home Section & Responsive Dashboard Grids
   ══════════════════════════════════════════════════════════════ */

/* Morning Hub Refinements */
.morning-hub {
  border-radius: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--bg-2) 0%, rgba(255, 133, 52, 0.02) 100%);
  border: 1px solid var(--tile-bd);
  box-shadow: var(--shadow);
}

.morning-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.morning-action {
  border-radius: 12px;
  padding: 12px;
  min-height: 64px;
}

.morning-focus {
  border-radius: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 133, 52, 0.28);
  background: linear-gradient(90deg, rgba(255, 133, 52, 0.06), var(--bg-3));
}

/* Hero Area Premium Overhaul */
.hero {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 180px;
  border-radius: 20px;
  background: linear-gradient(135deg, #0d1023 0%, #1a1f3d 100%);
  border: 1px solid rgba(255, 133, 52, 0.22);
}

.hero-mascot {
  width: 120px;
  height: 120px;
  margin-left: 20px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-mascot svg {
  width: 100%;
  height: 100%;
  max-width: 120px;
}

.hero-content {
  flex: 1;
  min-width: 0;
}

.hero-title {
  font-size: 24px;
  margin-bottom: 8px;
}

.hero-desc {
  font-size: 13px;
  margin-bottom: 12px;
}

/* Horizontal Feature Chips */
.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 14px;
}

.hero-features li {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  color: rgba(232, 238, 255, 0.95);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-features .dot {
  font-size: 11px;
  color: var(--orange-2);
  width: auto;
}

/* Stats Row Upgrades */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat {
  border-radius: 16px;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--tile-bd);
  box-shadow: var(--shadow);
  transition: all 0.25s ease;
}

.stat:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-h);
}

/* Responsive Dashboard Top Leaderboards */
.top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.top-card {
  border-radius: 20px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--tile-bd);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

/* Responsive Grid for Bottom Tiles */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.tile {
  border-radius: 20px;
  padding: 20px;
  min-height: 170px;
  background: var(--bg-2);
  border: 1px solid var(--tile-bd);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tile:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: var(--shadow-h);
}

.tile-illustration {
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.tile h3 {
  font-size: 16px;
  font-weight: 700;
}

.tile p {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.45;
}

/* Tablet & Mobile Layout Adjustments for Phase 2 */
@media (max-width: 800px) {
  .top-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero {
    flex-direction: column-reverse;
    align-items: stretch;
    padding: 16px;
    gap: 12px;
    text-align: center;
  }

  .hero-mascot {
    width: 90px;
    height: 90px;
    margin: 0 auto;
  }

  .hero-features {
    justify-content: center;
  }

  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .morning-actions {
    grid-template-columns: 1fr;
  }

  .tile-grid {
    grid-template-columns: 1fr;
  }

  .tile {
    min-height: 140px;
  }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 3: Premium Chat Redesign
   ══════════════════════════════════════════════════════════════ */

.chat-page {
  padding-bottom: calc(100px + var(--bottom-nav-height)) !important;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 68px) !important;
  min-height: 0 !important;
  overflow: hidden;
}

/* Sticky Chat Header */
.chat-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--tile-bd);
  z-index: 100;
  flex-shrink: 0;
}

.chat-header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-header-mascot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.chat-header-mascot svg {
  width: 24px;
  height: 24px;
}

.chat-header-info {
  min-width: 0;
}

.chat-header-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-header-status {
  font-size: 11px;
  color: #35b879;
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #35b879;
  display: inline-block;
  box-shadow: 0 0 8px rgba(53, 184, 121, 0.6);
}

.status-indicator-dot.typing {
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange-glow);
  animation: pulse 1s infinite alternate;
}

.chat-header-btn {
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.chat-header-btn:hover {
  border-color: var(--orange);
  background: var(--bg-2);
  color: var(--orange);
}

/* Chat Messages Area */
.chat-page .chat {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.chat-page .chat-msgs {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Premium Bubble Restyling */
.chat-page .msg {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  max-width: 85%;
  margin: 4px 0 10px;
}

.chat-page .msg.user {
  flex-direction: row-reverse;
  margin-left: auto;
  margin-right: 0;
}

.chat-page .msg.assistant {
  flex-direction: row;
  margin-right: auto;
  margin-left: 0;
}

/* Avatar Styling */
.chat-page .msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.chat-page .msg-avatar.assistant {
  background: rgba(255, 133, 52, 0.12);
  border: 1px solid rgba(255, 133, 52, 0.25);
  color: var(--orange);
}

.chat-page .msg-avatar.assistant svg {
  width: 18px;
  height: 18px;
}

.chat-page .msg-avatar.user {
  background: var(--bg-3);
  border: 1px solid var(--tile-bd);
  color: var(--fg);
}

.chat-page .msg-avatar.user img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-page .msg-content {
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 42px);
}

.chat-page .msg.user .msg-content {
  align-items: flex-end;
}

.chat-page .msg.assistant .msg-content {
  align-items: flex-start;
}

.chat-page .msg .bubble {
  padding: 12px 16px;
  line-height: 1.5;
  font-size: 14.5px;
}

.chat-page .msg.user .bubble {
  background: var(--grad-accent) !important;
  color: #07091a !important;
  border-radius: 16px 16px 4px 16px !important;
  font-weight: 550;
  box-shadow: 0 4px 14px var(--orange-glow) !important;
}

.chat-page .msg.assistant .bubble {
  background: var(--glass) !important;
  color: var(--fg) !important;
  border: 1px solid var(--tile-bd) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px 16px 16px 4px !important;
  box-shadow: var(--shadow);
}

.chat-page .msg-time {
  font-size: 10px;
  color: var(--fg-muted);
  margin-top: 4px;
  margin-inline: 6px;
}

/* Unified Floating Composer and Preview */
.chat-footer-wrapper {
  position: fixed;
  bottom: var(--bottom-nav-height);
  left: var(--sidebar-width);
  right: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  background: transparent;
  pointer-events: none;
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-footer-wrapper > * {
  pointer-events: auto;
}

/* Floating Capsule Composer */
.chat-page .chat-composer {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--tile-bd) !important;
  border-radius: 26px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1) !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  z-index: 10;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.chat-page .chat-composer:focus-within {
  border-color: rgba(255, 133, 52, 0.45) !important;
  box-shadow: 0 8px 32px rgba(255, 133, 52, 0.15) !important;
}

.chat-page .chat-composer textarea {
  flex: 1 !important;
  min-height: 40px !important;
  max-height: 120px !important;
  background: var(--bg-3) !important;
  color: var(--fg) !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  padding: 10px 14px !important;
  resize: none !important;
  outline: none !important;
  font: inherit !important;
  line-height: 1.4 !important;
  transition: all 0.2s ease;
}

.chat-page .chat-composer textarea:focus {
  border-color: rgba(255, 133, 52, 0.4) !important;
  background: var(--bg-2) !important;
}

.chat-page .chat-composer .cmp-btn {
  background: var(--bg-3) !important;
  border: 1px solid var(--tile-bd) !important;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  color: var(--fg);
  display: grid;
  place-items: center;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.chat-page .chat-composer .cmp-btn:hover {
  background: var(--tile-bd) !important;
  color: var(--fg);
}

.chat-page .chat-composer .cmp-btn.send {
  background: var(--grad-accent) !important;
  color: #0a0e1d !important;
  border: none !important;
  box-shadow: 0 4px 12px var(--orange-glow) !important;
}

.chat-page .chat-composer .cmp-btn.send:disabled {
  opacity: 0.45 !important;
  box-shadow: none !important;
}

/* Floating Image Upload Preview */
.chat-page .upload-preview {
  position: relative !important;
  bottom: auto !important;
  margin: 0 16px 8px !important;
  border-radius: 16px !important;
  background: var(--bg-2) !important;
  border: 1px solid rgba(255, 133, 52, 0.28) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  z-index: 9;
}

/* Responsiveness overrides for chat positioning */
@media (max-width: 800px) {
  .chat-page .msg {
    max-width: 88%;
  }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4: Visual Polish & Touch Target Optimization (WCAG 44px)
   ══════════════════════════════════════════════════════════════ */

/* Increase desktop sidebar item touch targets */
.sidebar-nav button {
  padding: 12px 14px !important; /* vertical target = 12px + 12px + 21px font-height = 45px (WCAG safe) */
}

/* Sidebar footer buttons sizing */
.footer-action-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}

/* Collapsed sidebar footer actions spacing */
.sidebar-desktop.collapsed .sidebar-user-footer {
  gap: 14px !important;
}

/* Main header hamburger and actions touch targets */
.ham,
.hdr .theme-toggle,
.hdr .avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

/* Chat composer action buttons touch targets on mobile */
@media (max-width: 800px) {
  .chat-page .chat-composer .cmp-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}

/* Premium Focus States */
button:focus-visible,
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 133, 52, 0.25) !important;
}

/* Consistent Glassmorphic Card Shadows */
.card,
.top-card,
.tile,
.morning-hub,
.trending-widget {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.2s ease !important;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE VIEW & REDESIGN ALIGNMENTS (APPROVED REDESIGN)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 800px) {
  /* Lock horizontal viewport width */
  html, body, .app-layout {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100vw !important;
  }

  /* Isolate Drawer container out of the app-layout flexbox flow */
  .drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    display: block !important;
  }
  
  .drawer.open {
    pointer-events: auto !important;
  }

  /* Clean up paddings & margins to maximize screen width */
  main {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .page {
    padding: 12px 12px 90px !important;
    max-width: 100% !important;
  }

  /* Chat viewport adjustments */
  .chat-page {
    padding: 0 !important;
    height: calc(100vh - 64px - env(safe-area-inset-top, 0px) - var(--bottom-nav-height)) !important;
    min-height: 0 !important;
  }

  .chat-page .chat-msgs {
    padding: 12px 12px 100px !important;
  }

  .chat-page .chat-composer {
    margin: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .chat-page .upload-preview {
    margin: 0 12px 8px !important;
  }

  /* Header adjustments for padding & gap economy */
  .hdr {
    padding: 10px 12px !important;
    /* padding-top: calc(10px + env(safe-area-inset-top)) !important; */
    gap: 10px !important;
  }

  /* Brand title text truncation constraints */
  .hdr-brand > div:last-child {
    min-width: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .brand-title {
    font-size: 14px !important;
    max-width: 140px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-sub {
    font-size: 10px !important;
    max-width: 140px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Fixed bottom navigation positioning locks */
  .mobile-bottom-nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Group Card Responsive Wrapping for narrow phones */
@media (max-width: 520px) {
  .pulse-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .pulse-summary .summary-card {
    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
    padding: 9px 5px !important;
    text-align: center !important;
  }
  .pulse-summary .summary-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
  }
  .pulse-summary strong {
    font-size: 16px !important;
  }
  .pulse-summary span {
    font-size: 8px !important;
    letter-spacing: 0 !important;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: center !important;
    padding: 9px !important;
    gap: 8px !important;
    min-height: 64px !important;
  }
  .stat-ico {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }
  .stat-num {
    font-size: 15px !important;
    line-height: 1 !important;
  }
  .stat-lbl {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  .tile {
    min-height: 118px !important;
    padding: 11px !important;
    border-radius: 12px !important;
  }
  .tile-illustration {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 21px !important;
  }
  .tile h3 {
    font-size: 13px !important;
  }
  .tile p {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  .tile-cta {
    font-size: 10px !important;
  }
  .group-card {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .group-card .row {
    justify-content: flex-end !important;
    margin-top: 4px !important;
    width: 100% !important;
  }

  .group-card .row button {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* Quiz Option Interactive Touches */
.qa-opt {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.qa-opt:not(:disabled):active {
  transform: scale(0.98) !important;
}

.qa-opt:focus-visible {
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 3px rgba(255, 133, 52, 0.25) !important;
}
/* Chat Redesign: Composer Popmenu & Actions */
@keyframes popmenuSlideUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.composer-popmenu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 10px;
  background: var(--bg-2);
  border: 1px solid var(--tile-bd);
  border-radius: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  padding: 8px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 210;
  pointer-events: auto;
  transform-origin: bottom left;
  animation: popmenuSlideUp 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.menu-item:hover {
  background: var(--bg-3);
  color: var(--fg);
}

.menu-item-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  display: inline-block;
}

.menu-item.danger {
  color: #e85a5a;
}

.menu-item.danger:hover {
  background: rgba(232, 90, 90, 0.12);
  color: #e85a5a;
}

.menu-divider {
  height: 1px;
  background: var(--tile-bd);
  margin: 6px 0;
}

/* Menu Toggle Micro-animation */
.cmp-btn.menu-toggle {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.cmp-btn.menu-toggle.active {
  transform: rotate(45deg);
  background: var(--bg-3) !important;
  color: var(--orange) !important;
  border-color: rgba(255, 133, 52, 0.3) !important;
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4: Mobile Layout Fits & Custom Scrollbars
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Global Unified Scrollbars ─────────────────────────────
   Replaces native browser scrollbars with thin, rounded, orange-
   tinted ones that complement the glassmorphic aesthetic.
   On mobile & touch devices the OS handles scroll indicators,
   so these styles only apply on pointer (mouse) devices.       */

@media (pointer: fine) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(255, 133, 52, 0.22);
    border-radius: 10px;
    transition: background 0.2s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 133, 52, 0.22) transparent;
  }
}

/* ── 2. Mobile Body Safe Area & Input Focus Fix ────────────────
   When a virtual keyboard is raised on mobile the viewport
   height shrinks. We ensure the main page body never bleeds
   behind the bottom nav by using dvh (dynamic viewport height)
   where supported, falling back to the existing variable.       */

@supports (height: 100dvh) {
  @media (max-width: 800px) {
    html, body {
      height: 100dvh;
    }
  }
}

/* On mobile, ensure body padding never adds blank space on top
   of the safe-area padding that's already applied via var.     */
@media (max-width: 800px) {
  body {
    /* Replace the static env() with the dynamic variable so
       it stays accurate when the layout is initialized.       */
    padding-bottom: var(--bottom-nav-height) !important;
  }

  /* Prevent the .page sections from leaking content under
     the mobile bottom nav on very small viewports.
     Explicitly exclude .chat-page which manages its own
     height and floating footer.                           */
  .page:not(.chat-page) {
    padding-bottom: calc(16px + var(--bottom-nav-height));
  }

  /* chat-footer-wrapper already sits at
     bottom: var(--bottom-nav-height) globally (line ~5610).
     DO NOT override it here — doing so pushes the composer
     below or behind the mobile bottom nav bar.            */

  /* Make full-screen modals truly full height on mobile.  */
  .modal-bg {
    height: 100dvh;
    height: 100vh; /* fallback */
  }
}

/* ── 3. Smooth Page Transition Animations ─────────────────────
   Alpine.js x-transition injects .enter/.enter-start/.enter-end
   / .leave / .leave-start / .leave-end classes. We define a
   premium fade-in + slide-up transition for all .page sections. */

/* Page enter: fade in + slide up 12px */
.page[x-show].enter,
.page[x-show].enter-active {
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.page[x-show].enter-start {
  opacity: 0;
  transform: translateY(12px);
}

.page[x-show].enter-end {
  opacity: 1;
  transform: translateY(0);
}

/* Page leave: fade out + slide down 8px */
.page[x-show].leave,
.page[x-show].leave-active {
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.page[x-show].leave-start {
  opacity: 1;
  transform: translateY(0);
}

.page[x-show].leave-end {
  opacity: 0;
  transform: translateY(-8px);
}

/* ── 4. Section-level Micro-transitions (tabs, accordions) ────
   For any x-show toggle that's NOT a full .page section — keep
   it snappy with a quick 200ms fade.                           */
[x-show]:not(.page) {
  transition: opacity 200ms ease;
}

/* ── 5. Bottom Nav Active Indicator Enhancements ──────────────
   Add a tiny orange pill indicator above the active tab icon
   on mobile so the active state is crystal clear.              */
@media (max-width: 800px) {
  .bottom-nav-item.active::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--grad-accent);
    border-radius: 0 0 4px 4px;
  }

  .bottom-nav-item {
    position: relative;
  }

  /* Ensure active label gets the orange accent */
  .bottom-nav-item.active .bottom-nav-ico {
    filter: drop-shadow(0 0 4px rgba(255, 133, 52, 0.5));
  }
}

/* Social Pulse precision polish */
.pulse-summary .summary-card {
  position: relative;
  overflow: hidden;
}
.pulse-summary .summary-card::after {
  content: "";
  position: absolute;
  inset: auto 8px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 133, 52, 0.32), transparent);
  opacity: 0.65;
}
.pulse-summary .summary-icon {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.summary-icon.summary-rising {
  background: rgba(53, 184, 121, 0.14);
  color: #35b879;
}
.summary-icon.summary-rising::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid currentColor;
}
.summary-icon.summary-rising::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 7px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 5px;
  background: currentColor;
}
.summary-icon.summary-boosts {
  background: rgba(255, 133, 52, 0.14);
}
.summary-icon.summary-boosts::before {
  content: "\1F680";
  font-size: 17px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(255, 133, 52, 0.35));
}
.summary-icon.summary-reach {
  background: rgba(255, 209, 102, 0.12);
}
.summary-icon.summary-reach::before {
  content: "";
  width: 20px;
  height: 12px;
  border: 2px solid #ffd166;
  border-radius: 50% / 60%;
  background: rgba(255, 209, 102, 0.06);
}
.summary-icon.summary-reach::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd166;
}

.pulse-read-more {
  width: fit-content;
  margin: -2px 11px 9px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 133, 52, 0.24);
  border-radius: 999px;
  background: rgba(255, 133, 52, 0.08);
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
}
.pulse-body.expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.platform-mini {
  position: relative;
  min-width: 23px;
  font-size: 0;
}
.platform-mini::before {
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}
.platform-mini.mini-x::before { content: "X"; font-size: 10px; }
.platform-mini.mini-instagram::before { content: "\25CE"; font-size: 13px; }
.platform-mini.mini-tiktok::before { content: "\266A"; font-size: 13px; text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55; }
.platform-mini.mini-youtube::before { content: "\25B6"; font-size: 10px; }
.platform-mini.mini-facebook::before { content: "f"; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.platform-mini.mini-socio::before { content: "SC"; font-size: 8px; }

.profile-quick-stats.public-stats {
  max-width: 100%;
}
.profile-quick-stats.public-stats button,
.profile-quick-stats.public-stats span {
  min-height: 58px;
  align-content: center;
  border-color: rgba(255, 133, 52, 0.22);
  background: rgba(6, 8, 20, 0.38);
}
.profile-quick-stats.public-stats button {
  box-shadow: inset 0 0 0 1px rgba(255, 133, 52, 0.03);
}
.profile-quick-stats.public-stats button strong,
.profile-quick-stats.public-stats span strong {
  font-size: 18px;
}

@media (max-width: 560px) {
  .pulse-summary {
    gap: 8px !important;
  }
  .pulse-summary .summary-card {
    border-radius: 10px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 133, 52, 0.10), transparent 52%),
      rgba(19, 22, 52, 0.92) !important;
  }
  .pulse-summary .summary-icon {
    width: 30px !important;
    height: 30px !important;
  }
  .pulse-summary strong {
    font-size: 17px !important;
    line-height: 1 !important;
  }
  .pulse-summary span {
    margin-top: 3px !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    text-transform: none !important;
  }
  .summary-icon.summary-rising::before {
    top: 7px;
    border-left-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 8px;
  }
  .summary-icon.summary-rising::after {
    bottom: 7px;
    width: 6px;
    height: 11px;
  }
  .summary-icon.summary-boosts::before {
    font-size: 15px;
  }

  .social-pulse-page.missions-mode .boost-mission-card {
    grid-template-columns: 62px minmax(0, 1fr) 94px;
    min-height: 96px;
    padding: 11px;
  }
  .social-pulse-page.missions-mode .mission-art {
    width: 62px;
    height: 62px;
    border-radius: 12px;
  }
  .social-pulse-page.missions-mode .mission-action {
    min-height: 42px;
    font-size: 11.5px;
  }
  .social-pulse-page.missions-mode .mission-status {
    max-width: 96px;
    padding-inline: 7px;
    font-size: 8.5px;
  }
  .social-pulse-page.missions-mode .mission-copy p {
    font-size: 11.5px;
  }
  .social-pulse-page.missions-mode .ai-recommendation {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: 11px;
  }
  .social-pulse-page.missions-mode .ai-orb {
    width: 46px;
    height: 46px;
  }

  .pulse-body.expanded {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
  .pulse-read-more {
    margin-left: 11px;
    margin-bottom: 8px;
  }

  .profile-quick-stats.public-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .profile-quick-stats.public-stats button,
  .profile-quick-stats.public-stats span {
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 11px;
  }
  .profile-quick-stats.public-stats button strong,
  .profile-quick-stats.public-stats span strong {
    font-size: 19px;
  }

  .social-provider-mark.provider-instagram::before {
    width: 16px;
    height: 16px;
  }
  .social-provider-mark.provider-tiktok::before {
    font-size: 22px;
  }
}

/* Social Pulse mobile refinement baseline */
.pulse-header.missions {
  align-items: center;
  padding-bottom: 8px;
  border-bottom-color: rgba(255, 133, 52, 0.16);
}
.pulse-header.missions h2 {
  margin-top: 2px;
  font-size: 22px;
}
.pulse-header.missions p {
  max-width: 360px;
  font-size: 13px;
  line-height: 1.35;
}
.pulse-header-xp {
  min-width: 104px;
  flex: 0 0 auto;
}

.social-provider-mark.provider-x,
.social-provider-mark.provider-instagram,
.social-provider-mark.provider-tiktok,
.social-provider-mark.provider-youtube,
.social-provider-mark.provider-facebook,
.social-provider-mark.provider-socio {
  position: relative;
  overflow: hidden;
  font-size: 0;
  isolation: isolate;
}
.social-provider-mark.provider-x::before,
.social-provider-mark.provider-facebook::before,
.social-provider-mark.provider-socio::before {
  position: relative;
  z-index: 1;
  font-weight: 950;
  line-height: 1;
}
.social-provider-mark.provider-x::before {
  content: "X";
  color: #fff;
  font-size: 18px;
}
.social-provider-mark.provider-instagram::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 6px;
}
.social-provider-mark.provider-instagram::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}
.social-provider-mark.provider-tiktok::before {
  content: "\266A";
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 24px;
  font-weight: 950;
  text-shadow: -2px 0 #25f4ee, 2px 0 #fe2c55;
}
.social-provider-mark.provider-youtube::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #fff;
}
.social-provider-mark.provider-facebook::before {
  content: "f";
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 23px;
}
.social-provider-mark.provider-socio::before {
  content: "SC";
  color: #fff;
  font-size: 12px;
}

.platform-filter button.platform-x,
.platform-filter button.platform-instagram,
.platform-filter button.platform-tiktok,
.platform-filter button.platform-youtube,
.platform-filter button.platform-facebook,
.platform-filter button.platform-socio {
  position: relative;
  font-size: 0;
}
.platform-filter button.platform-x::before,
.platform-filter button.platform-instagram::before,
.platform-filter button.platform-tiktok::before,
.platform-filter button.platform-youtube::before,
.platform-filter button.platform-facebook::before,
.platform-filter button.platform-socio::before {
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}
.platform-filter button.platform-x::before { content: "X"; }
.platform-filter button.platform-instagram::before { content: "IG"; }
.platform-filter button.platform-tiktok::before { content: "TT"; }
.platform-filter button.platform-youtube::before { content: "YT"; }
.platform-filter button.platform-facebook::before { content: "f"; font-family: Arial, Helvetica, sans-serif; font-size: 15px; }
.platform-filter button.platform-socio::before { content: "SC"; }

@media (max-width: 560px) {
  .social-pulse-page {
    padding-inline: 10px;
  }
  .pulse-header {
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 10px;
  }
  .pulse-header.missions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    padding-bottom: 6px;
  }
  .pulse-header.missions > div:first-child {
    min-width: 0;
  }
  .pulse-header.missions h2 {
    font-size: 22px;
    line-height: 1.1;
  }
  .pulse-header.missions p {
    max-width: 220px;
    font-size: 12px;
    line-height: 1.25;
  }
  .pulse-header-xp {
    min-width: 86px;
    min-height: 34px;
    padding: 6px 9px;
    border-radius: 9px;
    font-size: 12px;
  }
  .social-pulse-page.missions-mode .pulse-destinations {
    margin-bottom: 8px;
  }
  .social-pulse-page.missions-mode .boost-missions-head {
    display: none;
  }
  .social-pulse-page.missions-mode .boost-missions-panel {
    gap: 9px;
    margin-top: 2px;
  }
  .social-pulse-page.missions-mode .boost-mission-list {
    gap: 8px;
  }
  .boost-mission-card {
    border-radius: 11px;
  }
  .mission-action {
    border-radius: 9px;
  }

  .social-connect-center {
    padding: 12px;
    border-radius: 14px;
  }
  .social-connect-center .section-line {
    align-items: center;
    gap: 8px;
  }
  .social-connect-center .section-line h3 {
    font-size: 17px;
    line-height: 1.15;
  }
  .social-connect-center .section-line p {
    display: none;
  }
  .social-connection-grid {
    gap: 7px;
    margin-top: 10px;
  }
  .social-connection {
    min-height: 86px;
    padding: 9px;
    border-radius: 11px;
    gap: 7px;
  }
  .social-connection.connected::before {
    width: 3px;
  }
  .social-provider-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }
  .social-provider-mark.provider-x::before { font-size: 16px; }
  .social-provider-mark.provider-instagram::before {
    width: 14px;
    height: 14px;
    border-radius: 5px;
  }
  .social-provider-mark.provider-instagram::after {
    top: 9px;
    right: 9px;
    width: 3px;
    height: 3px;
  }
  .social-provider-mark.provider-tiktok::before { font-size: 20px; }
  .social-provider-mark.provider-youtube::before {
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 10px;
  }
  .social-connection-copy {
    gap: 2px;
  }
  .social-connection-copy strong {
    font-size: 12.5px;
  }
  .social-connection-copy small {
    font-size: 10px;
  }
  .social-connection-copy .provider-note,
  .social-sync-ok {
    display: none !important;
  }
  .connection-status-dot {
    top: 10px;
    right: 10px;
    width: 7px;
    height: 7px;
  }
  .social-connection-actions {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 5px;
  }
  .social-connection-actions button {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 10px;
  }
  .social-connection:not(.connected) .social-connection-actions button {
    min-width: 72px;
  }

  .pulse-toolbar {
    margin-bottom: 9px;
    padding: 8px;
    border-radius: 12px;
    gap: 7px;
  }
  .pulse-feed-tabs {
    width: 100%;
    overflow-x: auto;
  }
  .pulse-feed-tabs button {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 11px;
  }
  .platform-filter.feed-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
  }
  .pulse-preferences {
    display: none;
  }
  .pulse-feed {
    gap: 9px;
  }
  .pulse-post {
    border-radius: 12px;
  }
  .pulse-post .feed-author-row {
    gap: 8px;
    padding: 10px 11px 0;
  }
  .feed-avatar-mini {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
  .feed-author-name-row > strong {
    font-size: 13px;
  }
  .feed-author-meta {
    font-size: 10px;
  }
  .pulse-momentum {
    display: none;
  }
  .pulse-body {
    display: -webkit-box;
    overflow: hidden;
    padding: 9px 11px;
    font-size: 12.5px;
    line-height: 1.42;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
  }
  .pulse-reference {
    margin: 0 10px 10px;
    border-radius: 10px;
  }
  .pulse-reference-author {
    padding: 9px 10px 0;
  }
  .pulse-reference > p {
    display: -webkit-box;
    overflow: hidden;
    padding: 7px 10px 9px;
    font-size: 12px;
    line-height: 1.35;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .pulse-media img,
  .pulse-media {
    max-height: 255px;
  }
  .pulse-reference > img,
  .pulse-reference-media img {
    max-height: 220px;
    object-fit: cover;
  }
  .external-metrics {
    gap: 7px;
    padding: 8px 11px 0;
    font-size: 10.5px;
  }
  .pulse-score-strip {
    display: none !important;
  }
  .pulse-actions {
    grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
    margin-top: 8px;
  }
  .pulse-actions button {
    min-height: 38px;
    gap: 2px;
    padding: 5px 2px;
    font-size: 10px;
  }
  .pulse-actions button small {
    font-size: 8.5px;
  }
  .pulse-post > .feed-comments {
    padding: 10px;
  }
}

/* Social Pulse final cascade overrides */
.pulse-body.expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.pulse-read-more {
  width: fit-content;
  margin: -2px 11px 9px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 133, 52, 0.24);
  border-radius: 999px;
  background: rgba(255, 133, 52, 0.08);
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
}
.platform-mini {
  position: relative;
  min-width: 23px;
  font-size: 0;
}
.platform-mini::before {
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}
.platform-mini.mini-x::before { content: "X"; font-size: 10px; }
.platform-mini.mini-instagram::before { content: "\25CE"; font-size: 13px; }
.platform-mini.mini-tiktok::before { content: "\266A"; font-size: 13px; text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55; }
.platform-mini.mini-youtube::before { content: "\25B6"; font-size: 10px; }
.platform-mini.mini-facebook::before { content: "f"; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.platform-mini.mini-socio::before { content: "SC"; font-size: 8px; }

@media (max-width: 560px) {
  .pulse-summary .summary-card {
    border-radius: 10px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 133, 52, 0.10), transparent 52%),
      rgba(19, 22, 52, 0.92) !important;
  }
  .pulse-summary span {
    margin-top: 3px !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    text-transform: none !important;
  }
  .social-pulse-page.missions-mode .boost-mission-card {
    grid-template-columns: 62px minmax(0, 1fr) 94px;
    min-height: 96px;
    padding: 11px;
  }
  .social-pulse-page.missions-mode .mission-art {
    width: 62px;
    height: 62px;
    border-radius: 12px;
  }
  .social-pulse-page.missions-mode .mission-action {
    min-height: 42px;
    font-size: 11.5px;
  }
  .social-pulse-page.missions-mode .mission-status {
    max-width: 96px;
    padding-inline: 7px;
    font-size: 8.5px;
  }
  .pulse-body.expanded {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
  }
  .profile-quick-stats.public-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .profile-quick-stats.public-stats button,
  .profile-quick-stats.public-stats span {
    min-height: 64px;
    padding: 10px 12px;
    border-radius: 11px;
  }
  .profile-quick-stats.public-stats button strong,
  .profile-quick-stats.public-stats span strong {
    font-size: 19px;
  }
}

/* Social platform SVG marks */
.platform-svg {
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 auto;
  color: currentColor;
}
.platform-svg-tiktok .tk-shadow-a { stroke: #25f4ee; }
.platform-svg-tiktok .tk-shadow-b { stroke: #fe2c55; }
.social-provider-mark .platform-svg {
  width: 24px;
  height: 24px;
}
.social-provider-mark.provider-instagram .platform-svg,
.social-provider-mark.provider-x .platform-svg,
.social-provider-mark.provider-tiktok .platform-svg,
.social-provider-mark.provider-facebook .platform-svg,
.social-provider-mark.provider-socio .platform-svg {
  color: #fff;
}
.social-provider-mark.provider-youtube .platform-svg {
  width: 28px;
  height: 28px;
}
.social-provider-mark.provider-x::before,
.social-provider-mark.provider-instagram::before,
.social-provider-mark.provider-instagram::after,
.social-provider-mark.provider-tiktok::before,
.social-provider-mark.provider-youtube::before,
.social-provider-mark.provider-facebook::before,
.social-provider-mark.provider-socio::before,
.platform-mini::before,
.platform-filter button.platform-x::before,
.platform-filter button.platform-instagram::before,
.platform-filter button.platform-tiktok::before,
.platform-filter button.platform-youtube::before,
.platform-filter button.platform-facebook::before,
.platform-filter button.platform-socio::before {
  content: none !important;
  display: none !important;
}
.platform-mini {
  min-width: 22px;
  min-height: 18px;
  font-size: 1px;
}
.platform-mini .platform-svg {
  width: 13px;
  height: 13px;
}
.platform-mini.mini-youtube .platform-svg {
  width: 16px;
  height: 16px;
}
.platform-filter button .platform-svg {
  width: 15px;
  height: 15px;
  margin-inline: auto;
}
.platform-filter button.platform-youtube .platform-svg {
  width: 18px;
  height: 18px;
}
.source-mark .platform-svg,
.feed-platform-tag .platform-svg,
.verified-social .platform-svg {
  width: 15px;
  height: 15px;
}
.feed-platform-tag,
.verified-social > span:first-child,
.source-mark {
  display: inline-grid;
  place-items: center;
}

@media (max-width: 560px) {
  .social-provider-mark .platform-svg {
    width: 21px;
    height: 21px;
  }
  .social-provider-mark.provider-youtube .platform-svg {
    width: 25px;
    height: 25px;
  }
}

/* Social Pulse full SVG icon pass */
.ui-svg {
  width: 1em;
  height: 1em;
  display: block;
  color: currentColor;
}
.summary-icon.summary-rising::before,
.summary-icon.summary-rising::after,
.summary-icon.summary-boosts::before,
.summary-icon.summary-reach::before,
.summary-icon.summary-reach::after {
  content: none !important;
  display: none !important;
}
.pulse-summary .summary-icon .ui-svg {
  width: 21px;
  height: 21px;
}
.summary-icon.summary-rising {
  color: #35b879;
}
.summary-icon.summary-boosts {
  color: var(--orange);
}
.summary-icon.summary-reach {
  color: #ffd166;
}
.mission-svg {
  display: grid;
  place-items: center;
  color: currentColor;
}
.mission-svg .ui-svg,
.mission-svg .platform-svg {
  width: 30px;
  height: 30px;
}
.mission-art.mission-connect .mission-svg .platform-svg {
  color: #fff;
}
.ai-orb .ui-svg {
  width: 24px;
  height: 24px;
}
.search-icon .ui-svg {
  width: 15px;
  height: 15px;
}
.metric-icon {
  display: inline-grid;
  place-items: center;
  color: var(--orange);
}
.metric-icon .ui-svg {
  width: 13px;
  height: 13px;
}
.pulse-actions button {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3px 5px;
}
.pulse-actions .action-icon {
  display: inline-grid;
  place-items: center;
  color: currentColor;
}
.pulse-actions .action-icon .ui-svg {
  width: 15px;
  height: 15px;
}
.pulse-actions button small {
  flex-basis: 100%;
  text-align: center;
}
.pulse-actions button.active .action-icon,
.pulse-actions .pulse-action-primary .action-icon {
  filter: drop-shadow(0 0 5px rgba(255, 133, 52, 0.35));
}

@media (max-width: 560px) {
  .pulse-summary .summary-icon .ui-svg {
    width: 17px;
    height: 17px;
  }
  .mission-svg .ui-svg,
  .mission-svg .platform-svg {
    width: 25px;
    height: 25px;
  }
  .external-metrics {
    align-items: center;
  }
  .metric-icon .ui-svg {
    width: 12px;
    height: 12px;
  }
  .pulse-actions button {
    min-height: 42px;
    line-height: 1.05;
  }
  .pulse-actions .action-icon .ui-svg {
    width: 14px;
    height: 14px;
  }
}

/* Mobile mockup fidelity pass */
.xp-pill .xp-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--orange);
}
.xp-pill .xp-icon .ui-svg {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 0 8px rgba(255, 133, 52, 0.35));
}
.profile-section-tabs .tab-icon,
.bottom-nav-ico {
  display: grid;
  place-items: center;
  font-size: 0 !important;
}
.profile-section-tabs .tab-icon .ui-svg {
  width: 20px;
  height: 20px;
}
.profile-section-tabs button.active .tab-icon .ui-svg {
  filter: drop-shadow(0 2px 7px rgba(9, 11, 22, 0.25));
}
.bottom-nav-ico .ui-svg {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}
.bottom-nav-item.active .bottom-nav-ico .ui-svg {
  color: var(--orange);
  filter: drop-shadow(0 0 8px rgba(255, 133, 52, 0.38));
}
.mobile-bottom-nav {
  background:
    linear-gradient(180deg, rgba(16, 19, 45, 0.86), rgba(12, 15, 36, 0.98)) !important;
  border-top-color: rgba(255, 133, 52, 0.10) !important;
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.28) !important;
}
.bottom-nav-icon-wrapper {
  border: 1px solid transparent;
}
.bottom-nav-item.active .bottom-nav-icon-wrapper {
  border-color: rgba(255, 133, 52, 0.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 133, 52, 0.30), transparent 58%),
    rgba(255, 133, 52, 0.12) !important;
}
.icon-heading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.heading-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 133, 52, 0.10);
  color: var(--orange);
}
.heading-icon .ui-svg {
  width: 17px;
  height: 17px;
}
.pulse-summary .summary-icon {
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pulse-summary .summary-icon .ui-svg {
  filter: drop-shadow(0 0 8px currentColor);
}
.pulse-summary .summary-card {
  min-width: 0;
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 133, 52, 0.12), transparent 56%),
    linear-gradient(135deg, rgba(20, 23, 55, 0.98), rgba(12, 15, 36, 0.96)) !important;
}
.pulse-summary .summary-card > div:not(.summary-icon) {
  display: grid !important;
  justify-items: start;
  gap: 1px;
}
.external-metrics {
  justify-content: space-between;
  padding: 8px 13px 0 !important;
  color: var(--fg-2);
}
.external-metrics span {
  gap: 5px;
  font-size: 11px;
  font-weight: 850;
}
.external-metrics .metric-icon {
  color: rgba(255, 255, 255, 0.78);
}
.external-metrics .metric-icon .ui-svg {
  width: 14px;
  height: 14px;
}
.pulse-actions {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: 8px !important;
  margin: 10px 12px 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.pulse-actions button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 38px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 11px !important;
  background: rgba(15, 18, 43, 0.86) !important;
  color: var(--fg-2) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.pulse-actions button small {
  display: none !important;
}
.pulse-actions .pulse-action-primary {
  flex-grow: 1.08;
  border-color: rgba(255, 177, 105, 0.55) !important;
  background: var(--grad-accent) !important;
  color: #080b14 !important;
  box-shadow: 0 9px 18px rgba(255, 133, 52, 0.22) !important;
}
.pulse-actions .pulse-action-primary .action-icon,
.pulse-actions .pulse-action-primary .action-icon .ui-svg {
  color: #080b14 !important;
  filter: none !important;
}
.pulse-actions .action-icon .ui-svg {
  width: 15px;
  height: 15px;
}
.pulse-actions button.active:not(.pulse-action-primary) {
  border-color: rgba(255, 133, 52, 0.36) !important;
  background: rgba(255, 133, 52, 0.10) !important;
  color: var(--orange) !important;
}
.mission-art {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 22px rgba(0, 0, 0, 0.18);
}
.mission-art.mission-boost {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 190, 95, 0.30), transparent 55%),
    rgba(255, 133, 52, 0.09);
}
.mission-art.mission-react {
  color: #ff6f91;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 111, 145, 0.22), transparent 56%),
    rgba(255, 111, 145, 0.08);
}
.mission-art.mission-comment {
  color: #b99cff;
  background:
    radial-gradient(circle at 50% 38%, rgba(185, 156, 255, 0.26), transparent 56%),
    rgba(139, 92, 246, 0.12);
}
.mission-art.mission-repost {
  color: #4be38b;
  background:
    radial-gradient(circle at 50% 38%, rgba(75, 227, 139, 0.22), transparent 56%),
    rgba(53, 184, 121, 0.11);
}
.mission-art.mission-creator {
  color: var(--orange);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 133, 52, 0.26), transparent 56%),
    rgba(255, 133, 52, 0.08);
}
.mission-svg .ui-svg,
.mission-svg .platform-svg {
  filter: drop-shadow(0 0 10px currentColor);
}
.ai-orb {
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 190, 95, 0.28), transparent 58%),
    rgba(255, 133, 52, 0.11) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  letter-spacing: 0 !important;
}

@media (max-width: 560px) {
  .pulse-destinations {
    margin-bottom: 12px;
  }
  .pulse-destinations button:focus,
  .pulse-destinations button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  .pulse-summary .summary-card {
    padding: 9px 6px !important;
  }
  .pulse-summary .summary-icon {
    width: 30px !important;
    height: 30px !important;
  }
  .pulse-summary .summary-icon .ui-svg {
    width: 16px !important;
    height: 16px !important;
  }
  .pulse-summary .summary-card > div:not(.summary-icon) {
    justify-items: center;
  }
  .external-metrics {
    padding-inline: 12px !important;
  }
  .pulse-actions {
    gap: 6px !important;
    margin: 9px 11px 11px !important;
  }
  .pulse-actions button {
    min-height: 36px !important;
    padding: 8px 7px !important;
    font-size: 10.5px !important;
  }
  .pulse-actions button[title="Save post"] {
    display: none !important;
  }
  .social-pulse-page.missions-mode .boost-mission-card {
    grid-template-columns: 62px minmax(0, 1fr) 92px !important;
    gap: 10px !important;
    border-radius: 13px !important;
    background:
      radial-gradient(circle at 100% 50%, rgba(255, 133, 52, 0.10), transparent 42%),
      linear-gradient(135deg, rgba(18, 20, 48, 0.98), rgba(11, 13, 32, 0.98)) !important;
  }
  .social-pulse-page.missions-mode .mission-copy {
    gap: 5px;
  }
  .social-pulse-page.missions-mode .mission-title-row {
    align-items: start;
  }
  .social-pulse-page.missions-mode .mission-title-row strong {
    font-size: 13px;
    line-height: 1.16;
  }
  .social-pulse-page.missions-mode .mission-copy p {
    font-size: 11.3px !important;
    line-height: 1.28;
  }
  .social-pulse-page.missions-mode .mission-status {
    max-width: 82px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .social-pulse-page.missions-mode .mission-action {
    min-width: 86px !important;
    min-height: 42px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
  }
  .social-pulse-page.missions-mode .mission-progress {
    height: 5px;
  }
  .social-pulse-page.missions-mode .ai-orb {
    font-size: 13px;
  }
  .profile-section-tabs .tab-icon .ui-svg {
    width: 19px;
    height: 19px;
  }
}

/* Social Pulse v1.16 mockup alignment */
.pulse-header-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.34fr);
  gap: 8px !important;
  width: 100%;
}
.pulse-header-actions .icon-label-btn {
  width: 100%;
  min-height: 40px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.pulse-header-actions .chip.icon-label-btn {
  border-color: rgba(255, 255, 255, 0.05) !important;
  background: rgba(26, 30, 70, 0.95) !important;
  color: var(--fg-2) !important;
}
.pulse-header-actions .btn-primary.icon-label-btn {
  color: #090b16 !important;
  box-shadow: 0 10px 22px rgba(255, 133, 52, 0.22) !important;
}
.pulse-search-inline {
  margin: -2px 0 12px !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 133, 52, 0.08), transparent 44%),
    rgba(17, 20, 49, 0.96) !important;
}
.pulse-search-inline .pulse-search-input {
  min-height: 42px;
  border-radius: 11px;
  background: rgba(8, 11, 28, 0.72);
}
.pulse-post .feed-author-name-row .pulse-viral-score {
  display: none !important;
}
.external-metrics {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 8px 12px 0 !important;
  padding: 8px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background: transparent !important;
}
.external-metrics .metric-group {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 14px;
}
.external-metrics .metric-group > span {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  color: rgba(236, 239, 255, 0.78);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.external-metrics .metric-icon {
  color: rgba(236, 239, 255, 0.80) !important;
}
.metric-viral-score {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 6px !important;
  color: #ffd166;
}
.metric-viral-score strong {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 209, 102, 0.58);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 209, 102, 0.24), transparent 62%),
    rgba(255, 133, 52, 0.08);
  color: #ffd166;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 0 12px rgba(255, 209, 102, 0.12);
}
.metric-viral-score small {
  max-width: 34px;
  color: rgba(236, 239, 255, 0.66);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}
.pulse-actions {
  margin-top: 8px !important;
}
.summary-icon.summary-rising,
.summary-icon.summary-boosts,
.summary-icon.summary-reach {
  border-radius: 9px !important;
}
.summary-icon.summary-rising {
  background:
    radial-gradient(circle at 50% 20%, rgba(75, 227, 139, 0.30), transparent 60%),
    rgba(53, 184, 121, 0.14) !important;
  color: #4be38b !important;
}
.summary-icon.summary-boosts {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 190, 95, 0.32), transparent 60%),
    rgba(255, 133, 52, 0.15) !important;
  color: var(--orange) !important;
}
.summary-icon.summary-reach {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 209, 102, 0.30), transparent 60%),
    rgba(255, 209, 102, 0.13) !important;
  color: #ffd166 !important;
}
.platform-svg-x {
  color: currentColor;
}
.platform-svg-youtube {
  filter: drop-shadow(0 2px 6px rgba(255, 0, 51, 0.28));
}
.platform-svg-socio {
  filter: drop-shadow(0 2px 8px rgba(255, 133, 52, 0.20));
}
.social-provider-mark.provider-youtube {
  background: transparent !important;
}
.social-provider-mark.provider-youtube .platform-svg {
  width: 34px !important;
  height: 34px !important;
}
.social-provider-mark.provider-x {
  background: #05070d !important;
  color: #fff !important;
}
.social-provider-mark.provider-socio {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 190, 95, 0.55), transparent 45%),
    linear-gradient(135deg, #b56745, #473150) !important;
  color: #fff !important;
}
.platform-mini.mini-x {
  background: #05070d !important;
  color: #fff !important;
}
.platform-filter button.platform-youtube {
  background: rgba(255, 0, 51, 0.10);
}
.platform-filter button.platform-socio {
  background: rgba(255, 133, 52, 0.10);
}
.boost-mission-card {
  border-radius: 15px !important;
}
.mission-art.mission-connect {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.13), transparent 58%),
    #05070d !important;
}
.mission-action {
  border-radius: 12px !important;
}

@media (max-width: 560px) {
  .pulse-header-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) !important;
  }
  .pulse-search-inline {
    margin-top: -4px !important;
  }
  .pulse-summary .summary-card {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr) !important;
    justify-items: start !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
    padding: 10px 8px !important;
  }
  .pulse-summary .summary-card > div:not(.summary-icon) {
    justify-items: start !important;
  }
  .pulse-summary .summary-icon {
    width: 30px !important;
    height: 30px !important;
  }
  .pulse-summary .summary-icon .ui-svg {
    width: 18px !important;
    height: 18px !important;
  }
  .pulse-summary strong {
    font-size: 15px !important;
  }
  .pulse-summary span {
    font-size: 8px !important;
    line-height: 1.05 !important;
  }
  .external-metrics {
    margin-inline: 11px !important;
  }
  .external-metrics .metric-group {
    gap: 12px;
  }
  .metric-viral-score small {
    display: block;
  }
  .social-pulse-page.missions-mode .boost-mission-card {
    grid-template-columns: 74px minmax(0, 1fr) 94px !important;
    min-height: 112px !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  .social-pulse-page.missions-mode .mission-art {
    width: 74px !important;
    height: 74px !important;
  }
  .social-pulse-page.missions-mode .mission-action {
    min-width: 90px !important;
    min-height: 46px !important;
    font-size: 11.5px !important;
  }
  .social-pulse-page.missions-mode .mission-status {
    max-width: 92px !important;
  }
}

/* Social Pulse v1.17 final mockup pass */
.pulse-header-actions[style*="display: none"] {
  display: none !important;
}
.pulse-header-actions .icon-label-btn {
  height: 42px !important;
  min-height: 42px !important;
  padding-block: 0 !important;
  align-self: stretch;
}
.pulse-header-actions .chip.icon-label-btn {
  transform: translateY(0);
}
.pulse-summary .summary-card {
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
}
.pulse-summary .summary-icon {
  width: 38px !important;
  height: 38px !important;
}
.pulse-summary .summary-icon .ui-svg {
  width: 22px !important;
  height: 22px !important;
}
.summary-icon.summary-rising {
  box-shadow: 0 0 18px rgba(75, 227, 139, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.summary-icon.summary-boosts {
  box-shadow: 0 0 18px rgba(255, 133, 52, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.summary-icon.summary-reach {
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.pulse-post .feed-author-row {
  position: relative;
}
.pulse-post .feed-author-actions {
  display: grid !important;
  justify-items: end;
  align-content: start;
  gap: 4px !important;
  margin-left: auto;
}
.feed-time-right {
  color: rgba(236, 239, 255, 0.62);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.pulse-momentum {
  display: inline-flex !important;
  align-items: center;
  min-height: 20px;
  padding: 4px 8px !important;
  border: 1px solid rgba(255, 133, 52, 0.28);
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 133, 52, 0.18), transparent 60%),
    rgba(255, 133, 52, 0.10) !important;
  color: var(--orange) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 0 10px rgba(255, 133, 52, 0.08);
}
.feed-author-actions .follow-btn {
  min-height: 24px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 10px;
}
.metric-viral-score {
  min-width: 58px;
}
.metric-viral-score strong {
  width: 34px !important;
  height: 34px !important;
  font-size: 12.5px !important;
}
.metric-viral-score small {
  max-width: 39px !important;
  text-transform: none;
}
.pulse-actions {
  grid-template-columns: unset !important;
}
.pulse-actions .pulse-action-like.active {
  border-color: rgba(255, 111, 145, 0.36) !important;
  background: rgba(255, 111, 145, 0.10) !important;
  color: #ff8fab !important;
}
.pulse-actions .pulse-action-like.active .action-icon {
  filter: drop-shadow(0 0 6px rgba(255, 111, 145, 0.34));
}
.mission-status {
  border: 1px solid rgba(255, 133, 52, 0.28) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 133, 52, 0.25), transparent 70%),
    rgba(255, 133, 52, 0.12) !important;
  color: var(--orange) !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.social-pulse-page.missions-mode .mission-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start !important;
}
.social-pulse-page.missions-mode .mission-status {
  justify-self: end;
  margin-top: 1px;
}
.ai-recommendation {
  border-color: rgba(255, 133, 52, 0.18) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 133, 52, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(31, 24, 58, 0.96), rgba(14, 17, 46, 0.98)) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20);
}
.ai-recommendation strong {
  font-size: 15px;
}
.ai-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-title-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-title-row em {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: #b99cff;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}
.ai-recommendation small {
  white-space: nowrap;
}
.ai-orb {
  width: 48px !important;
  height: 48px !important;
  border-color: rgba(255, 133, 52, 0.42) !important;
  color: var(--orange) !important;
  text-shadow: 0 0 10px rgba(255, 133, 52, 0.32);
}

@media (max-width: 560px) {
  .pulse-header-actions .icon-label-btn {
    height: 40px !important;
    min-height: 40px !important;
  }
  .pulse-summary .summary-card {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    min-height: 52px;
  }
  .pulse-summary .summary-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .pulse-summary .summary-icon .ui-svg {
    width: 16px !important;
    height: 16px !important;
  }
  .pulse-post .feed-author-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }
  .feed-time-right {
    font-size: 9.5px;
  }
  .pulse-momentum {
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .external-metrics .metric-group {
    gap: 10px;
  }
  .metric-viral-score {
    min-width: 55px;
    gap: 5px !important;
  }
  .metric-viral-score strong {
    width: 31px !important;
    height: 31px !important;
  }
  .metric-viral-score small {
    max-width: 33px !important;
    font-size: 7.5px !important;
  }
  .pulse-actions {
    gap: 5px !important;
  }
  .pulse-actions button {
    padding-inline: 5px !important;
    font-size: 9.6px !important;
  }
  .pulse-actions .action-icon .ui-svg {
    width: 13px !important;
    height: 13px !important;
  }
  .social-pulse-page.missions-mode .boost-mission-card {
    grid-template-columns: 76px minmax(0, 1fr) 92px !important;
  }
  .social-pulse-page.missions-mode .mission-status {
    max-width: 98px !important;
  }
  .ai-recommendation {
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
  }
  .ai-title-row em {
    display: none;
  }
}

/* Social Pulse v1.18 pixel alignment */
.pulse-header-actions {
  align-items: stretch !important;
}
.pulse-header-actions .icon-label-btn,
.pulse-header-actions .chip.icon-label-btn,
.pulse-header-actions .btn-primary.icon-label-btn {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  vertical-align: top !important;
  transform: none !important;
  top: auto !important;
}
.pulse-header-actions .icon-label-btn .ui-svg {
  width: 14px !important;
  height: 14px !important;
}
.pulse-summary {
  gap: 9px !important;
}
.pulse-summary .summary-card {
  min-height: 54px;
  padding: 10px 12px !important;
  gap: 10px !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(24, 28, 66, 0.96), rgba(16, 19, 48, 0.98)) !important;
}
.pulse-summary .summary-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
}
.pulse-summary .summary-icon .ui-svg {
  width: 19px !important;
  height: 19px !important;
}
.pulse-summary .summary-card > div:not(.summary-icon) {
  gap: 0 !important;
}
.pulse-summary strong {
  font-size: 16px !important;
  line-height: 1 !important;
}
.pulse-summary span {
  font-size: 9px !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}
.summary-icon.summary-rising {
  background:
    radial-gradient(circle at 50% 28%, rgba(75, 227, 139, 0.36), transparent 58%),
    linear-gradient(180deg, rgba(53, 184, 121, 0.18), rgba(53, 184, 121, 0.08)) !important;
}
.summary-icon.summary-boosts {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 190, 95, 0.38), transparent 58%),
    linear-gradient(180deg, rgba(255, 133, 52, 0.18), rgba(255, 133, 52, 0.08)) !important;
}
.summary-icon.summary-reach {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 209, 102, 0.36), transparent 58%),
    linear-gradient(180deg, rgba(255, 209, 102, 0.16), rgba(255, 209, 102, 0.07)) !important;
}
.pulse-post {
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 133, 52, 0.055), transparent 34%),
    rgba(17, 20, 50, 0.98) !important;
}
.pulse-post .feed-author-row {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: start !important;
  gap: 9px !important;
  padding: 12px 12px 0 !important;
}
.pulse-post .post-kind-row {
  grid-column: 1 / -1;
  margin: 0 0 -3px !important;
}
.feed-author-name-row > strong {
  font-size: 13px !important;
  line-height: 1.1 !important;
}
.feed-author-meta {
  min-height: 17px;
}
.pulse-post .feed-author-actions {
  min-width: 72px;
}
.feed-time-right {
  margin-top: 1px;
}
.pulse-momentum {
  max-width: 92px;
}
.pulse-body {
  padding-top: 8px !important;
}
.external-metrics {
  min-height: 42px;
  margin: 8px 12px 0 !important;
  padding: 6px 0 !important;
}
.external-metrics .metric-group {
  gap: 13px;
}
.external-metrics .metric-group > span {
  font-size: 10.5px !important;
}
.metric-viral-score {
  gap: 6px !important;
}
.metric-viral-score strong {
  width: 32px !important;
  height: 32px !important;
}
.metric-viral-score small {
  max-width: 37px !important;
  font-size: 7.5px !important;
  line-height: .95 !important;
}
.pulse-actions {
  gap: 6px !important;
  margin: 8px 12px 12px !important;
}
.pulse-actions button {
  min-height: 35px !important;
  border-radius: 9px !important;
  padding: 7px 7px !important;
  font-size: 10px !important;
}
.pulse-actions .pulse-action-primary {
  order: 1;
}
.pulse-actions .pulse-action-like {
  order: 2;
}
.pulse-actions button:not(.pulse-action-primary):not(.pulse-action-like):nth-of-type(3) {
  order: 3;
}
.pulse-actions button:not(.pulse-action-primary):not(.pulse-action-like):nth-of-type(4) {
  order: 4;
}
.pulse-actions button:not(.pulse-action-primary):not(.pulse-action-like):nth-of-type(5) {
  order: 5;
}
.social-pulse-page.missions-mode .boost-mission-card {
  min-height: 104px !important;
  grid-template-columns: 76px minmax(0, 1fr) 96px !important;
  padding: 12px !important;
  align-items: center !important;
}
.social-pulse-page.missions-mode .mission-art {
  width: 76px !important;
  height: 76px !important;
  border-radius: 13px !important;
}
.social-pulse-page.missions-mode .mission-title-row {
  gap: 8px !important;
}
.social-pulse-page.missions-mode .mission-title-row strong {
  font-size: 13.5px !important;
  line-height: 1.12 !important;
}
.social-pulse-page.missions-mode .mission-status {
  max-width: 96px !important;
  padding: 4px 8px !important;
  font-size: 8px !important;
}
.social-pulse-page.missions-mode .mission-copy p {
  font-size: 11.5px !important;
  line-height: 1.26 !important;
}
.social-pulse-page.missions-mode .mission-reward-row {
  font-size: 11px !important;
}
.social-pulse-page.missions-mode .mission-progress {
  height: 5px !important;
}
.social-pulse-page.missions-mode .mission-action {
  min-width: 92px !important;
  min-height: 43px !important;
  border-radius: 11px !important;
}
.ai-recommendation {
  min-height: 76px !important;
  grid-template-columns: 48px minmax(0, 1fr) 18px !important;
  padding: 12px 14px !important;
}
.ai-title-row em {
  display: inline-flex !important;
}
.ai-recommendation small {
  max-width: 100%;
}

@media (max-width: 560px) {
  .pulse-header-actions .icon-label-btn,
  .pulse-header-actions .chip.icon-label-btn,
  .pulse-header-actions .btn-primary.icon-label-btn {
    height: 39px !important;
    min-height: 39px !important;
    max-height: 39px !important;
  }
  .pulse-summary .summary-card {
    min-height: 50px;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    padding: 8px 7px !important;
    gap: 7px !important;
  }
  .pulse-summary .summary-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .pulse-summary .summary-icon .ui-svg {
    width: 16px !important;
    height: 16px !important;
  }
  .pulse-summary strong {
    font-size: 14px !important;
  }
  .pulse-summary span {
    font-size: 7.6px !important;
  }
  .pulse-post .feed-author-row {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    padding: 11px 11px 0 !important;
  }
  .pulse-post .feed-author-actions {
    min-width: 66px;
  }
  .pulse-momentum {
    max-width: 72px;
    font-size: 8px !important;
    padding-inline: 6px !important;
  }
  .external-metrics {
    min-height: 39px;
  }
  .external-metrics .metric-group {
    gap: 8px !important;
  }
  .external-metrics .metric-group > span {
    font-size: 9.5px !important;
  }
  .metric-viral-score {
    min-width: 50px;
  }
  .metric-viral-score strong {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }
  .metric-viral-score small {
    max-width: 29px !important;
    font-size: 6.8px !important;
  }
  .pulse-actions {
    gap: 4px !important;
    margin-inline: 11px !important;
  }
  .pulse-actions button {
    min-height: 33px !important;
    padding-inline: 4px !important;
    font-size: 8.8px !important;
    gap: 3px !important;
  }
  .pulse-actions .action-icon .ui-svg {
    width: 12px !important;
    height: 12px !important;
  }
  .social-pulse-page.missions-mode .boost-mission-card {
    grid-template-columns: 72px minmax(0, 1fr) 88px !important;
    min-height: 104px !important;
    gap: 10px !important;
  }
  .social-pulse-page.missions-mode .mission-art {
    width: 72px !important;
    height: 72px !important;
  }
  .social-pulse-page.missions-mode .mission-action {
    min-width: 86px !important;
    min-height: 42px !important;
    font-size: 10.5px !important;
  }
  .social-pulse-page.missions-mode .mission-status {
    max-width: 84px !important;
  }
  .ai-title-row em {
    display: inline-flex !important;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Social Pulse v1.18 final mobile polish */
.pulse-header-actions[style*="display: none"] {
  display: none !important;
}
.pulse-header-actions {
  align-items: center !important;
}
.pulse-header-actions .chip.icon-label-btn,
.pulse-header-actions .btn-primary.icon-label-btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  align-self: center !important;
  padding-block: 0 !important;
  border-width: 1px !important;
}
.pulse-header-actions .chip.icon-label-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}
.pulse-summary .summary-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.065) !important;
}
.pulse-summary .summary-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 52%);
}
.pulse-summary .summary-icon {
  position: relative;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.18);
}
.pulse-summary .summary-icon::before,
.pulse-summary .summary-icon::after {
  display: none !important;
}
.summary-icon.summary-rising {
  color: #4be38b !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px rgba(75, 227, 139, 0.14) !important;
}
.summary-icon.summary-boosts {
  color: #ff9a4a !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px rgba(255, 133, 52, 0.16) !important;
}
.summary-icon.summary-reach {
  color: #ffd166 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px rgba(255, 209, 102, 0.14) !important;
}
.social-pulse-page .pulse-feed .pulse-score-strip,
.social-pulse-page .pulse-feed .pulse-boost {
  display: none !important;
}
.pulse-post .feed-author-row {
  grid-template-columns: 36px minmax(0, 1fr) minmax(62px, auto) !important;
}
.feed-author-actions {
  align-items: flex-end !important;
}
.feed-time-right {
  color: rgba(236, 239, 255, 0.72) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}
.pulse-momentum {
  min-height: 20px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-color: rgba(255, 133, 52, 0.38) !important;
  background: rgba(255, 133, 52, 0.12) !important;
  color: #ff9a4a !important;
  text-transform: none !important;
}
.external-metrics {
  width: calc(100% - 24px) !important;
  min-height: 42px !important;
  margin: 9px 12px 0 !important;
  padding: 6px 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 62px !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-sizing: border-box !important;
}
.external-metrics .metric-group {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
}
.external-metrics .metric-group > span {
  min-width: 0 !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  color: rgba(236, 239, 255, 0.78) !important;
  overflow: hidden !important;
}
.external-metrics .metric-icon .ui-svg {
  width: 12px !important;
  height: 12px !important;
}
.metric-viral-score {
  min-width: 62px !important;
  justify-self: end !important;
}
.metric-viral-score strong {
  background:
    conic-gradient(from 210deg, #ff8a3d, #ffd166, #55e6a5, #ff8a3d) !important;
  color: #0a0d1c !important;
  border: 0 !important;
  box-shadow: 0 0 14px rgba(255, 133, 52, 0.20) !important;
}
.metric-viral-score small {
  text-transform: none !important;
}
.pulse-actions {
  display: grid !important;
  grid-template-columns: 1.18fr 1fr 1fr 1fr 1fr !important;
  align-items: stretch !important;
}
.pulse-actions > button {
  order: initial !important;
  min-width: 0 !important;
}
.pulse-actions > button[style*="display: none"] {
  display: none !important;
}
.pulse-actions .pulse-action-primary {
  order: 1 !important;
}
.pulse-actions .pulse-action-like {
  order: 2 !important;
}
.pulse-actions > button:nth-of-type(3) {
  order: 3 !important;
}
.pulse-actions > button:nth-of-type(4) {
  order: 4 !important;
}
.pulse-actions > button:nth-of-type(5) {
  order: 5 !important;
}
.pulse-actions > button[title="Save post"] {
  order: 6 !important;
}
.pulse-actions small {
  display: none !important;
}
.pulse-actions .action-icon {
  flex: 0 0 auto;
}
.pulse-actions .pulse-action-primary,
.pulse-actions .pulse-action-like.active {
  background: linear-gradient(135deg, #ff8435, #ffb05d) !important;
  border-color: rgba(255, 133, 52, 0.85) !important;
  color: #090b16 !important;
  box-shadow: 0 9px 18px rgba(255, 133, 52, 0.18) !important;
}
.pulse-actions button:not(.pulse-action-primary):not(.pulse-action-like) {
  background: rgba(8, 11, 28, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  color: rgba(236, 239, 255, 0.84) !important;
}
.social-pulse-page.missions-mode .boost-mission-list {
  gap: 10px !important;
}
.social-pulse-page.missions-mode .boost-mission-card {
  position: relative;
  grid-template-columns: 76px minmax(0, 1fr) 98px !important;
  gap: 11px !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 100% 50%, rgba(255, 133, 52, 0.13), transparent 40%),
    linear-gradient(135deg, rgba(18, 22, 55, 0.98), rgba(15, 17, 42, 0.98)) !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
}
.social-pulse-page.missions-mode .boost-mission-card.complete {
  border-color: rgba(49, 166, 109, 0.30) !important;
  background:
    radial-gradient(circle at 100% 50%, rgba(49, 166, 109, 0.13), transparent 42%),
    linear-gradient(135deg, rgba(18, 28, 52, 0.98), rgba(15, 17, 42, 0.98)) !important;
}
.social-pulse-page.missions-mode .mission-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start !important;
}
.social-pulse-page.missions-mode .mission-title-row strong {
  max-width: 100%;
}
.social-pulse-page.missions-mode .mission-status {
  justify-self: end;
  height: 20px !important;
  max-width: 92px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: #ff9a4a !important;
  border-color: rgba(255, 133, 52, 0.26) !important;
  background: rgba(255, 133, 52, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.social-pulse-page.missions-mode .mission-action {
  align-self: center !important;
  justify-self: end !important;
  color: #090b16 !important;
  background: linear-gradient(135deg, #ff8435, #ffb05d) !important;
  border: 0 !important;
}
.social-pulse-page.missions-mode .boost-mission-card.complete .mission-action {
  color: #31a66d !important;
  background: rgba(49, 166, 109, 0.16) !important;
}
.social-pulse-page.missions-mode .mission-progress {
  background: rgba(255, 133, 52, 0.13) !important;
}
.social-pulse-page.missions-mode .mission-progress > div {
  background: linear-gradient(90deg, #ff8435, #ffb05d) !important;
}
.social-pulse-page.missions-mode .ai-recommendation {
  border-color: rgba(255, 133, 52, 0.16) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 133, 52, 0.16), transparent 36%),
    linear-gradient(135deg, rgba(23, 20, 55, 0.98), rgba(18, 22, 57, 0.98)) !important;
}
.social-pulse-page.missions-mode .ai-orb {
  color: #ff9a4a !important;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 209, 102, 0.22), transparent 60%),
    rgba(255, 133, 52, 0.12) !important;
  border: 1px solid rgba(255, 133, 52, 0.32) !important;
}
.social-pulse-page.missions-mode .ai-title-row em {
  height: 20px;
  padding: 3px 8px;
  border: 1px solid rgba(145, 118, 255, 0.22);
  border-radius: 999px;
  background: rgba(145, 118, 255, 0.10);
  color: #c4b5fd;
  font-size: 8px;
}

@media (max-width: 560px) {
  .pulse-header-actions .chip.icon-label-btn,
  .pulse-header-actions .btn-primary.icon-label-btn {
    height: 39px !important;
    min-height: 39px !important;
    max-height: 39px !important;
  }
  .pulse-actions {
    grid-template-columns: 1.12fr .9fr 1fr 1fr .9fr !important;
  }
  .pulse-actions button {
    min-height: 32px !important;
  }
  .external-metrics {
    width: calc(100% - 22px) !important;
    min-height: 39px !important;
    margin-inline: 11px !important;
    grid-template-columns: minmax(0, 1fr) 54px !important;
    gap: 6px !important;
  }
  .external-metrics .metric-group > span {
    font-size: 9px !important;
    gap: 4px !important;
  }
  .metric-viral-score {
    min-width: 54px !important;
  }
  .social-pulse-page.missions-mode .boost-mission-card {
    grid-template-columns: 72px minmax(0, 1fr) 88px !important;
    gap: 10px !important;
  }
  .social-pulse-page.missions-mode .mission-status {
    max-width: 78px !important;
  }
  .social-pulse-page.missions-mode .mission-title-row strong {
    font-size: 13px !important;
  }
}

/* Social Pulse v1.19 final header + mission click polish */
.pulse-post .feed-author-row {
  grid-template-columns: 36px minmax(0, 1fr) 78px !important;
}
.pulse-post .feed-author-actions {
  width: 78px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  justify-items: end !important;
  gap: 4px !important;
}
.feed-author-name-row .inline-follow-btn {
  flex: 0 0 auto !important;
  min-height: 20px !important;
  height: 20px !important;
  max-width: 72px !important;
  margin-left: 3px !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.feed-author-name-row .inline-follow-btn.following {
  border-color: rgba(49, 166, 109, 0.34) !important;
  background: rgba(49, 166, 109, 0.12) !important;
  color: #55e6a5 !important;
}
.feed-time-right {
  display: block !important;
  max-width: 78px !important;
  overflow: hidden !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
}
.pulse-post .pulse-momentum {
  width: auto !important;
  max-width: 78px !important;
  min-height: 17px !important;
  height: 17px !important;
  padding: 3px 6px !important;
  font-size: 7.2px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.metric-viral-score {
  display: inline-grid !important;
  grid-template-columns: 31px minmax(0, 24px) !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 4px !important;
}
.metric-viral-score strong {
  width: 31px !important;
  height: 31px !important;
  border: 1px solid rgba(255, 209, 102, 0.82) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(15, 18, 43, 0.98) 0 57%, transparent 58%),
    conic-gradient(from 210deg, #ff8435, #ffd166, #55e6a5, #ff8435) !important;
  color: #ffd166 !important;
  box-shadow:
    inset 0 0 0 2px rgba(8, 11, 28, 0.96),
    0 0 15px rgba(255, 133, 52, 0.22) !important;
}
.metric-viral-score small {
  max-width: 25px !important;
  color: rgba(236, 239, 255, 0.70) !important;
  font-size: 6.6px !important;
  font-weight: 900 !important;
  line-height: .9 !important;
  text-align: left !important;
}
.social-pulse-page.missions-mode .boost-mission-card {
  cursor: pointer;
}
.social-pulse-page.missions-mode .boost-mission-card:focus-visible {
  outline: 2px solid rgba(255, 133, 52, 0.68);
  outline-offset: 2px;
}
.social-pulse-page.missions-mode .boost-mission-card:active {
  transform: translateY(1px);
}
.social-pulse-page.missions-mode .mission-action {
  position: relative;
  z-index: 2;
}
.social-pulse-page.missions-mode .mission-status {
  min-width: 0 !important;
  max-width: 102px !important;
}

@media (max-width: 560px) {
  .pulse-post .feed-author-row {
    grid-template-columns: 34px minmax(0, 1fr) 68px !important;
  }
  .pulse-post .feed-author-actions {
    width: 68px !important;
  }
  .feed-time-right {
    max-width: 68px !important;
    font-size: 8.5px !important;
  }
  .pulse-post .pulse-momentum {
    max-width: 68px !important;
    font-size: 6.9px !important;
    padding-inline: 5px !important;
  }
  .feed-author-name-row .inline-follow-btn {
    max-width: 58px !important;
    height: 18px !important;
    min-height: 18px !important;
    padding-inline: 6px !important;
    font-size: 7.2px !important;
  }
  .metric-viral-score {
    grid-template-columns: 29px minmax(0, 22px) !important;
    gap: 3px !important;
  }
  .metric-viral-score strong {
    width: 29px !important;
    height: 29px !important;
  }
  .metric-viral-score small {
    max-width: 22px !important;
    font-size: 6.2px !important;
  }
  .social-pulse-page.missions-mode .mission-status {
    max-width: 86px !important;
  }
}

/* X ReplyOn admin */
.admin-x-replyon-page {
  display: grid;
  gap: 14px;
}
.admin-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.chip.danger {
  border-color: rgba(231, 76, 60, 0.35);
  color: #ff8b80;
}
.pill.danger {
  border-color: rgba(231, 76, 60, 0.35);
  color: #ff8b80;
}
.x-autopilot-page {
  gap: 16px;
}
.x-autopilot-header {
  align-items: center;
}
.x-replyon-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: visible;
  padding-bottom: 2px;
}
.x-replyon-tabs button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  flex: 1 1 106px;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 13px;
}
.x-replyon-tabs button.active {
  background: var(--grad-accent);
  border-color: transparent;
  color: #0a0e1d;
}
.x-replyon-page {
  display: grid;
  gap: 14px;
}
.x-replyon-empty {
  border-color: rgba(255, 133, 52, 0.24);
  display: grid;
  gap: 8px;
  min-height: 180px;
  place-items: center start;
}
.x-replyon-hero {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255,133,52,.14), rgba(125,140,255,.10)),
    var(--card);
  border: 1px solid rgba(255,133,52,.22);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 18px;
}
.x-replyon-hero h3 { font-size: 24px; margin: 2px 0 6px; }
.x-replyon-version-pill {
  border: 1px solid rgba(255, 133, 52, 0.35);
  border-radius: 999px;
  color: var(--orange);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  margin-top: 8px;
  padding: 4px 8px;
}
.x-replyon-hero-actions,
.x-replyon-actions,
.x-replyon-section-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.x-replyon-actions > button {
  position: relative;
  z-index: 1;
}
.x-replyon-delete-action {
  align-items: center;
  background: rgba(255, 92, 92, 0.13);
  border: 1px solid rgba(255, 92, 92, 0.45);
  border-radius: 999px;
  color: #ff9a91;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 38px;
  min-width: 92px;
  padding: 8px 14px;
  touch-action: manipulation;
  user-select: none;
}
.x-replyon-delete-action.confirming {
  background: linear-gradient(135deg, #ff6b5f, #ff9c52);
  border-color: transparent;
  color: #140910;
  box-shadow: 0 8px 22px rgba(255, 92, 92, 0.24);
}
.x-replyon-delete-action:disabled {
  cursor: wait;
  opacity: .65;
}
.x-replyon-delete-wide {
  border-radius: 8px;
  margin-top: 2px;
  min-height: 46px;
  width: 100%;
}
.x-replyon-campaign-row .btn-primary.small {
  min-height: 44px;
  min-width: 92px;
  touch-action: manipulation;
}
.x-replyon-hero-actions { justify-content: flex-end; }
.x-replyon-file-btn { cursor: pointer; margin: 0; }
.x-replyon-status-row,
.x-replyon-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.x-replyon-status-row > div,
.x-replyon-metric {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}
.x-replyon-status-row span,
.x-replyon-metric span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  text-transform: uppercase;
}
.x-replyon-status-row strong,
.x-replyon-metric strong {
  display: block;
  font-size: 20px;
  line-height: 1.15;
  margin-top: 4px;
}
.x-replyon-tabs { margin-bottom: 2px; }
.x-replyon-panel {
  display: grid;
  gap: 14px;
}
.x-replyon-runner {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.x-replyon-reset-card {
  align-items: center;
  border-color: rgba(255, 92, 92, 0.28);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
}
.x-replyon-reset-card h3 {
  margin: 2px 0 4px;
}
.x-replyon-info-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.x-replyon-info-card {
  display: grid;
  gap: 6px;
  min-height: 96px;
}
.x-replyon-info-card strong {
  color: var(--fg);
  font-size: 14px;
}
.x-replyon-info-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.x-replyon-section-head {
  justify-content: space-between;
}
.x-replyon-section-head h3 { margin: 2px 0 0; }
.x-replyon-card-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.x-replyon-account-card,
.x-replyon-target-card,
.x-replyon-form-card,
.x-replyon-history-row,
.x-replyon-campaign-row {
  display: grid;
  gap: 10px;
}
.x-replyon-account-card header,
.x-replyon-history-row header,
.x-replyon-campaign-row {
  align-items: center;
  display: grid;
  gap: 10px;
}
.x-replyon-account-card header {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}
.x-replyon-campaign-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.x-replyon-run-message {
  display: block;
  margin-top: 2px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.x-replyon-history-row header {
  grid-template-columns: minmax(0, 1fr) auto;
}
.x-replyon-avatar {
  align-items: center;
  background: var(--grad-accent);
  border-radius: 8px;
  color: #0a0e1d;
  display: flex;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  width: 42px;
}
.x-replyon-account-card b.ok { color: #52c88c; }
.x-replyon-account-card b.bad { color: #ff7b7b; }
.x-replyon-inline-form {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(92px, 120px) minmax(0, 1fr) auto;
  padding-top: 10px;
}
.x-replyon-form-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.x-replyon-form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.x-replyon-form-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.x-replyon-form-grid label > span {
  color: var(--muted);
  font-size: 12px;
}
.x-replyon-label {
  align-items: center;
  display: inline-flex !important;
  gap: 6px;
  overflow: visible;
}
.x-replyon-help {
  align-items: center;
  background: rgba(255, 133, 52, 0.16);
  border: 1px solid rgba(255, 133, 52, 0.32);
  border-radius: 999px;
  color: var(--accent);
  cursor: help;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  height: 18px;
  justify-content: center;
  line-height: 1;
  position: relative;
  width: 18px;
  z-index: 3;
}
.x-replyon-help::after {
  background: #11152d;
  border: 1px solid rgba(255, 133, 52, 0.28);
  border-radius: 8px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28);
  color: #f8f4ff;
  content: attr(data-tip);
  display: none;
  font-size: 12px;
  font-weight: 600;
  left: 50%;
  line-height: 1.35;
  max-width: min(280px, 72vw);
  min-width: 220px;
  padding: 10px 12px;
  position: absolute;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: normal;
  z-index: 30;
}
.x-replyon-help:hover::after,
.x-replyon-help:focus::after {
  display: block;
}
.x-replyon-form-grid input,
.x-replyon-form-grid select,
.x-replyon-form-grid textarea,
.x-replyon-inline-form input,
.x-replyon-inline-form select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  min-width: 0;
  padding: 10px;
  width: 100%;
}
.x-replyon-wide { grid-column: 1 / -1; }
.x-replyon-filter-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.x-replyon-filter-row label {
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  flex: 0 1 auto;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
}
.x-replyon-filter-row input {
  width: auto;
}
.x-replyon-list {
  display: grid;
  gap: 10px;
}
.x-replyon-target-card p,
.x-replyon-history-row p {
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .x-replyon-hero,
  .x-replyon-runner,
  .x-replyon-reset-card,
  .x-replyon-campaign-row {
    grid-template-columns: 1fr;
  }
  .x-replyon-hero-actions,
  .x-replyon-section-head {
    align-items: stretch;
    flex-direction: column;
  }
  .x-replyon-status-row,
  .x-replyon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .x-replyon-info-grid {
    grid-template-columns: 1fr;
  }
  .x-replyon-form-grid,
  .x-replyon-form-grid.two {
    grid-template-columns: 1fr;
  }
  .x-replyon-inline-form {
    grid-template-columns: 1fr;
  }
}
.x-autopilot-hero {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 133, 52, 0.14), rgba(82, 200, 140, 0.09)),
    var(--card);
  border: 1px solid rgba(255, 133, 52, 0.22);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 18px;
}
.x-autopilot-hero h3 {
  font-size: 22px;
  margin: 2px 0 6px;
}
.x-autopilot-switch {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 10px;
}
.x-autopilot-switch input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}
.x-autopilot-switch span {
  background: rgba(255,255,255,.1);
  border: 1px solid var(--line);
  border-radius: 999px;
  display: block;
  height: 34px;
  position: relative;
  transition: .18s ease;
  width: 62px;
}
.x-autopilot-switch span::after {
  background: var(--fg);
  border-radius: 50%;
  content: "";
  height: 26px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: .18s ease;
  width: 26px;
}
.x-autopilot-switch input:checked + span {
  background: rgba(82, 200, 140, 0.22);
  border-color: rgba(82, 200, 140, 0.5);
}
.x-autopilot-switch input:checked + span::after {
  background: #52c88c;
  transform: translateX(28px);
}
.x-autopilot-switch input:disabled + span {
  cursor: not-allowed;
  opacity: .45;
}
.x-autopilot-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr);
}
.x-autopilot-card {
  display: grid;
  gap: 12px;
}
.x-activity-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.x-activity-grid div {
  background: var(--tile-bg);
  border: 1px solid var(--tile-bd);
  border-radius: 8px;
  padding: 10px 12px;
}
.x-activity-grid span,
.x-activity-grid strong {
  display: block;
}
.x-activity-grid span {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.x-activity-grid strong {
  overflow-wrap: anywhere;
}
.x-activity-alert {
  border: 1px solid rgba(255, 170, 80, 0.34);
  border-radius: 8px;
  background: rgba(255, 170, 80, 0.1);
  color: var(--fg);
  display: grid;
  gap: 4px;
  padding: 11px 12px;
}
.x-activity-alert strong {
  font-size: 13px;
}
.x-activity-alert span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.x-activity-alert.danger {
  background: rgba(231, 76, 60, 0.1);
  border-color: rgba(231, 76, 60, 0.34);
}

@media (max-width: 860px) {
  .x-autopilot-hero,
  .x-autopilot-grid,
  .x-activity-grid {
    grid-template-columns: 1fr;
  }
}

/* Elite mobile UI layer */
:root {
  --elite-bg: #060916;
  --elite-bg-2: #0a1022;
  --elite-panel: rgba(13, 20, 48, 0.86);
  --elite-panel-2: rgba(16, 25, 55, 0.82);
  --elite-line: rgba(255,255,255,0.08);
  --elite-line-strong: rgba(255,155,61,0.25);
  --elite-text: #f5f7ff;
  --elite-muted: #9ba6c8;
  --elite-orange: #ff9b3d;
  --elite-orange-2: #ffb86a;
  --elite-blue: #4ea1ff;
  --elite-cyan: #35d6ff;
  --elite-purple: #8b5cf6;
  --elite-pink: #ff4fd8;
  --elite-green: #31d98b;
  --elite-red: #ff5c7a;
  --elite-radius-card: 24px;
  --elite-radius-panel: 28px;
  --elite-shadow: 0 18px 46px rgba(0,0,0,0.34);
  --elite-glow-orange: 0 0 0 1px rgba(255,155,61,0.22), 0 0 28px rgba(255,139,49,0.16);
  --elite-glow-blue: 0 0 0 1px rgba(78,161,255,0.18), 0 0 24px rgba(78,161,255,0.10);
}
body.dark {
  background:
    radial-gradient(circle at 90% 0%, rgba(255,155,61,.10), transparent 28%),
    radial-gradient(circle at 15% 8%, rgba(78,161,255,.08), transparent 30%),
    linear-gradient(180deg, #050816 0%, #070a18 100%) !important;
}
.hdr { display: none !important; }
.ui-svg { width: 1em; height: 1em; display: block; }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: linear-gradient(180deg, rgba(6,9,22,.96), rgba(6,9,22,.78));
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.app-topbar .desktop-only { display: none !important; }
.topbar-menu {
  width: 44px;
  height: 44px;
  border: 1px solid var(--elite-line);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
  color: var(--elite-text);
  display: grid !important;
  place-items: center;
  padding: 0;
}
.topbar-menu .ui-svg { width: 24px; height: 24px; }
.topbar-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}
.brand-orb {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  box-shadow: var(--elite-glow-orange);
  flex: 0 0 auto;
}
.brand-orb .logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 999px;
}
.brand-copy { min-width: 0; display: grid; gap: 2px; }
.brand-copy strong {
  color: var(--elite-text);
  font-size: 15px;
  line-height: 1.05;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-copy .sparkle { color: var(--elite-orange-2); }
.brand-copy small {
  color: var(--elite-muted);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.streak-pill {
  height: 44px;
  min-width: 94px;
  padding: 0 12px;
  border: 1px solid rgba(255,155,61,.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,184,106,.22), transparent 40%),
    linear-gradient(180deg, rgba(255,155,61,.13), rgba(255,155,61,.045));
  color: var(--elite-orange-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--elite-glow-orange);
}
.streak-pill .streak-icon .ui-svg { width: 18px; height: 18px; }
.streak-pill strong { display: block; font-size: 18px; line-height: 1; }
.streak-pill small {
  display: block;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: 0;
}
.topbar-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,155,61,.26);
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  color: var(--elite-text);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
}
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.topbar-avatar span { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 850; }
.online-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--elite-green);
  border: 2px solid #070a18;
}
.daily-momentum-popover {
  position: sticky;
  top: 66px;
  z-index: 880;
  margin: 0 14px 8px;
  padding: 10px;
  border: 1px solid var(--elite-line-strong);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,155,61,.16), transparent 34%),
    radial-gradient(circle at 96% 100%, rgba(78,161,255,.12), transparent 32%),
    linear-gradient(180deg, rgba(16,25,55,.97), rgba(8,12,30,.97));
  box-shadow: var(--elite-shadow);
}
.daily-momentum-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.daily-momentum-head > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.daily-momentum-head .eyebrow {
  color: var(--elite-orange-2);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
}
.daily-momentum-head strong {
  overflow: hidden;
  color: var(--elite-text);
  font-size: 15px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daily-momentum-head button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--elite-line);
  background: rgba(255,255,255,.04);
  color: var(--elite-muted);
  display: grid;
  place-items: center;
}
.daily-momentum-streak {
  min-width: 72px;
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(255,155,61,.28);
  border-radius: 999px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
  box-shadow: 0 0 18px rgba(255,155,61,.14);
}
.daily-momentum-streak b {
  color: var(--elite-text);
  font-size: 15px;
  line-height: 1;
}
.daily-momentum-streak small {
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.daily-momentum-focus {
  width: 100%;
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(255,155,61,.22);
  border-radius: 15px;
  color: var(--elite-text);
  background: rgba(255,255,255,.04);
  text-align: left;
}
.daily-momentum-focus > span:first-child {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}
.daily-momentum-focus .ui-svg {
  width: 21px;
  height: 21px;
}
.daily-momentum-focus small,
.daily-momentum-focus strong,
.daily-momentum-focus em {
  display: block;
  min-width: 0;
}
.daily-momentum-focus small {
  color: var(--elite-orange-2);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .05em;
}
.daily-momentum-focus strong {
  overflow: hidden;
  color: var(--elite-text);
  font-size: 12.5px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daily-momentum-focus em {
  overflow: hidden;
  color: var(--elite-muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daily-momentum-focus b {
  color: var(--elite-orange-2);
  font-size: 10px;
}
.daily-momentum-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.daily-momentum-grid button {
  min-width: 0;
  min-height: 62px;
  border: 1px solid var(--elite-line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: var(--elite-text);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 3px;
  padding: 6px 4px;
}
.daily-momentum-grid button:disabled { opacity: .68; }
.daily-momentum-grid .ui-svg { width: 18px; height: 18px; color: var(--elite-orange-2); }
.daily-momentum-grid strong { font-size: 10.5px; line-height: 1; }
.daily-momentum-grid small { color: var(--elite-muted); font-size: 8px; line-height: 1; }
.daily-momentum-season {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--elite-muted);
  font-size: 10px;
}
.daily-momentum-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.daily-momentum-meta span {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.daily-momentum-meta b {
  color: var(--elite-orange-2);
  font-size: 10px;
  line-height: 1;
}
.daily-momentum-meta small {
  overflow: hidden;
  color: var(--elite-muted);
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daily-momentum-meta .comeback {
  border-color: rgba(49,230,149,.16);
  background: rgba(49,230,149,.06);
}
.daily-momentum-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}
.daily-momentum-week span {
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 11px;
  color: var(--elite-muted);
  background: rgba(255,255,255,.035);
}
.daily-momentum-week span.active,
.daily-momentum-week span.claimed,
.daily-momentum-week span.today {
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
  border-color: rgba(255,155,61,.22);
}
.daily-momentum-week span.protected {
  color: var(--elite-blue);
  border-color: rgba(78,161,255,.22);
  background: rgba(78,161,255,.09);
}
.daily-momentum-week b,
.daily-momentum-week i {
  font-size: 8.5px;
  line-height: 1;
  font-style: normal;
}
.daily-momentum-rewards {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.daily-momentum-rewards summary {
  cursor: pointer;
  color: var(--elite-orange-2);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}
.daily-momentum-rewards div {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
}
.daily-momentum-rewards .ui-svg {
  width: 15px;
  height: 15px;
  color: var(--elite-orange-2);
}
.daily-momentum-rewards strong {
  overflow: hidden;
  color: var(--elite-text);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.daily-momentum-rewards small {
  color: var(--elite-muted);
  font-size: 8.5px;
  white-space: nowrap;
}
.home-elite-page,
.elite-social-pulse-page,
.creator-hub-page {
  width: min(100%, 980px);
  margin-inline: auto;
  display: grid;
  gap: 14px;
}
.elite-hero-card,
.home-pulse-panel,
.elite-rank-card,
.elite-pulse-shell,
.elite-rising-carousel,
.elite-pulse-post,
.elite-ai-recommendation,
.creator-performance-card,
.connected-channels-panel,
.ai-content-studio,
.boost-missions-elite,
.top-performing-post-card,
.creator-status-strip {
  border-radius: var(--elite-radius-panel);
  border: 1px solid var(--elite-line);
  background:
    radial-gradient(circle at 96% 0%, rgba(255,155,61,.08), transparent 30%),
    linear-gradient(180deg, rgba(16,25,55,.84), rgba(9,14,34,.84));
  box-shadow: var(--elite-shadow);
  overflow: hidden;
}
.section-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.section-head-row h2,
.section-head-row h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--elite-text); font-size: 18px; line-height: 1.1; }
.section-head-row h2 .ui-svg,
.section-head-row h3 .ui-svg { width: 20px; height: 20px; color: var(--elite-orange); }
.section-head-row p { margin: 3px 0 0; color: var(--elite-muted); font-size: 12px; }
.section-head-row button,
.section-link {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--elite-orange-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 850;
  font-size: 12px;
  padding: 7px 8px;
}
.section-head-row button .ui-svg,
.section-link .ui-svg { width: 15px; height: 15px; }
.elite-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 108px;
  grid-template-rows: minmax(150px, auto) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 14px;
  min-height: 270px;
}
.hero-bg-orb { position: absolute; pointer-events: none; border-radius: 999px; filter: blur(4px); opacity: .7; }
.hero-bg-orb-left { left: -60px; top: -30px; width: 190px; height: 190px; background: radial-gradient(circle, rgba(255,137,49,.30), transparent 66%); }
.hero-bg-orb-right { right: -36px; top: -24px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(78,161,255,.24), transparent 68%); }
.hero-mascot-panel,
.hero-main-copy,
.hero-ai-score,
.elite-ai-input { position: relative; z-index: 1; }
.hero-mascot-panel { align-self: end; display: grid; place-items: end center; height: 162px; overflow: hidden; }
.hero-mascot-panel svg { width: 154px; max-width: 154px; filter: drop-shadow(0 12px 22px rgba(255, 133, 52, .24)); animation: eliteFloat 4.8s ease-in-out infinite; }
.hero-robot-svg { overflow: visible; }
.hero-robot-eye-glow { animation: robotEyePulse 2.8s ease-in-out infinite; transform-origin: center; }
.hero-robot-eye-core { animation: robotEyeBlink 5.6s ease-in-out infinite; transform-origin: center; }
.hero-robot-badge { animation: robotBadgeGlow 3.6s ease-in-out infinite; transform-origin: center; }
.hero-robot-sparks { animation: robotSparkDrift 4.4s ease-in-out infinite; transform-origin: center; }
@keyframes eliteFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes robotEyePulse { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes robotEyeBlink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.18); } 97% { transform: scaleY(1); } }
@keyframes robotBadgeGlow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,155,61,.25)); } 50% { filter: drop-shadow(0 0 9px rgba(255,184,106,.45)); } }
@keyframes robotSparkDrift { 0%, 100% { transform: translateY(0); opacity: .72; } 50% { transform: translateY(-5px); opacity: 1; } }
.hero-main-copy h1 { margin: 0; color: var(--elite-text); font-size: 27px; line-height: 1.03; font-weight: 900; }
.hero-main-copy h1 span { color: var(--elite-orange); text-shadow: 0 0 18px rgba(255,155,61,.28); }
.hero-main-copy p { margin: 8px 0 12px; color: var(--elite-muted); font-size: 13px; }
.hero-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.hero-chip-row button {
  min-height: 30px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: var(--elite-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 760;
}
.hero-chip-row .ui-svg { width: 14px; height: 14px; color: var(--elite-orange); }
.hero-ai-score { display: grid; justify-items: center; }
.ai-score-ring {
  width: 104px;
  height: 104px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: var(--elite-text);
  background:
    radial-gradient(circle at center, rgba(6,9,22,.92) 44%, transparent 45%),
    conic-gradient(from 210deg, var(--elite-blue), var(--elite-purple), var(--elite-orange), var(--elite-blue));
  box-shadow: 0 0 34px rgba(78,161,255,.28), 0 0 28px rgba(255,155,61,.20);
  animation: eliteOrb 3.8s ease-in-out infinite;
}
@keyframes eliteOrb { 0%, 100% { filter: saturate(1); } 50% { filter: saturate(1.22) brightness(1.05); } }
.ai-score-ring small { color: #bfe2ff; font-size: 10px; font-weight: 850; letter-spacing: 0; }
.ai-score-ring strong { color: var(--elite-orange-2); font-size: 29px; line-height: 1; }
.ai-score-ring span { color: var(--elite-muted); font-size: 10px; }
.elite-ai-input {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 56px minmax(0,1fr) 46px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255,155,61,.30);
  border-radius: 26px;
  background: rgba(7,11,28,.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 28px rgba(255,155,61,.12);
}
.ai-input-badge {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  border: 1px solid rgba(255,155,61,.5);
  background: radial-gradient(circle, rgba(255,155,61,.22), rgba(255,155,61,.06));
  box-shadow: 0 0 22px rgba(255,155,61,.42);
  font-weight: 900;
}
.elite-ai-input input {
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--elite-text) !important;
  font-size: 13px;
  box-shadow: none !important;
}
.ai-input-send {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #07101f;
  background: linear-gradient(135deg, #ffb86a, #ff7a1f);
  box-shadow: 0 8px 18px rgba(255,122,31,.30);
}
.ai-input-send .ui-svg { width: 22px; height: 22px; }

.home-pulse-panel { padding: 14px; }
.platform-signal-scroll,
.pulse-platform-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 112px;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 1px 4px;
  scroll-snap-type: x proximity;
}
.platform-signal-scroll::-webkit-scrollbar,
.pulse-platform-strip::-webkit-scrollbar,
.rising-creator-scroll::-webkit-scrollbar,
.creator-channel-row::-webkit-scrollbar { display: none; }
.platform-signal-card,
.pulse-platform-card {
  position: relative;
  min-height: 74px;
  border: 1px solid var(--elite-line);
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.08), transparent 42%),
    rgba(12,18,43,.72);
  color: var(--elite-text);
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 9px;
  scroll-snap-align: start;
  overflow: hidden;
}
.platform-signal-icon,
.platform-logo {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.platform-signal-icon .platform-svg,
.platform-logo .platform-svg { width: 21px; height: 21px; }
.platform-signal-copy strong,
.pulse-platform-card strong { display: block; color: var(--elite-text); font-size: 13px; line-height: 1; }
.platform-signal-copy small,
.pulse-platform-card small { color: var(--elite-orange-2); font-size: 9px; font-weight: 850; letter-spacing: 0; }
.mini-trend-line,
.sparkline {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 12px;
  border-bottom: 2px solid currentColor;
  border-radius: 50%;
  opacity: .7;
  transform: skewX(-20deg);
}
.platform-instagram { border-color: rgba(255,79,216,.25); color: var(--elite-pink); }
.platform-tiktok { border-color: rgba(53,214,255,.25); color: var(--elite-cyan); }
.platform-youtube { border-color: rgba(255,92,122,.24); color: var(--elite-red); }
.platform-facebook { border-color: rgba(78,161,255,.25); color: var(--elite-blue); }
.platform-telegram,
.platform-socio { border-color: rgba(53,214,255,.24); color: var(--elite-cyan); }
.home-pulse-post-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(212px, 31%);
  gap: 10px;
  overflow-x: auto;
  padding-top: 10px;
  scrollbar-width: none;
}
.home-pulse-post-grid::-webkit-scrollbar { display: none; }
.home-pulse-post {
  min-height: 154px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto auto;
  gap: 8px;
  border: 1px solid rgba(78,161,255,.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(78,161,255,.14), transparent 42%),
    rgba(8,14,36,.76);
  padding: 12px;
  color: var(--elite-text);
  cursor: pointer;
  overflow: hidden;
}
.home-pulse-post header {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
}
.home-pulse-post header strong,
.elite-rank-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-pulse-post header small { color: var(--elite-muted); font-size: 10px; }
.home-pulse-post p { margin: 0; color: var(--elite-text); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.home-pulse-post img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(255,155,61,.08);
}
.home-pulse-post footer,
.elite-post-metrics { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.home-pulse-post footer span,
.elite-post-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--elite-muted);
  font-size: 11px;
}
.home-pulse-post footer .ui-svg,
.elite-post-metrics .ui-svg { width: 14px; height: 14px; }
.platform-mini {
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.platform-mini::before { content: none !important; }
.platform-mini .platform-svg { width: 15px !important; height: 15px !important; }
.mini-x { background: #07090f !important; color: #fff !important; }
.mini-instagram { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045) !important; color: #fff !important; }
.mini-tiktok { background: #05070d !important; color: #fff !important; }
.mini-youtube { background: #ff0033 !important; color: #fff !important; }
.mini-facebook { background: #1877f2 !important; color: #fff !important; }
.mini-socio,
.mini-telegram { background: #26a5e4 !important; color: #fff !important; }
.elite-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.elite-stat-card {
  min-width: 0;
  min-height: 76px;
  border: 1px solid var(--elite-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16,25,55,.78), rgba(10,16,38,.80));
  display: grid;
  grid-template-columns: 40px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.stat-icon { width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; }
.stat-icon .ui-svg { width: 22px; height: 22px; }
.stat-icon.users { color: #ffbf6f; background: rgba(255,155,61,.12); }
.stat-icon.ai { color: var(--elite-orange); background: rgba(255,155,61,.12); }
.stat-icon.groups { color: var(--elite-pink); background: rgba(255,79,216,.10); }
.stat-icon.shield { color: var(--elite-orange-2); background: rgba(255,155,61,.12); }
.elite-stat-card strong,
.elite-stat-card small,
.elite-stat-card em { display: block; min-width: 0; }
.elite-stat-card strong { color: var(--elite-text); font-size: 19px; line-height: 1; }
.elite-stat-card small { color: var(--elite-muted); font-size: 11px; margin-top: 2px; }
.elite-stat-card em { color: var(--elite-green); font-style: normal; font-size: 10px; margin-top: 3px; white-space: nowrap; }
.elite-trending-ticker {
  min-height: 42px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--elite-line);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255,155,61,.12), rgba(16,25,55,.72) 34%, rgba(255,155,61,.08));
  overflow: hidden;
}
.elite-trending-ticker strong { display: inline-flex; align-items: center; gap: 6px; color: var(--elite-orange-2); font-size: 13px; white-space: nowrap; }
.elite-trending-ticker .ui-svg { width: 16px; height: 16px; }
.ticker-track { min-width: 0; display: flex; align-items: center; gap: 12px; overflow: hidden; }
.ticker-track button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--elite-muted); font-size: 12px; padding: 0; white-space: nowrap; }
.ticker-track span { color: var(--elite-text); font-weight: 850; }
.ticker-track i { color: var(--elite-green); }
.live-badge {
  padding: 7px 13px;
  border: 1px solid rgba(255,155,61,.45);
  border-radius: 999px;
  color: var(--elite-orange-2);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(255,155,61,.34);
}
.elite-leader-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.elite-rank-card { padding: 12px; }
.rank-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.rank-card-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--elite-text); font-size: 16px; }
.rank-card-head h3 .ui-svg { color: var(--elite-orange); width: 18px; height: 18px; }
.rank-card-head button { border: 1px solid var(--elite-line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--elite-muted); padding: 6px 10px; font-size: 11px; }
.elite-rank-row {
  width: 100%;
  min-width: 0;
  height: 38px;
  display: grid;
  grid-template-columns: 28px 28px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  color: var(--elite-text);
  padding: 5px 8px;
  margin-bottom: 6px;
  text-align: left;
}
.rank-badge,
.mini-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
}
.rank-badge { background: rgba(255,255,255,.07); color: var(--elite-text); }
.rank-1 { background: linear-gradient(135deg,#ffd56c,#ff9b3d); color: #201008; }
.rank-2 { background: linear-gradient(135deg,#e5ecff,#9ba6c8); color: #0a1022; }
.rank-3 { background: linear-gradient(135deg,#ffbd7a,#c46c32); color: #120904; }
.mini-avatar { background: rgba(78,161,255,.12); color: var(--elite-text); }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mini-avatar.group { background: rgba(255,155,61,.12); }
.elite-rank-row em { color: var(--elite-orange-2); font-style: normal; font-size: 11px; font-weight: 850; white-space: nowrap; }
.wide-ghost-cta {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(255,155,61,.28);
  border-radius: 12px;
  background: rgba(255,155,61,.05);
  color: var(--elite-orange-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 850;
}
.elite-action-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 9px; }
.elite-action-card {
  min-height: 106px;
  border: 1px solid var(--elite-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(16,25,55,.82), rgba(8,13,34,.86));
  color: var(--elite-text);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 10px 8px;
  text-align: center;
}
.elite-action-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.elite-action-card .ui-svg { width: 26px; height: 26px; }
.elite-action-card strong { font-size: 12.5px; line-height: 1.1; overflow-wrap: anywhere; }
.elite-action-card small { color: var(--elite-muted); font-size: 10.5px; }
.accent-gold { border-color: rgba(255,155,61,.24); }
.accent-gold > span { color: var(--elite-orange-2); background: rgba(255,155,61,.12); }
.accent-blue { border-color: rgba(78,161,255,.24); }
.accent-blue > span { color: var(--elite-blue); background: rgba(78,161,255,.12); }
.accent-purple { border-color: rgba(139,92,246,.28); }
.accent-purple > span { color: var(--elite-purple); background: rgba(139,92,246,.13); }
.accent-cyan { border-color: rgba(53,214,255,.24); }
.accent-cyan > span { color: var(--elite-cyan); background: rgba(53,214,255,.11); }
.elite-quote-banner {
  min-height: 86px;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) 92px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,155,61,.28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 50%, rgba(255,155,61,.26), transparent 34%),
    linear-gradient(90deg, rgba(255,155,61,.10), rgba(16,25,55,.76));
}
.quote-mark { color: var(--elite-orange-2); font-size: 46px; line-height: .7; }
.elite-quote-banner strong { display: block; color: var(--elite-text); font-size: 18px; }
.elite-quote-banner small { display: block; color: var(--elite-muted); margin-top: 3px; }
.quote-orb,
.status-emblem {
  width: 74px;
  height: 74px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(255,184,106,.2) 0 30%, transparent 32%),
    conic-gradient(from 20deg, transparent, var(--elite-orange), transparent, var(--elite-blue), transparent);
  box-shadow: 0 0 30px rgba(255,155,61,.24);
}

.elite-pulse-shell { padding: 14px; }
.elite-pulse-header { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; }
.elite-pulse-header > div:first-child {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 8px 10px;
  align-items: center;
}
.pulse-wave { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; color: var(--elite-orange); }
.pulse-wave .ui-svg { width: 30px; height: 30px; }
.elite-pulse-header h1 { margin: 0; color: var(--elite-text); font-size: 30px; line-height: 1; }
.elite-pulse-header h1 span { color: var(--elite-orange); }
.elite-pulse-header p { grid-column: 2; margin: 0; color: var(--elite-muted); font-size: 13px; }
.elite-pulse-actions { display: flex; align-items: center; gap: 8px; }
.glass-action,
.orange-action,
.creator-hub-mini,
.date-range-pill,
.new-ai-pill {
  min-height: 42px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 850;
  padding: 0 14px;
}
.glass-action,
.creator-hub-mini,
.date-range-pill { border: 1px solid var(--elite-line); background: rgba(255,255,255,.045); color: var(--elite-text); }
.orange-action,
.new-ai-pill {
  border: 1px solid rgba(255,184,106,.56);
  background: linear-gradient(135deg, #ffb86a, #ff7a1f);
  color: #120904;
  box-shadow: 0 10px 22px rgba(255,122,31,.28);
}
.elite-feed-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px;
  margin-top: 12px;
  padding: 6px;
  border: 1px solid var(--elite-line);
  border-radius: 20px;
  background: rgba(5,8,22,.54);
}
.elite-feed-tabs button {
  min-height: 42px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--elite-muted);
  font-weight: 850;
}
.elite-feed-tabs button.active {
  color: var(--elite-text);
  background: radial-gradient(circle at center, rgba(255,155,61,.22), rgba(255,155,61,.07));
  box-shadow: 0 0 0 1px rgba(255,155,61,.42), 0 0 22px rgba(255,155,61,.30);
}
.elite-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 2px;
  scrollbar-width: none;
}
.elite-filter-toolbar::-webkit-scrollbar { display: none; }
.elite-filter-toolbar label {
  flex: 0 0 auto;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--elite-line);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--elite-muted);
  padding: 0 10px;
  font-size: 11px;
}
.elite-filter-toolbar select { border: 0 !important; background: transparent !important; color: var(--elite-text) !important; padding: 0 !important; box-shadow: none !important; }
.elite-filter-toolbar .platform-filter { flex: 0 0 auto; display: flex; gap: 5px; }
.elite-filter-toolbar .platform-filter button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--elite-line);
  background: rgba(255,255,255,.035);
  color: var(--elite-muted);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 10px;
  font-weight: 900;
}
.elite-filter-toolbar .platform-filter button.active { border-color: rgba(255,155,61,.42); color: var(--elite-orange-2); box-shadow: 0 0 18px rgba(255,155,61,.20); }
.elite-filter-toolbar .platform-svg { width: 17px; height: 17px; }
.creator-hub-mini { min-height: 36px; color: var(--elite-orange-2); }
.elite-rising-carousel { padding: 12px; }
.rising-creator-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: 10px;
  overflow-x: auto;
  margin-top: 12px;
  scrollbar-width: none;
}
.rising-creator-card {
  min-height: 154px;
  border: 1px solid var(--elite-line);
  border-radius: 18px;
  background: rgba(9,15,38,.76);
  color: var(--elite-text);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 11px;
  text-align: center;
}
.creator-avatar {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,155,61,.44);
  background: radial-gradient(circle, rgba(78,161,255,.20), rgba(255,155,61,.08));
}
.creator-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.creator-avatar b { color: var(--elite-text); font-size: 24px; }
.platform-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #070a18;
  border: 1px solid rgba(255,255,255,.1);
}
.platform-badge .platform-svg { width: 14px; height: 14px; }
.rising-creator-card strong,
.rising-creator-card small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rising-creator-card strong { font-size: 12px; }
.rising-creator-card small { color: var(--elite-muted); font-size: 10px; }
.rising-creator-card em {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,155,61,.36);
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
  font-style: normal;
  font-weight: 900;
}
.elite-feed { gap: 14px; }
.elite-feed-stack { display: grid; gap: 14px; }
.elite-pulse-post { padding: 0; }
.elite-post-head {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto 30px;
  align-items: center;
  gap: 9px;
  padding: 14px 14px 8px;
}
.post-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,155,61,.32);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--elite-text);
}
.post-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.post-avatar > i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #050816;
  border: 1px solid rgba(255,255,255,.12);
}
.post-avatar .platform-svg { width: 13px; height: 13px; }
.elite-post-author { min-width: 0; }
.elite-post-author > div { min-width: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.elite-post-author strong { color: var(--elite-text); font-size: 16px; min-width: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verified-dot { color: #28a8ff; display: inline-grid; }
.verified-dot .ui-svg { width: 15px; height: 15px; }
.elite-post-author small,
.elite-post-author p { color: var(--elite-muted); font-size: 12px; margin: 0; }
.viral-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border: 1px solid rgba(255,155,61,.32);
  border-radius: 999px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
}
.viral-pill.hot { border-color: rgba(255,79,216,.35); color: #ff6fb4; background: rgba(255,79,216,.08); }
.viral-pill .ui-svg { width: 15px; height: 15px; }
.viral-pill strong { font-size: 14px; }
.viral-pill small { font-size: 10px; font-weight: 900; }
.post-more { width: 30px; height: 30px; border: 0; background: transparent; color: var(--elite-muted); display: grid; place-items: center; }
.elite-post-body { margin: 0; padding: 4px 14px 12px; color: var(--elite-text); font-size: 15px; line-height: 1.42; overflow-wrap: anywhere; }
.elite-read-more { margin: -4px 14px 10px; color: var(--elite-orange-2); }
.elite-post-media {
  position: relative;
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px 12px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.elite-post-media img { display: block; width: 100%; max-height: 220px; aspect-ratio: 16 / 5.2; object-fit: cover; }
.play-overlay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(5,8,22,.62);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(6px);
}
.play-overlay .ui-svg { width: 26px; height: 26px; }
.elite-post-metrics { padding: 0 14px 12px; }
.elite-post-metrics button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--elite-orange-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 850;
}
.elite-post-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 6px;
  padding: 11px 14px 14px;
  border-top: 1px solid var(--elite-line);
}
.elite-post-actions button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: var(--elite-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 850;
}
.elite-post-actions .ui-svg { width: 15px; height: 15px; }
.elite-post-actions .boost-action { border-color: rgba(255,155,61,.45); color: var(--elite-orange-2); background: rgba(255,155,61,.10); }
.elite-post-actions button.active { color: #ff6fa8; border-color: rgba(255,79,140,.38); background: rgba(255,79,140,.10); }
.elite-feed-comments { padding: 0 14px 14px !important; }
.elite-ai-recommendation {
  display: grid;
  grid-template-columns: 108px minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-color: rgba(255,155,61,.34);
}
.ai-rec-orb {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background:
    radial-gradient(circle at center, rgba(255,155,61,.18) 0 32%, transparent 34%),
    conic-gradient(var(--elite-blue), var(--elite-orange), var(--elite-purple), var(--elite-blue));
  font-size: 26px;
  font-weight: 900;
  box-shadow: 0 0 32px rgba(255,155,61,.22);
}
.elite-ai-recommendation small { color: var(--elite-orange-2); font-weight: 900; font-size: 11px; }
.elite-ai-recommendation strong { display: block; color: var(--elite-text); font-size: 19px; margin: 6px 0; }
.elite-ai-recommendation p { margin: 0; color: var(--elite-muted); }
.elite-ai-recommendation button {
  min-height: 52px;
  border: 1px solid rgba(255,184,106,.55);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,184,106,.24), rgba(255,122,31,.12));
  color: var(--elite-orange-2);
  box-shadow: 0 0 24px rgba(255,155,61,.22);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-weight: 900;
}
.elite-loading,
.elite-empty { border-radius: 20px; background: rgba(16,25,55,.7); border-color: var(--elite-line); }

.creator-hub-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 2px 2px 0;
}
.creator-hub-head h1 { margin: 0; color: var(--elite-text); font-size: 30px; }
.creator-hub-head p { margin: 4px 0 0; color: var(--elite-muted); font-size: 15px; }
.creator-hub-head p span {
  display: inline-flex;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,155,61,.28);
  color: var(--elite-orange-2);
  font-size: 10px;
  font-weight: 900;
}
.date-range-pill .ui-svg { width: 16px; height: 16px; }
.creator-performance-card {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) 190px minmax(0,.82fr);
  gap: 14px;
  padding: 18px;
  border-color: rgba(255,155,61,.34);
}
.performance-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--elite-orange-2); font-weight: 900; }
.performance-title .ui-svg { width: 19px; height: 19px; }
.performance-metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.performance-metrics-grid article {
  min-width: 0;
  min-height: 86px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-content: center;
  gap: 2px 9px;
  padding: 12px;
  border: 1px solid var(--elite-line);
  border-radius: 16px;
  background: rgba(4,8,22,.35);
}
.performance-metrics-grid .metric-icon {
  grid-row: 1 / 4;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.metric-icon .ui-svg { width: 20px; height: 20px; }
.metric-icon.blue { color: var(--elite-blue); background: rgba(78,161,255,.12); }
.metric-icon.purple { color: var(--elite-purple); background: rgba(139,92,246,.12); }
.metric-icon.orange { color: var(--elite-orange-2); background: rgba(255,155,61,.12); }
.metric-icon.pink { color: #ff6fa8; background: rgba(255,79,140,.12); }
.performance-metrics-grid small { color: var(--elite-muted); font-size: 11px; }
.performance-metrics-grid strong { color: var(--elite-text); font-size: 22px; line-height: 1; }
.performance-metrics-grid em { color: var(--elite-green); font-style: normal; font-size: 11px; }
.creator-ai-score-ring {
  align-self: center;
  justify-self: center;
  width: 172px;
  height: 172px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  align-content: center;
  background:
    radial-gradient(circle at center, rgba(7,10,24,.96) 0 45%, transparent 46%),
    conic-gradient(from 190deg, var(--elite-blue), var(--elite-purple), var(--elite-orange), var(--elite-blue));
  box-shadow: 0 0 44px rgba(78,161,255,.22), 0 0 36px rgba(255,155,61,.18);
}
.creator-ai-score-ring strong { color: var(--elite-text); font-size: 44px; line-height: 1; }
.creator-ai-score-ring small { color: var(--elite-muted); font-size: 12px; }
.creator-ai-score-ring em { color: var(--elite-green); font-style: normal; font-weight: 850; font-size: 12px; }
.best-platform-panel {
  min-width: 0;
  border-left: 1px solid var(--elite-line);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding-left: 14px;
  text-align: center;
}
.best-platform-panel > div { display: inline-flex; align-items: center; gap: 7px; color: var(--elite-orange-2); font-size: 12px; font-weight: 900; }
.best-platform-logo {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,155,61,.26);
  color: #fff;
  box-shadow: 0 0 22px rgba(255,155,61,.14);
}
.best-platform-logo .platform-svg { width: 42px; height: 42px; }
.best-platform-panel h3 { margin: 0; color: var(--elite-text); }
.best-platform-panel p { margin: 0; color: var(--elite-muted); }
.best-platform-panel button,
.analytics-cta {
  min-height: 40px;
  border: 1px solid var(--elite-line);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  color: var(--elite-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}
.connected-channels-panel,
.ai-content-studio,
.boost-missions-elite,
.top-performing-post-card,
.creator-status-strip { padding: 14px; }
.creator-channel-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 146px;
  gap: 9px;
  overflow-x: auto;
  margin-top: 12px;
  scrollbar-width: none;
}
.creator-channel-card {
  min-height: 82px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--elite-line);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  padding: 10px;
}
.channel-icon { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.06); }
.channel-icon .platform-svg { width: 21px; height: 21px; }
.creator-channel-card strong,
.creator-channel-card small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-channel-card strong { color: var(--elite-text); font-size: 12px; }
.creator-channel-card small { color: var(--elite-muted); font-size: 10px; }
.creator-channel-card em { display: inline-flex; align-items: center; gap: 5px; color: var(--elite-green); font-size: 10px; font-style: normal; margin-top: 4px; }
.creator-channel-card em i { width: 7px; height: 7px; border-radius: 999px; background: var(--elite-green); }
.studio-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.studio-tool-card {
  min-height: 168px;
  border: 1px solid var(--elite-line);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  color: var(--elite-text);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 14px;
  text-align: center;
}
.studio-tool-card > span { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: rgba(255,255,255,.05); }
.studio-tool-card > span .ui-svg { width: 38px; height: 38px; }
.studio-tool-card strong { font-size: 16px; }
.studio-tool-card small { color: var(--elite-muted); line-height: 1.35; }
.studio-tool-card i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--elite-line); color: var(--elite-muted); font-style: normal; }
.studio-bot { border-color: rgba(255,155,61,.24); }
.studio-bot > span { color: var(--elite-orange-2); }
.studio-purple { border-color: rgba(139,92,246,.32); }
.studio-purple > span { color: var(--elite-purple); }
.studio-blue { border-color: rgba(78,161,255,.30); }
.studio-blue > span { color: var(--elite-cyan); }
.studio-gold { border-color: rgba(255,155,61,.34); }
.studio-gold > span { color: var(--elite-orange-2); }
.elite-mission-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.elite-mission-card { min-height: 140px; border: 1px solid var(--elite-line); border-radius: 18px; background: rgba(255,255,255,.035); padding: 14px; display: grid; gap: 7px; }
.elite-mission-card > span { width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; }
.elite-mission-card strong { color: var(--elite-text); font-size: 15px; }
.elite-mission-card p { margin: 0; color: var(--elite-muted); line-height: 1.35; font-size: 12px; }
.elite-mission-card div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.elite-mission-card div::before { content: ""; grid-column: 1; height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); }
.elite-mission-card div i { grid-column: 1; grid-row: 1; height: 7px; border-radius: 999px; }
.elite-mission-card div b { color: var(--elite-orange-2); font-size: 12px; }
.elite-mission-card em { display: inline-flex; align-items: center; gap: 6px; color: var(--elite-orange-2); font-style: normal; font-weight: 850; font-size: 12px; }
.mission-orange { border-color: rgba(255,155,61,.28); }
.mission-orange > span,
.mission-orange div i { color: var(--elite-orange-2); background: var(--elite-orange); }
.mission-purple { border-color: rgba(139,92,246,.34); }
.mission-purple > span,
.mission-purple div i { color: #d6c2ff; background: var(--elite-purple); }
.mission-green { border-color: rgba(49,217,139,.28); }
.mission-green > span,
.mission-green div i { color: var(--elite-green); background: var(--elite-green); }
.top-post-body {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr) minmax(250px,1.25fr);
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--elite-line);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}
.top-post-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(255,155,61,.26), rgba(8,12,30,.9));
}
.top-post-thumb img,
.top-post-fallback { width: 100%; height: 100%; display: block; object-fit: cover; }
.top-post-fallback {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,155,61,.34), transparent 18%),
    linear-gradient(135deg, rgba(255,155,61,.28), rgba(78,161,255,.18));
}
.top-post-thumb b { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; }
.top-post-copy p { margin: 0 0 16px; color: var(--elite-text); font-size: 16px; line-height: 1.35; }
.top-post-copy small { display: inline-flex; align-items: center; gap: 8px; color: var(--elite-muted); }
.top-post-copy .platform-svg { width: 18px; height: 18px; }
.top-post-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.top-post-metrics span { display: grid; gap: 3px; }
.top-post-metrics small { color: var(--elite-muted); }
.top-post-metrics strong { color: var(--elite-text); font-size: 20px; }
.top-post-metrics em { color: var(--elite-green); font-style: normal; font-size: 11px; }
.analytics-cta { grid-column: 3; justify-self: stretch; justify-content: center; color: var(--elite-orange-2); }
.creator-status-strip {
  display: grid;
  grid-template-columns: 82px minmax(0,1fr) minmax(145px,.45fr) minmax(145px,.45fr);
  align-items: center;
  gap: 14px;
  border-color: rgba(255,155,61,.26);
}
.status-emblem { width: 70px; height: 70px; }
.creator-status-strip > div strong { display: block; color: var(--elite-text); font-size: 16px; }
.creator-status-strip > div small { color: var(--elite-muted); }
.creator-status-strip article {
  min-height: 66px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 2px 9px;
  border: 1px solid var(--elite-line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  padding: 10px;
}
.creator-status-strip article > span { grid-row: 1 / 4; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; color: var(--elite-orange-2); background: rgba(255,155,61,.10); }
.creator-status-strip article small { color: var(--elite-muted); }
.creator-status-strip article strong { color: var(--elite-text); }
.creator-status-strip article em { color: var(--elite-green); font-style: normal; font-size: 11px; }
.creator-status-strip article i { display: block; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--elite-orange) 66%, rgba(255,255,255,.08) 66%); }

@media (max-width: 800px) {
  :root { --bottom-nav-height: calc(96px + env(safe-area-inset-bottom, 0px)); }
  main { padding: 0 12px calc(var(--bottom-nav-height) + 12px) !important; max-width: 100% !important; }
  main.chatting { padding: 0 !important; }
  .page { padding: 12px 0 calc(var(--bottom-nav-height) + 8px) !important; gap: 14px !important; }
  body { padding-bottom: 0 !important; }
  .mobile-bottom-nav.elite-bottom-dock {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: 72px !important;
    padding: 8px !important;
    border-radius: 28px !important;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    background: linear-gradient(180deg, rgba(13,20,48,.88), rgba(8,12,30,.94)) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 2000;
  }
  .elite-bottom-dock .bottom-nav-item {
    position: relative;
    min-width: 0;
    border: 0;
    background: transparent;
    color: rgba(201,210,240,.68);
    border-radius: 20px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 3px;
    padding: 5px 2px;
    transition: transform .18s ease, color .18s ease, background .18s ease;
  }
  .elite-bottom-dock .bottom-nav-item:active { transform: scale(.96); }
  .elite-bottom-dock .bottom-nav-icon-wrapper { width: 36px; height: 32px; border-radius: 16px; display: grid; place-items: center; transition: .2s ease; }
  .elite-bottom-dock .bottom-nav-icon-wrapper .ui-svg { width: 21px; height: 21px; }
  .elite-bottom-dock .bottom-nav-lbl { font-size: 10.5px; line-height: 1; font-weight: 650; color: currentColor !important; margin: 0; }
  .elite-bottom-dock .bottom-nav-item.active { color: var(--elite-orange-2); }
  .elite-bottom-dock .bottom-nav-item.active .bottom-nav-icon-wrapper {
    color: var(--elite-orange-2);
    background: radial-gradient(circle at 50% 35%, rgba(255,184,106,.32), rgba(255,155,61,.10) 56%, transparent 72%);
    box-shadow: 0 0 0 1px rgba(255,155,61,.20), 0 0 22px rgba(255,155,61,.25);
  }
  .elite-bottom-dock .bottom-nav-item.active::before {
    content: "";
    position: absolute;
    top: -5px;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--elite-orange), transparent);
    box-shadow: 0 0 14px rgba(255,155,61,.7);
  }
}

@media (max-width: 700px) {
  .creator-performance-card { grid-template-columns: minmax(0,1fr) 142px; }
  .performance-title { grid-column: 1 / -1; }
  .best-platform-panel {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: auto 72px minmax(0,1fr) auto;
    justify-items: start;
    text-align: left;
    border-left: 0;
    border-top: 1px solid var(--elite-line);
    padding: 12px 0 0;
  }
  .best-platform-logo { width: 58px; height: 58px; }
  .best-platform-logo .platform-svg { width: 32px; height: 32px; }
  .best-platform-panel h3,
  .best-platform-panel p { grid-column: 3; }
  .studio-tool-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .elite-mission-grid { grid-template-columns: 1fr; }
  .top-post-body { grid-template-columns: 132px minmax(0,1fr); }
  .top-post-metrics,
  .analytics-cta { grid-column: 1 / -1; }
  .creator-status-strip { grid-template-columns: 62px minmax(0,1fr); }
  .creator-status-strip article { grid-column: span 1; }
}

@media (max-width: 560px) {
  .app-topbar { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .topbar-menu,
  .topbar-avatar { width: 42px; height: 42px; }
  .brand-orb { width: 40px; height: 40px; }
  .brand-orb .logo-mark { width: 36px; height: 36px; }
  .streak-pill { min-width: 82px; height: 42px; padding: 0 9px; }
  .streak-pill strong { font-size: 17px; }
  .streak-pill small { font-size: 8px; }
  .elite-hero-card { grid-template-columns: 94px minmax(0,1fr) 78px; min-height: 246px; padding: 12px; gap: 6px 8px; }
  .hero-mascot-panel { height: 134px; }
  .hero-mascot-panel svg { width: 132px; }
  .hero-main-copy h1 { font-size: 24px; }
  .hero-main-copy p { font-size: 12px; margin: 7px 0 9px; }
  .hero-chip-row button { min-height: 28px; padding: 5px 8px; font-size: 10px; }
  .ai-score-ring { width: 78px; height: 78px; }
  .ai-score-ring strong { font-size: 23px; }
  .ai-score-ring small,
  .ai-score-ring span { font-size: 9px; }
  .elite-ai-input { grid-template-columns: 50px minmax(0,1fr) 42px; border-radius: 22px; }
  .ai-input-badge { width: 43px; height: 43px; }
  .ai-input-send { width: 40px; height: 40px; border-radius: 14px; }
  .elite-stats-grid { gap: 7px; }
  .elite-stat-card { grid-template-columns: 34px minmax(0,1fr); min-height: 68px; padding: 8px; gap: 6px; }
  .stat-icon { width: 32px; height: 32px; border-radius: 11px; }
  .stat-icon .ui-svg { width: 19px; height: 19px; }
  .elite-stat-card strong { font-size: 16px; }
  .elite-stat-card small,
  .elite-stat-card em { font-size: 9px; }
  .elite-leader-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .elite-rank-card { padding: 10px; }
  .rank-card-head h3 { font-size: 13px; }
  .rank-card-head button { display: none; }
  .elite-rank-row { grid-template-columns: 22px 24px minmax(0,1fr); height: 36px; padding: 5px 6px; gap: 5px; }
  .elite-rank-row em { grid-column: 3; justify-self: end; font-size: 10px; }
  .rank-badge,
  .mini-avatar { width: 22px; height: 22px; font-size: 10px; }
  .wide-ghost-cta { height: 34px; font-size: 11px; }
  .elite-action-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .elite-quote-banner { grid-template-columns: 42px minmax(0,1fr) 64px; }
  .quote-orb { width: 58px; height: 58px; }
  .elite-quote-banner strong { font-size: 15px; }
  .elite-pulse-header { grid-template-columns: 1fr; }
  .elite-pulse-actions { display: grid; grid-template-columns: .85fr 1fr; }
  .elite-pulse-header h1 { font-size: 27px; }
  .pulse-platform-strip { grid-auto-columns: 104px; }
  .elite-filter-toolbar { padding-top: 0; }
  .elite-post-head { grid-template-columns: 48px minmax(0,1fr) auto 24px; padding: 12px 12px 8px; }
  .post-avatar { width: 48px; height: 48px; }
  .elite-post-author strong { max-width: 112px; font-size: 15px; }
  .viral-pill { min-height: 32px; padding: 0 9px; }
  .viral-pill small { display: none; }
  .elite-post-body { padding-inline: 12px; }
  .elite-post-media { width: calc(100% - 24px); margin-inline: 12px; }
  .elite-post-metrics { padding-inline: 12px; flex-wrap: wrap; }
  .elite-post-metrics button { width: 100%; justify-content: flex-end; }
  .elite-post-actions { grid-template-columns: repeat(5, minmax(0,1fr)); padding: 10px 12px 12px; gap: 5px; }
  .elite-post-actions button { font-size: 0; padding: 0; }
  .elite-post-actions button .ui-svg { width: 18px; height: 18px; }
  .elite-ai-recommendation { grid-template-columns: 72px minmax(0,1fr); }
  .ai-rec-orb { width: 66px; height: 66px; font-size: 20px; }
  .elite-ai-recommendation button { grid-column: 1 / -1; justify-content: center; }
  .performance-metrics-grid { gap: 7px; }
  .creator-performance-card { grid-template-columns: minmax(0,1fr); padding: 14px; }
  .creator-ai-score-ring { grid-row: 3; width: 142px; height: 142px; justify-self: center; }
  .best-platform-panel { grid-row: 4; grid-template-columns: auto 58px minmax(0,1fr); }
  .best-platform-panel button { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .creator-hub-head { padding-inline: 2px; }
  .creator-hub-head h1 { font-size: 28px; }
  .date-range-pill { min-height: 38px; padding-inline: 10px; font-size: 12px; }
  .studio-tool-grid { gap: 9px; }
  .studio-tool-card { min-height: 148px; padding: 11px; }
  .studio-tool-card > span { width: 54px; height: 54px; }
  .studio-tool-card > span .ui-svg { width: 31px; height: 31px; }
}

@media (max-width: 380px) {
  .brand-copy small { display: none; }
  .brand-copy strong { font-size: 14px; }
  .streak-pill { min-width: 74px; gap: 5px; }
  .streak-pill .streak-icon { display: none; }
  .elite-hero-card { grid-template-columns: 82px minmax(0,1fr) 68px; }
  .hero-mascot-panel svg { width: 116px; }
  .hero-main-copy h1 { font-size: 22px; }
  .hero-chip-row button:nth-child(3) { display: none; }
  .ai-score-ring { width: 68px; height: 68px; }
  .ai-score-ring strong { font-size: 20px; }
  .ai-score-ring span { display: none; }
  .elite-trending-ticker { grid-template-columns: auto minmax(0,1fr); }
  .live-badge { display: none; }
  .elite-leader-grid { grid-template-columns: 1fr; }
  .elite-action-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .elite-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Elite mobile compactness pass: closer to the phone mockup density. */
@media (max-width: 560px) {
  .home-elite-page,
  .elite-social-pulse-page,
  .creator-hub-page {
    gap: 10px;
  }

  .elite-hero-card {
    grid-template-columns: 78px minmax(0,1fr) 66px;
    grid-template-rows: minmax(138px, auto) auto;
    min-height: 236px;
    gap: 5px 7px;
    padding: 10px;
  }
  .hero-mascot-panel {
    height: 126px;
    place-items: end start;
  }
  .hero-mascot-panel svg {
    width: 116px;
    max-width: 116px;
    transform: translateX(-16px);
  }
  .hero-main-copy h1 {
    font-size: 23px;
    line-height: 1.02;
  }
  .hero-main-copy p {
    font-size: 11px;
    margin: 5px 0 7px;
  }
  .hero-chip-row {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .hero-chip-row button {
    min-height: 25px;
    padding: 4px 5px;
    gap: 4px;
    font-size: 9px;
    white-space: nowrap;
  }
  .hero-chip-row .ui-svg {
    width: 11px;
    height: 11px;
  }
  .ai-score-ring {
    width: 66px;
    height: 66px;
    gap: 0;
  }
  .ai-score-ring small {
    font-size: 8px;
  }
  .ai-score-ring strong {
    font-size: 20px;
  }
  .ai-score-ring span {
    display: none;
  }
  .elite-ai-input {
    grid-template-columns: 44px minmax(0,1fr) 38px;
    padding: 6px;
    border-radius: 20px;
  }
  .ai-input-badge {
    width: 38px;
    height: 38px;
    font-size: 14px;
  }
  .ai-input-send {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .home-pulse-panel,
  .elite-pulse-shell,
  .elite-rising-carousel,
  .creator-performance-card,
  .connected-channels-panel,
  .ai-content-studio,
  .boost-missions-elite,
  .top-performing-post-card,
  .creator-status-strip {
    border-radius: 20px;
    padding: 11px;
  }
  .section-head-row h2,
  .section-head-row h3 {
    font-size: 16px;
  }
  .section-head-row p {
    font-size: 10.5px;
  }
  .section-head-row button,
  .section-link {
    font-size: 10.5px;
    padding: 5px 3px;
  }

  .platform-signal-scroll,
  .pulse-platform-strip {
    grid-auto-columns: 82px;
    gap: 6px;
    padding: 9px 1px 2px;
  }
  .platform-signal-card,
  .pulse-platform-card {
    min-height: 62px;
    grid-template-columns: 28px minmax(0,1fr);
    gap: 5px;
    padding: 7px;
    border-radius: 14px;
  }
  .platform-signal-icon,
  .platform-logo {
    width: 28px;
    height: 28px;
  }
  .platform-signal-icon .platform-svg,
  .platform-logo .platform-svg {
    width: 17px;
    height: 17px;
  }
  .platform-signal-copy strong,
  .pulse-platform-card strong {
    font-size: 11px;
  }
  .platform-signal-copy small,
  .pulse-platform-card small {
    font-size: 7.5px;
  }
  .mini-trend-line,
  .sparkline {
    left: 9px;
    right: 9px;
    bottom: 7px;
    height: 9px;
  }

  .home-pulse-post-grid {
    grid-auto-columns: 136px;
    gap: 7px;
    padding-top: 8px;
  }
  .home-pulse-post {
    min-height: 142px;
    gap: 6px;
    padding: 9px;
    border-radius: 15px;
  }
  .home-pulse-post header {
    grid-template-columns: 22px minmax(0,1fr) auto;
    gap: 5px;
  }
  .home-pulse-post p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.25;
  }
  .home-pulse-post img {
    aspect-ratio: 16 / 8;
    border-radius: 10px;
  }
  .home-pulse-post footer {
    gap: 5px;
  }
  .home-pulse-post footer span {
    font-size: 9px;
  }

  .elite-stats-grid {
    gap: 6px;
  }
  .elite-stat-card {
    min-height: 58px;
    grid-template-columns: 25px minmax(0,1fr);
    gap: 5px;
    padding: 7px;
    border-radius: 14px;
  }
  .stat-icon {
    width: 25px;
    height: 25px;
    border-radius: 9px;
  }
  .stat-icon .ui-svg {
    width: 15px;
    height: 15px;
  }
  .elite-stat-card strong {
    font-size: 11.4px;
    white-space: nowrap;
  }
  .elite-stat-card small {
    font-size: 7.5px;
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .elite-stat-card em {
    font-size: 7.5px;
    line-height: 1.05;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .elite-pulse-header {
    gap: 9px;
  }
  .elite-pulse-header h1 {
    font-size: 27px;
  }
  .elite-pulse-header p {
    font-size: 11px;
  }
  .glass-action,
  .orange-action,
  .creator-hub-mini,
  .date-range-pill,
  .new-ai-pill {
    min-height: 38px;
    border-radius: 14px;
    padding: 0 10px;
    font-size: 12px;
  }
  .elite-feed-tabs {
    margin-top: 9px;
    padding: 5px;
    border-radius: 16px;
  }
  .elite-feed-tabs button {
    min-height: 34px;
    border-radius: 12px;
    font-size: 12px;
  }
  .elite-filter-toolbar {
    gap: 7px;
    margin: 4px 0 2px;
  }

  .rising-creator-scroll {
    grid-auto-columns: 96px;
    gap: 7px;
  }
  .rising-creator-card {
    min-height: 128px;
    padding: 8px;
    border-radius: 15px;
    gap: 4px;
  }
  .creator-avatar {
    width: 50px;
    height: 50px;
  }
  .creator-avatar b {
    font-size: 19px;
  }
  .platform-badge {
    width: 20px;
    height: 20px;
  }
  .rising-creator-card em {
    min-height: 24px;
    padding: 0 8px;
    font-size: 10px;
  }

  .elite-post-head {
    grid-template-columns: 44px minmax(0,1fr) auto 24px;
    gap: 7px;
    padding: 10px 10px 7px;
  }
  .post-avatar {
    width: 44px;
    height: 44px;
  }
  .elite-post-author strong {
    font-size: 14px;
    max-width: 100px;
  }
  .elite-post-author small {
    font-size: 10px;
  }
  .elite-post-body {
    padding: 3px 10px 9px;
    font-size: 13px;
  }
  .elite-post-media {
    width: calc(100% - 20px);
    margin: 0 10px 9px;
    border-radius: 13px;
  }
  .elite-post-media img {
    max-height: 156px;
    aspect-ratio: 16 / 6;
  }
  .elite-post-metrics {
    padding: 0 10px 8px;
  }
  .elite-post-actions {
    padding: 8px 10px 10px;
  }

  .creator-hub-head {
    align-items: start;
    gap: 8px;
  }
  .creator-hub-head h1 {
    font-size: 26px;
  }
  .creator-hub-head p {
    font-size: 12px;
  }
  .creator-hub-head p span {
    display: table;
    margin: 5px 0 0;
    padding: 3px 7px;
    font-size: 8px;
  }

  .creator-performance-card {
    grid-template-columns: minmax(0,1fr) 112px;
    gap: 9px;
  }
  .performance-title {
    grid-column: 1 / -1;
    font-size: 13px;
  }
  .performance-metrics-grid {
    grid-column: 1;
    grid-row: 2;
    gap: 6px;
  }
  .performance-metrics-grid article {
    min-height: 64px;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 1px 7px;
    padding: 8px;
    border-radius: 13px;
  }
  .performance-metrics-grid .metric-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }
  .metric-icon .ui-svg {
    width: 17px;
    height: 17px;
  }
  .performance-metrics-grid small {
    font-size: 9px;
  }
  .performance-metrics-grid strong {
    font-size: 18px;
  }
  .performance-metrics-grid em {
    font-size: 9px;
  }
  .creator-ai-score-ring {
    grid-column: 2;
    grid-row: 2;
    width: 108px;
    height: 108px;
    align-self: center;
  }
  .creator-ai-score-ring strong {
    font-size: 31px;
  }
  .creator-ai-score-ring small,
  .creator-ai-score-ring em {
    font-size: 9px;
  }
  .best-platform-panel {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 58px;
    grid-template-columns: auto 46px minmax(0,1fr) auto;
    justify-items: start;
    align-items: center;
    align-content: center;
    gap: 6px 9px;
    text-align: left;
    border-left: 0;
    border-top: 1px solid var(--elite-line);
    padding: 9px 0 0;
  }
  .best-platform-panel > div {
    font-size: 10px;
  }
  .best-platform-logo {
    width: 44px;
    height: 44px;
  }
  .best-platform-logo .platform-svg {
    width: 26px;
    height: 26px;
  }
  .best-platform-panel h3,
  .best-platform-panel p {
    grid-column: 3;
    justify-self: start;
  }
  .best-platform-panel h3 {
    font-size: 13px;
  }
  .best-platform-panel p {
    font-size: 11px;
  }
  .best-platform-panel button {
    grid-column: 4;
    min-height: 34px;
    padding: 0 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .creator-channel-row {
    grid-auto-columns: 104px;
    gap: 7px;
    margin-top: 9px;
  }
  .creator-channel-card {
    min-height: 68px;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 6px;
    padding: 8px;
    border-radius: 13px;
  }
  .channel-icon {
    width: 30px;
    height: 30px;
  }
  .channel-icon .platform-svg {
    width: 17px;
    height: 17px;
  }

  .studio-tool-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
    margin-top: 9px;
  }
  .studio-tool-card {
    min-height: 118px;
    padding: 9px;
    border-radius: 16px;
    gap: 5px;
  }
  .studio-tool-card > span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .studio-tool-card > span .ui-svg {
    width: 25px;
    height: 25px;
  }
  .studio-tool-card strong {
    font-size: 13px;
  }
  .studio-tool-card small {
    font-size: 10.5px;
    line-height: 1.25;
  }
  .studio-tool-card i {
    width: 24px;
    height: 24px;
  }

  .elite-mission-grid {
    gap: 8px;
    margin-top: 9px;
  }
  .elite-mission-card {
    min-height: 112px;
    padding: 10px;
    gap: 5px;
    border-radius: 15px;
  }
  .elite-mission-card > span {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  .top-post-body {
    grid-template-columns: 104px minmax(0,1fr);
    gap: 9px;
    padding: 9px;
    margin-top: 9px;
    border-radius: 15px;
  }
  .top-post-metrics,
  .analytics-cta {
    grid-column: 1 / -1;
  }
  .top-post-copy p {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .top-post-metrics {
    gap: 7px;
  }
  .top-post-metrics strong {
    font-size: 15px;
  }

  .creator-status-strip {
    grid-template-columns: 48px minmax(0,1fr);
    gap: 9px;
  }
  .status-emblem {
    width: 46px;
    height: 46px;
  }
  .creator-status-strip article {
    grid-column: span 1;
    min-height: 52px;
    padding: 8px;
  }
}

@media (max-width: 430px) {
  .platform-signal-scroll,
  .pulse-platform-strip {
    grid-auto-columns: 78px;
  }
  .home-pulse-post-grid {
    grid-auto-columns: 128px;
  }
  .rising-creator-scroll {
    grid-auto-columns: 90px;
  }
  .elite-filter-toolbar label:not(.pulse-time-filter) {
    min-height: 34px;
    padding-inline: 8px;
    font-size: 10.5px;
  }
  .creator-performance-card {
    grid-template-columns: minmax(0,1fr) 104px;
  }
  .creator-ai-score-ring {
    width: 100px;
    height: 100px;
  }
  .best-platform-panel {
    grid-template-columns: auto 42px minmax(0,1fr) auto;
  }
  .best-platform-logo {
    width: 40px;
    height: 40px;
  }
}

/* Elite precision pass: remove doubled section spacing and restore phone mockup density. */
@media (max-width: 560px) {
  .home-elite-page,
  .elite-social-pulse-page,
  .creator-hub-page {
    gap: 9px !important;
  }

  .page.home-elite-page {
    padding-top: 9px !important;
  }

  .home-elite-page > * + *,
  .elite-social-pulse-page > * + *,
  .creator-hub-page > * + * {
    margin-top: 0 !important;
  }

  .elite-hero-card {
    grid-template-columns: 88px minmax(0,1fr) 62px;
    grid-template-rows: minmax(132px, auto) auto;
    min-height: 224px;
    gap: 5px 7px;
  }

  .hero-mascot-panel {
    height: 126px;
    overflow: hidden;
    place-items: end start;
    z-index: 1;
  }

  .hero-mascot-panel svg {
    width: 124px;
    max-width: 124px;
    animation: eliteMascotFloat 4.8s ease-in-out infinite;
  }

  @keyframes eliteMascotFloat {
    0%, 100% { transform: translate(-22px, 5px); }
    50% { transform: translate(-22px, 0); }
  }

  .hero-main-copy,
  .hero-ai-score,
  .elite-ai-input {
    z-index: 2;
  }

  .hero-main-copy h1 {
    font-size: 22px;
  }

  .hero-main-copy p {
    margin: 4px 0 6px;
  }

  .hero-chip-row {
    gap: 4px;
  }

  .hero-chip-row button {
    min-height: 24px;
    padding: 4px 5px;
    font-size: 8.8px;
  }

  .ai-score-ring {
    width: 62px;
    height: 62px;
  }

  .ai-score-ring strong {
    font-size: 19px;
  }

  .elite-ai-input {
    min-height: 52px;
  }

  .creator-hub-head {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .creator-performance-card {
    grid-template-columns: minmax(0,1fr) 86px 86px !important;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 7px;
    padding: 10px !important;
  }

  .performance-title {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 20px;
    font-size: 12px;
  }

  .performance-metrics-grid {
    grid-column: 1;
    grid-row: 2;
    align-self: stretch;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 5px;
  }

  .performance-metrics-grid article {
    min-height: 54px;
    grid-template-columns: 22px minmax(0,1fr);
    gap: 1px 5px;
    padding: 6px;
    border-radius: 12px;
  }

  .performance-metrics-grid .metric-icon {
    width: 22px;
    height: 22px;
    border-radius: 8px;
  }

  .metric-icon .ui-svg {
    width: 13px;
    height: 13px;
  }

  .performance-metrics-grid small {
    font-size: 7.8px;
    line-height: 1.05;
  }

  .performance-metrics-grid strong {
    font-size: 14.5px;
  }

  .performance-metrics-grid em {
    font-size: 7.8px;
  }

  .creator-ai-score-ring {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 82px;
    height: 82px;
    align-self: center;
    justify-self: center;
  }

  .creator-ai-score-ring strong {
    font-size: 24px;
  }

  .creator-ai-score-ring small,
  .creator-ai-score-ring em {
    font-size: 7.8px;
  }

  .best-platform-panel {
    grid-column: 3 !important;
    grid-row: 2 !important;
    min-height: 0;
    border-top: 0 !important;
    border-left: 1px solid var(--elite-line);
    padding: 0 0 0 7px !important;
    grid-template-columns: minmax(0,1fr) !important;
    justify-items: center;
    align-content: center;
    gap: 4px;
    text-align: center;
  }

  .best-platform-panel > div {
    display: grid;
    justify-items: center;
    gap: 1px;
    font-size: 8px;
    line-height: 1.05;
  }

  .best-platform-panel > div .ui-svg {
    width: 12px;
    height: 12px;
  }

  .best-platform-logo {
    width: 42px;
    height: 42px;
  }

  .best-platform-logo .platform-svg {
    width: 24px;
    height: 24px;
  }

  .best-platform-panel h3,
  .best-platform-panel p {
    grid-column: auto !important;
    justify-self: center !important;
    max-width: 100%;
  }

  .best-platform-panel h3 {
    font-size: 11.5px;
    line-height: 1.05;
  }

  .best-platform-panel p {
    font-size: 9px;
    line-height: 1.1;
  }

  .best-platform-panel button {
    grid-column: auto !important;
    width: 100%;
    min-height: 26px;
    justify-content: center;
    gap: 3px;
    padding: 0 3px;
    border-radius: 10px;
    font-size: 8.6px;
    white-space: nowrap;
  }

  .best-platform-panel button .ui-svg {
    width: 11px;
    height: 11px;
  }

  .connected-channels-panel,
  .ai-content-studio,
  .boost-missions-elite,
  .top-performing-post-card,
  .creator-status-strip {
    padding: 10px !important;
  }

  .creator-channel-row {
    margin-top: 7px;
  }

  .studio-tool-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 6px;
    margin-top: 7px;
  }

  .studio-tool-card {
    height: 108px;
    min-height: 0;
    padding: 6px 5px;
    gap: 3px;
    border-radius: 14px;
  }

  .studio-tool-card > span {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  .studio-tool-card > span .ui-svg {
    width: 18px;
    height: 18px;
  }

  .studio-tool-card strong {
    display: -webkit-box;
    font-size: 10px;
    line-height: 1.1;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .studio-tool-card small {
    display: -webkit-box;
    font-size: 8.2px;
    line-height: 1.12;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .studio-tool-card i {
    width: 18px;
    height: 18px;
    border-radius: 8px;
  }

  .elite-mission-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 6px;
    margin-top: 7px;
  }

  .elite-mission-card {
    height: 112px;
    min-height: 0;
    padding: 7px 6px;
    gap: 4px;
    border-radius: 14px;
  }

  .elite-mission-card > span {
    width: 25px;
    height: 25px;
    border-radius: 10px;
  }

  .elite-mission-card > span .ui-svg {
    width: 14px;
    height: 14px;
  }

  .elite-mission-card strong {
    font-size: 10.5px;
    line-height: 1.08;
  }

  .elite-mission-card p {
    display: -webkit-box;
    font-size: 8px;
    line-height: 1.15;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .elite-mission-card div {
    gap: 4px;
  }

  .elite-mission-card div::before,
  .elite-mission-card div i {
    height: 5px;
  }

  .elite-mission-card div b,
  .elite-mission-card em {
    font-size: 7.8px;
  }

  .top-post-body {
    grid-template-columns: 94px minmax(0,1fr) 112px;
    margin-top: 7px;
    padding: 8px;
    gap: 7px;
  }

  .top-post-thumb {
    grid-row: 1 / 3;
    align-self: stretch;
  }

  .top-post-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .top-post-copy p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12px;
    margin-bottom: 6px;
  }

  .top-post-copy small {
    font-size: 8px;
    gap: 4px;
  }

  .top-post-metrics {
    grid-column: 3 !important;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 4px;
    align-self: center;
  }

  .top-post-metrics small {
    font-size: 7px;
  }

  .top-post-metrics strong {
    font-size: 10.5px;
  }

  .top-post-metrics em {
    font-size: 7px;
  }

  .analytics-cta {
    grid-column: 2 / 4 !important;
    grid-row: 2;
    min-height: 28px;
    justify-content: center;
    padding: 0 8px;
    font-size: 9px;
  }

  .creator-status-strip {
    grid-template-columns: 42px minmax(0,1fr) 62px 66px;
    align-items: center;
    gap: 6px;
    min-height: 74px;
  }

  .status-emblem {
    width: 40px;
    height: 40px;
  }

  .creator-status-strip > div strong {
    font-size: 12px;
  }

  .creator-status-strip > div small {
    font-size: 9px;
  }

  .creator-status-strip article {
    grid-column: auto !important;
    min-height: 44px;
    padding: 6px;
    border-radius: 12px;
  }

  .creator-status-strip article strong {
    font-size: 12px;
  }

  .creator-status-strip article small,
  .creator-status-strip article em {
    font-size: 8px;
  }
}

@media (max-width: 380px) {
  .elite-hero-card {
    grid-template-columns: 80px minmax(0,1fr) 56px;
    min-height: 220px;
  }

  .hero-mascot-panel svg {
    width: 116px;
  }

  .hero-main-copy h1 {
    font-size: 20px;
  }

  .hero-chip-row button {
    font-size: 8.5px;
  }

  .creator-performance-card {
    grid-template-columns: minmax(0,1fr) 70px 78px !important;
  }

  .creator-ai-score-ring {
    width: 70px;
    height: 70px;
  }

  .creator-ai-score-ring strong {
    font-size: 21px;
  }

  .best-platform-panel {
    padding-left: 5px !important;
  }

  .best-platform-logo {
    width: 36px;
    height: 36px;
  }

  .best-platform-panel button {
    font-size: 7.6px;
  }

  .top-post-body {
    grid-template-columns: 86px minmax(0,1fr) 96px;
  }

  .creator-status-strip {
    grid-template-columns: 38px minmax(0,1fr) 56px 60px;
  }
}

@media (max-width: 800px) {
  :root {
    --bottom-nav-height: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav.elite-bottom-dock {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    height: 64px !important;
    padding: 6px !important;
    border-radius: 24px !important;
  }

  .elite-bottom-dock .bottom-nav-item {
    gap: 2px;
    padding: 4px 1px;
    border-radius: 17px;
  }

  .elite-bottom-dock .bottom-nav-icon-wrapper {
    width: 32px;
    height: 28px;
    border-radius: 14px;
  }

  .elite-bottom-dock .bottom-nav-icon-wrapper .ui-svg {
    width: 19px;
    height: 19px;
  }

  .elite-bottom-dock .bottom-nav-lbl {
    font-size: 9.5px;
  }
}

@media (max-width: 560px) {
  .elite-leader-grid {
    gap: 7px;
  }

  .elite-rank-card {
    padding: 8px !important;
    border-radius: 18px;
  }

  .rank-card-head {
    margin-bottom: 7px;
  }

  .rank-card-head h3 {
    gap: 5px;
    font-size: 12px !important;
    line-height: 1;
  }

  .rank-card-head h3 .ui-svg {
    width: 15px;
    height: 15px;
  }

  .elite-rank-row {
    grid-template-columns: 15px 17px minmax(0,1fr) 27px !important;
    height: 31px !important;
    gap: 3px !important;
    padding: 4px !important;
    margin-bottom: 4px;
    border-radius: 10px;
  }

  .rank-badge,
  .mini-avatar {
    width: 17px !important;
    height: 17px !important;
    font-size: 8px !important;
  }

  .elite-rank-row strong {
    font-size: 8.7px;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .elite-rank-row em {
    grid-column: 4 !important;
    justify-self: end;
    align-self: center;
    max-width: 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 8.2px !important;
    line-height: 1;
  }

  .wide-ghost-cta {
    height: 30px !important;
    border-radius: 10px;
    font-size: 9.8px !important;
  }
}

@media (max-width: 380px) {
  .elite-rank-row {
    grid-template-columns: 14px 16px minmax(0,1fr) 25px !important;
    gap: 3px !important;
    padding-inline: 4px !important;
  }

  .elite-rank-row strong {
    font-size: 8.7px;
  }

  .elite-rank-row em {
    max-width: 25px;
    font-size: 7.6px !important;
  }
}

@media (max-width: 560px) {
  .home-elite-page .elite-rank-card:nth-child(2) .elite-rank-row {
    height: 34px !important;
  }

  .home-elite-page .elite-rank-card:nth-child(2) .elite-rank-row strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 8.2px;
    line-height: 1.05;
  }
}

.rising-head-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.creator-hub-link {
  min-height: 30px;
  border: 1px solid rgba(255,155,61,.26) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,184,106,.18), transparent 62%),
    rgba(255,255,255,.045) !important;
  color: var(--elite-orange-2) !important;
  box-shadow: 0 0 16px rgba(255,155,61,.12);
}

.creator-hub-link .ui-svg,
.rising-head-actions button .ui-svg {
  width: 14px;
  height: 14px;
}

.elite-filter-drawer {
  margin-top: 9px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(4,8,22,.36);
  overflow: hidden;
}

.elite-filter-drawer summary {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 18px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: var(--elite-text);
  cursor: pointer;
  list-style: none;
}

.elite-filter-drawer summary::-webkit-details-marker {
  display: none;
}

.elite-filter-drawer summary > span:first-child {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 850;
}

.elite-filter-drawer summary .ui-svg {
  width: 14px;
  height: 14px;
  color: var(--elite-orange-2);
}

.elite-filter-drawer summary small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--elite-muted);
  font-size: 9.5px;
  white-space: nowrap;
}

.elite-filter-drawer summary small i {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,184,106,.72);
}

.drawer-chevron {
  display: grid;
  place-items: center;
  transition: transform .18s ease;
}

.elite-filter-drawer[open] .drawer-chevron {
  transform: rotate(180deg);
}

.elite-filter-drawer-body {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) auto auto auto;
  gap: 7px;
  align-items: center;
  padding: 0 8px 8px;
}

.active-platform-pill,
.elite-filter-drawer-body label {
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  color: var(--elite-text);
}

.active-platform-pill {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  gap: 2px 7px;
  align-items: center;
  padding: 5px 8px;
  text-align: left;
}

.active-platform-pill > span {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
}

.active-platform-pill .platform-svg,
.active-platform-pill .ui-svg {
  width: 17px;
  height: 17px;
}

.active-platform-pill strong {
  min-width: 0;
  color: var(--elite-text);
  font-size: 10.5px;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-platform-pill small {
  color: var(--elite-muted);
  font-size: 8px;
  line-height: 1.05;
}

.active-platform-pill.active {
  border-color: rgba(49,217,139,.24);
  color: var(--elite-green);
}

.elite-filter-drawer-body label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  color: var(--elite-muted);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.elite-filter-drawer-body input {
  accent-color: var(--elite-orange);
}

.elite-filter-drawer-body select {
  border: 0 !important;
  background: transparent !important;
  color: var(--elite-text) !important;
  padding: 0 !important;
  box-shadow: none !important;
  font: inherit;
}

@media (max-width: 430px) {
  .rising-head-actions {
    gap: 4px;
  }

  .creator-hub-link {
    min-height: 28px;
    padding-inline: 7px !important;
  }

  .elite-filter-drawer {
    margin-top: 7px;
    border-radius: 14px;
  }

  .elite-filter-drawer summary {
    min-height: 34px;
    padding-inline: 8px;
  }

  .elite-filter-drawer summary small {
    font-size: 8.5px;
  }

  .elite-filter-drawer-body {
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 5px;
    padding: 0 6px 6px;
  }

  .elite-filter-drawer-body .pulse-time-filter {
    grid-column: 1 / -1;
    min-height: 30px;
  }

  .active-platform-pill,
  .elite-filter-drawer-body label {
    min-height: 30px;
    border-radius: 11px;
  }
}

/* Social Pulse compact alignment pass */
.elite-social-pulse-page {
  gap: 10px;
}

.elite-social-pulse-page .elite-pulse-shell,
.elite-social-pulse-page .elite-rising-carousel,
.elite-social-pulse-page .elite-pulse-post,
.elite-social-pulse-page .elite-ai-recommendation {
  border-radius: 22px;
}

.elite-social-pulse-page .elite-feed,
.elite-social-pulse-page .elite-feed-stack {
  gap: 9px;
}

.elite-social-pulse-page .elite-post-head {
  grid-template-columns: 46px minmax(0,1fr) auto 28px;
  gap: 8px;
  padding: 11px 12px 6px;
}

.elite-social-pulse-page .post-avatar {
  width: 46px;
  height: 46px;
}

.elite-social-pulse-page .elite-post-body {
  padding: 3px 12px 8px;
  font-size: 14px;
  line-height: 1.36;
}

.elite-social-pulse-page .elite-read-more {
  margin: -3px 12px 7px;
}

.elite-social-pulse-page .elite-post-media {
  width: calc(100% - 24px);
  margin: 0 12px 8px;
  border-radius: 14px;
}

.elite-social-pulse-page .elite-post-media img {
  aspect-ratio: 16 / 5.6;
  max-height: 195px;
}

.elite-social-pulse-page .elite-post-metrics {
  justify-content: flex-start;
  gap: 18px;
  padding: 0 12px 8px;
}

.elite-social-pulse-page .elite-post-actions {
  gap: 5px;
  padding: 8px 12px 11px;
}

.elite-social-pulse-page .elite-post-actions button {
  gap: 3px;
  min-height: 34px;
  border-radius: 11px;
  padding: 0 3px;
  font-size: 10.5px;
}

.elite-social-pulse-page .elite-post-actions button .ui-svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

.elite-social-pulse-page .elite-ai-recommendation {
  grid-template-columns: 58px minmax(0,1fr) minmax(104px,.45fr);
  gap: 10px;
  padding: 10px;
}

.elite-social-pulse-page .ai-rec-orb {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.elite-social-pulse-page .elite-ai-recommendation small {
  font-size: 9.5px;
}

.elite-social-pulse-page .elite-ai-recommendation strong {
  margin: 2px 0 3px;
  font-size: 15px;
}

.elite-social-pulse-page .elite-ai-recommendation p {
  font-size: 12px;
  line-height: 1.3;
}

.elite-social-pulse-page .elite-ai-recommendation button {
  min-height: 40px;
  border-radius: 14px;
  padding: 0 10px;
  font-size: 12px;
}

@media (max-width: 700px) {
  .elite-social-pulse-page .elite-ai-recommendation {
    grid-template-columns: 52px minmax(0,1fr);
    gap: 9px;
  }

  .elite-social-pulse-page .elite-ai-recommendation button {
    grid-column: 2;
    justify-self: start;
    width: auto;
    min-height: 36px;
    margin-top: 2px;
    padding-inline: 14px;
  }
}

@media (max-width: 430px) {
  .elite-social-pulse-page {
    gap: 8px;
  }

  .elite-social-pulse-page .elite-pulse-shell,
  .elite-social-pulse-page .elite-rising-carousel {
    padding: 10px;
  }

  .elite-social-pulse-page .elite-feed,
  .elite-social-pulse-page .elite-feed-stack {
    gap: 8px;
  }

  .elite-social-pulse-page .elite-post-head {
    grid-template-columns: 42px minmax(0,1fr) auto 26px;
    padding: 10px 10px 5px;
  }

  .elite-social-pulse-page .post-avatar {
    width: 42px;
    height: 42px;
  }

  .elite-social-pulse-page .elite-post-body {
    padding: 2px 10px 7px;
    font-size: 13.5px;
  }

  .elite-social-pulse-page .elite-post-media {
    width: calc(100% - 20px);
    margin: 0 10px 7px;
  }

  .elite-social-pulse-page .elite-post-media img {
    max-height: 180px;
  }

  .elite-social-pulse-page .elite-post-metrics {
    gap: 13px;
    padding: 0 10px 7px;
  }

  .elite-social-pulse-page .elite-post-actions {
    gap: 3px;
    padding: 7px 10px 10px;
  }

  .elite-social-pulse-page .elite-post-actions button {
    gap: 1px;
    min-height: 32px;
    padding-inline: 1px;
    font-size: 9px;
  }

  .elite-social-pulse-page .elite-post-actions button .ui-svg {
    width: 10px;
    height: 10px;
    flex-basis: 10px;
  }

  .elite-social-pulse-page .elite-ai-recommendation {
    grid-template-columns: 46px minmax(0,1fr);
    padding: 9px;
  }

  .elite-social-pulse-page .ai-rec-orb {
    width: 46px;
    height: 46px;
  }

  .elite-social-pulse-page .elite-ai-recommendation button {
    min-height: 34px;
    padding-inline: 12px;
  }
}

/* Profile, settings and analytics strict mobile alignment pass */
@media (max-width: 430px) {
  .public-profile-elite-page,
  .own-profile-elite-page,
  .settings-elite-page,
  .analytics-elite-page,
  .leaderboards-elite-page {
    gap: 8px !important;
  }

  .profile-screen-topbar {
    min-height: 54px;
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
    padding-bottom: 6px;
  }

  .public-profile-hero-card,
  .own-profile-hero-card {
    padding: 112px 12px 12px;
    border-radius: 20px;
  }

  .public-profile-banner-art,
  .own-profile-banner-mark {
    height: 146px;
  }

  .profile-stat-strip {
    margin-top: 10px;
    padding: 7px;
    gap: 5px;
  }

  .public-profile-actions,
  .own-profile-actions {
    margin-top: 10px;
    gap: 8px;
  }

  .elite-profile-tabs {
    margin-top: 8px;
    padding: 4px;
    border-radius: 15px;
    grid-auto-columns: minmax(84px, 1fr);
  }

  .elite-profile-tabs button {
    min-height: 34px;
    border-radius: 12px;
    font-size: 11px;
  }

  .identity-access-card,
  .profile-achievement-showcase,
  .public-progress-panel,
  .achievement-progress-card,
  .edit-profile-studio,
  .ai-banner-studio-card,
  .connected-social-links-card,
  .settings-group-card,
  .settings-inline-panel,
  .analytics-overview-card,
  .top-performing-posts-elite,
  .leaderboard-list-card {
    padding: 10px !important;
    border-radius: 18px;
  }

  .settings-hero-card,
  .leaderboard-hero-card {
    min-height: 104px;
    padding: 12px !important;
    border-radius: 20px;
  }

  .settings-row {
    min-height: 58px;
    gap: 8px;
    padding-block: 7px;
  }

  .settings-row-icon {
    width: 40px;
    height: 40px;
  }

  .settings-row strong {
    font-size: 14.5px !important;
  }

  .settings-row small {
    font-size: 11px !important;
    line-height: 1.25;
  }

  .profile-field-stack,
  .profile-overview-elite,
  .edit-profile-studio,
  .profile-social-elite,
  .profile-access-elite,
  .analytics-elite-page.embedded {
    gap: 8px;
  }

  .profile-field-row,
  .connected-link-row {
    border-radius: 15px;
    padding: 9px;
  }

  .achievement-progress-card {
    grid-template-columns: minmax(0,1fr) 82px;
  }

  .achievement-progress-card h3 {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .achievement-progress-card p {
    margin-bottom: 9px;
    font-size: 18px;
  }

  .achievement-progress-card p strong {
    font-size: 32px;
  }

  .achievement-progress-ring {
    width: 78px;
    height: 78px;
  }

  .achievement-grid-elite {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px;
  }

  .achievement-card-elite {
    min-height: 142px !important;
    gap: 5px;
    padding: 10px 6px !important;
    border-radius: 16px;
  }

  .achievement-card-elite .achievement-art {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .achievement-card-elite .achievement-art .ui-svg {
    width: 24px;
    height: 24px;
  }

  .achievement-card-elite strong {
    font-size: 10.8px !important;
    line-height: 1.1;
  }

  .achievement-card-elite small {
    font-size: 9px !important;
    line-height: 1.18;
  }

  .achievement-card-elite b {
    min-width: 50px;
    min-height: 25px;
    gap: 4px;
    font-size: 10px;
  }

  .achievement-state {
    right: 7px;
    top: 7px;
    width: 23px;
    height: 23px;
  }

  .analytics-chart-grid {
    height: 190px;
  }

  .analytics-metric-grid {
    gap: 8px;
  }

  .analytics-post-list {
    gap: 8px;
    margin-top: 8px;
  }

  .analytics-post-row {
    min-height: 74px;
    border-radius: 15px;
  }
}

/* Elite profile/feed polish pass: Delta-first identity, tighter score chips and clearer Creator Hub paths. */
.pulse-platform-card {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 78px;
  padding: 8px 9px 18px;
  align-content: start;
}

.pulse-platform-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-self: start;
}

.public-profile-identity .profile-handle,
.own-profile-identity .profile-handle {
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid rgba(255,155,61,.18);
  border-radius: 999px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
}

.public-profile-actions,
.own-profile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.own-profile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.profile-hub-action {
  grid-column: 1 / -1;
  min-height: 40px;
  color: var(--elite-orange-2);
  border-color: rgba(255,155,61,.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,155,61,.14), transparent 60%),
    rgba(255,255,255,.045);
}

.public-profile-elite-page .creator-power-card,
.own-profile-elite-page .creator-power-card {
  border-radius: 20px;
}

.public-profile-elite-page .profile-achievement-showcase,
.own-profile-elite-page .profile-achievement-showcase {
  padding-block: 12px;
}

@media (max-width: 560px) {
  .pulse-platform-card {
    grid-template-columns: 31px minmax(0, 1fr);
    min-height: 68px;
    padding: 7px 7px 16px;
    gap: 6px;
    border-radius: 14px;
  }

  .pulse-platform-strip {
    grid-auto-columns: 122px;
    padding-top: 9px;
  }

  .platform-logo {
    width: 31px;
    height: 31px;
  }

  .platform-logo .platform-svg {
    width: 19px;
    height: 19px;
  }

  .public-profile-identity .profile-handle,
  .own-profile-identity .profile-handle {
    margin-block: 4px 7px;
    padding: 3px 8px;
    font-size: 12px;
  }

  .public-profile-actions,
  .own-profile-actions {
    gap: 7px;
  }

  .profile-primary-action,
  .profile-secondary-action,
  .profile-save-action {
    min-height: 40px;
    border-radius: 14px;
    padding-inline: 10px;
    font-size: 12px;
  }

  .profile-hub-action {
    min-height: 36px;
  }

  .public-profile-elite-page .creator-power-card {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
  }

  .public-profile-elite-page .creator-score-orb {
    width: 88px;
    height: 88px;
  }

  .public-profile-elite-page .creator-power-copy {
    gap: 5px;
  }

  .creator-performance-card {
    grid-template-columns: minmax(0, 1fr) 102px !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .creator-performance-card .performance-title,
  .creator-performance-card .best-platform-panel {
    grid-column: 1 / -1 !important;
  }

  .creator-performance-card .performance-title {
    margin-bottom: 0;
  }

  .creator-performance-card .performance-metrics-grid {
    grid-column: 1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .creator-performance-card .performance-metrics-grid article {
    min-height: 82px;
    padding: 9px 8px !important;
  }

  .creator-performance-card .performance-metrics-grid small,
  .creator-performance-card .performance-metrics-grid strong {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .creator-performance-card .performance-metrics-grid small {
    font-size: 9.6px !important;
  }

  .creator-performance-card .performance-metrics-grid strong {
    font-size: 18px !important;
  }

  .creator-performance-card .creator-ai-score-ring {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 102px !important;
    height: 102px !important;
    justify-self: center !important;
    align-self: center !important;
  }

  .creator-performance-card .creator-ai-score-ring strong {
    font-size: 30px !important;
  }

  .creator-performance-card .best-platform-panel {
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 78px;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    align-items: center;
    align-content: center;
    gap: 2px 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .creator-performance-card .best-platform-panel > div {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: flex-start;
    min-width: 0;
    font-size: 10px !important;
    margin-bottom: 3px;
  }

  .creator-performance-card .best-platform-logo {
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    width: 42px !important;
    height: 42px !important;
  }

  .creator-performance-card .best-platform-panel h3,
  .creator-performance-card .best-platform-panel p {
    grid-column: 2 !important;
    justify-self: start !important;
    min-width: 0;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .creator-performance-card .best-platform-panel h3 {
    grid-row: 2 !important;
    font-size: 13px !important;
  }

  .creator-performance-card .best-platform-panel p {
    grid-row: 3 !important;
    font-size: 10px !important;
  }

  .creator-performance-card .best-platform-panel button {
    grid-column: 3 !important;
    grid-row: 2 / 4 !important;
    min-height: 34px;
    width: auto !important;
    padding-inline: 10px !important;
    justify-self: end !important;
    font-size: 10px !important;
  }

  .creator-status-strip {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .creator-status-strip article {
    grid-column: 1 / -1 !important;
    min-width: 0;
    padding: 8px !important;
  }

  .creator-status-strip article small,
  .creator-status-strip article strong {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 560px) {
  .quizzes-elite-page,
  .tickets-elite-page,
  .about-elite-page,
  .knowledge-elite-page,
  .legal-elite-page {
    gap: 8px !important;
  }

  .quizzes-elite-page > * + *,
  .tickets-elite-page > * + *,
  .about-elite-page > * + *,
  .knowledge-elite-page > * + *,
  .legal-elite-page > * + * {
    margin-top: 0 !important;
  }
}

/* Hero robot polish: soften the mascot aura without changing app logic. */
.hero-mascot-panel {
  overflow: visible !important;
  isolation: isolate;
}

.hero-mascot-panel::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 16px -24px -10px -34px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 42% 46%, rgba(255, 168, 82, .28), rgba(255, 132, 45, .12) 42%, transparent 72%),
    radial-gradient(ellipse at 70% 18%, rgba(78, 161, 255, .15), transparent 62%);
  filter: blur(8px);
  opacity: .88;
  pointer-events: none;
}

.hero-mascot-panel svg {
  overflow: visible;
  position: relative;
  z-index: 1;
}

body:not(.dark) .hero-mascot-panel::before {
  background:
    radial-gradient(ellipse at 42% 46%, rgba(255, 168, 82, .18), rgba(255, 132, 45, .07) 42%, transparent 72%),
    radial-gradient(ellipse at 70% 18%, rgba(78, 161, 255, .10), transparent 62%);
  opacity: .68;
}

.hero-ai-score {
  align-self: start;
}

@media (max-width: 560px) {
  .hero-mascot-panel {
    overflow: visible !important;
  }

  .hero-mascot-panel::before {
    inset: 18px -18px -8px -28px;
    opacity: .78;
    filter: blur(7px);
  }

  .hero-ai-score {
    align-self: start !important;
    padding-top: 2px;
    transform: translateY(-3px);
    z-index: 3;
  }

  .hero-ai-score .ai-score-ring {
    width: 64px;
    height: 64px;
  }

  .hero-ai-score .ai-score-ring small {
    font-size: 7.6px;
  }

  .hero-ai-score .ai-score-ring strong {
    font-size: 19px;
  }

  .hero-ai-score .ai-score-ring span {
    font-size: 7.6px;
  }
}

@media (max-width: 380px) {
  .hero-ai-score {
    transform: translateY(-4px);
  }

  .hero-ai-score .ai-score-ring {
    width: 58px;
    height: 58px;
  }
}

/* Auth, legal and public policy polish. */
.auth-logo.auth-logo-mark {
  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 183, 84, .18), transparent 58%),
    rgba(255, 155, 61, .055);
  box-shadow:
    inset 0 0 0 1px rgba(255, 218, 132, .16),
    0 0 30px rgba(255, 139, 38, .24);
}

.auth-logo.auth-logo-mark .logo-mark {
  width: 74px;
  height: 74px;
}

.auth-logo.auth-logo-mark img.brand-logo-img {
  border-radius: 999px !important;
}

.legal-brand-hero {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  align-items: center;
  gap: 12px;
  padding: 14px !important;
  border-color: rgba(255, 155, 61, .26);
  background:
    radial-gradient(circle at 10% 15%, rgba(255, 155, 61, .18), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(47, 128, 255, .12), transparent 30%),
    linear-gradient(180deg, rgba(16,25,55,.90), rgba(9,14,34,.92));
}

.legal-brand-orb {
  width: 72px !important;
  height: 72px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: 0 0 28px rgba(255, 155, 61, .20);
}

.legal-brand-orb .logo-mark {
  width: 68px;
  height: 68px;
}

.legal-brand-hero h2 {
  margin: 0 0 5px;
  color: var(--elite-text);
  font-size: 20px;
  line-height: 1.05;
  font-weight: 950;
}

.legal-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.legal-meta-row span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 155, 61, .22);
  background: rgba(255, 155, 61, .075);
  color: var(--elite-orange-2);
  font-size: 10.5px;
  font-weight: 850;
}

.legal-summary-card {
  border-color: rgba(255, 155, 61, .22);
}

.legal-section-card ul {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--elite-muted);
  line-height: 1.45;
}

.legal-section-card li + li {
  margin-top: 6px;
}

.legal-section-card a {
  color: var(--elite-orange-2);
  font-weight: 850;
  text-decoration: none;
}

.legal-public-body {
  min-height: 100vh;
  margin: 0;
  padding: 14px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255,155,61,.18), transparent 34%),
    linear-gradient(180deg, #050817 0%, #071226 100%);
}

.legal-public-page {
  padding-bottom: 24px;
}

.legal-public-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.legal-public-actions a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 155, 61, .24);
  background: rgba(255, 155, 61, .09);
  color: var(--elite-orange-2);
  text-decoration: none;
  font-weight: 900;
  font-size: 12px;
}

@media (max-width: 560px) {
  .hero-ai-score {
    transform: translateY(-3px);
  }

  .legal-brand-hero {
    grid-template-columns: 62px minmax(0, 1fr) !important;
    gap: 10px;
    padding: 12px !important;
  }

  .legal-brand-orb {
    width: 60px !important;
    height: 60px !important;
  }

  .legal-brand-orb .logo-mark {
    width: 56px;
    height: 56px;
  }

  .legal-brand-hero h2 {
    font-size: 17px;
  }

  .legal-brand-hero p,
  .legal-section-card p,
  .legal-section-card li {
    font-size: 12px;
  }
}

@media (max-width: 380px) {
  .hero-ai-score {
    transform: translateY(-4px);
  }
}

/* Engagement Hub elite command center. */
.engagement-elite-page {
  width: min(100%, 980px);
  margin-inline: auto;
  display: grid;
  gap: 10px;
  padding-bottom: calc(var(--bottom-nav-height, 88px) + 18px) !important;
}

.engagement-topbar {
  position: sticky;
  top: 0;
  z-index: 850;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 0 6px;
  background: linear-gradient(180deg, rgba(5,8,20,.98), rgba(5,8,20,.76));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.engagement-topbar h1,
.engagement-topbar p {
  margin: 0;
  min-width: 0;
  text-align: center;
}

.engagement-topbar h1 {
  color: var(--elite-text);
  font-size: 19px;
  line-height: 1.05;
  font-weight: 950;
}

.engagement-topbar p {
  margin-top: 4px;
  color: var(--elite-muted);
  font-size: 11px;
  line-height: 1.25;
}

.engagement-rank-orb {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,155,61,.30);
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background:
    radial-gradient(circle at 50% 10%, rgba(255,155,61,.30), transparent 55%),
    rgba(255,255,255,.045);
  box-shadow: 0 0 22px rgba(255,155,61,.18);
}

.engagement-tabbar {
  position: sticky;
  top: calc(54px + env(safe-area-inset-top, 0px));
  z-index: 830;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 18px;
  background: rgba(8,13,32,.84);
  box-shadow: var(--elite-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.engagement-tabbar button {
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: transparent;
  color: rgba(205,214,244,.72);
  font-size: 9px;
  font-weight: 760;
}

.engagement-tabbar .ui-svg {
  display: none;
}

.engagement-tabbar small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8.4px;
  letter-spacing: 0;
}

.engagement-tabbar button.active {
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.12);
  box-shadow:
    inset 0 0 0 1px rgba(255,155,61,.24),
    0 0 18px rgba(255,155,61,.20);
}

.engagement-tab-panel {
  display: grid;
  gap: 10px;
}

.engagement-xp-hero,
.today-missions-card,
.retention-tools-card,
.season-pass-card,
.mission-bonus-card,
.mission-list-card,
.boxes-head-card,
.next-box-card,
.recent-wins-card,
.events-header-card,
.event-list-card,
.prediction-strip-card,
.league-hero-card,
.league-list-card,
.skill-tree-card,
.reminder-settings-card {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 0%, rgba(255,155,61,.11), transparent 31%),
    linear-gradient(180deg, rgba(16,25,55,.88), rgba(8,13,32,.92));
  box-shadow: var(--elite-shadow);
  overflow: hidden;
}

.engagement-xp-hero {
  min-height: 118px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 82px;
  align-items: center;
  gap: 10px;
  padding: 14px;
}

.engagement-avatar-ring {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(8,13,32,.96) 0 58%, transparent 59%),
    conic-gradient(from -20deg, #ff8f2b, #7c3cff, #ffb45f, #ff8f2b);
  box-shadow: 0 0 28px rgba(255,155,61,.25);
}

.engagement-avatar-ring img,
.engagement-avatar-ring b {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  object-fit: cover;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  background: rgba(255,255,255,.04);
  font-size: 28px;
  font-weight: 950;
}

.engagement-avatar-ring i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--elite-orange-2);
  background: rgba(12,18,38,.96);
  box-shadow: inset 0 0 0 1px rgba(255,155,61,.32);
}

.engagement-avatar-ring i .ui-svg {
  width: 15px;
  height: 15px;
}

.engagement-level-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.engagement-level-copy h2 {
  margin: 0;
  color: var(--elite-text);
  font-size: 22px;
  line-height: 1;
  font-weight: 950;
}

.engagement-level-copy p {
  margin: 0;
  color: var(--elite-muted);
  font-size: 12px;
}

.xp-line {
  display: grid;
  gap: 6px;
}

.xp-line span {
  color: var(--elite-text);
  font-size: 11px;
  font-weight: 850;
}

.xp-line div,
.mini-progress,
.mission-progress-bar,
.bonus-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.xp-line i,
.mini-progress i,
.mission-progress-bar i,
.bonus-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8f2b, #ffcf6b);
  box-shadow: 0 0 12px rgba(255,155,61,.36);
}

.engagement-progress-ring {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, rgba(8,13,32,.97) 0 56%, transparent 57%),
    conic-gradient(#ff9b26 calc(var(--pct, 0) * 1%), rgba(255,255,255,.09) 0);
  box-shadow: 0 0 24px rgba(255,155,61,.22);
}

.engagement-progress-ring strong {
  color: var(--elite-text);
  font-size: 18px;
  font-weight: 950;
}

.engagement-stat-grid,
.skill-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.engagement-stat-grid article,
.skill-summary-grid article {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 8px 6px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,155,61,.12), transparent 58%),
    rgba(255,255,255,.035);
}

.engagement-stat-grid strong,
.skill-summary-grid strong {
  color: var(--elite-text);
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
}

.engagement-stat-grid small,
.skill-summary-grid small {
  color: var(--elite-muted);
  font-size: 9.5px;
  text-align: center;
}

.skill-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skill-summary-grid span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #45c6ff;
  background: rgba(45,167,255,.12);
}

.eng-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.eng-section-head.inline {
  margin-bottom: 6px;
}

.eng-section-head h2,
.eng-section-head h3,
.events-header-card h2,
.boxes-head-card h2,
.league-hero-card h2,
.skill-tree-card h3 {
  margin: 0;
  color: var(--elite-text);
  font-weight: 950;
  line-height: 1.05;
}

.eng-section-head h2,
.events-header-card h2,
.boxes-head-card h2,
.league-hero-card h2 {
  font-size: 18px;
}

.eng-section-head h3,
.skill-tree-card h3 {
  font-size: 16px;
}

.eng-section-head span,
.eng-section-head button,
.eng-section-head p,
.events-header-card p,
.boxes-head-card p,
.league-hero-card p,
.mission-bonus-card p,
.reminder-settings-card p {
  margin: 0;
  color: var(--elite-muted);
  font-size: 11px;
}

.eng-section-head > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.eng-section-head button {
  border: 0;
  color: var(--elite-orange-2);
  background: transparent;
  font-weight: 900;
}

.today-missions-card,
.mission-list-card,
.recent-wins-card,
.events-header-card,
.event-list-card,
.prediction-strip-card,
.league-list-card,
.skill-tree-card,
.reminder-settings-card {
  padding: 12px;
}

.mission-preview-row,
.mission-card-row,
.reward-win-row,
.league-row-elite {
  display: grid;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}

.mission-preview-row {
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  min-height: 64px;
  padding: 9px;
}

.mission-preview-row + .mission-preview-row,
.mission-card-row + .mission-card-row,
.reward-win-row + .reward-win-row,
.league-row-elite + .league-row-elite,
.prediction-card-mini + .prediction-card-mini {
  margin-top: 8px;
}

.mission-row-icon,
.event-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #75e36e;
  background: rgba(100,230,98,.11);
  box-shadow: inset 0 0 0 1px rgba(100,230,98,.22);
}

.mission-row-icon .ui-svg,
.event-icon .ui-svg {
  width: 19px;
  height: 19px;
}

.mission-preview-row div,
.mission-card-row div,
.reward-win-row div {
  min-width: 0;
}

.mission-preview-row strong,
.mission-card-row strong,
.reward-win-row strong,
.league-row-elite strong,
.event-title-row strong,
.prediction-card-mini strong {
  color: var(--elite-text);
  font-size: 12.5px;
  line-height: 1.2;
}

.mission-preview-row small,
.mission-card-row small,
.reward-win-row small {
  display: block;
  margin-top: 2px;
  color: var(--elite-muted);
  font-size: 10px;
}

.mission-preview-row em,
.mission-card-row em,
.reward-win-row em,
.league-row-elite em {
  color: var(--elite-orange-2);
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.mission-preview-row button,
.mission-card-row button,
.wide-orange-ghost,
.wide-purple-ghost,
.event-action-btn,
.orange-action {
  min-height: 34px;
  border-radius: 13px;
  border: 1px solid rgba(255,155,61,.35);
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.09);
  font-weight: 950;
}

.row-state {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--elite-muted);
}

.mission-preview-row.complete .row-state,
.mission-card-row.complete aside > span {
  color: #39f08a;
}

.wide-orange-ghost,
.wide-purple-ghost {
  width: 100%;
  margin-top: 10px;
}

.wide-purple-ghost {
  border-color: rgba(191, 92, 255, .38);
  color: #d68cff;
  background: rgba(154,72,255,.10);
}

.engagement-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.engagement-quick-actions button {
  min-height: 84px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 9px 4px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 17px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,155,61,.16), transparent 60%),
    rgba(255,255,255,.035);
  color: var(--elite-text);
}

.engagement-quick-actions span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.12);
}

.engagement-quick-actions strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--elite-text);
  font-size: 10px;
  white-space: nowrap;
}

.mission-bonus-card,
.boxes-head-card,
.next-box-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  gap: 10px;
  padding: 12px;
}

.mission-bonus-card strong {
  display: block;
  margin-top: 8px;
  color: var(--elite-text);
  font-size: 13px;
}

.mission-bonus-card em {
  display: block;
  margin: 5px 0 8px;
  color: var(--elite-orange-2);
  font-style: normal;
  font-weight: 950;
}

.bonus-box-art,
.next-box-art,
.box-art {
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
}

.bonus-box-art .ui-svg,
.next-box-art .ui-svg {
  width: 78px;
  height: 78px;
  filter: drop-shadow(0 0 18px rgba(255,155,61,.36));
}

.mission-filter-tabs,
.event-filter-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(5,8,22,.58);
}

.event-filter-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mission-filter-tabs button,
.event-filter-tabs button {
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  color: var(--elite-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 900;
}

.mission-filter-tabs button.active,
.event-filter-tabs button.active {
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.12);
  box-shadow: inset 0 0 0 1px rgba(255,155,61,.25);
}

.mission-card-row {
  grid-template-columns: 42px minmax(0, 1fr) 58px;
  min-height: 78px;
  padding: 10px;
}

.mission-card-row p {
  margin: 2px 0 0;
  color: var(--elite-muted);
  font-size: 10px;
  line-height: 1.25;
}

.mission-card-row aside {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.mission-card-row aside button {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 10px;
}

.mystery-box-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mystery-box-card {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 10px 7px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,155,61,.18), transparent 58%),
    rgba(255,255,255,.035);
}

.mystery-box-card.gold {
  border-color: rgba(255,187,72,.26);
  background:
    radial-gradient(circle at 50% 10%, rgba(255,189,67,.30), transparent 58%),
    rgba(255,155,61,.055);
}

.mystery-box-card.diamond {
  border-color: rgba(118,88,255,.30);
  background:
    radial-gradient(circle at 50% 10%, rgba(102,80,255,.30), transparent 58%),
    rgba(128,70,255,.06);
}

.mystery-box-card.locked {
  filter: grayscale(.25);
  opacity: .66;
}

.mystery-box-card .box-art .ui-svg {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 0 14px currentColor);
}

.mystery-box-card strong {
  color: var(--elite-text);
  font-size: 12px;
  text-align: center;
}

.mystery-box-card small {
  color: var(--elite-muted);
  font-size: 9.5px;
}

.mystery-box-card button {
  min-height: 32px;
  min-width: 68px;
  border: 1px solid rgba(255,155,61,.34);
  border-radius: 12px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
  font-weight: 950;
}

.mystery-box-card.gold button {
  color: #101624;
  background: linear-gradient(135deg, #ff8f2b, #ffc367);
}

.mystery-box-card em {
  color: #c990ff;
  font-style: normal;
  font-size: 10px;
  font-weight: 950;
}

.box-token-pill {
  justify-self: end;
  min-height: 34px;
  min-width: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,155,61,.24);
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
  font-weight: 950;
}

.countdown-grid {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.countdown-grid span {
  display: grid;
  gap: 2px;
  color: var(--elite-text);
}

.countdown-grid b {
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0;
}

.countdown-grid small {
  color: var(--elite-muted);
  font-size: 9px;
}

.reward-win-row {
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  min-height: 58px;
  padding: 9px;
}

.reward-win-row > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #c990ff;
  background: rgba(154,72,255,.12);
}

.reward-win-row button {
  min-height: 28px;
  border: 1px solid rgba(255,155,61,.24);
  border-radius: 10px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
}

.event-card-elite {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  background:
    radial-gradient(circle at 0% 0%, rgba(157,75,255,.14), transparent 44%),
    rgba(255,255,255,.035);
}

.event-card-elite + .event-card-elite {
  margin-top: 9px;
}

.event-icon {
  width: 50px;
  height: 50px;
  color: #b972ff;
  background: rgba(139,92,246,.13);
}

.event-icon .ui-svg {
  width: 27px;
  height: 27px;
}

.event-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.event-title-row em {
  padding: 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,72,72,.28);
  color: #ff6262;
  background: rgba(255,72,72,.08);
  font-style: normal;
  font-size: 9px;
  font-weight: 950;
}

.event-card-elite p {
  margin: 4px 0 10px;
  color: var(--elite-muted);
  font-size: 11px;
}

.event-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.event-stats span {
  display: grid;
  gap: 2px;
}

.event-stats small {
  color: var(--elite-muted);
  font-size: 9px;
}

.event-stats b {
  color: var(--elite-text);
  font-size: 14px;
}

.event-action-btn,
.orange-action {
  width: 100%;
  color: #121827;
  background: linear-gradient(135deg, #ff8a27, #ffc06a);
  border-color: rgba(255,194,106,.44);
}

.prediction-card-mini {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}

.prediction-card-mini small {
  display: block;
  margin-top: 4px;
  color: var(--elite-orange-2);
  font-size: 10px;
}

.prediction-options-mini {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.prediction-options-mini button {
  min-height: 32px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: var(--elite-text);
  background: rgba(255,255,255,.035);
  text-align: left;
  padding: 7px 9px;
}

.prediction-options-mini button.selected {
  border-color: rgba(255,155,61,.34);
  color: var(--elite-orange-2);
}

.league-hero-card {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px 12px 12px;
  background:
    radial-gradient(circle at 50% 26%, rgba(167,85,255,.36), transparent 40%),
    linear-gradient(180deg, rgba(16,25,55,.88), rgba(8,13,32,.92));
}

.league-emblem {
  width: 112px;
  height: 92px;
  display: grid;
  place-items: center;
  color: #b972ff;
  filter: drop-shadow(0 0 24px rgba(177,96,255,.46));
}

.league-emblem .ui-svg {
  width: 76px;
  height: 76px;
}

.league-hero-card h2 {
  margin: 0;
}

.league-hero-card p {
  margin: 4px 0 12px;
}

.league-stat-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  overflow: hidden;
  background: rgba(255,255,255,.035);
}

.league-stat-grid span {
  display: grid;
  gap: 3px;
  padding: 10px 6px;
}

.league-stat-grid small {
  color: var(--elite-muted);
  font-size: 9px;
}

.league-stat-grid b {
  color: var(--elite-text);
  font-size: 17px;
}

.league-row-elite {
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  min-height: 54px;
  padding: 8px 9px;
}

.league-row-elite .league-rank {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
  font-size: 11px;
  font-weight: 950;
}

.league-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  overflow: hidden;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}

.league-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.competition-banner.elite {
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(255,155,61,.18);
  border-radius: 15px;
  background: rgba(255,155,61,.06);
}

.skill-tree-card {
  padding: 12px;
}

.skill-tree-visual {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, 104px);
  gap: 4px;
  min-height: 318px;
  margin-top: 10px;
}

.skill-tree-lines {
  position: absolute;
  inset: 44px 34px 68px;
  pointer-events: none;
  opacity: .78;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,177,91,.72) 10% 90%, transparent 90%) center 29%/100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 8%, rgba(255,177,91,.72) 8% 92%, transparent 92%) center 66%/100% 2px no-repeat,
    linear-gradient(180deg, rgba(255,177,91,.72), rgba(255,177,91,.72)) 50% 0/2px 100% no-repeat,
    linear-gradient(180deg, rgba(43,194,255,.72), rgba(43,194,255,.72)) 18% 50%/2px 49% no-repeat,
    linear-gradient(180deg, rgba(43,194,255,.72), rgba(43,194,255,.72)) 82% 50%/2px 49% no-repeat;
}

.skill-node {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--elite-text);
}

.skill-node:nth-of-type(1) { grid-column: 3 / 5; grid-row: 1; }
.skill-node:nth-of-type(2) { grid-column: 1 / 3; grid-row: 2; }
.skill-node:nth-of-type(3) { grid-column: 5 / 7; grid-row: 2; }
.skill-node:nth-of-type(4) { grid-column: 1 / 3; grid-row: 3; }
.skill-node:nth-of-type(5) { grid-column: 3 / 5; grid-row: 3; }
.skill-node:nth-of-type(6) { grid-column: 5 / 7; grid-row: 3; }

.skill-node span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: var(--elite-orange-2);
  background:
    radial-gradient(circle at 50% 28%, rgba(255,155,61,.28), transparent 60%),
    rgba(255,155,61,.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,155,61,.25),
    0 0 22px rgba(255,155,61,.18);
}

.skill-node.blue span { color: #3bc4ff; background: rgba(28,151,255,.10); box-shadow: inset 0 0 0 1px rgba(53,185,255,.25), 0 0 22px rgba(53,185,255,.18); }
.skill-node.green span { color: #8cf75d; background: rgba(110,235,65,.10); box-shadow: inset 0 0 0 1px rgba(130,240,78,.25), 0 0 22px rgba(130,240,78,.18); }
.skill-node.silver span { color: #aab4c8; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

.skill-node.selected span {
  transform: scale(1.04);
}

.skill-node.maxed span {
  color: #36f08b;
}

.skill-node.locked {
  opacity: .56;
}

.skill-node .ui-svg {
  width: 32px;
  height: 32px;
}

.skill-node strong {
  max-width: 100%;
  color: var(--elite-text);
  font-size: 10px;
  line-height: 1.1;
  text-align: center;
}

.skill-node small {
  color: var(--elite-orange-2);
  font-size: 10px;
  font-weight: 900;
}

.skill-upgrade-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}

.skill-upgrade-panel strong,
.skill-upgrade-panel small {
  display: block;
}

.skill-upgrade-panel strong {
  color: var(--elite-text);
}

.skill-upgrade-panel small {
  color: var(--elite-muted);
  margin-top: 2px;
}

.orange-action:disabled,
.mystery-box-card button:disabled {
  color: var(--elite-muted);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}

.reminder-grid.compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.reminder-grid.compact label {
  display: grid;
  gap: 5px;
  color: var(--elite-muted);
  font-size: 10px;
}

.reminder-grid.compact input,
.reminder-grid.compact select {
  min-width: 0;
  height: 36px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 0 9px;
  color: var(--elite-text);
  background: rgba(255,255,255,.045);
}

.mission-card-row,
.mission-preview-row,
.mystery-box-card,
.event-card-elite,
.league-row-elite,
.skill-node,
.engagement-quick-actions button {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.mission-card-row:active,
.mission-preview-row:active,
.mystery-box-card:active,
.event-card-elite:active,
.league-row-elite:active,
.skill-node:active,
.engagement-quick-actions button:active {
  transform: scale(.985);
}

@media (max-width: 560px) {
  .engagement-elite-page {
    gap: 9px !important;
    padding-inline: 10px !important;
  }

  .engagement-xp-hero {
    grid-template-columns: 82px minmax(0, 1fr) 70px;
    min-height: 108px;
    gap: 8px;
    padding: 12px;
  }

  .engagement-avatar-ring {
    width: 72px;
    height: 72px;
  }

  .engagement-avatar-ring img,
  .engagement-avatar-ring b {
    width: 59px;
    height: 59px;
  }

  .engagement-progress-ring {
    width: 64px;
    height: 64px;
  }

  .engagement-progress-ring strong {
    font-size: 16px;
  }

  .engagement-level-copy h2 {
    font-size: 20px;
  }

  .engagement-stat-grid {
    gap: 6px;
  }

  .engagement-stat-grid strong {
    font-size: 16px;
  }

  .mission-preview-row {
    grid-template-columns: 36px minmax(0, 1fr) auto 20px;
  }

  .mission-preview-row em {
    font-size: 10px;
  }

  .mystery-box-grid {
    gap: 7px;
  }

  .mystery-box-card {
    min-height: 142px;
  }

  .skill-tree-visual {
    grid-template-rows: repeat(3, 96px);
    min-height: 294px;
  }

  .skill-node span {
    width: 56px;
    height: 56px;
  }

  .skill-node .ui-svg {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 380px) {
  .engagement-tabbar {
    gap: 2px;
    padding: 4px;
  }

  .engagement-tabbar button {
    min-height: 35px;
  }

  .engagement-tabbar small {
    font-size: 7.8px;
  }

  .engagement-quick-actions strong {
    font-size: 9px;
  }

  .mission-card-row {
    grid-template-columns: 38px minmax(0, 1fr) 50px;
  }

.skill-node strong {
  font-size: 9px;
  }
}

/* Elite48 final profile, Social Pulse and AI Studio polish. */
.profile-title-with-logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.profile-topbar-brand {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  filter: drop-shadow(0 0 10px rgba(255,155,61,.38));
}

.profile-topbar-brand .logo-mark {
  width: 25px;
  height: 25px;
}

.public-profile-banner-art .profile-emblem-orb,
.own-profile-banner-mark .logo-mark {
  display: none !important;
}

.public-profile-hero-card,
.own-profile-hero-card {
  min-height: 336px;
  padding-top: 96px;
}

.public-profile-banner-art,
.own-profile-banner-mark {
  height: 132px;
}

.public-profile-actions[style*="display: none"] {
  margin: 0;
}

.elite-pulse-destinations {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(4,8,22,.48);
}

.elite-pulse-destinations button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0 !important;
  border-radius: 12px !important;
  color: var(--elite-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 900;
}

.elite-pulse-destinations button .ui-svg {
  width: 13px;
  height: 13px;
}

.elite-pulse-destinations button.active {
  color: var(--elite-orange-2) !important;
  background: rgba(255,155,61,.10);
  box-shadow: inset 0 0 0 1px rgba(255,155,61,.26), 0 0 16px rgba(255,155,61,.14);
}

.pulse-rankings-board {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,155,61,.18);
  border-radius: var(--elite-radius-panel);
  background:
    radial-gradient(circle at 88% 0%, rgba(255,155,61,.14), transparent 34%),
    linear-gradient(180deg, rgba(16,25,55,.88), rgba(8,12,30,.92));
  box-shadow: var(--elite-shadow);
}

.pulse-podium-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pulse-podium-mini button,
.pulse-ranking-list button {
  min-width: 0;
  border: 1px solid rgba(255,255,255,.09);
  color: var(--elite-text);
  background: rgba(255,255,255,.04);
}

.pulse-podium-mini button {
  min-height: 132px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 18px;
}

.pulse-podium-mini .rank-1 {
  border-color: rgba(255,155,61,.38);
  background: radial-gradient(circle at 50% 0%, rgba(255,155,61,.18), rgba(255,255,255,.04));
  transform: translateY(-4px);
}

.pulse-podium-mini em,
.rank-number {
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
  font-style: normal;
  font-weight: 950;
}

.pulse-podium-mini em {
  width: 24px;
  height: 24px;
}

.pulse-podium-mini .creator-avatar {
  width: 50px;
  height: 50px;
}

.pulse-podium-mini strong,
.pulse-podium-mini small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pulse-podium-mini strong {
  font-size: 12px;
}

.pulse-podium-mini small {
  color: var(--elite-orange-2);
  font-size: 10px;
  font-weight: 900;
}

.pulse-ranking-list {
  display: grid;
  gap: 7px;
}

.pulse-ranking-list button {
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 15px;
}

.rank-number {
  width: 24px;
  height: 24px;
  font-size: 11px;
}

.pulse-ranking-list .creator-avatar.mini {
  width: 34px;
  height: 34px;
}

.pulse-ranking-list strong,
.pulse-ranking-list small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pulse-ranking-list strong {
  font-size: 13px;
}

.pulse-ranking-list small {
  color: var(--elite-muted);
  font-size: 10px;
}

.pulse-ranking-list em {
  color: var(--elite-orange-2);
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
}

.elite-social-pulse-page .elite-post-author {
  display: grid;
  gap: 2px;
}

.elite-social-pulse-page .elite-post-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.elite-social-pulse-page .elite-post-meta-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--elite-muted);
}

.elite-social-pulse-page .elite-post-meta-line i {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(205,214,244,.46);
}

.elite-social-pulse-page .elite-post-meta-line small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
}

.elite-social-pulse-page .viral-pill {
  min-width: 76px;
  max-width: 82px;
  min-height: 30px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 6px;
  white-space: nowrap;
}

.elite-social-pulse-page .viral-pill .ui-svg {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px;
}

.elite-social-pulse-page .viral-pill strong {
  font-size: 11.5px !important;
  line-height: 1;
}

.elite-social-pulse-page .viral-pill small {
  display: inline !important;
  font-size: 6.8px !important;
  line-height: 1;
  letter-spacing: 0;
}

.elite-social-pulse-page .post-more {
  width: 22px;
}

.elite-social-pulse-page .elite-post-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px !important;
}

.elite-social-pulse-page .elite-post-metrics span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.elite-social-pulse-page .elite-post-actions {
  width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.elite-social-pulse-page .elite-post-actions button {
  width: 100%;
  white-space: nowrap;
}

.spg-hero {
  border-color: rgba(255,155,61,.20);
}

.spg-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 8px;
}

.spg-context-grid[x-show] {
  margin-bottom: 0;
}

.spg-context-grid .spg-field {
  margin: 0;
}

.spg-mode-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px 9px;
  min-height: 60px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.spg-mode-card > span {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}

.spg-mode-card .ui-svg {
  width: 18px;
  height: 18px;
}

.spg-mode-card b,
.spg-mode-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spg-mode-card b {
  color: var(--elite-text);
  font-size: 12px;
  line-height: 1.1;
}

.spg-mode-card small {
  color: var(--elite-muted);
  font-size: 10px;
  line-height: 1.2;
}

.spg-textarea {
  height: auto !important;
  min-height: 96px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  line-height: 1.35;
  resize: vertical;
}

.spg-compose {
  gap: 11px;
}

.spg-studio-panel.campaign {
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, .78fr)) auto;
}

@media (max-width: 560px) {
  .profile-title-with-logo {
    gap: 6px;
  }

  .profile-topbar-brand {
    width: 23px;
    height: 23px;
  }

  .profile-topbar-brand .logo-mark {
    width: 22px;
    height: 22px;
  }

  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: 306px;
    padding-top: 74px !important;
  }

  .public-profile-banner-art,
  .own-profile-banner-mark {
    height: 112px;
  }

  .elite-social-pulse-page .elite-pulse-shell {
    gap: 8px;
  }

  .elite-social-pulse-page .elite-post-head {
    grid-template-columns: 42px minmax(0, 1fr) 76px 20px !important;
    gap: 6px !important;
  }

  .elite-social-pulse-page .elite-post-author strong {
    max-width: 100%;
    font-size: 14px;
  }

  .elite-social-pulse-page .elite-post-actions {
    gap: 4px !important;
  }

  .elite-social-pulse-page .elite-post-actions button {
    gap: 2px !important;
    min-height: 33px !important;
    padding-inline: 2px !important;
    font-size: 8.6px !important;
  }

  .elite-social-pulse-page .elite-post-actions button .ui-svg {
    width: 10px !important;
    height: 10px !important;
    flex-basis: 10px !important;
  }

  .pulse-rankings-board {
    padding: 10px;
    gap: 9px;
  }

  .pulse-podium-mini {
    gap: 6px;
  }

  .pulse-podium-mini button {
    min-height: 120px;
    border-radius: 16px;
  }

  .spg-context-grid,
  .spg-studio-panel.campaign {
    grid-template-columns: 1fr;
  }

  .spg-studio-panel.campaign .spg-panel-cta {
    grid-column: 1;
  }
}

@media (max-width: 390px) {
  .elite-social-pulse-page .elite-post-head {
    grid-template-columns: 40px minmax(0, 1fr) 72px 18px !important;
  }

  .elite-social-pulse-page .viral-pill {
    min-width: 72px;
    padding-inline: 4px;
  }

  .elite-social-pulse-page .viral-pill small {
    font-size: 6.2px !important;
  }

  .elite-social-pulse-page .elite-post-actions button {
    font-size: 7.8px !important;
  }
}

/* Elite50 final profile compacting after the last legacy profile layer. */
.public-profile-hero-card,
.own-profile-hero-card {
  min-height: 286px !important;
  padding-top: 58px !important;
}

.public-profile-banner-art,
.own-profile-banner-mark {
  height: 76px !important;
}

@media (max-width: 560px) {
  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: 258px !important;
    padding-top: 40px !important;
  }

  .public-profile-banner-art,
  .own-profile-banner-mark {
    height: 62px !important;
  }
}

/* Elite51: AI Studio help/image mode and Telegram-first Communities. */
.spg-hero {
  position: relative;
}

.spg-help-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  color: #ffb35e;
  background: rgba(8, 13, 32, .78);
  box-shadow: 0 0 22px rgba(255, 139, 45, .16);
}

.spg-studio-panel.image {
  border-color: rgba(255, 165, 62, .34);
  background:
    radial-gradient(circle at 78% 12%, rgba(255, 165, 62, .22), transparent 34%),
    linear-gradient(145deg, rgba(17, 25, 58, .94), rgba(7, 12, 31, .92));
}

.studio-help-backdrop {
  z-index: 80;
  align-items: flex-end;
}

.studio-help-sheet {
  width: min(440px, calc(100vw - 28px));
  margin: 0 auto 18px;
  padding: 14px;
  border: 1px solid rgba(255, 165, 62, .28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 155, 61, .18), transparent 36%),
    linear-gradient(180deg, rgba(14, 22, 52, .98), rgba(6, 10, 26, .98));
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .52);
}

.studio-help-sheet header,
.studio-help-sheet article {
  display: flex;
  align-items: center;
  gap: 12px;
}

.studio-help-sheet header {
  justify-content: space-between;
  margin-bottom: 10px;
}

.studio-help-sheet header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.studio-help-sheet h2 {
  margin: 0;
  color: #f8f5ff;
  font-size: 18px;
}

.studio-help-sheet article {
  padding: 11px 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.studio-help-sheet article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border-radius: 12px;
  color: #ffb35e;
  background: rgba(255, 155, 61, .12);
}

.studio-help-sheet strong {
  display: block;
  color: #fff;
  font-size: 13px;
}

.studio-help-sheet small {
  display: block;
  margin-top: 3px;
  color: rgba(210, 218, 246, .76);
  line-height: 1.35;
}

.elite-post-momentum {
  display: inline-flex !important;
  width: fit-content;
  margin: 4px 0 0 !important;
  padding: 3px 7px;
  border: 1px solid rgba(255, 165, 62, .24);
  border-radius: 999px;
  color: #ffbd70;
  background: rgba(255, 155, 61, .10);
  font-size: 9px !important;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.communities-elite-page,
.group-detail-elite-page {
  display: grid;
  gap: 12px;
  padding-bottom: calc(var(--bottom-nav-height, 88px) + 18px);
}

.communities-topbar,
.group-detail-topbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
}

.communities-topbar h1,
.group-detail-topbar h1 {
  margin: 0;
  color: #f8f5ff;
  font-size: 21px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.communities-topbar p {
  margin: 2px 0 0;
  color: rgba(210, 218, 246, .72);
  font-size: 11px;
  line-height: 1.25;
}

.elite-icon-btn,
.elite-avatar-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  color: #f7f4ff;
  background: rgba(12, 18, 43, .82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
}

.elite-avatar-btn {
  overflow: hidden;
  border-color: rgba(255, 155, 61, .32);
}

.elite-avatar-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.communities-summary-card,
.community-platform-strip,
.community-search-card,
.trending-communities-card,
.active-members-card,
.setup-card,
.group-profile-hero,
.group-stats-card,
.group-recent-activity-card,
.group-members-card,
.bot-capability-card,
.group-about-card {
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 155, 61, .14), transparent 30%),
    linear-gradient(180deg, rgba(14, 22, 52, .92), rgba(7, 12, 31, .94));
  box-shadow: 0 18px 46px rgba(0, 0, 0, .30);
}

.communities-summary-card {
  min-height: 104px;
  display: grid;
  grid-template-columns: 1fr 94px 1fr;
  align-items: center;
  padding: 16px;
  overflow: hidden;
}

.communities-summary-card article {
  display: grid;
  gap: 3px;
}

.communities-summary-card small,
.community-platform-strip small,
.community-mini-card small,
.community-row-elite small,
.group-profile-main p,
.group-stat-strip small,
.group-metric-grid small {
  color: rgba(210, 218, 246, .72);
}

.communities-summary-card strong {
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

.communities-summary-card span,
.communities-summary-card em {
  color: #37e58b;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.community-orb {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  color: #c887ff;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(202, 119, 255, .36), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255, 155, 61, .14), transparent 68%);
  box-shadow: 0 0 36px rgba(183, 92, 255, .30);
}

.community-orb .ui-svg {
  width: 42px;
  height: 42px;
}

.community-platform-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
}

.platform-status-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  color: #fff;
  background: rgba(8, 13, 32, .65);
}

.platform-status-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
}

.platform-status-card strong,
.platform-status-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-status-card.disabled {
  opacity: .72;
}

.platform-svg-whatsapp {
  color: #35d98d;
}

.community-filter-tabs,
.group-detail-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: rgba(8, 13, 32, .82);
  scrollbar-width: none;
}

.community-filter-tabs::-webkit-scrollbar,
.group-detail-tabs::-webkit-scrollbar {
  display: none;
}

.community-filter-tabs button,
.group-detail-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 13px;
  color: rgba(210, 218, 246, .72);
  background: transparent;
  font-size: 12px;
  font-weight: 850;
}

.community-filter-tabs button.active,
.group-detail-tabs button.active {
  color: #ffb35e;
  background: rgba(255, 155, 61, .14);
  box-shadow: inset 0 0 0 1px rgba(255, 155, 61, .30), 0 0 18px rgba(255, 155, 61, .14);
}

.community-search-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}

.community-search-card input {
  min-width: 0;
  border: 0;
  color: #fff;
  background: transparent;
  outline: 0;
  font-weight: 700;
}

.community-search-card button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: #ffb35e;
  background: rgba(255, 155, 61, .10);
}

.my-communities-section,
.group-tab-panel {
  display: grid;
  gap: 10px;
}

.community-card-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}

.community-card-scroll::-webkit-scrollbar {
  display: none;
}

.community-mini-card {
  position: relative;
  width: 132px;
  min-height: 178px;
  flex: 0 0 132px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 13px 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 0%, rgba(155, 87, 255, .22), transparent 42%),
    rgba(10, 17, 42, .88);
}

.community-kind-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #fff;
  background: rgba(154, 95, 255, .38);
  font-size: 8px;
  font-weight: 900;
}

.community-photo,
.community-row-photo,
.group-profile-photo,
.member-avatar {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #ffb35e;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 155, 61, .38), transparent 56%),
    rgba(255, 255, 255, .05);
}

.community-photo {
  width: 72px;
  height: 72px;
  margin-top: 12px;
  border-radius: 20px;
}

.community-photo img,
.community-row-photo img,
.group-profile-photo img,
.member-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-mini-card strong {
  width: 100%;
  color: #fff;
  font-size: 13px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-mini-card em {
  width: 100%;
  color: #37e58b;
  font-size: 9px;
  font-style: normal;
  text-align: center;
}

.trending-communities-card,
.active-members-card {
  display: grid;
  gap: 9px;
  padding: 12px;
}

.community-row-elite,
.community-member-preview,
.group-member-row,
.bot-capability-row {
  display: grid;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 15px;
  background: rgba(8, 13, 32, .58);
}

.community-row-elite {
  grid-template-columns: 28px 44px minmax(0, 1fr) 54px 34px;
  padding: 9px;
}

.community-rank {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ffb35e;
  background: rgba(255, 155, 61, .12);
  font-size: 12px;
  font-weight: 900;
}

.community-row-photo {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-weight: 900;
}

.community-row-elite strong,
.community-row-elite small,
.community-row-elite em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-row-elite strong {
  color: #fff;
  font-size: 13px;
}

.community-row-elite em {
  color: #37e58b;
  font-size: 9px;
  font-style: normal;
}

.community-row-elite b {
  justify-self: end;
  padding: 4px 7px;
  border-radius: 999px;
  color: #f1a3ff;
  background: rgba(191, 89, 255, .14);
  font-size: 9px;
}

.community-row-elite > button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: #56c9ff;
  background: rgba(68, 180, 255, .10);
}

.community-member-preview {
  grid-template-columns: 26px 38px minmax(0, 1fr) auto;
  padding: 8px;
  color: #fff;
}

.community-member-preview > span {
  color: #ffb35e;
  font-weight: 900;
}

.community-member-preview i,
.member-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-style: normal;
}

.community-member-preview strong,
.community-member-preview em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-member-preview em {
  color: #ffb35e;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.community-setup-panel {
  display: grid;
  gap: 10px;
}

.setup-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.setup-card > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #ffb35e;
  background: rgba(255, 155, 61, .12);
}

.setup-card strong {
  color: #fff;
  font-size: 15px;
}

.setup-card p {
  margin: 4px 0 10px;
  color: rgba(210, 218, 246, .75);
  font-size: 12px;
  line-height: 1.4;
}

.setup-card button {
  grid-column: 1 / -1;
}

.group-profile-hero {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 72px 14px 14px;
  overflow: hidden;
}

.group-banner-orb {
  position: absolute;
  inset: 0 0 auto;
  height: 102px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 52% 10%, rgba(255, 155, 61, .30), transparent 22%),
    radial-gradient(circle at 78% 8%, rgba(78, 161, 255, .24), transparent 34%);
}

.group-banner-orb .logo-mark {
  width: 58px;
  height: 58px;
  filter: drop-shadow(0 0 18px rgba(255, 155, 61, .58));
}

.group-profile-main {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: end;
  gap: 13px;
}

.group-profile-photo {
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 155, 61, .34);
  border-radius: 22px;
  font-size: 28px;
  font-weight: 900;
}

.group-profile-main h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}

.group-profile-main p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 6px;
  font-size: 12px;
}

.group-profile-main p i,
.community-row-elite small i,
.community-mini-card small i {
  width: 4px;
  height: 4px;
  display: inline-block;
  border-radius: 50%;
  background: rgba(255, 155, 61, .85);
}

.group-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.group-stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: rgba(4, 8, 22, .48);
}

.group-stat-strip span {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 0;
}

.group-stat-strip strong {
  color: #fff;
  font-size: 14px;
}

.group-stat-strip small {
  font-size: 9px;
}

.group-tab-panel {
  min-height: 180px;
}

.group-stats-card,
.group-recent-activity-card,
.group-members-card,
.bot-capability-card,
.group-about-card {
  padding: 12px;
}

.group-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.group-metric-grid article {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 15px;
  background: rgba(8, 13, 32, .56);
}

.group-metric-grid strong {
  display: block;
  color: #fff;
  font-size: 21px;
}

.activity-bars {
  height: 92px;
  display: flex;
  align-items: end;
  gap: 8px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 16px;
  background: rgba(4, 8, 22, .42);
}

.activity-bars span {
  flex: 1;
  min-height: 14px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #ffb35e, #8b5cff 78%);
  box-shadow: 0 0 18px rgba(255, 155, 61, .28);
}

.activity-bars.large {
  height: 148px;
}

.activity-bars span b {
  display: none;
}

.group-member-row {
  grid-template-columns: 28px 40px minmax(0, 1fr);
  padding: 9px;
}

.rank-badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  color: #ffb35e;
  background: rgba(255, 155, 61, .12);
  font-weight: 900;
}

.group-member-row strong,
.group-member-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-member-row strong {
  color: #fff;
}

.group-member-row small {
  color: rgba(210, 218, 246, .70);
}

.bot-capability-row {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  margin-top: 8px;
  padding: 9px;
}

.bot-capability-row > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #a8b1d7;
  background: rgba(255, 255, 255, .05);
}

.bot-capability-row.active > span {
  color: #35e68d;
  background: rgba(53, 230, 141, .12);
}

.bot-capability-row strong,
.bot-capability-row small {
  display: block;
}

.bot-capability-row strong {
  color: #fff;
}

.bot-capability-row small {
  color: rgba(210, 218, 246, .68);
  line-height: 1.3;
}

.bot-capability-row em {
  color: #ffb35e;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.bot-capability-row.active em {
  color: #35e68d;
}

.group-about-card h2 {
  margin: 0 0 10px;
  color: #fff;
}

.group-about-card p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: rgba(210, 218, 246, .76);
}

.group-about-card b {
  color: #fff;
}

.group-about-card code {
  color: #ffb35e;
  font-size: 11px;
}

@media (max-width: 430px) {
  .communities-elite-page,
  .group-detail-elite-page {
    gap: 10px;
    padding-inline: 10px;
  }

  .communities-summary-card {
    grid-template-columns: 1fr 76px 1fr;
    padding: 12px;
  }

  .community-orb {
    width: 72px;
    height: 72px;
  }

  .communities-summary-card strong {
    font-size: 24px;
  }

  .platform-status-card {
    padding: 8px;
  }

  .community-row-elite {
    grid-template-columns: 24px 40px minmax(0, 1fr) 46px 30px;
    gap: 7px;
  }

  .community-row-elite b {
    padding-inline: 5px;
    font-size: 8px;
  }
}

/* Elite50 terminal override: this must stay after older profile polish layers. */
.public-profile-hero-card,
.own-profile-hero-card {
  min-height: 302px !important;
  padding-top: 66px !important;
}

.public-profile-banner-art,
.own-profile-banner-mark {
  height: 86px !important;
}

@media (max-width: 560px) {
  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: 272px !important;
    padding-top: 48px !important;
  }

  .public-profile-banner-art,
  .own-profile-banner-mark {
    height: 72px !important;
  }
}

/* Delta Kim emblem restore: use the transparent SVG asset, no CSS-drawn fallback. */
.logo-mark:not(.has-custom-logo) {
  background: url("/uploads/logo-default.svg") center / contain no-repeat !important;
  border-radius: 999px !important;
  overflow: visible !important;
  box-shadow: 0 0 16px rgba(255, 155, 61, .34) !important;
}

.logo-mark:not(.has-custom-logo)::before,
.logo-mark:not(.has-custom-logo)::after {
  content: "" !important;
  display: none !important;
}

.brand-orb .logo-mark:not(.has-custom-logo) {
  width: 38px !important;
  height: 38px !important;
}

@media (max-width: 560px) {
  .brand-orb .logo-mark:not(.has-custom-logo) {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Elite56 Socio icon balance: keep the badge size, zoom the artwork out. */
.platform-socio .platform-logo .platform-svg-socio,
.platform-socio .platform-signal-icon .platform-svg-socio {
  width: 30px !important;
  height: 30px !important;
}

/* Elite56qa5 final home/header polish. */
.logo-mark:not(.has-custom-logo) {
  border-radius: 999px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 31% 22%, rgba(255,255,255,.78), transparent 9%),
    radial-gradient(circle at 50% 50%, rgba(255,184,88,.26), transparent 43%),
    conic-gradient(from 205deg, #5f2507, #ffdc82, #ff8e22, #6a2908, #ffd77c, #5f2507) !important;
  box-shadow:
    inset 0 0 0 1.8px rgba(255,224,145,.74),
    inset 0 0 0 5px rgba(78,28,5,.32),
    0 0 0 1px rgba(255,155,61,.22),
    0 0 16px rgba(255,139,38,.36) !important;
}

.logo-mark:not(.has-custom-logo)::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 62% !important;
  height: 58% !important;
  transform: translate(-50%, -45%) !important;
  clip-path: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 92'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='24' y1='9' x2='76' y2='88' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ffe59a'/%3E%3Cstop offset='.55' stop-color='%23ff9b32'/%3E%3Cstop offset='1' stop-color='%23823308'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 6C54 6 57 8.4 59.3 12.7L91.2 74.2C95.4 82.3 89.6 90 80.8 90H19.2C10.4 90 4.6 82.3 8.8 74.2L40.7 12.7C43 8.4 46 6 50 6Z' fill='url(%23g)' stroke='%23ffe39a' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M50 15C52.2 15 54.1 16.4 55.4 19L82.9 72.1C85.1 76.4 82 80 77.1 80H22.9C18 80 14.9 76.4 17.1 72.1L44.6 19C45.9 16.4 47.8 15 50 15Z' fill='none' stroke='%237a2d08' stroke-opacity='.72' stroke-width='2.5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  box-shadow: none !important;
}

.logo-mark:not(.has-custom-logo)::after {
  content: "\03B4" !important;
  position: relative !important;
  z-index: 2 !important;
  transform: translateY(1px) !important;
  color: #075f2a !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 48% !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.42), 0 0 4px rgba(255,221,125,.26) !important;
}

.brand-orb .logo-mark:not(.has-custom-logo) {
  width: 38px !important;
  height: 38px !important;
}

.streak-pill {
  height: 40px !important;
  min-width: 88px !important;
  padding: 0 10px !important;
  gap: 4px !important;
}

.streak-pill .streak-icon {
  align-self: flex-start;
  margin-top: 8px;
  transform: translateY(-2px);
}

.streak-pill .streak-icon .ui-svg {
  width: 15px !important;
  height: 15px !important;
}

.streak-pill > span:not(.streak-icon) {
  display: grid;
  justify-items: start;
  gap: 1px;
}

.streak-pill strong {
  font-size: 17px !important;
  line-height: .9 !important;
}

.streak-pill small {
  font-size: 7.5px !important;
  line-height: 1 !important;
}

.hero-robot-wave-arm {
  transform-box: fill-box;
  transform-origin: 20% 10%;
  animation: robotFriendlyWave 4.8s ease-in-out infinite;
}

@keyframes robotFriendlyWave {
  0%, 58%, 100% { transform: rotate(0deg); }
  64% { transform: rotate(-8deg); }
  70% { transform: rotate(10deg); }
  76% { transform: rotate(-6deg); }
  82% { transform: rotate(7deg); }
  88% { transform: rotate(0deg); }
}

.ai-score-ring {
  box-sizing: border-box;
  padding: 10px 8px !important;
  overflow: hidden;
  text-align: center;
}

.ai-score-ring small,
.ai-score-ring strong,
.ai-score-ring span {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.ai-score-ring small {
  font-size: 9px !important;
  line-height: 1 !important;
}

.ai-score-ring strong {
  font-size: 27px !important;
  line-height: .96 !important;
}

.ai-score-ring span {
  font-size: 9px !important;
  line-height: 1 !important;
}

.home-pulse-panel .platform-signal-card {
  align-items: start !important;
  padding-top: 8px !important;
}

.home-pulse-panel .platform-signal-icon {
  transform: translateY(-1px);
}

.platform-signal-icon,
.platform-logo,
.channel-icon,
.social-provider-mark,
.source-mark {
  display: grid !important;
  place-items: center !important;
}

.platform-socio .platform-logo,
.platform-socio .platform-signal-icon {
  border-radius: 999px !important;
  background: rgba(255,255,255,.06) !important;
  overflow: hidden !important;
}

.platform-socio .platform-logo .platform-svg-socio,
.platform-socio .platform-signal-icon .platform-svg-socio {
  width: 36px !important;
  height: 36px !important;
}

.platform-mini.mini-socio .platform-svg-socio,
.social-provider-mark.provider-socio .platform-svg-socio,
.source-mark.provider-socio .platform-svg-socio {
  width: 100% !important;
  height: 100% !important;
}

.elite-trending-ticker {
  overflow: hidden !important;
}

.elite-trending-ticker .ticker-track {
  width: max-content;
  min-width: max-content;
  gap: 18px !important;
  overflow: visible !important;
  will-change: transform;
  animation: eliteTickerMarquee 34s linear infinite;
}

.elite-trending-ticker:hover .ticker-track {
  animation-play-state: paused;
}

.elite-trending-ticker .ticker-track button {
  flex: 0 0 auto;
}

@keyframes eliteTickerMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 560px) {
  .streak-pill {
    min-width: 78px !important;
    height: 38px !important;
    padding: 0 8px !important;
  }

  .hero-ai-score .ai-score-ring {
    width: 62px !important;
    height: 62px !important;
    padding: 7px 5px !important;
  }

  .hero-ai-score .ai-score-ring small {
    font-size: 6.8px !important;
  }

  .hero-ai-score .ai-score-ring strong {
    font-size: 18px !important;
  }

  .hero-ai-score .ai-score-ring span {
    font-size: 6.8px !important;
  }

  .elite-trending-ticker .ticker-track {
    animation-duration: 28s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-robot-wave-arm,
  .elite-trending-ticker .ticker-track {
    animation: none !important;
  }
}

/* Elite56qa5b: sharpen header emblem and keep ticker inside its lane. */
.logo-mark:not(.has-custom-logo) {
  background:
    radial-gradient(circle at 31% 21%, rgba(255,255,255,.50), transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(255,184,88,.18), transparent 40%),
    conic-gradient(from 205deg, #4f1d05, #ffd77c, #ff8e22, #692608, #ffd77c, #4f1d05) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255,224,145,.82),
    inset 0 0 0 6px rgba(61,23,5,.36),
    0 0 0 1px rgba(255,155,61,.18),
    0 0 10px rgba(255,139,38,.28) !important;
}

.logo-mark:not(.has-custom-logo)::before {
  width: 58% !important;
  height: 55% !important;
  transform: translate(-50%, -43%) !important;
}

.logo-mark:not(.has-custom-logo)::after {
  font-size: 20px !important;
  transform: translateY(1.5px) !important;
  color: #046326 !important;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols", Arial, sans-serif !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.50) !important;
}

.brand-orb .logo-mark:not(.has-custom-logo)::after,
.profile-topbar-brand .logo-mark:not(.has-custom-logo)::after {
  font-size: 21px !important;
}

.auth-logo.auth-logo-mark .logo-mark:not(.has-custom-logo)::after,
.legal-brand-orb .logo-mark:not(.has-custom-logo)::after,
.about-deltana-orb .logo-mark:not(.has-custom-logo)::after,
.profile-emblem-orb .logo-mark:not(.has-custom-logo)::after,
.own-profile-banner-mark .logo-mark:not(.has-custom-logo)::after,
.group-banner-orb .logo-mark:not(.has-custom-logo)::after {
  font-size: 38px !important;
}

.platform-socio .platform-logo .platform-svg-socio,
.platform-socio .platform-signal-icon .platform-svg-socio {
  width: 38px !important;
  height: 38px !important;
}

.elite-trending-ticker {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.elite-trending-ticker .ticker-track {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  animation: none !important;
  mask-image: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 10px), transparent);
}

.elite-trending-ticker .ticker-runner {
  width: max-content;
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 18px;
  will-change: transform;
  animation: eliteTickerMarquee 34s linear infinite;
}

.elite-trending-ticker:hover .ticker-runner {
  animation-play-state: paused;
}

.elite-trending-ticker .ticker-runner button {
  flex: 0 0 auto;
}

.elite-trending-ticker .live-badge {
  position: relative;
  z-index: 2;
  background: rgba(22,18,29,.86);
}

@media (max-width: 560px) {
  .elite-trending-ticker .ticker-runner {
    animation-duration: 30s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-robot-wave-arm,
  .elite-trending-ticker .ticker-runner {
    animation: none !important;
  }
}

/* Elite56 logo rollback: this must stay after the failed CSS-drawn logo layers. */
.logo-mark:not(.has-custom-logo) {
  background: url("/uploads/logo-default.svg") center / contain no-repeat !important;
  border-radius: 999px !important;
  overflow: visible !important;
  box-shadow: 0 0 16px rgba(255, 155, 61, .34) !important;
}

.logo-mark:not(.has-custom-logo)::before,
.logo-mark:not(.has-custom-logo)::after {
  content: "" !important;
  display: none !important;
}

.brand-orb .logo-mark:not(.has-custom-logo) {
  width: 38px !important;
  height: 38px !important;
}

@media (max-width: 560px) {
  .brand-orb .logo-mark:not(.has-custom-logo) {
    width: 36px !important;
    height: 36px !important;
  }
}

/* Elite55d stability pass: Socio, navigation, feed focus and mobile alignment. */
.platform-svg-socio {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  filter: drop-shadow(0 4px 10px rgba(244,99,85,.28));
}

.platform-socio .platform-logo,
.platform-socio .platform-signal-icon,
.social-provider-mark.provider-socio,
.source-mark.provider-socio {
  border-radius: 14px !important;
  background: transparent !important;
  overflow: visible !important;
}

.platform-logo .platform-svg-socio,
.platform-signal-icon .platform-svg-socio,
.social-provider-mark.provider-socio .platform-svg-socio {
  width: 34px !important;
  height: 34px !important;
}

.platform-socio .platform-logo,
.platform-socio .platform-signal-icon {
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 50% 48%, rgba(244,99,85,.24), transparent 68%),
    rgba(255,255,255,.055) !important;
  overflow: hidden !important;
}

.platform-socio .platform-logo .platform-svg-socio,
.platform-socio .platform-signal-icon .platform-svg-socio {
  width: 34px !important;
  height: 34px !important;
}

.social-provider-mark.provider-socio,
.source-mark.provider-socio {
  border-radius: 999px !important;
  overflow: hidden !important;
}

.social-provider-mark.provider-socio .platform-svg-socio,
.source-mark.provider-socio .platform-svg-socio {
  width: 100% !important;
  height: 100% !important;
}

.social-provider-mark.provider-socio::before,
.social-provider-mark.provider-socio::after {
  display: none !important;
  content: none !important;
}

.leaderboard-list-card {
  display: grid;
  gap: 7px;
}

.leaderboard-row-elite {
  width: 100% !important;
  box-sizing: border-box !important;
  grid-template-columns: 30px 42px minmax(0, 1fr) minmax(58px, auto) !important;
  margin-top: 0 !important;
}

.leaderboard-row-elite > div {
  min-width: 0;
}

.leaderboard-row-elite em {
  min-width: 54px;
  justify-self: end;
  text-align: right;
}

.leaderboard-row-elite .leaderboard-avatar {
  justify-self: center;
}

.pulse-post-focus {
  animation: pulsePostFocus 1.7s ease both;
}

@keyframes pulsePostFocus {
  0% { box-shadow: 0 0 0 0 rgba(255,155,61,.0), inset 0 0 0 1px rgba(255,155,61,.18); }
  18% { box-shadow: 0 0 0 4px rgba(255,155,61,.18), 0 0 26px rgba(255,155,61,.28), inset 0 0 0 1px rgba(255,184,106,.75); }
  100% { box-shadow: 0 0 0 0 rgba(255,155,61,.0), inset 0 0 0 1px rgba(255,155,61,.18); }
}

.studio-ad-credit-banner {
  position: relative;
  min-height: 84px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,155,61,.30);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,184,106,.34), transparent 30%),
    radial-gradient(circle at 96% 0%, rgba(139,92,246,.25), transparent 42%),
    linear-gradient(135deg, rgba(26,22,43,.94), rgba(8,14,35,.92));
}

.studio-ad-credit-banner::after {
  content: "";
  position: absolute;
  inset: auto -16px -40px auto;
  width: 150px;
  height: 100px;
  background:
    radial-gradient(circle at 48% 42%, rgba(255,155,61,.42), transparent 18%),
    linear-gradient(135deg, rgba(255,184,106,.0), rgba(255,125,31,.22));
  transform: rotate(-10deg);
  pointer-events: none;
}

.ad-credit-art {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #ffd68c;
  background: rgba(255,155,61,.13);
  box-shadow: inset 0 0 0 1px rgba(255,184,106,.22), 0 0 20px rgba(255,155,61,.18);
}

.studio-ad-credit-banner small,
.studio-ad-credit-banner p {
  margin: 0;
  color: rgba(210,218,246,.72);
}

.studio-ad-credit-banner small {
  display: block;
  color: #ffb35e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.studio-ad-credit-banner strong {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: 15px;
}

.studio-ad-credit-banner p {
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.28;
}

.studio-ad-credit-banner button {
  position: relative;
  z-index: 1;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid rgba(255,184,106,.55);
  border-radius: 14px;
  color: #130a04;
  background: linear-gradient(135deg, #ffd08a, #ff8b2e);
  font-weight: 900;
}

.studio-ad-credit-banner button:disabled {
  color: rgba(226,232,255,.58);
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.10);
}

.studio-dashboard-tools button {
  overflow: hidden;
}

.studio-dashboard-tools button.image {
  background:
    radial-gradient(circle at 74% 28%, rgba(255,155,61,.36), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(255,79,140,.20), transparent 38%),
    linear-gradient(145deg, rgba(42,20,12,.80), rgba(8,14,36,.86)) !important;
}

.studio-dashboard-tools button.writer {
  background:
    radial-gradient(circle at 80% 20%, rgba(139,92,246,.32), transparent 34%),
    linear-gradient(145deg, rgba(27,17,58,.78), rgba(8,14,36,.88)) !important;
}

.studio-dashboard-tools button.timing {
  background:
    radial-gradient(circle at 80% 18%, rgba(58,200,255,.32), transparent 34%),
    linear-gradient(145deg, rgba(9,31,54,.78), rgba(8,14,36,.88)) !important;
}

.studio-dashboard-tools button.campaign {
  background:
    radial-gradient(circle at 78% 22%, rgba(255,83,151,.28), transparent 34%),
    radial-gradient(circle at 22% 84%, rgba(255,155,61,.16), transparent 40%),
    linear-gradient(145deg, rgba(51,20,42,.76), rgba(8,14,36,.88)) !important;
}

@media (max-width: 560px) {
  .home-pulse-post-grid {
    grid-auto-columns: minmax(104px, 32%) !important;
    gap: 7px !important;
  }

  .home-pulse-post {
    min-height: 150px !important;
    padding: 8px !important;
    gap: 6px !important;
  }

  .home-pulse-post header {
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    gap: 4px !important;
  }

  .home-pulse-post header strong {
    font-size: 10.5px !important;
  }

  .home-pulse-post p {
    font-size: 10.5px !important;
    line-height: 1.22 !important;
  }

  .studio-ad-credit-banner {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .studio-ad-credit-banner button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Elite54 completion pass: feed paging, Socio retention and AI Studio controls. */
.elite-social-pulse-page .elite-post-momentum {
  display: none !important;
}

.pulse-load-more {
  width: calc(100% - 24px);
  min-height: 42px;
  margin: 2px auto 10px;
  border: 1px solid rgba(255,155,61,.16);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(226,232,255,.82);
  background:
    radial-gradient(circle at 50% -18%, rgba(255,155,61,.20), transparent 42%),
    rgba(11,17,40,.72);
  font-size: 11px;
  font-weight: 850;
}

button.pulse-load-more.manual {
  cursor: pointer;
}

.mini-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.18);
  border-top-color: var(--elite-orange-2);
  border-radius: 999px;
  animation: spin .8s linear infinite;
}

.studio-mode-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.studio-mode-guide article,
.studio-ad-credit-card,
.studio-admin-platforms {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255,155,61,.14), transparent 40%),
    linear-gradient(180deg, rgba(18,28,62,.76), rgba(8,12,30,.86));
}

.studio-mode-guide article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
}

.studio-mode-guide article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.11);
}

.studio-mode-guide .ui-svg {
  width: 17px;
  height: 17px;
}

.studio-mode-guide strong {
  display: block;
  color: var(--elite-text);
  font-size: 12px;
  line-height: 1.1;
}

.studio-mode-guide small {
  display: block;
  margin-top: 2px;
  color: rgba(205,214,244,.72);
  font-size: 9.5px;
  line-height: 1.25;
}

.studio-credit-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.spg-panel-cta.ghost {
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
}

.studio-dashboard-tools button,
.studio-template-item,
.studio-automation-row {
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.studio-automation-row:hover {
  transform: translateY(-1px);
  border-color: rgba(255,155,61,.20);
  background: rgba(255,155,61,.055);
}

.studio-automation-row {
  position: relative;
  overflow: hidden;
}

.studio-dashboard-tools button::after,
.studio-template-item::after,
.studio-automation-row::after {
  content: "";
  position: absolute;
  inset: auto -20% -42% 30%;
  height: 64%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,155,61,.22), transparent 64%);
  opacity: .8;
}

.studio-dashboard-tools button.image::after {
  background: radial-gradient(circle, rgba(255,155,61,.28), transparent 64%);
}

.studio-dashboard-tools button.writer::after {
  background: radial-gradient(circle, rgba(139,92,246,.26), transparent 64%);
}

.studio-dashboard-tools button.timing::after {
  background: radial-gradient(circle, rgba(58,200,255,.22), transparent 64%);
}

.studio-dashboard-tools button.campaign::after {
  background: radial-gradient(circle, rgba(255,83,151,.22), transparent 64%);
}

.studio-admin-platforms {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
}

.studio-admin-platforms h5 {
  margin: 0;
  color: var(--elite-text);
  font-size: 13px;
}

.studio-platform-policy {
  margin: 0 !important;
}

@media (max-width: 560px) {
  .elite-pulse-actions {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  }

  .elite-pulse-actions > button {
    min-width: 0;
    padding-inline: 8px !important;
    white-space: nowrap;
  }

  .studio-mode-guide,
  .studio-credit-actions {
    grid-template-columns: 1fr;
  }

  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: 262px !important;
    padding-top: 42px !important;
  }

  .public-profile-banner-art,
  .own-profile-banner-mark {
    height: 66px !important;
  }
}

/* Elite53: AI Studio dashboard and Communities polish. */
.ai-studio-page {
  max-width: 460px;
  margin: 0 auto;
  gap: 12px !important;
  padding-bottom: calc(var(--bottom-nav-height, 88px) + 18px) !important;
}

.studio-topbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 9px;
  padding: 2px 0 0;
}

.studio-topbar h1 {
  margin: 0;
  color: var(--elite-text, #f8f5ff);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
}

.studio-topbar p {
  margin: 3px 0 0;
  color: var(--elite-muted, #9ca7c8);
  font-size: 11.5px;
  line-height: 1.2;
}

.studio-main-tabs,
.studio-mini-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background: rgba(7, 12, 31, .82);
  scrollbar-width: none;
}

.studio-main-tabs::-webkit-scrollbar,
.studio-mini-tabs::-webkit-scrollbar { display: none; }

.studio-main-tabs button,
.studio-mini-tabs button {
  flex: 0 0 auto;
  min-width: 68px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: rgba(210, 218, 246, .68);
  padding: 7px 9px;
  display: grid;
  place-items: center;
  gap: 2px;
  font-weight: 800;
}

.studio-mini-tabs button {
  min-width: 74px;
  display: block;
  font-size: 11px;
}

.studio-main-tabs .ui-svg {
  width: 17px;
  height: 17px;
}

.studio-main-tabs small {
  font-size: 9.5px;
  line-height: 1;
}

.studio-main-tabs button.active,
.studio-mini-tabs button.active {
  color: #ffb86a;
  background: linear-gradient(180deg, rgba(255,155,61,.20), rgba(255,120,31,.08));
  box-shadow: inset 0 0 0 1px rgba(255,155,61,.28), 0 0 18px rgba(255,155,61,.18);
}

.studio-dashboard-panel,
.studio-simple-panel,
.studio-workspace {
  display: grid;
  gap: 12px;
}

.studio-landing-hero,
.studio-overview-card,
.studio-tools-card,
.studio-automation-card,
.studio-activity-card,
.studio-simple-panel {
  border: 1px solid rgba(255,155,61,.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 3%, rgba(255,155,61,.16), transparent 34%),
    radial-gradient(circle at 12% 14%, rgba(88,144,255,.13), transparent 30%),
    linear-gradient(180deg, rgba(16, 24, 54, .94), rgba(7, 12, 31, .92));
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  overflow: hidden;
}

.studio-landing-hero {
  min-height: 154px;
  padding: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
  align-items: center;
}

.studio-landing-hero h2 {
  margin: 5px 0 5px;
  color: #fff;
  font-size: 23px;
  line-height: 1.06;
  font-weight: 950;
}

.studio-landing-hero p {
  margin: 0;
  color: rgba(218,224,248,.77);
  font-size: 12.2px;
  line-height: 1.36;
}

.studio-info-row {
  margin-top: 12px;
  width: 100%;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(5, 10, 26, .54);
  color: #f8f5ff;
  min-height: 38px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  text-align: left;
}

.studio-info-row strong {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-info-row .ui-svg { width: 17px; height: 17px; }

.studio-robot-orb {
  width: 112px;
  height: 112px;
  border-radius: 34px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 48% 42%, rgba(255,184,106,.34), transparent 48%),
    linear-gradient(145deg, rgba(255,155,61,.10), rgba(88,144,255,.08));
  filter: drop-shadow(0 0 22px rgba(255,155,61,.18));
}

.studio-robot-orb svg {
  width: 108px;
  height: 112px;
  animation: studioBotFloat 4.8s ease-in-out infinite;
}

@keyframes studioBotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.studio-overview-card,
.studio-tools-card,
.studio-automation-card,
.studio-activity-card,
.studio-simple-panel {
  padding: 13px;
}

.studio-overview-card .section-head-row h2,
.studio-tools-card .section-head-row h2,
.studio-automation-card .section-head-row h2,
.studio-activity-card .section-head-row h2,
.studio-section-title h2 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.studio-overview-card .section-head-row p,
.studio-tools-card .section-head-row p,
.studio-automation-card .section-head-row p,
.studio-section-title p {
  margin: 3px 0 0;
  color: rgba(210,218,246,.68);
  font-size: 10.8px;
}

.studio-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.studio-stat-grid article {
  min-height: 92px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  background:
    radial-gradient(circle at 90% 90%, rgba(255,155,61,.14), transparent 42%),
    rgba(6, 12, 30, .58);
  padding: 10px;
  display: grid;
  align-content: space-between;
}

.studio-stat-grid article > span {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #ffb86a;
  background: rgba(255,155,61,.12);
}

.studio-stat-grid .ui-svg { width: 18px; height: 18px; }
.studio-stat-grid small { color: rgba(210,218,246,.75); font-size: 10.5px; }
.studio-stat-grid strong { color: #fff; font-size: 24px; line-height: 1; font-weight: 950; }
.studio-stat-grid em { color: #37f095; font-size: 10.5px; font-style: normal; font-weight: 800; }

.studio-dashboard-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.studio-dashboard-tools button {
  min-height: 112px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  color: #fff;
  background: rgba(6, 12, 30, .62);
  padding: 11px;
  text-align: left;
  display: grid;
  align-content: start;
  gap: 7px;
}

.studio-dashboard-tools button.image { border-color: rgba(255,155,61,.26); }
.studio-dashboard-tools button.writer { border-color: rgba(139,92,246,.28); }
.studio-dashboard-tools button.timing { border-color: rgba(58,200,255,.24); }
.studio-dashboard-tools button.campaign { border-color: rgba(255,83,151,.24); }

.studio-dashboard-tools button > span,
.studio-automation-row > span,
.studio-activity-row > span,
.studio-history-row > span,
.studio-template-item > span,
.studio-top-automation > span {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #ffb86a;
  background: rgba(255,155,61,.12);
}

.studio-dashboard-tools .ui-svg,
.studio-automation-row .ui-svg,
.studio-activity-row .ui-svg,
.studio-history-row .ui-svg,
.studio-template-item .ui-svg,
.studio-top-automation .ui-svg {
  width: 18px;
  height: 18px;
}

.studio-dashboard-tools strong {
  font-size: 13.5px;
  font-weight: 900;
}

.studio-dashboard-tools small {
  color: rgba(210,218,246,.68);
  font-size: 10.5px;
  line-height: 1.25;
}

.studio-automation-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.studio-automation-stats article {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(6, 12, 30, .56);
  padding: 12px;
}

.studio-automation-stats strong { display:block; color:#fff; font-size:26px; line-height:1; }
.studio-automation-stats small { color:rgba(210,218,246,.68); font-size:10.5px; }

.studio-top-automation,
.studio-automation-row,
.studio-activity-row,
.studio-history-row,
.studio-template-item {
  margin-top: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 17px;
  background: rgba(6, 12, 30, .56);
  padding: 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.studio-automation-row {
  grid-template-columns: 34px minmax(0, 1fr) 78px;
}

.studio-activity-row strong,
.studio-history-row strong,
.studio-automation-row strong,
.studio-template-item strong,
.studio-top-automation strong {
  display: block;
  color: #fff;
  font-size: 12.6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-activity-row small,
.studio-history-row small,
.studio-automation-row small,
.studio-template-item small,
.studio-top-automation small,
.studio-automation-row em {
  display: block;
  margin-top: 2px;
  color: rgba(210,218,246,.68);
  font-size: 10.5px;
  line-height: 1.25;
  font-style: normal;
}

.studio-activity-row em,
.studio-history-row em,
.studio-top-automation em,
.studio-automation-row b {
  color: #ffb86a;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.studio-automation-row b.status-active { color: #37f095; }
.studio-automation-row b.status-scheduled { color: #ffb86a; }
.studio-automation-row b.status-draft { color: #9ca7c8; }

.studio-history-row {
  grid-template-columns: 34px minmax(0, 1fr) 42px auto;
}

.studio-history-row img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.1);
}

.studio-template-grid {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.studio-template-item button {
  border: 1px solid rgba(255,155,61,.30);
  border-radius: 12px;
  background: rgba(255,155,61,.12);
  color: #ffb86a;
  min-width: 48px;
  min-height: 34px;
  font-weight: 900;
}

.studio-workspace .spg-hero {
  padding: 13px;
  border: 1px solid rgba(255,155,61,.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 8%, rgba(255,155,61,.14), transparent 34%),
    linear-gradient(180deg, rgba(16, 24, 54, .92), rgba(7, 12, 31, .92));
}

.studio-workspace .spg-hero h2 {
  font-size: 22px;
  line-height: 1.05;
}

.studio-workspace .spg-hero p {
  font-size: 11.5px;
  line-height: 1.3;
  padding-right: 42px;
}

.studio-workspace .spg-studio-tabs {
  margin-top: 11px;
}

.studio-help-backdrop {
  z-index: 5000 !important;
  position: fixed !important;
  inset: 0 !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
}

.studio-help-sheet {
  max-height: min(76vh, 620px);
  overflow-y: auto;
  margin-bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
}

.studio-help-sheet .icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: #f8f5ff;
  display: grid;
  place-items: center;
}

.studio-help-sheet .icon-btn .ui-svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 390px) {
  .ai-studio-page { gap: 10px !important; }
  .studio-topbar { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .studio-main-tabs button { min-width: 61px; padding-inline: 7px; }
  .studio-landing-hero {
    grid-template-columns: minmax(0, 1fr) 96px;
    padding: 14px;
    min-height: 142px;
  }
  .studio-landing-hero h2 { font-size: 21px; }
  .studio-robot-orb { width: 96px; height: 98px; border-radius: 28px; }
  .studio-robot-orb svg { width: 94px; height: 98px; }
  .studio-stat-grid strong { font-size: 21px; }
  .studio-dashboard-tools button { min-height: 104px; padding: 10px; }
  .studio-history-row { grid-template-columns: 34px minmax(0, 1fr) 36px; }
  .studio-history-row em { display: none; }
  .studio-history-row img { width: 36px; height: 36px; }
}

/* Elite50: final compact profile, premium boost board and full AI Studio planner. */
.public-profile-hero-card,
.own-profile-hero-card {
  min-height: 302px !important;
  padding-top: 66px !important;
}

.public-profile-banner-art,
.own-profile-banner-mark {
  height: 86px !important;
}

.boost-board-dashboard {
  display: grid;
  grid-template-columns: 1.08fr .86fr 1.05fr;
  gap: 8px;
}

.boost-board-dashboard article {
  min-width: 0;
  min-height: 76px;
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background:
    radial-gradient(circle at 86% 0%, rgba(255,155,61,.15), transparent 42%),
    rgba(255,255,255,.035);
}

.boost-rank-card,
.boost-reward-card {
  grid-template-columns: 34px minmax(0, 1fr);
}

.boost-rank-card > span,
.boost-reward-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.11);
}

.boost-complete-card {
  grid-template-columns: minmax(0, 1fr) 50px;
}

.boost-complete-card > span {
  --pct: 0;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(6,10,28,.95) 52%, transparent 54%),
    conic-gradient(#ff9b3d var(--pct), rgba(255,255,255,.10) 0);
}

.boost-complete-card b {
  color: var(--elite-text);
  font-size: 11px;
  line-height: 1;
}

.boost-board-dashboard small,
.boost-board-dashboard em {
  color: var(--elite-muted);
  font-size: 9.5px;
  font-style: normal;
  line-height: 1.1;
}

.boost-board-dashboard strong {
  display: block;
  min-width: 0;
  color: var(--elite-text);
  font-size: 16px;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boost-board-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(4,8,22,.52);
}

.boost-board-tabs button {
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 11px;
  color: var(--elite-muted);
  background: transparent;
  font-weight: 900;
}

.boost-board-tabs button.active {
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.11);
  box-shadow: inset 0 0 0 1px rgba(255,155,61,.28), 0 0 16px rgba(255,155,61,.14);
}

.boost-board-tabs .ui-svg {
  width: 13px;
  height: 13px;
}

.boost-board-tabs small {
  font-size: 10px;
}

.elite-social-pulse-page.missions-mode .boost-mission-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,155,61,.12), transparent 35%),
    linear-gradient(135deg, rgba(21,28,60,.94), rgba(12,16,42,.96));
}

.spg-campaign-planner {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(255,155,61,.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 0%, rgba(255,155,61,.13), transparent 38%),
    rgba(255,255,255,.03);
}

.spg-platform-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.spg-platform-checklist button {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 2px 7px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  color: var(--elite-muted);
  background: rgba(255,255,255,.035);
  text-align: left;
}

.spg-platform-checklist button.active {
  color: var(--elite-text);
  border-color: rgba(255,155,61,.32);
  background: rgba(255,155,61,.09);
}

.spg-platform-checklist .platform-svg,
.spg-platform-checklist .platform-text-fallback {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
}

.spg-platform-checklist strong,
.spg-platform-checklist small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spg-platform-checklist strong {
  font-size: 11px;
}

.spg-platform-checklist small {
  color: var(--elite-muted);
  font-size: 9px;
}

.spg-campaign-steps {
  display: grid;
  gap: 6px;
}

.spg-campaign-steps article {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(4,8,22,.36);
}

.spg-campaign-steps article > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
  border-radius: 11px;
  background: rgba(255,155,61,.10);
}

.spg-campaign-steps strong,
.spg-campaign-steps small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spg-campaign-steps strong {
  color: var(--elite-text);
  font-size: 12px;
}

.spg-campaign-steps small {
  color: var(--elite-muted);
  font-size: 10px;
}

.timing-source-high,
.timing-source-medium {
  border-color: rgba(48, 211, 139, .28) !important;
  background: rgba(48, 211, 139, .055) !important;
}

.timing-source-benchmark {
  border-color: rgba(78,161,255,.24) !important;
  background: rgba(78,161,255,.055) !important;
}

.creator-performance-card {
  grid-template-columns: minmax(0, 1fr) 98px !important;
  gap: 7px !important;
  padding: 11px !important;
}

.creator-performance-card .performance-metrics-grid {
  gap: 6px !important;
}

.creator-performance-card .performance-metrics-grid article {
  min-height: 74px !important;
  padding: 8px 7px !important;
}

.creator-performance-card .creator-ai-score-ring {
  width: 98px !important;
  height: 98px !important;
}

.creator-performance-card .best-platform-panel {
  min-height: 68px !important;
  padding: 8px !important;
}

@media (max-width: 560px) {
  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: 272px !important;
    padding-top: 48px !important;
  }

  .public-profile-banner-art,
  .own-profile-banner-mark {
    height: 72px !important;
  }

  .boost-board-dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .boost-board-dashboard article {
    min-height: 68px;
    padding: 8px 6px;
  }

  .boost-rank-card,
  .boost-reward-card,
  .boost-complete-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .boost-rank-card > span,
  .boost-reward-card > span {
    width: 28px;
    height: 28px;
  }

  .boost-complete-card > span {
    width: 40px;
    height: 40px;
  }

  .boost-board-dashboard strong {
    font-size: 13px;
  }

  .boost-board-dashboard small,
  .boost-board-dashboard em {
    font-size: 8px;
  }

  .boost-board-tabs {
    gap: 4px;
  }

  .boost-board-tabs button {
    min-height: 31px;
    gap: 3px;
  }

  .boost-board-tabs small {
    font-size: 8.6px;
  }

  .spg-platform-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Elite audit pass: Social Pulse parity, Morning Hub restore and Prediction Arena. */
.elite-social-pulse-page .pulse-platform-card {
  grid-template-columns: 31px minmax(0, 1fr);
  min-height: 70px;
  padding: 8px 8px 16px;
  align-content: center;
}

.elite-social-pulse-page .pulse-platform-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.elite-social-pulse-page .pulse-platform-copy strong {
  color: var(--elite-text);
  font-size: 12.5px !important;
  line-height: 1;
}

.elite-social-pulse-page .pulse-platform-copy small {
  color: var(--elite-orange-2) !important;
  font-size: 8px !important;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .elite-social-pulse-page .pulse-platform-strip {
    grid-auto-columns: 88px;
    gap: 7px;
  }

  .elite-social-pulse-page .pulse-platform-card {
    min-height: 64px;
    border-radius: 14px;
  }

  .elite-social-pulse-page .elite-post-head {
    grid-template-columns: 46px minmax(0, 1fr) minmax(62px, auto) 22px;
    column-gap: 7px;
  }

  .elite-social-pulse-page .viral-pill {
    min-width: 62px;
    min-height: 30px;
    display: inline-grid;
    grid-template-columns: 13px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 3px;
    padding: 3px 6px;
  }

  .elite-social-pulse-page .viral-pill .ui-svg {
    grid-row: 1 / span 2;
    width: 13px;
    height: 13px;
  }

  .elite-social-pulse-page .viral-pill strong {
    font-size: 12px;
    line-height: .95;
  }

  .elite-social-pulse-page .viral-pill small {
    display: block !important;
    font-size: 7.2px;
    line-height: .95;
  }
}

/* Final override: keep restored Boost Missions readable on phone width. */
@media (max-width: 560px) {
  .elite-social-pulse-page.missions-mode .elite-boost-board .boost-mission-card {
    display: grid !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    min-height: 126px !important;
    align-items: center !important;
  }

  .elite-social-pulse-page.missions-mode .elite-boost-board .mission-art {
    grid-row: 1 / 3 !important;
    width: 76px !important;
    height: 76px !important;
  }

  .elite-social-pulse-page.missions-mode .elite-boost-board .mission-copy {
    grid-column: 2 !important;
    min-width: 0 !important;
  }

  .elite-social-pulse-page.missions-mode .elite-boost-board .mission-action {
    grid-column: 2 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 104px !important;
    min-height: 38px !important;
  }
}

.engagement-tabbar button {
  grid-template-rows: 15px 12px;
  align-content: center;
  justify-items: center;
  gap: 1px;
}

.engagement-tabbar .ui-svg {
  display: block;
  width: 14px;
  height: 14px;
}

.engagement-tabbar small {
  font-size: 7.8px;
}

.spg-studio-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.spg-studio-tabs button {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  color: var(--elite-muted);
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 850;
}

.spg-studio-tabs button.active {
  color: var(--elite-orange-2);
  border-color: rgba(255,155,61,.36);
  background: rgba(255,155,61,.10);
  box-shadow: 0 0 18px rgba(255,155,61,.14);
}

.spg-studio-tabs .ui-svg {
  width: 15px;
  height: 15px;
}

.spg-studio-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, .82fr)) auto;
  gap: 8px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgba(255,155,61,.18);
  border-radius: 20px;
  background:
    radial-gradient(circle at 96% 0%, rgba(78,161,255,.12), transparent 34%),
    linear-gradient(180deg, rgba(16,25,55,.82), rgba(8,12,30,.88));
  box-shadow: var(--elite-shadow);
}

.spg-studio-panel > div,
.spg-studio-panel article {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}

.spg-studio-panel > div {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
}

.spg-panel-icon {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}

.spg-panel-icon .ui-svg {
  width: 18px;
  height: 18px;
}

.spg-studio-panel strong,
.spg-studio-panel b {
  color: var(--elite-text);
  font-size: 13px;
  line-height: 1.1;
}

.spg-studio-panel small,
.spg-studio-panel span,
.spg-studio-panel em {
  overflow: hidden;
  color: var(--elite-muted);
  font-size: 10px;
  line-height: 1.2;
  font-style: normal;
  text-overflow: ellipsis;
}

.spg-studio-panel article b {
  color: var(--elite-orange-2);
  font-size: 15px;
}

.spg-panel-cta {
  min-width: 104px;
  border: 1px solid rgba(255,155,61,.36);
  border-radius: 15px;
  color: #221104;
  background: linear-gradient(135deg, #ffb86a, #ff8a2d);
  font-weight: 950;
}

.elite-pulse-destinations {
  margin-top: 10px;
  margin-bottom: 0;
  border-radius: 16px;
}

.elite-boost-board {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255,155,61,.18);
  border-radius: var(--elite-radius-panel);
  background:
    radial-gradient(circle at 96% 6%, rgba(255,155,61,.14), transparent 34%),
    linear-gradient(180deg, rgba(16,25,55,.86), rgba(8,12,30,.9));
  box-shadow: var(--elite-shadow);
}

.elite-social-pulse-page.missions-mode .elite-pulse-shell {
  gap: 10px;
}

.elite-social-pulse-page.missions-mode .boost-mission-list {
  gap: 9px;
}

.elite-social-pulse-page.missions-mode .boost-mission-card {
  min-height: 112px;
  padding: 10px;
  border-radius: 18px;
}

.elite-social-pulse-page.missions-mode .mission-art {
  width: 68px;
  height: 68px;
  border-radius: 15px;
}

@media (max-width: 560px) {
  .elite-social-pulse-page.missions-mode .boost-mission-card {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px 10px;
    align-items: center;
  }

  .elite-social-pulse-page.missions-mode .mission-art {
    grid-row: 1 / 3;
    width: 76px;
    height: 76px;
  }

  .elite-social-pulse-page.missions-mode .mission-copy {
    min-width: 0;
  }

  .elite-social-pulse-page.missions-mode .mission-title-row {
    align-items: flex-start;
    gap: 6px;
  }

  .elite-social-pulse-page.missions-mode .mission-title-row strong {
    font-size: 13px;
    line-height: 1.08;
  }

  .elite-social-pulse-page.missions-mode .mission-title-row .mission-status {
    flex: 0 0 auto;
    max-width: 88px;
  }

  .elite-social-pulse-page.missions-mode .mission-action {
    grid-column: 2;
    justify-self: end;
    min-width: 104px;
    min-height: 38px;
  }
}

@media (max-width: 620px) {
  .spg-studio-panel {
    grid-template-columns: 1fr 1fr;
  }

  .spg-studio-panel > div,
  .spg-panel-cta {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .spg-studio-tabs {
    gap: 5px;
  }

  .spg-studio-tabs button {
    min-height: 38px;
    font-size: 9.5px;
    padding: 0 4px;
  }

  .spg-studio-panel {
    gap: 6px;
    padding: 8px;
  }
}

.prediction-arena-hero,
.featured-prediction-card,
.prediction-list-card {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 0%, rgba(177,96,255,.16), transparent 34%),
    radial-gradient(circle at 8% 8%, rgba(255,155,61,.12), transparent 30%),
    linear-gradient(180deg, rgba(16,25,55,.88), rgba(8,13,32,.92));
  box-shadow: var(--elite-shadow);
}

.prediction-arena-hero {
  min-height: 94px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: center;
  gap: 10px;
  padding: 14px;
}

.prediction-arena-hero h2,
.featured-prediction-card h3 {
  margin: 0;
  color: var(--elite-text);
}

.prediction-arena-hero p,
.featured-prediction-card p {
  margin: 4px 0 0;
  color: var(--elite-muted);
  font-size: 12px;
}

.prediction-arena-hero > span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--elite-orange-2);
  background:
    conic-gradient(from 0deg, rgba(255,155,61,.18), rgba(177,96,255,.28), rgba(255,155,61,.18));
  filter: drop-shadow(0 0 20px rgba(255,155,61,.24));
}

.prediction-arena-hero .ui-svg {
  width: 38px;
  height: 38px;
}

.prediction-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.prediction-summary-grid article {
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.retention-tools-card {
  display: grid;
  gap: 7px;
  padding: 9px;
}

.retention-tools-card article {
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(255,255,255,.035);
}

.retention-tools-card article > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}

.retention-tools-card .ui-svg {
  width: 19px;
  height: 19px;
}

.retention-tools-card strong,
.retention-tools-card small {
  display: block;
  min-width: 0;
}

.retention-tools-card strong {
  overflow: hidden;
  color: var(--elite-text);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retention-tools-card small {
  color: var(--elite-muted);
  font-size: 10px;
}

.retention-tools-card button {
  min-height: 32px;
  border: 1px solid rgba(255,155,61,.24);
  border-radius: 12px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
  padding-inline: 9px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.season-pass-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.season-pass-card .eng-section-head p {
  margin: 2px 0 0;
}

.season-pass-card .eng-section-head > span {
  padding: 5px 9px;
  border-radius: 999px;
  color: #c990ff;
  background: rgba(177,96,255,.12);
  font-size: 9px;
  font-weight: 950;
}

.season-pass-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.season-pass-progress div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.season-pass-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8a27, #ffc06a);
}

.season-pass-progress small {
  color: var(--elite-muted);
  font-size: 10px;
}

.season-reward-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 92px;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.season-reward-strip::-webkit-scrollbar {
  display: none;
}

.season-reward-strip button {
  min-height: 78px;
  display: grid;
  gap: 4px;
  align-content: center;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  color: var(--elite-muted);
  background: rgba(255,255,255,.035);
}

.season-reward-strip button.unlocked:not(.claimed) {
  border-color: rgba(255,155,61,.32);
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.08);
}

.season-reward-strip button.premium {
  border-color: rgba(177,96,255,.28);
}

.season-reward-strip button.claimed {
  color: var(--elite-ok, #34f59a);
}

.season-reward-strip small,
.season-reward-strip em {
  font-size: 9px;
  font-style: normal;
}

.season-reward-strip strong {
  color: var(--elite-text);
  font-size: 12px;
}

.prediction-summary-grid strong {
  color: var(--elite-text);
  font-size: 17px;
  line-height: 1;
}

.prediction-summary-grid small {
  color: var(--elite-muted);
  font-size: 9px;
}

.featured-prediction-card {
  display: grid;
  gap: 10px;
  padding: 13px;
}

.prediction-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.prediction-card-head span,
.prediction-card-head em {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 950;
  font-style: normal;
  text-transform: uppercase;
}

.prediction-card-head span {
  color: #c990ff;
  background: rgba(177,96,255,.12);
}

.prediction-card-head em {
  color: #ff6262;
  border: 1px solid rgba(255,72,72,.26);
  background: rgba(255,72,72,.08);
}

.prediction-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.prediction-meta-grid span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 13px;
  background: rgba(255,255,255,.035);
}

.prediction-meta-grid small {
  color: var(--elite-muted);
  font-size: 8px;
}

.prediction-meta-grid strong {
  overflow: hidden;
  color: var(--elite-text);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-options-list {
  display: grid;
  gap: 7px;
}

.prediction-option-card {
  position: relative;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  color: var(--elite-text);
  background: rgba(255,255,255,.04);
  text-align: left;
  overflow: hidden;
}

.prediction-option-card.selected {
  border-color: rgba(255,155,61,.38);
  background: rgba(255,155,61,.10);
}

.prediction-option-card:disabled {
  opacity: .74;
}

.prediction-option-card strong,
.prediction-option-card small {
  display: block;
  min-width: 0;
}

.prediction-option-card strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-option-card small {
  margin-top: 2px;
  color: var(--elite-muted);
  font-size: 9px;
}

.prediction-option-card b {
  color: var(--elite-orange-2);
  font-size: 16px;
}

.prediction-option-card i {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 7px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.prediction-option-card i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8a27, #b160ff);
}

.prediction-stake-panel,
.prediction-filter-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 15px;
  background: rgba(5,8,22,.52);
}

.prediction-filter-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.prediction-stake-panel span,
.prediction-stake-panel button,
.prediction-filter-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 11px;
  color: var(--elite-muted);
  background: transparent;
  font-size: 9px;
  font-weight: 900;
}

.prediction-stake-panel span {
  display: grid;
  place-items: center;
  color: var(--elite-orange-2);
}

.prediction-stake-panel button.active,
.prediction-filter-tabs button.active {
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.12);
  box-shadow: inset 0 0 0 1px rgba(255,155,61,.25);
}

.prediction-list-card {
  display: grid;
  gap: 7px;
  padding: 9px;
}

.prediction-list-row {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  color: var(--elite-text);
  background: rgba(255,255,255,.032);
  text-align: left;
}

.prediction-list-row > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}

.prediction-list-row .ui-svg {
  width: 18px;
  height: 18px;
}

.prediction-list-row strong,
.prediction-list-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prediction-list-row strong {
  font-size: 12px;
}

.prediction-list-row small,
.prediction-list-row em {
  color: var(--elite-muted);
  font-size: 9px;
  font-style: normal;
}

.prediction-list-row em {
  color: var(--elite-orange-2);
  font-weight: 900;
}

.arena-events-head {
  padding: 13px;
}

@media (max-width: 380px) {
  .prediction-summary-grid {
    gap: 5px;
  }

  .prediction-summary-grid strong {
    font-size: 14px;
  }

  .prediction-filter-tabs button,
  .prediction-stake-panel button,
  .prediction-stake-panel span {
    font-size: 8px;
    padding-inline: 2px;
  }
}

/* Elite48 winning overrides: keep the final mobile polish above older upgrade layers. */
.profile-title-with-logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.profile-topbar-brand {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  filter: drop-shadow(0 0 10px rgba(255,155,61,.38));
}

.profile-topbar-brand .logo-mark {
  width: 25px;
  height: 25px;
}

.public-profile-banner-art .profile-emblem-orb,
.own-profile-banner-mark .logo-mark {
  display: none !important;
}

.public-profile-hero-card,
.own-profile-hero-card {
  min-height: 360px;
  padding-top: 112px;
}

.elite-pulse-destinations {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin-top: 8px !important;
  padding: 5px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  background: rgba(4,8,22,.48) !important;
}

.elite-pulse-destinations button {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0 !important;
  border-radius: 12px !important;
  font-size: 11px !important;
}

.elite-pulse-destinations button .ui-svg {
  width: 13px;
  height: 13px;
}

.elite-social-pulse-page .elite-post-head {
  grid-template-columns: 46px minmax(0, 1fr) 80px 22px !important;
}

.elite-social-pulse-page .elite-post-author {
  display: grid !important;
  gap: 2px;
}

.elite-social-pulse-page .elite-post-name-row {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap !important;
}

.elite-social-pulse-page .elite-post-meta-line {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 5px;
}

.elite-social-pulse-page .elite-post-meta-line i {
  width: 3px;
  height: 3px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: rgba(205,214,244,.46);
}

.elite-social-pulse-page .elite-post-meta-line small {
  min-width: 0;
  overflow: hidden;
  color: var(--elite-muted);
  font-size: 10.5px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.elite-social-pulse-page .viral-pill {
  min-width: 76px !important;
  max-width: 82px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 0 6px !important;
  white-space: nowrap !important;
}

.elite-social-pulse-page .viral-pill .ui-svg {
  grid-row: auto !important;
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px !important;
}

.elite-social-pulse-page .viral-pill strong {
  font-size: 11.5px !important;
  line-height: 1 !important;
}

.elite-social-pulse-page .viral-pill small {
  display: inline !important;
  font-size: 6.8px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.elite-social-pulse-page .elite-post-metrics {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px !important;
  justify-content: stretch !important;
}

.elite-social-pulse-page .elite-post-metrics span {
  min-width: 0;
  justify-content: center;
}

.elite-social-pulse-page .elite-post-actions {
  width: 100% !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

.elite-social-pulse-page .elite-post-actions button {
  width: 100% !important;
  min-width: 0 !important;
  white-space: nowrap;
}

.spg-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 8px;
}

.spg-context-grid .spg-field {
  margin: 0;
}

.spg-mode-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 6px 9px;
  min-height: 60px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.spg-mode-card > span {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--elite-orange-2);
  background: rgba(255,155,61,.10);
}

.spg-textarea {
  height: auto !important;
  min-height: 96px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  line-height: 1.35;
  resize: vertical;
}

.spg-studio-panel.campaign {
  grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, .78fr)) auto;
}

@media (max-width: 560px) {
  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: 330px;
    padding-top: 92px !important;
  }

  .elite-social-pulse-page .elite-post-head {
    grid-template-columns: 42px minmax(0, 1fr) 76px 20px !important;
    gap: 6px !important;
  }

  .elite-social-pulse-page .elite-post-author strong {
    max-width: 100%;
    font-size: 14px;
  }

  .elite-social-pulse-page .elite-post-actions button {
    gap: 2px !important;
    min-height: 33px !important;
    padding-inline: 2px !important;
    font-size: 8.6px !important;
  }

  .elite-social-pulse-page .elite-post-actions button .ui-svg {
    width: 10px !important;
    height: 10px !important;
    flex-basis: 10px !important;
  }

  .spg-context-grid,
  .spg-studio-panel.campaign {
    grid-template-columns: 1fr !important;
  }
}

/* Elite49: profile headers stay compact now that the emblem lives in the topbar. */
.public-profile-hero-card,
.own-profile-hero-card {
  min-height: 316px !important;
  padding-top: 76px !important;
}

.public-profile-banner-art,
.own-profile-banner-mark {
  height: 96px !important;
}

@media (max-width: 560px) {
  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: 286px !important;
    padding-top: 56px !important;
  }

  .public-profile-banner-art,
  .own-profile-banner-mark {
    height: 82px !important;
  }
}

@media (max-width: 390px) {
  .elite-social-pulse-page .elite-post-head {
    grid-template-columns: 40px minmax(0, 1fr) 72px 18px !important;
  }

  .elite-social-pulse-page .viral-pill {
    min-width: 72px !important;
    padding-inline: 4px !important;
  }

  .elite-social-pulse-page .viral-pill small {
    font-size: 6.2px !important;
  }

  .elite-social-pulse-page .elite-post-actions button {
    font-size: 7.8px !important;
  }
}

/* Elite50 final profile compacting after the last legacy profile layer. */
.public-profile-hero-card,
.own-profile-hero-card {
  min-height: 302px !important;
  padding-top: 66px !important;
}

.public-profile-banner-art,
.own-profile-banner-mark {
  height: 86px !important;
}

@media (max-width: 560px) {
  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: 272px !important;
    padding-top: 48px !important;
  }

  .public-profile-banner-art,
  .own-profile-banner-mark {
    height: 72px !important;
  }
}

/* Elite56 final Socio zoom rollback: keep circle/card size, show more artwork. */
/* Elite58: keep public profile banners cinematic on real mobile browsers. */
@media (max-width: 560px) {
  .public-profile-hero-card,
  .own-profile-hero-card {
    min-height: clamp(320px, 86vw, 362px) !important;
    padding: 104px 12px 12px !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  .public-profile-banner-art,
  .own-profile-banner-mark {
    height: 150px !important;
    background:
      linear-gradient(180deg, rgba(5,8,22,.08), rgba(5,8,22,.22) 48%, rgba(5,8,22,.72) 100%),
      radial-gradient(circle at 56% 0%, rgba(255,155,61,.20), transparent 28%),
      radial-gradient(circle at 80% 10%, rgba(78,161,255,.18), transparent 32%) !important;
  }

  .public-profile-main,
  .own-profile-identity {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .public-profile-avatar-wrap {
    width: 82px !important;
    height: 82px !important;
  }
}

.home-pulse-panel .platform-socio .platform-signal-icon .platform-svg-socio,
.elite-social-pulse-page .platform-socio .platform-logo .platform-svg-socio {
  width: 23px !important;
  height: 23px !important;
  max-width: 23px !important;
  max-height: 23px !important;
}

.home-pulse-panel .platform-signal-copy {
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  transform: translateY(0);
}

/* Elite57 profile/Socio containment: platform marks stay badges, never post media or giant chips. */
.public-social-platform-chip .platform-svg,
.public-social-platform-chip .platform-svg-socio {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px !important;
}

.public-social-platform-chip.platform-socio {
  min-height: 44px !important;
  overflow: hidden !important;
}

.public-social-platform-chip.platform-socio > span {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.public-profile-feed .elite-public-post {
  padding: 0 !important;
  overflow: hidden !important;
}

.public-profile-feed .public-post-head {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) minmax(68px, auto) !important;
  align-items: start !important;
  gap: 8px !important;
  padding: 12px 12px 6px !important;
}

.public-profile-feed .public-post-avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
}

.public-profile-feed .public-post-avatar img,
.public-profile-feed .public-post-avatar > span {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.public-profile-feed .public-post-avatar i,
.public-profile-feed .public-post-avatar i .platform-svg,
.public-profile-feed .public-post-avatar i .platform-svg-socio {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  min-height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
}

.public-profile-feed .public-post-score {
  min-width: 76px !important;
  max-width: 90px !important;
  min-height: 30px !important;
  padding: 0 6px !important;
  gap: 3px !important;
  justify-content: center !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.public-profile-feed .public-post-score strong {
  font-size: 11.5px !important;
  line-height: 1 !important;
}

.public-profile-feed .public-post-score small {
  display: inline !important;
  font-size: 6.8px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.public-profile-feed .public-post-body {
  margin: 0 !important;
  padding: 8px 12px 10px !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}

.public-profile-feed .public-post-media {
  width: calc(100% - 24px) !important;
  margin: 0 12px 10px !important;
  border-radius: 14px !important;
  max-height: 220px !important;
}

.public-profile-feed .public-post-media img {
  width: 100% !important;
  height: 100% !important;
  max-height: 220px !important;
  object-fit: cover !important;
}

.public-profile-feed .public-post-metrics {
  padding: 0 12px 10px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
}

.public-profile-feed .public-post-actions {
  padding: 0 12px 10px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 5px !important;
}

.public-profile-feed .public-post-actions button {
  min-height: 31px !important;
  padding: 0 6px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.public-profile-feed .public-post-actions button .ui-svg {
  width: 13px !important;
  height: 13px !important;
}

.public-profile-feed .public-post-comments {
  margin: 0 12px 10px !important;
}

.public-profile-feed .public-post-link {
  margin: 0 12px 12px auto !important;
}

/* Elite58: profile post cards use the same completed action surface as Social Pulse. */
.public-profile-feed .elite-public-post {
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 82% 0%, rgba(255,151,45,.10), transparent 30%),
    linear-gradient(180deg, rgba(18,24,58,.96), rgba(8,13,34,.98)) !important;
}

.public-profile-feed .public-post-body {
  padding-bottom: 8px !important;
}

.public-profile-feed .public-post-metrics {
  padding-bottom: 8px !important;
}

.public-profile-feed .public-post-actions {
  padding-bottom: 12px !important;
}

.public-profile-feed .public-post-actions button {
  border-color: rgba(167,178,230,.16) !important;
  background: rgba(9,14,36,.74) !important;
}

.public-profile-feed .public-post-actions button.active,
.public-profile-feed .public-post-actions .boost-action {
  border-color: rgba(255,151,45,.52) !important;
}

/* Elite58 layout QA: keep mobile pages clear of the fixed dock without extra dead space. */
@media (max-width: 800px) {
  .mobile-bottom-nav.elite-bottom-dock {
    position: fixed !important;
    z-index: 2147483000 !important;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .home-elite-page {
    padding-bottom: calc(var(--bottom-nav-height, 78px) + 10px) !important;
  }

  .home-elite-page .elite-quote-banner {
    margin-bottom: 0 !important;
  }

  .ai-studio-page {
    padding-bottom: calc(var(--bottom-nav-height, 78px) + 18px) !important;
    min-height: auto !important;
  }

  .ai-studio-page .studio-dashboard-panel,
  .ai-studio-page .studio-simple-panel,
  .ai-studio-page .studio-workspace {
    margin-bottom: 0 !important;
  }

  .ai-studio-page .studio-dashboard-panel {
    padding-bottom: calc(var(--bottom-nav-height, 78px) + 8px) !important;
    position: relative;
    z-index: 0;
  }

  .ai-studio-page .studio-dashboard-panel > :last-child {
    margin-bottom: 0 !important;
  }
}

.about-feature-list article {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: center !important;
}

.about-feature-list article > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.about-feature-list strong,
.about-feature-list small {
  display: block;
  line-height: 1.22;
}

.about-feature-list small {
  white-space: normal !important;
  overflow: visible !important;
}

/* Elite58b: final mobile QA for AI Studio dashboard and About rows. */
@media (max-width: 800px) {
  .ai-studio-page {
    padding-bottom: calc(var(--bottom-nav-height, 78px) + 12px) !important;
  }

  .ai-studio-page .studio-dashboard-panel {
    padding-bottom: 8px !important;
  }

  .mobile-bottom-nav.elite-bottom-dock {
    display: flex !important;
    visibility: visible !important;
  }
}

.about-feature-list article > div {
  gap: 5px !important;
}

.about-feature-list strong {
  margin-bottom: 0 !important;
}

.public-profile-feed .elite-post-meta-line .meta-sep {
  display: none !important;
}

.home-pulse-panel .platform-signal-copy strong,
.home-pulse-panel .platform-signal-copy small {
  line-height: 1 !important;
  margin: 0 !important;
}

.home-pulse-panel .platform-signal-copy small {
  transform: none;
}

/* Elite56 robot wave: animate only the arm group and lift it higher. */
.hero-robot-wave-arm {
  transform-box: fill-box;
  transform-origin: 3% 6%;
  animation: robotFriendlyWaveHigh 5.2s ease-in-out infinite !important;
}

@keyframes robotFriendlyWaveHigh {
  0%, 54%, 100% { transform: rotate(0deg); }
  61% { transform: rotate(-30deg); }
  68% { transform: rotate(-52deg); }
  75% { transform: rotate(-38deg); }
  82% { transform: rotate(-48deg); }
  91% { transform: rotate(0deg); }
}

/* Elite56 compact premium drawer/sidebar navigation. */
.drawer-nav,
.sidebar-nav {
  gap: 3px !important;
}

.drawer-section,
.sidebar-section-title {
  color: rgba(255, 184, 106, .78) !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
  font-weight: 900 !important;
}

.drawer-section {
  margin: 6px 14px 2px !important;
  padding: 8px 0 3px !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}

.drawer-section:first-of-type {
  margin-top: 4px !important;
  border-top: 0 !important;
}

.sidebar-section-title {
  padding: 8px 12px 3px !important;
}

.drawer-nav button,
.sidebar-nav button,
.nav-more summary {
  min-height: 38px !important;
  border: 1px solid transparent !important;
}

.drawer-nav button {
  margin: 0 10px !important;
  padding: 8px 12px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
  gap: 10px !important;
}

.sidebar-nav button {
  padding: 8px 11px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  gap: 10px !important;
}

.drawer-nav button.active,
.sidebar-nav button.active,
.nav-more:has(button.active) summary {
  border-color: rgba(255,155,61,.28) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,155,61,.18), transparent 46%),
    rgba(255,155,61,.075) !important;
  color: var(--elite-orange-2, #ffb86a) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 14px rgba(255,155,61,.10);
}

.nav-more {
  margin: 0 10px !important;
  border-radius: 14px;
}

.sidebar-more {
  margin: 0 !important;
}

.nav-more summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 13px;
  color: var(--fg, #e8eeff);
  cursor: pointer;
  list-style: none;
}

.nav-more summary::-webkit-details-marker {
  display: none;
}

.nav-more summary i {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--fg-muted, #aab3d5);
  transition: transform .18s ease;
}

.nav-more[open] summary i {
  transform: rotate(180deg);
}

.nav-more > button {
  min-height: 32px !important;
  margin: 2px 0 0 34px !important;
  padding: 6px 10px !important;
  width: calc(100% - 42px) !important;
  color: var(--fg-muted, #aab3d5) !important;
  font-size: 12px !important;
  border-radius: 10px !important;
}

.drawer-nav .nav-ico,
.sidebar-nav .nav-ico,
.nav-more .nav-ico {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 22px !important;
}

.drawer-nav .nav-ico .ui-svg,
.drawer-nav .nav-ico .platform-svg,
.sidebar-nav .nav-ico .ui-svg,
.sidebar-nav .nav-ico .platform-svg,
.nav-more .nav-ico .ui-svg {
  width: 16px !important;
  height: 16px !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-robot-wave-arm {
    animation: none !important;
  }
}

/* Elite57 avatar safety: missing platform avatars fall back to Delta/user initials, never app-logo art. */
.topbar-avatar img[data-broken],
.elite-avatar-btn img[data-broken],
.post-avatar img[data-broken],
.creator-avatar img[data-broken],
.feed-avatar img[data-broken],
.feed-avatar-mini img[data-broken],
.community-member-preview img[data-broken],
.member-avatar img[data-broken] {
  display: none !important;
}

.topbar-avatar img[data-broken] + span,
.elite-avatar-btn img[data-broken] + span,
.post-avatar img[data-broken] + span,
.creator-avatar img[data-broken] + b,
.feed-avatar img[data-broken] + span,
.feed-avatar-mini img[data-broken] + span,
.community-member-preview img[data-broken] + b,
.member-avatar img[data-broken] + b {
  display: grid !important;
  place-items: center !important;
}

.community-member-preview i,
.member-avatar {
  width: 38px !important;
  height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
}

.community-member-preview i img,
.member-avatar img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block;
}

/* Elite57 engagement ordering: missions first, without touching claim logic. */
.engagement-tab-panel:has(.engagement-xp-hero) {
  display: flex;
  flex-direction: column;
}

.engagement-tab-panel:has(.engagement-xp-hero) .engagement-xp-hero { order: 1; }
.engagement-tab-panel:has(.engagement-xp-hero) .engagement-stat-grid { order: 2; }
.engagement-tab-panel:has(.engagement-xp-hero) .today-missions-card { order: 3; }
.engagement-tab-panel:has(.engagement-xp-hero) .retention-tools-card { order: 4; }
.engagement-tab-panel:has(.engagement-xp-hero) .season-pass-card { order: 5; }
.engagement-tab-panel:has(.engagement-xp-hero) .engagement-quick-actions { order: 6; }

/* Keep all avatar images inside their intended round frames. */
.community-member-preview i,
.community-member-preview i img,
.member-avatar,
.member-avatar img,
.leaderboard-avatar,
.leaderboard-avatar img,
.podium-avatar,
.podium-avatar img,
.mini-avatar,
.mini-avatar img {
  aspect-ratio: 1 / 1;
}

.leaderboard-row-elite {
  min-height: 58px;
}

.studio-image-showcase,
.studio-schedule-guide {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 155, 61, .28);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 155, 61, .30), transparent 30%),
    radial-gradient(circle at 95% 18%, rgba(72, 130, 255, .22), transparent 42%),
    linear-gradient(135deg, rgba(19, 28, 59, .96), rgba(10, 13, 32, .94));
}

.studio-image-showcase::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -42px;
  width: 160px;
  height: 100px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 184, 106, .36), rgba(255, 155, 61, 0) 68%);
  pointer-events: none;
}

.studio-image-emblem {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  box-shadow: 0 0 24px rgba(255, 155, 61, .34);
}

.studio-image-showcase small,
.studio-schedule-guide small {
  color: rgba(210, 218, 246, .74);
  font-size: 10.5px;
}

.studio-image-showcase > div small {
  display: block;
  color: #ffb35e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.studio-image-showcase strong,
.studio-schedule-guide strong {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 1.16;
}

.studio-image-showcase p {
  margin: 4px 0 0;
  color: rgba(210, 218, 246, .72);
  font-size: 10.5px;
  line-height: 1.32;
}

.studio-schedule-guide {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  margin-top: 10px;
}

.studio-schedule-guide > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #ffb35e;
  background: rgba(255, 155, 61, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 184, 106, .20);
}

.studio-schedule-guide button {
  border: 1px solid rgba(255, 155, 61, .46);
  border-radius: 999px;
  padding: 9px 12px;
  color: #ffd39a;
  font-weight: 900;
  background: rgba(255, 155, 61, .12);
}