/* WOW global readability and responsive polish layer. Loaded after page CSS. */
:root {
  --wow-ink-strong: #16263a;
  --wow-ink: #29465a;
  --wow-ink-muted: #587286;
  --wow-line: #cddfe7;
  --wow-surface: #ffffff;
  --wow-accent: #0b9c78;
  --wow-accent-dark: #08785f;
}

/* Shared light surfaces: every text-bearing surface keeps a readable contrast. */
body:not(.home-page):not(.community-page):not(.wow-play-page) {
  color: var(--wow-ink-strong);
}
.portal-page .site-shell,
.reference-layout .site-shell,
.academy-page .site-shell,
.presale-page .presale-shell {
  color: var(--wow-ink-strong);
}
.portal-page .portal-section-head span,
.portal-page .portal-section-head p,
.portal-page .portal-copy,
.portal-page .portal-card p,
.portal-page .portal-hero-copy > p:not(.portal-kicker),
.portal-page .doc-item small,
.portal-page .field-hint,
.portal-page .action-note,
.academy-page .academy-intro,
.academy-page .article-card p,
.academy-page .path-step p,
.presale-page .hero-lede,
.presale-page .field-hint {
  color: var(--wow-ink-muted) !important;
}
.portal-page .portal-section h2,
.portal-page .portal-card h3,
.portal-page .doc-item,
.portal-page .doc-item strong,
.portal-page .profile-copy h1,
.academy-page h1,
.academy-page h2,
.academy-page h3,
.presale-page h1,
.presale-page h2,
.presale-page h3 {
  color: var(--wow-ink-strong) !important;
}
.portal-page .portal-section,
.portal-page .portal-card,
.portal-page .quest-row,
.portal-page .doc-item,
.portal-page .docs-sidebar,
.portal-page .profile-card,
.academy-page .academy-section,
.academy-page .article-card,
.academy-page .featured-main,
.academy-page .featured-small,
.academy-page .path-step,
.presale-page .panel,
.presale-page .phase-card,
.presale-page .order-card {
  border-color: var(--wow-line) !important;
  background: var(--wow-surface) !important;
}

/* Header/nav: dark text on white header, green active state, no washed-out links. */
.home-page .topbar,
.reference-layout .topbar,
.portal-page .portal-topbar,
.academy-page .academy-topbar,
.presale-page .presale-topbar {
  color: var(--wow-ink-strong) !important;
  background: rgba(255, 255, 255, .97) !important;
  border-bottom: 1px solid var(--wow-line) !important;
}
.home-page .nav-links a,
.reference-layout .nav-links a,
.portal-page .nav-links a,
.academy-page .nav-links a,
.presale-page .presale-tabs a,
.home-page .brand-copy strong,
.reference-layout .brand-copy strong,
.portal-page .brand-copy strong,
.academy-page .brand-copy strong {
  color: var(--wow-ink-strong) !important;
  text-shadow: none !important;
}
.home-page .nav-links a:hover,
.home-page .nav-links a.active,
.reference-layout .nav-links a:hover,
.reference-layout .nav-links a.active,
.portal-page .nav-links a:hover,
.portal-page .nav-links a.active,
.academy-page .nav-links a:hover,
.academy-page .nav-links a.active,
.presale-page .presale-tabs a:hover,
.presale-page .presale-tabs a.active {
  color: var(--wow-accent-dark) !important;
}
.home-page .nav-more-btn,
.nav-more-btn,
.reference-layout .nav-more-btn,
.portal-page .nav-more-btn,
.academy-page .nav-more-btn {
  color: var(--wow-ink-strong) !important;
  background: #f2f8fa !important;
  border-color: #9fc4d0 !important;
}
.nav-more-btn:hover,
.nav-more-btn[aria-expanded="true"] {
  color: #fff !important;
  background: var(--wow-accent) !important;
  border-color: var(--wow-accent) !important;
}
.home-page .nav-more-menu,
.nav-more-menu,
.reference-layout .nav-more-menu,
.portal-page .nav-more-menu,
.academy-page .nav-more-menu {
  z-index: 1000 !important;
  color: var(--wow-ink-strong) !important;
  background: #fff !important;
  border: 1px solid var(--wow-line) !important;
  box-shadow: 0 18px 42px rgba(27, 61, 79, .18) !important;
}
.home-page .nav-more-menu a,
.nav-more-menu a,
.reference-layout .nav-more-menu a,
.portal-page .nav-more-menu a,
.academy-page .nav-more-menu a {
  color: var(--wow-ink-strong) !important;
}
.nav-more-menu a:hover,
.nav-more-menu a.active {
  color: var(--wow-accent-dark) !important;
  background: #eaf8f4 !important;
}

/* Header action controls and mobile menu must never use pale text on pale buttons. */
.home-page .menu-toggle,
.home-page .language,
.reference-layout .menu-toggle,
.portal-page .menu-toggle,
.academy-page .menu-toggle,
.reference-layout .language,
.portal-page .language,
.academy-page .language,
.portal-page .portal-wallet-button,
.reference-layout .portal-wallet-button {
  color: var(--wow-ink-strong) !important;
  background: #fff !important;
  border: 1px solid #a8c7d2 !important;
}
.home-page .menu-toggle span,
.reference-layout .menu-toggle span,
.portal-page .menu-toggle span,
.academy-page .menu-toggle span { background: var(--wow-ink-strong) !important; }

/* Older mobile drawer styles were dark-on-dark after the light theme loaded. */
@media (max-width: 760px) {
  .home-page .nav-links,
  .reference-layout .nav-links,
  .portal-page .nav-links,
  .academy-page .nav-links,
  .presale-page .presale-tabs {
    color: var(--wow-ink-strong) !important;
    background: #fff !important;
    border-color: var(--wow-line) !important;
    box-shadow: 0 18px 40px rgba(29, 63, 81, .16) !important;
  }
  .home-page .nav-links a,
  .reference-layout .nav-links a,
  .portal-page .nav-links a,
  .academy-page .nav-links a,
  .presale-page .presale-tabs a {
    display: flex !important;
    color: var(--wow-ink-strong) !important;
    background: #f5f9fb !important;
    border-color: #d7e5eb !important;
  }
  .home-page .nav-links a.active,
  .reference-layout .nav-links a.active,
  .portal-page .nav-links a.active,
  .academy-page .nav-links a.active,
  .presale-page .presale-tabs a.active {
    color: #fff !important;
    background: var(--wow-accent) !important;
    border-color: var(--wow-accent) !important;
  }
}

/* Footer and bottom navigation: readable labels and stable active state. */
.reference-layout .footer,
.portal-page .footer,
.academy-page .footer,
.presale-page .footer {
  color: var(--wow-ink-strong) !important;
  background: #fff !important;
  border-top: 1px solid var(--wow-line) !important;
}
.reference-layout .footer .brand-copy small,
.portal-page .footer .brand-copy small,
.academy-page .footer .brand-copy small,
.reference-layout .footer-links a,
.portal-page .footer-links a,
.academy-page .footer-links a {
  color: var(--wow-ink-muted) !important;
}
.reference-layout .footer-links a:hover,
.portal-page .footer-links a:hover,
.academy-page .footer-links a:hover { color: var(--wow-accent-dark) !important; }
.reference-layout .mobile-bottom-nav,
.portal-page .mobile-bottom-nav,
.academy-page .mobile-bottom-nav,
.presale-page .mobile-bottom-nav {
  color: var(--wow-ink-strong) !important;
  background: rgba(255,255,255,.98) !important;
  border-top: 1px solid var(--wow-line) !important;
}
.reference-layout .mobile-bottom-nav a,
.portal-page .mobile-bottom-nav a,
.academy-page .mobile-bottom-nav a,
.presale-page .mobile-bottom-nav a { color: var(--wow-ink-muted) !important; }
.reference-layout .mobile-bottom-nav a.active,
.portal-page .mobile-bottom-nav a.active,
.academy-page .mobile-bottom-nav a.active,
.presale-page .mobile-bottom-nav a.active { color: var(--wow-accent-dark) !important; }

/* The newly designed community/play pages keep their intentionally dark/light palettes. */
.community-page .mobile-bottom-nav a.active,
.wow-play-page .mobile-bottom-nav a.active { color: #08785f !important; }

/* One product dock across every core page. Desktop users get the same routes as mobile. */
.mobile-bottom-nav {
  --dock-accent: #0b9c78;
  --dock-accent-soft: #e7f8f3;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.mobile-bottom-nav a {
  position: relative;
  min-width: 0;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.mobile-bottom-nav a > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-family: system-ui, sans-serif;
  font-size: 17px !important;
  font-weight: 800;
  line-height: 1;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mobile-bottom-nav a > b {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.mobile-bottom-nav a.active > span {
  color: #fff;
  background: linear-gradient(135deg, #0b9c78, #2cc7ae);
  box-shadow: 0 7px 16px rgba(11, 156, 120, .24);
}

/* ===== 五层生态架构卡片布局修复 ===== */
/* 问题：home.min.css 中 .connect-grid.five-layers 在 1500px 以下为 6 列，
   且卡片右侧预留 156px 给图片，内容区被压到 10~50px，中文换行后呈“竖排文字”。
   修复：5 列 + 图片移到底部居中 + 文字区恢复正常宽度。
   使用 .home-page 前缀提升特异性，压过 home.min.css / light-theme.css 的同名规则。 */
.home-page .connect-grid.five-layers {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.home-page .connect-grid.five-layers .connect-card {
  min-width: 0;
  min-height: 240px;
  padding: 22px 22px 150px 22px !important;
}
.home-page .connect-grid.five-layers .connect-card p {
  word-break: normal;
  overflow-wrap: break-word;
  min-width: 0;
}
.home-page .connect-grid.five-layers .connect-card img {
  position: absolute;
  right: auto !important;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  margin: 0;
  object-fit: cover;
}
@media (max-width: 1120px) {
  .home-page .connect-grid.five-layers {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  .home-page .connect-grid.five-layers {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .home-page .connect-grid.five-layers .connect-card {
    padding: 18px 18px 110px 18px !important;
  }
  .home-page .connect-grid.five-layers .connect-card img {
    width: 90px;
    height: 90px;
  }
}
@media (max-width: 480px) {
  .home-page .connect-grid.five-layers {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 721px) {
  .mobile-bottom-nav,
  .presale-mobile-nav,
  .swap-mobile-nav {
    display: none !important;
  }
}

@media (max-width: 720px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)) !important; }
  .mobile-bottom-nav,
  .presale-mobile-nav,
  .swap-mobile-nav {
    /* position 必须在这里声明：presale.html / swap.html / index.html 不加载 styles.css，
       只靠 styles.css 的 position:fixed 会让底部导航退回文档流，出现"导航跑到内容中间"。 */
    position: fixed !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    z-index: 120 !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    left: 10px !important;
    min-height: 70px !important;
    padding: 6px !important;
    border: 1px solid rgba(176, 200, 210, .72) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 16px 44px rgba(29, 61, 79, .2) !important;
    backdrop-filter: blur(18px) !important;
  }
  .mobile-bottom-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    padding: 4px 2px !important;
    border-radius: 16px !important;
    color: #61778a !important;
    background: transparent !important;
  }
  .mobile-bottom-nav a.active {
    color: #08785f !important;
    background: #e7f8f3 !important;
  }
  .mobile-bottom-nav a > span { flex: 0 0 27px !important; width: 27px !important; height: 27px !important; margin: 0 !important; font-size: 16px !important; }
  .mobile-bottom-nav a > b { display: block !important; width: 100% !important; margin: 0 !important; overflow: hidden !important; font-size: 11px !important; line-height: 14px !important; text-align: center !important; text-overflow: ellipsis !important; }
}

/* Shared light product language for the community and play surfaces. */
.community-page,
.wow-play-page,
.community-page .site-shell,
.wow-play-page .site-shell {
  color: #17283d !important;
  background: #f5f9fb !important;
}
.community-page .portal-topbar,
.wow-play-page .portal-topbar {
  background: rgba(255,255,255,.94) !important;
  border-color: #dce9ee !important;
  box-shadow: 0 8px 26px rgba(34,73,91,.06);
}
.community-page .portal-topbar .brand-copy strong,
.wow-play-page .portal-topbar .brand-copy strong,
.community-page .portal-topbar .nav-links a,
.wow-play-page .portal-topbar .nav-links a { color: #17283d !important; }
.community-page .portal-topbar .nav-links a.active,
.wow-play-page .portal-topbar .nav-links a.active { color: #07866d !important; }
.community-page .portal-wallet-button,
.wow-play-page .portal-wallet-button { color: #173147 !important; background: #fff !important; border-color: #b8d0da !important; }

/* Community directory: stronger contrast and a deliberate light reading order. */
.community-page .community-main { padding-top: 28px; }
.community-page .community-hero {
  border-color: #cfe3ea;
  background: radial-gradient(circle at 78% 32%, rgba(134,218,202,.55), transparent 18rem), linear-gradient(135deg,#eafff8,#eef4ff 58%,#f9fbff);
  box-shadow: 0 20px 54px rgba(34,82,103,.12);
}
.community-page .community-hero h1 { color: #17283d !important; }
.community-page .community-hero h1 span { background: linear-gradient(90deg,#ef77c6,#269ed2); -webkit-background-clip:text; }
.community-page .community-hero-copy>p { color: #4b6475; }
.community-page .community-values span { color: #23605c; background: #d9f6ed; }
.community-page .community-live { color: #233b4d; background: rgba(255,255,255,.82); border-color: #cfe3ea; }
.community-page .community-live span { color: #3c5768; }
.community-page .community-live strong { color: #078d72; }
.community-page .community-stats { background: #fff; border-color: #d6e6ec; box-shadow: 0 10px 28px rgba(38,83,102,.08); }
.community-page .community-stats article { border-color: #e3edf1; }
.community-page .community-stats strong { color: #17283d !important; }
.community-page .community-stats span { color: #597080 !important; }
.community-page .community-stats small { color: #0a9a79 !important; }
.community-page .community-type-tabs { background: #fff; border-color: #d6e6ec; box-shadow: 0 10px 24px rgba(38,83,102,.07); }
.community-page .community-type-tabs button { color: #516978; }
.community-page .community-type-tabs button.is-active { color: #12443f; background: linear-gradient(90deg,#c4f4ec,#dff8cf); }
.community-page .community-filter-row button { color: #527081; background: #eaf2f5; }
.community-page .community-filter-row button.is-active { color: #fff; background: #168c79; }
.community-page .community-filter-row select { color: #3c5969; background: #fff; border-color: #cfe0e7; }
.community-page .community-card { border-color: #d7e5eb; background: #fff; box-shadow: 0 12px 30px rgba(35,75,95,.1); }
.community-page .community-card-body { color: #17283d; }
.community-page .community-card p { color: #35b98a; }
.community-page .community-numbers { color: #546a79; }
.community-page .community-tags span { color: #5d7684; border-color: #d5e4e9; background: #f6fafb; }
.community-page .community-card-body>a { background: linear-gradient(90deg,#5a56ec,#49cdb3); }
.community-page .community-widgets article,
.community-page .community-shortcuts { color: #213a4a; background: #fff; border-color: #d7e5eb; box-shadow: 0 10px 28px rgba(35,75,95,.07); }
.community-page .community-widgets li { color: #435c6c; }
.community-page .community-widgets li small { color: #7d929e; }
.community-page .community-widgets li b { color: #058e73; }
.community-page .community-shortcuts a { background: #eff8f7; color: #286154; }

/* Play page: keep the two requested feature blocks as the visual anchors. */
.wow-play-page .play-main { padding-top: 28px; }
.wow-play-page .play-userbar>div,
.wow-play-page .play-userbar button { border: 1px solid #deeaee; box-shadow: 0 8px 24px rgba(38,79,97,.07); }
.wow-play-page .play-hero { background: linear-gradient(135deg,#edf7ff,#e9fdf7); color: #17283d; border: 1px solid #d3e8eb; box-shadow: 0 18px 45px rgba(39,92,111,.1); }
.wow-play-page .play-hero h1 { color: #17283d; }
.wow-play-page .play-hero p { color: #587080; }
.wow-play-page .play-hero span { color: #087d68; background: #d9f6ed; }
.wow-play-page .play-hero button { color: #fff; background: linear-gradient(90deg,#7560ed,#3bcbb1); }
.wow-play-page .play-gift:before { background: linear-gradient(135deg,#d4f3ec,#b6dff5); box-shadow: inset 0 0 35px rgba(255,255,255,.7),0 20px 40px rgba(54,124,141,.15); }
.wow-play-page .play-gift i { color: #fff; text-shadow: 0 8px 0 #43aaaf; }
.wow-play-page .play-quick { border: 1px solid #dce9ee; }
.wow-play-page .staking-hub { border: 1px solid #cfe9e2; box-shadow: 0 16px 40px rgba(33,104,90,.1); }
.wow-play-page .play-center { border: 1px solid #e0e8ef; }
.wow-play-page .staking-hub h2,.wow-play-page .play-center h2,.wow-play-page .play-section-title h3 { color: #17283d; }
.wow-play-page .play-categories a,.wow-play-page .play-categories button { border: 1px solid #e1eaf0; background: linear-gradient(180deg,#f3fbff,#fff); }
.wow-play-page .play-categories strong { color: #20384b; }
.wow-play-page .task-center { border-top: 1px solid #e1eaf0; }

@media (min-width: 761px) {
  .community-page .community-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
}

@media (max-width: 720px) {
  .community-page .community-main { padding-top: 12px !important; }
  .community-page .community-hero { background: linear-gradient(145deg,#ecfff8,#f0f4ff); }
  .community-page .community-hero h1 { color: #17283d !important; }
  .community-page .community-hero-copy>p { color: #526b79 !important; }
  .community-page .community-values span { color: #23605c !important; background: #d9f6ed !important; }
  .community-page .community-stats { grid-template-columns: repeat(4,1fr) !important; background: #fff !important; }
  .community-page .community-stats article { min-height: 100px; padding: 12px 5px !important; }
  .community-page .community-stats strong { font-size: 20px !important; color: #17283d !important; }
  .community-page .community-stats span { color: #597080 !important; font-size: 10px !important; }
  .community-page .community-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
  .community-page .community-card { display: block; min-height: 0; border-radius: 18px !important; }
  .community-page .community-card-cover { height: 96px !important; min-height: 0; }
  .community-page .community-card-body { min-height: 214px; padding: 12px !important; }
  .community-page .community-card h2 { color: #17283d !important; font-size: 14px !important; }
  .community-page .community-card p { font-size: 10px !important; }
  .community-page .community-numbers { font-size: 9px !important; }
  .community-page .community-leader { font-size: 9px !important; }
  .community-page .community-card-body>a { padding: 9px !important; font-size: 11px !important; }
  .wow-play-page .play-hero { min-height: 270px; }
  .wow-play-page .staking-hub,.wow-play-page .play-center { box-shadow: 0 12px 28px rgba(38,79,97,.08); }
}
.community-page .community-stats strong,
.community-page .community-card h2,
.community-page .community-leader,
.community-page .community-numbers { text-shadow: none; }
.community-page .community-hero h1 { color: #17283d !important; }
.community-page .community-stats strong { color: #17283d !important; }
.community-page .community-stats span { color: #597080 !important; }
.community-page .community-stats small { color: #0a9a79 !important; }
.community-page .community-card h2 { color: inherit !important; }

@media (max-width: 720px) {
  .community-main { width: min(calc(100% - 20px), 680px) !important; padding: 12px 0 112px !important; }
  .community-page { background: linear-gradient(180deg, #eef4fb 0, #f7fafc 100%) !important; }
  .community-hero {
    display: flex !important;
    flex-direction: column;
    min-height: 0 !important;
    padding: 28px 24px 22px !important;
    border: 1px solid #d6e6ec !important;
    border-radius: 26px !important;
    background: radial-gradient(circle at 90% 10%, rgba(80,210,191,.18), transparent 35%), linear-gradient(145deg, #fff, #effafa 54%, #e8f4ff) !important;
    box-shadow: 0 18px 42px rgba(35, 75, 95, .1) !important;
  }
  .community-hero-copy { max-width: 580px; }
  .community-eyebrow { font-size: 17px !important; letter-spacing: .04em; }
  .community-hero h1 { max-width: 520px; margin: 8px 0 10px !important; color: #17283d !important; font-size: clamp(34px, 9vw, 48px) !important; letter-spacing: -.045em !important; }
  .community-hero-copy > p { margin: 0 !important; color: #5f7180 !important; font-size: 16px !important; line-height: 1.6; }
  .community-values { margin-top: 18px !important; }
  .community-values span { padding: 8px 12px !important; color: #287268 !important; background: rgba(255,255,255,.78) !important; border: 1px solid #d4ebe8 !important; font-size: 12px !important; }
  .community-globe { position: relative !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 150px; margin-top: 18px; overflow: hidden; border-radius: 18px; opacity: 1 !important; }
  .community-globe img { width: 100% !important; height: 100%; object-fit: cover; }
  .community-globe strong { font-size: 68px !important; }
  .community-search { margin: -18px 12px 18px !important; min-height: 58px !important; padding-left: 16px !important; border: 0 !important; border-radius: 18px !important; box-shadow: 0 14px 32px rgba(45, 62, 112, .18) !important; }
  .community-search input { color: #17233e; font-size: 14px !important; }
  .community-search button { min-width: 82px !important; border-radius: 14px !important; }
  .community-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 1px; margin: 0 0 18px !important; border-radius: 22px !important; background: #202d86 !important; }
  .community-stats article { min-height: 106px; padding: 14px 10px !important; border-right: 1px solid rgba(255,255,255,.1) !important; border-bottom: 1px solid rgba(255,255,255,.1); }
  .community-stats i { width: 32px !important; height: 32px !important; }
  .community-stats strong { font-size: 24px !important; }
  .community-stats span { font-size: 12px !important; }
  .community-directory { padding-top: 4px !important; }
  .community-type-tabs { gap: 4px !important; padding: 6px !important; border-radius: 18px !important; }
  .community-type-tabs button { min-width: 0; padding: 11px 4px !important; font-size: 11px !important; }
  .community-filter-row { margin: 12px 0 14px !important; scrollbar-width: none; }
  .community-filter-row button { min-width: max-content; padding: 10px 14px !important; font-size: 13px; }
  .community-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .community-card { display: block; min-height: 0; border-radius: 18px !important; box-shadow: 0 12px 30px rgba(44, 58, 104, .13) !important; }
  .community-card-cover { height: 108px !important; min-height: 0; }
  .community-card-body { display: flex; flex-direction: column; padding: 12px !important; }
  .community-card h2 { overflow: visible !important; font-size: 14px !important; line-height: 1.35; white-space: normal !important; }
  .community-card p { margin: 5px 0 8px !important; font-size: 11px !important; line-height: 1.45; }
  .community-numbers { gap: 4px !important; color: #44516c !important; font-size: 10px !important; }
  .community-leader { margin: 8px 0 !important; font-size: 10px !important; }
  .community-card-body > a { margin-top: auto !important; padding: 9px !important; font-size: 11px !important; }
  .community-widgets { color: #fff !important; }
}

@media (max-width: 430px) {
  .community-hero { padding: 24px 20px 20px !important; }
  .community-globe { height: 130px; }
  .community-card { grid-template-columns: 1fr; }
  .community-card-cover { min-height: 138px; }
  .community-card-body { min-height: 220px; }
}

/* Community dashboard: keep content readable across tablet and mobile widths. */
.community-page .community-widgets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-top: 24px;
}
.community-page .community-widgets article {
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  border-radius: 22px;
}
.community-page .community-widgets header {
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8eff2;
}
.community-page .community-widgets h3 {
  min-width: 0;
  color: #193747;
  font-size: 17px;
  line-height: 1.35;
  word-break: keep-all;
}
.community-page .community-widgets header a,
.community-page .community-widgets header span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0f6f7;
  color: #738793;
  text-decoration: none;
  white-space: nowrap;
}
.community-page .community-widgets ol,
.community-page .community-widgets ul {
  gap: 0;
  margin-top: 8px;
  list-style: none;
}
.community-page .community-widgets li {
  min-width: 0;
  min-height: 52px;
  padding: 12px 4px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #edf2f4;
  font-size: 13px;
  line-height: 1.45;
  word-break: keep-all;
}
.community-page .community-widgets li:last-child { border-bottom: 0; }
.community-page .community-widgets ol { counter-reset: community-rank; }
.community-page .community-widgets ol li {
  counter-increment: community-rank;
  justify-content: flex-start;
}
.community-page .community-widgets ol li::before {
  content: counter(community-rank);
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: #edf8f5;
  color: #0b9278;
  font-size: 11px;
  font-weight: 900;
}
.community-page .community-widgets ol li:nth-child(-n+3)::before {
  background: linear-gradient(135deg, #1aa6dc, #21c99b);
  color: #fff;
  box-shadow: 0 6px 14px rgba(22, 166, 167, .18);
}
.community-page .community-widgets ol li b { margin-left: auto; white-space: nowrap; }
.community-page .community-widgets time {
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  min-height: 34px;
  border-radius: 10px;
  background: #eef7ff;
  color: #2386c8;
  font-weight: 900;
  white-space: nowrap;
}
.community-page .community-widgets li > span {
  min-width: 0;
  overflow-wrap: normal;
  word-break: keep-all;
}
.community-page .community-widgets li small { margin-top: 3px; }
.community-page .community-widgets ul li > b {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 10px;
  background: #e7f8f2;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .community-page .community-widgets {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .community-page .community-widgets article:last-child {
    grid-column: 1 / -1;
  }
  .community-page .community-widgets article:last-child ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .community-page .community-widgets article:last-child li {
    padding: 13px 14px;
    border: 1px solid #e5eeef;
    border-radius: 14px;
    background: #fbfdfd;
  }
}

@media (max-width: 760px) {
  .community-page .community-widgets {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .community-page .community-widgets article,
  .community-page .community-widgets article:last-child {
    grid-column: auto;
    padding: 18px !important;
    color: #183143 !important;
  }
  .community-page .community-widgets article:last-child ul {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .community-page .community-widgets article:last-child li {
    padding: 12px 4px;
    border: 0;
    border-bottom: 1px solid #edf2f4;
    border-radius: 0;
    background: transparent;
  }
  .community-page .community-widgets article:last-child li:last-child { border-bottom: 0; }
}

@media (max-width: 430px) {
  .community-page .community-widgets article { border-radius: 20px; }
  .community-page .community-widgets h3 { font-size: 16px; }
  .community-page .community-widgets li { font-size: 13px; }
  .community-page .community-widgets time { flex-basis: 54px; }
}

/* ==========================================================================
   Unified light notification drawer — applied on ALL pages so the
   notification popup looks the same everywhere (light brand style).
   ========================================================================== */
.notification-layer {
  background: rgba(20, 40, 58, 0.32) !important;
  backdrop-filter: blur(8px);
}
.notification-drawer {
  color: #102536 !important;
  background: #ffffff !important;
  border-left: 1px solid rgba(122, 162, 178, 0.35);
  box-shadow: -20px 0 80px rgba(42, 82, 106, 0.18);
}
.notification-drawer .eyebrow { color: #0ea77c !important; }
.notification-drawer-head h2 { color: #102536 !important; }
.notification-close { color: #60788a !important; background: transparent !important; }
.notification-close:hover { color: #0ea77c !important; }
.notification-item {
  color: #102536 !important;
  background: #ffffff !important;
  border-color: rgba(122, 162, 178, 0.35);
}
.notification-item:hover {
  background: #f8fbfd !important;
  border-color: #b8d4de;
}
.notification-item.is-read { opacity: 0.72; }
.notification-item-copy small { color: #0ea77c !important; }
.notification-item-copy strong { color: #102536 !important; }
.notification-item-copy span { color: #526c7d !important; }
.notification-item-arrow { color: #0ea77c !important; }
.notification-tone { box-shadow: 0 0 12px rgba(0, 0, 0, 0.18); }
.notification-drawer-foot { border-top-color: rgba(122, 162, 178, 0.25); }
.notification-drawer-foot button,
.notification-drawer-foot a { color: #0ea77c !important; }
.notification-drawer-foot button:hover,
.notification-drawer-foot a:hover { color: #087e99 !important; }