html,
body {
  min-height: 100%;
  background:
    radial-gradient(circle at top right, rgba(46,156,255,.16), transparent 28%),
    radial-gradient(circle at left bottom, rgba(83,140,255,.12), transparent 24%),
    linear-gradient(180deg, #173356 0%, #1d3e66 46%, #14304f 100%) fixed;
  color: var(--ff-text);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

:root {
  --ff-bg: #153252;
  --ff-bg-elevated: #1a3a5f;
  --ff-bg-panel: #21466f;
  --ff-bg-soft: rgba(170, 215, 255, 0.08);
  --ff-surface: linear-gradient(180deg, rgba(22,41,64,0.96) 0%, rgba(15,30,49,0.96) 100%);
  --ff-surface-strong: linear-gradient(180deg, rgba(28,49,75,0.98) 0%, rgba(18,34,56,0.98) 100%);
  --ff-surface-soft: rgba(255,255,255,0.06);
  --ff-surface-muted: rgba(255,255,255,0.04);
  --ff-border: rgba(203, 232, 255, 0.28);
  --ff-border-strong: rgba(221, 239, 255, 0.42);
  --ff-text: #f7fbff;
  --ff-text-strong: #ffffff;
  --ff-text-muted: rgba(245, 250, 255, 0.92);
  --ff-text-soft: rgba(229, 240, 251, 0.78);
  --ff-text-faint: rgba(220, 234, 249, 0.42);
  --ff-accent: #2e9cff;
  --ff-accent-strong: #56adff;
  --ff-accent-soft: rgba(46, 156, 255, 0.18);
  --ff-success: #30d77d;
  --ff-warning: #ffbd4d;
  --ff-danger: #ff6776;
  --ff-shadow: 0 20px 50px rgba(2, 10, 21, 0.34);
  --ff-shadow-soft: 0 12px 30px rgba(2, 10, 21, 0.22);
  --ff-radius-xs: 12px;
  --ff-radius-sm: 16px;
  --ff-radius-md: 20px;
  --ff-radius-lg: 26px;
  --ff-space-1: 8px;
  --ff-space-2: 12px;
  --ff-space-3: 16px;
  --ff-space-4: 20px;
  --ff-space-5: 24px;
  --ff-space-6: 32px;
  --ff-space-7: 40px;
  --ff-shell-max: 1120px;
  --ff-nav-h: 66px;
  --ff-tab-h: 74px;
  --ff-page-pad-x: 18px;
  --ff-page-pad-top: 92px;
  --ff-page-pad-bottom: 118px;
  --ff-fs-hero: clamp(2.5rem, 7vw, 3rem);
  --ff-fs-h1: clamp(2rem, 5.5vw, 2.35rem);
  --ff-fs-h2: clamp(1.55rem, 4.6vw, 1.9rem);
  --ff-fs-h3: 1.2rem;
  --ff-fs-body: 1.05rem;
  --ff-fs-body-sm: 0.98rem;
  --ff-fs-caption: 0.9rem;
  --ff-line-body: 1.62;
}

html.ff-ui-on,
html.ff-ui-on body {
  min-height: 100%;
  background:
    radial-gradient(circle at top right, rgba(46,156,255,.16), transparent 28%),
    radial-gradient(circle at left bottom, rgba(83,140,255,.12), transparent 24%),
    linear-gradient(180deg, #0d1d31 0%, #132742 46%, #0e1c30 100%) fixed !important;
  color: var(--ff-text) !important;
}

body.ff-ui-ready {
  color: var(--ff-text);
  font-size: var(--ff-fs-body);
  line-height: var(--ff-line-body);
  letter-spacing: -0.01em;
}

body.ff-ui-ready,
body.ff-ui-ready * {
  scrollbar-color: rgba(173, 213, 255, 0.45) transparent;
}

body.ff-ui-ready ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ff-ui-ready ::-webkit-scrollbar-thumb {
  background: rgba(173, 213, 255, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

body.ff-ui-ready .shell,
body.ff-ui-ready .layout,
body.ff-ui-ready .main,
body.ff-ui-ready .main-wrap,
body.ff-ui-ready .page,
body.ff-ui-ready .page-wrap,
body.ff-ui-ready .hw,
body.ff-ui-ready .s-wrap,
body.ff-ui-ready .p-wrap,
body.ff-ui-ready .ci-wrap,
body.ff-ui-ready .community-page,
body.ff-ui-ready .profile-page,
body.ff-ui-ready .home-wrap,
body.ff-ui-ready .chat-shell {
  background: transparent !important;
}

body.ff-ui-ready h1,
body.ff-ui-ready .gate-title,
body.ff-ui-ready .hero-name,
body.ff-ui-ready .step-title,
body.ff-ui-ready .auth-title,
body.ff-ui-ready .hero h1,
body.ff-ui-ready .title-xl {
  font-size: var(--ff-fs-hero) !important;
  line-height: 1.05 !important;
  color: var(--ff-text-strong) !important;
  letter-spacing: -0.04em !important;
  font-weight: 800 !important;
}

body.ff-ui-ready h2,
body.ff-ui-ready .page-title,
body.ff-ui-ready .hero-title,
body.ff-ui-ready .comm-name,
body.ff-ui-ready .p-name,
body.ff-ui-ready .chat-title,
body.ff-ui-ready .hero-name-small,
body.ff-ui-ready .section-heading {
  font-size: var(--ff-fs-h2) !important;
  line-height: 1.14 !important;
  color: var(--ff-text-strong) !important;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
}

body.ff-ui-ready h3,
body.ff-ui-ready .title,
body.ff-ui-ready .ph-title,
body.ff-ui-ready .sec-title,
body.ff-ui-ready .section-title,
body.ff-ui-ready .drawer-user-name,
body.ff-ui-ready .ib-title,
body.ff-ui-ready .nc-title,
body.ff-ui-ready .rc-name,
body.ff-ui-ready .city-name,
body.ff-ui-ready .name,
body.ff-ui-ready .comm-name {
  font-size: var(--ff-fs-h3) !important;
  line-height: 1.25 !important;
  color: var(--ff-text-strong) !important;
  font-weight: 800 !important;
}

body.ff-ui-ready,
body.ff-ui-ready p,
body.ff-ui-ready li,
body.ff-ui-ready .comm-desc,
body.ff-ui-ready .step-sub,
body.ff-ui-ready .auth-sub,
body.ff-ui-ready .gate-sub,
body.ff-ui-ready .sub,
body.ff-ui-ready .chat-sub,
body.ff-ui-ready .hero p,
body.ff-ui-ready .info-text,
body.ff-ui-ready .body-copy {
  font-size: var(--ff-fs-body) !important;
  color: var(--ff-text-muted) !important;
}

body.ff-ui-ready .muted,
body.ff-ui-ready .helper,
body.ff-ui-ready .hint,
body.ff-ui-ready .field-hint,
body.ff-ui-ready .g-hint,
body.ff-ui-ready .auth-hint,
body.ff-ui-ready .hero-greeting,
body.ff-ui-ready .home-label,
body.ff-ui-ready .ib-sub,
body.ff-ui-ready .nc-sub,
body.ff-ui-ready .rc-meta,
body.ff-ui-ready .chat-sub,
body.ff-ui-ready .time,
body.ff-ui-ready .meta,
body.ff-ui-ready .comm-meta,
body.ff-ui-ready .city-meta,
body.ff-ui-ready .drawer-user-role,
body.ff-ui-ready .gate-wordmark,
body.ff-ui-ready .auth-switch,
body.ff-ui-ready .auth-div-text,
body.ff-ui-ready .gate-divider-text,
body.ff-ui-ready .g-label,
body.ff-ui-ready label,
body.ff-ui-ready .step-eyebrow,
body.ff-ui-ready .gate-eyebrow,
body.ff-ui-ready .section-kicker,
body.ff-ui-ready .eyebrow {
  color: var(--ff-text-soft) !important;
  font-size: var(--ff-fs-body-sm) !important;
}

body.ff-ui-ready .top-nav,
body.ff-ui-ready .page-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 90 !important;
  display: flex !important;
  align-items: center !important;
  min-height: var(--ff-nav-h) !important;
  padding: max(10px, env(safe-area-inset-top)) var(--ff-page-pad-x) 10px !important;
  background: rgba(17, 42, 69, 0.94) !important;
  border-bottom: 1px solid var(--ff-border) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}

body.ff-ui-ready .top-nav-brand,
body.ff-ui-ready .ff-brand {
  min-height: 44px;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: var(--ff-text-strong) !important;
}

body.ff-ui-ready .ff-brand-mark,
body.ff-ui-ready .top-nav-brand .ff-brand-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 18px rgba(46,156,255,.22));
}

body.ff-ui-ready .ff-brand-wordmark {
  display: inline-flex;
  gap: 2px;
  align-items: baseline;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

body.ff-ui-ready .ff-brand-ff { color: #95d4ff; }
body.ff-ui-ready .ff-brand-lover { color: var(--ff-text-strong); }

body.ff-ui-ready .top-nav-right,
body.ff-ui-ready .nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
}

body.ff-ui-ready .hamburger,
body.ff-ui-ready .top-nav-contact-btn,
body.ff-ui-ready .ph-back,
body.ff-ui-ready .icon-btn,
body.ff-ui-ready .closex,
body.ff-ui-ready .btn-back {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 16px !important;
  border: 1px solid var(--ff-border) !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--ff-text-strong) !important;
  box-shadow: none !important;
}

body.ff-ui-ready .hamburger span {
  width: 22px !important;
  height: 2px !important;
  background: rgba(246,251,255,0.94) !important;
}

body.ff-ui-ready .top-nav-contact-btn svg,
body.ff-ui-ready .tab-item svg,
body.ff-ui-ready .drawer-nav-icon svg,
body.ff-ui-ready .drawer-link-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor;
  fill: none;
}

body.ff-ui-ready .bottom-tabs {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 92 !important;
  display: flex !important;
  align-items: stretch !important;
  min-height: var(--ff-tab-h) !important;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom)) !important;
  background: rgba(16, 39, 63, 0.97) !important;
  border-top: 1px solid var(--ff-border) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  box-shadow: 0 -12px 24px rgba(0,0,0,.16);
}

body.ff-ui-ready .tab-item {
  position: relative;
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 58px !important;
  padding: 8px 6px !important;
  border-radius: 18px !important;
  color: var(--ff-text-soft) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

body.ff-ui-ready .tab-item.active,
body.ff-ui-ready .tab-item:hover {
  color: var(--ff-text-strong) !important;
  background: rgba(46, 156, 255, 0.14) !important;
}

body.ff-ui-ready .tab-item.active::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 30px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, #9ad8ff, #2e9cff);
}

body.ff-ui-ready .tab-label { font-size: 0.84rem !important; font-weight: 700 !important; }
body.ff-ui-ready .tab-badge {
  position: absolute;
  top: -5px;
  right: -10px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: linear-gradient(180deg, #46a8ff, #2288ef);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.ff-ui-ready .drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 98 !important;
  background: rgba(2, 8, 18, 0.62) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .22s ease !important;
}
body.ff-ui-ready .drawer-overlay.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.ff-ui-ready .nav-drawer {
  position: fixed !important;
  top: 0 !important;
  left: -320px !important;
  bottom: 0 !important;
  width: min(86vw, 320px) !important;
  z-index: 99 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--ff-surface-strong) !important;
  border-right: 1px solid var(--ff-border-strong) !important;
  box-shadow: 18px 0 44px rgba(1, 8, 20, 0.42) !important;
  transition: left .22s ease !important;
  overflow: hidden !important;
}
body.ff-ui-ready .nav-drawer.open { left: 0 !important; }

body.ff-ui-ready .drawer-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: calc(env(safe-area-inset-top) + 22px) 18px 18px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03) !important;
}

body.ff-ui-ready .drawer-user-av {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  border: 1px solid var(--ff-border) !important;
  background: rgba(255,255,255,0.08) !important;
  color: var(--ff-text-strong) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
}

body.ff-ui-ready .drawer-nav,
body.ff-ui-ready .drawer-mount {
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: auto !important;
}

body.ff-ui-ready .drawer-nav-item,
body.ff-ui-ready .drawer-link,
body.ff-ui-ready .drawer-logout,
body.ff-ui-ready .drawer-signout-btn {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 54px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ff-text-muted) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

body.ff-ui-ready .drawer-nav-item.active,
body.ff-ui-ready .drawer-link.active,
body.ff-ui-ready .drawer-nav-item:hover,
body.ff-ui-ready .drawer-link:hover {
  background: rgba(46,156,255,.14) !important;
  border-color: rgba(128, 198, 255, 0.16) !important;
  color: var(--ff-text-strong) !important;
}

body.ff-ui-ready .drawer-nav-icon,
body.ff-ui-ready .drawer-link-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.94;
}

body.ff-ui-ready .drawer-foot,
body.ff-ui-ready .drawer-signout {
  margin-top: auto !important;
  padding: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

body.ff-ui-ready .drawer-logout,
body.ff-ui-ready .drawer-signout-btn {
  width: 100% !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--ff-border) !important;
}

body.ff-ui-ready .page,
body.ff-ui-ready .hw,
body.ff-ui-ready .s-wrap,
body.ff-ui-ready .p-wrap,
body.ff-ui-ready .ci-wrap,
body.ff-ui-ready .ff-page-content {
  max-width: var(--ff-shell-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: var(--ff-page-pad-top) !important;
  padding-right: var(--ff-page-pad-x) !important;
  padding-left: var(--ff-page-pad-x) !important;
  padding-bottom: var(--ff-page-pad-bottom) !important;
}

body.ff-ui-ready .hero,
body.ff-ui-ready .sec,
body.ff-ui-ready .card,
body.ff-ui-ready .hero-card,
body.ff-ui-ready .p-card,
body.ff-ui-ready .p-section,
body.ff-ui-ready .community-card,
body.ff-ui-ready .contact-card,
body.ff-ui-ready .create-card,
body.ff-ui-ready .gen-card,
body.ff-ui-ready .code-table-wrap,
body.ff-ui-ready .result-card,
body.ff-ui-ready .city-item,
body.ff-ui-ready .comm-card,
body.ff-ui-ready .person-card,
body.ff-ui-ready .see-more-card,
body.ff-ui-ready .sheet,
body.ff-ui-ready .modal-card,
body.ff-ui-ready .recent-card,
body.ff-ui-ready .ac,
body.ff-ui-ready .nc,
body.ff-ui-ready .widget,
body.ff-ui-ready .stat-card,
body.ff-ui-ready .item,
body.ff-ui-ready .conv-item,
body.ff-ui-ready .bubble,
body.ff-ui-ready .system-card,
body.ff-ui-ready .travel-card,
body.ff-ui-ready .share-card,
body.ff-ui-ready .contact-field,
body.ff-ui-ready .priv-row,
body.ff-ui-ready .ch-card,
body.ff-ui-ready .invite-banner,
body.ff-ui-ready .empty-card,
body.ff-ui-ready .sidebar,
body.ff-ui-ready .sidebar-head,
body.ff-ui-ready .mode-row,
body.ff-ui-ready .chat-head,
body.ff-ui-ready .composer,
body.ff-ui-ready .banner,
body.ff-ui-ready .community-preview,
body.ff-ui-ready .group-card,
body.ff-ui-ready .city-card,
body.ff-ui-ready .search-card,
body.ff-ui-ready .surface,
body.ff-ui-ready .panel,
body.ff-ui-ready .list-card,
body.ff-ui-ready .notif-card,
body.ff-ui-ready .info-card,
body.ff-ui-ready .member-card,
body.ff-ui-ready .stat-pill,
body.ff-ui-ready .sidebar,
body.ff-ui-ready .empty,
body.ff-ui-ready .age-warn,
body.ff-ui-ready .member-login,
body.ff-ui-ready .invite-link,
body.ff-ui-ready .auth-card,
body.ff-ui-ready .gate,
body.ff-ui-ready .reg-card {
  background: var(--ff-surface) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: var(--ff-radius-md) !important;
  box-shadow: var(--ff-shadow-soft) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

body.ff-ui-ready .hero,
body.ff-ui-ready .sec,
body.ff-ui-ready .gate,
body.ff-ui-ready .auth-card,
body.ff-ui-ready .reg-card,
body.ff-ui-ready .sheet,
body.ff-ui-ready .sidebar {
  border-radius: var(--ff-radius-lg) !important;
}

body.ff-ui-ready .result-card,
body.ff-ui-ready .city-item,
body.ff-ui-ready .comm-card,
body.ff-ui-ready .person-card,
body.ff-ui-ready .see-more-card,
body.ff-ui-ready .recent-card,
body.ff-ui-ready .ac,
body.ff-ui-ready .nc,
body.ff-ui-ready .item,
body.ff-ui-ready .conv-item,
body.ff-ui-ready .contact-field,
body.ff-ui-ready .list-card,
body.ff-ui-ready .member-card,
body.ff-ui-ready .stat-pill {
  background: rgba(255,255,255,0.055) !important;
}

body.ff-ui-ready .hero,
body.ff-ui-ready .sec,
body.ff-ui-ready .gate,
body.ff-ui-ready .auth-card,
body.ff-ui-ready .reg-card,
body.ff-ui-ready .sheet {
  padding: 22px !important;
}

body.ff-ui-ready .search-grid,
body.ff-ui-ready .community-grid,
body.ff-ui-ready .map-shell,
body.ff-ui-ready .form-grid {
  gap: 18px !important;
}

body.ff-ui-ready .filters,
body.ff-ui-ready .row,
body.ff-ui-ready .switch,
body.ff-ui-ready .mode-row {
  gap: 10px !important;
}

body.ff-ui-ready input,
body.ff-ui-ready textarea,
body.ff-ui-ready select,
body.ff-ui-ready .input,
body.ff-ui-ready .inputx,
body.ff-ui-ready .selectx,
body.ff-ui-ready .g-input,
body.ff-ui-ready .search-input,
body.ff-ui-ready .search-inp,
body.ff-ui-ready .ch-input,
body.ff-ui-ready .msg-input,
body.ff-ui-ready .contact-input,
body.ff-ui-ready .country-select,
body.ff-ui-ready .composer textarea {
  width: 100%;
  min-height: 56px !important;
  padding: 15px 16px !important;
  border-radius: 16px !important;
  border: 1px solid var(--ff-border) !important;
  background: rgba(255,255,255,0.07) !important;
  color: var(--ff-text-strong) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}

body.ff-ui-ready input::placeholder,
body.ff-ui-ready textarea::placeholder,
body.ff-ui-ready select::placeholder,
body.ff-ui-ready .input::placeholder,
body.ff-ui-ready .inputx::placeholder,
body.ff-ui-ready .search-input::placeholder,
body.ff-ui-ready .search-inp::placeholder,
body.ff-ui-ready .contact-input::placeholder {
  color: rgba(230, 241, 252, 0.45) !important;
}

body.ff-ui-ready input:focus,
body.ff-ui-ready textarea:focus,
body.ff-ui-ready select:focus,
body.ff-ui-ready .input:focus,
body.ff-ui-ready .inputx:focus,
body.ff-ui-ready .selectx:focus,
body.ff-ui-ready .g-input:focus,
body.ff-ui-ready .search-input:focus,
body.ff-ui-ready .search-inp:focus,
body.ff-ui-ready .ch-input:focus,
body.ff-ui-ready .msg-input:focus,
body.ff-ui-ready .contact-input:focus,
body.ff-ui-ready .country-select:focus,
body.ff-ui-ready .composer textarea:focus {
  outline: none !important;
  border-color: rgba(112, 191, 255, 0.8) !important;
  background: rgba(255,255,255,0.09) !important;
  box-shadow: 0 0 0 4px rgba(46,156,255,.14) !important;
}

body.ff-ui-ready button,
body.ff-ui-ready .primary-btn,
body.ff-ui-ready .ghost-btn,
body.ff-ui-ready .join-btn,
body.ff-ui-ready .create-btn,
body.ff-ui-ready .mini-btn,
body.ff-ui-ready .chip2,
body.ff-ui-ready .btn-g-primary,
body.ff-ui-ready .btn-glass,
body.ff-ui-ready .btn-glass-primary,
body.ff-ui-ready .btn-glass-ghost,
body.ff-ui-ready .ph-action,
body.ff-ui-ready .mode-btn,
body.ff-ui-ready .save-btn,
body.ff-ui-ready .drawer-signout-btn {
  min-height: 52px !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

body.ff-ui-ready .join-btn,
body.ff-ui-ready .create-btn,
body.ff-ui-ready .primary-btn,
body.ff-ui-ready .btn-g-primary,
body.ff-ui-ready .btn-glass-primary,
body.ff-ui-ready .ph-action,
body.ff-ui-ready .mode-btn.active,
body.ff-ui-ready .chip2.on,
body.ff-ui-ready .tab-item.active {
  background: linear-gradient(180deg, #46a8ff, #2288ef) !important;
  border-color: rgba(168, 220, 255, 0.32) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(33, 135, 236, 0.24) !important;
}

body.ff-ui-ready .ghost-btn,
body.ff-ui-ready .mini-btn,
body.ff-ui-ready .chip2,
body.ff-ui-ready .btn-glass-ghost,
body.ff-ui-ready .mode-btn {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid var(--ff-border) !important;
  color: var(--ff-text-muted) !important;
}

body.ff-ui-ready .badge,
body.ff-ui-ready .b-public,
body.ff-ui-ready .b-private,
body.ff-ui-ready .role-pill,
body.ff-ui-ready .stat-badge {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .76rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
}

body.ff-ui-ready .b-public { background: rgba(46,156,255,.16) !important; color: #b6dbff !important; border: 1px solid rgba(46,156,255,.22) !important; }
body.ff-ui-ready .b-private { background: rgba(48,215,125,.14) !important; color: #baf8d8 !important; border: 1px solid rgba(48,215,125,.22) !important; }

body.ff-ui-ready .overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 95 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom)) !important;
  background: rgba(2,8,18,.68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
body.ff-ui-ready .overlay.show { display: flex !important; }
body.ff-ui-ready .sheet {
  width: min(760px, 100%) !important;
  max-height: min(88dvh, 920px) !important;
  overflow: auto !important;
}

body.ff-ui-ready .sheet-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

body.ff-ui-ready .empty {
  padding: 20px !important;
  border-style: dashed !important;
  color: var(--ff-text-soft) !important;
}

body.ff-ui-ready .world {
  min-height: 340px !important;
  background: radial-gradient(circle at 22% 18%, rgba(46,156,255,.22), transparent 26%), radial-gradient(circle at 72% 44%, rgba(61,112,255,.2), transparent 30%), linear-gradient(180deg, #10243b, #122138) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--ff-shadow-soft) !important;
}

body.ff-ui-ready .pin {
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(199,225,255,0.24) !important;
  color: var(--ff-text-strong) !important;
  font-size: 0.82rem !important;
}
body.ff-ui-ready .pin.on { background: rgba(46,156,255,.26) !important; }

body.ff-ui-ready .avatar,
body.ff-ui-ready .result-avatar,
body.ff-ui-ready .nav-avatar,
body.ff-ui-ready .rc-av {
  border: 1px solid rgba(199,225,255,0.18) !important;
  background: rgba(255,255,255,0.08) !important;
}

body.ff-ui-ready .sidebar,
body.ff-ui-ready .main,
body.ff-ui-ready .chat-wrap,
body.ff-ui-ready .list,
body.ff-ui-ready .top-spacer,
body.ff-ui-ready .layout {
  min-height: 0 !important;
}

body.ff-ui-ready.ff-auth-page body,
body.ff-ui-ready.ff-auth-page {
  overflow-x: hidden;
}

body.ff-ui-ready.ff-auth-page .gate,
body.ff-ui-ready.ff-auth-page .auth-card,
body.ff-ui-ready.ff-auth-page .reg-card {
  max-width: 460px !important;
  margin-inline: auto !important;
  padding: 32px 28px !important;
  background: linear-gradient(180deg, rgba(20,35,57,0.94) 0%, rgba(16,30,48,0.98) 100%) !important;
}

body.ff-ui-ready.ff-auth-page .gate-sub,
body.ff-ui-ready.ff-auth-page .auth-sub,
body.ff-ui-ready.ff-auth-page .step-sub {
  max-width: 33ch;
  margin-left: auto;
  margin-right: auto;
}

body.ff-ui-ready.ff-auth-page .btn-glass,
body.ff-ui-ready.ff-auth-page .btn-g-primary,
body.ff-ui-ready.ff-auth-page .btn-glass-primary,
body.ff-ui-ready.ff-auth-page .btn-glass-ghost {
  min-height: 56px !important;
}

body.ff-ui-ready.ff-page-profile .page-header,
body.ff-ui-ready.ff-page-settings .page-header,
body.ff-ui-ready.ff-page-contacts .page-header {
  z-index: 91 !important;
}

body.ff-ui-ready.ff-page-chat .shell {
  padding-bottom: calc(var(--ff-tab-h) + env(safe-area-inset-bottom)) !important;
}

body.ff-ui-ready.ff-page-chat .sidebar,
body.ff-ui-ready.ff-page-chat .main,
body.ff-ui-ready.ff-page-chat .composer,
body.ff-ui-ready.ff-page-chat .chat-head {
  border-radius: 0 !important;
}

body.ff-ui-ready.ff-page-chat .sidebar,
body.ff-ui-ready.ff-page-chat .chat-head,
body.ff-ui-ready.ff-page-chat .composer {
  background: rgba(255,255,255,0.05) !important;
}

body.ff-ui-ready.ff-page-chat .layout {
  padding-top: var(--ff-page-pad-top) !important;
  padding-bottom: var(--ff-page-pad-bottom) !important;
}

body.ff-ui-ready.ff-page-chat .sidebar-head,
body.ff-ui-ready.ff-page-chat .mode-row,
body.ff-ui-ready.ff-page-chat .chat-head,
body.ff-ui-ready.ff-page-chat .composer {
  border-color: var(--ff-border) !important;
}

body.ff-ui-ready.ff-page-chat .list,
body.ff-ui-ready.ff-page-chat .messages {
  padding: 12px !important;
}

body.ff-ui-ready .ff-save-btn { min-width: 132px; }
body.ff-ui-ready.ff-lock-scroll { overflow: hidden !important; }

body.ff-ui-ready .field,
body.ff-ui-ready .g-field,
body.ff-ui-ready .form-row,
body.ff-ui-ready .ch-row,
body.ff-ui-ready .create-row,
body.ff-ui-ready .gen-row,
body.ff-ui-ready .req-top,
body.ff-ui-ready .req-actions,
body.ff-ui-ready .approvals-row,
body.ff-ui-ready .settings-tabs,
body.ff-ui-ready .code-row-item {
  gap: 12px !important;
}

body.ff-ui-ready .field,
body.ff-ui-ready .g-field,
body.ff-ui-ready .contact-field,
body.ff-ui-ready .priv-row,
body.ff-ui-ready .ch-card,
body.ff-ui-ready .req-card,
body.ff-ui-ready .hist-item,
body.ff-ui-ready .code-row-item,
body.ff-ui-ready .create-card,
body.ff-ui-ready .gen-card,
body.ff-ui-ready .s-sect,
body.ff-ui-ready .p-section {
  margin-bottom: 14px !important;
}

body.ff-ui-ready .field-label,
body.ff-ui-ready .g-label,
body.ff-ui-ready .contact-label,
body.ff-ui-ready .code-label {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
}

body.ff-ui-ready .settings-tabs,
body.ff-ui-ready .inv-tabs {
  scrollbar-width: none;
}
body.ff-ui-ready .settings-tabs::-webkit-scrollbar,
body.ff-ui-ready .inv-tabs::-webkit-scrollbar {
  display: none;
}

body.ff-ui-ready .modal,
body.ff-ui-ready .sheet,
body.ff-ui-ready .overlay {
  overscroll-behavior: contain;
}

body.ff-ui-ready .modal.show,
body.ff-ui-ready .overlay.show {
  display: flex !important;
}

body.ff-ui-ready .sheet,
body.ff-ui-ready .modal-card {
  width: min(760px, 100%) !important;
  max-width: 100% !important;
}

body.ff-ui-ready .contact-field {
  align-items: center !important;
  flex-wrap: wrap !important;
}

body.ff-ui-ready .contact-input,
body.ff-ui-ready .ch-input,
body.ff-ui-ready .country-select {
  min-width: 0 !important;
}

body.ff-ui-ready .create-row > *,
body.ff-ui-ready .gen-row > *,
body.ff-ui-ready .req-actions > * {
  min-width: 0;
}

body.ff-ui-ready .code-box,
body.ff-ui-ready .req-top,
body.ff-ui-ready .create-row,
body.ff-ui-ready .gen-row {
  flex-wrap: wrap !important;
}

body.ff-ui-ready .code-display,
body.ff-ui-ready .code-mono {
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.ff-ui-ready .composer,
body.ff-ui-ready .sheet,
body.ff-ui-ready .page-header,
body.ff-ui-ready .top-nav,
body.ff-ui-ready .bottom-tabs {
  padding-left: max(var(--ff-page-pad-x), env(safe-area-inset-left)) !important;
  padding-right: max(var(--ff-page-pad-x), env(safe-area-inset-right)) !important;
}

body.ff-ui-ready input,
body.ff-ui-ready textarea,
body.ff-ui-ready select,
body.ff-ui-ready button {
  touch-action: manipulation;
}


@media (max-width: 860px) {
  :root {
    --ff-page-pad-x: 16px;
    --ff-page-pad-top: 88px;
    --ff-page-pad-bottom: 116px;
    --ff-fs-body: 1rem;
    --ff-fs-body-sm: 0.94rem;
  }
  body.ff-ui-ready .community-grid,
  body.ff-ui-ready .search-grid,
  body.ff-ui-ready .map-shell,
  body.ff-ui-ready .form-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  :root {
    --ff-shell-max: 100%;
    --ff-fs-h3: 1.08rem;
    --ff-page-pad-x: 14px;
    --ff-page-pad-top: 84px;
    --ff-page-pad-bottom: 120px;
  }
  body.ff-ui-ready .hero,
  body.ff-ui-ready .sec,
  body.ff-ui-ready .sheet,
  body.ff-ui-ready .gate,
  body.ff-ui-ready .auth-card,
  body.ff-ui-ready .reg-card {
    padding: 18px !important;
    border-radius: 22px !important;
  }
  body.ff-ui-ready .preview-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.ff-ui-ready .nav-drawer { width: min(90vw, 320px) !important; }
  body.ff-ui-ready .role-grid,
  body.ff-ui-ready .exp-grid,
  body.ff-ui-ready .code-row,
  body.ff-ui-ready .privacy-grid,
  body.ff-ui-ready .travel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.ff-ui-ready .create-row,
  body.ff-ui-ready .gen-row,
  body.ff-ui-ready .req-top,
  body.ff-ui-ready .approvals-row,
  body.ff-ui-ready .code-box,
  body.ff-ui-ready .contact-field {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body.ff-ui-ready .country-select-wrap,
  body.ff-ui-ready .contact-label,
  body.ff-ui-ready .code-right,
  body.ff-ui-ready .req-right,
  body.ff-ui-ready .req-actions > *,
  body.ff-ui-ready .create-row > *,
  body.ff-ui-ready .gen-row > * {
    width: 100% !important;
  }
  body.ff-ui-ready .create-btn,
  body.ff-ui-ready .primary-btn,
  body.ff-ui-ready .btn-g-primary,
  body.ff-ui-ready .btn-glass-primary,
  body.ff-ui-ready .btn-glass-ghost,
  body.ff-ui-ready .btn-copy,
  body.ff-ui-ready .btn-approve,
  body.ff-ui-ready .btn-cancel,
  body.ff-ui-ready .ph-action,
  body.ff-ui-ready .save-btn {
    width: 100% !important;
  }
  body.ff-ui-ready .code-display {
    font-size: 1.25rem !important;
    letter-spacing: .12em !important;
  }
  body.ff-ui-ready .auth-card,
  body.ff-ui-ready .reg-card,
  body.ff-ui-ready .gate {
    margin-top: max(12px, env(safe-area-inset-top)) !important;
    margin-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-height: 760px) {
  body.ff-ui-ready.ff-auth-page {
    display: block !important;
    overflow-y: auto !important;
  }
  body.ff-ui-ready.ff-auth-page .gate,
  body.ff-ui-ready.ff-auth-page .auth-card,
  body.ff-ui-ready.ff-auth-page .reg-card {
    margin-top: max(16px, env(safe-area-inset-top)) !important;
    margin-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }
}


/* ── Final mobile-first readability uplift ───────────────────── */
body.ff-ui-ready .hamburger,
body.ff-ui-ready .top-nav-contact-btn,
body.ff-ui-ready .ph-back,
body.ff-ui-ready .icon-btn,
body.ff-ui-ready .closex,
body.ff-ui-ready .btn-back {
  background: linear-gradient(180deg, rgba(28,61,98,.92), rgba(18,40,67,.96)) !important;
  border-color: rgba(120, 198, 255, 0.32) !important;
  box-shadow: 0 12px 24px rgba(5,16,31,.26), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.ff-ui-ready .hamburger span {
  background: linear-gradient(90deg, #ffffff, #a9dbff) !important;
}

body.ff-ui-ready .top-nav-link {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: rgba(235,245,255,.74) !important;
}
body.ff-ui-ready .top-nav-link.active {
  color: #ffffff !important;
  background: rgba(46,156,255,.16) !important;
  border: 1px solid rgba(143,210,255,.18) !important;
}

body.ff-ui-ready .nav-drawer {
  background:
    radial-gradient(circle at top right, rgba(46,156,255,.18), transparent 24%),
    linear-gradient(180deg, rgba(18,38,61,.98) 0%, rgba(11,24,41,.98) 100%) !important;
}
body.ff-ui-ready .drawer-head {
  background: linear-gradient(180deg, rgba(36,72,112,.42), rgba(14,28,46,.18)) !important;
}
body.ff-ui-ready .drawer-user-name { font-size: 1.18rem !important; }
body.ff-ui-ready .drawer-user-role {
  color: rgba(173,222,255,.84) !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
}
body.ff-ui-ready .drawer-nav,
body.ff-ui-ready .drawer-mount { gap: 10px !important; }
body.ff-ui-ready .drawer-nav-item,
body.ff-ui-ready .drawer-link,
body.ff-ui-ready .drawer-logout,
body.ff-ui-ready .drawer-signout-btn {
  min-height: 58px !important;
  font-size: 1.06rem !important;
  font-weight: 800 !important;
  color: rgba(243,250,255,.82) !important;
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.04) !important;
}
body.ff-ui-ready .drawer-nav-item.active,
body.ff-ui-ready .drawer-link.active,
body.ff-ui-ready .drawer-nav-item:hover,
body.ff-ui-ready .drawer-link:hover {
  background: linear-gradient(180deg, rgba(46,156,255,.22), rgba(26,104,190,.16)) !important;
  border-color: rgba(143,210,255,.34) !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(4,12,24,.22) !important;
}
body.ff-ui-ready .drawer-nav-item.active .drawer-nav-icon,
body.ff-ui-ready .drawer-link.active .drawer-link-icon,
body.ff-ui-ready .drawer-nav-item:hover .drawer-nav-icon,
body.ff-ui-ready .drawer-link:hover .drawer-link-icon {
  color: #8fd2ff !important;
}
body.ff-ui-ready .drawer-logout,
body.ff-ui-ready .drawer-signout-btn {
  background: linear-gradient(180deg, rgba(40,93,151,.18), rgba(22,45,74,.2)) !important;
  border-color: rgba(143,210,255,.28) !important;
  color: #dff3ff !important;
}
@media (max-width: 640px) {
  body.ff-ui-ready .top-nav { padding-left: 14px !important; padding-right: 14px !important; }
  body.ff-ui-ready .top-nav-link { font-size: .96rem !important; }
  body.ff-ui-ready .drawer-nav-item,
  body.ff-ui-ready .drawer-link,
  body.ff-ui-ready .drawer-logout,
  body.ff-ui-ready .drawer-signout-btn { font-size: 1rem !important; }
}


.ff-premium-logo{display:block;width:min(100%,360px);height:auto;filter:drop-shadow(0 24px 48px rgba(46,156,255,.28));}
.ff-premium-logo--small{width:min(100%,240px);}
.ff-logo-card{display:flex;align-items:center;justify-content:center;padding:18px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(223,240,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}


body.ff-ui-ready .drawer-nav-item.active,
body.ff-ui-ready .drawer-link.active {
  background: linear-gradient(180deg,#4cb1ff,#238aff) !important;
  border-color: rgba(177,222,255,.46) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(35,138,255,.25) !important;
}
body.ff-ui-ready .drawer-nav-item.active .drawer-nav-icon,
body.ff-ui-ready .drawer-link.active .drawer-link-icon {
  color: #fff !important;
}
.ff-info-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid rgba(162,212,255,.28);background:rgba(255,255,255,.08);color:#dff1ff;font-size:11px;cursor:pointer}
.ff-info-pop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:18px;z-index:9999}
.ff-info-pop.open{display:flex}
.ff-info-card{max-width:360px;width:100%;border-radius:18px;padding:18px;background:linear-gradient(180deg,#0f2237,#17385a);border:1px solid rgba(162,212,255,.24);color:#fff;box-shadow:0 24px 48px rgba(0,0,0,.32)}
.ff-info-close{margin-left:auto;display:block;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}

/* ═══════════════════════════════════════════════════════════════
   FF LOVER — GLOBAL INFO ICON + POPUP SYSTEM
════════════════════════════════════════════════════════════════ */
.ff-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(162,212,255,.35);
  background: rgba(31,143,255,.12);
  color: #a8d8ff;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1;
}
.ff-info-btn:hover {
  background: rgba(31,143,255,.25);
  border-color: rgba(162,212,255,.6);
  color: #dff1ff;
}

.ff-info-pop {
  position: fixed; inset: 0;
  background: rgba(4,10,20,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
  animation: ffInfoFadeIn .18s ease;
}
.ff-info-pop.open { display: flex; }
@keyframes ffInfoFadeIn { from { opacity:0; } to { opacity:1; } }

.ff-info-card {
  max-width: 380px; width: 100%;
  border-radius: 22px;
  padding: 22px 20px 20px;
  background: linear-gradient(180deg,#0e2540 0%,#0b1c33 100%);
  border: 1px solid rgba(162,212,255,.22);
  color: #fff;
  box-shadow: 0 28px 56px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}
.ff-info-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.ff-info-close:hover { background: rgba(255,255,255,.16); color: #fff; }
.ff-info-title {
  font-size: 16px; font-weight: 800;
  letter-spacing: -.02em; color: #fff;
  margin-bottom: 10px;
  padding-right: 36px;
}
.ff-info-body {
  font-size: 13px; line-height: 1.68;
  color: rgba(220,238,255,.84);
}
.ff-info-body strong { color: #fff; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   GLOBAL GRADIENT THEME OVERRIDES (applied to ALL pages)
════════════════════════════════════════════════════════════════ */
html.ff-ui-on,
html.ff-ui-on body {
  background:
    radial-gradient(circle at top right, rgba(46,156,255,.14), transparent 26%),
    radial-gradient(circle at left bottom, rgba(83,140,255,.10), transparent 22%),
    linear-gradient(180deg, #0d1d31 0%, #132742 46%, #0e1c30 100%) fixed !important;
}

/* Ensure community page uses gradient too */
html.ff-ui-on body { background: transparent !important; }

/* Lock scroll when modal open */
.ff-lock-scroll { overflow: hidden !important; }

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER WITH INFO ICON
════════════════════════════════════════════════════════════════ */
.ff-sect-hd {
  display: flex; align-items: center;
  gap: 8px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   CONSISTENT CARD / SECTION STYLES
════════════════════════════════════════════════════════════════ */
.ff-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  padding: 16px;
}
.ff-card + .ff-card { margin-top: 10px; }

/* Green CTA style (Confirmed FF Friend, Already a member) */
.btn-cta-green {
  background: rgba(34,197,94,.15) !important;
  border-color: rgba(34,197,94,.4) !important;
  color: #4ade80 !important;
  box-shadow: 0 8px 20px rgba(21,128,61,.18) !important;
}
.btn-cta-green:hover {
  background: rgba(34,197,94,.22) !important;
  border-color: rgba(34,197,94,.6) !important;
}