/* ==========================================================
   OneNav iOS 26 Liquid Glass — v1.2.0
   Visual-only child-theme layer. Parent templates, data and JS stay intact.
   ========================================================== */

:root {
  /* v1.6.1 canonical design tokens. Existing selectors keep their old aliases
     below, so this version intentionally does not change the visual result. */
  --mf-bg: #f5f7fb;
  --mf-glass: rgba(255, 255, 255, .74);
  --mf-glass-strong: rgba(255, 255, 255, .86);
  --mf-text: #2f3540;
  --mf-text-secondary: #7b8493;
  --mf-border: rgba(255, 255, 255, .88);
  --mf-shadow: 0 10px 32px rgba(31, 50, 79, .075), 0 2px 8px rgba(31, 50, 79, .035);
  --mf-shadow-hover: 0 16px 38px rgba(31, 50, 79, .12), 0 4px 12px rgba(31, 50, 79, .055);
  --mf-accent: rgb(var(--theme-color-rgb, 72, 130, 230));
  --mf-blur: 22px;
  --mf-radius-sm: 12px;
  --mf-radius-md: 14px;
  --mf-radius-card: 15px;
  --mf-radius-lg: 18px;
  --mf-radius-pill: 999px;

  /* Backward-compatible aliases used by the existing v1.6.0.1 stylesheet. */
  --mf-glass-light: var(--mf-glass);
  --mf-glass-light-strong: var(--mf-glass-strong);
  --mf-glass-border: var(--mf-border);
  --mf-glass-shadow: var(--mf-shadow);
  --mf-glass-shadow-hover: var(--mf-shadow-hover);
  --mf-glass-blur: var(--mf-blur);
  --main-blur-bg-color: rgba(250, 252, 255, .76);
  --main-blur-bg-color2: rgba(250, 252, 255, .86);
  --main-blur-bg-color3: rgba(250, 252, 255, .62);
  --main-shadow: rgba(35, 54, 82, .085);
}

/* Keep the canvas bright and mostly white, with a very subtle ambient tint. */
html,
body {
  min-height: 100%;
}

body {
  background-color: var(--body-bg-color, #f5f7fb) !important;
  background-image:
    radial-gradient(ellipse at 10% 0%, rgba(113, 174, 255, .075), transparent 38%),
    radial-gradient(ellipse at 92% 14%, rgba(166, 143, 255, .055), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(246, 249, 253, .18)) !important;
  background-attachment: fixed;
}

/* Fixed navigation: glass surface, thin inner edge and soft floating shadow. */
.header-fixed {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header-nav,
.header-nav.blur-bg,
.header-nav.blur-bg-20 {
  background: var(--mf-glass-light) !important;
  border: 1px solid var(--mf-glass-border) !important;
  box-shadow: 0 8px 30px rgba(32, 55, 87, .085), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  -webkit-backdrop-filter: saturate(165%) blur(var(--mf-glass-blur));
  backdrop-filter: saturate(165%) blur(var(--mf-glass-blur));
}

.scroll .header-nav {
  box-shadow: 0 12px 34px rgba(32, 55, 87, .12), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

.navbar-header > li > a,
.header-tools > li > a,
.header-icon-btn,
.header-nav .menu-btn {
  border-radius: 12px;
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}

.navbar-header > li > a:hover,
.header-tools > li > a:hover,
.header-icon-btn:hover,
.header-nav .menu-btn:hover {
  background-color: rgba(255, 255, 255, .52);
}

/* Main panels/widgets across home, archives, search, articles and member pages. */
.card:not(.card-color),
.footer,
.aside-card,
.modal-content,
.dropdown-menu,
.header-tools .sub-menu,
.navbar-header .sub-menu,
.new-posts-btn .sub-menu,
.min-nav .sub-menu,
.mobile-header .mobile-nav,
.add-to-favorites .favorites-body,
.search-smart-tips {
  background-color: var(--mf-glass-light) !important;
  border: 1px solid var(--mf-glass-border) !important;
  box-shadow: var(--mf-glass-shadow) !important;
  -webkit-backdrop-filter: saturate(155%) blur(var(--mf-glass-blur));
  backdrop-filter: saturate(155%) blur(var(--mf-glass-blur));
}

.card:not(.card-color) {
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.card:not(.card-color):hover {
  border-color: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--mf-glass-shadow-hover) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background-color: transparent !important;
}

.card-header::before {
  background: rgba(116, 139, 168, .15) !important;
}

/* Site/resource cards retain their original icons and theme-configured accent colors. */
.posts-item.sites-item {
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, .70) !important;
  box-shadow: 0 4px 16px rgba(36, 56, 88, .035) !important;
  -webkit-backdrop-filter: saturate(145%) blur(14px);
  backdrop-filter: saturate(145%) blur(14px);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}

.posts-item.sites-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .98) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 10px 25px rgba(36, 56, 88, .09) !important;
}

/* Search boxes: frosted field with clear focus feedback. */
.search-form .search-key,
.search-body .form-control,
.sidebar .card .searchform input[type="text"],
.form-control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
  border: 1px solid rgba(126, 148, 176, .18) !important;
  border-radius: 14px !important;
  background-color: rgba(255, 255, 255, .78) !important;
  box-shadow: inset 0 1px 2px rgba(36, 56, 88, .025) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.search-form .search-key {
  min-height: 50px;
  border-radius: 18px !important;
  padding-left: 20px;
  padding-right: 60px;
  box-shadow: 0 8px 25px rgba(38, 60, 94, .055), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

.search-form .search-key:focus,
.search-body .form-control:focus,
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(var(--theme-color-rgb, 72, 130, 230), .45) !important;
  box-shadow: 0 0 0 4px rgba(var(--theme-color-rgb, 72, 130, 230), .10) !important;
  outline: 0;
}

/* Buttons: gently rounded. Explicit theme-color buttons keep their original color. */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:not(:disabled):hover,
button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
input[type="button"]:not(:disabled):hover {
  filter: saturate(1.04);
}

.btn:not(:disabled):active,
button:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="button"]:not(:disabled):active {
  transform: scale(.985);
}

/* Popovers, dropdowns, suggestion panels and modals. */
.dropdown-menu,
.header-tools .sub-menu,
.navbar-header .sub-menu {
  border-radius: 16px !important;
  padding: 8px !important;
  overflow: hidden;
}

.dropdown-item,
.search-menu {
  border-radius: 10px;
  transition: background-color .18s ease, color .18s ease;
}

.modal-content {
  border-radius: 22px !important;
  overflow: hidden;
}

.modal-backdrop.show {
  opacity: .34;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Footer and utility ribbons. */
.footer {
  border-radius: 18px !important;
}

.footer-stat-box {
  border-radius: 999px;
}

/* Dark mode follows OneNav's existing .io-black-mode switch. */
.io-black-mode {
  --mf-bg: #171b22;
  --mf-glass: rgba(31, 36, 46, .72);
  --mf-glass-strong: rgba(36, 42, 53, .86);
  --mf-text: #e4e8ef;
  --mf-text-secondary: #aeb7c6;
  --mf-border: rgba(255, 255, 255, .10);
  --mf-shadow: 0 12px 34px rgba(0, 0, 0, .24), 0 2px 8px rgba(0, 0, 0, .12);
  --mf-shadow-hover: 0 16px 40px rgba(0, 0, 0, .34), 0 4px 12px rgba(0, 0, 0, .16);

  /* Same aliases as light mode; old selectors therefore retain their output. */
  --mf-glass-light: var(--mf-glass);
  --mf-glass-light-strong: var(--mf-glass-strong);
  --mf-glass-border: var(--mf-border);
  --mf-glass-shadow: var(--mf-shadow);
  --mf-glass-shadow-hover: var(--mf-shadow-hover);
  --main-blur-bg-color: rgba(25, 30, 39, .72);
  --main-blur-bg-color2: rgba(28, 33, 43, .84);
  --main-blur-bg-color3: rgba(25, 30, 39, .58);
  --main-shadow: rgba(0, 0, 0, .25);
}

.io-black-mode body {
  background-color: var(--body-bg-color, #171b22) !important;
  background-image:
    radial-gradient(ellipse at 10% 0%, rgba(73, 119, 190, .10), transparent 38%),
    radial-gradient(ellipse at 92% 14%, rgba(123, 94, 178, .075), transparent 34%),
    linear-gradient(180deg, rgba(16, 20, 27, .20), rgba(16, 20, 27, .08)) !important;
}

.io-black-mode .header-nav,
.io-black-mode .header-nav.blur-bg,
.io-black-mode .header-nav.blur-bg-20 {
  background: rgba(27, 32, 41, .76) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.io-black-mode .navbar-header > li > a:hover,
.io-black-mode .header-tools > li > a:hover,
.io-black-mode .header-icon-btn:hover,
.io-black-mode .header-nav .menu-btn:hover {
  background-color: rgba(255, 255, 255, .08);
}

.io-black-mode .card:not(.card-color),
.io-black-mode .footer,
.io-black-mode .aside-card,
.io-black-mode .modal-content,
.io-black-mode .dropdown-menu,
.io-black-mode .header-tools .sub-menu,
.io-black-mode .navbar-header .sub-menu,
.io-black-mode .new-posts-btn .sub-menu,
.io-black-mode .min-nav .sub-menu,
.io-black-mode .mobile-header .mobile-nav,
.io-black-mode .add-to-favorites .favorites-body,
.io-black-mode .search-smart-tips {
  background-color: var(--mf-glass-light) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: var(--mf-glass-shadow) !important;
}

.io-black-mode .posts-item.sites-item {
  background: rgba(34, 39, 49, .70) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !important;
}

.io-black-mode .posts-item.sites-item:hover {
  background: rgba(43, 49, 61, .90) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .24) !important;
}

.io-black-mode .search-form .search-key,
.io-black-mode .search-body .form-control,
.io-black-mode .sidebar .card .searchform input[type="text"],
.io-black-mode .form-control,
.io-black-mode input[type="text"],
.io-black-mode input[type="email"],
.io-black-mode input[type="url"],
.io-black-mode input[type="password"],
.io-black-mode input[type="search"],
.io-black-mode input[type="number"],
.io-black-mode select,
.io-black-mode textarea {
  color: var(--main-color, #e4e8ef) !important;
  background-color: rgba(18, 22, 29, .76) !important;
  border-color: rgba(255, 255, 255, .11) !important;
}

.io-black-mode .search-form .search-key::placeholder,
.io-black-mode input::placeholder,
.io-black-mode textarea::placeholder {
  color: rgba(210, 216, 226, .60);
}

.io-black-mode .card-header::before {
  background: rgba(255, 255, 255, .10) !important;
}

/* Accessibility and performance safeguards. */
@media (hover: none) {
  .posts-item.sites-item:hover,
  .card:not(.card-color):hover {
    transform: none;
  }
}

@media (max-width: 767.98px) {
  :root {
    --mf-glass-blur: 16px;
  }

  .header-fixed {
    padding-left: 8px;
    padding-right: 8px;
  }

  .header-nav,
  .header-nav.blur-bg,
  .header-nav.blur-bg-20 {
    box-shadow: 0 6px 20px rgba(32, 55, 87, .075), inset 0 1px 0 rgba(255, 255, 255, .85) !important;
  }

  .card:not(.card-color),
  .footer,
  .aside-card,
  .modal-content,
  .dropdown-menu,
  .mobile-header .mobile-nav {
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    backdrop-filter: saturate(140%) blur(16px);
  }

  .posts-item.sites-item {
    border-radius: 13px !important;
  }
}

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

/* Browsers without backdrop-filter get a more opaque but readable fallback. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .header-nav,
  .header-nav.blur-bg,
  .card:not(.card-color),
  .footer,
  .aside-card,
  .modal-content,
  .dropdown-menu,
  .posts-item.sites-item {
    background-color: rgba(255, 255, 255, .96) !important;
  }

  .io-black-mode .header-nav,
  .io-black-mode .header-nav.blur-bg,
  .io-black-mode .card:not(.card-color),
  .io-black-mode .footer,
  .io-black-mode .aside-card,
  .io-black-mode .modal-content,
  .io-black-mode .dropdown-menu,
  .io-black-mode .posts-item.sites-item {
    background-color: rgba(35, 40, 49, .97) !important;
  }
}

/* ==========================================================
   v1.1.0 visual/viewport QA overrides
   Stronger Liquid Glass on controls + complete modal/login layouts.
   ========================================================== */
:root {
  --mf-glass-edge: rgba(142, 167, 202, .32);
  --mf-glass-reflection: linear-gradient(135deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.34) 22%,
    rgba(255,255,255,.10) 49%,
    rgba(223,236,255,.26) 75%,
    rgba(255,255,255,.48) 100%);
  --mf-glass-panel: linear-gradient(145deg,
    rgba(255,255,255,.91) 0%,
    rgba(249,252,255,.79) 48%,
    rgba(231,241,255,.65) 100%);
}

/* Make the glass surface readable even when the page behind it is mostly white. */
.card:not(.card-color),
.footer,
.aside-card,
.modal-content,
.dropdown-menu,
.header-tools .sub-menu,
.navbar-header .sub-menu,
.new-posts-btn .sub-menu,
.min-nav .sub-menu,
.mobile-header .mobile-nav,
.add-to-favorites .favorites-body,
.search-smart-tips {
  background-color: rgba(248, 251, 255, .78) !important;
  background-image: var(--mf-glass-reflection) !important;
  border: 1px solid var(--mf-glass-edge) !important;
  box-shadow: 0 14px 34px rgba(35, 62, 100, .10),
              0 3px 10px rgba(35, 62, 100, .055),
              inset 0 1px 0 rgba(255,255,255,.94),
              inset 0 -1px 0 rgba(125,153,194,.10) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
}

.header-nav,
.header-nav.blur-bg,
.header-nav.blur-bg-20 {
  background-color: rgba(248, 251, 255, .76) !important;
  background-image: var(--mf-glass-reflection) !important;
  border-color: rgba(255,255,255,.88) !important;
  box-shadow: 0 12px 34px rgba(35,62,100,.12),
              inset 0 1px 0 rgba(255,255,255,.98),
              inset 0 -1px 0 rgba(110,145,190,.12) !important;
  -webkit-backdrop-filter: saturate(190%) blur(26px);
  backdrop-filter: saturate(190%) blur(26px);
}

.posts-item.sites-item {
  background-color: rgba(249, 252, 255, .76) !important;
  background-image: linear-gradient(145deg,
    rgba(255,255,255,.94) 0%,
    rgba(249,252,255,.80) 48%,
    rgba(231,241,255,.66) 100%) !important;
  border: 1px solid rgba(143,169,207,.32) !important;
  box-shadow: 0 7px 20px rgba(36,56,88,.065),
              inset 0 1px 0 rgba(255,255,255,.98),
              inset 0 -1px 0 rgba(116,148,192,.10) !important;
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
}
.posts-item.sites-item:hover {
  background-color: rgba(255,255,255,.90) !important;
  background-image: linear-gradient(145deg,
    rgba(255,255,255,.98) 0%,
    rgba(247,251,255,.88) 48%,
    rgba(222,237,255,.76) 100%) !important;
  border-color: rgba(102,145,211,.42) !important;
  box-shadow: 0 14px 30px rgba(36,70,120,.13),
              inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* Glossy, tactile controls. Original OneNav accent-color classes remain intact. */
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn-token,
.tags-box-card .tags-item-link,
.tagcloud a,
.tags-item-link,
.nav-pills .nav-link,
.nav-tabs .nav-link,
.tab-widget-nav .nav-pills .nav-link,
.dropdown-item,
.tips-box,
.badge,
badge {
  border: 1px solid rgba(255,255,255,.74) !important;
  background-image: linear-gradient(135deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.20) 34%,
    rgba(255,255,255,.07) 62%,
    rgba(210,229,255,.22) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78),
              inset 0 -1px 0 rgba(57,86,130,.08),
              0 4px 13px rgba(42,67,105,.075) !important;
  -webkit-backdrop-filter: saturate(165%) blur(12px);
  backdrop-filter: saturate(165%) blur(12px);
  background-clip: padding-box;
}

.btn:not(:disabled):hover,
button:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover,
input[type="button"]:not(:disabled):hover,
.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover,
.tags-box-card .tags-item-link:hover,
.tagcloud a:hover,
.tags-item-link:hover,
.dropdown-item:hover {
  border-color: rgba(117,157,220,.48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92),
              0 8px 20px rgba(48,86,145,.14) !important;
}

.nav-pills .nav-link,
.nav-tabs .nav-link,
.tab-widget-nav .nav-pills .nav-link {
  border-radius: 999px !important;
  padding-left: 1rem;
  padding-right: 1rem;
  color: var(--main-color, #484b4f);
  background-color: rgba(255,255,255,.42) !important;
}
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.tab-widget-nav .nav-pills .nav-link.active {
  color: var(--theme-color, #f1404b) !important;
  background-color: rgba(255,255,255,.78) !important;
  border-color: rgba(var(--theme-color-rgb, 241,64,75),.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
              0 5px 16px rgba(var(--theme-color-rgb, 241,64,75),.11) !important;
}

.badge,
badge,
.tags-box-card .tags-item-link,
.tagcloud a,
.tags-item-link,
.btn-token {
  border-radius: 999px !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
  background-image: linear-gradient(145deg, rgba(255,255,255,.82), rgba(239,246,255,.58)) !important;
  border-color: rgba(133,158,195,.34) !important;
  box-shadow: inset 0 1px 2px rgba(39,63,100,.035),
              inset 0 1px 0 rgba(255,255,255,.90),
              0 2px 8px rgba(40,65,102,.035) !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(var(--theme-color-rgb, 72,130,230),.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90),
              0 0 0 3px rgba(var(--theme-color-rgb, 72,130,230),.12),
              0 6px 16px rgba(40,85,150,.08) !important;
}

/* Bootstrap-style modal: keep the header/footer visible and scroll long form content. */
.modal.show {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
.modal-dialog {
  min-width: 0;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
}
.modal-dialog.modal-dialog-centered {
  min-height: calc(100vh - 24px);
  min-height: calc(100dvh - 24px);
}
.modal-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow: hidden;
  border-radius: 24px !important;
}
.modal-header,
.modal-footer {
  flex: 0 0 auto;
}
.modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.modal-backdrop.show {
  opacity: .48 !important;
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
}

/* OneNav custom ioPopup/io-bomb (including OAuth/login popups) is NOT Bootstrap modal. */
.io-bomb {
  padding: 12px !important;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.io-bomb .io-bomb-body {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: auto;
}
.io-bomb.io-bomb-sm .io-bomb-body,
.io-bomb.io-bomb-confirm .io-bomb-body,
.io-bomb.io-bomb-md .io-bomb-body {
  width: min(100%, 420px) !important;
  max-width: min(420px, calc(100vw - 24px)) !important;
}
.io-bomb .io-bomb-content {
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 26px !important;
  background-color: rgba(248,251,255,.82) !important;
  background-image: var(--mf-glass-panel) !important;
  box-shadow: 0 28px 80px rgba(22,43,78,.25),
              0 8px 24px rgba(22,43,78,.12),
              inset 0 1px 0 rgba(255,255,255,.98),
              inset 0 -1px 0 rgba(117,148,194,.12) !important;
  -webkit-backdrop-filter: saturate(185%) blur(30px);
  backdrop-filter: saturate(185%) blur(30px);
}
.io-bomb.io-bomb-sm .io-bomb-content,
.io-bomb.io-bomb-confirm .io-bomb-content,
.io-bomb.io-bomb-md .io-bomb-content {
  max-height: calc(100vh - 78px);
  max-height: calc(100dvh - 78px);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.io-bomb.io-bomb-sm .io-bomb-content {
  padding: clamp(18px, 4vw, 30px) !important;
}
.io-bomb .io-bomb-content form,
.io-bomb .io-bomb-content .form-group,
.io-bomb .io-bomb-content .form-control,
.io-bomb .io-bomb-content input,
.io-bomb .io-bomb-content select,
.io-bomb .io-bomb-content textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.io-bomb .io-bomb-content .form-control,
.io-bomb .io-bomb-content input[type="text"],
.io-bomb .io-bomb-content input[type="email"],
.io-bomb .io-bomb-content input[type="password"] {
  width: 100%;
}
.io-bomb .io-bomb-content .d-flex.mb-3 {
  gap: 8px;
  flex-wrap: wrap;
}
.io-bomb .io-bomb-content .d-flex.mb-3 > .btn {
  flex: 1 1 105px;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.io-bomb .btn-close-bomb {
  flex: 0 0 auto;
  padding: 2px 0;
}

/* Full standalone OneNav login/register/reset-password page. */
body.min-img,
body.no-img,
body.max-img,
body.login-body-login {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  padding-top: 0 !important;
  padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-x: hidden;
  box-sizing: border-box;
  background-color: var(--bg-color-l, #f1f5fb) !important;
  background-image:
    radial-gradient(ellipse at 12% 10%, rgba(255,255,255,.64), transparent 38%),
    radial-gradient(ellipse at 88% 88%, rgba(110,160,235,.16), transparent 42%),
    linear-gradient(135deg, var(--bg-color-l, #f1f5fb), var(--bg-color-r, #e9eff9)) !important;
}
.login-container {
  width: 100%;
  max-width: 1100px !important;
  min-width: 0;
  min-height: 0;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vh, 30px) 16px;
  box-sizing: border-box;
}
.login-body {
  width: auto;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 0 1 auto;
  align-items: stretch;
  gap: clamp(0px, 2vw, 18px);
  padding: clamp(10px, 1.8vw, 18px) !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  border-radius: 28px !important;
  background-color: rgba(248,251,255,.78) !important;
  background-image: var(--mf-glass-panel) !important;
  box-shadow: 0 24px 70px rgba(31,55,94,.15),
              0 5px 18px rgba(31,55,94,.07),
              inset 0 1px 0 rgba(255,255,255,.98),
              inset 0 -1px 0 rgba(116,149,197,.12) !important;
  -webkit-backdrop-filter: saturate(185%) blur(30px);
  backdrop-filter: saturate(185%) blur(30px);
}
.login-img {
  min-width: 0;
  overflow: hidden;
  border-radius: 20px !important;
}
.login-forms {
  flex: 0 1 390px;
  width: 100%;
  min-width: 0 !important;
  max-width: 390px;
  padding: clamp(16px, 2.2vw, 26px) !important;
  box-sizing: border-box;
}
.login-forms form,
.login-forms .form-group,
.login-forms .form-control,
.login-forms input,
.login-forms select,
.login-forms textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.login-forms .form-control,
.login-forms input[type="text"],
.login-forms input[type="email"],
.login-forms input[type="password"],
.login-forms input[type="tel"] {
  width: 100%;
}
.login-forms .image-captcha-group .form-control {
  min-width: 0 !important;
  padding-right: 92px;
}
.login-forms #wp_login_form > .d-flex.mb-3 {
  gap: 10px;
  flex-wrap: wrap;
}
.login-forms #wp_login_form > .d-flex.mb-3 > .btn {
  flex: 1 1 110px;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.login-forms .sign-header {
  letter-spacing: .02em;
}
.login-forms .custom-control-label {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Dark mode works whether OneNav adds io-black-mode to html or body. */
html.io-black-mode,
body.io-black-mode,
.io-black-mode {
  --mf-glass-edge: rgba(255,255,255,.16);
  --mf-glass-reflection: linear-gradient(135deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.055) 30%,
    rgba(15,25,42,.12) 58%,
    rgba(115,154,220,.10) 78%,
    rgba(255,255,255,.075) 100%);
  --mf-glass-panel: linear-gradient(145deg,
    rgba(38,45,58,.94) 0%,
    rgba(28,34,45,.86) 48%,
    rgba(24,34,49,.80) 100%);
  --mf-glass-light: rgba(30,36,47,.82);
  --mf-glass-light-strong: rgba(36,43,55,.90);
  --mf-glass-border: rgba(255,255,255,.13);
  --mf-glass-shadow: 0 14px 36px rgba(0,0,0,.32), 0 3px 10px rgba(0,0,0,.18);
  --mf-glass-shadow-hover: 0 18px 42px rgba(0,0,0,.42), 0 5px 14px rgba(0,0,0,.24);
  --main-blur-bg-color: rgba(26,31,41,.80);
  --main-blur-bg-color2: rgba(30,36,47,.89);
  --main-blur-bg-color3: rgba(24,30,40,.72);
  --main-shadow: rgba(0,0,0,.30);
}
html.io-black-mode body,
body.io-black-mode,
.io-black-mode body {
  background-color: var(--body-bg-color, #171b22) !important;
  background-image:
    radial-gradient(ellipse at 10% 0%, rgba(73,119,190,.13), transparent 38%),
    radial-gradient(ellipse at 92% 14%, rgba(123,94,178,.10), transparent 34%),
    linear-gradient(180deg, rgba(16,20,27,.20), rgba(16,20,27,.08)) !important;
}
.io-black-mode .card:not(.card-color),
.io-black-mode .footer,
.io-black-mode .aside-card,
.io-black-mode .modal-content,
.io-black-mode .dropdown-menu,
.io-black-mode .header-tools .sub-menu,
.io-black-mode .navbar-header .sub-menu,
.io-black-mode .new-posts-btn .sub-menu,
.io-black-mode .min-nav .sub-menu,
.io-black-mode .mobile-header .mobile-nav,
.io-black-mode .add-to-favorites .favorites-body,
.io-black-mode .search-smart-tips,
.io-black-mode .io-bomb .io-bomb-content,
.io-black-mode .login-body {
  background-color: rgba(29,35,46,.84) !important;
  background-image: var(--mf-glass-panel) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.32),
              inset 0 1px 0 rgba(255,255,255,.10),
              inset 0 -1px 0 rgba(0,0,0,.18) !important;
  color: var(--main-color, #e4e8ef);
}
.io-black-mode .header-nav,
.io-black-mode .header-nav.blur-bg,
.io-black-mode .header-nav.blur-bg-20 {
  background-color: rgba(25,31,41,.84) !important;
  background-image: var(--mf-glass-reflection) !important;
  border-color: rgba(255,255,255,.14) !important;
}
.io-black-mode .posts-item.sites-item {
  background-color: rgba(30,36,47,.82) !important;
  background-image: linear-gradient(145deg, rgba(49,57,72,.90), rgba(26,32,43,.82)) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.io-black-mode .posts-item.sites-item:hover {
  background-color: rgba(39,46,59,.92) !important;
  background-image: linear-gradient(145deg, rgba(58,68,85,.92), rgba(30,38,51,.90)) !important;
  border-color: rgba(145,184,245,.30) !important;
}
.io-black-mode .btn,
.io-black-mode button,
.io-black-mode input[type="submit"],
.io-black-mode input[type="button"],
.io-black-mode input[type="reset"],
.io-black-mode .btn-token,
.io-black-mode .tags-box-card .tags-item-link,
.io-black-mode .tagcloud a,
.io-black-mode .tags-item-link,
.io-black-mode .nav-pills .nav-link,
.io-black-mode .nav-tabs .nav-link,
.io-black-mode .tips-box,
.io-black-mode .badge,
.io-black-mode badge {
  border-color: rgba(255,255,255,.17) !important;
  background-image: linear-gradient(135deg,
    rgba(255,255,255,.16) 0%,
    rgba(255,255,255,.055) 35%,
    rgba(255,255,255,.025) 65%,
    rgba(112,151,214,.10) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
              inset 0 -1px 0 rgba(0,0,0,.16),
              0 4px 14px rgba(0,0,0,.18) !important;
}
.io-black-mode .nav-pills .nav-link,
.io-black-mode .nav-tabs .nav-link {
  color: var(--main-color, #d9dfe8) !important;
  background-color: rgba(255,255,255,.055) !important;
}
.io-black-mode .nav-pills .nav-link.active,
.io-black-mode .nav-tabs .nav-link.active,
.io-black-mode .tab-widget-nav .nav-pills .nav-link.active {
  color: #f4f7ff !important;
  background-color: rgba(105,145,210,.25) !important;
  border-color: rgba(143,180,240,.32) !important;
}
.io-black-mode .form-control,
.io-black-mode input[type="text"],
.io-black-mode input[type="email"],
.io-black-mode input[type="url"],
.io-black-mode input[type="password"],
.io-black-mode input[type="search"],
.io-black-mode input[type="number"],
.io-black-mode select,
.io-black-mode textarea {
  color: var(--main-color, #e4e8ef) !important;
  background-color: rgba(15,20,29,.78) !important;
  background-image: linear-gradient(145deg, rgba(255,255,255,.055), rgba(77,100,137,.055)) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 2px 8px rgba(0,0,0,.16) !important;
}
.io-black-mode .form-control::placeholder,
.io-black-mode input::placeholder,
.io-black-mode textarea::placeholder {
  color: rgba(219,226,238,.60) !important;
}
.io-black-mode .login-forms,
.io-black-mode .login-forms .text-muted,
.io-black-mode .login-forms small,
.io-black-mode .login-forms label {
  color: var(--main-color, #dfe5ef);
}

@media (max-width: 767.98px) {
  .modal-dialog,
  .modal-dialog.modal-dialog-centered {
    max-width: calc(100vw - 20px);
    min-height: 0;
    margin: 10px auto;
  }
  .modal-content {
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 20px !important;
  }
  .modal-header {
    padding: 1rem 1rem .5rem;
  }
  .modal-body {
    padding: 1rem;
  }
  .modal-footer {
    padding: .75rem 1rem 1rem;
    flex-wrap: wrap;
  }
  .header-fixed {
    padding-left: 8px;
    padding-right: 8px;
  }
  .card:not(.card-color),
  .footer,
  .aside-card,
  .dropdown-menu,
  .mobile-header .mobile-nav {
    -webkit-backdrop-filter: saturate(145%) blur(16px);
    backdrop-filter: saturate(145%) blur(16px);
  }
  .login-container {
    flex: 1 0 auto;
    padding: 12px 12px 18px;
    justify-content: center;
  }
  .login-body {
    width: 100%;
    max-width: 480px;
    margin: auto !important;
    padding: 8px !important;
    border-radius: 23px !important;
    gap: 0;
  }
  .login-forms {
    width: 100%;
    flex: 1 1 auto;
    max-width: none;
    padding: clamp(16px, 5vw, 24px) !important;
  }
  .login-forms .sign-header {
    margin-bottom: 1.1rem !important;
  }
  .login-forms #wp_login_form > .d-flex.mb-3 > .btn {
    flex: 1 1 100px;
  }
  .io-bomb {
    padding: 10px !important;
  }
  .io-bomb .io-bomb-body {
    max-height: calc(100dvh - 20px);
  }
  .io-bomb.io-bomb-sm .io-bomb-body,
  .io-bomb.io-bomb-confirm .io-bomb-body,
  .io-bomb.io-bomb-md .io-bomb-body {
    width: 100% !important;
    max-width: min(420px, calc(100vw - 20px)) !important;
  }
  .io-bomb.io-bomb-sm .io-bomb-content,
  .io-bomb.io-bomb-confirm .io-bomb-content,
  .io-bomb.io-bomb-md .io-bomb-content {
    max-height: calc(100dvh - 76px);
    border-radius: 22px !important;
  }
  .io-bomb.io-bomb-sm .io-bomb-content {
    padding: 18px !important;
  }
}

@media (max-height: 560px) {
  .modal-dialog.modal-dialog-centered {
    min-height: 0;
    align-items: flex-start;
  }
  .modal-content {
    max-height: calc(100vh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  .io-bomb {
    align-items: flex-start;
  }
  .io-bomb .io-bomb-body {
    margin-top: 0;
    margin-bottom: auto;
  }
  .io-bomb.io-bomb-sm .io-bomb-content,
  .io-bomb.io-bomb-confirm .io-bomb-content,
  .io-bomb.io-bomb-md .io-bomb-content {
    max-height: calc(100dvh - 74px);
  }
  body.min-img .login-container,
  body.no-img .login-container,
  body.max-img .login-container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (hover: none) {
  .posts-item.sites-item:hover,
  .card:not(.card-color):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  button,
  .posts-item.sites-item,
  .card:not(.card-color) {
    transition-duration: .01ms !important;
  }
}

@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .card:not(.card-color),
  .footer,
  .aside-card,
  .modal-content,
  .dropdown-menu,
  .posts-item.sites-item,
  .io-bomb .io-bomb-content,
  .login-body {
    background-color: rgba(248,251,255,.97) !important;
  }
  .io-black-mode .card:not(.card-color),
  .io-black-mode .footer,
  .io-black-mode .aside-card,
  .io-black-mode .modal-content,
  .io-black-mode .dropdown-menu,
  .io-black-mode .posts-item.sites-item,
  .io-black-mode .io-bomb .io-bomb-content,
  .io-black-mode .login-body {
    background-color: rgba(32,38,49,.98) !important;
  }
}

/* ==========================================================
   v1.2.0 — dark header fade, complete user dropdown, member center polish
   ========================================================== */

/* Use one consistent dark canvas color so the header-to-page transition has no seam. */
html.io-black-mode,
body.io-black-mode {
  background-color: #1b1d1f !important;
}
html.io-black-mode body,
body.io-black-mode,
.io-black-mode body {
  background-color: var(--body-bg-color, #1b1d1f) !important;
  background-image:
    radial-gradient(ellipse 88% 300px at 50% 0%, rgba(74, 102, 151, .105) 0%, rgba(43, 52, 69, .045) 48%, transparent 100%),
    linear-gradient(180deg, rgba(27, 29, 31, .015), rgba(27, 29, 31, 0)) !important;
  background-attachment: fixed !important;
}

/* Fade the home/search banner naturally into the exact same night canvas. */
.io-black-mode .header-banner {
  position: relative;
  isolation: isolate;
  overflow: visible !important;
}
.io-black-mode .header-banner::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(120px, 18vw, 250px);
  background: linear-gradient(
    180deg,
    rgba(27, 29, 31, 0) 0%,
    rgba(27, 29, 31, .16) 28%,
    rgba(27, 29, 31, .52) 58%,
    rgba(27, 29, 31, .86) 82%,
    var(--body-bg-color, #1b1d1f) 100%
  );
}
.io-black-mode .header-banner > .switch-container,
.io-black-mode .header-banner > .content,

/* Header dropdowns: prevent ancestors from clipping the member panel. */
.header-fixed,
.header-fixed .header-nav,
.header-nav,
.header-nav .header-center,
.header-tools,
.header-tools > li {
  overflow: visible !important;
}
.header-fixed {
  z-index: 1035 !important;
}
.header-tools > li {
  position: relative;
  z-index: 1;
}
.header-tools > li:hover,
.header-tools > li:focus-within {
  z-index: 3;
}
.header-tools .sub-menu {
  z-index: 1500 !important;
  max-height: calc(100vh - var(--main-nav-hight, 80px) - 18px) !important;
  max-height: calc(100dvh - var(--main-nav-hight, 80px) - 18px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.header-tools .menu-user-box {
  width: min(320px, calc(100vw - 24px));
  min-width: 0 !important;
  max-width: calc(100vw - 24px) !important;
  box-sizing: border-box;
  right: 0;
  max-height: calc(100vh - var(--main-nav-hight, 80px) - 18px) !important;
  max-height: calc(100dvh - var(--main-nav-hight, 80px) - 18px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.header-tools .menu-user-box > * {
  min-width: 0;
  max-width: 100%;
}

/* Dedicated login/register/reset screens: explicitly paint the panel in dark mode.
   Works when OneNav places io-black-mode on either <html> or <body>. */
html.io-black-mode body[class*="login-body-"],
body.io-black-mode[class*="login-body-"],
.io-black-mode body[class*="login-body-"] {
  color: #e3e8f1 !important;
  background-color: #171b22 !important;
  background-image:
    radial-gradient(ellipse 72% 52% at 16% 8%, rgba(68, 110, 180, .20), transparent 72%),
    radial-gradient(ellipse 62% 55% at 92% 92%, rgba(108, 77, 163, .16), transparent 70%),
    linear-gradient(145deg, #171b22 0%, #1b2029 52%, #171b22 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
  min-height: 100dvh;
}
html.io-black-mode body[class*="login-body-"] .login-body,
body.io-black-mode[class*="login-body-"] .login-body,
.io-black-mode body[class*="login-body-"] .login-body {
  color: #e5eaf3 !important;
  background-color: rgba(31, 38, 51, .78) !important;
  background-image: linear-gradient(145deg, rgba(54, 64, 83, .90) 0%, rgba(33, 41, 55, .86) 50%, rgba(25, 33, 47, .84) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .16) !important;
  -webkit-backdrop-filter: saturate(165%) blur(30px);
  backdrop-filter: saturate(165%) blur(30px);
}
html.io-black-mode body[class*="login-body-"] .login-forms,
body.io-black-mode[class*="login-body-"] .login-forms,
.io-black-mode body[class*="login-body-"] .login-forms,
html.io-black-mode body[class*="login-body-"] .login-forms label,
body.io-black-mode[class*="login-body-"] .login-forms label,
.io-black-mode body[class*="login-body-"] .login-forms label,
html.io-black-mode body[class*="login-body-"] .login-forms .text-muted,
body.io-black-mode[class*="login-body-"] .login-forms .text-muted,
.io-black-mode body[class*="login-body-"] .login-forms .text-muted {
  color: #dfe6f2 !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms .form-control,
body.io-black-mode[class*="login-body-"] .login-forms .form-control,
.io-black-mode body[class*="login-body-"] .login-forms .form-control,
html.io-black-mode body[class*="login-body-"] .login-forms input,
body.io-black-mode[class*="login-body-"] .login-forms input,
.io-black-mode body[class*="login-body-"] .login-forms input,
html.io-black-mode body[class*="login-body-"] .login-forms select,
body.io-black-mode[class*="login-body-"] .login-forms select,
.io-black-mode body[class*="login-body-"] .login-forms select,
html.io-black-mode body[class*="login-body-"] .login-forms textarea,
body.io-black-mode[class*="login-body-"] .login-forms textarea,
.io-black-mode body[class*="login-body-"] .login-forms textarea {
  color: #edf2fb !important;
  background-color: rgba(13, 18, 27, .78) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(94, 123, 174, .055)) !important;
  border-color: rgba(255, 255, 255, .17) !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms input::placeholder,
body.io-black-mode[class*="login-body-"] .login-forms input::placeholder,
.io-black-mode body[class*="login-body-"] .login-forms input::placeholder,
html.io-black-mode body[class*="login-body-"] .login-forms textarea::placeholder,
body.io-black-mode[class*="login-body-"] .login-forms textarea::placeholder,
.io-black-mode body[class*="login-body-"] .login-forms textarea::placeholder {
  color: rgba(218, 226, 240, .58) !important;
}

/* Member center: clearer profile header, balanced sidebar/content hierarchy. */
body.user-center main.container {
  width: calc(100% - 32px);
  max-width: 1320px !important;
  padding-top: 8px;
  padding-bottom: 28px;
}
body.user-center .box-head-author {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 24px !important;
  box-shadow: 0 16px 38px rgba(35, 58, 94, .10), inset 0 1px 0 rgba(255, 255, 255, .25);
}
body.user-center .box-head-author .box-head-bg {
  min-height: 190px;
  border-radius: inherit;
}
body.user-center .box-head-author .box-head-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(9, 18, 34, .40), rgba(9, 18, 34, .08) 70%, rgba(9, 18, 34, .24));
}
body.user-center .box-head-author .box-head-content {
  z-index: 1;
  padding: clamp(18px, 3vw, 32px);
}
body.user-center .box-head-author .avatar-md {
  --this-size: 68px;
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
body.user-center .box-head-author .avatar-md img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
body.user-center .box-head-author .author-meta h1 {
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .24);
}
body.user-center .box-head-author .author-meta .text-sm {
  opacity: .9;
}

@media (min-width: 992px) {
  body.user-center main.container > .row {
    display: grid;
    grid-template-columns: minmax(258px, 292px) minmax(0, 1fr);
    gap: 22px;
    margin-left: 0;
    margin-right: 0;
    align-items: start;
  }
  body.user-center main.container > .row > .user-menu,
  body.user-center main.container > .row > .uc-content-body {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  body.user-center main.container > .row {
    display: grid;
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
    gap: 16px;
    margin-left: 0;
    margin-right: 0;
  }
  body.user-center main.container > .row > .user-menu,
  body.user-center main.container > .row > .uc-content-body {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: none;
    padding-left: 0;
    padding-right: 0;
  }
}
body.user-center .user-menu > .card,
body.user-center .uc-content-body .load-ajax-card,
body.user-center .uc-content-body > .tab-content > .card {
  border: 1px solid var(--mf-glass-edge, rgba(142, 167, 202, .24)) !important;
  border-radius: 20px !important;
  box-shadow: var(--mf-glass-shadow, 0 12px 30px rgba(31, 50, 79, .08)), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}
body.user-center .user-menu > .card {
  margin-bottom: 16px !important;
}
body.user-center .user-menu .p-3.d-flex.align-items-center {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 12px !important;
}
body.user-center .user-menu-item {
  min-width: 0;
  padding: 9px 3px;
  border-radius: 12px;
  line-height: 1.4;
  transition: background-color .2s ease, transform .2s ease;
}
body.user-center .user-menu-item:hover {
  background: rgba(115, 151, 209, .12);
  transform: translateY(-1px);
}
body.user-center .user-menu-item .text-lg {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.user-center .uc-set-btn {
  gap: 7px;
  min-height: 42px;
  margin: 3px !important;
  padding: 10px 12px;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  background: transparent !important;
}
body.user-center .uc-set-btn:hover {
  background: rgba(116, 150, 205, .12) !important;
  border-color: rgba(117, 157, 220, .20) !important;
}
body.user-center .uc-set-btn.active,
body.user-center .uc-set-btn.loaded {
  background: rgba(var(--theme-color-rgb, 72, 130, 230), .105) !important;
  border-color: rgba(var(--theme-color-rgb, 72, 130, 230), .24) !important;
  color: var(--theme-color, #4c86d9) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px rgba(45, 76, 124, .06) !important;
}
body.user-center .uc-assets-menu {
  gap: 10px;
  margin-bottom: 16px !important;
}
body.user-center .uc-assets-menu .uc-assets-item {
  min-width: 0;
  padding: 14px !important;
  border: 1px solid rgba(142, 167, 202, .23) !important;
  border-radius: 16px !important;
}
body.user-center .uc-vip-btn {
  min-height: 54px;
  margin-bottom: 16px !important;
  padding: 12px 36px 12px 16px;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(64, 34, 46, .17), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}
body.user-center .uc-content-body {
  min-width: 0;
}
body.user-center .uc-content-body .form-group,
body.user-center .uc-content-body .form-row,
body.user-center .uc-content-body .row {
  min-width: 0;
}
body.user-center .uc-content-body .form-control,
body.user-center .uc-content-body input,
body.user-center .uc-content-body select,
body.user-center .uc-content-body textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* The OneNav mobile center opens its content as a fixed drawer; keep it scrollable and themed. */
@media (max-width: 767.98px) {
  body.user-center main.container {
    width: calc(100% - 20px);
    padding-left: 0;
    padding-right: 0;
  }
  body.user-center .box-head-author {
    border-radius: 19px !important;
    margin-bottom: 16px !important;
  }
  body.user-center .box-head-author .box-head-bg {
    min-height: 150px;
    padding-top: 32%;
  }
  body.user-center .box-head-author .box-head-content {
    padding: 14px;
  }
  body.user-center .box-head-author .avatar-md {
    --this-size: 54px;
  }
  body.user-center .user-menu > .card,
  body.user-center .uc-vip-btn {
    margin-bottom: 12px !important;
  }
  body.user-center .user-menu .p-3.d-flex.align-items-center {
    padding: 8px !important;
    gap: 2px;
  }
  body.user-center .user-menu-item {
    padding: 8px 2px;
  }
  body.user-center .uc-set-btn {
    min-height: 44px;
    padding: 10px;
  }
  body.user-center .uc-content-body {
    background: var(--body-bg-color, #f2f4f7) !important;
    border-left: 1px solid rgba(142, 167, 202, .20);
  }
  .io-black-mode body.user-center .uc-content-body,
  html.io-black-mode body.user-center .uc-content-body,
  body.user-center.io-black-mode .uc-content-body {
    background: var(--body-bg-color, #1b1d1f) !important;
    border-left-color: rgba(255, 255, 255, .09);
  }
  body.user-center .uc-content-body .load-ajax-card,
  body.user-center .uc-content-body > .tab-content > .card {
    border-radius: 18px !important;
  }
}

/* Keep all new dark-mode member panels aligned with OneNav's native canvas. */
html.io-black-mode body.user-center .box-head-author,
body.io-black-mode.user-center .box-head-author,
.io-black-mode body.user-center .box-head-author {
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
}
html.io-black-mode body.user-center .user-menu > .card,
html.io-black-mode body.user-center .uc-content-body .load-ajax-card,
body.io-black-mode.user-center .user-menu > .card,
body.io-black-mode.user-center .uc-content-body .load-ajax-card,
.io-black-mode body.user-center .user-menu > .card,
.io-black-mode body.user-center .uc-content-body .load-ajax-card {
  background-color: rgba(30, 36, 47, .82) !important;
  background-image: linear-gradient(145deg, rgba(46, 54, 69, .78), rgba(28, 34, 45, .82)) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .065) !important;
}
html.io-black-mode body.user-center .user-menu-item:hover,
body.io-black-mode.user-center .user-menu-item:hover,
.io-black-mode body.user-center .user-menu-item:hover {
  background: rgba(255, 255, 255, .065);
}
html.io-black-mode body.user-center .uc-set-btn:hover,
body.io-black-mode.user-center .uc-set-btn:hover,
.io-black-mode body.user-center .uc-set-btn:hover {
  background: rgba(255, 255, 255, .065) !important;
  border-color: rgba(255, 255, 255, .10) !important;
}
html.io-black-mode body.user-center .uc-set-btn.active,
html.io-black-mode body.user-center .uc-set-btn.loaded,
body.io-black-mode.user-center .uc-set-btn.active,
body.io-black-mode.user-center .uc-set-btn.loaded,
.io-black-mode body.user-center .uc-set-btn.active,
.io-black-mode body.user-center .uc-set-btn.loaded {
  color: #c6dcff !important;
  background: rgba(92, 139, 213, .18) !important;
  border-color: rgba(126, 169, 236, .24) !important;
}


/* V1.2.1 targeted fixes: account dropdown + actual OneNav user-center markup */
/* The account dropdown is nested in header navigation; give its own panel enough room. */
.header-fixed,
.header-fixed .header-content,
.header-fixed .navbar,
.header-fixed .navbar-nav,
.header-fixed .menu-item,
.header-fixed .nav-item,
.header-fixed .menu-user-box {
  overflow: visible !important;
}
.header-fixed .sub-menu.mt-5,
.header-fixed ul.sub-menu:has(.menu-user-box),
.header-fixed .menu-user-box {
  z-index: 12000 !important;
}
.header-fixed ul.sub-menu:has(.menu-user-box) {
  width: min(350px, calc(100vw - 24px)) !important;
  min-width: min(320px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100vh - var(--main-nav-hight, 80px) - 18px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  box-sizing: border-box !important;
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.84), rgba(239,245,255,.70)) !important;
  -webkit-backdrop-filter: saturate(1.5) blur(24px);
  backdrop-filter: saturate(1.5) blur(24px);
  box-shadow: 0 20px 48px rgba(22,35,58,.22), inset 0 1px 0 rgba(255,255,255,.82) !important;
  border-radius: 20px !important;
}
.header-fixed .menu-user-box { min-width: 0 !important; max-width: none !important; width: 100%; }
.header-fixed .nav-user-box { margin-top: 0 !important; border-radius: 16px !important; }
.header-fixed .menu-user-box .user-btn,
.header-fixed .menu-user-box .user-btn .d-flex { min-width: 0; gap: 5px; }
.header-fixed .menu-user-box .menu-user-btn { min-width: 0; white-space: normal; line-height: 1.25; padding: 8px 5px; }
.header-fixed .menu-user-box .menu-user-btn span { overflow-wrap: anywhere; }
html.io-black-mode .header-fixed ul.sub-menu:has(.menu-user-box),
.io-black-mode .header-fixed ul.sub-menu:has(.menu-user-box) {
  background: linear-gradient(145deg, rgba(38,43,53,.97), rgba(22,27,36,.96)) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
@media (max-width: 767.98px) {
  .header-fixed ul.sub-menu:has(.menu-user-box) { width: calc(100vw - 20px) !important; min-width: 0 !important; max-width: calc(100vw - 20px) !important; max-height: calc(100dvh - 76px) !important; }
  .header-fixed .menu-user-box .user-btn .d-flex { flex-wrap: wrap; }
  .header-fixed .menu-user-box .menu-user-btn { flex: 1 1 28%; }
}

/* User center markup in OneNav is not consistently body.user-center; target its real components directly. */
.uc-content-body { min-width: 0 !important; }
.uc-content-body .load-ajax-card,
.uc-content-body .tab-content > .card,
.user-menu > .card,
.user-menu .card,
.uc-assets-menu .uc-assets-item {
  border: 1px solid rgba(142,167,202,.28) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.80), rgba(245,248,253,.68)) !important;
  -webkit-backdrop-filter: saturate(1.35) blur(18px);
  backdrop-filter: saturate(1.35) blur(18px);
  box-shadow: 0 14px 34px rgba(34,54,86,.09), inset 0 1px 0 rgba(255,255,255,.78) !important;
}
.user-menu > .card { margin-bottom: 16px !important; overflow: hidden; }
.user-menu .card-header { padding: 18px 20px 12px; }
.user-menu .card-body { padding: 18px !important; }
.uc-content-body .load-ajax-card,
.uc-content-body .tab-content > .card { padding: clamp(16px, 2.2vw, 26px) !important; margin-bottom: 18px; }
.uc-content-body .card-header { padding: 0 0 14px !important; margin-bottom: 16px; }
.uc-content-body .form-control,
.uc-content-body input:not([type=checkbox]):not([type=radio]),
.uc-content-body select,
.uc-content-body textarea {
  min-height: 42px; border: 1px solid rgba(130,151,182,.26) !important;
  border-radius: 12px !important; background: rgba(255,255,255,.66) !important;
  box-shadow: inset 0 1px 2px rgba(25,45,75,.035) !important;
}
.user-menu-item { border-radius: 14px; transition: background .2s, transform .2s; }
.user-menu-item:hover { background: rgba(103,145,216,.12); transform: translateY(-1px); }
.uc-set-btn { border-radius: 12px !important; }
html.io-black-mode .uc-content-body .load-ajax-card,
html.io-black-mode .uc-content-body .tab-content > .card,
html.io-black-mode .user-menu > .card,
html.io-black-mode .user-menu .card,
html.io-black-mode .uc-assets-menu .uc-assets-item,
.io-black-mode .uc-content-body .load-ajax-card,
.io-black-mode .uc-content-body .tab-content > .card,
.io-black-mode .user-menu > .card,
.io-black-mode .user-menu .card,
.io-black-mode .uc-assets-menu .uc-assets-item {
  color: var(--main-color, #d9dde5) !important;
  background: linear-gradient(145deg, rgba(43,49,61,.92), rgba(28,33,43,.94)) !important;
  border-color: rgba(255,255,255,.105) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
html.io-black-mode .uc-content-body .form-control,
html.io-black-mode .uc-content-body input:not([type=checkbox]):not([type=radio]),
html.io-black-mode .uc-content-body select,
html.io-black-mode .uc-content-body textarea,
.io-black-mode .uc-content-body .form-control,
.io-black-mode .uc-content-body input:not([type=checkbox]):not([type=radio]),
.io-black-mode .uc-content-body select,
.io-black-mode .uc-content-body textarea { color: #e4e8f0 !important; background: rgba(15,19,27,.62) !important; border-color: rgba(255,255,255,.14) !important; }
@media (min-width: 992px) {
  .user-center main.container > .row,
  main.container:has(> .row > .uc-content-body) > .row {
    display: grid; grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); gap: 22px; align-items: start;
  }
  .user-center main.container > .row > .user-menu,
  .user-center main.container > .row > .uc-content-body,
  main.container:has(> .row > .uc-content-body) > .row > .user-menu,
  main.container:has(> .row > .uc-content-body) > .row > .uc-content-body { width: auto; max-width: none; min-width: 0; padding-left: 0; padding-right: 0; flex: none; }
}
@media (max-width: 767.98px) {
  .uc-content-body .load-ajax-card, .uc-content-body .tab-content > .card { border-radius: 17px !important; padding: 15px !important; }
  .user-menu .card-body { padding: 13px !important; }
}


/* =========================================================
   V1.2.2 targeted fixes
   1) Reduce hover gap between account icon and dropdown
   2) Preserve OneNav login background image while darkening it
   3) Account menu layout refinements
   ========================================================= */

/* Keep the dropdown close to its trigger; the original mt-5 class
   adds a large gap and can break pointer hover continuity. */
.header-fixed .navbar-nav > li:has(> .sub-menu .menu-user-box),
.header-fixed .navbar-nav > li:has(> ul.sub-menu) {
  position: relative;
}
.header-fixed ul.sub-menu:has(.menu-user-box) {
  margin-top: 0 !important;
  padding-top: 8px !important;
  top: 100% !important;
  transform: translateY(-2px);
  z-index: 10050 !important;
}
.header-fixed ul.sub-menu:has(.menu-user-box)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 12px;
  background: transparent;
}
.header-fixed ul.sub-menu:has(.menu-user-box) .menu-user-box {
  margin-top: 0 !important;
}
.header-fixed ul.sub-menu:has(.menu-user-box) .nav-user-box {
  margin-top: 0 !important;
}
.header-fixed .menu-user-box .user-btn .d-flex {
  gap: 7px;
}
.header-fixed .menu-user-box .menu-user-btn {
  min-height: 38px;
  border-radius: 11px !important;
  white-space: normal;
  line-height: 1.25;
  padding: 8px 7px;
}
.header-fixed .menu-user-box .menu-user-btn i {
  margin-right: 3px;
}
.header-fixed ul.sub-menu:has(.menu-user-box) {
  max-height: min(72vh, 560px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* Login / register / lost-password pages:
   don't replace the theme's original background with a flat color.
   Keep the original background image/layout and add a dark translucent
   overlay in dark mode. */
html.io-black-mode body.login-page,
html.io-black-mode body.login-body,
html.io-black-mode body[class*="login-body"],
.io-black-mode body.login-page,
.io-black-mode body.login-body,
.io-black-mode body[class*="login-body"] {
  background-color: #111722 !important;
  color: #e9edf5 !important;
}
html.io-black-mode body.login-page::before,
html.io-black-mode body.login-body::before,
html.io-black-mode body[class*="login-body"]::before,
.io-black-mode body.login-page::before,
.io-black-mode body.login-body::before,
.io-black-mode body[class*="login-body"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(135deg, rgba(5,9,17,.62), rgba(9,15,25,.78));
}
html.io-black-mode body.login-page > *,
html.io-black-mode body.login-body > *,
html.io-black-mode body[class*="login-body"] > *,
.io-black-mode body.login-page > *,
.io-black-mode body.login-body > *,
.io-black-mode body[class*="login-body"] > * {
  position: relative;
  z-index: 1;
}
html.io-black-mode .login-box,
html.io-black-mode .login-content,
html.io-black-mode .login-form,
html.io-black-mode .login-container,
html.io-black-mode .login-card,
.io-black-mode .login-box,
.io-black-mode .login-content,
.io-black-mode .login-form,
.io-black-mode .login-container,
.io-black-mode .login-card {
  color: #e9edf5 !important;
  background: rgba(18,24,35,.78) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
html.io-black-mode .login-box input,
html.io-black-mode .login-content input,
html.io-black-mode .login-form input,
html.io-black-mode .login-container input,
.io-black-mode .login-box input,
.io-black-mode .login-content input,
.io-black-mode .login-form input,
.io-black-mode .login-container input {
  color: #eef2f8 !important;
  background: rgba(5,9,16,.56) !important;
  border-color: rgba(255,255,255,.16) !important;
}
@media (max-width: 767px) {
  .header-fixed ul.sub-menu:has(.menu-user-box) {
    max-height: calc(100dvh - 72px);
    width: min(360px, calc(100vw - 18px)) !important;
    max-width: calc(100vw - 18px) !important;
  }
  .header-fixed .menu-user-box .user-btn .d-flex {
    gap: 5px;
  }
  .header-fixed .menu-user-box .menu-user-btn {
    flex: 1 1 28%;
    font-size: 12px;
  }
}


/* ==========================================================
   V1.3.0 — Personal Center Layout Refresh
   Keep OneNav template, AJAX tabs, account routes and data logic intact.
   ========================================================== */
body.user-center {
  --mf-uc-surface: rgba(255,255,255,.76);
  --mf-uc-surface-strong: rgba(255,255,255,.92);
  --mf-uc-border: rgba(115,142,181,.20);
  --mf-uc-muted: #758096;
  --mf-uc-text: #202a3a;
  --mf-uc-accent: var(--theme-color, #4d83e5);
  --mf-uc-shadow: 0 12px 34px rgba(32,58,98,.075), inset 0 1px 0 rgba(255,255,255,.82);
}
html.io-black-mode body.user-center,
body.io-black-mode.user-center {
  --mf-uc-surface: rgba(29,35,46,.78);
  --mf-uc-surface-strong: rgba(35,42,55,.94);
  --mf-uc-border: rgba(220,230,255,.10);
  --mf-uc-muted: #9aa8bd;
  --mf-uc-text: #edf2fb;
  --mf-uc-shadow: 0 14px 36px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.035);
}
body.user-center main.container {
  width: min(1320px, calc(100% - 36px));
  max-width: 1320px;
  padding-left: 0;
  padding-right: 0;
  margin-top: 22px !important;
  margin-bottom: 42px !important;
  color: var(--mf-uc-text);
}
body.user-center .box-head-author {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 24px !important;
  border: 1px solid var(--mf-uc-border) !important;
  border-radius: 26px !important;
  background: var(--mf-uc-surface) !important;
  box-shadow: var(--mf-uc-shadow) !important;
}
body.user-center .box-head-author .box-head-bg {
  min-height: 190px;
  padding-top: 0 !important;
  background-position: center 48%;
  background-size: cover;
}
body.user-center .box-head-author .box-head-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(13,25,45,.03) 0%,rgba(13,25,45,.14) 42%,rgba(13,25,45,.64) 100%);
}
body.user-center .box-head-author .box-head-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: -1px;
  padding: 22px 26px 24px !important;
  color: #fff !important;
  background: linear-gradient(180deg,rgba(255,255,255,.76),var(--mf-uc-surface-strong)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
html.io-black-mode body.user-center .box-head-author .box-head-content,
body.io-black-mode.user-center .box-head-author .box-head-content {
  background: linear-gradient(180deg,rgba(24,30,40,.74),var(--mf-uc-surface-strong)) !important;
}
body.user-center .box-head-author .box-head-content .avatar,
body.user-center .box-head-author .box-head-content .avatar-img,
body.user-center .box-head-author .box-head-content img.avatar {
  flex: 0 0 auto;
  border: 3px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 7px 22px rgba(0,0,0,.18) !important;
}
body.user-center .box-head-author .box-head-content :is(h1,h2,h3,.text-lg,.author-name) {
  color: var(--mf-uc-text) !important;
  font-weight: 750;
  letter-spacing: -.025em;
}
body.user-center .box-head-author .box-head-content :is(.text-muted,small,.text-sm) {
  color: var(--mf-uc-muted) !important;
}
body.user-center main.container > .row,
body.user-center main.container > .row:has(> .uc-content-body) {
  display: grid !important;
  grid-template-columns: minmax(245px, 285px) minmax(0,1fr) !important;
  gap: 22px !important;
  align-items: start;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.user-center main.container > .row > .user-menu,
body.user-center main.container > .row > .uc-content-body {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.user-center .user-menu > .card,
body.user-center .user-menu .card,
body.user-center .uc-content-body .card,
body.user-center .uc-content-body .load-ajax-card,
body.user-center .uc-content-body .tab-content > .card {
  border: 1px solid var(--mf-uc-border) !important;
  border-radius: 20px !important;
  background: var(--mf-uc-surface) !important;
  color: var(--mf-uc-text);
  box-shadow: var(--mf-uc-shadow) !important;
  overflow: hidden;
}
body.user-center .user-menu > .card { margin-bottom: 16px !important; }
body.user-center .user-menu .card-body { padding: 17px !important; }
body.user-center .user-menu .p-3.d-flex.align-items-center {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 5px;
  padding: 12px !important;
  border-top: 1px solid var(--mf-uc-border);
}
body.user-center .user-menu-item {
  min-width: 0;
  padding: 11px 4px !important;
  border-radius: 13px;
  text-align: center;
  color: var(--mf-uc-muted) !important;
  transition: background .18s ease, transform .18s ease;
}
body.user-center .user-menu-item:hover {
  background: rgba(95,140,220,.10);
  transform: translateY(-1px);
}
body.user-center .user-menu-item .text-lg {
  display: block;
  margin-bottom: 4px;
  color: var(--mf-uc-text) !important;
  font-size: 1.25rem;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}
body.user-center .uc-set-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin: 3px 0 !important;
  padding: 11px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
  color: var(--mf-uc-text) !important;
  background: transparent !important;
  text-align: left;
  transition: background .18s ease,border-color .18s ease,transform .18s ease;
}
body.user-center .uc-set-btn:hover {
  background: rgba(105,145,215,.10) !important;
  border-color: var(--mf-uc-border) !important;
}
body.user-center .uc-set-btn.active,
body.user-center .uc-set-btn.loaded {
  color: var(--mf-uc-accent) !important;
  background: rgba(88,135,226,.13) !important;
  border-color: rgba(88,135,226,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24),0 5px 15px rgba(35,76,140,.055) !important;
}
body.user-center .uc-set-btn i,
body.user-center .uc-set-btn svg { flex: 0 0 18px; }
body.user-center .uc-vip-btn {
  display: block;
  min-height: 58px;
  margin: 0 0 16px !important;
  padding: 16px 40px 16px 18px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(64,34,46,.14),inset 0 1px 0 rgba(255,255,255,.15) !important;
}
body.user-center .uc-assets-menu {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px !important;
  margin-bottom: 18px !important;
}
body.user-center .uc-assets-menu .uc-assets-item {
  min-width: 0;
  padding: 16px !important;
  border: 1px solid var(--mf-uc-border) !important;
  border-radius: 17px !important;
  background: var(--mf-uc-surface) !important;
  color: var(--mf-uc-text) !important;
  box-shadow: 0 8px 22px rgba(32,58,98,.045),inset 0 1px 0 rgba(255,255,255,.35);
}
body.user-center .uc-content-body { min-width: 0; }
body.user-center .uc-content-body :is(.tab-content,.tab-pane) { min-width: 0; }
body.user-center .uc-content-body :is(.card-header,.footprint-head) {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--mf-uc-border) !important;
  background: transparent !important;
}
body.user-center .uc-content-body :is(.card-body,.footprint-body) { padding: 20px !important; }
body.user-center .footprint-card {
  overflow: hidden;
  border: 1px solid var(--mf-uc-border) !important;
  border-radius: 18px !important;
  background: var(--mf-uc-surface) !important;
}
body.user-center .footprint-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--mf-uc-border);
}
body.user-center .uc-content-body :is(input,select,textarea,.form-control) {
  max-width: 100%;
  box-sizing: border-box;
  color: var(--mf-uc-text);
  border-radius: 12px !important;
}
html.io-black-mode body.user-center .uc-content-body :is(input,select,textarea,.form-control),
body.io-black-mode.user-center .uc-content-body :is(input,select,textarea,.form-control) {
  color: #edf2fb !important;
  background-color: rgba(9,13,20,.58) !important;
  border-color: rgba(210,224,255,.16) !important;
}
html.io-black-mode body.user-center .uc-content-body :is(input,select,textarea,.form-control)::placeholder,
body.io-black-mode.user-center .uc-content-body :is(input,select,textarea,.form-control)::placeholder { color: #8996aa !important; }
body.user-center .uc-content-body :is(.table,table) { color: var(--mf-uc-text); }
body.user-center .uc-content-body .table > :not(caption) > * > * { border-color: var(--mf-uc-border); }
html.io-black-mode body.user-center .uc-content-body .table,
body.io-black-mode.user-center .uc-content-body .table { --bs-table-bg: transparent; --bs-table-color: var(--mf-uc-text); }

@media (min-width: 768px) {
  body.user-center .user-menu { position: sticky; top: 92px; }
}
@media (max-width: 991.98px) {
  body.user-center main.container > .row,
  body.user-center main.container > .row:has(> .uc-content-body) {
    grid-template-columns: minmax(220px, 250px) minmax(0,1fr) !important;
    gap: 14px !important;
  }
  body.user-center .uc-assets-menu { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
  body.user-center main.container {
    width: calc(100% - 20px);
    margin-top: 12px !important;
    margin-bottom: 24px !important;
  }
  body.user-center .box-head-author { margin-bottom: 14px !important; border-radius: 20px !important; }
  body.user-center .box-head-author .box-head-bg { min-height: 130px; }
  body.user-center .box-head-author .box-head-content {
    gap: 12px;
    padding: 14px !important;
    align-items: center;
    flex-wrap: wrap;
  }
  body.user-center main.container > .row,
  body.user-center main.container > .row:has(> .uc-content-body) {
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
  }
  body.user-center main.container > .row > .user-menu,
  body.user-center main.container > .row > .uc-content-body { width: 100% !important; }
  body.user-center .user-menu { position: static; }
  body.user-center .user-menu > .card { margin-bottom: 12px !important; }
  body.user-center .user-menu .card-body { padding: 12px !important; }
  body.user-center .user-menu .p-3.d-flex.align-items-center {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 3px;
    padding: 8px !important;
  }
  body.user-center .user-menu-item { padding: 8px 2px !important; font-size: 12px; }
  body.user-center .user-menu-item .text-lg { font-size: 1.08rem; }
  body.user-center .uc-set-btn { min-height: 42px; padding: 9px 10px !important; }
  body.user-center .uc-assets-menu { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px !important; }
  body.user-center .uc-assets-menu .uc-assets-item { padding: 12px !important; }
  body.user-center .uc-content-body .load-ajax-card,
  body.user-center .uc-content-body .tab-content > .card { border-radius: 17px !important; }
  body.user-center .uc-content-body :is(.card-header,.footprint-head) { padding: 14px !important; }
  body.user-center .uc-content-body :is(.card-body,.footprint-body) { padding: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.user-center .uc-set-btn,
  body.user-center .user-menu-item { transition: none !important; }
}


/* Login / registration / password recovery: OneNav uses body classes
   min-img/max-img/no-img plus login-body-login/reg/lost. */
body.min-img, body.max-img, body.no-img {
  background-color: #f2f5fa;
  background-image:
    radial-gradient(ellipse at 12% 10%, rgba(105,151,230,.16), transparent 38%),
    radial-gradient(ellipse at 88% 82%, rgba(159,133,220,.12), transparent 35%);
}
body.min-img .login-container,
body.max-img .login-container,
body.no-img .login-container {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 74px);
  min-height: calc(100dvh - 74px);
}
body.min-img .login-body,
body.max-img .login-body,
body.no-img .login-body {
  position: relative;
  width: min(900px, calc(100% - 32px));
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.68) !important;
  box-shadow: 0 28px 80px rgba(36,59,98,.16), inset 0 1px 0 rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
}
body.min-img .login-img,
body.max-img .login-img {
  min-width: 0;
  background-position: center;
  background-size: cover;
}
body.min-img .login-forms,
body.max-img .login-forms,
body.no-img .login-forms {
  min-width: 0;
  color: #202a3a;
  background: rgba(255,255,255,.58);
}
body.min-img .login-forms .sign-header,
body.max-img .login-forms .sign-header,
body.no-img .login-forms .sign-header { color: #202a3a !important; font-weight: 760; letter-spacing: -.025em; }
body.min-img .login-forms .text-muted,
body.max-img .login-forms .text-muted,
body.no-img .login-forms .text-muted,
body.min-img .login-forms label,
body.max-img .login-forms label,
body.no-img .login-forms label { color: #657188 !important; }
body.min-img .login-forms .form-control,
body.max-img .login-forms .form-control,
body.no-img .login-forms .form-control {
  min-height: 46px;
  color: #202a3a !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(123,148,187,.28) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 2px rgba(30,55,90,.035) !important;
}
body.min-img .login-forms .form-control::placeholder,
body.max-img .login-forms .form-control::placeholder,
body.no-img .login-forms .form-control::placeholder { color: #8994a7 !important; }
body.min-img .login-forms .form-control:focus,
body.max-img .login-forms .form-control:focus,
body.no-img .login-forms .form-control:focus {
  border-color: rgba(77,131,229,.65) !important;
  box-shadow: 0 0 0 3px rgba(77,131,229,.12) !important;
}
html.io-black-mode body.min-img,
html.io-black-mode body.max-img,
html.io-black-mode body.no-img,
body.io-black-mode.min-img,
body.io-black-mode.max-img,
body.io-black-mode.no-img {
  color: #eaf0fa !important;
  background-color: #171b22 !important;
  background-image:
    radial-gradient(ellipse at 12% 10%, rgba(66,112,190,.24), transparent 40%),
    radial-gradient(ellipse at 88% 82%, rgba(122,94,180,.17), transparent 38%),
    linear-gradient(145deg,#171b22,#1d2330 55%,#171b22) !important;
}
html.io-black-mode body.min-img .login-body,
html.io-black-mode body.max-img .login-body,
html.io-black-mode body.no-img .login-body,
body.io-black-mode.min-img .login-body,
body.io-black-mode.max-img .login-body,
body.io-black-mode.no-img .login-body {
  background: rgba(27,33,44,.78) !important;
  border-color: rgba(225,235,255,.13) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.055) !important;
}
html.io-black-mode body.min-img .login-forms,
html.io-black-mode body.max-img .login-forms,
html.io-black-mode body.no-img .login-forms,
body.io-black-mode.min-img .login-forms,
body.io-black-mode.max-img .login-forms,
body.io-black-mode.no-img .login-forms {
  color: #eaf0fa !important;
  background: rgba(25,31,42,.72) !important;
}
html.io-black-mode body.min-img .login-forms .sign-header,
html.io-black-mode body.max-img .login-forms .sign-header,
html.io-black-mode body.no-img .login-forms .sign-header,
body.io-black-mode.min-img .login-forms .sign-header,
body.io-black-mode.max-img .login-forms .sign-header,
body.io-black-mode.no-img .login-forms .sign-header { color: #f3f6fc !important; }
html.io-black-mode body.min-img .login-forms :is(.text-muted,label,small),
html.io-black-mode body.max-img .login-forms :is(.text-muted,label,small),
html.io-black-mode body.no-img .login-forms :is(.text-muted,label,small),
body.io-black-mode.min-img .login-forms :is(.text-muted,label,small),
body.io-black-mode.max-img .login-forms :is(.text-muted,label,small),
body.io-black-mode.no-img .login-forms :is(.text-muted,label,small) { color: #aebbd0 !important; }
html.io-black-mode body.min-img .login-forms a,
html.io-black-mode body.max-img .login-forms a,
html.io-black-mode body.no-img .login-forms a,
body.io-black-mode.min-img .login-forms a,
body.io-black-mode.max-img .login-forms a,
body.io-black-mode.no-img .login-forms a { color: #8bb7ff; }
html.io-black-mode body.min-img .login-forms .form-control,
html.io-black-mode body.max-img .login-forms .form-control,
html.io-black-mode body.no-img .login-forms .form-control,
body.io-black-mode.min-img .login-forms .form-control,
body.io-black-mode.max-img .login-forms .form-control,
body.io-black-mode.no-img .login-forms .form-control {
  color: #f0f4fb !important;
  background: rgba(8,12,19,.58) !important;
  border-color: rgba(210,224,255,.17) !important;
}
html.io-black-mode body.min-img .login-forms .form-control::placeholder,
html.io-black-mode body.max-img .login-forms .form-control::placeholder,
html.io-black-mode body.no-img .login-forms .form-control::placeholder,
body.io-black-mode.min-img .login-forms .form-control::placeholder,
body.io-black-mode.max-img .login-forms .form-control::placeholder,
body.io-black-mode.no-img .login-forms .form-control::placeholder { color: #8996aa !important; }
@media (max-width: 767.98px) {
  body.min-img .login-container,
  body.max-img .login-container,
  body.no-img .login-container { width: 100%; padding: 16px 10px 22px !important; }
  body.min-img .login-body,
  body.max-img .login-body,
  body.no-img .login-body { width: 100%; max-width: 480px; border-radius: 22px !important; }
  body.min-img .login-forms,
  body.max-img .login-forms,
  body.no-img .login-forms { padding: 22px 18px !important; }
}

/* ==========================================================
   v1.3.1 — 2026-10-10 screenshot-driven fixes
   1) restore OneNav animated homepage gradient
   2) rebuild member-center visual hierarchy
   3) make login/register/lost-password dark mode visibly layered
   ========================================================== */

/* 1. Home header: keep OneNav's native animated gradient alive.
   Do not replace its background-image; only restore animation mechanics. */
.header-big.css-color,
.header-banner.header-big.css-color {
  background-size: 400% 400% !important;
  -webkit-animation: mf-onenav-gradient 7.5s ease-in-out infinite !important;
  animation: mf-onenav-gradient 7.5s ease-in-out infinite !important;
  will-change: background-position;
}
@-webkit-keyframes mf-onenav-gradient {
  0%,100% { background-position: 0% 100%; }
  50% { background-position: 100% 0%; }
}
@keyframes mf-onenav-gradient {
  0%,100% { background-position: 0% 100%; }
  50% { background-position: 100% 0%; }
}
/* Some OneNav configs put css-color on the outer search banner only. */
.header-banner.css-color:not(.header-big) {
  background-size: 400% 400% !important;
  -webkit-animation: mf-onenav-gradient 7.5s ease-in-out infinite !important;
  animation: mf-onenav-gradient 7.5s ease-in-out infinite !important;
}

/* 2. Member center: profile becomes a real hero instead of cover + white strip. */
body.user-center main.container {
  max-width: 1280px !important;
  width: calc(100% - 40px) !important;
}
body.user-center .box-head-author {
  position: relative !important;
  min-height: 270px;
  margin-bottom: 24px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background: #24344f;
}
body.user-center .box-head-author .box-head-bg {
  position: absolute !important;
  inset: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  background-position: center !important;
  background-size: cover !important;
  transform: scale(1.015);
}
body.user-center .box-head-author .box-head-bg::after {
  background: linear-gradient(90deg,rgba(8,18,36,.78) 0%,rgba(8,18,36,.38) 48%,rgba(8,18,36,.10) 100%) !important;
}
body.user-center .box-head-author .box-head-content {
  position: absolute !important;
  z-index: 2 !important;
  left: 0; right: 0; bottom: 0;
  min-height: 118px;
  margin: 0 !important;
  padding: 28px 34px !important;
  color: #fff !important;
  background: linear-gradient(180deg,transparent,rgba(7,15,29,.72)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.user-center .box-head-author .box-head-content :is(h1,h2,h3,.text-lg,.author-name) { color:#fff !important; }
body.user-center .box-head-author .box-head-content :is(.text-muted,small,.text-sm) { color:rgba(255,255,255,.74) !important; }
body.user-center .box-head-author .box-head-content .avatar,
body.user-center .box-head-author .box-head-content .avatar-img,
body.user-center .box-head-author .box-head-content img.avatar {
  width: 72px !important; height:72px !important;
  border: 3px solid rgba(255,255,255,.92) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.28) !important;
}
body.user-center main.container > .row,
body.user-center main.container > .row:has(> .uc-content-body) {
  grid-template-columns: 300px minmax(0,1fr) !important;
  gap: 24px !important;
}
body.user-center .user-menu > .card,
body.user-center .user-menu .card {
  border-radius: 22px !important;
  margin-bottom: 12px !important;
}
body.user-center .uc-content-body > .tab-content.main-tab-content,
body.user-center .uc-content-body .load-ajax-card,
body.user-center .uc-content-body .tab-content > .card {
  min-height: 420px;
  border-radius: 24px !important;
}
body.user-center .uc-set-btn { min-height:48px; border-radius:14px !important; }
body.user-center .uc-set-btn.active,
body.user-center .uc-set-btn.loaded { transform: translateX(3px); }
body.user-center .footprint-card { border-radius:20px !important; }

@media (max-width: 767.98px) {
  body.user-center main.container { width:calc(100% - 20px) !important; }
  body.user-center .box-head-author { min-height:210px; border-radius:24px !important; }
  body.user-center .box-head-author .box-head-content {
    min-height:104px; padding:20px !important; gap:12px !important;
    flex-wrap:nowrap !important;
  }
  body.user-center .box-head-author .box-head-content .avatar,
  body.user-center .box-head-author .box-head-content .avatar-img,
  body.user-center .box-head-author .box-head-content img.avatar { width:60px !important;height:60px !important; }
  body.user-center main.container > .row,
  body.user-center main.container > .row:has(> .uc-content-body) { gap:12px !important; }
  body.user-center .user-menu > .card,
  body.user-center .user-menu .card { border-radius:18px !important; }
  body.user-center .uc-content-body > .tab-content.main-tab-content,
  body.user-center .uc-content-body .load-ajax-card,
  body.user-center .uc-content-body .tab-content > .card { min-height:0; border-radius:20px !important; }
}

/* 3. Login/register/lost password dark mode: avoid the "all black" slab.
   The actual OneNav body is .login-body-login + min-img/max-img/no-img. */
html.io-black-mode body.login-body-login,
html.io-black-mode body.login-body-reg,
html.io-black-mode body.login-body-lost,
body.io-black-mode.login-body-login,
body.io-black-mode.login-body-reg,
body.io-black-mode.login-body-lost {
  color:#edf4ff !important;
  background-color:#111827 !important;
  background-image:
    radial-gradient(circle at 14% 12%, rgba(46,139,255,.32) 0, transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(165,86,255,.25) 0, transparent 36%),
    linear-gradient(135deg,#101827 0%,#18243a 48%,#101521 100%) !important;
  background-size: 140% 140% !important;
  background-attachment: fixed !important;
}
html.io-black-mode body.login-body-login .login-body,
html.io-black-mode body.login-body-reg .login-body,
html.io-black-mode body.login-body-lost .login-body,
body.io-black-mode.login-body-login .login-body,
body.io-black-mode.login-body-reg .login-body,
body.io-black-mode.login-body-lost .login-body {
  background: linear-gradient(145deg,rgba(48,61,82,.90),rgba(25,34,50,.88)) !important;
  border:1px solid rgba(191,215,255,.24) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.12) !important;
  -webkit-backdrop-filter:blur(28px) saturate(150%) !important;
  backdrop-filter:blur(28px) saturate(150%) !important;
}
html.io-black-mode body.login-body-login .login-forms,
html.io-black-mode body.login-body-reg .login-forms,
html.io-black-mode body.login-body-lost .login-forms,
body.io-black-mode.login-body-login .login-forms,
body.io-black-mode.login-body-reg .login-forms,
body.io-black-mode.login-body-lost .login-forms {
  background:linear-gradient(145deg,rgba(37,48,66,.82),rgba(23,31,46,.76)) !important;
  color:#edf4ff !important;
}
html.io-black-mode body.login-body-login .login-forms .form-control,
html.io-black-mode body.login-body-reg .login-forms .form-control,
html.io-black-mode body.login-body-lost .login-forms .form-control,
body.io-black-mode.login-body-login .login-forms .form-control,
body.io-black-mode.login-body-reg .login-forms .form-control,
body.io-black-mode.login-body-lost .login-forms .form-control {
  background:rgba(12,20,33,.72) !important;
  color:#f4f7ff !important;
  border-color:rgba(164,194,240,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html.io-black-mode body.login-body-login .login-forms .form-control:focus,
html.io-black-mode body.login-body-reg .login-forms .form-control:focus,
html.io-black-mode body.login-body-lost .login-forms .form-control:focus {
  border-color:rgba(92,161,255,.75) !important;
  box-shadow:0 0 0 3px rgba(56,132,255,.18) !important;
}
@media (max-width:767.98px) {
  html.io-black-mode body.login-body-login .login-container,
  html.io-black-mode body.login-body-reg .login-container,
  html.io-black-mode body.login-body-lost .login-container { padding:22px 12px 28px !important; }
  html.io-black-mode body.login-body-login .login-body,
  html.io-black-mode body.login-body-reg .login-body,
  html.io-black-mode body.login-body-lost .login-body { border-radius:26px !important; }
  html.io-black-mode body.login-body-login .login-forms,
  html.io-black-mode body.login-body-reg .login-forms,
  html.io-black-mode body.login-body-lost .login-forms { padding:28px 22px !important; }
}

/* ===== v1.4.0 member center restructure ===== */
body.user-center main.mf-uc-dashboard{--mf-uc-gap:18px;max-width:1400px!important;width:min(1400px,calc(100% - 36px))!important;padding-top:18px!important}
body.user-center .mf-uc-dashboard>.box-head-author{min-height:226px!important;margin-bottom:0!important;border-radius:28px!important;box-shadow:0 22px 54px rgba(38,54,88,.15),inset 0 1px 0 rgba(255,255,255,.22)!important}
body.user-center .mf-uc-dashboard>.box-head-author .box-head-content{min-height:112px!important;padding:28px 34px 48px!important}
body.user-center .mf-uc-overview{position:relative;z-index:4;display:grid;grid-template-columns:1.08fr 1.42fr .72fr;gap:var(--mf-uc-gap);align-items:stretch;margin:-34px 26px 22px!important}
body.user-center .mf-uc-overview>*{min-width:0;margin:0!important}
body.user-center .mf-uc-overview .mf-uc-overview-card,body.user-center .mf-uc-overview .uc-assets-menu,body.user-center .mf-uc-overview .uc-vip-btn{min-height:112px;border:1px solid rgba(170,192,224,.28)!important;border-radius:22px!important;background:rgba(252,253,255,.86)!important;box-shadow:0 14px 34px rgba(49,71,108,.10),inset 0 1px 0 rgba(255,255,255,.95)!important;-webkit-backdrop-filter:blur(24px) saturate(155%);backdrop-filter:blur(24px) saturate(155%)}
body.user-center .mf-uc-overview .mf-uc-stats>.p-3{height:100%;padding:22px 18px!important}
body.user-center .mf-uc-overview .mf-uc-stats .user-menu-item{justify-content:center;border-right:1px solid rgba(134,159,196,.16)}
body.user-center .mf-uc-overview .mf-uc-stats .user-menu-item:last-child{border-right:0}
body.user-center .mf-uc-overview .mf-uc-stats .text-lg{font-size:1.35rem!important;font-weight:750;line-height:1.1}
body.user-center .mf-uc-overview .mf-uc-contribute>.p-3{height:100%;padding:14px 18px!important}
body.user-center .mf-uc-overview .mf-uc-contribute .border-bottom{margin-bottom:10px!important;padding-bottom:8px!important}
body.user-center .mf-uc-overview .mf-uc-assets{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:8px!important}
body.user-center .mf-uc-overview .mf-uc-assets .uc-assets-item{min-height:94px;margin:0!important;border:0!important;border-radius:16px!important;box-shadow:none!important;background:rgba(239,245,255,.70)!important}
body.user-center .mf-uc-workspace{display:grid!important;grid-template-columns:238px minmax(0,1fr)!important;gap:20px!important;align-items:start!important;margin:0!important}
body.user-center .mf-uc-workspace>.user-menu,body.user-center .mf-uc-workspace>.uc-content-body{width:auto!important;max-width:none!important;min-width:0!important;padding:0!important;flex:none!important}
body.user-center .mf-uc-workspace>.user-menu{position:sticky!important;top:92px!important}
body.user-center .mf-uc-nav-card{margin-bottom:12px!important;padding:7px!important;border-radius:22px!important;background:rgba(251,253,255,.78)!important}
body.user-center .mf-uc-nav-card>.p-2{padding:0!important}
body.user-center .mf-uc-nav-card .uc-set-btn{min-height:48px!important;margin:3px 0!important;padding:0 12px!important;border-radius:14px!important;font-weight:560}
body.user-center .mf-uc-nav-card .uc-set-btn.active,body.user-center .mf-uc-nav-card .uc-set-btn.loaded{transform:none!important;box-shadow:inset 0 0 0 1px rgba(87,145,234,.22),0 8px 18px rgba(62,105,173,.09)!important}
body.user-center .mf-uc-logout{min-height:44px;border-radius:15px!important}
body.user-center .mf-uc-work-head{display:flex;align-items:center;justify-content:space-between;min-height:68px;margin:0 0 12px;padding:12px 18px;border:1px solid rgba(173,194,224,.25);border-radius:20px;background:rgba(252,253,255,.75);box-shadow:0 10px 28px rgba(44,66,101,.07),inset 0 1px 0 rgba(255,255,255,.94);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%)}
body.user-center .mf-uc-work-head>div{display:flex;flex-direction:column;gap:2px}body.user-center .mf-uc-eyebrow{font-size:10px;line-height:1;letter-spacing:.16em;color:#8b97a9}body.user-center .mf-uc-work-title{font-size:18px;line-height:1.35;font-weight:720;color:#202938}body.user-center .mf-uc-work-dot{width:10px;height:10px;border-radius:50%;background:#42c881;box-shadow:0 0 0 6px rgba(66,200,129,.12)}
body.user-center .mf-uc-workspace .uc-content-body>.tab-content.main-tab-content,body.user-center .mf-uc-workspace .uc-content-body .load-ajax-card,body.user-center .mf-uc-workspace .uc-content-body .tab-content>.card{min-height:390px!important;border-radius:22px!important}
html.io-black-mode body.user-center .mf-uc-overview .mf-uc-overview-card,html.io-black-mode body.user-center .mf-uc-overview .uc-assets-menu,html.io-black-mode body.user-center .mf-uc-overview .uc-vip-btn,html.io-black-mode body.user-center .mf-uc-nav-card,html.io-black-mode body.user-center .mf-uc-work-head{background:linear-gradient(145deg,rgba(34,44,61,.90),rgba(25,33,47,.84))!important;border-color:rgba(159,187,229,.15)!important;box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)!important}
html.io-black-mode body.user-center .mf-uc-overview .mf-uc-assets .uc-assets-item{background:rgba(51,66,91,.52)!important}html.io-black-mode body.user-center .mf-uc-work-title{color:#f0f4fb}html.io-black-mode body.user-center .mf-uc-eyebrow{color:#8795ab}
@media(max-width:767.98px){body.user-center main.mf-uc-dashboard{width:calc(100% - 20px)!important;padding-top:10px!important}body.user-center .mf-uc-dashboard>.box-head-author{min-height:190px!important;border-radius:24px!important}body.user-center .mf-uc-dashboard>.box-head-author .box-head-content{padding:20px 20px 26px!important}body.user-center .mf-uc-overview{grid-template-columns:1fr!important;gap:10px!important;margin:12px 0 14px!important}body.user-center .mf-uc-overview .mf-uc-overview-card,body.user-center .mf-uc-overview .uc-assets-menu,body.user-center .mf-uc-overview .uc-vip-btn{min-height:0!important;border-radius:20px!important}body.user-center .mf-uc-overview .mf-uc-stats>.p-3{padding:15px 8px!important}body.user-center .mf-uc-overview .mf-uc-stats .user-menu-item{padding:2px!important}body.user-center .mf-uc-overview .mf-uc-contribute>.p-3{padding:14px!important}body.user-center .mf-uc-overview .mf-uc-assets{min-height:100px!important}body.user-center .mf-uc-workspace{display:flex!important;flex-direction:column!important;gap:10px!important}body.user-center .mf-uc-workspace>.user-menu{position:static!important;width:100%!important}body.user-center .mf-uc-nav-card{padding:7px!important;border-radius:20px!important}body.user-center .mf-uc-nav-card>.p-2{display:grid!important;grid-template-columns:repeat(5,minmax(64px,1fr));gap:5px;overflow-x:auto;scrollbar-width:none}body.user-center .mf-uc-nav-card>.p-2::-webkit-scrollbar{display:none}body.user-center .mf-uc-nav-card .uc-set-btn{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:66px!important;margin:0!important;padding:8px 5px!important;text-align:center;font-size:12px;line-height:1.15}body.user-center .mf-uc-nav-card .uc-set-btn>i:first-child{margin:0!important;font-size:16px}body.user-center .mf-uc-nav-card .uc-set-btn>i:last-child{display:none!important}body.user-center .mf-uc-logout{margin-bottom:0!important}body.user-center .mf-uc-work-head{min-height:60px;margin-top:2px;border-radius:18px;padding:10px 14px}body.user-center .mf-uc-work-title{font-size:17px}body.user-center .mf-uc-workspace>.uc-content-body{width:100%!important}body.user-center .mf-uc-workspace .uc-content-body>.tab-content.main-tab-content,body.user-center .mf-uc-workspace .uc-content-body .load-ajax-card,body.user-center .mf-uc-workspace .uc-content-body .tab-content>.card{min-height:0!important}}

/* ===== v1.4.0 OneNav custom-login dark mode ===== */
html.io-black-mode body.login-body-login,html.io-black-mode body.login-body-reg,html.io-black-mode body.login-body-lost,html.io-black-mode body.login-body-bind,body.io-black-mode.login-body-login,body.io-black-mode.login-body-reg,body.io-black-mode.login-body-lost,body.io-black-mode.login-body-bind{--mf-login-panel:rgba(42,54,76,.90);--mf-login-form:rgba(31,42,60,.94);--mf-login-input:rgba(20,30,47,.92);color:#f1f5fb!important;background-color:#182235!important;background-image:radial-gradient(circle at 10% 12%,rgba(57,146,255,.38) 0,rgba(57,146,255,0) 33%),radial-gradient(circle at 88% 78%,rgba(164,92,255,.31) 0,rgba(164,92,255,0) 36%),radial-gradient(circle at 50% 45%,rgba(81,113,166,.22) 0,rgba(81,113,166,0) 45%),linear-gradient(135deg,#172238 0%,#22314c 48%,#171f31 100%)!important;background-attachment:fixed!important}
html.io-black-mode body.login-body-login::before,html.io-black-mode body.login-body-reg::before,html.io-black-mode body.login-body-lost::before,html.io-black-mode body.login-body-bind::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.028),transparent 28%,rgba(133,170,226,.055) 54%,transparent 78%);z-index:0}
html.io-black-mode body[class*="login-body-"] .login-container{position:relative;z-index:1}
html.io-black-mode body[class*="login-body-"] .login-body,body.io-black-mode[class*="login-body-"] .login-body{overflow:hidden;background:var(--mf-login-panel)!important;border:1px solid rgba(183,207,243,.28)!important;box-shadow:0 28px 85px rgba(4,10,22,.38),inset 0 1px 0 rgba(255,255,255,.12)!important}
html.io-black-mode body[class*="login-body-"] .login-forms,body.io-black-mode[class*="login-body-"] .login-forms{background:var(--mf-login-form)!important;color:#eef4ff!important}
html.io-black-mode body[class*="login-body-"] .login-forms :is(.sign-header,h1,h2,h3,label,.custom-control-label),body.io-black-mode[class*="login-body-"] .login-forms :is(.sign-header,h1,h2,h3,label,.custom-control-label){color:#f4f7fc!important}
html.io-black-mode body[class*="login-body-"] .login-forms :is(.text-muted,.small,small),body.io-black-mode[class*="login-body-"] .login-forms :is(.text-muted,.small,small){color:#aebbd0!important}
html.io-black-mode body[class*="login-body-"] .login-forms .form-control,html.io-black-mode body[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]),body.io-black-mode[class*="login-body-"] .login-forms .form-control,body.io-black-mode[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]){background:var(--mf-login-input)!important;color:#f5f8ff!important;border:1px solid rgba(160,190,235,.32)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 8px 20px rgba(0,0,0,.10)!important}
html.io-black-mode body[class*="login-body-"] .login-forms input::placeholder,body.io-black-mode[class*="login-body-"] .login-forms input::placeholder{color:#899ab3!important;opacity:1}
html.io-black-mode body[class*="login-body-"] .login-forms .form-control:focus,html.io-black-mode body[class*="login-body-"] .login-forms input:focus{border-color:rgba(91,164,255,.86)!important;box-shadow:0 0 0 4px rgba(66,143,255,.16),inset 0 1px 0 rgba(255,255,255,.05)!important}
html.io-black-mode body[class*="login-body-"] .footer-copyright,html.io-black-mode body[class*="login-body-"] .footer-copyright *{color:rgba(220,230,245,.65)!important}
@media(max-width:767.98px){html.io-black-mode body[class*="login-body-"] .login-container{min-height:calc(100dvh - 120px);padding:28px 12px 18px!important}html.io-black-mode body[class*="login-body-"] .login-body{width:100%!important;max-width:520px!important;border-radius:28px!important}html.io-black-mode body[class*="login-body-"] .login-forms{padding:30px 24px!important}}

/* ==========================================================
   v1.4.1 screenshot-targeted refinements
   - Keep OneNav's current colorful login scene, only darken it in night mode
   - Restore points/balance block to the original sidebar layout
   - .loaded means AJAX cache only; only current menu item is highlighted
   - Refine desktop/mobile spacing and icon hierarchy
   ========================================================== */

/* LOGIN — preserve the parent theme's configured gradient/image.
   We intentionally DO NOT replace background-image here. */
html.io-black-mode body[class*="login-body-"],
body.io-black-mode[class*="login-body-"] {
  color: #eef2f8 !important;
  background-color: var(--bg-color-l, #171a20) !important;
  background-image: linear-gradient(45deg, var(--bg-color-l), var(--bg-color-r)) !important;
  isolation: isolate;
}
html.io-black-mode body[class*="login-body-"]::before,
body.io-black-mode[class*="login-body-"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(5, 7, 12, .48) !important;
}
html.io-black-mode body[class*="login-body-"] .login-container,
body.io-black-mode[class*="login-body-"] .login-container {
  position: relative;
  z-index: 1;
}
html.io-black-mode body[class*="login-body-"] .login-body,
body.io-black-mode[class*="login-body-"] .login-body {
  background: rgba(24, 27, 36, .86) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 24px 68px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(115%);
  backdrop-filter: blur(22px) saturate(115%);
}
html.io-black-mode body[class*="login-body-"] .login-img,
body.io-black-mode[class*="login-body-"] .login-img {
  filter: brightness(.58) saturate(.88) contrast(.96);
}
html.io-black-mode body[class*="login-body-"] .login-img::before,
body.io-black-mode[class*="login-body-"] .login-img::before {
  background: rgba(0,0,0,.16) !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms,
body.io-black-mode[class*="login-body-"] .login-forms {
  background: rgba(27, 30, 39, .80) !important;
  color: #eef2f8 !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms :is(.sign-header,h1,h2,h3,label,.custom-control-label),
body.io-black-mode[class*="login-body-"] .login-forms :is(.sign-header,h1,h2,h3,label,.custom-control-label) {
  color: #f4f6fa !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms :is(.text-muted,.small,small),
body.io-black-mode[class*="login-body-"] .login-forms :is(.text-muted,.small,small) {
  color: #a7b0bf !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms a,
body.io-black-mode[class*="login-body-"] .login-forms a {
  color: #91baff !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms .form-control,
html.io-black-mode body[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]),
body.io-black-mode[class*="login-body-"] .login-forms .form-control,
body.io-black-mode[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(13, 16, 23, .88) !important;
  color: #f5f7fb !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 0 rgba(0,0,0,.22) !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms .form-control:focus,
html.io-black-mode body[class*="login-body-"] .login-forms input:focus,
body.io-black-mode[class*="login-body-"] .login-forms .form-control:focus,
body.io-black-mode[class*="login-body-"] .login-forms input:focus {
  border-color: rgba(100,165,255,.72) !important;
  box-shadow: 0 0 0 3px rgba(64,135,235,.15) !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms input::placeholder,
body.io-black-mode[class*="login-body-"] .login-forms input::placeholder {
  color: rgba(190,199,214,.56) !important;
}
html.io-black-mode body[class*="login-body-"] .footer-copyright,
html.io-black-mode body[class*="login-body-"] .footer-copyright *,
body.io-black-mode[class*="login-body-"] .footer-copyright,
body.io-black-mode[class*="login-body-"] .footer-copyright * {
  color: rgba(226,230,238,.68) !important;
}

/* USER CENTER — only stats + contribution/VIP live in the overview. */
body.user-center .mf-uc-overview {
  grid-template-columns: minmax(300px,.9fr) minmax(520px,1.5fr) !important;
  gap: 16px !important;
  margin: -34px 26px 20px !important;
}
body.user-center .mf-uc-overview:empty { display:none !important; }
body.user-center .mf-uc-overview .mf-uc-overview-card {
  min-height: 104px !important;
}
body.user-center .mf-uc-overview .mf-uc-stats>.p-3 { padding: 18px 14px !important; }
body.user-center .mf-uc-overview .mf-uc-contribute>.p-3 { padding: 12px 16px !important; }
body.user-center .mf-uc-overview .btn-new-posts .tips-box {
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
}

/* Points/balance card: back to the compact pre-v1.4 sidebar presentation. */
body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:0 0 14px !important;
}
body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .uc-assets-item {
  min-width:0 !important;
  min-height:88px !important;
  margin:0 !important;
  padding:13px 10px !important;
  border-radius:17px !important;
}
body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .assets-icon {
  width:30px !important;
  height:30px !important;
  right:7px !important;
  bottom:7px !important;
}

/* Navigation: .loaded is OneNav's AJAX cache marker, not selection. */
body.user-center .mf-uc-nav-card .uc-set-btn.loaded:not(.active):not(.mf-current),
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.loaded:not(.active):not(.mf-current),
body.io-black-mode.user-center .mf-uc-nav-card .uc-set-btn.loaded:not(.active):not(.mf-current) {
  color: var(--mf-uc-text, var(--main-color)) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
body.user-center .mf-uc-nav-card .uc-set-btn.active,
body.user-center .mf-uc-nav-card .uc-set-btn.mf-current {
  color: var(--mf-uc-accent, var(--theme-color)) !important;
  background: linear-gradient(135deg,rgba(89,139,231,.15),rgba(89,139,231,.075)) !important;
  border-color: rgba(89,139,231,.25) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42),0 7px 18px rgba(42,80,142,.08) !important;
}
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.active,
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.mf-current,
body.io-black-mode.user-center .mf-uc-nav-card .uc-set-btn.active,
body.io-black-mode.user-center .mf-uc-nav-card .uc-set-btn.mf-current {
  color:#d7e7ff !important;
  background:linear-gradient(135deg,rgba(88,139,224,.23),rgba(67,105,170,.13)) !important;
  border-color:rgba(117,166,238,.28) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 8px 20px rgba(0,0,0,.16) !important;
}
body.user-center .mf-uc-nav-card .uc-set-btn>i:first-child {
  width:30px;
  height:30px;
  flex:0 0 30px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:9px !important;
  border-radius:10px;
  font-size:15px;
}
body.user-center .mf-uc-nav-card .uc-set-btn>i:last-child { opacity:.48; }
body.user-center .mf-uc-nav-card .uc-set-btn.active>i:last-child,
body.user-center .mf-uc-nav-card .uc-set-btn.mf-current>i:last-child { opacity:.9; transform:translateX(2px); }

body.user-center .mf-uc-workspace {
  grid-template-columns:250px minmax(0,1fr) !important;
  gap:18px !important;
}
body.user-center .mf-uc-nav-card { padding:8px !important; }
body.user-center .mf-uc-nav-card .uc-set-btn {
  min-height:54px !important;
  margin:3px 0 !important;
  padding:7px 10px !important;
  border-radius:14px !important;
}
body.user-center .mf-uc-work-head {
  min-height:66px !important;
  padding:12px 18px !important;
  margin-bottom:10px !important;
}
body.user-center .mf-uc-work-copy { display:flex; flex-direction:column; gap:3px; }
body.user-center .mf-uc-work-title { font-size:18px; font-weight:720; }
body.user-center .mf-uc-work-sub { font-size:11px; color:#929dab; }
html.io-black-mode body.user-center .mf-uc-work-sub { color:#7f8ca0; }

/* Interior panels: less empty-card feeling and cleaner hierarchy. */
body.user-center .uc-content-body .load-ajax-card>.card-body { padding:22px !important; }
body.user-center .uc-content-body :is(.card-header,.footprint-head) { padding:15px 18px !important; }
body.user-center .uc-content-body .footprint-nav { gap:8px; flex-wrap:wrap; }
body.user-center .uc-content-body .footprint-nav>* { border-radius:999px !important; }

@media (max-width: 991.98px) and (min-width: 768px) {
  body.user-center .mf-uc-overview { grid-template-columns:1fr 1.3fr !important; margin-left:12px !important; margin-right:12px !important; }
  body.user-center .mf-uc-workspace { grid-template-columns:220px minmax(0,1fr) !important; }
}

@media (max-width:767.98px) {
  html.io-black-mode body[class*="login-body-"]::before,
  body.io-black-mode[class*="login-body-"]::before { background:rgba(5,7,12,.44) !important; }
  html.io-black-mode body[class*="login-body-"] .login-body,
  body.io-black-mode[class*="login-body-"] .login-body { border-radius:24px !important; padding:10px !important; }
  html.io-black-mode body[class*="login-body-"] .login-forms,
  body.io-black-mode[class*="login-body-"] .login-forms { padding:24px 18px !important; border-radius:18px; }

  body.user-center .mf-uc-overview {
    grid-template-columns:1fr !important;
    gap:10px !important;
    margin:12px 0 14px !important;
  }
  body.user-center .mf-uc-overview .mf-uc-overview-card { min-height:0 !important; }
  body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
    gap:8px !important;
    margin-bottom:10px !important;
  }
  body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .uc-assets-item {
    min-height:82px !important;
    padding:11px 9px !important;
  }
  body.user-center .mf-uc-nav-card { padding:6px !important; }
  body.user-center .mf-uc-nav-card>.p-2 {
    grid-template-columns:repeat(5,minmax(62px,1fr)) !important;
    gap:4px !important;
  }
  body.user-center .mf-uc-nav-card .uc-set-btn {
    min-height:72px !important;
    padding:7px 4px !important;
    gap:6px !important;
    border-radius:13px !important;
  }
  body.user-center .mf-uc-nav-card .uc-set-btn>i:first-child {
    width:32px;
    height:32px;
    flex-basis:32px !important;
    margin:0 !important;
    border-radius:11px;
    font-size:16px;
  }
  body.user-center .mf-uc-work-head { min-height:58px !important; padding:9px 13px !important; border-radius:17px !important; }
  body.user-center .mf-uc-work-title { font-size:16px; }
  body.user-center .mf-uc-work-sub { font-size:10px; }
  body.user-center .mf-uc-logout { min-height:42px !important; margin-bottom:10px !important; }
  body.user-center .uc-content-body .load-ajax-card>.card-body { padding:16px !important; }
}

/* =========================================================
   v1.4.3 — keep rebuilt member-center layout; use reference
   only for icon/card color language. Login dark mode keeps the
   configured gradient/image and simply dims it.
   ========================================================= */

/* ---------- Login: preserve original visual, only dim it ---------- */
html.io-black-mode body[class*="login-body-"],
body.io-black-mode[class*="login-body-"] {
  color:#eef2f8 !important;
  background-color:var(--bg-color-r) !important;
  background-image:
    linear-gradient(rgba(7,8,16,.30),rgba(7,8,16,.30)),
    linear-gradient(45deg,var(--bg-color-l),var(--bg-color-r)) !important;
  background-attachment:fixed !important;
}
html.io-black-mode body[class*="login-body-"]::before,
body.io-black-mode[class*="login-body-"]::before {
  content:none !important;
  display:none !important;
}
html.io-black-mode body[class*="login-body-"] .login-container,
body.io-black-mode[class*="login-body-"] .login-container {
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
html.io-black-mode body[class*="login-body-"] .login-body,
body.io-black-mode[class*="login-body-"] .login-body {
  background:rgba(24,29,39,.90) !important;
  background-image:linear-gradient(145deg,rgba(35,42,56,.92),rgba(23,29,40,.90)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06) !important;
  -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
  backdrop-filter:blur(18px) saturate(125%) !important;
}
html.io-black-mode body[class*="login-body-"] .login-img,
body.io-black-mode[class*="login-body-"] .login-img {
  position:relative;
  overflow:hidden;
  filter:none !important;
}
html.io-black-mode body[class*="login-body-"] .login-img::after,
body.io-black-mode[class*="login-body-"] .login-img::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:rgba(5,7,12,.27);
}
html.io-black-mode body[class*="login-body-"] .login-img>* ,
body.io-black-mode[class*="login-body-"] .login-img>* { position:relative; z-index:2; }
html.io-black-mode body.max-img[class*="login-body-"] .login-img,
body.io-black-mode.max-img[class*="login-body-"] .login-img { position:fixed !important; }
html.io-black-mode body[class*="login-body-"] .login-forms,
body.io-black-mode[class*="login-body-"] .login-forms {
  color:#eef2f8 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms .form-control,
html.io-black-mode body[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]),
body.io-black-mode[class*="login-body-"] .login-forms .form-control,
body.io-black-mode[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]) {
  color:#edf2fa !important;
  -webkit-text-fill-color:#edf2fa !important;
  background:rgba(12,17,26,.78) !important;
  border:1px solid rgba(177,195,222,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms .form-control:focus,
body.io-black-mode[class*="login-body-"] .login-forms .form-control:focus {
  border-color:rgba(101,161,255,.56) !important;
  box-shadow:0 0 0 3px rgba(66,133,244,.14) !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms input::placeholder,
body.io-black-mode[class*="login-body-"] .login-forms input::placeholder { color:rgba(202,211,226,.52) !important; -webkit-text-fill-color:rgba(202,211,226,.52) !important; }
html.io-black-mode body[class*="login-body-"] .login-forms .sign-header,
html.io-black-mode body[class*="login-body-"] .login-forms label,
body.io-black-mode[class*="login-body-"] .login-forms .sign-header,
body.io-black-mode[class*="login-body-"] .login-forms label { color:#f5f7fb !important; }
html.io-black-mode body[class*="login-body-"] .login-forms .text-muted,
html.io-black-mode body[class*="login-body-"] .login-forms small,
body.io-black-mode[class*="login-body-"] .login-forms .text-muted,
body.io-black-mode[class*="login-body-"] .login-forms small { color:#aab4c4 !important; }
html.io-black-mode body[class*="login-body-"] .login-forms .signup,
body.io-black-mode[class*="login-body-"] .login-forms .signup { color:#8fbdff !important; }
html.io-black-mode body[class*="login-body-"] .footer-copyright,
body.io-black-mode[class*="login-body-"] .footer-copyright { background:transparent !important; }

/* ---------- Member center: keep v1.4 rebuilt layout ---------- */
body.user-center main.mf-uc-dashboard {
  max-width:1360px !important;
  width:min(1360px,calc(100% - 34px)) !important;
}
body.user-center .mf-uc-dashboard>.box-head-author {
  min-height:218px !important;
  border-radius:26px !important;
}
body.user-center .mf-uc-overview {
  grid-template-columns:1fr 1.34fr !important;
  margin:-30px 24px 20px !important;
  gap:16px !important;
}
body.user-center .mf-uc-overview .mf-uc-overview-card {
  min-height:104px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(142,170,209,.20) !important;
  box-shadow:0 12px 28px rgba(41,65,101,.08),inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html.io-black-mode body.user-center .mf-uc-overview .mf-uc-overview-card {
  background:linear-gradient(145deg,rgba(35,44,60,.91),rgba(27,35,49,.86)) !important;
  border-color:rgba(255,255,255,.09) !important;
}
body.user-center .mf-uc-workspace { grid-template-columns:246px minmax(0,1fr) !important; gap:18px !important; }
body.user-center .mf-uc-nav-card {
  padding:7px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(142,170,209,.18) !important;
  box-shadow:0 10px 26px rgba(40,62,96,.075) !important;
}
html.io-black-mode body.user-center .mf-uc-nav-card {
  background:linear-gradient(145deg,rgba(34,43,58,.92),rgba(26,34,47,.88)) !important;
  border-color:rgba(255,255,255,.09) !important;
}
body.user-center .mf-uc-nav-card .uc-set-btn {
  min-height:51px !important;
  margin:2px 0 !important;
  padding:6px 10px !important;
  border:1px solid transparent !important;
  border-radius:13px !important;
  background:transparent !important;
  box-shadow:none !important;
  font-weight:540 !important;
}
body.user-center .mf-uc-nav-card .uc-set-btn>i:first-child {
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  margin-right:9px !important;
  border-radius:9px !important;
  font-size:14px !important;
  background:rgba(92,125,255,.08);
}
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(1)>i:first-child { color:#21b95b !important; background:rgba(33,185,91,.10) !important; }
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(2)>i:first-child { color:#f45d73 !important; background:rgba(244,93,115,.10) !important; }
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(3)>i:first-child { color:#ff8b32 !important; background:rgba(255,139,50,.11) !important; }
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(4)>i:first-child { color:#16bfc4 !important; background:rgba(22,191,196,.10) !important; }
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(5)>i:first-child { color:#6687f5 !important; background:rgba(102,135,245,.11) !important; }
body.user-center .mf-uc-nav-card .uc-set-btn.loaded:not(.active):not(.mf-current) {
  color:var(--main-color) !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
body.user-center .mf-uc-nav-card .uc-set-btn.active,
body.user-center .mf-uc-nav-card .uc-set-btn.mf-current {
  color:#ef4b57 !important;
  background:linear-gradient(135deg,rgba(86,143,238,.14),rgba(86,143,238,.07)) !important;
  border-color:rgba(91,147,235,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 6px 15px rgba(47,83,143,.07) !important;
}
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.loaded:not(.active):not(.mf-current) {
  color:#c9d0dc !important;
  background:transparent !important;
  border-color:transparent !important;
}
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.active,
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.mf-current {
  color:#ff6a76 !important;
  background:linear-gradient(135deg,rgba(83,130,203,.20),rgba(64,99,157,.12)) !important;
  border-color:rgba(113,159,227,.25) !important;
}
body.user-center .mf-uc-work-head {
  min-height:62px !important;
  padding:10px 16px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.86) !important;
  border-color:rgba(143,171,209,.18) !important;
}
html.io-black-mode body.user-center .mf-uc-work-head { background:linear-gradient(145deg,rgba(34,43,58,.91),rgba(27,35,49,.86)) !important; }
body.user-center .mf-uc-work-title { font-size:17px !important; }
body.user-center .mf-uc-work-sub { font-size:10px !important; }
body.user-center .mf-uc-workspace .uc-content-body>.tab-content.main-tab-content,
body.user-center .mf-uc-workspace .uc-content-body .load-ajax-card,
body.user-center .mf-uc-workspace .uc-content-body .tab-content>.card {
  border-radius:20px !important;
  box-shadow:0 12px 30px rgba(43,66,102,.075) !important;
}
body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu {
  display:block !important;
  margin:0 0 12px !important;
}
body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .uc-assets-item {
  min-height:70px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid rgba(142,170,209,.17) !important;
  box-shadow:0 8px 20px rgba(42,64,98,.06) !important;
}
html.io-black-mode body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .uc-assets-item {
  background:linear-gradient(145deg,rgba(34,43,58,.90),rgba(27,35,49,.86)) !important;
  border-color:rgba(255,255,255,.08) !important;
}
body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .assets-icon { opacity:.95 !important; }
body.user-center .mf-uc-logout { border-radius:14px !important; box-shadow:none !important; }

@media (max-width:767.98px) {
  html.io-black-mode body[class*="login-body-"] { background-image:linear-gradient(rgba(7,8,16,.34),rgba(7,8,16,.34)),linear-gradient(45deg,var(--bg-color-l),var(--bg-color-r)) !important; }
  html.io-black-mode body[class*="login-body-"] .login-body,
  body.io-black-mode[class*="login-body-"] .login-body { background:rgba(24,29,39,.91) !important; border-radius:22px !important; padding:9px !important; }
  html.io-black-mode body[class*="login-body-"] .login-forms,
  body.io-black-mode[class*="login-body-"] .login-forms { padding:22px 18px !important; }

  body.user-center main.mf-uc-dashboard { width:calc(100% - 18px) !important; }
  body.user-center .mf-uc-dashboard>.box-head-author { min-height:195px !important; border-radius:22px !important; }
  body.user-center .mf-uc-overview { grid-template-columns:1fr !important; margin:11px 0 12px !important; gap:9px !important; }
  body.user-center .mf-uc-overview .mf-uc-overview-card { border-radius:17px !important; }
  body.user-center .mf-uc-workspace { gap:9px !important; }
  body.user-center .mf-uc-nav-card { border-radius:18px !important; padding:6px !important; }
  body.user-center .mf-uc-nav-card>.p-2 { grid-template-columns:repeat(5,minmax(64px,1fr)) !important; gap:4px !important; }
  body.user-center .mf-uc-nav-card .uc-set-btn { min-height:67px !important; padding:6px 3px !important; font-size:12px !important; }
  body.user-center .mf-uc-nav-card .uc-set-btn>i:first-child { width:30px !important; height:30px !important; flex-basis:30px !important; margin:0 !important; border-radius:10px !important; }
  body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .uc-assets-item { min-height:68px !important; }
  body.user-center .mf-uc-work-head { min-height:56px !important; border-radius:16px !important; padding:9px 12px !important; }
  body.user-center .uc-content-body .load-ajax-card>.card-body { padding:15px !important; }
}


/* =========================================================
   v1.4.4 — reference-color refinement
   1) contribution shortcuts: restore vivid reference icon colors
   2) points asset card: orange reference treatment
   3) dark login: remove flat black slab, use plum glass
   4) member nav: coordinated icon/card colors and spacing
   ========================================================= */

/* Contribution panel: clearer four-color icon blocks, same current layout. */
body.user-center .mf-uc-contribute .btn-new-posts {
  position:relative;
  min-width:0;
  padding:4px 6px 2px !important;
  border-radius:14px;
  color:#3f4650 !important;
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
body.user-center .mf-uc-contribute .btn-new-posts:hover {
  transform:translateY(-2px);
  background:rgba(255,255,255,.52);
  box-shadow:0 8px 18px rgba(42,65,101,.07);
}
body.user-center .mf-uc-contribute .btn-new-posts .tips-box.tips-icon {
  width:38px !important;
  height:38px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:0 7px 16px rgba(40,62,97,.10),inset 0 1px 0 rgba(255,255,255,.62) !important;
}
body.user-center .mf-uc-contribute .btn-new-posts .tips-box.tips-icon i { font-size:17px !important; }
body.user-center .mf-uc-contribute .btn-new-posts:nth-child(1) .tips-box { color:#12ad6f !important; background:linear-gradient(145deg,#ecfff6,#dff8ec) !important; }
body.user-center .mf-uc-contribute .btn-new-posts:nth-child(2) .tips-box { color:#f15b70 !important; background:linear-gradient(145deg,#fff2f5,#ffe4e9) !important; }
body.user-center .mf-uc-contribute .btn-new-posts:nth-child(3) .tips-box { color:#ff8a2d !important; background:linear-gradient(145deg,#fff7ed,#ffead8) !important; }
body.user-center .mf-uc-contribute .btn-new-posts:nth-child(4) .tips-box { color:#19bfc3 !important; background:linear-gradient(145deg,#efffff,#ddf7f8) !important; }
body.user-center .mf-uc-contribute .btn-new-posts .text-xs { margin-top:6px !important; font-size:12px !important; font-weight:500; }
html.io-black-mode body.user-center .mf-uc-contribute .btn-new-posts { color:#dce3ee !important; }
html.io-black-mode body.user-center .mf-uc-contribute .btn-new-posts:hover { background:rgba(255,255,255,.05); box-shadow:none; }
html.io-black-mode body.user-center .mf-uc-contribute .btn-new-posts .tips-box.tips-icon { border-color:rgba(255,255,255,.10) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important; }
html.io-black-mode body.user-center .mf-uc-contribute .btn-new-posts:nth-child(1) .tips-box { color:#4fe2a1 !important; background:rgba(33,185,91,.13) !important; }
html.io-black-mode body.user-center .mf-uc-contribute .btn-new-posts:nth-child(2) .tips-box { color:#ff8495 !important; background:rgba(244,93,115,.13) !important; }
html.io-black-mode body.user-center .mf-uc-contribute .btn-new-posts:nth-child(3) .tips-box { color:#ffad67 !important; background:rgba(255,139,50,.14) !important; }
html.io-black-mode body.user-center .mf-uc-contribute .btn-new-posts:nth-child(4) .tips-box { color:#66e0e4 !important; background:rgba(22,191,196,.13) !important; }

/* Asset/points panel inside the content area: match the reference orange card. */
body.user-center .uc-content-body .uc-assets-cards { gap:12px !important; }
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow {
  overflow:hidden;
  border:1px solid rgba(255,173,44,.28) !important;
  border-radius:18px !important;
  background:linear-gradient(135deg,#f7b313 0%,#ff8d0a 58%,#ff6818 100%) !important;
  box-shadow:0 14px 30px rgba(232,126,13,.22),inset 0 1px 0 rgba(255,255,255,.24) !important;
}
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow::after {
  content:""; position:absolute; inset:auto -8% -55% 26%; height:78%; pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,255,255,.16),rgba(255,255,255,0) 68%);
  transform:rotate(-4deg);
}
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .card-body { min-height:112px; padding:18px 20px !important; position:relative; z-index:1; }
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow,
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-title { color:#fff !important; }
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .text-32 { font-size:34px !important; line-height:1; }
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions { display:flex; gap:8px; align-items:center; }
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn {
  color:#fff !important; background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.66) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20) !important; font-weight:600;
}
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn.vc-yellow:not(.btn-outline) {
  color:#f06c15 !important; background:#fff !important; border-color:#fff !important; box-shadow:0 6px 14px rgba(175,75,0,.15) !important;
}
html.io-black-mode body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow {
  filter:saturate(.90) brightness(.86);
  border-color:rgba(255,193,103,.20) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.24) !important;
}

/* Left member actions: coordinated soft backgrounds and a cleaner selected state. */
body.user-center .mf-uc-nav-card .uc-set-btn { color:#4b535e !important; }
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(1) { --mf-nav-rgb:33,185,91; }
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(2) { --mf-nav-rgb:244,93,115; }
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(3) { --mf-nav-rgb:255,139,50; }
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(4) { --mf-nav-rgb:22,191,196; }
body.user-center .mf-uc-nav-card .uc-set-btn:nth-child(5) { --mf-nav-rgb:102,135,245; }
body.user-center .mf-uc-nav-card .uc-set-btn:hover {
  background:rgba(var(--mf-nav-rgb,92,125,255),.07) !important;
  border-color:rgba(var(--mf-nav-rgb,92,125,255),.12) !important;
}
body.user-center .mf-uc-nav-card .uc-set-btn.active,
body.user-center .mf-uc-nav-card .uc-set-btn.mf-current {
  color:rgb(var(--mf-nav-rgb,92,125,255)) !important;
  background:linear-gradient(135deg,rgba(var(--mf-nav-rgb,92,125,255),.13),rgba(var(--mf-nav-rgb,92,125,255),.055)) !important;
  border-color:rgba(var(--mf-nav-rgb,92,125,255),.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 13px rgba(var(--mf-nav-rgb,92,125,255),.08) !important;
}
body.user-center .mf-uc-nav-card .uc-set-btn>i:last-child { opacity:.46; font-size:12px; }
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn { color:#d2d9e4 !important; }
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn:hover { background:rgba(var(--mf-nav-rgb,92,125,255),.10) !important; }
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.active,
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.mf-current {
  color:rgb(var(--mf-nav-rgb,120,155,255)) !important;
  background:rgba(var(--mf-nav-rgb,92,125,255),.14) !important;
  border-color:rgba(var(--mf-nav-rgb,92,125,255),.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045) !important;
}

/* Dark login: keep purple page, turn the central slab into translucent plum glass. */
html.io-black-mode body[class*="login-body-"] .login-body,
body.io-black-mode[class*="login-body-"] .login-body {
  background:linear-gradient(145deg,rgba(45,34,58,.78),rgba(28,31,43,.82)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 24px 70px rgba(24,5,33,.26),inset 0 1px 0 rgba(255,255,255,.075) !important;
  -webkit-backdrop-filter:blur(24px) saturate(135%) !important;
  backdrop-filter:blur(24px) saturate(135%) !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms,
body.io-black-mode[class*="login-body-"] .login-forms {
  background:linear-gradient(160deg,rgba(27,32,43,.36),rgba(55,31,62,.20)) !important;
  border-left:1px solid rgba(255,255,255,.045) !important;
  border-radius:0 18px 18px 0;
}
html.io-black-mode body[class*="login-body-"] .login-forms .form-control,
html.io-black-mode body[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]),
body.io-black-mode[class*="login-body-"] .login-forms .form-control,
body.io-black-mode[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]) {
  color:#eef2f8 !important;
  -webkit-text-fill-color:#eef2f8 !important;
  background:rgba(239,244,255,.10) !important;
  border:1px solid rgba(215,224,242,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms .form-control:focus,
body.io-black-mode[class*="login-body-"] .login-forms .form-control:focus {
  background:rgba(239,244,255,.13) !important;
  border-color:rgba(133,177,255,.58) !important;
  box-shadow:0 0 0 3px rgba(86,132,224,.14),inset 0 1px 0 rgba(255,255,255,.055) !important;
}
html.io-black-mode body[class*="login-body-"] .login-img::after,
body.io-black-mode[class*="login-body-"] .login-img::after {
  background:linear-gradient(145deg,rgba(18,7,31,.22),rgba(19,13,34,.34)) !important;
}

@media (max-width:767.98px) {
  body.user-center .mf-uc-contribute .btn-new-posts { padding:3px 2px 1px !important; }
  body.user-center .mf-uc-contribute .btn-new-posts .tips-box.tips-icon { width:35px !important; height:35px !important; border-radius:11px !important; }
  body.user-center .mf-uc-contribute .btn-new-posts .text-xs { font-size:11px !important; }
  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .card-body { min-height:100px; padding:16px !important; }
  html.io-black-mode body[class*="login-body-"] .login-forms,
  body.io-black-mode[class*="login-body-"] .login-forms { border-left:0 !important; border-radius:17px !important; }
}

/* =========================================================
   v1.4.5 — login first-paint/autofill fix, stronger iOS 26
   liquid-glass member center, and contribution-page clarity.
   ========================================================= */

/* ---------- Login: eliminate white first-paint/autofill flash ---------- */
html.io-black-mode body[class*="login-body-"] .login-forms,
body.io-black-mode[class*="login-body-"] .login-forms {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 12%,rgba(205,98,255,.12),transparent 42%),
    linear-gradient(145deg,rgba(72,42,84,.34),rgba(33,31,49,.28)) !important;
  border-left:1px solid rgba(255,255,255,.08) !important;
  box-shadow:inset 1px 0 0 rgba(255,255,255,.025) !important;
  -webkit-backdrop-filter:blur(18px) saturate(135%) !important;
  backdrop-filter:blur(18px) saturate(135%) !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms::before,
body.io-black-mode[class*="login-body-"] .login-forms::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.055),transparent 33%,rgba(204,111,255,.045) 68%,transparent 100%);
  border-radius:inherit;
}
html.io-black-mode body[class*="login-body-"] .login-forms > *,
body.io-black-mode[class*="login-body-"] .login-forms > * { position:relative; z-index:1; }

html.io-black-mode body[class*="login-body-"] .login-body,
body.io-black-mode[class*="login-body-"] .login-body {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 72% 18%,rgba(188,84,227,.11),transparent 34%),
    linear-gradient(145deg,rgba(64,42,75,.72),rgba(34,31,48,.72)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 26px 72px rgba(38,7,45,.24),inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.14) !important;
  -webkit-backdrop-filter:blur(28px) saturate(145%) !important;
  backdrop-filter:blur(28px) saturate(145%) !important;
}
html.io-black-mode body[class*="login-body-"] .login-body::before,
body.io-black-mode[class*="login-body-"] .login-body::before {
  content:"";
  position:absolute;
  left:2%; right:2%; top:0; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  z-index:3;
}

html.io-black-mode body[class*="login-body-"] .login-forms .form-control,
html.io-black-mode body[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]),
body.io-black-mode[class*="login-body-"] .login-forms .form-control,
body.io-black-mode[class*="login-body-"] .login-forms input:not([type="checkbox"]):not([type="radio"]) {
  color-scheme:dark;
  color:#eef3fb !important;
  -webkit-text-fill-color:#eef3fb !important;
  caret-color:#dbe8ff !important;
  background-color:rgba(33,38,52,.82) !important;
  background-image:linear-gradient(145deg,rgba(255,255,255,.045),rgba(142,97,170,.055)) !important;
  border:1px solid rgba(210,220,238,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 3px 10px rgba(5,8,16,.10) !important;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms input:-webkit-autofill,
html.io-black-mode body[class*="login-body-"] .login-forms input:-webkit-autofill:hover,
html.io-black-mode body[class*="login-body-"] .login-forms input:-webkit-autofill:focus,
html.io-black-mode body[class*="login-body-"] .login-forms input:-internal-autofill-previewed,
html.io-black-mode body[class*="login-body-"] .login-forms input:-internal-autofill-selected,
body.io-black-mode[class*="login-body-"] .login-forms input:-webkit-autofill,
body.io-black-mode[class*="login-body-"] .login-forms input:-webkit-autofill:hover,
body.io-black-mode[class*="login-body-"] .login-forms input:-webkit-autofill:focus,
body.io-black-mode[class*="login-body-"] .login-forms input:-internal-autofill-previewed,
body.io-black-mode[class*="login-body-"] .login-forms input:-internal-autofill-selected {
  -webkit-text-fill-color:#eef3fb !important;
  caret-color:#dbe8ff !important;
  background-color:rgba(33,38,52,.82) !important;
  -webkit-box-shadow:0 0 0 1000px rgb(35,40,54) inset, inset 0 1px 0 rgba(255,255,255,.04) !important;
  box-shadow:0 0 0 1000px rgb(35,40,54) inset, inset 0 1px 0 rgba(255,255,255,.04) !important;
  border:1px solid rgba(210,220,238,.18) !important;
  transition:background-color 99999s ease-out 0s !important;
}
html.io-black-mode body[class*="login-body-"] .login-forms input::placeholder,
body.io-black-mode[class*="login-body-"] .login-forms input::placeholder {
  color:rgba(206,216,233,.55) !important;
  -webkit-text-fill-color:rgba(206,216,233,.55) !important;
  opacity:1 !important;
}

/* ---------- Member center: real iOS 26 liquid-glass surfaces ---------- */
body.user-center .mf-uc-overview .mf-uc-overview-card,
body.user-center .mf-uc-nav-card,
body.user-center .mf-uc-work-head,
body.user-center .uc-content-body .load-ajax-card,
body.user-center .uc-content-body > .tab-content > .card,
body.user-center .uc-assets-menu,
body.user-center .mf-uc-logout {
  background-color:rgba(255,255,255,.48) !important;
  background-image:
    linear-gradient(145deg,rgba(255,255,255,.76),rgba(246,250,255,.42) 48%,rgba(220,234,255,.26)) !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:0 14px 34px rgba(39,61,94,.10),0 3px 10px rgba(39,61,94,.045),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(121,151,194,.10) !important;
  -webkit-backdrop-filter:blur(26px) saturate(175%) !important;
  backdrop-filter:blur(26px) saturate(175%) !important;
}
body.user-center .mf-uc-overview .mf-uc-overview-card,
body.user-center .mf-uc-nav-card,
body.user-center .mf-uc-work-head,
body.user-center .uc-content-body .load-ajax-card,
body.user-center .uc-content-body > .tab-content > .card,
body.user-center .uc-assets-menu { position:relative; overflow:hidden; }
body.user-center .mf-uc-overview .mf-uc-overview-card::before,
body.user-center .mf-uc-nav-card::before,
body.user-center .mf-uc-work-head::before,
body.user-center .uc-content-body .load-ajax-card::before,
body.user-center .uc-assets-menu::before {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  inset:0;
  background:linear-gradient(122deg,rgba(255,255,255,.20),transparent 30%,rgba(134,184,255,.055) 66%,rgba(255,255,255,.13));
}
body.user-center .mf-uc-overview .mf-uc-overview-card > *,
body.user-center .mf-uc-nav-card > *,
body.user-center .mf-uc-work-head > *,
body.user-center .uc-content-body .load-ajax-card > *,
body.user-center .uc-assets-menu > * { position:relative; z-index:1; }
body.user-center .mf-uc-nav-card .uc-set-btn {
  -webkit-backdrop-filter:blur(10px) saturate(135%);
  backdrop-filter:blur(10px) saturate(135%);
}
body.user-center .mf-uc-nav-card .uc-set-btn.active,
body.user-center .mf-uc-nav-card .uc-set-btn.mf-current {
  background:linear-gradient(135deg,rgba(var(--mf-nav-rgb,92,125,255),.16),rgba(255,255,255,.24)) !important;
  border-color:rgba(var(--mf-nav-rgb,92,125,255),.26) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 7px 18px rgba(var(--mf-nav-rgb,92,125,255),.09) !important;
}
html.io-black-mode body.user-center .mf-uc-overview .mf-uc-overview-card,
html.io-black-mode body.user-center .mf-uc-nav-card,
html.io-black-mode body.user-center .mf-uc-work-head,
html.io-black-mode body.user-center .uc-content-body .load-ajax-card,
html.io-black-mode body.user-center .uc-content-body > .tab-content > .card,
html.io-black-mode body.user-center .uc-assets-menu,
html.io-black-mode body.user-center .mf-uc-logout {
  background-color:rgba(30,37,50,.54) !important;
  background-image:linear-gradient(145deg,rgba(48,58,75,.62),rgba(27,35,48,.46) 54%,rgba(43,54,73,.38)) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.10) !important;
  -webkit-backdrop-filter:blur(28px) saturate(150%) !important;
  backdrop-filter:blur(28px) saturate(150%) !important;
}
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.active,
html.io-black-mode body.user-center .mf-uc-nav-card .uc-set-btn.mf-current {
  background:linear-gradient(135deg,rgba(var(--mf-nav-rgb,92,125,255),.18),rgba(255,255,255,.045)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 7px 18px rgba(0,0,0,.10) !important;
}

/* ---------- Contribution page: remove the washed-out/foggy header ---------- */
.new-post-content .contribute-header .contribute-body.blur-bg {
  background-color:rgba(250,252,255,.74) !important;
  background-image:linear-gradient(145deg,rgba(255,255,255,.88),rgba(241,247,255,.66)) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:0 12px 30px rgba(42,65,101,.09),inset 0 1px 0 rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter:blur(16px) saturate(145%) !important;
  backdrop-filter:blur(16px) saturate(145%) !important;
  filter:none !important;
  opacity:1 !important;
}
.new-post-content .contribute-header .contribute-body *,
.new-post-content .contribute-header .contribute-item,
.new-post-content .contribute-header .item-title,
.new-post-content .contribute-header .item-btn,
.new-post-content .contribute-header .item-new-btn,
.new-post-content .contribute-header .badge,
.new-post-content .contribute-header i,
.new-post-content .contribute-header span {
  filter:none !important;
  opacity:1 !important;
}
.new-post-content .contribute-header .contribute-item { color:#4a515d !important; }
.new-post-content .contribute-header .item-title { font-weight:600 !important; }
.new-post-content .contribute-header .item-btn .badge {
  background-color:rgba(255,255,255,.68) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.new-post-content .contribute-header .item-new-btn {
  min-height:32px;
  font-weight:600 !important;
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.74),0 4px 10px rgba(41,63,95,.045) !important;
}
.new-post-content .contribute-header .contribute-item:nth-child(1) .item-title,
.new-post-content .contribute-header .contribute-item:nth-child(1) .item-new-btn { color:#2997f7 !important; }
.new-post-content .contribute-header .contribute-item:nth-child(2) .item-title,
.new-post-content .contribute-header .contribute-item:nth-child(2) .item-new-btn { color:#19aa62 !important; }
.new-post-content .contribute-header .contribute-item:nth-child(3) .item-title,
.new-post-content .contribute-header .contribute-item:nth-child(3) .item-new-btn { color:#f05a68 !important; }
.new-post-content .contribute-header .contribute-item:nth-child(4) .item-title,
.new-post-content .contribute-header .contribute-item:nth-child(4) .item-new-btn { color:#ef7b22 !important; }
html.io-black-mode .new-post-content .contribute-header .contribute-body.blur-bg {
  background-color:rgba(31,38,51,.66) !important;
  background-image:linear-gradient(145deg,rgba(46,56,72,.66),rgba(27,35,48,.58)) !important;
  border-color:rgba(255,255,255,.11) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.065) !important;
}
html.io-black-mode .new-post-content .contribute-header .contribute-item { color:#d7dee9 !important; }
html.io-black-mode .new-post-content .contribute-header .item-btn .badge { background-color:rgba(255,255,255,.055) !important; }

/* Other glass surfaces: keep text/icons crisp; blur only the backdrop itself. */
.card:not(.card-color) > *,
.aside-card > *,
.header-tools .sub-menu > *,
.navbar-header .sub-menu > *,
.search-smart-tips > * {
  filter:none !important;
}

@media (max-width:767.98px) {
  html.io-black-mode body[class*="login-body-"] .login-forms,
  body.io-black-mode[class*="login-body-"] .login-forms {
    background:linear-gradient(145deg,rgba(61,40,72,.42),rgba(31,31,47,.38)) !important;
    border:1px solid rgba(255,255,255,.08) !important;
  }
  body.user-center .mf-uc-overview .mf-uc-overview-card,
  body.user-center .mf-uc-nav-card,
  body.user-center .mf-uc-work-head,
  body.user-center .uc-content-body .load-ajax-card,
  body.user-center .uc-assets-menu {
    -webkit-backdrop-filter:blur(20px) saturate(160%) !important;
    backdrop-filter:blur(20px) saturate(160%) !important;
  }
}

/* =========================================================
   v1.4.6 Crisp-content audit
   OneNav's .blur-bg is intended to blur the backdrop only. On some
   Chromium/mobile GPU paths, the contribution header can look washed out
   when several translucent badges sit on the same backdrop-filter layer.
   Keep this header crisp and use glass-like paint rather than live blur.
   ========================================================= */

/* Contribution selector is intentionally not tied to .new-post-content:
   OneNav can render the same header in more than one wrapper. */
.contribute-header .contribute-body.blur-bg,
.contribute-body.blur-bg.row-a.row-col-4a {
  isolation:isolate;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background-color:rgba(249,252,255,.94) !important;
  background-image:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,248,255,.92)) !important;
  border:1px solid rgba(166,192,228,.28) !important;
  box-shadow:
    0 12px 28px rgba(46,70,108,.08),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(126,157,203,.08) !important;
}
.contribute-header .contribute-body.blur-bg::before,
.contribute-body.blur-bg.row-a.row-col-4a::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.48),transparent 34%,rgba(105,165,255,.05) 72%,rgba(255,255,255,.28));
}
.contribute-header .contribute-body.blur-bg > *,
.contribute-body.blur-bg.row-a.row-col-4a > * {
  position:relative;
  z-index:1;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
}
.contribute-header .contribute-item,
.contribute-header .contribute-item *,
.contribute-body.blur-bg.row-a.row-col-4a .contribute-item,
.contribute-body.blur-bg.row-a.row-col-4a .contribute-item * {
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  text-shadow:none !important;
}
.contribute-header .contribute-item {
  padding:7px 10px 8px !important;
  border-radius:14px;
}
.contribute-header .contribute-item + .contribute-item {
  border-left:1px solid rgba(154,179,214,.13);
}
.contribute-header .item-title {
  font-weight:700 !important;
  letter-spacing:.01em;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
}
.contribute-header .item-title i { margin-right:4px; }
.contribute-header .item-btn .badge {
  color:#59616e !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(151,177,214,.16) !important;
  box-shadow:0 2px 6px rgba(45,68,104,.04),inset 0 1px 0 #fff !important;
}
.contribute-header .item-new-btn {
  min-height:34px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  opacity:1 !important;
  border-width:1px !important;
  box-shadow:0 5px 13px rgba(46,70,108,.055),inset 0 1px 0 rgba(255,255,255,.96) !important;
}
.contribute-header .contribute-item:nth-child(1) .item-title,
.contribute-header .contribute-item:nth-child(1) .item-new-btn { color:#1689ed !important; }
.contribute-header .contribute-item:nth-child(2) .item-title,
.contribute-header .contribute-item:nth-child(2) .item-new-btn { color:#139b59 !important; }
.contribute-header .contribute-item:nth-child(3) .item-title,
.contribute-header .contribute-item:nth-child(3) .item-new-btn { color:#e9485b !important; }
.contribute-header .contribute-item:nth-child(4) .item-title,
.contribute-header .contribute-item:nth-child(4) .item-new-btn { color:#e87317 !important; }

html.io-black-mode .contribute-header .contribute-body.blur-bg,
html.io-black-mode .contribute-body.blur-bg.row-a.row-col-4a {
  background-color:rgba(31,39,53,.95) !important;
  background-image:linear-gradient(145deg,rgba(48,59,77,.96),rgba(27,35,49,.93)) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
html.io-black-mode .contribute-header .contribute-item + .contribute-item { border-left-color:rgba(255,255,255,.07); }
html.io-black-mode .contribute-header .item-btn .badge {
  color:#d9e1ed !important;
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.085) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* Crisp-content audit for the other main glass zones. Do not remove the
   backdrop blur itself; only prevent accidental foreground filter/opacity. */
body.user-center .mf-uc-overview :is(a,button,i,span,p,h1,h2,h3,h4,h5,h6),
body.user-center .mf-uc-nav-card :is(a,button,i,span,p),
body.user-center .mf-uc-work-head :is(a,button,i,span,p,h1,h2,h3,h4,h5,h6),
body.user-center .uc-content-body :is(a,button,i,span,p,h1,h2,h3,h4,h5,h6,label),
.login-forms :is(label,a,button,i,span,p,h1,h2,h3,h4,h5,h6),
.header-nav :is(a,i,span) {
  -webkit-filter:none !important;
  filter:none !important;
}

/* Do not force opacity on disabled controls; only known foreground content. */
body.user-center .mf-uc-overview :is(i,span,h1,h2,h3,h4,h5,h6),
body.user-center .mf-uc-nav-card :is(i,span),
body.user-center .mf-uc-work-head :is(i,span,h1,h2,h3,h4,h5,h6) {
  opacity:1;
}

@media (max-width:767.98px) {
  .contribute-header .contribute-body.blur-bg,
  .contribute-body.blur-bg.row-a.row-col-4a {
    background-color:rgba(249,252,255,.97) !important;
  }
  html.io-black-mode .contribute-header .contribute-body.blur-bg,
  html.io-black-mode .contribute-body.blur-bg.row-a.row-col-4a {
    background-color:rgba(31,39,53,.97) !important;
  }
}

/* =========================================================
   v1.4.7 — crisp contribution header, in-page auth modal,
   stronger home Liquid Glass, iOS Chrome viewport/safe-area fixes
   ========================================================= */

/* 1) Contribution page: light mode must be CRISP, not translucent/foggy.
   Use painted glass (no live backdrop blur on this dense text area). */
html:not(.io-black-mode) .contribute-header .contribute-body.blur-bg,
html:not(.io-black-mode) .contribute-body.blur-bg.row-a.row-col-4a {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  -webkit-filter:none !important;
  filter:none !important;
  opacity:1 !important;
  background:#fbfdff !important;
  background-image:linear-gradient(145deg,#ffffff 0%,#f7faff 58%,#f1f6fd 100%) !important;
  border:1px solid #d9e5f4 !important;
  box-shadow:0 10px 26px rgba(41,66,103,.09),inset 0 1px 0 #fff !important;
}
html:not(.io-black-mode) .contribute-header .contribute-body.blur-bg::before,
html:not(.io-black-mode) .contribute-body.blur-bg.row-a.row-col-4a::before { display:none !important; }
html:not(.io-black-mode) .contribute-header .contribute-item,
html:not(.io-black-mode) .contribute-header .contribute-item * {
  opacity:1 !important;
  -webkit-filter:none !important;
  filter:none !important;
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
}
html:not(.io-black-mode) .contribute-header .contribute-item {
  background:transparent !important;
  color:#344054 !important;
}
html:not(.io-black-mode) .contribute-header .contribute-item + .contribute-item {
  border-left:1px solid #e6edf6 !important;
}
html:not(.io-black-mode) .contribute-header .item-title.badge {
  min-height:24px;
  padding:5px 8px !important;
  font-weight:750 !important;
  line-height:1.2 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
html:not(.io-black-mode) .contribute-header .contribute-item:nth-child(1) .item-title { color:#087fd3 !important; }
html:not(.io-black-mode) .contribute-header .contribute-item:nth-child(2) .item-title { color:#087f47 !important; }
html:not(.io-black-mode) .contribute-header .contribute-item:nth-child(3) .item-title { color:#dc354c !important; }
html:not(.io-black-mode) .contribute-header .contribute-item:nth-child(4) .item-title { color:#d8650a !important; }
html:not(.io-black-mode) .contribute-header .item-btn .badge {
  color:#455267 !important;
  background:#f6f9fd !important;
  border:1px solid #dfe8f3 !important;
  box-shadow:none !important;
  font-weight:650 !important;
}
html:not(.io-black-mode) .contribute-header .item-btn .vc-j-blue { color:#1677c8 !important; background:#eef7ff !important; border-color:#d5eafa !important; }
html:not(.io-black-mode) .contribute-header .item-btn .vc-j-yellow { color:#b86114 !important; background:#fff7e9 !important; border-color:#f7e5c7 !important; }
html:not(.io-black-mode) .contribute-header .item-btn .vc-j-gray { color:#687386 !important; background:#f3f5f8 !important; border-color:#e1e5ea !important; }
html:not(.io-black-mode) .contribute-header .item-new-btn {
  min-height:34px !important;
  opacity:1 !important;
  font-weight:750 !important;
  border:1px solid currentColor !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95) !important;
}
html:not(.io-black-mode) .contribute-header .vc-l-blue { color:#1689ed !important; background:#eaf5ff !important; }
html:not(.io-black-mode) .contribute-header .vc-l-green { color:#139b59 !important; background:#eaf8f0 !important; }
html:not(.io-black-mode) .contribute-header .vc-l-red { color:#e9485b !important; background:#fff0f2 !important; }
html:not(.io-black-mode) .contribute-header .vc-l-yellow { color:#df6814 !important; background:#fff3e9 !important; }

/* Audit: dense light-mode forms should never inherit a visual filter. */
html:not(.io-black-mode) .new-post-content :is(.contribute-header,.card,.form-control,.tox,.mce-panel,.wp-editor-container) {
  -webkit-filter:none !important;
  filter:none !important;
}
html:not(.io-black-mode) .new-post-content :is(input,textarea,select,.form-control) {
  color:#3d4655 !important;
  -webkit-text-fill-color:#3d4655 !important;
  opacity:1 !important;
}
html:not(.io-black-mode) .new-post-content :is(input,textarea,.form-control)::placeholder {
  color:#8994a5 !important;
  -webkit-text-fill-color:#8994a5 !important;
  opacity:1 !important;
}

/* 2) Home page: stronger, more visible iOS 26 Liquid Glass. */
body.home .header-nav,
body.home .header-nav.blur-bg,
body.home .header-nav.blur-bg-20 {
  position:relative;
  isolation:isolate;
  background:rgba(255,255,255,.62) !important;
  background-image:
    linear-gradient(118deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.46) 31%,rgba(173,210,255,.16) 56%,rgba(255,255,255,.54) 100%) !important;
  border:1px solid rgba(255,255,255,.96) !important;
  box-shadow:0 14px 40px rgba(40,64,101,.12),0 2px 8px rgba(40,64,101,.05),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(116,153,207,.12) !important;
  -webkit-backdrop-filter:blur(30px) saturate(185%) !important;
  backdrop-filter:blur(30px) saturate(185%) !important;
}
body.home .header-nav::after {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  left:1.5%; right:1.5%; top:1px; height:44%;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
  opacity:.9;
}
body.home .header-nav > * { position:relative; z-index:1; }

body.home .posts-item.sites-item,
body.home .card:not(.card-color),
body.home .aside-card {
  position:relative;
  isolation:isolate;
  background:rgba(255,255,255,.58) !important;
  background-image:linear-gradient(135deg,rgba(255,255,255,.88),rgba(246,250,255,.48)) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 10px 28px rgba(42,66,103,.085),inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(129,160,204,.08) !important;
  -webkit-backdrop-filter:blur(24px) saturate(175%) !important;
  backdrop-filter:blur(24px) saturate(175%) !important;
}
body.home .posts-item.sites-item:hover,
body.home .card:not(.card-color):hover {
  transform:translateY(-3px);
  background:rgba(255,255,255,.76) !important;
  border-color:#fff !important;
  box-shadow:0 18px 38px rgba(42,66,103,.14),inset 0 1px 0 #fff !important;
}
body.home .search-form .search-key {
  background:rgba(255,255,255,.66) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 12px 30px rgba(34,58,94,.11),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(107,146,201,.10) !important;
  -webkit-backdrop-filter:blur(24px) saturate(175%) !important;
  backdrop-filter:blur(24px) saturate(175%) !important;
}
html.io-black-mode body.home .header-nav,
html.io-black-mode body.home .posts-item.sites-item,
html.io-black-mode body.home .card:not(.card-color),
html.io-black-mode body.home .aside-card {
  background:rgba(28,34,45,.64) !important;
  background-image:linear-gradient(135deg,rgba(58,69,88,.64),rgba(25,31,42,.58)) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.09) !important;
}

/* 3) In-page authentication modal for homepage. */
.mf-auth-overlay {
  position:fixed;
  inset:0;
  z-index:20050;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,3vw,28px);
  background:rgba(19,24,35,.28);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
  backdrop-filter:blur(14px) saturate(125%);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility .22s ease;
}
.mf-auth-overlay.is-open { opacity:1; visibility:visible; }
.mf-auth-dialog {
  width:min(980px,96vw);
  height:min(720px,88dvh);
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 30px 90px rgba(19,35,61,.28),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  backdrop-filter:blur(28px) saturate(170%);
  transform:translateY(12px) scale(.985);
  transition:transform .24s ease;
}
.mf-auth-overlay.is-open .mf-auth-dialog { transform:none; }
.mf-auth-close {
  position:absolute;
  z-index:3;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:50%;
  background:rgba(255,255,255,.72);
  color:#4c5668;
  box-shadow:0 5px 16px rgba(28,48,78,.12);
  font-size:24px;
  line-height:36px;
  text-align:center;
  cursor:pointer;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.mf-auth-frame { width:100%; height:100%; border:0; background:transparent; }
body.mf-auth-open { overflow:hidden !important; }
html.io-black-mode .mf-auth-overlay { background:rgba(5,7,12,.48); }
html.io-black-mode .mf-auth-dialog { background:rgba(28,34,45,.76); border-color:rgba(255,255,255,.13); box-shadow:0 30px 90px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08); }
html.io-black-mode .mf-auth-close { background:rgba(41,48,62,.78); color:#eef3fb; border-color:rgba(255,255,255,.12); }

/* 4) iOS Chrome/Safari: respect safe areas and keep the page pull/scroll gesture alive. */
@supports (-webkit-touch-callout:none) {
  @media (max-width:767.98px) {
    html {
      min-height:100%;
      height:auto !important;
      overflow-x:hidden !important;
      overflow-y:auto !important;
      overscroll-behavior-y:auto !important;
      -webkit-overflow-scrolling:touch;
    }
    body {
      min-height:100svh !important;
      height:auto !important;
      overflow-x:hidden !important;
      overflow-y:visible !important;
      overscroll-behavior-y:auto !important;
      touch-action:pan-y !important;
      padding-top:calc(var(--main-nav-hight,80px) + env(safe-area-inset-top,0px)) !important;
    }
    .header-fixed {
      top:env(safe-area-inset-top,0px) !important;
      padding-left:max(10px,env(safe-area-inset-left,0px)) !important;
      padding-right:max(10px,env(safe-area-inset-right,0px)) !important;
    }
    .header-banner.header-calculate {
      margin-top:calc(0px - var(--main-nav-hight,80px) - env(safe-area-inset-top,0px)) !important;
      padding-top:calc(var(--main-nav-hight,80px) + env(safe-area-inset-top,0px)) !important;
    }
    .mf-auth-overlay {
      padding-top:max(12px,env(safe-area-inset-top,0px));
      padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
    }
    .mf-auth-dialog { width:100%; height:min(780px,92dvh); border-radius:24px; }
  }
}

/* =========================================================
   v1.4.8 — reliable in-page auth, iOS auth scroll-safe layout,
   stronger LIGHT Liquid Glass (dark mode intentionally unchanged)
   ========================================================= */

/* A. Light mode: make Liquid Glass visibly dimensional rather than plain white cards. */
html:not(.io-black-mode) body.home .header-nav,
html:not(.io-black-mode) body.home .header-nav.blur-bg,
html:not(.io-black-mode) body.home .header-nav.blur-bg-20 {
  background-color:rgba(255,255,255,.48) !important;
  background-image:
    radial-gradient(120% 160% at 4% -30%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 46%),
    radial-gradient(72% 140% at 98% 0%,rgba(169,207,255,.24) 0%,rgba(169,207,255,0) 56%),
    linear-gradient(118deg,rgba(255,255,255,.78) 0%,rgba(239,247,255,.48) 40%,rgba(255,255,255,.62) 100%) !important;
  border:1px solid rgba(255,255,255,.98) !important;
  box-shadow:
    0 18px 46px rgba(39,67,108,.16),
    0 3px 10px rgba(43,73,118,.07),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(107,154,218,.16),
    inset 1px 0 0 rgba(174,211,255,.15) !important;
  -webkit-backdrop-filter:blur(36px) saturate(205%) contrast(102%) !important;
  backdrop-filter:blur(36px) saturate(205%) contrast(102%) !important;
}
html:not(.io-black-mode) body.home .header-nav::before {
  content:""; position:absolute; pointer-events:none; z-index:0;
  inset:1px; border-radius:inherit;
  background:linear-gradient(112deg,rgba(255,255,255,.58),rgba(255,255,255,0) 28%,rgba(139,190,255,.10) 62%,rgba(255,255,255,.22));
  opacity:.9;
}
html:not(.io-black-mode) body.home .posts-item.sites-item,
html:not(.io-black-mode) body.home .card:not(.card-color),
html:not(.io-black-mode) body.home .aside-card {
  overflow:hidden;
  background-color:rgba(255,255,255,.46) !important;
  background-image:
    radial-gradient(95% 90% at 8% 0%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 58%),
    radial-gradient(85% 110% at 100% 100%,rgba(165,205,255,.17) 0%,rgba(165,205,255,0) 62%),
    linear-gradient(138deg,rgba(255,255,255,.72),rgba(241,247,255,.40)) !important;
  border:1px solid rgba(255,255,255,.98) !important;
  box-shadow:
    0 15px 34px rgba(46,74,116,.12),
    0 2px 7px rgba(46,74,116,.05),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(106,151,214,.12) !important;
  -webkit-backdrop-filter:blur(30px) saturate(190%) !important;
  backdrop-filter:blur(30px) saturate(190%) !important;
}
html:not(.io-black-mode) body.home .posts-item.sites-item::before,
html:not(.io-black-mode) body.home .card:not(.card-color)::before,
html:not(.io-black-mode) body.home .aside-card::before {
  content:""; position:absolute; pointer-events:none; z-index:0;
  left:6%; right:6%; top:0; height:42%; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,0));
}
html:not(.io-black-mode) body.home .posts-item.sites-item > *,
html:not(.io-black-mode) body.home .card:not(.card-color) > *,
html:not(.io-black-mode) body.home .aside-card > * { position:relative; z-index:1; }
html:not(.io-black-mode) body.home .posts-item.sites-item:hover,
html:not(.io-black-mode) body.home .card:not(.card-color):hover {
  transform:translateY(-4px) scale(1.006);
  background-color:rgba(255,255,255,.64) !important;
  box-shadow:0 24px 52px rgba(39,70,116,.18),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(111,158,223,.14) !important;
}
html:not(.io-black-mode) body.home .search-form .search-key {
  background-color:rgba(255,255,255,.52) !important;
  background-image:linear-gradient(120deg,rgba(255,255,255,.88),rgba(242,248,255,.48),rgba(255,255,255,.70)) !important;
  border:1px solid rgba(255,255,255,.98) !important;
  box-shadow:0 16px 38px rgba(35,64,105,.14),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(104,150,213,.14) !important;
  -webkit-backdrop-filter:blur(30px) saturate(195%) !important;
  backdrop-filter:blur(30px) saturate(195%) !important;
}

/* B. Auth overlay: always above OneNav header and scroll-safe on iOS. */
html.mf-auth-open, body.mf-auth-open { overflow:hidden !important; }
.mf-auth-overlay { z-index:2147483000 !important; overscroll-behavior:contain; }
.mf-auth-frame { display:block; min-height:0; }

/* C. iPhone Chrome/Safari auth pages: don't glue the form to the browser top edge. */
@supports (-webkit-touch-callout:none) {
  body.login-body-login,
  body.min-img.login-body-login,
  body.max-img.login-body-login,
  body.no-img.login-body-login {
    box-sizing:border-box !important;
    display:block !important;
    min-height:100svh !important;
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:auto !important;
    touch-action:pan-y !important;
    padding-top:max(28px,calc(env(safe-area-inset-top,0px) + 18px)) !important;
    padding-right:max(12px,env(safe-area-inset-right,0px)) !important;
    padding-bottom:max(34px,calc(env(safe-area-inset-bottom,0px) + 22px)) !important;
    padding-left:max(12px,env(safe-area-inset-left,0px)) !important;
  }
  body.login-body-login .login-container {
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:clamp(18px,7svh,64px) auto 24px !important;
    padding:0 !important;
    align-items:flex-start !important;
  }
  body.login-body-login .login-body {
    margin:0 auto !important;
    max-height:none !important;
  }
  body.login-body-login .footer-copyright {
    margin-top:18px !important;
    padding-bottom:max(4px,env(safe-area-inset-bottom,0px)) !important;
  }
  @media (max-width:767.98px) {
    body.login-body-login .login-container { margin-top:clamp(22px,9svh,78px) !important; }
    body.login-body-login .login-body { width:min(100%,520px) !important; }
    body.login-body-login .login-forms { min-width:0 !important; width:100% !important; }
  }
}

/* =========================================================
   v1.4.9 — same-tab auth, mobile member drawer escape,
   unified Android/iPhone two-tap site cards
   ========================================================= */

/* 1) Auth links use the current tab. Hide the old iframe overlay if cached markup remains. */
body.home .mf-auth-overlay { display:none !important; }
body.home a.mf-auth-same-tab { cursor:pointer; }

/* 2) Mobile personal-center drawer: keep OneNav's native back control above
      the fixed header/bottom nav and inside the device safe area. */
@media (max-width:767.98px) {
  body.user-center.show-tab-page .drawer-header,
  body.user-center .drawer-header {
    z-index:2147482000 !important;
    top:max(10px,calc(env(safe-area-inset-top,0px) + 8px)) !important;
    left:max(10px,env(safe-area-inset-left,0px)) !important;
    right:max(10px,env(safe-area-inset-right,0px)) !important;
    height:56px !important;
    border-radius:18px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(239,247,255,.68)) !important;
    border:1px solid rgba(255,255,255,.95) !important;
    box-shadow:0 12px 34px rgba(36,62,100,.18),inset 0 1px 0 rgba(255,255,255,1) !important;
    -webkit-backdrop-filter:blur(24px) saturate(180%) !important;
    backdrop-filter:blur(24px) saturate(180%) !important;
  }
  body.user-center .drawer-header .drawer-close {
    left:6px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:42px !important;
    height:42px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:13px !important;
    background:rgba(255,255,255,.66) !important;
    border:1px solid rgba(124,161,215,.18) !important;
    color:#334155 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
    pointer-events:auto !important;
  }
  body.user-center .drawer-header .drawer-close i { font-size:20px !important; }
  body.user-center.show-tab-page .uc-content-body {
    z-index:2147481000 !important;
    padding-top:max(82px,calc(env(safe-area-inset-top,0px) + 76px)) !important;
    padding-bottom:max(88px,calc(env(safe-area-inset-bottom,0px) + 82px)) !important;
  }
  html.io-black-mode body.user-center .drawer-header {
    background:linear-gradient(145deg,rgba(34,43,58,.88),rgba(24,31,43,.80)) !important;
    border-color:rgba(255,255,255,.14) !important;
    box-shadow:0 16px 38px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08) !important;
  }
  html.io-black-mode body.user-center .drawer-header .drawer-close {
    color:#e7edf7 !important;
    background:rgba(255,255,255,.07) !important;
    border-color:rgba(255,255,255,.12) !important;
  }
}

/* =========================================================
   v1.5.0 — real OneNav js-href auth buttons, mobile UC theme
   switch fallback, and mobile contribute-page refinement.
   ========================================================= */

/* Keep auth controls visually clickable after target=_blank is removed. */
.mf-auth-same-tab { cursor:pointer !important; }

/* Floating theme button must remain above user-center ajax content on mobile. */
body.user-center .footer-tools,
body.user-center .footer-tools-right,
body.user-center .tools-right,
body.user-center .btn-tools { pointer-events:auto !important; }
body.user-center .footer-tools,
body.user-center .footer-tools-right,
body.user-center .tools-right { z-index:10080 !important; }
body.user-center .switch-dark-mode { position:relative; z-index:10081 !important; touch-action:manipulation; }

/* Mobile contribute page: separate hero and action area instead of overlap. */
@media (max-width: 767.98px) {
  body .new-post-content.container {
    width:calc(100% - 16px) !important;
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    padding-bottom:calc(92px + env(safe-area-inset-bottom,0px)) !important;
  }
  body .new-post-content .contribute-header {
    display:block !important;
    padding:0 !important;
    margin:12px 0 16px !important;
  }
  body .new-post-content .contribute-title {
    width:100% !important;
    margin:0 !important;
  }
  body .new-post-content .contribute-title .modal-header-bg {
    height:auto !important;
    min-height:126px !important;
    margin:0 !important;
    padding:22px 78px 22px 20px !important;
    border-radius:22px !important;
    box-shadow:0 18px 38px rgba(27,87,176,.24),inset 0 1px 0 rgba(255,255,255,.30) !important;
  }
  body .new-post-content .contribute-title img {
    width:56px !important;
    height:56px !important;
    right:16px !important;
    top:16px !important;
    left:auto !important;
  }
  body .new-post-content .contribute-title h1 { font-size:22px !important; margin-bottom:8px !important; }
  body .new-post-content .contribute-title p { margin:0 !important; line-height:1.6 !important; }

  body .new-post-content .contribute-header .contribute-body {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
    width:100% !important;
    margin:10px 0 0 !important;
    padding:9px !important;
    border-radius:20px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(239,246,255,.66)) !important;
    border:1px solid rgba(136,171,221,.28) !important;
    box-shadow:0 14px 30px rgba(39,74,124,.11),inset 0 1px 0 rgba(255,255,255,.96) !important;
    -webkit-backdrop-filter:blur(18px) saturate(160%) !important;
    backdrop-filter:blur(18px) saturate(160%) !important;
  }
  body .new-post-content .contribute-header .contribute-item {
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 auto !important;
  }
  body .new-post-content .contribute-item .item-new-btn {
    min-height:48px !important;
    padding:8px 10px !important;
    border-radius:15px !important;
    font-size:13px !important;
    font-weight:650 !important;
    justify-content:flex-start !important;
    gap:8px !important;
    background:rgba(255,255,255,.56) !important;
    border:1px solid currentColor !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 14px rgba(50,84,130,.07) !important;
  }
  body .new-post-content .contribute-item .item-new-btn i {
    width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:10px;background:currentColor;color:#fff !important;font-size:15px;
  }
  body .new-post-content .contribute-item .item-new-btn span { white-space:nowrap; }

  /* Form: cleaner card, larger controls, no bottom-nav collision. */
  body .new-post-content .tougao-form { margin-top:0 !important; }
  body .new-post-content .tougao-form .content-wrap,
  body .new-post-content .tougao-form .content-layout,
  body .new-post-content .tougao-form .contribute-sidebar { width:100% !important; max-width:100% !important; }
  body .new-post-content .tougao-form .content-layout > .card,
  body .new-post-content .tougao-form .panel-tougao,
  body .new-post-content .tougao-form .contribute-sidebar > .card {
    border-radius:20px !important;
    border:1px solid rgba(146,171,207,.18) !important;
    box-shadow:0 12px 28px rgba(28,50,84,.09),inset 0 1px 0 rgba(255,255,255,.78) !important;
  }
  body .new-post-content .tougao-form input.form-control,
  body .new-post-content .tougao-form textarea.form-control,
  body .new-post-content .tougao-form select.form-control {
    min-height:46px !important;
    border-radius:14px !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  body .new-post-content .wp-editor-tools,
  body .new-post-content .mce-toolbar-grp,
  body .new-post-content .quicktags-toolbar {
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body .new-post-content .wp-editor-tools::-webkit-scrollbar,
  body .new-post-content .mce-toolbar-grp::-webkit-scrollbar,
  body .new-post-content .quicktags-toolbar::-webkit-scrollbar { display:none; }

  html.io-black-mode body .new-post-content .contribute-header .contribute-body {
    background:linear-gradient(145deg,rgba(40,49,65,.91),rgba(26,33,46,.84)) !important;
    border-color:rgba(151,180,224,.15) !important;
    box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  html.io-black-mode body .new-post-content .contribute-item .item-new-btn {
    background:rgba(29,36,49,.72) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 6px 14px rgba(0,0,0,.15) !important;
  }
}

/* =========================================================
   v1.5.1 — mobile icon recovery, iOS color-spread selection,
   unified points card, seamless light header fade.
   ========================================================= */

/* 1) Mobile contribute shortcuts: restore the actual icon glyph.
   v1.5.0 used background:currentColor together with color:#fff,
   which made both the tile and the glyph white on some WebKit builds. */
@media (max-width:767.98px) {
  body .new-post-content .contribute-item { --mf-contrib-accent:#2997f7; --mf-contrib-soft:rgba(41,151,247,.16); }
  body .new-post-content .contribute-item:nth-child(2) { --mf-contrib-accent:#18b56b; --mf-contrib-soft:rgba(24,181,107,.16); }
  body .new-post-content .contribute-item:nth-child(3) { --mf-contrib-accent:#f14f62; --mf-contrib-soft:rgba(241,79,98,.16); }
  body .new-post-content .contribute-item:nth-child(4) { --mf-contrib-accent:#ff7a12; --mf-contrib-soft:rgba(255,122,18,.16); }
  body .new-post-content .contribute-item .item-new-btn {
    color:var(--mf-contrib-accent) !important;
  }
  body .new-post-content .contribute-item .item-new-btn i.iconfont {
    position:relative !important;
    width:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:11px !important;
    background:linear-gradient(145deg,var(--mf-contrib-accent),color-mix(in srgb,var(--mf-contrib-accent) 72%,#fff 28%)) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:0 7px 16px var(--mf-contrib-soft),inset 0 1px 0 rgba(255,255,255,.48) !important;
    opacity:1 !important;
    font-family:"iconfont" !important;
    font-size:16px !important;
    line-height:1 !important;
  }
  body .new-post-content .contribute-item .item-new-btn i.iconfont::before {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
  }
}

/* 3) Mobile member-center assets/points card: same glass language as the
   surrounding statistic/contribution/menu cards instead of a flat rectangle. */
@media (max-width:767.98px) {
  body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu {
    position:relative !important;
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(0,1fr)) !important;
    gap:0 !important;
    min-height:92px !important;
    padding:0 !important;
    margin:0 0 12px !important;
    overflow:hidden !important;
    border:1px solid rgba(143,170,209,.24) !important;
    border-radius:20px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(238,246,255,.54)) !important;
    box-shadow:0 13px 30px rgba(43,70,108,.10),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(113,154,211,.10) !important;
    -webkit-backdrop-filter:blur(24px) saturate(175%) !important;
    backdrop-filter:blur(24px) saturate(175%) !important;
  }
  body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu::before {
    content:"";position:absolute;pointer-events:none;z-index:0;
    left:8%;right:8%;top:0;height:42%;
    background:linear-gradient(180deg,rgba(255,255,255,.38),transparent);
  }
  body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .uc-assets-item {
    position:relative !important;
    z-index:1 !important;
    min-height:92px !important;
    margin:0 !important;
    padding:17px 14px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .uc-assets-item + .uc-assets-item {
    border-left:1px solid rgba(143,170,209,.18) !important;
  }
  body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .assets-icon {
    width:36px !important;height:36px !important;right:12px !important;bottom:12px !important;
  }
  html.io-black-mode body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu {
    background:linear-gradient(145deg,rgba(39,50,68,.84),rgba(27,36,51,.78)) !important;
    border-color:rgba(255,255,255,.10) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06) !important;
  }
  html.io-black-mode body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu::before {
    background:linear-gradient(180deg,rgba(255,255,255,.055),transparent) !important;
  }
  html.io-black-mode body.user-center .mf-uc-workspace>.user-menu>.uc-assets-menu .uc-assets-item + .uc-assets-item {
    border-left-color:rgba(255,255,255,.07) !important;
  }
}

/* 4) Light homepage hero-to-content transition: extend the fade into the
   exact page canvas so no horizontal seam is visible at the join. */
html:not(.io-black-mode) body.home .header-banner {
  position:relative;
  isolation:isolate;
  overflow:visible !important;
}
html:not(.io-black-mode) body.home .header-banner::after {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:0;right:0;bottom:-3px;
  height:clamp(155px,20vw,300px);
  background:linear-gradient(180deg,
    rgba(242,244,247,0) 0%,
    rgba(242,244,247,.12) 24%,
    rgba(242,244,247,.38) 48%,
    rgba(242,244,247,.72) 72%,
    rgba(242,244,247,.94) 90%,
    var(--body-bg-color,#f2f4f7) 100%);
}
html:not(.io-black-mode) body.home .header-banner > * { position:relative; z-index:1; }
html:not(.io-black-mode) body.home .header-banner + *,
html:not(.io-black-mode) body.home #content,
html:not(.io-black-mode) body.home .main-content {
  border-top-color:transparent !important;
  box-shadow:none;
}

/* =========================================================
   v1.5.2 — critical mobile icon recovery + check-in modal layer
   ========================================================= */

/* Check-in modal: always a true viewport-centered modal, never a block under the points card. */
#refresh_modal_today_checkin.modal {
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background:rgba(10,14,22,.30) !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%) !important;
  backdrop-filter:blur(12px) saturate(135%) !important;
}
#refresh_modal_today_checkin .modal-dialog {
  width:min(520px,calc(100vw - 28px)) !important;
  max-width:520px !important;
  min-height:100dvh !important;
  margin:0 auto !important;
  padding:max(18px,env(safe-area-inset-top,0px)) 0 max(18px,env(safe-area-inset-bottom,0px)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
}
#refresh_modal_today_checkin .modal-content {
  position:relative !important;
  width:100% !important;
  height:auto !important;
  max-height:calc(100dvh - 36px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
  overflow:auto !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.72) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(238,245,255,.82)) !important;
  box-shadow:0 28px 80px rgba(28,48,78,.22),inset 0 1px 0 rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter:blur(28px) saturate(175%) !important;
  backdrop-filter:blur(28px) saturate(175%) !important;
}
#refresh_modal_today_checkin .io-modal-content {
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  min-height:1px !important;
}
#refresh_modal_today_checkin .checkin-modal {
  background:transparent !important;
  color:#273247 !important;
}
#refresh_modal_today_checkin .checkin-days {
  gap:6px !important;
  flex-wrap:wrap !important;
}
#refresh_modal_today_checkin .checkin-day {
  min-width:52px !important;
  padding:9px 5px !important;
  border-radius:13px !important;
  background:rgba(255,255,255,.56) !important;
  border:1px solid rgba(126,157,205,.16) !important;
}
html.io-black-mode #refresh_modal_today_checkin.modal {
  background:rgba(0,0,0,.42) !important;
}
html.io-black-mode #refresh_modal_today_checkin .modal-content {
  border-color:rgba(255,255,255,.12) !important;
  background:linear-gradient(145deg,rgba(38,48,65,.94),rgba(24,32,45,.90)) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.07) !important;
}
html.io-black-mode #refresh_modal_today_checkin .checkin-modal { color:#edf3fb !important; }
html.io-black-mode #refresh_modal_today_checkin .checkin-day {
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.08) !important;
}
@media (max-width:575.98px) {
  #refresh_modal_today_checkin .modal-dialog {
    width:calc(100vw - 20px) !important;
  }
  #refresh_modal_today_checkin .modal-content { border-radius:22px !important; }
  #refresh_modal_today_checkin .checkin-modal { padding:14px !important; }
  #refresh_modal_today_checkin .checkin-stats { gap:4px !important; }
  #refresh_modal_today_checkin .checkin-day { min-width:calc(25% - 6px) !important; }
}

/* =========================================================
   v1.5.3 — restore native mobile icon geometry + stable asset modals
   ========================================================= */

/* Center both check-in and points-purchase OneNav modals above every user-center layer. */
#refresh_modal_today_checkin.modal,
#refresh_modal_pay_points.modal {
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  padding:0 !important;
  overflow:auto !important;
  background:rgba(8,12,20,.34) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
  backdrop-filter:blur(14px) saturate(140%) !important;
}
#refresh_modal_today_checkin .modal-dialog,
#refresh_modal_pay_points .modal-dialog {
  width:min(540px,calc(100vw - 24px)) !important;
  max-width:540px !important;
  min-height:100dvh !important;
  margin:0 auto !important;
  padding:max(16px,env(safe-area-inset-top,0px)) 0 max(16px,env(safe-area-inset-bottom,0px)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
}
#refresh_modal_today_checkin .modal-content,
#refresh_modal_pay_points .modal-content {
  position:relative !important;
  width:100% !important;
  height:auto !important;
  max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
  overflow:auto !important;
  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.68) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(239,246,255,.84)) !important;
  box-shadow:0 28px 90px rgba(20,40,72,.24),inset 0 1px 0 rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter:blur(28px) saturate(175%) !important;
  backdrop-filter:blur(28px) saturate(175%) !important;
}
#refresh_modal_today_checkin .io-modal-content,
#refresh_modal_pay_points .io-modal-content {
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}
html.io-black-mode #refresh_modal_today_checkin.modal,
html.io-black-mode #refresh_modal_pay_points.modal { background:rgba(0,0,0,.46) !important; }
html.io-black-mode #refresh_modal_today_checkin .modal-content,
html.io-black-mode #refresh_modal_pay_points .modal-content {
  border-color:rgba(255,255,255,.12) !important;
  background:linear-gradient(145deg,rgba(38,48,65,.95),rgba(22,29,41,.92)) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.07) !important;
}
@media (max-width:575.98px) {
  #refresh_modal_today_checkin .modal-dialog,
  #refresh_modal_pay_points .modal-dialog { width:calc(100vw - 18px) !important; }
  #refresh_modal_today_checkin .modal-content,
  #refresh_modal_pay_points .modal-content { border-radius:22px !important; }
}

/* Fallback modal used only if OneNav's Bootstrap modal helper is not ready yet. */
.mf-assets-modal {
  position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center;
  padding:max(14px,env(safe-area-inset-top,0px)) 12px max(14px,env(safe-area-inset-bottom,0px));
  background:rgba(8,12,20,.36); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
}
.mf-assets-modal-card {
  position:relative; width:min(540px,100%); max-height:calc(100dvh - 28px); overflow:auto;
  border-radius:24px; border:1px solid rgba(255,255,255,.68);
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,246,255,.88));
  box-shadow:0 28px 90px rgba(20,40,72,.26),inset 0 1px 0 rgba(255,255,255,.96);
}
.mf-assets-modal-close {position:absolute;right:10px;top:10px;z-index:5;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.72);font-size:22px;line-height:36px;}
.mf-assets-modal-body{min-height:120px;}
html.io-black-mode .mf-assets-modal-card{border-color:rgba(255,255,255,.12);background:linear-gradient(145deg,rgba(38,48,65,.96),rgba(22,29,41,.93));color:#eef3fa;}
html.io-black-mode .mf-assets-modal-close{background:rgba(255,255,255,.08);color:#eef3fa;}

/* =========================================================
   v1.5.4 — desktop points-card alignment, iOS clean icon halo,
   and dark search readability / gradient focus glow.
   ========================================================= */

/* 1) Desktop member-center points card: same width/radius/glass rhythm as nav card. */
@media (min-width:768px) {
  body.user-center .mf-uc-workspace > .user-menu > .uc-assets-menu {
    display:block !important;
    width:100% !important;
    margin:0 0 14px !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(132,157,194,.20) !important;
    border-radius:18px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.80),rgba(240,246,255,.64)) !important;
    box-shadow:0 12px 28px rgba(39,64,101,.085),inset 0 1px 0 rgba(255,255,255,.96),inset 0 -1px 0 rgba(111,150,205,.08) !important;
    -webkit-backdrop-filter:blur(22px) saturate(165%) !important;
    backdrop-filter:blur(22px) saturate(165%) !important;
  }
  body.user-center .mf-uc-workspace > .user-menu > .uc-assets-menu .uc-assets-item {
    position:relative !important;
    min-height:76px !important;
    margin:0 !important;
    padding:15px 14px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  body.user-center .mf-uc-workspace > .user-menu > .uc-assets-menu .assets-icon {
    width:36px !important;
    height:36px !important;
    right:12px !important;
    bottom:12px !important;
  }
  html.io-black-mode body.user-center .mf-uc-workspace > .user-menu > .uc-assets-menu {
    border-color:rgba(255,255,255,.10) !important;
    background:linear-gradient(145deg,rgba(39,49,67,.88),rgba(28,36,50,.82)) !important;
    box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.055) !important;
  }
}

/* 3) Dark homepage search: typed text/caret must stay readable. */
html.io-black-mode body.home .search-form .search-key,
html.io-black-mode body.home .search-body .search-key,
html.io-black-mode body.home .search-body input[type="text"] {
  color:#f7f9ff !important;
  -webkit-text-fill-color:#f7f9ff !important;
  caret-color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.24) !important;
  background-color:rgba(31,29,46,.58) !important;
  border-color:rgba(255,255,255,.18) !important;
}
html.io-black-mode body.home .search-form .search-key::placeholder,
html.io-black-mode body.home .search-body .search-key::placeholder,
html.io-black-mode body.home .search-body input[type="text"]::placeholder {
  color:rgba(229,233,244,.56) !important;
  -webkit-text-fill-color:rgba(229,233,244,.56) !important;
  opacity:1 !important;
}

/* Multi-colour liquid glow on focus — looks gradient without changing OneNav markup. */
body.home .search-form .search-key:focus,
body.home .search-body .search-key:focus,
body.home .search-body input[type="text"]:focus {
  outline:0 !important;
  border-color:rgba(150,190,255,.72) !important;
  box-shadow:
    0 0 0 2px rgba(122,168,255,.24),
    -18px 0 34px rgba(70,128,255,.24),
    18px 0 34px rgba(203,91,255,.22),
    0 14px 38px rgba(65,205,255,.16),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
  transition:border-color .22s ease,box-shadow .26s ease,background-color .22s ease !important;
}
html.io-black-mode body.home .search-form .search-key:focus,
html.io-black-mode body.home .search-body .search-key:focus,
html.io-black-mode body.home .search-body input[type="text"]:focus {
  background-color:rgba(35,31,52,.72) !important;
  border-color:rgba(160,185,255,.72) !important;
  box-shadow:
    0 0 0 2px rgba(117,162,255,.26),
    -20px 0 38px rgba(57,121,255,.34),
    20px 0 38px rgba(204,72,255,.30),
    0 14px 40px rgba(52,213,255,.20),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* =========================================================
   v1.5.5 — mobile selection halo without square image loading,
   plus stronger light-mode search focus glow.
   ========================================================= */

/* Light mode: give the homepage search field an unmistakable liquid-glass
   focus state too, while keeping the text high-contrast. */
html:not(.io-black-mode) body.home .search-form:focus-within,
html:not(.io-black-mode) body.home .search-body:focus-within {
  border-radius:999px !important;
  filter:drop-shadow(-14px 0 22px rgba(78,141,255,.22))
         drop-shadow(14px 0 22px rgba(198,83,255,.20))
         drop-shadow(0 12px 24px rgba(44,207,232,.15)) !important;
}
html:not(.io-black-mode) body.home .search-form .search-key:focus,
html:not(.io-black-mode) body.home .search-body .search-key:focus,
html:not(.io-black-mode) body.home .search-body input[type="text"]:focus {
  color:#202735 !important;
  -webkit-text-fill-color:#202735 !important;
  caret-color:#3478f6 !important;
  background:linear-gradient(115deg,rgba(255,255,255,.88),rgba(247,250,255,.74)) !important;
  border-color:rgba(126,168,255,.82) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.82),
    0 0 0 4px rgba(110,159,255,.18),
    -22px 0 38px rgba(70,130,255,.28),
    22px 0 38px rgba(196,76,255,.24),
    0 15px 40px rgba(50,207,232,.18),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}


/* =========================================================
   v1.5.8 — mobile site icon stability reset
   IMPORTANT: the child theme no longer changes OneNav's native
   .item-header / .item-media / .item-image / .sites-icon / .blur-img-bg
   geometry. The parent theme owns the favicon stack completely.
   First tap only changes text + direct-arrow colour; second tap opens.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  .posts-item.sites-item.mf-mobile-selected .item-title,
  .posts-item.sites-item.mf-mobile-selected .item-title b,
  .posts-item.sites-item.mf-mobile-selected .togo,
  .posts-item.sites-item.mf-mobile-selected .togo i,
  .posts-item.sites-item.mf-mobile-selected .big-togo {
    color:#f1404b !important;
  }
  html.io-black-mode .posts-item.sites-item.mf-mobile-selected .item-title,
  html.io-black-mode .posts-item.sites-item.mf-mobile-selected .item-title b,
  html.io-black-mode .posts-item.sites-item.mf-mobile-selected .togo,
  html.io-black-mode .posts-item.sites-item.mf-mobile-selected .togo i,
  html.io-black-mode .posts-item.sites-item.mf-mobile-selected .big-togo {
    color:#ff5964 !important;
  }
  .posts-item.sites-item.mf-mobile-selected {
    transform:none !important;
  }
}

/* =========================================================
   v1.5.10 — platform-safe mobile first-tap feedback
   iOS/WebKit: do NOT animate/reveal .blur-img-bg. WebKit composites that
   filtered bitmap as a rectangle after a short delay, which causes the
   square flash around the favicon. Keep the native favicon untouched and
   use only a soft circular accent ring on the icon container.
   Android/coarse-pointer browsers: keep a restrained halo, but make it
   much smaller than v1.5.9 and never alter the real .sites-icon layer.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  /* Base selected state: native logo stays exactly as OneNav rendered it. */
  .posts-item.sites-item.mf-mobile-selected .item-image,
  .posts-item.sites-item.mf-mobile-selected img.sites-icon {
    filter:none !important;
    -webkit-filter:none !important;
    transform:none !important;
  }

  /* Conservative Android/default halo. It is intentionally subtle. */
  .posts-item.sites-item.mf-mobile-selected .blur-img-bg {
    border-radius:50% !important;
    opacity:.24 !important;
    transform:scale(1.16) !important;
    transform-origin:center center !important;
    filter:blur(5px) saturate(135%) !important;
    -webkit-filter:blur(5px) saturate(135%) !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }
}

/* iPhone/iPad browsers all use WebKit. Never use the bitmap blur layer for
   first-tap feedback there; this removes the delayed square artifact. */
@supports (-webkit-touch-callout: none) {
  @media (hover:none), (pointer:coarse), (max-width:991.98px) {
    .posts-item.sites-item.mf-mobile-selected .blur-img-bg {
      opacity:0 !important;
      visibility:hidden !important;
      filter:none !important;
      -webkit-filter:none !important;
      transform:none !important;
    }

    /* A small circular accent around the existing icon gives visible feedback
       without cloning, resizing, or masking the favicon itself. */
    .posts-item.sites-item.mf-mobile-selected .item-image {
      border-radius:50% !important;
      box-shadow:
        0 0 0 2px rgba(255,86,100,.20),
        0 0 13px rgba(255,86,100,.24) !important;
      transition:box-shadow .18s ease !important;
    }
  }
}

/* =========================================================
   v1.5.11 — Android first-tap motion, site uptime and custom
   recent-browsing glass panel.
   ========================================================= */

/* Android: the favicon itself gives a tiny spring response on the first tap.
   Geometry remains owned by OneNav; this is transform-only and brief. */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  html.mf-android .posts-item.sites-item.mf-mobile-selected .item-image {
    animation:mf-ios26-icon-tap .34s cubic-bezier(.2,.8,.2,1) both !important;
    will-change:transform;
  }
}
@keyframes mf-ios26-icon-tap {
  0%   { transform:translate3d(0,0,0) scale(1); }
  42%  { transform:translate3d(0,-3px,0) scale(1.08); }
  72%  { transform:translate3d(0,1px,0) scale(.985); }
  100% { transform:translate3d(0,0,0) scale(1); }
}

/* Footer uptime pill */
.mf-site-uptime {
  width:max-content;
  max-width:calc(100% - 24px);
  margin:14px auto 6px;
  padding:8px 13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(129,158,202,.18);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(245,249,255,.52));
  box-shadow:0 9px 26px rgba(40,64,98,.08),inset 0 1px 0 rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  color:#6e7888;
  font-size:12px;
  line-height:1.4;
}
.mf-site-uptime-dot {
  width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:#34c759;
  box-shadow:0 0 0 4px rgba(52,199,89,.12),0 0 10px rgba(52,199,89,.30);
}
.mf-site-uptime-label { color:#8a94a4; }
.mf-site-uptime-value { color:#536075;font-weight:600;letter-spacing:.02em; }
html.io-black-mode .mf-site-uptime {
  border-color:rgba(255,255,255,.10);
  background:linear-gradient(135deg,rgba(43,53,70,.68),rgba(28,36,49,.52));
  box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06);
  color:#b8c0cd;
}
html.io-black-mode .mf-site-uptime-label { color:#929cab; }
html.io-black-mode .mf-site-uptime-value { color:#e3e9f2; }

/* Recent browsing overlay/panel inspired by the provided reference. */
.mf-history-backdrop {
  position:fixed;inset:0;z-index:2147481800;
  background:rgba(72,78,90,.20);
  -webkit-backdrop-filter:blur(4px) saturate(90%);
  backdrop-filter:blur(4px) saturate(90%);
}
.mf-history-panel {
  position:fixed;z-index:2147481801;
  width:320px;max-width:calc(100vw - 24px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.86);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(246,249,255,.84));
  box-shadow:0 24px 70px rgba(25,45,76,.24),0 8px 24px rgba(25,45,76,.10),inset 0 1px 0 rgba(255,255,255,.98);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  transform-origin:top right;
  animation:mf-history-in .20s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes mf-history-in { from{opacity:0;transform:translateY(-8px) scale(.97)} to{opacity:1;transform:none} }
.mf-history-panel-header {
  height:54px;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid rgba(119,143,181,.13);
}
.mf-history-panel-title { display:flex;align-items:center;gap:9px;color:#273246;font-size:14px;font-weight:700; }
.mf-history-panel-title svg { width:18px;height:18px;color:#686dff; }
.mf-history-clear {border:0;background:transparent;padding:6px 2px;color:#9ca8ba;font-size:12px;cursor:pointer;}
.mf-history-clear:hover{color:#f1404b;}
.mf-history-panel-body { padding:10px 12px 13px;max-height:min(430px,calc(100dvh - 100px));overflow:auto; }
.mf-history-list { display:flex;flex-direction:column;gap:9px; }
.mf-history-item {
  min-height:54px;padding:8px 9px;
  display:flex;align-items:center;gap:10px;
  border:1px solid rgba(133,158,197,.14);
  border-radius:14px;
  background:rgba(248,250,254,.78);
  box-shadow:0 4px 14px rgba(41,66,103,.045),inset 0 1px 0 rgba(255,255,255,.92);
  color:inherit;text-decoration:none!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.mf-history-item:hover { transform:translateY(-1px);border-color:rgba(102,128,255,.28);box-shadow:0 7px 18px rgba(41,66,103,.08); }
.mf-history-item-icon {width:36px;height:36px;flex:0 0 36px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#eef3fb);box-shadow:inset 0 0 0 1px rgba(128,151,188,.12);}
.mf-history-item-icon img{display:block;width:28px;height:28px;object-fit:contain;border-radius:7px;}
.mf-history-icon-text{font-size:16px;font-weight:700;color:#647087;}
.mf-history-item-info{min-width:0;flex:1;}
.mf-history-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2d3749;font-size:13px;font-weight:700;}
.mf-history-item-meta{margin-top:3px;display:flex;align-items:center;color:#9aa5b5;font-size:11px;}
.mf-history-item-time{display:inline-flex;align-items:center;gap:4px;}
.mf-history-item-time svg{width:12px;height:12px;}
.mf-history-item-category{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:rgba(110,103,255,.10);color:#7770ff;font-size:10px;font-weight:600;}
.mf-history-item-delete{width:27px;height:27px;flex:0 0 27px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(237,241,247,.90);color:#a8b1bf;cursor:pointer;}
.mf-history-item-delete:hover{background:rgba(241,64,75,.10);color:#f1404b;}
.mf-history-item-delete svg{width:13px;height:13px;}
.mf-history-empty{padding:30px 12px;text-align:center;color:#a0a9b7;font-size:12px;}
html.io-black-mode .mf-history-backdrop{background:rgba(3,7,13,.34);-webkit-backdrop-filter:blur(5px) brightness(.76);backdrop-filter:blur(5px) brightness(.76);}
html.io-black-mode .mf-history-panel{border-color:rgba(255,255,255,.10);background:linear-gradient(145deg,rgba(43,52,69,.94),rgba(27,35,48,.91));box-shadow:0 28px 80px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.07);}
html.io-black-mode .mf-history-panel-header{border-bottom-color:rgba(255,255,255,.07);}
html.io-black-mode .mf-history-panel-title{color:#eef3fa;}
html.io-black-mode .mf-history-clear{color:#9ca6b4;}
html.io-black-mode .mf-history-item{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}
html.io-black-mode .mf-history-item-title{color:#eef3fa;}
html.io-black-mode .mf-history-item-icon{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
html.io-black-mode .mf-history-item-delete{background:rgba(255,255,255,.055);color:#919baa;}
@media (max-width:575.98px){
  .mf-history-panel{width:calc(100vw - 20px)!important;left:10px!important;right:auto!important;top:max(76px,calc(env(safe-area-inset-top,0px) + 64px))!important;}
  .mf-history-panel-body{max-height:calc(100dvh - 150px);}
}


/* =========================================================
   v1.5.11.1 — footer runtime + administrator-only traffic stats
   Keep all existing theme UI intact; this only styles the footer metrics.
   ========================================================= */
.mf-site-footer-metrics{
  width:min(100%,920px);
  margin:16px auto 8px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  box-sizing:border-box;
}
.mf-site-footer-metrics .mf-site-uptime{
  margin:0;
  min-height:38px;
  padding:8px 14px;
  border-color:rgba(126,158,205,.20);
  background:
    linear-gradient(135deg,rgba(255,255,255,.84),rgba(244,249,255,.60));
  box-shadow:
    0 10px 28px rgba(38,63,100,.08),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(117,148,194,.08);
}
.mf-owner-stats{
  position:relative;
  min-height:38px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 5px 4px 7px;
  border:1px solid rgba(126,158,205,.20);
  border-radius:999px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(244,248,255,.62));
  box-shadow:
    0 10px 28px rgba(38,63,100,.08),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(117,148,194,.08);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
  backdrop-filter:blur(18px) saturate(165%);
}
.mf-owner-stats-badge{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(71,129,255,.12),rgba(134,92,255,.12));
  color:#6677a0;
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
}
.mf-owner-stat{
  position:relative;
  min-width:54px;
  padding:3px 9px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  white-space:nowrap;
}
.mf-owner-stat + .mf-owner-stat::before{
  content:"";
  position:absolute;
  left:0;top:20%;bottom:20%;width:1px;
  background:rgba(104,128,166,.12);
}
.mf-owner-stat small{
  color:#8c96a6;
  font-size:10px;
  font-weight:400;
}
.mf-owner-stat strong{
  color:#526077;
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
html.io-black-mode .mf-site-footer-metrics .mf-site-uptime,
html.io-black-mode .mf-owner-stats{
  border-color:rgba(255,255,255,.10);
  background:linear-gradient(135deg,rgba(43,53,70,.72),rgba(28,36,49,.56));
  box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.06);
}
html.io-black-mode .mf-owner-stats-badge{
  background:linear-gradient(135deg,rgba(93,143,255,.16),rgba(150,106,255,.14));
  color:#abb8d1;
}
html.io-black-mode .mf-owner-stat + .mf-owner-stat::before{background:rgba(255,255,255,.08);}
html.io-black-mode .mf-owner-stat small{color:#929cab;}
html.io-black-mode .mf-owner-stat strong{color:#eef3fb;}
@media (max-width:767.98px){
  .mf-site-footer-metrics{
    width:100%;
    padding:0 10px;
    gap:7px;
  }
  .mf-site-footer-metrics .mf-site-uptime,
  .mf-owner-stats{
    max-width:100%;
  }
  .mf-owner-stats{
    width:100%;
    justify-content:center;
    border-radius:18px;
    padding:6px;
    flex-wrap:wrap;
  }
  .mf-owner-stats-badge{margin-right:2px;}
  .mf-owner-stat{min-width:58px;padding:3px 7px;}
}

/* =========================================================
   v1.5.11.2 — Home card Liquid Glass enhancement (visual only)
   CSS-only: no DOM, link, PJAX, mobile two-tap, recent/history or footer logic changes.
   ========================================================= */

/* --- Individual site cards: brighter optical edge + subtle refraction --- */
html:not(.io-black-mode) body.home .posts-item.sites-item {
  border-color:rgba(255,255,255,.98) !important;
  background-color:rgba(255,255,255,.43) !important;
  background-image:
    radial-gradient(90% 135% at 5% -30%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 54%),
    radial-gradient(75% 125% at 105% 115%,rgba(128,184,255,.18) 0%,rgba(128,184,255,0) 60%),
    linear-gradient(126deg,rgba(255,255,255,.69) 0%,rgba(245,250,255,.39) 52%,rgba(255,255,255,.57) 100%) !important;
  box-shadow:
    0 10px 24px rgba(42,67,107,.085),
    0 2px 7px rgba(49,77,119,.035),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(96,145,214,.13),
    inset 1px 0 0 rgba(208,230,255,.24) !important;
  -webkit-backdrop-filter:blur(25px) saturate(188%) !important;
  backdrop-filter:blur(25px) saturate(188%) !important;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),box-shadow .24s ease,border-color .24s ease,background-color .24s ease !important;
}

/* Optical sheen is deliberately non-interactive. */
html:not(.io-black-mode) body.home .posts-item.sites-item::after {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  inset:1px;
  border-radius:inherit;
  background:
    linear-gradient(112deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 32%,rgba(134,188,255,.08) 68%,rgba(255,255,255,.18) 100%);
  opacity:.82;
}
html:not(.io-black-mode) body.home .posts-item.sites-item > * { position:relative; z-index:1; }

html:not(.io-black-mode) body.home .posts-item.sites-item:hover {
  transform:translateY(-3px) scale(1.008) !important;
  border-color:rgba(255,255,255,1) !important;
  background-color:rgba(255,255,255,.58) !important;
  box-shadow:
    0 18px 38px rgba(42,72,119,.145),
    0 4px 12px rgba(42,72,119,.055),
    0 0 0 1px rgba(128,185,255,.06),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(104,154,222,.15) !important;
}

/* Give the favicon well a tiny lens feel without touching the real icon/image positioning. */
html:not(.io-black-mode) body.home .posts-item.sites-item .item-media {
  border-radius:50%;
  box-shadow:0 4px 12px rgba(38,67,108,.08), inset 0 1px 0 rgba(255,255,255,.62);
  transition:box-shadow .24s ease,filter .24s ease;
}
html:not(.io-black-mode) body.home .posts-item.sites-item:hover .item-media {
  box-shadow:0 6px 16px rgba(42,83,140,.13),0 0 15px rgba(120,180,255,.08),inset 0 1px 0 rgba(255,255,255,.78);
}

/* Typography: slightly clearer hierarchy while preserving truncation and all click targets. */
html:not(.io-black-mode) body.home .posts-item.sites-item .item-title,
html:not(.io-black-mode) body.home .posts-item.sites-item .item-title b {
  color:#303946 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.62);
}
html:not(.io-black-mode) body.home .posts-item.sites-item .text-muted {
  color:#87919f !important;
}

/* --- Large category panels: floating glass tray instead of flat white slab --- */
html:not(.io-black-mode) body.home .card:not(.card-color) {
  border-color:rgba(255,255,255,.94) !important;
  background-color:rgba(255,255,255,.40) !important;
  background-image:
    radial-gradient(125% 95% at 0% 0%,rgba(255,255,255,.88),rgba(255,255,255,0) 55%),
    radial-gradient(90% 140% at 100% 100%,rgba(151,198,255,.11),rgba(151,198,255,0) 62%),
    linear-gradient(145deg,rgba(255,255,255,.62),rgba(243,248,255,.34)) !important;
  box-shadow:
    0 16px 40px rgba(42,66,103,.09),
    0 3px 10px rgba(42,66,103,.035),
    inset 0 1px 0 rgba(255,255,255,.97),
    inset 0 -1px 0 rgba(111,156,218,.09) !important;
  -webkit-backdrop-filter:blur(28px) saturate(182%) !important;
  backdrop-filter:blur(28px) saturate(182%) !important;
}

/* Header/tab strip inside category blocks becomes a shallow glass rail. */
html:not(.io-black-mode) body.home .card:not(.card-color) .card-header,
html:not(.io-black-mode) body.home .card:not(.card-color) .card-header-tabs,
html:not(.io-black-mode) body.home .card:not(.card-color) .nav-tabs,
html:not(.io-black-mode) body.home .card:not(.card-color) .nav-pills {
  border-color:transparent !important;
}
html:not(.io-black-mode) body.home .card:not(.card-color) .card-header .nav,
html:not(.io-black-mode) body.home .card:not(.card-color) .card-header-tabs,
html:not(.io-black-mode) body.home .card:not(.card-color) .nav-pills {
  border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.56),rgba(228,237,248,.42));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.90),0 3px 10px rgba(52,76,110,.04);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
}

/* Tabs: keep theme semantics, but make selected pill look translucent instead of flat. */
html:not(.io-black-mode) body.home .card:not(.card-color) :is(.nav-link,.tab-item,.category-item) {
  transition:background-color .20s ease,box-shadow .20s ease,transform .20s ease,color .20s ease;
}
html:not(.io-black-mode) body.home .card:not(.card-color) :is(.nav-link,.tab-item,.category-item).active,
html:not(.io-black-mode) body.home .card:not(.card-color) .active > :is(.nav-link,.tab-item,.category-item) {
  box-shadow:0 5px 14px rgba(222,65,78,.13),inset 0 1px 0 rgba(255,255,255,.46);
}

/* more+ gets a faint glass hover without changing its URL/click behavior. */
html:not(.io-black-mode) body.home .card:not(.card-color) a.more,
html:not(.io-black-mode) body.home .card:not(.card-color) .more a,
html:not(.io-black-mode) body.home .card:not(.card-color) .more-btn {
  border-radius:999px;
  transition:background-color .2s ease,box-shadow .2s ease,color .2s ease;
}
html:not(.io-black-mode) body.home .card:not(.card-color) a.more:hover,
html:not(.io-black-mode) body.home .card:not(.card-color) .more a:hover,
html:not(.io-black-mode) body.home .card:not(.card-color) .more-btn:hover {
  background:rgba(255,255,255,.52);
  box-shadow:inset 0 1px 0 #fff,0 5px 14px rgba(42,72,116,.08);
}

/* Dark mode was already satisfactory: only refine the hover edge, keep its existing palette. */
html.io-black-mode body.home .posts-item.sites-item,
html.io-black-mode body.home .card:not(.card-color) {
  transition:transform .24s cubic-bezier(.22,.61,.36,1),box-shadow .24s ease,border-color .24s ease !important;
}
html.io-black-mode body.home .posts-item.sites-item:hover {
  transform:translateY(-3px) scale(1.006) !important;
  border-color:rgba(156,198,255,.20) !important;
  box-shadow:0 18px 38px rgba(0,0,0,.34),0 0 0 1px rgba(113,170,255,.035),inset 0 1px 0 rgba(255,255,255,.11) !important;
}

/* Mobile: retain the enhanced glass but avoid exaggerated movement. */
@media (max-width:767.98px) {
  html:not(.io-black-mode) body.home .posts-item.sites-item {
    -webkit-backdrop-filter:blur(20px) saturate(175%) !important;
    backdrop-filter:blur(20px) saturate(175%) !important;
  }
  html:not(.io-black-mode) body.home .posts-item.sites-item:hover {
    transform:none !important;
  }
  html.io-black-mode body.home .posts-item.sites-item:hover {
    transform:none !important;
  }
}


/* =========================================================
   v1.5.11.3 — Home card optical-edge / refraction refinement
   CSS-only. Sharper iOS 26 glass edge, clearer contour, less milky blur.
   ========================================================= */

/* Sharper optical contour: keep transparency but define the rim. */
html:not(.io-black-mode) body.home .posts-item.sites-item {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(188,210,239,.78) !important;
  background-color:rgba(255,255,255,.50) !important;
  background-image:
    radial-gradient(120% 180% at -8% -45%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.48) 26%,rgba(255,255,255,0) 54%),
    radial-gradient(100% 150% at 112% 132%,rgba(114,171,255,.17) 0%,rgba(147,110,255,.07) 34%,rgba(255,255,255,0) 62%),
    linear-gradient(128deg,rgba(255,255,255,.76) 0%,rgba(246,250,255,.44) 47%,rgba(255,255,255,.62) 100%) !important;
  box-shadow:
    0 8px 22px rgba(35,63,103,.085),
    0 2px 5px rgba(35,63,103,.035),
    0 0 0 .5px rgba(255,255,255,.96),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(91,137,205,.20),
    inset 1px 0 0 rgba(255,255,255,.70),
    inset -1px 0 0 rgba(122,170,232,.10) !important;
  -webkit-backdrop-filter:blur(18px) saturate(180%) contrast(103%) !important;
  backdrop-filter:blur(18px) saturate(180%) contrast(103%) !important;
}

/* Thin prism line: top/left bright, bottom/right cool. */
html:not(.io-black-mode) body.home .posts-item.sites-item::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 1px 0 0 rgba(255,255,255,.62),
    inset 0 -1px 0 rgba(94,143,214,.22),
    inset -1px 0 0 rgba(130,176,237,.12);
}

/* Refracted highlight kept narrow so text/icons stay crisp. */
html:not(.io-black-mode) body.home .posts-item.sites-item::after {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  inset:1px;
  border-radius:inherit;
  background:
    linear-gradient(105deg,rgba(255,255,255,.44) 0%,rgba(255,255,255,.10) 18%,rgba(255,255,255,0) 34%,rgba(110,167,255,.065) 68%,rgba(171,121,255,.045) 84%,rgba(255,255,255,.16) 100%);
  opacity:.90;
}

html:not(.io-black-mode) body.home .posts-item.sites-item:hover {
  border-color:rgba(152,190,239,.90) !important;
  background-color:rgba(255,255,255,.62) !important;
  box-shadow:
    0 15px 34px rgba(39,73,120,.14),
    0 4px 10px rgba(44,77,120,.055),
    0 0 0 1px rgba(129,181,248,.10),
    0 0 20px rgba(120,174,255,.07),
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(89,139,211,.24) !important;
}

/* Large category panel gets the same defined rim, but stays softer than site cards. */
html:not(.io-black-mode) body.home .card:not(.card-color) {
  position:relative;
  border:1px solid rgba(194,213,239,.72) !important;
  background-color:rgba(255,255,255,.47) !important;
  background-image:
    radial-gradient(130% 105% at -5% -10%,rgba(255,255,255,.92),rgba(255,255,255,0) 52%),
    radial-gradient(100% 150% at 108% 118%,rgba(120,177,255,.11),rgba(158,118,255,.045) 38%,rgba(255,255,255,0) 64%),
    linear-gradient(145deg,rgba(255,255,255,.68),rgba(243,248,255,.38)) !important;
  box-shadow:
    0 14px 34px rgba(41,65,102,.085),
    0 3px 9px rgba(41,65,102,.03),
    0 0 0 .5px rgba(255,255,255,.92),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(102,151,218,.14) !important;
  -webkit-backdrop-filter:blur(20px) saturate(176%) !important;
  backdrop-filter:blur(20px) saturate(176%) !important;
}

/* Category tabs: make the rail read as a separate transparent layer. */
html:not(.io-black-mode) body.home .card:not(.card-color) .card-header .nav,
html:not(.io-black-mode) body.home .card:not(.card-color) .card-header-tabs,
html:not(.io-black-mode) body.home .card:not(.card-color) .nav-pills {
  border:1px solid rgba(185,207,236,.48);
  background:
    linear-gradient(135deg,rgba(255,255,255,.70),rgba(229,238,250,.48));
  box-shadow:
    0 3px 9px rgba(48,73,108,.035),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(113,155,216,.10);
}

/* Keep mobile crisp; reduce blur instead of creating a milky slab. */
@media (max-width:767.98px) {
  html:not(.io-black-mode) body.home .posts-item.sites-item {
    border-color:rgba(180,204,236,.72) !important;
    -webkit-backdrop-filter:blur(14px) saturate(170%) !important;
    backdrop-filter:blur(14px) saturate(170%) !important;
    box-shadow:
      0 7px 18px rgba(37,65,104,.075),
      0 0 0 .5px rgba(255,255,255,.92),
      inset 0 1px 0 rgba(255,255,255,.98),
      inset 0 -1px 0 rgba(90,139,207,.17) !important;
  }
  html:not(.io-black-mode) body.home .card:not(.card-color) {
    -webkit-backdrop-filter:blur(16px) saturate(168%) !important;
    backdrop-filter:blur(16px) saturate(168%) !important;
  }
}

/* =========================================================
   v1.5.11.4 — Home card edge cleanup + sidebar glass refinement
   Visual only: no DOM/JS/layout logic changes.
   ========================================================= */

/* 1) Remove the inherited mid-card sheen line from older ::before rules.
      Keep the optical rim, but no internal horizontal divider. */
html:not(.io-black-mode) body.home .posts-item.sites-item::before {
  background:none !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:auto !important;
  inset:0 !important;
}

/* 2) Keep card dimensions visually stable. No scale expansion on hover. */
html:not(.io-black-mode) body.home .posts-item.sites-item,
html.io-black-mode body.home .posts-item.sites-item {
  transform:none !important;
}
html:not(.io-black-mode) body.home .posts-item.sites-item:hover,
html.io-black-mode body.home .posts-item.sites-item:hover {
  transform:translateY(-2px) !important;
}

/* Slightly cleaner rim/refraction after removing the internal sheen. */
html:not(.io-black-mode) body.home .posts-item.sites-item {
  border-color:rgba(174,202,238,.80) !important;
  box-shadow:
    0 8px 20px rgba(35,63,103,.075),
    0 2px 5px rgba(35,63,103,.03),
    0 0 0 .5px rgba(255,255,255,.98),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(86,136,207,.18),
    inset 1px 0 0 rgba(255,255,255,.70),
    inset -1px 0 0 rgba(119,167,230,.10) !important;
}

/* 3) Left navigation: same optical language as site cards, without changing width/layout. */
html:not(.io-black-mode) body.home .aside-card {
  position:relative;
  overflow:hidden;
  border:1px solid rgba(178,204,237,.72) !important;
  background-color:rgba(255,255,255,.48) !important;
  background-image:
    radial-gradient(130% 95% at -8% -10%,rgba(255,255,255,.96),rgba(255,255,255,0) 54%),
    radial-gradient(95% 130% at 108% 108%,rgba(126,180,255,.12),rgba(155,119,255,.045) 40%,rgba(255,255,255,0) 66%),
    linear-gradient(145deg,rgba(255,255,255,.69),rgba(242,248,255,.39)) !important;
  box-shadow:
    0 13px 30px rgba(41,68,107,.09),
    0 3px 8px rgba(41,68,107,.03),
    0 0 0 .5px rgba(255,255,255,.94),
    inset 0 1px 0 rgba(255,255,255,.99),
    inset 0 -1px 0 rgba(95,145,213,.13) !important;
  -webkit-backdrop-filter:blur(20px) saturate(176%) !important;
  backdrop-filter:blur(20px) saturate(176%) !important;
}

/* Prevent the older 42%-height highlight from creating a line in the sidebar too. */
html:not(.io-black-mode) body.home .aside-card::before {
  content:"";
  position:absolute;
  inset:0;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:auto !important;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(115deg,rgba(255,255,255,.28),rgba(255,255,255,0) 30%,rgba(113,170,246,.045) 72%,rgba(255,255,255,.12)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.93),
    inset 1px 0 0 rgba(255,255,255,.50),
    inset 0 -1px 0 rgba(90,141,210,.13),
    inset -1px 0 0 rgba(125,170,231,.08);
  z-index:0;
}
html:not(.io-black-mode) body.home .aside-card > * {
  position:relative;
  z-index:1;
}

/* Sidebar rows: soft lens hover and clearer current-state response; spacing/geometry untouched. */
html:not(.io-black-mode) body.home .aside-card a {
  border-radius:10px;
  transition:background-color .18s ease,box-shadow .18s ease,color .18s ease,transform .18s ease;
}
html:not(.io-black-mode) body.home .aside-card a:hover {
  background:linear-gradient(120deg,rgba(255,255,255,.64),rgba(225,239,255,.40)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 4px 12px rgba(47,78,121,.07);
  transform:translateX(1px);
}

/* Keep dark mode conservative; only make the left list edge consistent. */
html.io-black-mode body.home .aside-card {
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(255,255,255,.025) !important;
}
html.io-black-mode body.home .aside-card a {
  border-radius:10px;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
html.io-black-mode body.home .aside-card a:hover {
  background:rgba(255,255,255,.055) !important;
  transform:translateX(1px);
}

@media (max-width:767.98px) {
  html:not(.io-black-mode) body.home .posts-item.sites-item:hover,
  html.io-black-mode body.home .posts-item.sites-item:hover,
  html:not(.io-black-mode) body.home .aside-card a:hover,
  html.io-black-mode body.home .aside-card a:hover {
    transform:none !important;
  }
}

/* =========================================================
   v1.5.11.5 — Softer neutral rims + selected prism accents
   Visual only: no card/link/two-tap/history/PJAX logic changes.
   ========================================================= */

/* Normal cards: soften the blue rim so the surface reads as clear glass,
   not as a blue outlined button. Keep the optical edge mostly white. */
html:not(.io-black-mode) body.home .posts-item.sites-item {
  border-color:rgba(177,198,224,.48) !important;
  background-color:rgba(255,255,255,.42) !important;
  background-image:
    radial-gradient(120% 170% at -9% -42%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.42) 27%,rgba(255,255,255,0) 55%),
    radial-gradient(105% 145% at 112% 126%,rgba(119,177,255,.105) 0%,rgba(163,121,255,.035) 35%,rgba(255,255,255,0) 63%),
    linear-gradient(128deg,rgba(255,255,255,.68) 0%,rgba(246,250,255,.35) 47%,rgba(255,255,255,.54) 100%) !important;
  box-shadow:
    0 8px 20px rgba(35,63,103,.065),
    0 2px 5px rgba(35,63,103,.025),
    0 0 0 .5px rgba(255,255,255,.94),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(101,145,204,.105),
    inset 1px 0 0 rgba(255,255,255,.62),
    inset -1px 0 0 rgba(125,166,219,.055) !important;
  -webkit-backdrop-filter:blur(16px) saturate(186%) contrast(103%) !important;
  backdrop-filter:blur(16px) saturate(186%) contrast(103%) !important;
}

/* Thin iOS-like specular refraction around the perimeter only. */
html:not(.io-black-mode) body.home .posts-item.sites-item::before {
  background:linear-gradient(112deg,
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,.055) 25%,
    rgba(255,255,255,0) 47%,
    rgba(123,178,255,.025) 72%,
    rgba(255,255,255,.10) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 1px 0 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(93,140,201,.09),
    inset -1px 0 0 rgba(122,165,220,.045) !important;
}

html:not(.io-black-mode) body.home .posts-item.sites-item::after {
  inset:2px !important;
  opacity:.62 !important;
  background:
    radial-gradient(85% 65% at 12% 0%,rgba(255,255,255,.28),rgba(255,255,255,0) 58%),
    radial-gradient(80% 70% at 96% 100%,rgba(109,171,255,.055),rgba(168,117,255,.028) 42%,rgba(255,255,255,0) 68%) !important;
}

html:not(.io-black-mode) body.home .posts-item.sites-item:hover {
  border-color:rgba(154,185,224,.62) !important;
  background-color:rgba(255,255,255,.52) !important;
  box-shadow:
    0 14px 31px rgba(39,73,120,.105),
    0 4px 10px rgba(44,77,120,.038),
    0 0 0 .5px rgba(255,255,255,.98),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(89,139,211,.13) !important;
}

/* Sidebar follows the same softer neutral-rim language. */
html:not(.io-black-mode) body.home .aside-card {
  border-color:rgba(180,200,226,.46) !important;
  background-color:rgba(255,255,255,.43) !important;
  box-shadow:
    0 12px 28px rgba(41,68,107,.072),
    0 3px 8px rgba(41,68,107,.025),
    0 0 0 .5px rgba(255,255,255,.93),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(95,145,213,.085) !important;
  -webkit-backdrop-filter:blur(18px) saturate(180%) !important;
  backdrop-filter:blur(18px) saturate(180%) !important;
}

/* Selected mobile card: use a repeating prism palette by card position.
   This looks random in the grid without touching the two-tap JS logic. */
body.home .posts-item.sites-item.mf-mobile-selected { --mf-select-rgb: 67,122,255; }
body.home .posts-item.sites-item:nth-child(8n+2).mf-mobile-selected { --mf-select-rgb: 130,78,255; }
body.home .posts-item.sites-item:nth-child(8n+3).mf-mobile-selected { --mf-select-rgb: 0,158,126; }
body.home .posts-item.sites-item:nth-child(8n+4).mf-mobile-selected { --mf-select-rgb: 231,77,115; }
body.home .posts-item.sites-item:nth-child(8n+5).mf-mobile-selected { --mf-select-rgb: 219,118,30; }
body.home .posts-item.sites-item:nth-child(8n+6).mf-mobile-selected { --mf-select-rgb: 0,139,190; }
body.home .posts-item.sites-item:nth-child(8n+7).mf-mobile-selected { --mf-select-rgb: 104,72,196; }
body.home .posts-item.sites-item:nth-child(8n+8).mf-mobile-selected { --mf-select-rgb: 36,139,76; }

/* A darker coloured rim only when selected; the logo itself remains native. */
body.home .posts-item.sites-item.mf-mobile-selected {
  border-color:rgba(var(--mf-select-rgb),.82) !important;
  background-color:rgba(var(--mf-select-rgb),.055) !important;
  box-shadow:
    0 10px 24px rgba(var(--mf-select-rgb),.15),
    0 0 0 1px rgba(var(--mf-select-rgb),.19),
    0 0 16px rgba(var(--mf-select-rgb),.11),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(var(--mf-select-rgb),.26) !important;
}

body.home .posts-item.sites-item.mf-mobile-selected::before {
  background:
    linear-gradient(118deg,
      rgba(255,255,255,.32) 0%,
      rgba(255,255,255,.06) 25%,
      rgba(var(--mf-select-rgb),.055) 66%,
      rgba(var(--mf-select-rgb),.16) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 1px 0 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(var(--mf-select-rgb),.34),
    inset -1px 0 0 rgba(var(--mf-select-rgb),.22) !important;
}

body.home .posts-item.sites-item.mf-mobile-selected::after {
  opacity:.92 !important;
  background:
    radial-gradient(85% 90% at 0% 0%,rgba(255,255,255,.30),rgba(255,255,255,0) 52%),
    radial-gradient(92% 110% at 110% 115%,rgba(var(--mf-select-rgb),.17),rgba(var(--mf-select-rgb),.035) 46%,rgba(255,255,255,0) 68%) !important;
}

/* Dark mode selected cards need the same coloured prism cue, but deeper. */
html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
  border-color:rgba(var(--mf-select-rgb),.72) !important;
  background-color:rgba(var(--mf-select-rgb),.075) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(var(--mf-select-rgb),.18),
    0 0 18px rgba(var(--mf-select-rgb),.10),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(var(--mf-select-rgb),.22) !important;
}

/* Mobile: selected state stays crisp and does not enlarge card geometry. */
@media (max-width:767.98px) {
  html:not(.io-black-mode) body.home .posts-item.sites-item {
    border-color:rgba(174,198,229,.45) !important;
    -webkit-backdrop-filter:blur(13px) saturate(178%) !important;
    backdrop-filter:blur(13px) saturate(178%) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected {
    transform:none !important;
  }
}

/* =========================================================
   v1.5.11.6 — Stronger iOS 26 liquid-glass optics + real selected prism rim
   Visual enhancement only. Card geometry and link/two-tap behaviour unchanged.
   ========================================================= */

/* Clearer liquid-glass body: less coloured outline, more optical depth/reflection. */
html:not(.io-black-mode) body.home .posts-item.sites-item {
  border-color:rgba(202,216,235,.40) !important;
  background-color:rgba(255,255,255,.38) !important;
  background-image:
    radial-gradient(125% 190% at -14% -54%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.43) 28%,rgba(255,255,255,0) 55%),
    radial-gradient(95% 145% at 112% 120%,rgba(115,175,255,.095) 0%,rgba(173,117,255,.035) 38%,rgba(255,255,255,0) 68%),
    linear-gradient(132deg,rgba(255,255,255,.64) 0%,rgba(244,249,255,.27) 47%,rgba(255,255,255,.48) 100%) !important;
  box-shadow:
    0 10px 25px rgba(36,59,94,.065),
    0 2px 6px rgba(36,59,94,.022),
    0 0 0 .5px rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(76,118,179,.095),
    inset 1px 0 0 rgba(255,255,255,.54),
    inset -1px 0 0 rgba(107,149,207,.04) !important;
  -webkit-backdrop-filter:blur(21px) saturate(205%) contrast(104%) brightness(103%) !important;
  backdrop-filter:blur(21px) saturate(205%) contrast(104%) brightness(103%) !important;
}

/* Fine specular perimeter, like light sliding over a curved clear lens. */
html:not(.io-black-mode) body.home .posts-item.sites-item::before {
  inset:0 !important;
  border-radius:inherit !important;
  background:
    linear-gradient(116deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.10) 22%,
      rgba(255,255,255,0) 43%,
      rgba(130,183,255,.025) 71%,
      rgba(184,136,255,.018) 86%,
      rgba(255,255,255,.14) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.97),
    inset 1px 0 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(78,122,183,.10),
    inset -1px 0 0 rgba(110,151,210,.04) !important;
  opacity:1 !important;
}

/* Soft refraction inside the pane, deliberately broad so it never looks like a line. */
html:not(.io-black-mode) body.home .posts-item.sites-item::after {
  inset:1px !important;
  border-radius:inherit !important;
  background:
    radial-gradient(105% 90% at 4% -18%,rgba(255,255,255,.36),rgba(255,255,255,0) 58%),
    radial-gradient(90% 95% at 104% 112%,rgba(104,169,255,.060),rgba(159,111,255,.024) 46%,rgba(255,255,255,0) 72%) !important;
  opacity:.78 !important;
}

html:not(.io-black-mode) body.home .posts-item.sites-item:hover {
  border-color:rgba(183,207,237,.54) !important;
  background-color:rgba(255,255,255,.46) !important;
  box-shadow:
    0 15px 34px rgba(37,67,108,.095),
    0 4px 11px rgba(37,67,108,.028),
    0 0 0 .5px rgba(255,255,255,.98),
    0 0 22px rgba(112,167,246,.045),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(76,124,191,.12) !important;
}

/* REAL selected prism edge. JS assigns two genuinely random deep colours each first tap.
   No favicon/background-image manipulation, so it remains safe on iOS WebKit and Android. */
body.home .posts-item.sites-item.mf-mobile-selected {
  --mf-select-rgb:38,92,190;
  --mf-select-rgb2:109,72,214;
  position:relative !important;
  isolation:isolate;
  border:1px solid rgba(var(--mf-select-rgb),.94) !important;
  outline:1px solid rgba(var(--mf-select-rgb2),.34) !important;
  outline-offset:-2px !important;
  background-color:rgba(var(--mf-select-rgb),.050) !important;
  box-shadow:
    0 11px 25px rgba(var(--mf-select-rgb),.17),
    0 0 0 1px rgba(var(--mf-select-rgb),.42),
    0 0 12px rgba(var(--mf-select-rgb2),.14),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 1px 0 0 rgba(255,255,255,.48),
    inset 0 -2px 2px rgba(var(--mf-select-rgb),.28),
    inset -2px 0 2px rgba(var(--mf-select-rgb2),.22) !important;
}

/* Gradient glass rim itself: dark colour on the lower/right edge, white specular top/left. */
body.home .posts-item.sites-item.mf-mobile-selected::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  padding:1.5px !important;
  background:conic-gradient(from 214deg,
    rgba(255,255,255,.92) 0deg,
    rgba(255,255,255,.34) 64deg,
    rgba(var(--mf-select-rgb2),.72) 132deg,
    rgba(var(--mf-select-rgb),.98) 212deg,
    rgba(var(--mf-select-rgb),.72) 285deg,
    rgba(255,255,255,.90) 360deg) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  box-shadow:none !important;
  opacity:1 !important;
}

/* Internal coloured refraction, kept away from the centre so copy stays crisp. */
body.home .posts-item.sites-item.mf-mobile-selected::after {
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    radial-gradient(75% 92% at -8% -20%,rgba(255,255,255,.40),rgba(255,255,255,0) 62%),
    radial-gradient(78% 115% at 111% 115%,rgba(var(--mf-select-rgb),.24),rgba(var(--mf-select-rgb2),.080) 46%,rgba(255,255,255,0) 72%),
    linear-gradient(125deg,rgba(255,255,255,.08),rgba(var(--mf-select-rgb),.035) 62%,rgba(var(--mf-select-rgb2),.075)) !important;
  opacity:1 !important;
}
body.home .posts-item.sites-item.mf-mobile-selected > * { position:relative; z-index:1; }

/* Selected text/arrow stays readable and reflects the deeper prism cue. */
body.home .posts-item.sites-item.mf-mobile-selected .item-title,
body.home .posts-item.sites-item.mf-mobile-selected .item-title b,
body.home .posts-item.sites-item.mf-mobile-selected .togo,
body.home .posts-item.sites-item.mf-mobile-selected .togo i,
body.home .posts-item.sites-item.mf-mobile-selected .big-togo {
  color:rgb(var(--mf-select-rgb)) !important;
  text-shadow:0 0 10px rgba(var(--mf-select-rgb),.10);
}

/* Dark mode: deeper refraction rim rather than a bright neon outline. */
html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
  border-color:rgba(var(--mf-select-rgb),.88) !important;
  outline-color:rgba(var(--mf-select-rgb2),.28) !important;
  background-color:rgba(var(--mf-select-rgb),.085) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.30),
    0 0 0 1px rgba(var(--mf-select-rgb),.36),
    0 0 13px rgba(var(--mf-select-rgb2),.10),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -2px 2px rgba(var(--mf-select-rgb),.27),
    inset -2px 0 2px rgba(var(--mf-select-rgb2),.20) !important;
}

/* Sidebar + large panels get the same clearer liquid-glass language, without layout changes. */
html:not(.io-black-mode) body.home .aside-card,
html:not(.io-black-mode) body.home .card:not(.card-color) {
  border-color:rgba(205,218,236,.42) !important;
  background-color:rgba(255,255,255,.38) !important;
  box-shadow:
    0 13px 31px rgba(39,64,101,.065),
    0 3px 9px rgba(39,64,101,.022),
    0 0 0 .5px rgba(255,255,255,.94),
    inset 0 1px 0 rgba(255,255,255,.99),
    inset 0 -1px 0 rgba(88,132,193,.085) !important;
  -webkit-backdrop-filter:blur(22px) saturate(195%) contrast(103%) !important;
  backdrop-filter:blur(22px) saturate(195%) contrast(103%) !important;
}

@media (max-width:767.98px) {
  html:not(.io-black-mode) body.home .posts-item.sites-item {
    -webkit-backdrop-filter:blur(15px) saturate(188%) contrast(103%) !important;
    backdrop-filter:blur(15px) saturate(188%) contrast(103%) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected {
    transform:none !important;
  }
}


/* ==========================================================
   v1.5.11.7 — guaranteed prism frame + stronger iOS 26 glass
   Visual-only overrides. No card dimensions or click logic changed.
   ========================================================== */

/* 1) Guaranteed visible prism frame: avoid mask-composite so Safari/Chrome/Android
      all render the selected/hovered outline consistently. */
body.home .posts-item.sites-item.mf-mobile-selected,
body.home .posts-item.sites-item.mf-desktop-prism {
  --mf-select-rgb: 38,92,190;
  --mf-select-rgb2: 109,72,214;
  position: relative !important;
  isolation: isolate !important;
  outline: none !important;
  box-shadow:
    0 14px 30px rgba(var(--mf-select-rgb),.18),
    0 0 0 1px rgba(var(--mf-select-rgb2),.48),
    0 0 18px rgba(var(--mf-select-rgb),.14),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(var(--mf-select-rgb),.22) !important;
}

body.home .posts-item.sites-item.mf-mobile-selected::before,
body.home .posts-item.sites-item.mf-desktop-prism::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:6 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  padding:0 !important;
  border:2px solid rgba(var(--mf-select-rgb),.96) !important;
  background:transparent !important;
  -webkit-mask:none !important;
  mask:none !important;
  -webkit-mask-composite:initial !important;
  mask-composite:initial !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.56),
    inset -1px -1px 0 rgba(var(--mf-select-rgb2),.64),
    0 0 0 1px rgba(var(--mf-select-rgb2),.34) !important;
  opacity:1 !important;
}

body.home .posts-item.sites-item.mf-mobile-selected::after,
body.home .posts-item.sites-item.mf-desktop-prism::after {
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  z-index:0 !important;
  pointer-events:none !important;
  border-radius:inherit !important;
  background:
    radial-gradient(90% 120% at 0% -24%,rgba(255,255,255,.46),rgba(255,255,255,0) 56%),
    radial-gradient(95% 135% at 112% 115%,rgba(var(--mf-select-rgb),.22),rgba(var(--mf-select-rgb2),.08) 48%,transparent 74%),
    linear-gradient(130deg,rgba(255,255,255,.08),rgba(var(--mf-select-rgb),.025) 58%,rgba(var(--mf-select-rgb2),.08)) !important;
  opacity:1 !important;
}

html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected::before,
html.io-black-mode body.home .posts-item.sites-item.mf-desktop-prism::before {
  border-color:rgba(var(--mf-select-rgb),.98) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset -1px -1px 0 rgba(var(--mf-select-rgb2),.74),
    0 0 0 1px rgba(var(--mf-select-rgb2),.40),
    0 0 13px rgba(var(--mf-select-rgb),.16) !important;
}

/* 2) Light mode: stronger, cleaner liquid glass everywhere on the home content,
      while keeping geometry untouched. */
html:not(.io-black-mode) body.home .aside-card,
html:not(.io-black-mode) body.home .card:not(.card-color),
html:not(.io-black-mode) body.home .site-list-card,
html:not(.io-black-mode) body.home .url-card,
html:not(.io-black-mode) body.home .posts-item.sites-item {
  background-color:rgba(255,255,255,.30) !important;
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:
    0 15px 34px rgba(32,54,86,.070),
    0 3px 10px rgba(32,54,86,.030),
    0 0 0 .5px rgba(164,188,224,.22),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(82,126,191,.10) !important;
  -webkit-backdrop-filter:blur(24px) saturate(205%) contrast(104%) !important;
  backdrop-filter:blur(24px) saturate(205%) contrast(104%) !important;
}

/* Left navigation in light mode: crystal panel + lens rows. */
html:not(.io-black-mode) body.home .aside-card {
  background-image:
    radial-gradient(120% 70% at -10% -18%,rgba(255,255,255,.72),transparent 58%),
    linear-gradient(145deg,rgba(255,255,255,.34),rgba(225,237,255,.13) 55%,rgba(244,236,255,.10)) !important;
}
html:not(.io-black-mode) body.home .aside-card a {
  border:1px solid transparent;
  border-radius:12px !important;
  transition:background .20s ease,border-color .20s ease,box-shadow .20s ease,color .20s ease !important;
}
html:not(.io-black-mode) body.home .aside-card a:hover,
html:not(.io-black-mode) body.home .aside-card li.current-menu-item > a,
html:not(.io-black-mode) body.home .aside-card li.active > a {
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(228,239,255,.28)) !important;
  border-color:rgba(255,255,255,.84) !important;
  box-shadow:
    0 7px 18px rgba(48,77,120,.07),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(97,143,209,.11) !important;
}

/* Dark mode left navigation: stronger depth/refraction without becoming opaque. */
html.io-black-mode body.home .aside-card {
  background-color:rgba(27,33,43,.56) !important;
  background-image:
    radial-gradient(120% 75% at -10% -18%,rgba(112,145,205,.11),transparent 58%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(62,80,116,.055) 58%,rgba(105,72,148,.045)) !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:
    0 16px 36px rgba(0,0,0,.26),
    0 4px 12px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.105),
    inset 1px 0 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(74,111,176,.14) !important;
  -webkit-backdrop-filter:blur(25px) saturate(185%) contrast(105%) !important;
  backdrop-filter:blur(25px) saturate(185%) contrast(105%) !important;
}
html.io-black-mode body.home .aside-card a {
  border:1px solid transparent;
  border-radius:12px !important;
  transition:background .20s ease,border-color .20s ease,box-shadow .20s ease,color .20s ease !important;
}
html.io-black-mode body.home .aside-card a:hover,
html.io-black-mode body.home .aside-card li.current-menu-item > a,
html.io-black-mode body.home .aside-card li.active > a {
  background:linear-gradient(135deg,rgba(255,255,255,.085),rgba(83,108,154,.075)) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(89,130,197,.12) !important;
}

/* Category trays/tabs: a little more optical depth in BOTH themes. */
html:not(.io-black-mode) body.home .card:not(.card-color) .card-header,
html:not(.io-black-mode) body.home .card:not(.card-color) .nav-tabs,
html:not(.io-black-mode) body.home .card:not(.card-color) .nav-pills {
  background:linear-gradient(135deg,rgba(255,255,255,.46),rgba(229,239,255,.22)) !important;
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94),inset 0 -1px 0 rgba(104,145,202,.08) !important;
  -webkit-backdrop-filter:blur(18px) saturate(190%) !important;
  backdrop-filter:blur(18px) saturate(190%) !important;
}
html.io-black-mode body.home .card:not(.card-color) {
  background-color:rgba(26,32,42,.53) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(75,111,170,.10) !important;
  -webkit-backdrop-filter:blur(24px) saturate(180%) contrast(104%) !important;
  backdrop-filter:blur(24px) saturate(180%) contrast(104%) !important;
}

@media (max-width:767.98px){
  html:not(.io-black-mode) body.home .aside-card,
  html:not(.io-black-mode) body.home .card:not(.card-color),
  html:not(.io-black-mode) body.home .posts-item.sites-item {
    -webkit-backdrop-filter:blur(16px) saturate(190%) contrast(103%) !important;
    backdrop-filter:blur(16px) saturate(190%) contrast(103%) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected::before {
    border-width:2px !important;
  }
}

/* ==========================================================
   v1.5.11.8 — prism frame thickness balance
   Desktop thinner / Mobile stronger. No geometry or click logic changes.
   ========================================================== */

/* Desktop / tablet pointer devices: keep the prism line crisp but finer. */
@media (min-width:768px) {
  body.home .posts-item.sites-item.mf-desktop-prism::before,
  body.home .posts-item.sites-item.mf-mobile-selected::before {
    border-width:1px !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.34),
      inset -1px -1px 0 rgba(var(--mf-select-rgb2),.46),
      0 0 0 1px rgba(var(--mf-select-rgb2),.20),
      0 0 10px rgba(var(--mf-select-rgb),.10) !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-desktop-prism::before,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected::before {
    border-width:1px !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.10),
      inset -1px -1px 0 rgba(var(--mf-select-rgb2),.56),
      0 0 0 1px rgba(var(--mf-select-rgb2),.24),
      0 0 10px rgba(var(--mf-select-rgb),.11) !important;
  }
}

/* Phones: make first-tap selected frame clearly visible without enlarging card. */
@media (max-width:767.98px) {
  body.home .posts-item.sites-item.mf-mobile-selected::before {
    border-width:3px !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.48),
      inset -1px -1px 0 rgba(var(--mf-select-rgb2),.62),
      0 0 0 1px rgba(var(--mf-select-rgb2),.26),
      0 0 12px rgba(var(--mf-select-rgb),.12) !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected::before {
    border-width:3px !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.12),
      inset -1px -1px 0 rgba(var(--mf-select-rgb2),.70),
      0 0 0 1px rgba(var(--mf-select-rgb2),.30),
      0 0 12px rgba(var(--mf-select-rgb),.13) !important;
  }
}

/* ==========================================================
   v1.5.11.9 — mobile selected frame visibility fix
   Keep desktop exactly as v1.5.11.8. On phones, use a real
   inward outline plus prism rim so the first-tap state cannot
   disappear behind child layers or blending.
   ========================================================== */
@media (max-width:767.98px) {
  body.home .posts-item.sites-item.mf-mobile-selected {
    outline:2px solid rgba(var(--mf-select-rgb),.96) !important;
    outline-offset:-2px !important;
    box-shadow:
      0 10px 22px rgba(var(--mf-select-rgb),.13),
      0 0 0 1px rgba(var(--mf-select-rgb2),.34),
      inset 0 0 0 1px rgba(255,255,255,.44),
      inset 0 -1px 0 rgba(var(--mf-select-rgb2),.42) !important;
  }

  body.home .posts-item.sites-item.mf-mobile-selected::before {
    inset:1px !important;
    border-width:2px !important;
    border-color:rgba(var(--mf-select-rgb2),.82) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.58),
      inset -1px -1px 0 rgba(var(--mf-select-rgb),.56),
      0 0 8px rgba(var(--mf-select-rgb),.10) !important;
  }

  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    outline-color:rgba(var(--mf-select-rgb),.98) !important;
    box-shadow:
      0 10px 24px rgba(0,0,0,.22),
      0 0 0 1px rgba(var(--mf-select-rgb2),.42),
      inset 0 0 0 1px rgba(255,255,255,.10),
      inset 0 -1px 0 rgba(var(--mf-select-rgb2),.52) !important;
  }

  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected::before {
    border-width:2px !important;
    border-color:rgba(var(--mf-select-rgb2),.92) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.12),
      inset -1px -1px 0 rgba(var(--mf-select-rgb),.66),
      0 0 9px rgba(var(--mf-select-rgb),.12) !important;
  }
}

/* =========================================================
   v1.5.11.10 — mobile first-tap fallback cue
   Some mobile WebKit/Chrome compositing paths can visually swallow the
   prism outline. Keep the outline enhancement, but make the first-tap
   state unmistakable by turning ONLY the site title/direct arrow red.
   Desktop hover/outline behaviour is unchanged.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  html:not(.io-black-mode) body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html:not(.io-black-mode) body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html:not(.io-black-mode) body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html:not(.io-black-mode) body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html:not(.io-black-mode) body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html:not(.io-black-mode) body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#f1404b !important;
    -webkit-text-fill-color:#f1404b !important;
    text-shadow:0 0 10px rgba(241,64,75,.12) !important;
  }

  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#ff5964 !important;
    -webkit-text-fill-color:#ff5964 !important;
    text-shadow:0 0 10px rgba(255,89,100,.16) !important;
  }
}


/* =========================================================
   v1.5.11.12 — mobile first-tap red frame timing + thickness fix
   First tap = medium red frame; second tap = native open.
   Disable the older mobile prism pseudo-frame so it cannot appear late/thick.
   Desktop prism styling remains untouched.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:767.98px) {
  body.home .posts-item.sites-item.mf-mobile-selected {
    outline:none !important;
    border-color:rgba(241,64,75,.96) !important;
    box-shadow:
      inset 0 0 0 1px rgba(241,64,75,.92),
      inset 0 1px 0 rgba(255,255,255,.72),
      0 8px 18px rgba(241,64,75,.10),
      0 0 0 1px rgba(241,64,75,.16) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected::before {
    display:none !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected::after {
    opacity:.20 !important;
  }
  body.home .posts-item.sites-item a.sites-body:focus,
  body.home .posts-item.sites-item a.sites-body:focus-visible,
  body.home .posts-item.sites-item a.togo:focus,
  body.home .posts-item.sites-item a.big-togo:focus {
    outline:none !important;
    box-shadow:none !important;
  }

  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    border-color:rgba(255,82,95,.98) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,82,95,.96),
      inset 0 1px 0 rgba(255,255,255,.12),
      0 8px 20px rgba(255,82,95,.12),
      0 0 0 1px rgba(255,82,95,.18) !important;
  }
}

/* =========================================================
   v1.5.11.12 — authoritative mobile first-tap selected cue
   Same behaviour in light/dark: red frame + red title + red direct arrow.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  body.home .posts-item.sites-item.mf-mobile-selected {
    border-color:rgba(241,64,75,.96) !important;
    box-shadow:
      inset 0 0 0 1px rgba(241,64,75,.92),
      inset 0 1px 0 rgba(255,255,255,.68),
      0 7px 17px rgba(241,64,75,.09),
      0 0 0 1px rgba(241,64,75,.14) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  body.home .posts-item.sites-item.mf-mobile-selected .togo,
  body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#f1404b !important;
    -webkit-text-fill-color:#f1404b !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    border-color:rgba(255,82,95,.98) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,82,95,.94),
      inset 0 1px 0 rgba(255,255,255,.12),
      0 7px 18px rgba(255,82,95,.10),
      0 0 0 1px rgba(255,82,95,.16) !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#ff5964 !important;
    -webkit-text-fill-color:#ff5964 !important;
  }
}

/* =========================================================
   v1.5.11.13 — first native mobile tap: all four cues together
   One selected state drives halo + title + arrow + visible red frame in both themes.
   Apply the frame to the actual clickable .sites-body as well as the article wrapper,
   because OneNav mobile cards visually render on the inner link in some layouts.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  body.home .posts-item.sites-item.mf-mobile-selected,
  body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body {
    border-color:rgba(241,64,75,.98) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body {
    position:relative !important;
    border:1.5px solid rgba(241,64,75,.98) !important;
    border-radius:inherit !important;
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.58),
      0 0 0 .5px rgba(241,64,75,.22),
      0 7px 18px rgba(241,64,75,.10) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  body.home .posts-item.sites-item.mf-mobile-selected a.sites-body .item-title,
  body.home .posts-item.sites-item.mf-mobile-selected a.sites-body .item-title *,
  body.home .posts-item.sites-item.mf-mobile-selected .togo,
  body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#f1404b !important;
    -webkit-text-fill-color:#f1404b !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body {
    border-color:rgba(255,82,95,.98) !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body {
    box-shadow:
      inset 0 0 0 .5px rgba(255,255,255,.14),
      0 0 0 .5px rgba(255,82,95,.28),
      0 7px 20px rgba(255,82,95,.13) !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#ff5964 !important;
    -webkit-text-fill-color:#ff5964 !important;
  }
}

/* ==========================================================================\n   v1.5.11.14 — mobile first tap: ONE state, four cues at the same instant.\n   The JS adds .mf-mobile-selected synchronously on the first click and keeps it\n   until the second click. These final rules deliberately override all earlier\n   experiments so day/night behave identically.\n   ========================================================================== */
@media (hover:none), (max-width:991.98px) {
  body.home .posts-item.sites-item.mf-mobile-selected {
    border: 2px solid rgba(226, 55, 74, .92) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.72) inset,
      0 0 0 1px rgba(226,55,74,.18),
      0 8px 22px rgba(226,55,74,.14),
      0 12px 30px rgba(28,36,52,.08) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body {
    border-radius: inherit !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  body.home .posts-item.sites-item.mf-mobile-selected .togo,
  body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#e2374a !important;
    -webkit-text-fill-color:#e2374a !important;
  }
  /* Keep the logo itself untouched; only the existing halo/diffusion layer gets color. */
  body.home .posts-item.sites-item.mf-mobile-selected .blur-img-bg {
    opacity:.38 !important;
    filter: blur(10px) saturate(1.55) !important;
    transform: scale(1.16) !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    border-color: rgba(255,77,94,.96) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.12) inset,
      0 0 0 1px rgba(255,77,94,.24),
      0 8px 24px rgba(255,50,72,.18),
      0 14px 34px rgba(0,0,0,.30) !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#ff4d5e !important;
    -webkit-text-fill-color:#ff4d5e !important;
  }
}


/* ==========================================================================
   v1.5.11.15 — mobile selected-state stability.
   No layout-changing border on touch devices: use inset/outer shadows only,
   so Android neighbouring cards/icons do not jiggle when one card is selected.
   iOS gets an immediate, paint-friendly red glass ring driven from touchstart.
   ========================================================================== */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  body.home .posts-item.sites-item.mf-mobile-selected {
    border-color: transparent !important;
    outline: none !important;
    box-shadow:
      inset 0 0 0 2px rgba(226,55,74,.94),
      inset 0 1px 0 rgba(255,255,255,.72),
      0 0 0 1px rgba(226,55,74,.18),
      0 8px 22px rgba(226,55,74,.12),
      0 12px 30px rgba(28,36,52,.07) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body {
    border:0 !important;
    box-shadow:none !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  body.home .posts-item.sites-item.mf-mobile-selected .togo,
  body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#e2374a !important;
    -webkit-text-fill-color:#e2374a !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    box-shadow:
      inset 0 0 0 2px rgba(255,82,95,.98),
      inset 0 1px 0 rgba(255,255,255,.11),
      0 0 0 1px rgba(255,82,95,.20),
      0 8px 22px rgba(255,82,95,.13),
      0 12px 30px rgba(0,0,0,.20) !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#ff5964 !important;
    -webkit-text-fill-color:#ff5964 !important;
  }

  /* Android: stop transform/bounce entirely; only the selected card gets halo/color.
     This prevents other grid items from appearing to shake due to compositor relayout. */
  html.mf-android body.home .posts-item.sites-item.mf-mobile-selected .item-image {
    animation:none !important;
    transform:none !important;
    will-change:auto !important;
  }

  /* iOS: stronger paint-safe ring without changing box geometry. */
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected {
    box-shadow:
      inset 0 0 0 2px rgba(226,55,74,.98),
      inset 0 1px 0 rgba(255,255,255,.78),
      0 0 0 1px rgba(226,55,74,.20),
      0 7px 18px rgba(226,55,74,.12) !important;
  }
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    box-shadow:
      inset 0 0 0 2px rgba(255,82,95,1),
      inset 0 1px 0 rgba(255,255,255,.12),
      0 0 0 1px rgba(255,82,95,.22),
      0 7px 18px rgba(255,82,95,.14) !important;
  }
}


/* ========================================================================== 
   v1.5.11.16 — unified phone first-tap cue, NO border/frame.
   iOS and Android: first tap = logo diffusion + red title + red arrow;
   second tap = open.  Final rules intentionally neutralize every earlier
   mobile selected-frame experiment without touching desktop prism styling.
   ========================================================================== */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  body.home .posts-item.sites-item.mf-mobile-selected,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected,
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    border-color: rgba(255,255,255,.24) !important;
    outline: none !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      0 8px 20px rgba(27,36,50,.07) !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected,
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    border-color: rgba(255,255,255,.10) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 9px 22px rgba(0,0,0,.18) !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected::before,
  body.home .posts-item.sites-item.mf-mobile-selected::after {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  body.home .posts-item.sites-item.mf-mobile-selected .togo,
  body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#e2374a !important;
    -webkit-text-fill-color:#e2374a !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#ff5964 !important;
    -webkit-text-fill-color:#ff5964 !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected .blur-img-bg {
    opacity:.40 !important;
    filter:blur(10px) saturate(1.58) !important;
    transform:scale(1.16) !important;
  }
  /* Do not bounce the actual logo on either mobile platform. */
  html.mf-android body.home .posts-item.sites-item.mf-mobile-selected .item-image,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .item-image {
    animation:none !important;
    transform:none !important;
    will-change:auto !important;
  }
}


/* ========================================================================== 
   v1.5.11.17 — phones: restore the original simple first-tap visual only.
   No selected frame.  First tap = icon colour diffusion + red title + red arrow.
   Second tap is left to the original OneNav/native link handling.
   ========================================================================== */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  body.home .posts-item.sites-item.mf-mobile-selected,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected,
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected,
  html.mf-android body.home .posts-item.sites-item.mf-mobile-selected,
  html.mf-android.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    border-width:1px !important;
    outline:none !important;
    transform:none !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected::before,
  body.home .posts-item.sites-item.mf-mobile-selected::after,
  body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body::before,
  body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body::after {
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body {
    border-width:0 !important;
    outline:none !important;
    box-shadow:none !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  body.home .posts-item.sites-item.mf-mobile-selected .togo,
  body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#e2374a !important;
    -webkit-text-fill-color:#e2374a !important;
  }
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#ff5964 !important;
    -webkit-text-fill-color:#ff5964 !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected .blur-img-bg {
    opacity:.40 !important;
    filter:blur(10px) saturate(1.58) !important;
    transform:scale(1.16) !important;
  }
  html.mf-android body.home .posts-item.sites-item.mf-mobile-selected .item-image,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .item-image {
    animation:none !important;
    transform:none !important;
    will-change:auto !important;
  }
}


/* ==========================================================================
   v1.5.11.18 — iOS Safari first-tap hover trap neutralizer.
   Keep the Android visual path untouched. iOS selected state remains:
   icon diffusion + red title + red quick-access arrow, with no selected frame.
   ========================================================================== */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  html.mf-ios body.home .posts-item.sites-item:hover {
    transform:none !important;
  }
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected,
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected {
    outline:none !important;
    transform:none !important;
  }
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected::before,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected::after,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body::before,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body::after {
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
  }
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected > a.sites-body {
    border:0 !important;
    outline:none !important;
    box-shadow:none !important;
  }
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#e2374a !important;
    -webkit-text-fill-color:#e2374a !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title,
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .item-title *,
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.mf-ios.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    color:#ff5964 !important;
    -webkit-text-fill-color:#ff5964 !important;
  }
}


/* =========================================================
   v1.5.11.19 — footer metrics reliability/mobile layout
   ========================================================= */
@media (max-width:767.98px){
  .mf-site-footer-metrics{
    width:100%;
    max-width:430px;
    margin:14px auto 8px;
    padding:0 12px;
    gap:8px;
    flex-direction:column;
    align-items:stretch;
  }
  .mf-site-footer-metrics .mf-site-uptime{
    width:100%;
    max-width:none;
    min-height:40px;
    justify-content:center;
    padding:8px 10px;
    border-radius:16px;
    box-sizing:border-box;
    font-size:12px;
  }
  .mf-site-footer-metrics .mf-site-uptime-value{
    font-size:12px;
    white-space:nowrap;
  }
  .mf-owner-stats{
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px;
    padding:6px;
    border-radius:18px;
    box-sizing:border-box;
  }
  .mf-owner-stats-badge{
    grid-column:1 / -1;
    justify-self:center;
    margin:0 0 1px;
    padding:4px 9px;
  }
  .mf-owner-stat{
    min-width:0;
    min-height:42px;
    padding:5px 7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    border-radius:12px;
    background:rgba(255,255,255,.34);
  }
  .mf-owner-stat + .mf-owner-stat::before{display:none;}
  .mf-owner-stat small{font-size:10px;line-height:1.2;}
  .mf-owner-stat strong{font-size:13px;line-height:1.25;}
  .mf-owner-stat--peak{grid-column:1 / -1;}
  html.io-black-mode .mf-owner-stat{background:rgba(255,255,255,.045);}
}


/* ==========================================================================
   v1.5.11.25 — desktop homepage card hover: title + direct arrow turn red.
   Desktop mouse/trackpad only. Mobile first-tap/two-tap logic is untouched.
   ========================================================================== */
@media (hover:hover) and (pointer:fine) and (min-width:992px) {
  body.home .posts-item.sites-item:hover .item-title,
  body.home .posts-item.sites-item:hover .item-title *,
  body.home .posts-item.sites-item:hover .togo,
  body.home .posts-item.sites-item:hover .togo *,
  body.home .posts-item.sites-item:hover .big-togo,
  body.home .posts-item.sites-item:hover .big-togo * {
    color:#e2374a !important;
    -webkit-text-fill-color:#e2374a !important;
  }

  html.io-black-mode body.home .posts-item.sites-item:hover .item-title,
  html.io-black-mode body.home .posts-item.sites-item:hover .item-title *,
  html.io-black-mode body.home .posts-item.sites-item:hover .togo,
  html.io-black-mode body.home .posts-item.sites-item:hover .togo *,
  html.io-black-mode body.home .posts-item.sites-item:hover .big-togo,
  html.io-black-mode body.home .posts-item.sites-item:hover .big-togo * {
    color:#ff5964 !important;
    -webkit-text-fill-color:#ff5964 !important;
  }
}


/* =========================================================
   v1.6.0.1 — check-in result notice always above modal/backdrop
   ========================================================= */
#mf-checkin-result-notice.mf-checkin-result-notice {
  position:fixed !important;
  left:50% !important;
  top:max(24px,calc(env(safe-area-inset-top,0px) + 18px)) !important;
  z-index:2147483647 !important;
  width:min(430px,calc(100vw - 28px)) !important;
  pointer-events:none !important;
  transform:translate3d(-50%,-18px,0) scale(.98) !important;
  opacity:0 !important;
  visibility:hidden !important;
  transition:opacity .24s ease,transform .28s cubic-bezier(.2,.8,.2,1),visibility .24s !important;
  isolation:isolate !important;
}
#mf-checkin-result-notice.mf-checkin-result-notice.is-show {
  opacity:1 !important;
  visibility:visible !important;
  transform:translate3d(-50%,0,0) scale(1) !important;
}
#mf-checkin-result-notice .mf-checkin-result-card {
  display:flex !important;
  align-items:center !important;
  gap:11px !important;
  padding:14px 17px !important;
  border:1px solid rgba(255,255,255,.82) !important;
  border-radius:18px !important;
  color:#1f2937 !important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(239,247,255,.91)) !important;
  box-shadow:0 16px 48px rgba(24,45,78,.24),inset 0 1px 0 rgba(255,255,255,.98) !important;
  -webkit-backdrop-filter:blur(24px) saturate(175%) !important;
  backdrop-filter:blur(24px) saturate(175%) !important;
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.55 !important;
  text-align:left !important;
}
#mf-checkin-result-notice .mf-checkin-result-icon {
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  color:#fff !important;
  background:linear-gradient(135deg,#25c06d,#20a95f) !important;
  box-shadow:0 6px 16px rgba(34,184,103,.24) !important;
  font-size:16px !important;
  font-weight:800 !important;
}
#mf-checkin-result-notice .mf-checkin-result-text {
  min-width:0 !important;
  overflow-wrap:anywhere !important;
}
html.io-black-mode #mf-checkin-result-notice .mf-checkin-result-card {
  color:#f2f6fb !important;
  border-color:rgba(255,255,255,.15) !important;
  background:linear-gradient(145deg,rgba(43,53,70,.96),rgba(24,31,43,.94)) !important;
  box-shadow:0 18px 54px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.08) !important;
}
@media (max-width:575.98px) {
  #mf-checkin-result-notice.mf-checkin-result-notice {
    top:max(14px,calc(env(safe-area-inset-top,0px) + 10px)) !important;
    width:calc(100vw - 20px) !important;
  }
  #mf-checkin-result-notice .mf-checkin-result-card {
    border-radius:16px !important;
    padding:13px 14px !important;
    font-size:13px !important;
  }
}

/* ========================================================================== 
   v1.6.1 — platform/capability foundation.
   These classes are supplied by assets/js/core.js. They intentionally mirror
   existing fallbacks rather than redesigning components in this release.
   ========================================================================== */
html.mf-reduced-motion *,
html.mf-reduced-motion *::before,
html.mf-reduced-motion *::after {
  scroll-behavior:auto !important;
  transition-duration:.01ms !important;
  animation-duration:.01ms !important;
  animation-iteration-count:1 !important;
}

html.mf-no-backdrop .header-nav,
html.mf-no-backdrop .header-nav.blur-bg,
html.mf-no-backdrop .card:not(.card-color),
html.mf-no-backdrop .footer,
html.mf-no-backdrop .aside-card,
html.mf-no-backdrop .modal-content,
html.mf-no-backdrop .dropdown-menu,
html.mf-no-backdrop .posts-item.sites-item {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Named platform hooks reserved for isolated compatibility fixes. Keeping them
   empty here prevents v1.6.1 from changing Chrome/Safari/Android rendering. */
html.mf-ios { --mf-platform-ready:1; }
html.mf-android { --mf-platform-ready:1; }
html.mf-chrome { --mf-platform-ready:1; }
html.mf-webkit { --mf-platform-ready:1; }



/* =========================================================
   v1.6.1.2 — iOS fast-scroll rendering assist
   iPhone/iPad only. During an active swipe, simplify the most expensive
   backdrop/refraction work so WebKit can paint favicons sooner. Full glass
   styling is restored automatically as soon as scrolling settles.
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  /* The blurred duplicate favicon layer costs an extra filtered bitmap on
     Safari. Keep the real site icon; remove only the decorative duplicate. */
  html.mf-ios body.home .posts-item.sites-item:not(.mf-mobile-selected) .blur-img-bg {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    filter:none !important;
    -webkit-filter:none !important;
  }

  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item {
    -webkit-backdrop-filter:blur(6px) saturate(150%) !important;
    backdrop-filter:blur(6px) saturate(150%) !important;
    box-shadow:
      0 4px 12px rgba(35,63,103,.045),
      0 0 0 .5px rgba(255,255,255,.78),
      inset 0 1px 0 rgba(255,255,255,.78) !important;
  }
  html.io-black-mode.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item {
    -webkit-backdrop-filter:blur(5px) saturate(135%) !important;
    backdrop-filter:blur(5px) saturate(135%) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.045) !important;
  }
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item::before,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item::after {
    opacity:.18 !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}


/* =========================================================
   v1.6.1.3 — iOS fast-scroll paint priority test
   Symptom addressed: during a fast swipe Safari may paint large translucent
   card shells first and postpone the card text/icons, producing blank white
   blocks. While the finger/kinetic scroll is active we deliberately remove
   only expensive live glass/filter layers and force the real content to stay
   paintable. Full Liquid Glass styling returns shortly after scrolling stops.
   iPhone/iPad homepage only; Android/desktop/top navigation are untouched.
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  /* During active iOS scrolling, prefer content paint over live refraction. */
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    transform:none !important;
    -webkit-transform:none !important;
    will-change:auto !important;
    contain:none !important;
  }

  /* Give card shells a cheap painted surface instead of making Safari wait on
     the backdrop snapshot. The normal translucent glass comes back on settle. */
  html.mf-ios.mf-ios-fast-scroll:not(.io-black-mode) body.home .posts-item.sites-item {
    background:rgba(250,252,255,.94) !important;
    border-color:rgba(226,233,244,.96) !important;
    box-shadow:0 2px 8px rgba(31,50,80,.055),inset 0 1px 0 rgba(255,255,255,.94) !important;
  }
  html.mf-ios.mf-ios-fast-scroll.io-black-mode body.home .posts-item.sites-item {
    background:rgba(36,43,55,.96) !important;
    border-color:rgba(255,255,255,.08) !important;
    box-shadow:0 2px 8px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  /* Disable decorative glass/refraction layers only while scrolling. */
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item::before,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item::after,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item > a.sites-body::before,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item > a.sites-body::after {
    content:none !important;
    display:none !important;
    opacity:0 !important;
    filter:none !important;
    -webkit-filter:none !important;
  }

  /* Force the actual card content to remain in the paint tree. */
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item > a.sites-body,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item .item-image,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item .item-title,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item .item-title *,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item .togo,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item .big-togo,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item p,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item span,
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item img.sites-icon {
    opacity:1 !important;
    visibility:visible !important;
    filter:none !important;
    -webkit-filter:none !important;
    animation:none !important;
    transition:none !important;
  }

  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item img.sites-icon {
    transform:none !important;
    -webkit-transform:none !important;
    will-change:auto !important;
    image-rendering:auto !important;
  }

  /* Decorative duplicate favicon remains disabled on iOS; it is not content. */
  html.mf-ios body.home .posts-item.sites-item:not(.mf-mobile-selected) .blur-img-bg {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}


/* =========================================================
   v1.6.1.4 — iOS quick-access isolation
   Keep the fast-scroll optimization scoped only to actual website cards.
   Header/quick-access/sidebar cards remain on their normal paint path so
   their icons are visible immediately, even before the first scroll event.
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  html.mf-ios body.home .header-nav,
  html.mf-ios body.home .header-nav *,
  html.mf-ios body.home .aside-card,
  html.mf-ios body.home .aside-card *,
  html.mf-ios body.home [class*="quick"],
  html.mf-ios body.home [class*="quick"] *,
  html.mf-ios body.home [class*="shortcut"],
  html.mf-ios body.home [class*="shortcut"] * {
    visibility:visible !important;
  }
}


/* =========================================================
   v1.6.1.6 — iOS stable-scroll rendering
   Keep one rendering mode from page load through scrolling. This avoids the
   visible flash caused by switching between full-glass and fast-scroll modes.
   Only homepage site cards are lightened; desktop/Android/header stay intact.
   ========================================================= */
@supports (-webkit-touch-callout: none) {
  html.mf-ios body.home .posts-item.sites-item {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    will-change:auto !important;
    contain:none !important;
    transform:translateZ(0) !important;
    -webkit-transform:translateZ(0) !important;
    -webkit-backface-visibility:hidden !important;
    backface-visibility:hidden !important;
  }

  html.mf-ios:not(.io-black-mode) body.home .posts-item.sites-item {
    background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(246,249,255,.86)) !important;
    border-color:rgba(218,227,240,.92) !important;
    box-shadow:0 5px 16px rgba(31,50,80,.07),inset 0 1px 0 rgba(255,255,255,.94) !important;
  }

  html.mf-ios.io-black-mode body.home .posts-item.sites-item {
    background:linear-gradient(145deg,rgba(39,47,60,.94),rgba(28,35,46,.92)) !important;
    border-color:rgba(255,255,255,.09) !important;
    box-shadow:0 5px 16px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045) !important;
  }

  /* Decorative refraction layers are permanently simplified on iOS homepage
     site cards, instead of being switched on/off during a swipe. */
  html.mf-ios body.home .posts-item.sites-item::before,
  html.mf-ios body.home .posts-item.sites-item::after,
  html.mf-ios body.home .posts-item.sites-item > a.sites-body::before,
  html.mf-ios body.home .posts-item.sites-item > a.sites-body::after {
    filter:none !important;
    -webkit-filter:none !important;
  }

  /* Real content stays permanently visible and does not animate in on repaint. */
  html.mf-ios body.home .posts-item.sites-item > a.sites-body,
  html.mf-ios body.home .posts-item.sites-item .item-image,
  html.mf-ios body.home .posts-item.sites-item .item-title,
  html.mf-ios body.home .posts-item.sites-item .item-title *,
  html.mf-ios body.home .posts-item.sites-item p,
  html.mf-ios body.home .posts-item.sites-item span,
  html.mf-ios body.home .posts-item.sites-item img.sites-icon {
    opacity:1 !important;
    visibility:visible !important;
    animation:none !important;
  }

  html.mf-ios body.home .posts-item.sites-item img.sites-icon,
  html.mf-ios body.home .posts-item.sites-item .togo,
  html.mf-ios body.home .posts-item.sites-item .big-togo {
    -webkit-transform:translateZ(0) !important;
    transform:translateZ(0) !important;
    -webkit-backface-visibility:hidden !important;
    backface-visibility:hidden !important;
  }

  /* If an old cached class briefly survives BFCache, neutralize it so no
     visual mode switch can occur. */
  html.mf-ios.mf-ios-fast-scroll body.home .posts-item.sites-item {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}


/* =========================================================
   v1.6.1.7 — Android stable-scroll rendering
   Mirror the proven iOS v1.6.1.6 strategy on Android:
   one lightweight rendering mode from page load through scrolling,
   no scroll-state visual switching, and content/icon priority.
   Desktop remains on the full glass rendering path.
   ========================================================= */
html.mf-android body.home .posts-item.sites-item {
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  will-change:auto !important;
  contain:none !important;
  transform:translateZ(0) !important;
  -webkit-transform:translateZ(0) !important;
  -webkit-backface-visibility:hidden !important;
  backface-visibility:hidden !important;
}

html.mf-android:not(.io-black-mode) body.home .posts-item.sites-item {
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(246,249,255,.86)) !important;
  border-color:rgba(218,227,240,.92) !important;
  box-shadow:0 5px 16px rgba(31,50,80,.07),inset 0 1px 0 rgba(255,255,255,.94) !important;
}

html.mf-android.io-black-mode body.home .posts-item.sites-item {
  background:linear-gradient(145deg,rgba(39,47,60,.94),rgba(28,35,46,.92)) !important;
  border-color:rgba(255,255,255,.09) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.045) !important;
}

html.mf-android body.home .posts-item.sites-item::before,
html.mf-android body.home .posts-item.sites-item::after,
html.mf-android body.home .posts-item.sites-item > a.sites-body::before,
html.mf-android body.home .posts-item.sites-item > a.sites-body::after {
  filter:none !important;
  -webkit-filter:none !important;
}

html.mf-android body.home .posts-item.sites-item > a.sites-body,
html.mf-android body.home .posts-item.sites-item .item-image,
html.mf-android body.home .posts-item.sites-item .item-title,
html.mf-android body.home .posts-item.sites-item .item-title *,
html.mf-android body.home .posts-item.sites-item p,
html.mf-android body.home .posts-item.sites-item span,
html.mf-android body.home .posts-item.sites-item img.sites-icon {
  opacity:1 !important;
  visibility:visible !important;
  animation:none !important;
}

html.mf-android body.home .posts-item.sites-item img.sites-icon,
html.mf-android body.home .posts-item.sites-item .togo,
html.mf-android body.home .posts-item.sites-item .big-togo {
  -webkit-transform:translateZ(0) !important;
  transform:translateZ(0) !important;
  -webkit-backface-visibility:hidden !important;
  backface-visibility:hidden !important;
}

/* Decorative blurred duplicate favicon costs paint time but carries no content. */
html.mf-android body.home .posts-item.sites-item:not(.mf-mobile-selected) .blur-img-bg {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  filter:none !important;
  -webkit-filter:none !important;
}



/* =========================================================
   v1.6.1.8 — mobile touch/selected-feedback corrections
   1) Keep the fixed mobile header in its own hit-test/paint layer on iOS.
   2) Mobile quick-access arrow: hidden by default, visible only on selected card.
   3) Restore selected favicon colour diffusion without re-enabling the costly
      decorative blur layer for every card all the time.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  /* Mobile quick-access arrow: selected state only. */
  body.home .posts-item.sites-item .togo,
  body.home .posts-item.sites-item .togo *,
  body.home .posts-item.sites-item .big-togo,
  body.home .posts-item.sites-item .big-togo * {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  body.home .posts-item.sites-item.mf-mobile-selected .togo,
  body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* Restore the colourful selected icon diffusion only while selected. */
  body.home .posts-item.sites-item.mf-mobile-selected .blur-img-bg {
    display:block !important;
    visibility:visible !important;
    opacity:.42 !important;
    filter:blur(10px) saturate(1.7) !important;
    -webkit-filter:blur(10px) saturate(1.7) !important;
    transform:scale(1.14) translateZ(0) !important;
    -webkit-transform:scale(1.14) translateZ(0) !important;
    pointer-events:none !important;
  }

  html.io-black-mode body.home .posts-item.sites-item.mf-mobile-selected .blur-img-bg {
    opacity:.50 !important;
    filter:blur(11px) saturate(1.85) brightness(1.06) !important;
    -webkit-filter:blur(11px) saturate(1.85) brightness(1.06) !important;
  }
}


/* =========================================================
   v1.6.1.9 — verified mobile interaction correction
   Fixes selector specificity conflicts left by the earlier performance patches.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  /* iOS + Android: direct-access arrow is hidden at rest and shown only after
     the first tap selects this exact card. */
  html.mf-ios body.home .posts-item.sites-item:not(.mf-mobile-selected) .togo,
  html.mf-ios body.home .posts-item.sites-item:not(.mf-mobile-selected) .togo *,
  html.mf-ios body.home .posts-item.sites-item:not(.mf-mobile-selected) .big-togo,
  html.mf-ios body.home .posts-item.sites-item:not(.mf-mobile-selected) .big-togo *,
  html.mf-android body.home .posts-item.sites-item:not(.mf-mobile-selected) .togo,
  html.mf-android body.home .posts-item.sites-item:not(.mf-mobile-selected) .togo *,
  html.mf-android body.home .posts-item.sites-item:not(.mf-mobile-selected) .big-togo,
  html.mf-android body.home .posts-item.sites-item:not(.mf-mobile-selected) .big-togo * {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .big-togo *,
  html.mf-android body.home .posts-item.sites-item.mf-mobile-selected .togo,
  html.mf-android body.home .posts-item.sites-item.mf-mobile-selected .togo *,
  html.mf-android body.home .posts-item.sites-item.mf-mobile-selected .big-togo,
  html.mf-android body.home .posts-item.sites-item.mf-mobile-selected .big-togo * {
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* Restore the original colour diffusion ONLY on the selected favicon. This
     outranks the mobile performance rule that disables blur-img-bg at rest. */
  html.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .blur-img-bg,
  html.mf-android body.home .posts-item.sites-item.mf-mobile-selected .blur-img-bg {
    display:block !important;
    visibility:visible !important;
    opacity:.48 !important;
    filter:blur(10px) saturate(1.82) !important;
    -webkit-filter:blur(10px) saturate(1.82) !important;
    transform:scale(1.16) translateZ(0) !important;
    -webkit-transform:scale(1.16) translateZ(0) !important;
    pointer-events:none !important;
  }
  html.io-black-mode.mf-ios body.home .posts-item.sites-item.mf-mobile-selected .blur-img-bg,
  html.io-black-mode.mf-android body.home .posts-item.sites-item.mf-mobile-selected .blur-img-bg {
    opacity:.55 !important;
    filter:blur(11px) saturate(1.9) brightness(1.08) !important;
    -webkit-filter:blur(11px) saturate(1.9) brightness(1.08) !important;
  }
}



/* =========================================================
   v1.6.1.11 — desktop favicon colour diffusion parity
   Desktop mouse hover now uses the same depth/radius as the verified
   mobile selected-state halo, without changing the native favicon itself.
   ========================================================= */
@media (hover:hover) and (pointer:fine) and (min-width:992px) {
  body.home .posts-item.sites-item:hover .blur-img-bg {
    display:block !important;
    visibility:visible !important;
    opacity:.48 !important;
    border-radius:50% !important;
    filter:blur(10px) saturate(1.82) !important;
    -webkit-filter:blur(10px) saturate(1.82) !important;
    transform:scale(1.16) translateZ(0) !important;
    -webkit-transform:scale(1.16) translateZ(0) !important;
    transform-origin:center center !important;
    pointer-events:none !important;
  }

  html.io-black-mode body.home .posts-item.sites-item:hover .blur-img-bg {
    opacity:.55 !important;
    filter:blur(11px) saturate(1.9) brightness(1.08) !important;
    -webkit-filter:blur(11px) saturate(1.9) brightness(1.08) !important;
  }

  /* Keep the real favicon crisp: only the blurred duplicate supplies colour. */
  body.home .posts-item.sites-item:hover .item-image,
  body.home .posts-item.sites-item:hover img.sites-icon {
    -webkit-filter:none !important;
    filter:none !important;
  }
}


/* =========================================================
   v1.6.2.1 — simplified stable glass baseline
   Removed user-facing clear/standard/rich levels.
   Keep the verified desktop/full-glass and mobile/stable-render behavior.
   Automatic performance fallback remains silent.
   ========================================================= */

/* Shared stable tokens for future maintenance. */
:root {
  --mf-glass: rgba(255,255,255,.74);
  --mf-glass-strong: rgba(255,255,255,.86);
  --mf-border: rgba(255,255,255,.88);
  --mf-shadow: 0 10px 32px rgba(31,50,79,.075),0 2px 8px rgba(31,50,79,.035);
  --mf-shadow-hover: 0 16px 38px rgba(31,50,79,.12),0 4px 12px rgba(31,50,79,.055);
  --mf-blur: 22px;
}
html.io-black-mode {
  --mf-glass: rgba(30,36,47,.76);
  --mf-glass-strong: rgba(35,42,55,.88);
  --mf-border: rgba(255,255,255,.105);
  --mf-shadow: 0 12px 34px rgba(0,0,0,.27);
  --mf-shadow-hover: 0 18px 42px rgba(0,0,0,.34);
}

/* Silent low-capability fallback only. */
html.mf-performance-lite {
  --mf-blur: 10px !important;
  --mf-shadow: 0 6px 18px rgba(31,50,79,.045) !important;
  --mf-shadow-hover: 0 9px 24px rgba(31,50,79,.07) !important;
}
html.io-black-mode.mf-performance-lite {
  --mf-shadow: 0 7px 20px rgba(0,0,0,.20) !important;
  --mf-shadow-hover: 0 11px 26px rgba(0,0,0,.27) !important;
}

/* Do not alter the proven homepage mobile card rendering.
   Only reduce expensive backdrop work on generic glass containers when needed. */
html.mf-performance-lite .header-nav,
html.mf-performance-lite .card:not(.card-color),
html.mf-performance-lite .footer,
html.mf-performance-lite .aside-card,
html.mf-performance-lite .modal-content,
html.mf-performance-lite .dropdown-menu,
html.mf-performance-lite .header-tools .sub-menu,
html.mf-performance-lite .navbar-header .sub-menu {
  -webkit-backdrop-filter: saturate(135%) blur(var(--mf-blur)) !important;
  backdrop-filter: saturate(135%) blur(var(--mf-blur)) !important;
}

html.mf-reduced-motion *,
html.mf-reduced-motion *::before,
html.mf-reduced-motion *::after {
  scroll-behavior:auto !important;
}

/* Safety: if old v1.6.2 UI survives from BFCache/fragment cache, never show it. */
#mf-glass-settings-btn,
#mf-glass-panel,
.mf-glass-settings-btn,
.mf-glass-panel {
  display:none !important;
}


/* =========================================================
   v1.6.3.2 — restore native iOS mobile-menu stacking
   The previous anti-click-through patch created a transformed/isolated
   stacking context on the header. OneNav's mobile-nav could then open behind
   its dark backdrop. Restore the native stacking relationship.
   ========================================================= */
@supports (-webkit-touch-callout:none) {
  html.mf-ios .header-nav,
  html.mf-ios .header-tools,
  html.mf-ios .mobile-header,
  html.mf-ios header,
  html.mf-ios .navbar,
  html.mf-ios .nav-bar {
    isolation:auto !important;
    -webkit-transform:none !important;
    transform:none !important;
    -webkit-backface-visibility:visible !important;
    backface-visibility:visible !important;
  }

}


/* =========================================================
   v1.6.3.3 — mobile purchase-points interaction recovery
   Keep the modal visuals unchanged; only guarantee that tier/payment controls
   sit above decorative layers and receive Android/iOS taps.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  #refresh_modal_pay_points,
  #refresh_modal_pay_points .modal-dialog,
  #refresh_modal_pay_points .modal-content,
  #refresh_modal_pay_points .io-modal-content,
  #refresh_modal_pay_points form {
    pointer-events:auto !important;
  }

  #refresh_modal_pay_points .modal-content::before,
  #refresh_modal_pay_points .modal-content::after,
  #refresh_modal_pay_points .io-modal-content::before,
  #refresh_modal_pay_points .io-modal-content::after {
    pointer-events:none !important;
  }

  #refresh_modal_pay_points label,
  #refresh_modal_pay_points input,
  #refresh_modal_pay_points .custom-control,
  #refresh_modal_pay_points .custom-control-label,
  #refresh_modal_pay_points .form-check,
  #refresh_modal_pay_points .form-check-label,
  #refresh_modal_pay_points [class*="price"],
  #refresh_modal_pay_points [class*="point"],
  #refresh_modal_pay_points [class*="package"],
  #refresh_modal_pay_points [class*="amount"] {
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  #refresh_modal_pay_points label,
  #refresh_modal_pay_points .custom-control,
  #refresh_modal_pay_points .form-check {
    position:relative;
    z-index:3;
    -webkit-tap-highlight-color:transparent;
  }

  #refresh_modal_pay_points input[type="radio"] {
    touch-action:manipulation !important;
  }
}


/* =========================================================
   v1.6.3.4 — exact mobile buy-points package hit targets
   Real OneNav DOM uses div.io-radio + data-for/data-value, not radio inputs.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px) {
  .assets-pay-modal .points-pkg-item.io-radio[data-for="index"],
  .assets-pay-modal .points-custom-item.io-radio[data-for="index"] {
    pointer-events:auto !important;
    touch-action:manipulation;
    position:relative;
    z-index:5;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .assets-pay-modal .points-pkg-item.io-radio[data-for="index"] *,
  .assets-pay-modal .points-custom-item.io-radio[data-for="index"] > span {
    pointer-events:none;
  }

  /* Keep the actual custom number input interactive. */
  .assets-pay-modal .points-custom-item.io-radio[data-for="index"] input,
  .assets-pay-modal .points-custom-item.io-radio[data-for="index"] .form-group,
  .assets-pay-modal .points-custom-item.io-radio[data-for="index"] .ajax-custom-points-price {
    pointer-events:auto !important;
  }
}


/* =========================================================
   v1.6.3.5 — iOS mobile menu: restore OneNav 6.02 native behavior
   Parent theme baseline:
     .mobile-header .mobile-nav { transform: translateX(-400px); }
     .mobile-nav.show          { transform: translateX(0); }
   A previous child-theme reset forced transform:none, making the menu
   permanently visible on iOS. Mirror the parent behavior explicitly.
   ========================================================= */
@media screen and (max-width:767.98px) {
  html.mf-ios .mobile-header .mobile-nav {
    -webkit-transform:translateX(-400px) !important;
    transform:translateX(-400px) !important;
    transition:transform .3s ease, -webkit-transform .3s ease !important;
  }

  html.mf-ios .mobile-header .mobile-nav.show {
    -webkit-transform:translateX(0) !important;
    transform:translateX(0) !important;
  }
}


/* =========================================================
   v1.6.4 — Personal Center detail upgrade
   Based on OneNav 6.02 native user-center markup.
   Visual/layout only: no change to AJAX tabs, check-in, points purchase,
   logout, account routes, or parent-theme business handlers.
   ========================================================= */
body.user-center main.mf-uc-dashboard.mf-uc-v164 {
  --mf-uc-v164-blue: 82,137,236;
  --mf-uc-v164-green: 39,190,121;
  --mf-uc-v164-orange: 247,145,46;
  --mf-uc-v164-pink: 239,91,121;
}

/* ----- Header identity card ----- */
body.user-center .mf-uc-v164 > .box-head-author {
  border-radius:30px !important;
}
body.user-center .mf-uc-v164 > .box-head-author .box-head-content {
  gap:16px !important;
  padding:24px 30px 46px !important;
}
body.user-center .mf-uc-v164 > .box-head-author .avatar-img,
body.user-center .mf-uc-v164 > .box-head-author .avatar-md {
  position:relative;
  width:82px !important;
  height:82px !important;
  flex:0 0 82px !important;
  padding:3px !important;
  border-radius:26px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(226,239,255,.78)) !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:0 12px 28px rgba(39,66,108,.16),inset 0 1px 0 rgba(255,255,255,.96) !important;
}
body.user-center .mf-uc-v164 > .box-head-author .avatar-img img,
body.user-center .mf-uc-v164 > .box-head-author .avatar-md img {
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  border:0 !important;
  border-radius:22px !important;
  box-shadow:none !important;
}
body.user-center .mf-uc-v164 > .box-head-author .author-meta {
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.user-center .mf-uc-v164 > .box-head-author .author-meta h1 {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px !important;
  font-size:clamp(22px,2vw,29px) !important;
  line-height:1.18 !important;
  font-weight:760 !important;
}
body.user-center .mf-uc-v164 > .box-head-author .author-meta h1 .badge {
  margin-left:0 !important;
  padding:5px 8px !important;
  border-radius:999px !important;
  font-size:10px !important;
  line-height:1 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
body.user-center .mf-uc-v164 > .box-head-author .author-meta .text-sm {
  max-width:680px;
  font-size:13px !important;
  line-height:1.55 !important;
}

/* ----- Overview cards: clearer hierarchy ----- */
body.user-center .mf-uc-v164 .mf-uc-overview {
  grid-template-columns:minmax(310px,1.15fr) minmax(380px,1.35fr) minmax(190px,.72fr) !important;
  gap:14px !important;
  margin:-34px 24px 20px !important;
}
body.user-center .mf-uc-v164 .mf-uc-overview .mf-uc-overview-card,
body.user-center .mf-uc-v164 .mf-uc-overview .uc-vip-btn {
  overflow:hidden;
  border-radius:21px !important;
  border:1px solid rgba(140,168,207,.19) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.91),rgba(244,248,255,.80)) !important;
  box-shadow:0 13px 30px rgba(38,62,98,.08),inset 0 1px 0 rgba(255,255,255,.96) !important;
}
html.io-black-mode body.user-center .mf-uc-v164 .mf-uc-overview .mf-uc-overview-card,
html.io-black-mode body.user-center .mf-uc-v164 .mf-uc-overview .uc-vip-btn {
  border-color:rgba(255,255,255,.085) !important;
  background:linear-gradient(145deg,rgba(36,45,61,.92),rgba(26,34,48,.87)) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Article / site / comment / favorite statistics become proper mini cards. */
body.user-center .mf-uc-v164 .mf-uc-stats > .p-3 {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:7px !important;
  padding:11px !important;
}
body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item {
  position:relative;
  min-height:82px;
  display:flex !important;
  justify-content:center !important;
  padding:12px 5px !important;
  border:1px solid rgba(139,168,207,.13) !important;
  border-radius:15px !important;
  background:rgba(244,248,255,.62) !important;
  color:var(--mf-uc-muted) !important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item:nth-child(1){--mf-stat-rgb:82,137,236;}
body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item:nth-child(2){--mf-stat-rgb:39,190,121;}
body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item:nth-child(3){--mf-stat-rgb:247,145,46;}
body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item:nth-child(4){--mf-stat-rgb:239,91,121;}
body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item:hover {
  transform:translateY(-2px);
  background:rgba(var(--mf-stat-rgb),.075) !important;
  border-color:rgba(var(--mf-stat-rgb),.16) !important;
  box-shadow:0 8px 18px rgba(var(--mf-stat-rgb),.08) !important;
}
body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item .text-lg {
  margin:0 0 5px !important;
  font-size:1.38rem !important;
  line-height:1 !important;
  font-weight:780 !important;
  color:rgb(var(--mf-stat-rgb)) !important;
}
body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item .text-xs {
  font-size:11px !important;
  color:var(--mf-uc-muted) !important;
}
html.io-black-mode body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item {
  border-color:rgba(255,255,255,.065) !important;
  background:rgba(255,255,255,.035) !important;
}
html.io-black-mode body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item:hover {
  background:rgba(var(--mf-stat-rgb),.10) !important;
}

/* Contribution shortcuts: more compact, app-like. */
body.user-center .mf-uc-v164 .mf-uc-contribute > .p-3 { padding:13px 14px !important; }
body.user-center .mf-uc-v164 .mf-uc-contribute .d-flex.align-items-center:not(.border-bottom) {
  gap:6px;
}
body.user-center .mf-uc-v164 .mf-uc-contribute .btn-new-posts {
  min-height:66px;
  justify-content:center;
  padding:6px 3px 3px !important;
  border:1px solid transparent;
}
body.user-center .mf-uc-v164 .mf-uc-contribute .btn-new-posts:hover {
  border-color:rgba(130,159,201,.14);
}

/* ----- Sidebar navigation ----- */
body.user-center .mf-uc-v164 .mf-uc-workspace {
  grid-template-columns:252px minmax(0,1fr) !important;
  gap:18px !important;
}
body.user-center .mf-uc-v164 .mf-uc-nav-card {
  padding:8px !important;
  border-radius:20px !important;
}
body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn {
  min-height:52px !important;
  padding:7px 11px !important;
  border-radius:14px !important;
  font-size:13px !important;
}
body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn > i:first-child {
  width:31px !important;
  height:31px !important;
  flex:0 0 31px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:10px !important;
}
body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn.active,
body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn.mf-current {
  transform:translateX(2px) !important;
}

/* Sidebar asset summary: clearer amount, softer icon. */
body.user-center .mf-uc-v164 .mf-uc-workspace > .user-menu > .uc-assets-menu .uc-assets-item {
  min-height:78px !important;
  padding:14px 14px !important;
}
body.user-center .mf-uc-v164 .mf-uc-workspace > .user-menu > .uc-assets-menu .uc-assets-item .text-xl {
  margin-bottom:4px !important;
  font-size:22px !important;
  line-height:1.05 !important;
  font-weight:760 !important;
  font-variant-numeric:tabular-nums;
}
body.user-center .mf-uc-v164 .mf-uc-workspace > .user-menu > .uc-assets-menu .assets-icon {
  width:38px !important;
  height:38px !important;
  opacity:.90 !important;
}

/* Work area header reads as a section header, not another heavy card. */
body.user-center .mf-uc-v164 .mf-uc-work-head {
  min-height:58px !important;
  padding:9px 15px !important;
  border-radius:17px !important;
}
body.user-center .mf-uc-v164 .mf-uc-work-title {
  font-size:17px !important;
  font-weight:720 !important;
}
body.user-center .mf-uc-v164 .mf-uc-work-sub {
  color:var(--mf-uc-muted) !important;
  font-size:10.5px !important;
}

/* Assets content action buttons: unified rounded glass affordances. */
body.user-center .mf-uc-v164 .uc-content-body .uc-assets-cards .assets-actions .btn {
  min-width:72px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px !important;
  border-radius:11px !important;
  font-size:12px !important;
}

/* ----- Mobile: true 2 x N action-card layout ----- */
@media (max-width:767.98px) {
  body.user-center main.mf-uc-dashboard.mf-uc-v164 {
    width:calc(100% - 16px) !important;
  }
  body.user-center .mf-uc-v164 > .box-head-author {
    min-height:176px !important;
    border-radius:21px !important;
  }
  body.user-center .mf-uc-v164 > .box-head-author .box-head-bg {
    min-height:112px !important;
  }
  body.user-center .mf-uc-v164 > .box-head-author .box-head-content {
    min-height:0 !important;
    padding:14px 15px 18px !important;
    gap:11px !important;
  }
  body.user-center .mf-uc-v164 > .box-head-author .avatar-img,
  body.user-center .mf-uc-v164 > .box-head-author .avatar-md {
    width:64px !important;
    height:64px !important;
    flex-basis:64px !important;
    border-radius:20px !important;
  }
  body.user-center .mf-uc-v164 > .box-head-author .avatar-img img,
  body.user-center .mf-uc-v164 > .box-head-author .avatar-md img { border-radius:17px !important; }
  body.user-center .mf-uc-v164 > .box-head-author .author-meta h1 {
    gap:4px;
    margin-bottom:4px !important;
    font-size:20px !important;
  }
  body.user-center .mf-uc-v164 > .box-head-author .author-meta .text-sm {
    font-size:11.5px !important;
    line-height:1.45 !important;
  }

  body.user-center .mf-uc-v164 .mf-uc-overview {
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:9px 0 11px !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-overview .mf-uc-overview-card,
  body.user-center .mf-uc-v164 .mf-uc-overview .uc-vip-btn {
    border-radius:17px !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-stats > .p-3 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    padding:8px !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item {
    min-height:68px !important;
    padding:10px 4px !important;
    border-right:1px solid rgba(139,168,207,.13) !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item .text-lg {
    font-size:1.22rem !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-contribute .btn-new-posts {
    min-height:61px;
  }

  /* The five native user-center routes become 2-column cards instead of one
     horizontal strip. This keeps labels readable and touch targets generous. */
  body.user-center .mf-uc-v164 .mf-uc-nav-card {
    padding:7px !important;
    border-radius:17px !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-nav-card > .p-2 {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    overflow:visible !important;
    padding:0 !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn {
    min-width:0 !important;
    min-height:70px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    grid-template-rows:auto !important;
    align-items:center !important;
    justify-content:start !important;
    column-gap:9px !important;
    margin:0 !important;
    padding:10px !important;
    border:1px solid rgba(var(--mf-nav-rgb,92,125,255),.10) !important;
    border-radius:14px !important;
    background:rgba(var(--mf-nav-rgb,92,125,255),.045) !important;
    text-align:left !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn > i:first-child {
    grid-column:1;
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    margin:0 !important;
    border-radius:11px !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn > i:last-child {
    display:none !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn.active,
  body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn.mf-current {
    transform:none !important;
    background:linear-gradient(135deg,rgba(var(--mf-nav-rgb,92,125,255),.16),rgba(var(--mf-nav-rgb,92,125,255),.07)) !important;
    border-color:rgba(var(--mf-nav-rgb,92,125,255),.22) !important;
  }
  html.io-black-mode body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn {
    background:rgba(var(--mf-nav-rgb,92,125,255),.07) !important;
    border-color:rgba(var(--mf-nav-rgb,92,125,255),.12) !important;
  }

  body.user-center .mf-uc-v164 .mf-uc-workspace > .user-menu > .uc-assets-menu {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-bottom:9px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-workspace > .user-menu > .uc-assets-menu .uc-assets-item {
    min-height:76px !important;
    padding:12px !important;
    border:1px solid rgba(137,165,205,.16) !important;
    border-radius:15px !important;
    background:rgba(255,255,255,.86) !important;
    box-shadow:0 7px 18px rgba(38,62,98,.055),inset 0 1px 0 rgba(255,255,255,.90) !important;
  }
  html.io-black-mode body.user-center .mf-uc-v164 .mf-uc-workspace > .user-menu > .uc-assets-menu .uc-assets-item {
    border-color:rgba(255,255,255,.08) !important;
    background:linear-gradient(145deg,rgba(36,45,61,.90),rgba(27,35,49,.86)) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  body.user-center .mf-uc-v164 .mf-uc-work-head {
    min-height:54px !important;
    margin-bottom:8px !important;
    padding:8px 11px !important;
    border-radius:15px !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-work-title { font-size:16px !important; }
  body.user-center .mf-uc-v164 .mf-uc-work-sub { font-size:10px !important; }
  body.user-center .mf-uc-v164 .uc-content-body :is(.card-body,.footprint-body) {
    padding:13px !important;
  }
  body.user-center .mf-uc-v164 .uc-content-body .uc-assets-cards .card-body {
    gap:10px;
    flex-wrap:wrap;
  }
  body.user-center .mf-uc-v164 .uc-content-body .uc-assets-cards .assets-actions {
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width:380px) {
  body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn {
    grid-template-columns:31px minmax(0,1fr) !important;
    min-height:66px !important;
    padding:8px !important;
    column-gap:7px !important;
  }
  body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn > i:first-child {
    width:31px !important;
    height:31px !important;
    flex-basis:31px !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.user-center .mf-uc-v164 .mf-uc-stats .user-menu-item,
  body.user-center .mf-uc-v164 .mf-uc-nav-card .uc-set-btn {
    transition:none !important;
  }
}


/* =========================================================
   v1.6.4.1 — user-center mobile drawer refinement
   OneNav 6.02 already creates .drawer-header for the active route.
   Hide our secondary work header on mobile to avoid duplicate titles,
   and make the native .uc-content-body open/close transition smoother.
   ========================================================= */
@media (max-width:767.98px) {

  /* OneNav's native drawer header is the only route title on mobile. */
  body.user-center .mf-uc-v164 .uc-content-body > .mf-uc-work-head {
    display:none !important;
  }

  /* Stable compositing without expensive blur changes while animating. */
  body.user-center .uc-content-body {
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;

    -webkit-transform:translate3d(104%,0,0) !important;
    transform:translate3d(104%,0,0) !important;

    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;

    transition:
      transform .27s cubic-bezier(.22,.82,.25,1),
      opacity .20s ease,
      visibility 0s linear .28s !important;
  }

  body.user-center.show-tab-page .uc-content-body {
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;

    -webkit-transform:translate3d(0,0,0) !important;
    transform:translate3d(0,0,0) !important;

    transition-delay:0s,0s,0s !important;
  }

  /* The fixed route header follows the drawer instead of appearing abruptly. */
  body.user-center .drawer-header {
    opacity:0 !important;
    visibility:hidden !important;
    -webkit-transform:translate3d(0,-7px,0) scale(.985) !important;
    transform:translate3d(0,-7px,0) scale(.985) !important;
    transform-origin:50% 0;
    transition:
      opacity .18s ease,
      transform .25s cubic-bezier(.22,.82,.25,1),
      visibility 0s linear .26s !important;
  }

  body.user-center.show-tab-page .drawer-header {
    opacity:1 !important;
    visibility:visible !important;
    -webkit-transform:translate3d(0,0,0) scale(1) !important;
    transform:translate3d(0,0,0) scale(1) !important;
    transition-delay:.035s,.035s,0s !important;
  }

  /* Content gets a tiny settle-in motion; no filter/backdrop animation. */
  body.user-center .uc-content-body > .tab-content,
  body.user-center .uc-content-body > .main-tab-content {
    opacity:.88;
    -webkit-transform:translate3d(12px,0,0);
    transform:translate3d(12px,0,0);
    transition:
      opacity .20s ease .045s,
      transform .24s cubic-bezier(.22,.82,.25,1) .035s;
  }

  body.user-center.show-tab-page .uc-content-body > .tab-content,
  body.user-center.show-tab-page .uc-content-body > .main-tab-content {
    opacity:1;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
  }
}

/* Respect accessibility preference and avoid animated navigation when requested. */
@media (max-width:767.98px) and (prefers-reduced-motion:reduce) {
  body.user-center .uc-content-body,
  body.user-center .drawer-header,
  body.user-center .uc-content-body > .tab-content,
  body.user-center .uc-content-body > .main-tab-content {
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
}


/* =========================================================
   v1.6.5 — PC homepage Liquid Glass pointer light
   Desktop mouse only. Mobile/touch rendering stays untouched.
   ========================================================= */
@media (hover:hover) and (pointer:fine) and (min-width:992px) {
  body.home .posts-item.sites-item {
    --mf-pointer-x:50%;
    --mf-pointer-y:45%;
    --mf-tilt-x:0deg;
    --mf-tilt-y:0deg;

    position:relative;
    transform:
      perspective(1000px)
      rotateX(var(--mf-tilt-x))
      rotateY(var(--mf-tilt-y))
      translateZ(0);

    transform-style:preserve-3d;
    transition:
      transform .32s cubic-bezier(.22,.82,.25,1),
      box-shadow .26s ease,
      border-color .26s ease;
  }

  /* The highlight sits inside the card and follows the pointer. */
  body.home .posts-item.sites-item::after {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    z-index:1;
    opacity:0;

    background:
      radial-gradient(
        circle at var(--mf-pointer-x) var(--mf-pointer-y),
        rgba(255,255,255,.58) 0,
        rgba(177,224,255,.24) 18%,
        rgba(133,173,255,.10) 34%,
        transparent 60%
      );

    mix-blend-mode:screen;
    transition:opacity .18s ease;
  }

  body.home .posts-item.sites-item.mf-pointer-active {
    transform:
      perspective(1000px)
      rotateX(var(--mf-tilt-x))
      rotateY(var(--mf-tilt-y))
      translateY(-1px)
      translateZ(0);
  }

  body.home .posts-item.sites-item.mf-pointer-active::after {
    opacity:.82;
  }

  /* Keep text/icon above the moving light layer. */
  body.home .posts-item.sites-item > a.sites-body {
    position:relative;
    z-index:2;
  }

  body.home .posts-item.sites-item .item-image,
  body.home .posts-item.sites-item img.sites-icon {
    transition:transform .28s cubic-bezier(.22,.82,.25,1);
  }

  body.home .posts-item.sites-item.mf-pointer-active .item-image,
  body.home .posts-item.sites-item.mf-pointer-active img.sites-icon {
    transform:translateZ(10px) scale(1.012);
  }

  html.io-black-mode body.home .posts-item.sites-item::after {
    background:
      radial-gradient(
        circle at var(--mf-pointer-x) var(--mf-pointer-y),
        rgba(119,184,255,.30) 0,
        rgba(96,139,255,.16) 22%,
        rgba(120,92,255,.08) 40%,
        transparent 62%
      );
    mix-blend-mode:screen;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.home .posts-item.sites-item {
    transform:none !important;
  }
  body.home .posts-item.sites-item::after {
    transition:none !important;
  }
}


/* =========================================================
   v1.6.6 — Global Visual Unification TEST
   Visual-only pass. No business/event/AJAX logic changes.
   ========================================================= */

:root{
  --mf-v166-radius-sm:10px;
  --mf-v166-radius-md:14px;
  --mf-v166-radius-lg:20px;
  --mf-v166-radius-xl:24px;

  --mf-v166-border:rgba(30,42,65,.090);
  --mf-v166-border-soft:rgba(255,255,255,.64);
  --mf-v166-surface:rgba(255,255,255,.70);
  --mf-v166-surface-strong:rgba(255,255,255,.88);
  --mf-v166-surface-hover:rgba(255,255,255,.82);

  --mf-v166-text:#303746;
  --mf-v166-subtext:#7a8496;
  --mf-v166-placeholder:#a0a8b5;

  --mf-v166-accent:var(--theme-color,#6e72ff);
  --mf-v166-accent-soft:rgba(105,112,255,.10);

  --mf-v166-shadow-sm:0 5px 16px rgba(35,46,68,.070);
  --mf-v166-shadow-md:0 12px 34px rgba(34,45,69,.105);
  --mf-v166-shadow-lg:0 22px 58px rgba(31,42,66,.16);

  --mf-v166-duration:.20s;
  --mf-v166-ease:cubic-bezier(.22,.82,.25,1);
}

html.io-black-mode{
  --mf-v166-border:rgba(255,255,255,.095);
  --mf-v166-border-soft:rgba(255,255,255,.115);
  --mf-v166-surface:rgba(32,37,47,.76);
  --mf-v166-surface-strong:rgba(37,43,54,.91);
  --mf-v166-surface-hover:rgba(45,51,63,.88);

  --mf-v166-text:#eef2f8;
  --mf-v166-subtext:#a4afbf;
  --mf-v166-placeholder:#7f8999;

  --mf-v166-accent-soft:rgba(126,132,255,.14);

  --mf-v166-shadow-sm:0 6px 18px rgba(0,0,0,.16);
  --mf-v166-shadow-md:0 14px 36px rgba(0,0,0,.24);
  --mf-v166-shadow-lg:0 24px 64px rgba(0,0,0,.34);
}

/* ---------- General glass cards ---------- */
.card:not(.card-color),
.modal-content,
.dropdown-menu,
.search-smart-tips,
.io-bomb .io-bomb-content{
  border-color:var(--mf-v166-border) !important;
  box-shadow:var(--mf-v166-shadow-md);
}

.card:not(.card-color){
  border-radius:var(--mf-v166-radius-lg) !important;
}

.modal-content{
  border-radius:var(--mf-v166-radius-xl) !important;
}

.dropdown-menu,
.search-smart-tips{
  border-radius:var(--mf-v166-radius-md) !important;
}

/* ---------- Inputs / search ---------- */
.form-control,
.search-form .search-key,
.search-body .form-control,
.sidebar .card .searchform input[type="text"],
.login-forms .form-control,
.io-bomb .io-bomb-content .form-control{
  border-radius:var(--mf-v166-radius-md) !important;
  border-color:var(--mf-v166-border) !important;
  color:var(--mf-v166-text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:
    border-color var(--mf-v166-duration) ease,
    box-shadow var(--mf-v166-duration) ease,
    background-color var(--mf-v166-duration) ease !important;
}

.form-control::placeholder,
.search-form .search-key::placeholder,
.search-body .form-control::placeholder{
  color:var(--mf-v166-placeholder) !important;
  opacity:1;
}

.form-control:focus,
.search-form .search-key:focus,
.search-body .form-control:focus,
.sidebar .card .searchform input[type="text"]:focus,
.login-forms .form-control:focus,
.io-bomb .io-bomb-content .form-control:focus{
  border-color:color-mix(in srgb,var(--mf-v166-accent) 44%,transparent) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--mf-v166-accent) 10%,transparent),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
  outline:none !important;
}

/* ---------- Buttons ---------- */
.btn,
button.btn,
a.btn{
  border-radius:var(--mf-v166-radius-md) !important;
  transition:
    transform .16s var(--mf-v166-ease),
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease !important;
}

@media (hover:hover) and (pointer:fine){
  .btn:not(:disabled):hover,
  button.btn:not(:disabled):hover,
  a.btn:hover{
    transform:translateY(-1px);
    box-shadow:var(--mf-v166-shadow-sm);
  }
}

.btn:not(:disabled):active,
button.btn:not(:disabled):active,
a.btn:active{
  transform:scale(.975) !important;
  transition-duration:.08s !important;
}

.btn:disabled,
button:disabled{
  opacity:.52;
  filter:saturate(.72);
}

/* ---------- Dropdown items ---------- */
.dropdown-menu{
  padding:7px !important;
}

.dropdown-item,
.dropdown-menu a{
  border-radius:10px;
  transition:
    background-color .16s ease,
    color .16s ease,
    transform .16s var(--mf-v166-ease);
}

@media (hover:hover) and (pointer:fine){
  .dropdown-item:hover,
  .dropdown-menu a:hover{
    background:var(--mf-v166-accent-soft);
  }
}

/* ---------- Headers / dividers ---------- */
.card-header,
.card-footer,
.modal-header,
.modal-footer{
  border-color:var(--mf-v166-border) !important;
}

.card-header,
.modal-header{
  color:var(--mf-v166-text);
}

/* ---------- Modal close controls ---------- */
.modal .close,
.modal button.close,
.io-close,
[data-dismiss="modal"]{
  transition:
    transform .16s var(--mf-v166-ease),
    background-color .16s ease,
    opacity .16s ease;
}

@media (hover:hover) and (pointer:fine){
  .modal .close:hover,
  .modal button.close:hover,
  .io-close:hover,
  [data-dismiss="modal"]:hover{
    transform:rotate(5deg) scale(1.05);
  }
}

.modal .close:active,
.modal button.close:active,
.io-close:active,
[data-dismiss="modal"]:active{
  transform:scale(.92);
}

/* ---------- Typography consistency ---------- */
.card,
.modal-content,
.dropdown-menu,
.form-control,
.btn,
.user-center{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Avoid fuzzy text caused by ancestor 3D/scale in generic overlays. */
.modal-content,
.dropdown-menu,
.search-smart-tips{
  -webkit-backface-visibility:visible;
  backface-visibility:visible;
}

/* ---------- User center visual alignment, no layout/business logic ---------- */
body.user-center .mf-uc-dashboard .card,
body.user-center .mf-uc-workspace,
body.user-center .uc-content-body{
  border-color:var(--mf-v166-border) !important;
}

body.user-center .mf-uc-dashboard .uc-set-btn,
body.user-center .mf-uc-dashboard .user-menu-item{
  transition:
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .16s var(--mf-v166-ease);
}

@media (hover:hover) and (pointer:fine){
  body.user-center .mf-uc-dashboard .uc-set-btn:hover,
  body.user-center .mf-uc-dashboard .user-menu-item:hover{
    box-shadow:var(--mf-v166-shadow-sm);
  }
}

/* ---------- Day / night text hierarchy ---------- */
html:not(.io-black-mode) .modal-content,
html:not(.io-black-mode) .dropdown-menu,
html:not(.io-black-mode) .card:not(.card-color){
  color:var(--mf-v166-text);
}

html.io-black-mode .modal-content,
html.io-black-mode .dropdown-menu,
html.io-black-mode .card:not(.card-color),
html.io-black-mode .form-control{
  color:var(--mf-v166-text) !important;
}

/* ---------- Mobile touch feedback ---------- */
@media (hover:none), (pointer:coarse), (max-width:991.98px){
  .btn:not(:disabled):active,
  .dropdown-item:active,
  .dropdown-menu a:active,
  body.user-center .mf-uc-dashboard .uc-set-btn:active,
  body.user-center .mf-uc-dashboard .user-menu-item:active{
    transform:scale(.975) !important;
  }

  .dropdown-item,
  .dropdown-menu a,
  .btn{
    -webkit-tap-highlight-color:transparent;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .btn,
  .dropdown-item,
  .dropdown-menu a,
  .modal .close,
  .modal button.close,
  .io-close,
  [data-dismiss="modal"],
  body.user-center .mf-uc-dashboard .uc-set-btn,
  body.user-center .mf-uc-dashboard .user-menu-item{
    transition:none !important;
    transform:none !important;
  }
}


/* =========================================================
   v1.6.6.1 — Mobile native action trigger hotfix
   Restore OneNav's original tap hit testing for user-center actions.
   Visual-only patch; no business JS takeover.
   ========================================================= */
@media (hover:none), (pointer:coarse), (max-width:991.98px){

  /* Do not transform native OneNav action buttons on touch devices.
     Moving/scaling the hit target during a tap can cause pointer/click
     cancellation or an apparent delayed modal trigger in mobile Chrome/Safari. */
  body.user-center .uc-content-body .btn,
  body.user-center .uc-content-body button,
  body.user-center .uc-content-body a.btn,
  body.user-center .uc-content-body [role="button"]{
    transform:none !important;
    -webkit-transform:none !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent;
  }

  body.user-center .uc-content-body .btn:active,
  body.user-center .uc-content-body button:active,
  body.user-center .uc-content-body a.btn:active,
  body.user-center .uc-content-body [role="button"]:active{
    transform:none !important;
    -webkit-transform:none !important;
  }

  /* Keep the visual feedback without changing geometry/hitbox. */
  body.user-center .uc-content-body .btn,
  body.user-center .uc-content-body button,
  body.user-center .uc-content-body a.btn{
    transition:
      background-color .16s ease,
      border-color .16s ease,
      color .16s ease,
      box-shadow .16s ease,
      opacity .16s ease !important;
  }

  /* Ensure account-security / assets action controls sit above decorative
     glass pseudo layers and remain directly hittable. */
  body.user-center .uc-content-body a,
  body.user-center .uc-content-body button,
  body.user-center .uc-content-body .btn{
    position:relative;
    pointer-events:auto !important;
  }

  /* No pseudo decoration should steal taps from actual controls. */
  body.user-center .uc-content-body .card::before,
  body.user-center .uc-content-body .card::after{
    pointer-events:none !important;
  }
}


/* =========================================================
   v1.6.6.2 — Account security / withdrawal modal layer fix
   OneNav 6.02 .user-bind-modal without data-modal_id is created by
   ioModal() as #refresh_modal_modal-suspend.
   Keep this specific native modal above the mobile user-center drawer.
   ========================================================= */
body.user-center #refresh_modal_modal-suspend.modal {
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;

  /* Use the modal itself as the visual veil because Bootstrap's default
     backdrop z-index is far below our user-center mobile drawer layer. */
  background:rgba(8,12,20,.34) !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%) !important;
  backdrop-filter:blur(12px) saturate(135%) !important;

  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body.user-center #refresh_modal_modal-suspend.modal.show {
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Native Bootstrap backdrop remains underneath this targeted modal.
   Raise it enough to sit above the page, but still below the modal. */
body.user-center.modal-open > .modal-backdrop.show {
  z-index:2147482500 !important;
  opacity:.18 !important;
  pointer-events:auto !important;
}

body.user-center #refresh_modal_modal-suspend .modal-dialog {
  position:relative !important;
  z-index:1 !important;
  width:min(520px,calc(100vw - 24px)) !important;
  max-width:520px !important;
  min-height:100dvh !important;
  margin:0 auto !important;
  padding:max(16px,env(safe-area-inset-top,0px)) 0 max(16px,env(safe-area-inset-bottom,0px)) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
  -webkit-transform:none !important;
  pointer-events:none !important;
}

body.user-center #refresh_modal_modal-suspend .modal-content {
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  height:auto !important;
  max-height:calc(100dvh - 32px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
  overflow:auto !important;

  border-radius:24px !important;
  border:1px solid rgba(255,255,255,.68) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,246,255,.88)) !important;
  box-shadow:0 28px 90px rgba(20,40,72,.28),inset 0 1px 0 rgba(255,255,255,.96) !important;
  -webkit-backdrop-filter:blur(28px) saturate(175%) !important;
  backdrop-filter:blur(28px) saturate(175%) !important;

  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body.user-center #refresh_modal_modal-suspend .io-modal-content {
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Loading layer stays inside the modal instead of becoming a page-level cover. */
body.user-center #refresh_modal_modal-suspend .loading-anim {
  z-index:3 !important;
  pointer-events:none !important;
}

/* Close control always remains clickable above content. */
body.user-center #refresh_modal_modal-suspend .io-close,
body.user-center #refresh_modal_modal-suspend [data-dismiss="modal"] {
  position:relative;
  z-index:5 !important;
  pointer-events:auto !important;
}

/* Dark mode */
html.io-black-mode body.user-center #refresh_modal_modal-suspend.modal {
  background:rgba(0,0,0,.46) !important;
}

html.io-black-mode body.user-center #refresh_modal_modal-suspend .modal-content {
  border-color:rgba(255,255,255,.12) !important;
  background:linear-gradient(145deg,rgba(38,48,65,.96),rgba(22,29,41,.93)) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.07) !important;
  color:#edf3fb !important;
}

/* Mobile geometry only; no change to OneNav AJAX/modal business behavior. */
@media (max-width:575.98px) {
  body.user-center #refresh_modal_modal-suspend .modal-dialog {
    width:calc(100vw - 18px) !important;
    padding:max(10px,env(safe-area-inset-top,0px)) 0 max(10px,env(safe-area-inset-bottom,0px)) !important;
  }

  body.user-center #refresh_modal_modal-suspend .modal-content {
    border-radius:22px !important;
    max-height:calc(100dvh - 20px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) !important;
  }
}


/* =========================================================
   v1.6.6.4 — modal content-ready reveal
   OneNav ioModal() creates an empty 220px modal shell before AJAX returns.
   Hide only the card shell until .io-modal-content really has content.
   The full-screen modal layer remains active, so there is no stacking regression.
   ========================================================= */
body.user-center #refresh_modal_modal-suspend:not(.mf-security-content-ready) .modal-content {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  transition:none !important;
}

body.user-center #refresh_modal_modal-suspend:not(.mf-security-content-ready) .loading-anim,
body.user-center #refresh_modal_modal-suspend:not(.mf-security-content-ready) .io-modal-content {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

body.user-center #refresh_modal_modal-suspend.mf-security-content-ready .modal-content {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  animation:mfSecurityReadyIn .19s cubic-bezier(.22,.82,.25,1) both;
}

body.user-center #refresh_modal_modal-suspend.mf-security-content-ready .io-modal-content {
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

body.user-center #refresh_modal_modal-suspend.mf-security-content-ready .loading-anim {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

@keyframes mfSecurityReadyIn {
  from { opacity:0; transform:translateY(7px) scale(.992); }
  to   { opacity:1; transform:none; }
}

/* =========================================================
   v1.6.6.4 — Guest user center visual unification
   Visual-only: routes, AJAX and guest permissions stay native OneNav.
   ========================================================= */
body.user-center:not(.logged-in) main.mf-uc-guest {
  width:min(1180px,calc(100% - 30px)) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-top:16px !important;
}

body.user-center:not(.logged-in) .mf-uc-guest > .box-head-author {
  position:relative;
  overflow:hidden;
  min-height:205px !important;
  margin-bottom:18px !important;
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:28px !important;
  box-shadow:
    0 22px 54px rgba(36,53,87,.16),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

body.user-center:not(.logged-in) .mf-uc-guest > .box-head-author .box-head-bg::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(113,181,255,.22),transparent 34%),
    linear-gradient(125deg,rgba(28,42,94,.12),rgba(74,31,139,.16));
  pointer-events:none;
}

body.user-center:not(.logged-in) .mf-uc-guest > .box-head-author .box-head-content {
  min-height:116px !important;
  padding:26px 30px !important;
  display:flex !important;
  align-items:center !important;
}

body.user-center:not(.logged-in) .mf-uc-guest .box-head-author .avatar-img,
body.user-center:not(.logged-in) .mf-uc-guest .box-head-author .avatar-md {
  width:74px !important;
  height:74px !important;
  flex:0 0 74px !important;
  padding:3px;
  border-radius:24px !important;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 12px 26px rgba(8,18,45,.18),inset 0 1px 0 rgba(255,255,255,.30);
}

body.user-center:not(.logged-in) .mf-uc-guest .box-head-author .avatar-img img,
body.user-center:not(.logged-in) .mf-uc-guest .box-head-author .avatar-md img {
  width:100% !important;
  height:100% !important;
  border-radius:20px !important;
}

body.user-center:not(.logged-in) .mf-uc-guest .author-meta {
  min-width:0;
  margin-left:14px !important;
}

body.user-center:not(.logged-in) .mf-uc-guest .author-meta h1 {
  margin-bottom:5px !important;
  font-size:22px !important;
  font-weight:750 !important;
  letter-spacing:.1px;
}

body.user-center:not(.logged-in) .mf-uc-guest .author-meta .text-sm {
  opacity:.82;
  line-height:1.55;
}

body.user-center:not(.logged-in) .mf-guest-login-cta {
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  margin-top:11px;
  padding:7px 11px 7px 9px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:12px;
  background:rgba(255,255,255,.16);
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  font-size:12px;
  font-weight:650;
  text-decoration:none !important;
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  backdrop-filter:blur(12px) saturate(135%);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease;
}

body.user-center:not(.logged-in) .mf-guest-login-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4ee0a1;
  box-shadow:0 0 0 3px rgba(78,224,161,.14),0 0 12px rgba(78,224,161,.36);
}

body.user-center:not(.logged-in) .mf-guest-login-arrow {
  font-size:18px;
  line-height:1;
  opacity:.84;
  margin-left:1px;
}

@media (hover:hover) and (pointer:fine) {
  body.user-center:not(.logged-in) .mf-guest-login-cta:hover {
    background:rgba(255,255,255,.23);
    border-color:rgba(255,255,255,.44);
    box-shadow:0 8px 22px rgba(10,23,58,.15),inset 0 1px 0 rgba(255,255,255,.22);
  }
}

/* Guest sidebar cards use the same glass language as logged-in dashboard. */
body.user-center:not(.logged-in) .mf-guest-sidebar > .card,
body.user-center:not(.logged-in) .mf-guest-sidebar > .uc-assets-menu,
body.user-center:not(.logged-in) .mf-guest-sidebar > .uc-vip-btn {
  border:1px solid rgba(154,180,218,.20) !important;
  border-radius:20px !important;
  background:rgba(252,253,255,.80) !important;
  box-shadow:0 12px 30px rgba(43,63,98,.09),inset 0 1px 0 rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
}

body.user-center:not(.logged-in) .mf-guest-contribute > .p-3 {
  padding:14px !important;
}

body.user-center:not(.logged-in) .mf-guest-contribute .btn-new-posts {
  border-radius:14px;
  padding:6px 3px;
}

body.user-center:not(.logged-in) .mf-guest-assets {
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important;
  gap:9px !important;
  padding:9px !important;
}

body.user-center:not(.logged-in) .mf-guest-assets .uc-assets-item {
  min-height:94px;
  margin:0 !important;
  border:0 !important;
  border-radius:16px !important;
  background:rgba(237,244,255,.74) !important;
  box-shadow:none !important;
}

body.user-center:not(.logged-in) .mf-guest-nav-card {
  padding:7px !important;
}

body.user-center:not(.logged-in) .mf-guest-nav-card > .p-2 {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:0 !important;
}

body.user-center:not(.logged-in) .mf-guest-nav-card .uc-set-btn {
  display:flex !important;
  align-items:center !important;
  min-height:54px;
  margin:0 !important;
  padding:10px 11px !important;
  border:1px solid rgba(124,151,190,.11);
  border-radius:14px !important;
  background:rgba(246,249,254,.72);
  font-size:13px;
  line-height:1.2;
}

body.user-center:not(.logged-in) .mf-guest-nav-card .uc-set-btn > i:first-child {
  flex:0 0 auto;
}

body.user-center:not(.logged-in) .mf-guest-nav-card .uc-set-btn > i:last-child {
  opacity:.48;
}

/* Guest main content is an empty-state panel. Keep it visually quiet. */
body.user-center:not(.logged-in) .mf-guest-content {
  min-height:0 !important;
}

html.io-black-mode body.user-center:not(.logged-in) .mf-guest-sidebar > .card,
html.io-black-mode body.user-center:not(.logged-in) .mf-guest-sidebar > .uc-assets-menu,
html.io-black-mode body.user-center:not(.logged-in) .mf-guest-sidebar > .uc-vip-btn {
  border-color:rgba(162,188,226,.12) !important;
  background:linear-gradient(145deg,rgba(34,44,61,.90),rgba(25,33,47,.84)) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html.io-black-mode body.user-center:not(.logged-in) .mf-guest-assets .uc-assets-item,
html.io-black-mode body.user-center:not(.logged-in) .mf-guest-nav-card .uc-set-btn {
  background:rgba(51,66,91,.48) !important;
  border-color:rgba(255,255,255,.06) !important;
}

@media (max-width:767.98px) {
  body.user-center:not(.logged-in) main.mf-uc-guest {
    width:calc(100% - 18px) !important;
    padding-top:10px !important;
  }

  body.user-center:not(.logged-in) .mf-uc-guest > .box-head-author {
    min-height:188px !important;
    margin-bottom:12px !important;
    border-radius:23px !important;
  }

  body.user-center:not(.logged-in) .mf-uc-guest > .box-head-author .box-head-content {
    min-height:116px !important;
    padding:20px !important;
  }

  body.user-center:not(.logged-in) .mf-uc-guest .box-head-author .avatar-img,
  body.user-center:not(.logged-in) .mf-uc-guest .box-head-author .avatar-md {
    width:62px !important;
    height:62px !important;
    flex-basis:62px !important;
    border-radius:20px !important;
  }

  body.user-center:not(.logged-in) .mf-uc-guest .box-head-author .avatar-img img,
  body.user-center:not(.logged-in) .mf-uc-guest .box-head-author .avatar-md img {
    border-radius:17px !important;
  }

  body.user-center:not(.logged-in) .mf-uc-guest .author-meta h1 {
    font-size:19px !important;
  }

  body.user-center:not(.logged-in) .mf-guest-login-cta {
    min-height:32px;
    margin-top:9px;
    padding:6px 10px 6px 8px;
  }

  body.user-center:not(.logged-in) .mf-guest-sidebar {
    width:100% !important;
    max-width:none !important;
    flex:0 0 100% !important;
  }

  body.user-center:not(.logged-in) .mf-guest-sidebar > .card,
  body.user-center:not(.logged-in) .mf-guest-sidebar > .uc-assets-menu,
  body.user-center:not(.logged-in) .mf-guest-sidebar > .uc-vip-btn {
    margin-bottom:10px !important;
    border-radius:18px !important;
  }

  body.user-center:not(.logged-in) .mf-guest-contribute .d-flex.align-items-center:last-child {
    gap:4px;
  }

  body.user-center:not(.logged-in) .mf-guest-contribute .btn-new-posts {
    min-width:0;
    padding:5px 1px;
  }

  body.user-center:not(.logged-in) .mf-guest-assets {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  body.user-center:not(.logged-in) .mf-guest-assets .uc-assets-item:only-child {
    grid-column:1 / -1;
  }

  body.user-center:not(.logged-in) .mf-guest-nav-card > .p-2 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  body.user-center:not(.logged-in) .mf-guest-nav-card .uc-set-btn {
    min-height:60px;
    padding:10px !important;
  }

  /* Native guest content is only get_none_html(); keep the mobile "My" page
     focused on the useful guest cards instead of leaving a large blank column. */
  body.user-center:not(.logged-in) .mf-uc-guest .uc-content-body {
    display:none !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.user-center #refresh_modal_modal-suspend.mf-security-content-ready .modal-content {
    animation:none !important;
  }
}


/* =========================================================
   v1.6.6.5 — Guest user center direct-selector fix
   Do NOT depend on JS-added .mf-uc-guest classes.
   Target the real OneNav guest DOM directly:
   body.user-center:not(.logged-in) main.container
   ========================================================= */

/* ---- guest page overall ---- */
body.user-center:not(.logged-in) main.container {
  width:min(1180px,calc(100% - 28px)) !important;
  max-width:1180px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-top:14px !important;
}

/* ---- guest hero / author header ---- */
body.user-center:not(.logged-in) main.container > .box-head-author {
  position:relative;
  overflow:hidden;
  margin-bottom:16px !important;
  border:1px solid rgba(255,255,255,.30) !important;
  border-radius:28px !important;
  box-shadow:
    0 22px 52px rgba(35,53,87,.16),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

body.user-center:not(.logged-in) .box-head-author .box-head-bg::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(94,177,255,.23),transparent 35%),
    linear-gradient(125deg,rgba(22,39,88,.10),rgba(87,29,148,.18));
  pointer-events:none;
}

body.user-center:not(.logged-in) .box-head-author .box-head-content {
  min-height:120px !important;
  padding:24px 28px !important;
  display:flex !important;
  align-items:center !important;
}

body.user-center:not(.logged-in) .box-head-author .avatar-img,
body.user-center:not(.logged-in) .box-head-author .avatar-md {
  width:72px !important;
  height:72px !important;
  flex:0 0 72px !important;
  padding:3px;
  border-radius:23px !important;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.15);
  box-shadow:
    0 12px 26px rgba(8,18,45,.18),
    inset 0 1px 0 rgba(255,255,255,.30);
}

body.user-center:not(.logged-in) .box-head-author .avatar-img img,
body.user-center:not(.logged-in) .box-head-author .avatar-md img {
  width:100% !important;
  height:100% !important;
  border-radius:19px !important;
}

body.user-center:not(.logged-in) .box-head-author .author-meta {
  min-width:0;
  margin-left:14px !important;
}

body.user-center:not(.logged-in) .box-head-author .author-meta h1 {
  margin-bottom:5px !important;
  font-size:21px !important;
  font-weight:750 !important;
  letter-spacing:.1px;
}

body.user-center:not(.logged-in) .box-head-author .author-meta .text-sm {
  font-size:13px !important;
  opacity:.84;
  line-height:1.55;
}

/* ---- guest sidebar itself ---- */
body.user-center:not(.logged-in) .user-menu {
  width:100% !important;
  max-width:none !important;
  flex:0 0 100% !important;
}

/* all guest cards share one glass language */
body.user-center:not(.logged-in) .user-menu > .card,
body.user-center:not(.logged-in) .user-menu > .uc-assets-menu,
body.user-center:not(.logged-in) .user-menu > .uc-vip-btn {
  border:1px solid rgba(146,173,213,.18) !important;
  border-radius:20px !important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.84),rgba(244,248,255,.74)) !important;
  box-shadow:
    0 12px 30px rgba(42,62,98,.085),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  backdrop-filter:blur(22px) saturate(145%);
}

/* ---- contribution card ---- */
body.user-center:not(.logged-in) .user-menu > .card .btn-new-posts {
  border-radius:14px;
  padding:7px 3px;
  transition:
    background-color .16s ease,
    box-shadow .16s ease,
    transform .14s ease;
}

@media (hover:hover) and (pointer:fine) {
  body.user-center:not(.logged-in) .user-menu > .card .btn-new-posts:hover {
    background:rgba(111,117,255,.07);
    box-shadow:inset 0 0 0 1px rgba(111,117,255,.08);
  }
}

/* ---- guest assets: native .uc-assets-menu ---- */
body.user-center:not(.logged-in) .uc-assets-menu {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:9px !important;
  padding:9px !important;
}

body.user-center:not(.logged-in) .uc-assets-menu .uc-assets-item {
  min-height:96px !important;
  margin:0 !important;
  border:1px solid rgba(114,145,191,.10) !important;
  border-radius:16px !important;
  background:rgba(236,244,255,.72) !important;
  box-shadow:none !important;
}

body.user-center:not(.logged-in) .uc-assets-menu .uc-assets-item:only-child {
  grid-column:1 / -1;
}

body.user-center:not(.logged-in) .uc-assets-menu .uc-assets-item .text-xl {
  font-size:22px !important;
  font-weight:700;
  color:#344057;
}

/* ---- guest function navigation card ---- */
body.user-center:not(.logged-in) .user-menu > .card > .p-2 {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  padding:8px !important;
}

body.user-center:not(.logged-in) .user-menu .uc-set-btn {
  display:flex !important;
  align-items:center !important;
  min-height:58px !important;
  margin:0 !important;
  padding:10px 11px !important;
  border:1px solid rgba(122,151,193,.10) !important;
  border-radius:14px !important;
  background:rgba(246,249,254,.74) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
  color:#364054 !important;
  font-size:13px;
  line-height:1.2;
  text-decoration:none !important;
  transition:
    border-color .16s ease,
    background-color .16s ease,
    box-shadow .16s ease;
}

body.user-center:not(.logged-in) .user-menu .uc-set-btn.loaded,
body.user-center:not(.logged-in) .user-menu .uc-set-btn.active {
  border-color:rgba(110,112,255,.34) !important;
  background:
    linear-gradient(135deg,rgba(113,116,255,.12),rgba(74,164,255,.08)),
    rgba(246,249,254,.78) !important;
  box-shadow:
    0 6px 16px rgba(78,82,177,.10),
    inset 0 1px 0 rgba(255,255,255,.84);
}

body.user-center:not(.logged-in) .user-menu .uc-set-btn .i-badge {
  flex:0 0 auto;
  margin-right:8px !important;
}

body.user-center:not(.logged-in) .user-menu .uc-set-btn .icon-arrow-r-m {
  opacity:.45;
}

/* ---- native guest empty content should not occupy large blank space ---- */
body.user-center:not(.logged-in) .uc-content-body {
  display:none !important;
}

/* ---- guest row: sidebar becomes the whole page ---- */
body.user-center:not(.logged-in) main.container > .row {
  display:block !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

body.user-center:not(.logged-in) main.container > .row > .sidebar {
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---- dark mode ---- */
html.io-black-mode body.user-center:not(.logged-in) .user-menu > .card,
html.io-black-mode body.user-center:not(.logged-in) .user-menu > .uc-assets-menu,
html.io-black-mode body.user-center:not(.logged-in) .user-menu > .uc-vip-btn {
  border-color:rgba(163,189,227,.11) !important;
  background:
    linear-gradient(145deg,rgba(34,44,61,.91),rgba(24,32,46,.86)) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.23),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html.io-black-mode body.user-center:not(.logged-in) .uc-assets-menu .uc-assets-item,
html.io-black-mode body.user-center:not(.logged-in) .user-menu .uc-set-btn {
  background:rgba(50,65,91,.46) !important;
  border-color:rgba(255,255,255,.06) !important;
  color:#e8edf5 !important;
}

html.io-black-mode body.user-center:not(.logged-in) .uc-assets-menu .uc-assets-item .text-xl {
  color:#edf2fa !important;
}

html.io-black-mode body.user-center:not(.logged-in) .user-menu .uc-set-btn.loaded,
html.io-black-mode body.user-center:not(.logged-in) .user-menu .uc-set-btn.active {
  border-color:rgba(151,149,255,.38) !important;
  background:
    linear-gradient(135deg,rgba(133,131,255,.16),rgba(65,144,255,.09)),
    rgba(50,65,91,.52) !important;
}

/* ---- mobile ---- */
@media (max-width:767.98px) {
  body.user-center:not(.logged-in) main.container {
    width:calc(100% - 18px) !important;
    padding-top:10px !important;
  }

  body.user-center:not(.logged-in) main.container > .box-head-author {
    margin-bottom:11px !important;
    border-radius:23px !important;
  }

  body.user-center:not(.logged-in) .box-head-author .box-head-content {
    min-height:108px !important;
    padding:18px 18px !important;
  }

  body.user-center:not(.logged-in) .box-head-author .avatar-img,
  body.user-center:not(.logged-in) .box-head-author .avatar-md {
    width:60px !important;
    height:60px !important;
    flex-basis:60px !important;
    border-radius:19px !important;
  }

  body.user-center:not(.logged-in) .box-head-author .avatar-img img,
  body.user-center:not(.logged-in) .box-head-author .avatar-md img {
    border-radius:16px !important;
  }

  body.user-center:not(.logged-in) .box-head-author .author-meta h1 {
    font-size:18px !important;
    margin-bottom:4px !important;
  }

  body.user-center:not(.logged-in) .user-menu > .card,
  body.user-center:not(.logged-in) .user-menu > .uc-assets-menu,
  body.user-center:not(.logged-in) .user-menu > .uc-vip-btn {
    margin-bottom:10px !important;
    border-radius:18px !important;
  }

  body.user-center:not(.logged-in) .user-menu > .card > .p-3 {
    padding:13px !important;
  }

  body.user-center:not(.logged-in) .user-menu > .card > .p-2 {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    padding:7px !important;
  }

  body.user-center:not(.logged-in) .user-menu .uc-set-btn {
    min-height:62px !important;
    padding:10px !important;
  }

  body.user-center:not(.logged-in) .uc-assets-menu {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    padding:7px !important;
  }

  body.user-center:not(.logged-in) .uc-assets-menu .uc-assets-item:only-child {
    grid-column:1 / -1 !important;
    min-height:88px !important;
  }
}


/* =========================================================
   v1.6.6.6 — Guest interaction polish
   ========================================================= */

/* 1) Guest avatar clearly behaves like a login entry. */
body.user-center:not(.logged-in) .mf-guest-avatar-login {
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .16s cubic-bezier(.22,.82,.25,1),
    box-shadow .18s ease,
    border-color .18s ease !important;
}

@media (hover:hover) and (pointer:fine) {
  body.user-center:not(.logged-in) .mf-guest-avatar-login:hover {
    transform:translateY(-1px) scale(1.025);
    border-color:rgba(125,141,255,.58) !important;
    box-shadow:
      0 12px 28px rgba(44,61,112,.22),
      0 0 0 4px rgba(111,117,255,.10),
      inset 0 1px 0 rgba(255,255,255,.34) !important;
  }
}

body.user-center:not(.logged-in) .mf-guest-avatar-login:active {
  transform:scale(.97);
}

/* 2) Submission row: stronger icon contrast in light mode.
   OneNav puts each shortcut inside .btn-new-posts with an icon box/iconfont. */
html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts .i-badge,
html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts > i,
html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts .iconfont {
  opacity:1 !important;
  filter:none !important;
}

html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts .i-badge {
  background:rgba(238,245,255,.96) !important;
  border:1px solid rgba(98,132,182,.15) !important;
  box-shadow:
    0 5px 14px rgba(53,77,118,.10),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts:nth-child(1) .i-badge,
html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts:nth-child(1) .iconfont {
  color:#35b87c !important;
}

html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts:nth-child(2) .i-badge,
html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts:nth-child(2) .iconfont {
  color:#ef6f8d !important;
}

html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts:nth-child(3) .i-badge,
html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts:nth-child(3) .iconfont {
  color:#ef9b42 !important;
}

html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts:nth-child(4) .i-badge,
html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts:nth-child(4) .iconfont {
  color:#35aeb7 !important;
}

html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts .text-xs,
html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts span:last-child {
  color:#3f4858 !important;
  opacity:1 !important;
  font-weight:600;
}

/* Generic fallback for the actual square shortcut icon when OneNav color utility
   classes are attached on descendants rather than .i-badge. */
html:not(.io-black-mode) body.user-center:not(.logged-in) .user-menu .btn-new-posts [class*="bg-"] {
  opacity:1 !important;
  filter:saturate(1.18) contrast(1.06) !important;
}

/* 3) Guest-only routes: keep visible but clearly disabled. */
body.user-center:not(.logged-in) .user-menu .uc-set-btn {
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent;
}

body.user-center:not(.logged-in) .user-menu .uc-set-btn::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:rgba(111,117,255,.07);
  transition:opacity .16s ease;
}

body.user-center:not(.logged-in) .user-menu .uc-set-btn {
  position:relative;
}

body.user-center:not(.logged-in) .user-menu .uc-set-btn:active::after {
  opacity:1;
}

body.user-center:not(.logged-in) .user-menu .uc-set-btn.mf-guest-blocked-pulse {
  animation:mfGuestBlockedPulse .30s ease-out;
}

@keyframes mfGuestBlockedPulse {
  0%   { box-shadow:inset 0 0 0 0 rgba(111,117,255,0); }
  45%  { box-shadow:inset 0 0 0 2px rgba(111,117,255,.24),0 5px 14px rgba(90,96,190,.08); }
  100% { box-shadow:inset 0 0 0 0 rgba(111,117,255,0); }
}

/* Lightweight global toast for blocked guest actions. */
.mf-guest-login-toast {
  position:fixed;
  left:50%;
  bottom:max(92px,calc(env(safe-area-inset-bottom,0px) + 82px));
  z-index:2147483200;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:14px;
  background:rgba(255,255,255,.88);
  color:#344055;
  box-shadow:
    0 16px 40px rgba(35,49,79,.18),
    inset 0 1px 0 rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
  font-size:13px;
  font-weight:650;
  opacity:0;
  transform:translate(-50%,10px) scale(.98);
  transition:
    opacity .18s ease,
    transform .20s cubic-bezier(.22,.82,.25,1);
  pointer-events:none;
}

.mf-guest-login-toast.show {
  opacity:1;
  transform:translate(-50%,0) scale(1);
}

.mf-guest-login-toast-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#7775ff;
  box-shadow:0 0 0 4px rgba(119,117,255,.11);
}

html.io-black-mode .mf-guest-login-toast {
  border-color:rgba(255,255,255,.12);
  background:rgba(31,38,50,.92);
  color:#eef3fa;
  box-shadow:
    0 18px 42px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06);
}

@media (prefers-reduced-motion:reduce) {
  body.user-center:not(.logged-in) .mf-guest-avatar-login,
  body.user-center:not(.logged-in) .user-menu .uc-set-btn,
  .mf-guest-login-toast {
    transition:none !important;
    animation:none !important;
  }
}


/* v1.6.6.6.2 — companion style for JS-detected single asset card */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset {
  width:100% !important;
  max-width:none !important;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

@media (max-width:767.98px) {
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
    min-height:138px !important;
    border-radius:22px !important;
  }
}


/* =========================================================
   v1.6.6.6.3 — Logged-in single points card compact + yellow
   Based on the already-working full-row layout from v1.6.6.6.2
   ========================================================= */

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  min-height: 116px !important;
  padding: 18px 22px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(240, 186, 78, 0.22) !important;
  background:
    linear-gradient(145deg, rgba(255, 248, 231, 0.94), rgba(255, 242, 210, 0.88)) !important;
  box-shadow:
    0 12px 30px rgba(190, 142, 32, 0.10),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xl,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-lg {
  color: #2f3442 !important;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-muted,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-sm,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xs {
  color: rgba(47, 52, 66, 0.68) !important;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .iconfont,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .io,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .icon-points {
  filter: saturate(1.06);
}

@media (max-width: 767.98px) {
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
    min-height: 98px !important;
    padding: 16px 18px !important;
    border-radius: 20px !important;
  }
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  border-color: rgba(231, 191, 78, 0.24) !important;
  background:
    linear-gradient(145deg, rgba(86, 66, 26, 0.52), rgba(58, 44, 18, 0.42)) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xl,
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-lg {
  color: #f3ead5 !important;
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-muted,
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-sm,
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xs {
  color: rgba(243, 234, 213, 0.74) !important;
}


/* =========================================================
   v1.6.6.6.4 — Points card Champagne Glass refinement
   Keep the proven compact/full-row geometry from v1.6.6.6.3.
   Visual-only refinement.
   ========================================================= */

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  position: relative !important;
  overflow: hidden !important;

  border-color: rgba(230, 181, 83, .24) !important;

  background:
    radial-gradient(circle at 88% 18%,
      rgba(255, 212, 109, .34) 0%,
      rgba(255, 222, 145, .16) 22%,
      transparent 44%),
    radial-gradient(circle at 10% 8%,
      rgba(255, 255, 255, .96) 0%,
      rgba(255, 255, 255, .48) 24%,
      transparent 52%),
    linear-gradient(135deg,
      rgba(255, 252, 241, .98) 0%,
      rgba(255, 247, 220, .94) 46%,
      rgba(255, 237, 193, .90) 100%) !important;

  box-shadow:
    0 14px 34px rgba(189, 137, 37, .11),
    0 3px 10px rgba(198, 150, 60, .06),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(225, 174, 78, .08) !important;

  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
}

/* soft glass sheen; visual only */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::before {
  content: "";
  position: absolute;
  left: -8%;
  top: -48%;
  width: 64%;
  height: 120%;
  border-radius: 50%;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,.46),
    rgba(255,255,255,.10) 52%,
    transparent 74%
  );
  transform: rotate(10deg);
  pointer-events: none;
  z-index: 0;
}

/* subtle warm glow near the coin icon */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -30px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 185, 63, .18) 0%,
    rgba(255, 207, 108, .08) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item > * {
  position: relative;
  z-index: 1;
}

/* number / label slightly warmer but still high-contrast */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xl,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-lg {
  color: #313744 !important;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-muted,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-sm,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xs {
  color: rgba(74, 66, 49, .62) !important;
}

/* Desktop hover: only lighting changes, never geometry. */
@media (hover:hover) and (pointer:fine) {
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item:hover {
    border-color: rgba(225, 169, 63, .34) !important;
    box-shadow:
      0 16px 38px rgba(189, 137, 37, .14),
      0 4px 12px rgba(198, 150, 60, .08),
      inset 0 1px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 0 rgba(225, 174, 78, .10) !important;
  }
}

/* Dark mode: deep amber glass, not muddy brown. */
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  border-color: rgba(235, 190, 90, .20) !important;

  background:
    radial-gradient(circle at 88% 18%,
      rgba(224, 157, 46, .18) 0%,
      rgba(224, 157, 46, .07) 28%,
      transparent 50%),
    radial-gradient(circle at 12% 0%,
      rgba(255, 232, 172, .08) 0%,
      transparent 46%),
    linear-gradient(135deg,
      rgba(65, 52, 30, .76) 0%,
      rgba(49, 40, 26, .68) 52%,
      rgba(43, 35, 25, .62) 100%) !important;

  box-shadow:
    0 16px 38px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(236,190,86,.045) !important;
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::before {
  background: linear-gradient(
    115deg,
    rgba(255,240,195,.08),
    rgba(255,240,195,.02) 54%,
    transparent 76%
  );
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::after {
  background: radial-gradient(
    circle,
    rgba(232, 163, 49, .16) 0%,
    rgba(232, 163, 49, .06) 46%,
    transparent 72%
  );
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xl,
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-lg {
  color: #fff4dc !important;
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-muted,
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-sm,
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xs {
  color: rgba(255, 239, 204, .68) !important;
}


/* =========================================================
   v1.6.6.6.5 — Logged-in points card: orange reference style
   Goal:
   - follow the nicer orange asset-detail card feeling
   - avoid text/icon overlap completely
   - keep full-row width and compact height from prior version
   ========================================================= */

/* Card shell */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  position: relative !important;
  overflow: hidden !important;
  min-height: 102px !important;
  padding: 18px 22px 18px 22px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 181, 73, .30) !important;

  background:
    radial-gradient(circle at 82% 22%, rgba(255, 204, 95, .34) 0%, rgba(255, 204, 95, .10) 18%, transparent 42%),
    linear-gradient(135deg, #fff7e7 0%, #ffe8b7 48%, #ffd082 100%) !important;

  box-shadow:
    0 14px 34px rgba(233, 144, 33, .14),
    0 3px 10px rgba(233, 144, 33, .06),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255, 185, 88, .14) !important;

  -webkit-backdrop-filter: blur(20px) saturate(148%) !important;
  backdrop-filter: blur(20px) saturate(148%) !important;
}

/* soft orange sweep, inspired by the detail-page card */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::before {
  content: "";
  position: absolute;
  left: 28%;
  right: -6%;
  bottom: -44%;
  height: 98%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,153,34,.18), rgba(255,153,34,0) 70%);
  pointer-events: none;
  z-index: 0;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::after {
  content: "";
  position: absolute;
  left: -8%;
  top: -42%;
  width: 56%;
  height: 110%;
  border-radius: 50%;
  background: linear-gradient(115deg, rgba(255,255,255,.42), rgba(255,255,255,.06) 56%, transparent 76%);
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 0;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item > * {
  position: relative;
  z-index: 1;
}

/* reserve a clean safe area for the text on the left */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xl,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-lg {
  display: block !important;
  margin: 0 96px 6px 0 !important;
  color: #2e3340 !important;
  font-size: 26px !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-muted,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-sm,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xs {
  display: block !important;
  margin: 0 96px 0 0 !important;
  color: rgba(64, 55, 38, .66) !important;
  line-height: 1.18 !important;
}

/* force the coin icon to sit at bottom-right like the orange reference card */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .assets-icon,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .icon-points,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .iconfont.icon-points {
  position: absolute !important;
  right: 18px !important;
  bottom: 14px !important;
  left: auto !important;
  top: auto !important;
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  opacity: .98 !important;
  z-index: 2 !important;
  filter: saturate(1.03) drop-shadow(0 4px 10px rgba(228,136,14,.12));
}

/* some parent themes output icon wrappers instead of direct icon nodes */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item [class*="assets-icon"] img,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item [class*="assets-icon"] svg,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item [class*="assets-icon"] i {
  width: 100% !important;
  height: 100% !important;
}

/* if there are only text nodes plus icon, align to the left cleanly */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

@media (max-width: 767.98px) {
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
    min-height: 94px !important;
    padding: 16px 18px !important;
    border-radius: 22px !important;
  }

  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xl,
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-lg {
    margin-right: 84px !important;
    font-size: 23px !important;
  }

  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-muted,
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-sm,
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xs {
    margin-right: 84px !important;
  }

  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .assets-icon,
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .icon-points,
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .iconfont.icon-points {
    right: 16px !important;
    bottom: 12px !important;
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
}

/* Dark mode: warm amber glass */
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  border-color: rgba(255, 188, 85, .22) !important;
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 182, 74, .16) 0%, rgba(255, 182, 74, .05) 22%, transparent 44%),
    linear-gradient(135deg, rgba(88,60,18,.86) 0%, rgba(107,69,17,.82) 52%, rgba(129,73,14,.78) 100%) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(255, 197, 104, .06) !important;
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xl,
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-lg {
  color: #fff5e3 !important;
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-muted,
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-sm,
html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .text-xs {
  color: rgba(255, 236, 198, .72) !important;
}


/* =========================================================
   v1.6.6.6.6 — Stronger points action buttons
   Focus on the orange points detail card buttons: clearer hierarchy,
   stronger presence, more tactile glass-button feeling.
   ========================================================= */

body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions {
  display:flex !important;
  gap:12px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
}

body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn {
  min-width:98px !important;
  min-height:44px !important;
  padding:0 20px !important;
  border-radius:15px !important;
  font-size:15px !important;
  font-weight:760 !important;
  letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}

/* Secondary button: still white/glass but stronger */
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn:not(.vc-yellow):not(.btn-outline),
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn.btn-outline {
  color:#fff !important;
  background:rgba(255,255,255,.16) !important;
  border:1.5px solid rgba(255,255,255,.82) !important;
  box-shadow:0 10px 22px rgba(170,82,0,.12), inset 0 1px 0 rgba(255,255,255,.26) !important;
  -webkit-backdrop-filter:blur(12px) saturate(155%) !important;
  backdrop-filter:blur(12px) saturate(155%) !important;
}

/* Primary CTA: bright white chip with clear contrast */
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn.vc-yellow:not(.btn-outline) {
  color:#ef6a13 !important;
  background:linear-gradient(180deg,#ffffff 0%, #fff7ef 100%) !important;
  border:1.5px solid rgba(255,255,255,.96) !important;
  box-shadow:0 12px 26px rgba(162,72,0,.18), inset 0 1px 0 rgba(255,255,255,.92) !important;
}

@media (hover:hover) and (pointer:fine) {
  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn:hover {
    transform:translateY(-1px) !important;
  }
  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn:not(.vc-yellow):not(.btn-outline):hover,
  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn.btn-outline:hover {
    background:rgba(255,255,255,.20) !important;
    box-shadow:0 12px 26px rgba(170,82,0,.16), inset 0 1px 0 rgba(255,255,255,.30) !important;
  }
  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn.vc-yellow:not(.btn-outline):hover {
    box-shadow:0 14px 28px rgba(162,72,0,.22), inset 0 1px 0 rgba(255,255,255,.96) !important;
  }
}

body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn:active {
  transform:translateY(0) scale(.985) !important;
}

@media (max-width:767.98px) {
  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions {
    gap:10px !important;
  }
  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn {
    min-width:92px !important;
    min-height:42px !important;
    padding:0 18px !important;
    border-radius:14px !important;
    font-size:14px !important;
  }
}

html.io-black-mode body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn:not(.vc-yellow):not(.btn-outline),
html.io-black-mode body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn.btn-outline {
  color:#fff8ed !important;
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,237,208,.48) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html.io-black-mode body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn.vc-yellow:not(.btn-outline) {
  color:#d76314 !important;
  background:linear-gradient(180deg,#fffaf4 0%, #ffe9d5 100%) !important;
  border-color:rgba(255,250,244,.92) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.92) !important;
}


/* =========================================================
   v1.6.6.6.7 — Desktop layout + check-in board + dark-mode fixes
   1) Desktop overview = left/right half layout
   2) Fix corner bleed on desktop cards (especially dark mode)
   3) Points detail = left log / right check-in leaderboard
   4) Android dark-mode points card removes blue cast
   ========================================================= */

/* Desktop overview: equal split for stats and contribute */
@media (min-width: 992px) {
  body.user-center .mf-uc-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  body.user-center .mf-uc-overview > .mf-uc-overview-card,
  body.user-center .mf-uc-overview > .uc-vip-btn,
  body.user-center .mf-uc-overview > .uc-assets-menu {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Prevent dark corners / corner bleed on desktop cards */
body.user-center .mf-uc-overview .mf-uc-overview-card,
body.user-center .mf-uc-overview .uc-assets-menu,
body.user-center .mf-uc-overview .uc-vip-btn,
body.user-center .uc-content-body .load-ajax-card > .card,
body.user-center .uc-content-body .uc-assets-cards > .card,
body.user-center .uc-content-body .tab-content > .card,
body.user-center .mf-uc-nav-card,
body.user-center .user-menu > .card {
  overflow: hidden !important;
  isolation: isolate;
  background-clip: padding-box !important;
}

body.user-center .mf-uc-overview .mf-uc-stats > .p-3,
body.user-center .mf-uc-overview .mf-uc-contribute > .p-3 {
  border-radius: inherit !important;
  overflow: hidden !important;
}

html.io-black-mode body.user-center .mf-uc-overview .mf-uc-overview-card,
html.io-black-mode body.user-center .mf-uc-overview .uc-assets-menu,
html.io-black-mode body.user-center .mf-uc-overview .uc-vip-btn,
html.io-black-mode body.user-center .mf-uc-nav-card,
html.io-black-mode body.user-center .user-menu > .card,
html.io-black-mode body.user-center .uc-content-body .load-ajax-card > .card,
html.io-black-mode body.user-center .uc-content-body .uc-assets-cards > .card,
html.io-black-mode body.user-center .uc-content-body .tab-content > .card {
  box-shadow: 0 18px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Dark mode Android: remove blue cast from compact points card */
html.io-black-mode.mf-android body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item,
html.mf-android.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  background:
    radial-gradient(circle at 82% 22%, rgba(255, 189, 92, .12) 0%, rgba(255, 189, 92, .04) 20%, transparent 46%),
    linear-gradient(135deg, #67420d 0%, #855114 52%, #a66317 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,245,220,.08),
    inset 0 -1px 0 rgba(255,196,94,.10) !important;
}

html.io-black-mode.mf-android body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::before,
html.mf-android.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::before {
  opacity: .72 !important;
}

/* Assets page: split points log and check-in leaderboard */
body.user-center .uc-content-body .mf-points-split {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, .84fr);
  gap: 18px;
  margin-top: 10px;
}

body.user-center .uc-content-body .mf-points-panel {
  border-radius: 22px;
  border: 1px solid rgba(173, 194, 224, .24);
  background: rgba(252, 253, 255, .74);
  box-shadow: 0 12px 30px rgba(44, 66, 101, .07), inset 0 1px 0 rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  overflow: hidden;
  min-height: 100%;
}

body.user-center .uc-content-body .mf-points-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(170, 187, 214, .16);
}

body.user-center .uc-content-body .mf-points-panel-head h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.1;
  font-weight: 760;
  color: #273142;
}

body.user-center .uc-content-body .mf-points-panel-head p {
  margin: 0;
  font-size: 12px;
  line-height: 1.25;
  color: #8a97aa;
}

body.user-center .uc-content-body .mf-points-panel-body {
  padding: 12px 18px 18px;
}

body.user-center .uc-content-body .mf-points-panel .order-list {
  margin: 0 !important;
}

body.user-center .uc-content-body .mf-points-panel .order-item {
  border-radius: 16px;
  margin-bottom: 10px;
  padding: 14px 14px;
  background: rgba(248, 250, 255, .72);
  border: 1px solid rgba(196, 210, 235, .14);
}

body.user-center .uc-content-body .mf-points-panel .order-item:last-child {
  margin-bottom: 0;
}

body.user-center .uc-content-body .mf-points-panel .value-text {
  font-size: 18px;
  font-weight: 760;
}

body.user-center .uc-content-body .mf-checkin-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

body.user-center .uc-content-body .mf-checkin-stat {
  position: relative;
  border-radius: 16px;
  padding: 12px 12px 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,249,255,.92));
  border: 1px solid rgba(192, 207, 232, .20);
  min-height: 74px;
}

body.user-center .uc-content-body .mf-checkin-stat small {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #8a96aa;
  margin-bottom: 8px;
}

body.user-center .uc-content-body .mf-checkin-stat strong {
  display: block;
  font-size: 22px;
  line-height: 1;
  font-weight: 780;
  color: #283346;
}

body.user-center .uc-content-body .mf-checkin-stat .mf-suffix {
  font-size: 12px;
  color: #8b95a7;
  margin-left: 4px;
}

body.user-center .uc-content-body .mf-checkin-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

body.user-center .uc-content-body .mf-checkin-state-badge.is-checked {
  color: #1c8a4c;
  background: rgba(62, 199, 112, .12);
}

body.user-center .uc-content-body .mf-checkin-state-badge.is-pending {
  color: #d57a12;
  background: rgba(255, 180, 52, .14);
}

body.user-center .uc-content-body .mf-checkin-rank-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 10px;
}

body.user-center .uc-content-body .mf-checkin-rank-caption strong {
  font-size: 14px;
  color: #293243;
}

body.user-center .uc-content-body .mf-checkin-rank-caption span {
  font-size: 12px;
  color: #96a0b0;
}

body.user-center .uc-content-body .mf-checkin-rank-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.user-center .uc-content-body .mf-checkin-rank-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(248, 250, 255, .74);
  border: 1px solid rgba(194, 209, 232, .15);
}

body.user-center .uc-content-body .mf-checkin-rank-row.is-me {
  background: linear-gradient(135deg, rgba(255, 194, 96, .14), rgba(255, 151, 47, .08));
  border-color: rgba(247, 167, 47, .24);
}

body.user-center .uc-content-body .mf-checkin-rank-no {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  color: #6a7486;
  background: rgba(218, 226, 241, .58);
}

body.user-center .uc-content-body .mf-checkin-rank-row:nth-child(1) .mf-checkin-rank-no {
  color: #a86000;
  background: linear-gradient(180deg, #ffe5a9, #ffd172);
}

body.user-center .uc-content-body .mf-checkin-rank-row:nth-child(2) .mf-checkin-rank-no {
  color: #5f6a7b;
  background: linear-gradient(180deg, #edf2f9, #dce5f1);
}

body.user-center .uc-content-body .mf-checkin-rank-row:nth-child(3) .mf-checkin-rank-no {
  color: #915323;
  background: linear-gradient(180deg, #ffe1cc, #ffc29b);
}

body.user-center .uc-content-body .mf-checkin-rank-main {
  min-width: 0;
}

body.user-center .uc-content-body .mf-checkin-rank-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #273142;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.user-center .uc-content-body .mf-checkin-rank-meta {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #909daf;
}

body.user-center .uc-content-body .mf-checkin-rank-side {
  text-align: right;
}

body.user-center .uc-content-body .mf-checkin-rank-side strong {
  display: block;
  font-size: 16px;
  line-height: 1;
  font-weight: 780;
  color: #1f8f4c;
}

body.user-center .uc-content-body .mf-checkin-rank-side span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #96a0af;
}

body.user-center .uc-content-body .mf-checkin-empty,
body.user-center .uc-content-body .mf-checkin-loading {
  padding: 18px 14px;
  border-radius: 16px;
  text-align: center;
  color: #8d98aa;
  background: rgba(248, 250, 255, .72);
  border: 1px dashed rgba(194, 209, 232, .25);
}

html.io-black-mode body.user-center .uc-content-body .mf-points-panel {
  background: linear-gradient(145deg, rgba(34,44,61,.90), rgba(25,33,47,.84)) !important;
  border-color: rgba(159,187,229,.15) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-points-panel-head {
  border-bottom-color: rgba(132, 154, 191, .12) !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-points-panel-head h3,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-caption strong,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-name,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-stat strong {
  color: #f0f4fb !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-points-panel-head p,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-caption span,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-stat small,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-meta,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-side span,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-empty,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-loading {
  color: #8c9ab0 !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-points-panel .order-item,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-stat,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-row,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-empty,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-loading {
  background: rgba(52, 66, 90, .46) !important;
  border-color: rgba(132, 154, 191, .12) !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-row.is-me {
  background: linear-gradient(135deg, rgba(255, 194, 96, .14), rgba(255, 151, 47, .10)) !important;
  border-color: rgba(247, 167, 47, .20) !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-no {
  color: #d9e4f6 !important;
  background: rgba(118, 136, 168, .30) !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-row:nth-child(1) .mf-checkin-rank-no {
  color: #6c4800 !important;
  background: linear-gradient(180deg, #ffd87a, #f1b34a) !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-row:nth-child(2) .mf-checkin-rank-no {
  color: #233144 !important;
  background: linear-gradient(180deg, #edf3ff, #c9d7ed) !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-row:nth-child(3) .mf-checkin-rank-no {
  color: #5d3212 !important;
  background: linear-gradient(180deg, #ffd5b1, #f1a56a) !important;
}

@media (max-width: 991.98px) {
  body.user-center .uc-content-body .mf-points-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  body.user-center .uc-content-body .mf-points-panel-head {
    padding: 14px 15px 12px;
  }

  body.user-center .uc-content-body .mf-points-panel-body {
    padding: 10px 14px 14px;
  }

  body.user-center .uc-content-body .mf-checkin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.user-center .uc-content-body .mf-checkin-stat {
    min-height: 68px;
    padding: 10px 10px 9px;
  }

  body.user-center .uc-content-body .mf-checkin-stat strong {
    font-size: 19px;
  }
}


/* =========================================================
   v1.6.6.6.8 — desktop overview no-overlap + refined check-in board
   ========================================================= */

/* Desktop: no more negative overlap into hero. True 50/50 split. */
@media (min-width: 992px) {
  body.user-center .mf-uc-overview {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 18px !important;
    margin: 18px 0 22px !important;
    padding: 0 !important;
    align-items: stretch !important;
    z-index: 1 !important;
  }
  body.user-center .mf-uc-overview > .mf-uc-overview-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
  body.user-center .mf-uc-overview .mf-uc-stats,
  body.user-center .mf-uc-overview .mf-uc-contribute {
    min-height: 116px !important;
  }
  body.user-center .mf-uc-overview .mf-uc-stats > .p-3,
  body.user-center .mf-uc-overview .mf-uc-contribute > .p-3 {
    height: 100% !important;
    box-sizing: border-box !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
}

/* Android dark mode: fully neutralize inherited blue glass/compositing. */
html.io-black-mode.mf-android body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item,
html.mf-android.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
  background-color: #74470f !important;
  background-image:
    radial-gradient(circle at 84% 18%, rgba(255,191,87,.17) 0%, rgba(255,191,87,.04) 25%, transparent 50%),
    linear-gradient(135deg, #5d3b0d 0%, #784810 48%, #945714 100%) !important;
  background-blend-mode: normal !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  isolation: isolate !important;
}
html.io-black-mode.mf-android body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::before,
html.mf-android.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::before {
  background: linear-gradient(115deg, rgba(255,232,174,.07), rgba(255,232,174,.015) 56%, transparent 76%) !important;
  mix-blend-mode: normal !important;
}
html.io-black-mode.mf-android body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::after,
html.mf-android.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item::after {
  background: radial-gradient(circle, rgba(255,169,43,.13), rgba(255,169,43,.035) 48%, transparent 74%) !important;
  mix-blend-mode: normal !important;
}

/* Refined leaderboard: match points-log density/height more closely. */
body.user-center .uc-content-body .mf-checkin-rank-row {
  min-height: 74px !important;
  padding: 11px 12px !important;
}
body.user-center .uc-content-body .mf-checkin-rank-name { font-size: 13px !important; }
body.user-center .uc-content-body .mf-checkin-rank-meta { font-size: 11px !important; }
body.user-center .uc-content-body .mf-checkin-rank-side strong { font-size: 13px !important; }
body.user-center .uc-content-body .mf-checkin-rank-side span { font-size: 11px !important; white-space:nowrap; }

body.user-center .uc-content-body .mf-checkin-title-card {
  grid-column: 1 / -1;
  padding: 13px 14px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,196,91,.16), rgba(255,146,44,.08));
  border: 1px solid rgba(242,168,58,.20);
}
body.user-center .uc-content-body .mf-checkin-title-top {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
body.user-center .uc-content-body .mf-checkin-title-top small { color:#9a7442; margin:0; }
body.user-center .uc-content-body .mf-checkin-title-name {
  font-size:17px; font-weight:800; color:#b86a10;
}
body.user-center .uc-content-body .mf-checkin-title-next {
  margin-top:8px; font-size:11px; color:#8e785e;
}
body.user-center .uc-content-body .mf-checkin-title-track {
  height:7px; border-radius:999px; margin-top:8px; overflow:hidden;
  background:rgba(204,161,91,.15);
}
body.user-center .uc-content-body .mf-checkin-title-track > span {
  display:block; height:100%; border-radius:inherit;
  background:linear-gradient(90deg,#ffbc3d,#ff7b24);
  box-shadow:0 0 10px rgba(255,140,29,.18);
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-title-card {
  background:linear-gradient(135deg,rgba(255,187,75,.12),rgba(215,112,24,.08)) !important;
  border-color:rgba(255,190,84,.16) !important;
}
html.io-black-mode body.user-center .uc-content-body .mf-checkin-title-name { color:#ffd27c !important; }
html.io-black-mode body.user-center .uc-content-body .mf-checkin-title-top small,
html.io-black-mode body.user-center .uc-content-body .mf-checkin-title-next { color:#b7a486 !important; }

/* Mobile: leaderboard lives in a dedicated modal opened from the orange points card. */
.mf-mobile-rank-modal {
  position:fixed; inset:0; z-index:2147483000;
  display:flex; align-items:flex-end; justify-content:center;
  padding:18px 12px calc(18px + env(safe-area-inset-bottom,0px));
  background:rgba(8,12,20,.38);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
}
.mf-mobile-rank-modal.show { opacity:1; visibility:visible; pointer-events:auto; }
.mf-mobile-rank-sheet {
  width:min(100%,560px); max-height:78vh; overflow:auto;
  border-radius:24px; padding:14px;
  background:rgba(249,251,255,.94);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 24px 64px rgba(22,35,61,.28),inset 0 1px 0 rgba(255,255,255,.94);
  transform:translateY(18px) scale(.985);
  transition:transform .22s cubic-bezier(.22,.82,.25,1);
}
.mf-mobile-rank-modal.show .mf-mobile-rank-sheet { transform:none; }
.mf-mobile-rank-head { display:flex; align-items:center; justify-content:space-between; padding:2px 2px 12px; }
.mf-mobile-rank-head strong { font-size:17px; color:#273142; }
.mf-mobile-rank-close {
  width:36px; height:36px; border:0; border-radius:12px;
  background:rgba(111,126,151,.10); color:#566174; font-size:23px; line-height:1;
}
html.io-black-mode .mf-mobile-rank-sheet {
  background:linear-gradient(145deg,rgba(34,44,61,.97),rgba(24,32,46,.96));
  border-color:rgba(255,255,255,.10); box-shadow:0 26px 68px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);
}
html.io-black-mode .mf-mobile-rank-head strong { color:#f0f4fb; }
html.io-black-mode .mf-mobile-rank-close { background:rgba(255,255,255,.07); color:#e4ebf6; }

@media (max-width:767.98px) {
  body.user-center .uc-content-body .mf-points-panel--board { display:none !important; }
  body.user-center .uc-content-body .mf-points-split { grid-template-columns:1fr !important; }
  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .mf-mobile-checkin-rank-btn {
    display:inline-flex !important; align-items:center; justify-content:center;
  }
}
@media (min-width:768px) {
  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .mf-mobile-checkin-rank-btn { display:none !important; }
}


/* =========================================================
   v1.6.6.6.9 — real PC layout hit + hard corner clipping
   + mobile inline check-in leaderboard
   ========================================================= */

/* IMPORTANT:
   DevTools-open desktop viewport can be < 992px.
   Treat >=768px as desktop/tablet-wide user-center layout so the real
   50/50 overview remains active while testing in Chrome DevTools. */
@media (min-width:768px) {
  body.user-center .mf-uc-overview {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:18px !important;

    /* Absolutely no overlap with the blue author/hero card. */
    margin:18px 0 22px !important;
    padding:0 !important;
    transform:none !important;
    top:auto !important;
    position:relative !important;
    z-index:1 !important;
  }

  /* Real source-order items are pinned into the two requested halves. */
  body.user-center .mf-uc-overview > .mf-uc-stats {
    grid-column:1 !important;
    grid-row:1 !important;
    order:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
  }

  body.user-center .mf-uc-overview > .mf-uc-contribute {
    grid-column:2 !important;
    grid-row:1 !important;
    order:2 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
  }

  /* Any optional extra overview item (e.g. VIP) goes below, never between
     stats and contribution. */
  body.user-center .mf-uc-overview > :not(.mf-uc-stats):not(.mf-uc-contribute) {
    grid-column:1 / -1 !important;
    order:5 !important;
  }

  body.user-center .mf-uc-overview > .mf-uc-stats,
  body.user-center .mf-uc-overview > .mf-uc-contribute {
    min-height:116px !important;
    border-radius:22px !important;
    overflow:hidden !important;
    clip-path:inset(0 round 22px);
    isolation:isolate !important;
    background-clip:padding-box !important;
  }

  body.user-center .mf-uc-overview > .mf-uc-stats > .p-3,
  body.user-center .mf-uc-overview > .mf-uc-contribute > .p-3 {
    width:100% !important;
    height:100% !important;
    box-sizing:border-box !important;
    border-radius:inherit !important;
    overflow:hidden !important;
  }
}

/* Hard-clip the compact points asset card at BOTH wrapper and child levels.
   This fixes the four-corner bleed that normal border-radius/overflow did not
   fully stop in Chromium dark-mode compositing. */
@media (min-width:768px) {
  body.user-center.logged-in .mf-uc-workspace > .user-menu > .uc-assets-menu.mf-single-asset {
    position:relative !important;
    overflow:hidden !important;
    border-radius:22px !important;
    clip-path:inset(0 round 22px) !important;
    contain:paint !important;

    /* Parent glass must not show behind child corners. */
    background:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }

  body.user-center.logged-in .mf-uc-workspace > .user-menu > .uc-assets-menu.mf-single-asset::before,
  body.user-center.logged-in .mf-uc-workspace > .user-menu > .uc-assets-menu.mf-single-asset::after {
    display:none !important;
    content:none !important;
  }

  body.user-center.logged-in .mf-uc-workspace > .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item {
    overflow:hidden !important;
    border-radius:22px !important;
    clip-path:inset(0 round 22px) !important;
    contain:paint !important;
    background-clip:padding-box !important;
    transform:translateZ(0);
  }
}

/* Chromium/Android dark mode: remove any inherited cool/blue glass layer
   from both wrapper and orange child. */
html.io-black-mode.mf-android body.user-center.logged-in .uc-assets-menu.mf-single-asset,
html.mf-android.io-black-mode body.user-center.logged-in .uc-assets-menu.mf-single-asset {
  background:transparent !important;
  background-image:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
}

html.io-black-mode.mf-android body.user-center.logged-in .uc-assets-menu.mf-single-asset > .uc-assets-item,
html.mf-android.io-black-mode body.user-center.logged-in .uc-assets-menu.mf-single-asset > .uc-assets-item {
  background:
    radial-gradient(circle at 84% 18%,rgba(255,192,91,.15) 0%,rgba(255,192,91,.035) 26%,transparent 52%),
    linear-gradient(135deg,#5d390b 0%,#79470e 50%,#995915 100%) !important;
  background-color:#75450e !important;
  background-blend-mode:normal !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
}

/* Mobile: leaderboard is part of the points page itself, not only a popup.
   Stack points detail first and leaderboard second. */
@media (max-width:767.98px) {
  body.user-center .uc-content-body .mf-points-split {
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  body.user-center .uc-content-body .mf-points-panel--logs {
    order:1 !important;
    display:block !important;
  }

  body.user-center .uc-content-body .mf-points-panel--board {
    order:2 !important;
    display:block !important;
    width:100% !important;
  }

  body.user-center .uc-content-body .mf-points-panel--board .mf-points-panel-body {
    padding:10px 12px 14px !important;
  }

  /* Mobile ranking summary remains compact enough for phone screens. */
  body.user-center .uc-content-body .mf-checkin-summary-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  body.user-center .uc-content-body .mf-checkin-title-card {
    grid-column:1 / -1 !important;
  }

  body.user-center .uc-content-body .mf-checkin-rank-row {
    grid-template-columns:36px minmax(0,1fr) auto !important;
    gap:8px !important;
    min-height:68px !important;
    padding:9px 9px !important;
  }

  body.user-center .uc-content-body .mf-checkin-rank-no {
    width:30px !important;
    height:30px !important;
    border-radius:10px !important;
    font-size:12px !important;
  }

  body.user-center .uc-content-body .mf-checkin-rank-name {
    font-size:13px !important;
  }

  body.user-center .uc-content-body .mf-checkin-rank-meta,
  body.user-center .uc-content-body .mf-checkin-rank-side span {
    font-size:10px !important;
  }

  body.user-center .uc-content-body .mf-checkin-rank-side strong {
    font-size:12px !important;
  }

  /* The inline leaderboard is now visible, so hide the duplicate popup-only
     shortcut to keep the mobile asset card clean. */
  body.user-center .uc-content-body .mf-mobile-checkin-rank-btn {
    display:none !important;
  }
}


/* =========================================================
   v1.6.6.7.0 — force true overview 50/50 + integrate points card
   ========================================================= */

/* True desktop/tablet-wide 50/50 layout.
   Force the overview itself to fill the whole main content width. */
@media (min-width:768px) {
  body.user-center main.mf-uc-dashboard > .mf-uc-overview {
    display:grid !important;
    grid-template-columns:calc(50% - 9px) calc(50% - 9px) !important;
    column-gap:18px !important;
    row-gap:14px !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    margin:18px 0 22px 0 !important;
    padding:0 !important;
    justify-items:stretch !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    transform:none !important;
    inset:auto !important;
  }

  body.user-center main.mf-uc-dashboard > .mf-uc-overview > .mf-uc-stats,
  body.user-center main.mf-uc-dashboard > .mf-uc-overview > .mf-uc-contribute {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    align-self:stretch !important;
    justify-self:stretch !important;
  }

  body.user-center main.mf-uc-dashboard > .mf-uc-overview > .mf-uc-stats {
    grid-column:1 !important;
    grid-row:1 !important;
  }

  body.user-center main.mf-uc-dashboard > .mf-uc-overview > .mf-uc-contribute {
    grid-column:2 !important;
    grid-row:1 !important;
  }

  body.user-center main.mf-uc-dashboard > .mf-uc-overview > .mf-uc-stats > .p-3,
  body.user-center main.mf-uc-dashboard > .mf-uc-overview > .mf-uc-contribute > .p-3 {
    width:100% !important;
    max-width:none !important;
    min-height:118px !important;
    box-sizing:border-box !important;
  }

  /* Stats really fill their half. */
  body.user-center .mf-uc-stats > .p-3 {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  body.user-center .mf-uc-stats .user-menu-item {
    width:auto !important;
    min-width:0 !important;
    flex:none !important;
  }

  /* Contribute shortcuts also really fill their half. */
  body.user-center .mf-uc-contribute .d-flex.align-items-center:not(.border-bottom) {
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
    width:100% !important;
  }
  body.user-center .mf-uc-contribute .btn-new-posts {
    width:100% !important;
    min-width:0 !important;
    flex:none !important;
  }
}

/* Hide the large orange points card after its actions are moved into the
   leaderboard panel. Balance card, if enabled, is left untouched. */
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow.mf-points-card-integrated {
  display:none !important;
}

/* Integrated points/check-in header inside the ranking panel. */
body.user-center .uc-content-body .mf-points-integrated-top {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
  padding:14px 15px;
  border-radius:17px;
  border:1px solid rgba(242,174,69,.20);
  background:
    radial-gradient(circle at 90% 15%,rgba(255,195,88,.20),transparent 38%),
    linear-gradient(135deg,rgba(255,248,231,.96),rgba(255,231,184,.84));
}

body.user-center .uc-content-body .mf-points-integrated-balance small {
  display:block;
  margin-bottom:4px;
  color:#9a7442;
  font-size:11px;
}

body.user-center .uc-content-body .mf-points-integrated-balance strong {
  display:block;
  color:#2e3440;
  font-size:29px;
  line-height:1;
  font-weight:820;
}

body.user-center .uc-content-body .mf-points-integrated-balance strong .mf-points-unit {
  margin-left:5px;
  color:#8d7556;
  font-size:12px;
  font-weight:650;
}

body.user-center .uc-content-body .mf-points-integrated-actions {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

body.user-center .uc-content-body .mf-points-integrated-actions .btn {
  min-height:38px !important;
  padding:0 15px !important;
  border-radius:13px !important;
  font-size:13px !important;
  font-weight:700 !important;
}

/* The right ranking panel now owns all points summary information. */
body.user-center .uc-content-body .mf-points-panel--board .mf-points-panel-head {
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent);
}

html.io-black-mode body.user-center .uc-content-body .mf-points-integrated-top {
  border-color:rgba(255,183,72,.16);
  background:
    radial-gradient(circle at 90% 12%,rgba(255,177,55,.13),transparent 40%),
    linear-gradient(135deg,rgba(94,62,19,.58),rgba(66,46,24,.42));
}

html.io-black-mode body.user-center .uc-content-body .mf-points-integrated-balance small {
  color:#c8a975;
}

html.io-black-mode body.user-center .uc-content-body .mf-points-integrated-balance strong {
  color:#fff0d3;
}

html.io-black-mode body.user-center .uc-content-body .mf-points-integrated-balance strong .mf-points-unit {
  color:#c8b590;
}

/* Mobile: board must be visible and inline in points page. */
@media (max-width:767.98px) {
  body.user-center .uc-content-body #assets_log_points > .mf-points-split {
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    gap:12px !important;
  }

  body.user-center .uc-content-body #assets_log_points .mf-points-panel--logs,
  body.user-center .uc-content-body #assets_log_points .mf-points-panel--board {
    display:block !important;
    width:100% !important;
    max-width:none !important;
  }

  body.user-center .uc-content-body #assets_log_points .mf-points-panel--logs {
    order:1 !important;
  }

  body.user-center .uc-content-body #assets_log_points .mf-points-panel--board {
    order:2 !important;
  }

  body.user-center .uc-content-body .mf-points-integrated-top {
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:12px !important;
  }

  body.user-center .uc-content-body .mf-points-integrated-actions {
    justify-content:flex-start !important;
  }

  body.user-center .uc-content-body .mf-points-integrated-actions .btn {
    flex:1 1 0 !important;
    min-width:0 !important;
  }

  body.user-center .uc-content-body .mf-points-integrated-balance strong {
    font-size:26px;
  }
}


/* =========================================================
   v1.6.6.7.1 — orange points card standalone;
   points detail + check-in ranking share ONE white card
   ========================================================= */

/* Restore the orange points card unconditionally. */
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow,
body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow.mf-points-card-integrated {
  display:block !important;
}

/* Hide any stale integrated header from previous version/BFCache. */
body.user-center .uc-content-body .mf-points-integrated-top {
  display:none !important;
}

/* The parent OneNav white card is already the outer card.
   Our combined container is therefore layout-only: no nested card shell. */
body.user-center .uc-content-body #assets_log_points > .mf-points-combined-card {
  display:grid !important;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr) !important;
  gap:0 !important;
  width:100% !important;
  margin-top:10px !important;
  padding:0 !important;
  border:1px solid rgba(176,195,224,.22);
  border-radius:20px;
  background:rgba(252,253,255,.56);
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}

/* Both sides live inside the SAME card. */
body.user-center .uc-content-body .mf-points-combined-section {
  min-width:0;
  background:transparent !important;
}

body.user-center .uc-content-body .mf-points-combined-logs {
  border-right:1px solid rgba(176,195,224,.18);
}

body.user-center .uc-content-body .mf-points-combined-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  min-height:66px;
  padding:16px 17px 12px;
  border-bottom:1px solid rgba(176,195,224,.16);
}

body.user-center .uc-content-body .mf-points-combined-head h3 {
  margin:0;
  color:#263142;
  font-size:20px;
  line-height:1.15;
  font-weight:760;
}

body.user-center .uc-content-body .mf-points-combined-head p {
  margin:3px 0 0;
  color:#929eaf;
  font-size:11px;
}

body.user-center .uc-content-body .mf-points-combined-body {
  padding:14px 16px 18px;
}

/* Left points log should not create another card/header. */
body.user-center .uc-content-body .mf-points-combined-logs .order-list {
  margin:0 !important;
}

body.user-center .uc-content-body .mf-points-combined-logs .order-item {
  margin-bottom:9px !important;
  padding:13px 13px !important;
  border:1px solid rgba(191,207,232,.14);
  border-radius:15px;
  background:rgba(248,250,255,.68);
}

body.user-center .uc-content-body .mf-points-combined-logs .order-item:last-child {
  margin-bottom:0 !important;
}

/* Ranking side: remove old nested panel appearance completely. */
body.user-center .uc-content-body .mf-points-combined-board .mf-checkin-summary-grid {
  margin-top:0 !important;
}

body.user-center .uc-content-body .mf-points-combined-board .mf-checkin-rank-list {
  max-height:none !important;
}

/* Old split/panel selectors must not impose layout if stale DOM survives BFCache. */
body.user-center .uc-content-body .mf-points-split,
body.user-center .uc-content-body .mf-points-panel {
  box-shadow:none;
}

/* Dark mode, still one shared card. */
html.io-black-mode body.user-center .uc-content-body #assets_log_points > .mf-points-combined-card {
  border-color:rgba(151,179,219,.13);
  background:linear-gradient(145deg,rgba(34,44,61,.72),rgba(25,33,47,.68));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

html.io-black-mode body.user-center .uc-content-body .mf-points-combined-logs {
  border-right-color:rgba(151,179,219,.10);
}

html.io-black-mode body.user-center .uc-content-body .mf-points-combined-head {
  border-bottom-color:rgba(151,179,219,.10);
}

html.io-black-mode body.user-center .uc-content-body .mf-points-combined-head h3 {
  color:#f0f4fb;
}

html.io-black-mode body.user-center .uc-content-body .mf-points-combined-head p {
  color:#8492a8;
}

html.io-black-mode body.user-center .uc-content-body .mf-points-combined-logs .order-item {
  border-color:rgba(151,179,219,.10);
  background:rgba(52,66,90,.38);
}

/* Mobile: same ONE card, just stacked vertically. */
@media (max-width:767.98px) {
  body.user-center .uc-content-body #assets_log_points > .mf-points-combined-card {
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    margin-top:8px !important;
    border-radius:18px !important;
  }

  body.user-center .uc-content-body .mf-points-combined-logs {
    order:1 !important;
    width:100% !important;
    border-right:0 !important;
    border-bottom:1px solid rgba(176,195,224,.16);
  }

  body.user-center .uc-content-body .mf-points-combined-board {
    order:2 !important;
    width:100% !important;
  }

  body.user-center .uc-content-body .mf-points-combined-head {
    min-height:58px !important;
    padding:13px 14px 10px !important;
  }

  body.user-center .uc-content-body .mf-points-combined-head h3 {
    font-size:17px !important;
  }

  body.user-center .uc-content-body .mf-points-combined-body {
    padding:11px 12px 14px !important;
  }

  body.user-center .uc-content-body .mf-points-combined-logs .order-item {
    padding:12px 12px !important;
    margin-bottom:8px !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-points-combined-logs {
    border-bottom-color:rgba(151,179,219,.10);
  }
}


/* =========================================================
   v1.6.6.7.2 — DESKTOP FIRST
   Orange points card stays standalone.
   The old points-detail area becomes one full-width check-in leaderboard.
   Mobile intentionally remains previous version for later tuning.
   ========================================================= */
@media (min-width:768px) {
  /* The original points history column is no longer shown on desktop. */
  body.user-center .uc-content-body #assets_log_points > .mf-points-combined-card {
    display:block !important;
    width:100% !important;
    margin-top:8px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
  }

  body.user-center .uc-content-body .mf-points-combined-logs {
    display:none !important;
  }

  body.user-center .uc-content-body .mf-points-combined-board {
    display:block !important;
    width:100% !important;
    border:0 !important;
    background:transparent !important;
  }

  /* The existing OneNav white parent card is the only outer card. */
  body.user-center .uc-content-body .mf-points-combined-board > .mf-points-combined-head {
    display:none !important;
  }

  body.user-center .uc-content-body .mf-points-combined-board > .mf-points-combined-body {
    padding:4px 0 2px !important;
  }

  /* Exact requested top information: 5 primary status cells. */
  body.user-center .uc-content-body .mf-pc-rank-summary {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-bottom:12px !important;
  }

  body.user-center .uc-content-body .mf-pc-rank-summary .mf-checkin-stat {
    min-height:82px !important;
    padding:14px 14px 12px !important;
    border-radius:17px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(246,249,255,.92)) !important;
    border:1px solid rgba(191,207,232,.20) !important;
  }

  body.user-center .uc-content-body .mf-pc-rank-summary .mf-checkin-stat small {
    margin-bottom:9px !important;
    font-size:12px !important;
  }

  body.user-center .uc-content-body .mf-pc-rank-summary .mf-checkin-stat strong {
    font-size:22px !important;
  }

  body.user-center .uc-content-body .mf-pc-stat-points {
    background:
      radial-gradient(circle at 86% 14%,rgba(255,199,96,.20),transparent 42%),
      linear-gradient(180deg,#fffaf0,#fff0cf) !important;
    border-color:rgba(244,178,66,.22) !important;
  }

  body.user-center .uc-content-body .mf-pc-stat-points strong {
    color:#d97706 !important;
  }

  /* Headline + next-title progress in one horizontal strip. */
  body.user-center .uc-content-body .mf-pc-title-strip {
    position:relative;
    display:grid !important;
    grid-template-columns:minmax(180px,.7fr) minmax(260px,1.3fr) !important;
    gap:16px !important;
    align-items:center !important;
    margin-bottom:12px !important;
    padding:15px 16px 18px !important;
    border:1px solid rgba(161,186,225,.18) !important;
    border-radius:17px !important;
    background:linear-gradient(135deg,rgba(244,248,255,.88),rgba(252,253,255,.72)) !important;
    overflow:hidden !important;
  }

  body.user-center .uc-content-body .mf-pc-title-strip small {
    display:block;
    margin-bottom:4px;
    color:#8c98aa;
    font-size:11px;
  }

  body.user-center .uc-content-body .mf-pc-title-main strong {
    color:#273142;
    font-size:20px;
    font-weight:800;
  }

  body.user-center .uc-content-body .mf-pc-title-next {
    text-align:right;
  }

  body.user-center .uc-content-body .mf-pc-title-next strong {
    color:#315f9d;
    font-size:16px;
    font-weight:760;
  }

  body.user-center .uc-content-body .mf-pc-title-next span {
    display:block;
    margin-top:3px;
    color:#8d99aa;
    font-size:11px;
  }

  body.user-center .uc-content-body .mf-pc-title-progress {
    position:absolute;
    left:16px;
    right:16px;
    bottom:8px;
    height:4px;
    border-radius:99px;
    overflow:hidden;
    background:rgba(169,188,217,.20);
  }

  body.user-center .uc-content-body .mf-pc-title-progress > span {
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#f6a828,#ff7b1a);
  }

  /* Only the two newest REAL point ledger rows. */
  body.user-center .uc-content-body .mf-pc-recent-points {
    margin-bottom:14px !important;
    padding:13px 15px !important;
    border:1px solid rgba(184,201,227,.17) !important;
    border-radius:17px !important;
    background:rgba(248,250,255,.68) !important;
  }

  body.user-center .uc-content-body .mf-pc-section-title {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:9px;
    margin-bottom:2px;
    border-bottom:1px solid rgba(184,201,227,.13);
  }

  body.user-center .uc-content-body .mf-pc-section-title strong {
    color:#2b3444;
    font-size:14px;
  }

  body.user-center .uc-content-body .mf-pc-section-title span {
    color:#98a2b1;
    font-size:11px;
  }

  body.user-center .uc-content-body .mf-pc-point-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) 60px 76px;
    gap:10px;
    align-items:center;
    min-height:42px;
    border-bottom:1px solid rgba(184,201,227,.11);
  }

  body.user-center .uc-content-body .mf-pc-point-row:last-child {
    border-bottom:0;
  }

  body.user-center .uc-content-body .mf-pc-point-label {
    min-width:0;
    color:#344052;
    font-size:13px;
    font-weight:620;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.user-center .uc-content-body .mf-pc-point-reward {
    color:#95a0b1;
    font-size:12px;
    text-align:center;
  }

  body.user-center .uc-content-body .mf-pc-point-value {
    text-align:right;
    font-size:15px;
    font-weight:780;
    font-variant-numeric:tabular-nums;
  }

  body.user-center .uc-content-body .mf-pc-point-value.is-plus {
    color:#22a35a;
  }

  body.user-center .uc-content-body .mf-pc-point-value.is-minus {
    color:#e34d59;
  }

  /* Ranking rows align under the same single white card. */
  body.user-center .uc-content-body .mf-checkin-rank-caption {
    margin:0 0 10px !important;
    padding:0 2px !important;
  }

  body.user-center .uc-content-body .mf-checkin-rank-list {
    gap:8px !important;
  }

  body.user-center .uc-content-body .mf-checkin-rank-row {
    min-height:62px !important;
    padding:10px 12px !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-pc-rank-summary .mf-checkin-stat,
  html.io-black-mode body.user-center .uc-content-body .mf-pc-title-strip,
  html.io-black-mode body.user-center .uc-content-body .mf-pc-recent-points {
    background:rgba(51,65,89,.42) !important;
    border-color:rgba(145,169,207,.12) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-pc-stat-points {
    background:
      radial-gradient(circle at 86% 14%,rgba(255,183,68,.13),transparent 44%),
      linear-gradient(135deg,rgba(96,61,18,.52),rgba(67,48,25,.40)) !important;
    border-color:rgba(242,174,61,.16) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-pc-title-main strong,
  html.io-black-mode body.user-center .uc-content-body .mf-pc-section-title strong,
  html.io-black-mode body.user-center .uc-content-body .mf-pc-point-label {
    color:#eef3fb !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-pc-title-strip small,
  html.io-black-mode body.user-center .uc-content-body .mf-pc-title-next span,
  html.io-black-mode body.user-center .uc-content-body .mf-pc-section-title span,
  html.io-black-mode body.user-center .uc-content-body .mf-pc-point-reward {
    color:#8997ac !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-pc-title-next strong {
    color:#a9c8ff !important;
  }
}


/* =========================================================
   v1.6.6.7.3 — PC iOS26 check-in heatmap experiment
   Inspired by activity/calendar heatmaps, implemented natively to avoid
   third-party runtime/CSS conflicts with OneNav.
   ========================================================= */
@media (min-width:768px) {
  body.user-center .uc-content-body .mf-pc-heatmap {
    margin-bottom:14px !important;
    padding:13px 15px 12px !important;
    border:1px solid rgba(184,201,227,.17) !important;
    border-radius:17px !important;
    background:
      radial-gradient(circle at 92% 10%,rgba(255,187,70,.09),transparent 32%),
      rgba(248,250,255,.68) !important;
    overflow:hidden !important;
  }

  body.user-center .uc-content-body .mf-heatmap-grid {
    display:grid !important;
    grid-template-columns:repeat(15,minmax(24px,1fr)) !important;
    gap:7px !important;
    padding:11px 0 8px !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day {
    position:relative;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    aspect-ratio:1 / 1 !important;
    min-height:28px !important;
    max-height:40px !important;
    border-radius:9px !important;
    border:1px solid rgba(178,197,225,.24) !important;
    background:linear-gradient(180deg,rgba(239,244,251,.95),rgba(229,236,247,.82)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.78) !important;
    cursor:default;
    transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease;
  }

  body.user-center .uc-content-body .mf-heatmap-day em {
    font-style:normal !important;
    color:#93a0b3 !important;
    font-size:10px !important;
    line-height:1 !important;
    font-variant-numeric:tabular-nums;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-checked {
    border-color:rgba(245,159,35,.36) !important;
    background:
      radial-gradient(circle at 30% 20%,rgba(255,255,255,.38),transparent 38%),
      linear-gradient(145deg,#ffc55b,#ff9a21 58%,#f47a16) !important;
    box-shadow:0 5px 12px rgba(237,133,20,.14),inset 0 1px 0 rgba(255,255,255,.40) !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-checked em {
    color:#fff !important;
    font-weight:760 !important;
    text-shadow:0 1px 2px rgba(142,72,0,.18);
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today {
    border:2px solid rgba(55,122,225,.74) !important;
    box-shadow:0 0 0 3px rgba(64,134,235,.10),inset 0 1px 0 rgba(255,255,255,.45) !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today.is-checked {
    border-color:rgba(255,255,255,.96) !important;
    box-shadow:0 0 0 3px rgba(255,153,28,.20),0 6px 16px rgba(228,119,11,.18) !important;
  }

  @media (hover:hover) and (pointer:fine) {
    body.user-center .uc-content-body .mf-heatmap-day:hover {
      transform:translateY(-2px) scale(1.035) !important;
      z-index:2;
    }
  }

  body.user-center .uc-content-body .mf-heatmap-legend {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    color:#929dac;
    font-size:10px;
  }

  body.user-center .uc-content-body .mf-heatmap-legend span {
    display:inline-flex;
    align-items:center;
    gap:5px;
  }

  body.user-center .uc-content-body .mf-heatmap-legend i {
    width:10px;
    height:10px;
    border-radius:4px;
    display:inline-block;
    border:1px solid rgba(178,197,225,.26);
    background:#e9eff7;
  }

  body.user-center .uc-content-body .mf-heatmap-legend i.is-done {
    border-color:rgba(245,159,35,.36);
    background:linear-gradient(145deg,#ffc55b,#f58418);
  }

  body.user-center .uc-content-body .mf-heatmap-legend i.is-now {
    border:2px solid rgba(55,122,225,.74);
    background:#f3f7fd;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-pc-heatmap {
    border-color:rgba(145,169,207,.12) !important;
    background:
      radial-gradient(circle at 92% 10%,rgba(255,170,49,.08),transparent 34%),
      rgba(51,65,89,.42) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-heatmap-day {
    border-color:rgba(130,151,184,.16) !important;
    background:linear-gradient(145deg,rgba(61,75,99,.80),rgba(47,59,80,.76)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-heatmap-day em {
    color:#8796aa !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-heatmap-day.is-checked {
    border-color:rgba(255,181,61,.27) !important;
    background:
      radial-gradient(circle at 30% 18%,rgba(255,255,255,.16),transparent 38%),
      linear-gradient(145deg,#b46d13,#d77a12 56%,#a9550e) !important;
    box-shadow:0 5px 14px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-heatmap-day.is-checked em {
    color:#fff4df !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-heatmap-legend i {
    border-color:rgba(130,151,184,.18);
    background:#3b4a63;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-heatmap-legend i.is-done {
    border-color:rgba(255,181,61,.27);
    background:linear-gradient(145deg,#b86d12,#d67a12);
  }

  html.io-black-mode body.user-center .uc-content-body .mf-heatmap-legend i.is-now {
    border-color:#79aaf7;
    background:#3c4c66;
  }
}


/* =========================================================
   v1.6.6.7.4 — MOBILE check-in center
   Based on v1.6.6.7.3 desktop-approved layout.
   Desktop styles are intentionally untouched.
   ========================================================= */
@media (max-width:767.98px) {

  /* Keep the orange points card standalone and compact. */
  body.user-center .uc-content-body .uc-assets-cards {
    margin-bottom:12px !important;
  }

  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow {
    display:block !important;
    border-radius:20px !important;
    overflow:hidden !important;
    min-height:96px !important;
  }

  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .card-body {
    min-height:96px !important;
    padding:16px 16px !important;
  }

  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions {
    gap:8px !important;
    flex-wrap:nowrap !important;
  }

  body.user-center .uc-content-body .uc-assets-cards > .card.card-color.vc-j-yellow .assets-actions .btn {
    min-width:0 !important;
    min-height:38px !important;
    padding:0 14px !important;
    font-size:13px !important;
    border-radius:13px !important;
  }

  /* The points pane becomes one mobile check-in center. */
  body.user-center .uc-content-body #assets_log_points {
    width:100% !important;
  }

  body.user-center .uc-content-body #assets_log_points > .mf-points-split,
  body.user-center .uc-content-body #assets_log_points > .mf-points-combined-card {
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  /* Hide old long points-detail list on mobile in this version. */
  body.user-center .uc-content-body #assets_log_points .mf-points-panel--logs,
  body.user-center .uc-content-body #assets_log_points .mf-points-combined-logs {
    display:none !important;
  }

  /* Ranking/check-in center occupies full width. */
  body.user-center .uc-content-body #assets_log_points .mf-points-panel--board,
  body.user-center .uc-content-body #assets_log_points .mf-points-combined-board {
    display:block !important;
    width:100% !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body.user-center .uc-content-body #assets_log_points .mf-points-panel--board > .mf-points-panel-head,
  body.user-center .uc-content-body #assets_log_points .mf-points-combined-board > .mf-points-combined-head {
    display:none !important;
  }

  body.user-center .uc-content-body #assets_log_points .mf-points-panel-body,
  body.user-center .uc-content-body #assets_log_points .mf-points-combined-body,
  body.user-center .uc-content-body #assets_log_points .mf-points-board-body {
    padding:0 !important;
  }

  /* Main mobile shell */
  body.user-center .uc-content-body .mf-mobile-checkin-center {
    display:block !important;
    width:100% !important;
  }

  body.user-center .uc-content-body .mf-mobile-checkin-section {
    margin-bottom:12px !important;
    padding:13px !important;
    border-radius:18px !important;
    border:1px solid rgba(181,199,226,.20) !important;
    background:rgba(252,253,255,.76) !important;
    box-shadow:0 9px 24px rgba(44,66,101,.06), inset 0 1px 0 rgba(255,255,255,.92) !important;
    overflow:hidden !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-checkin-section {
    border-color:rgba(151,179,219,.12) !important;
    background:linear-gradient(145deg,rgba(34,44,61,.86),rgba(25,33,47,.78)) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  /* 5 primary stats as 2-column grid + full-width status where helpful */
  body.user-center .uc-content-body .mf-mobile-checkin-stats {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  body.user-center .uc-content-body .mf-mobile-stat {
    min-height:72px !important;
    padding:11px 11px 10px !important;
    border-radius:15px !important;
    border:1px solid rgba(186,203,229,.16) !important;
    background:rgba(247,250,255,.78) !important;
  }

  body.user-center .uc-content-body .mf-mobile-stat small {
    display:block;
    color:#8b97aa;
    font-size:11px;
    margin-bottom:7px;
  }

  body.user-center .uc-content-body .mf-mobile-stat strong {
    display:block;
    color:#293345;
    font-size:19px;
    line-height:1.05;
    font-weight:800;
  }

  body.user-center .uc-content-body .mf-mobile-stat .mf-suffix {
    margin-left:3px;
    color:#8d98aa;
    font-size:11px;
    font-weight:650;
  }

  body.user-center .uc-content-body .mf-mobile-stat.is-points {
    background:
      radial-gradient(circle at 86% 12%,rgba(255,198,94,.18),transparent 44%),
      linear-gradient(180deg,#fff9ed,#fff0d2) !important;
    border-color:rgba(244,179,67,.22) !important;
  }

  body.user-center .uc-content-body .mf-mobile-stat.is-points strong {
    color:#d8780d !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-stat {
    background:rgba(52,66,90,.40) !important;
    border-color:rgba(145,169,207,.10) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-stat strong {
    color:#eef3fb !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-stat.is-points {
    background:
      radial-gradient(circle at 86% 14%,rgba(255,183,68,.12),transparent 44%),
      linear-gradient(135deg,rgba(96,61,18,.50),rgba(67,48,25,.38)) !important;
  }

  /* Title progression: compact, no nested-card feeling */
  body.user-center .uc-content-body .mf-mobile-title {
    position:relative;
    padding:13px 13px 18px !important;
  }

  body.user-center .uc-content-body .mf-mobile-title-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }

  body.user-center .uc-content-body .mf-mobile-title small {
    display:block;
    margin-bottom:4px;
    color:#8b97aa;
    font-size:11px;
  }

  body.user-center .uc-content-body .mf-mobile-title-name {
    color:#273142;
    font-size:19px;
    font-weight:800;
  }

  body.user-center .uc-content-body .mf-mobile-title-next {
    text-align:right;
  }

  body.user-center .uc-content-body .mf-mobile-title-next strong {
    display:block;
    color:#3564a4;
    font-size:14px;
  }

  body.user-center .uc-content-body .mf-mobile-title-next span {
    display:block;
    margin-top:3px;
    color:#8d98aa;
    font-size:10px;
  }

  body.user-center .uc-content-body .mf-mobile-title-track {
    position:absolute;
    left:13px;
    right:13px;
    bottom:8px;
    height:4px;
    border-radius:99px;
    overflow:hidden;
    background:rgba(169,188,217,.20);
  }

  body.user-center .uc-content-body .mf-mobile-title-track > span {
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#f7aa2f,#ff7c1b);
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-title-name {
    color:#eef3fb !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-title-next strong {
    color:#a9c8ff !important;
  }

  /* Mobile heatmap = 6 x 5. Tap works as tooltip replacement. */
  body.user-center .uc-content-body .mf-mobile-heatmap-head,
  body.user-center .uc-content-body .mf-mobile-recent-head,
  body.user-center .uc-content-body .mf-mobile-rank-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }

  body.user-center .uc-content-body .mf-mobile-heatmap-head strong,
  body.user-center .uc-content-body .mf-mobile-recent-head strong,
  body.user-center .uc-content-body .mf-mobile-rank-head strong {
    color:#2a3445;
    font-size:14px;
  }

  body.user-center .uc-content-body .mf-mobile-heatmap-head span,
  body.user-center .uc-content-body .mf-mobile-recent-head span,
  body.user-center .uc-content-body .mf-mobile-rank-head span {
    color:#929dad;
    font-size:10px;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-heatmap-head strong,
  html.io-black-mode body.user-center .uc-content-body .mf-mobile-recent-head strong,
  html.io-black-mode body.user-center .uc-content-body .mf-mobile-rank-head strong {
    color:#eef3fb !important;
  }

  body.user-center .uc-content-body .mf-mobile-heatmap-grid {
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day {
    position:relative;
    display:flex !important;
    align-items:center;
    justify-content:center;
    min-height:42px !important;
    border-radius:11px !important;
    border:1px solid rgba(185,202,227,.20) !important;
    background:rgba(239,244,252,.82) !important;
    color:#8793a6 !important;
    font-size:11px !important;
    font-weight:700;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-checked {
    color:#fff !important;
    border-color:rgba(255,169,45,.34) !important;
    background:linear-gradient(180deg,#ffb52e,#ff8a15) !important;
    box-shadow:0 6px 14px rgba(241,138,20,.18) !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-today {
    outline:2px solid rgba(56,132,238,.65) !important;
    outline-offset:2px !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-selected {
    transform:translateY(-1px);
    box-shadow:0 0 0 3px rgba(66,139,235,.14), 0 7px 16px rgba(44,83,137,.12) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-heat-day {
    color:#98a6bb !important;
    background:rgba(55,70,96,.52) !important;
    border-color:rgba(145,169,207,.10) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-heat-day.is-checked {
    color:#fff !important;
    background:linear-gradient(180deg,#e99b20,#d8750f) !important;
    border-color:rgba(255,185,75,.20) !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-detail {
    min-height:36px;
    margin-top:9px;
    padding:9px 10px;
    border-radius:12px;
    color:#687589;
    background:rgba(242,246,252,.72);
    font-size:11px;
    line-height:1.4;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-heat-detail {
    color:#aab6c8 !important;
    background:rgba(48,61,83,.54) !important;
  }

  /* Only the latest two REAL ledger rows. */
  body.user-center .uc-content-body .mf-mobile-point-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    min-height:48px;
    padding:8px 0;
    border-bottom:1px solid rgba(182,199,225,.12);
  }

  body.user-center .uc-content-body .mf-mobile-point-row:last-child {
    border-bottom:0;
  }

  body.user-center .uc-content-body .mf-mobile-point-label {
    min-width:0;
    color:#344052;
    font-size:12px;
    font-weight:620;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.user-center .uc-content-body .mf-mobile-point-time {
    display:block;
    margin-top:3px;
    color:#98a2b1;
    font-size:10px;
  }

  body.user-center .uc-content-body .mf-mobile-point-value {
    font-size:15px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
  }

  body.user-center .uc-content-body .mf-mobile-point-value.is-plus { color:#22a35a; }
  body.user-center .uc-content-body .mf-mobile-point-value.is-minus { color:#e34d59; }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-point-label {
    color:#eef3fb !important;
  }

  /* Compact ranking rows */
  body.user-center .uc-content-body .mf-mobile-rank-list {
    display:flex;
    flex-direction:column;
    gap:7px;
  }

  body.user-center .uc-content-body .mf-mobile-rank-row {
    display:grid;
    grid-template-columns:32px minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
    min-height:60px;
    padding:8px 9px;
    border-radius:14px;
    border:1px solid rgba(185,202,227,.14);
    background:rgba(248,250,255,.70);
  }

  body.user-center .uc-content-body .mf-mobile-rank-row.is-me {
    border-color:rgba(244,174,58,.22);
    background:linear-gradient(135deg,rgba(255,194,96,.12),rgba(255,151,47,.07));
  }

  body.user-center .uc-content-body .mf-mobile-rank-no {
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(219,227,241,.70);
    color:#697486;
    font-size:11px;
    font-weight:800;
  }

  body.user-center .uc-content-body .mf-mobile-rank-row:nth-child(1) .mf-mobile-rank-no {
    color:#9f5f00;
    background:linear-gradient(180deg,#ffe6ad,#ffd276);
  }

  body.user-center .uc-content-body .mf-mobile-rank-name {
    display:block;
    color:#2d3748;
    font-size:12px;
    font-weight:720;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  body.user-center .uc-content-body .mf-mobile-rank-meta {
    display:block;
    margin-top:3px;
    color:#929dad;
    font-size:10px;
  }

  body.user-center .uc-content-body .mf-mobile-rank-side {
    text-align:right;
  }

  body.user-center .uc-content-body .mf-mobile-rank-side strong {
    display:block;
    color:#238f4e;
    font-size:11px;
  }

  body.user-center .uc-content-body .mf-mobile-rank-side span {
    display:block;
    margin-top:3px;
    color:#929dad;
    font-size:9px;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-rank-row {
    background:rgba(52,66,90,.38) !important;
    border-color:rgba(145,169,207,.09) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-rank-name {
    color:#eef3fb !important;
  }

  /* Prevent desktop heatmap/rank blocks from duplicating underneath mobile view. */
  body.user-center .uc-content-body .mf-pc-heatmap,
  body.user-center .uc-content-body .mf-pc-rank-summary,
  body.user-center .uc-content-body .mf-pc-title-strip,
  body.user-center .uc-content-body .mf-pc-recent-points {
    display:none !important;
  }
}


/* =========================================================
   v1.6.6.7.5 — check-in center polish / title badges / motion
   ========================================================= */

/* Desktop heatmap: "today" must visually match the blue TODAY legend.
   Checked-today remains clearly distinct from ordinary orange checked days. */
@media (min-width:768px) {
  body.user-center .uc-content-body .mf-heatmap-day.is-today {
    border:1px solid rgba(82,137,236,.46) !important;
    background:
      radial-gradient(circle at 30% 20%,rgba(255,255,255,.34),transparent 38%),
      linear-gradient(145deg,#8ab8ff,#568ae9 58%,#3f72d0) !important;
    box-shadow:
      0 0 0 3px rgba(75,132,228,.12),
      0 6px 15px rgba(53,101,185,.16),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today em {
    color:#fff !important;
    font-weight:800 !important;
    text-shadow:0 1px 2px rgba(27,68,139,.20);
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today.is-checked {
    border:1px solid rgba(82,137,236,.52) !important;
    background:
      radial-gradient(circle at 28% 18%,rgba(255,255,255,.40),transparent 38%),
      linear-gradient(145deg,#89b7ff,#5388e8 56%,#3f71cf) !important;
    box-shadow:
      0 0 0 3px rgba(75,132,228,.14),
      0 7px 17px rgba(53,101,185,.20),
      inset 0 -3px 0 rgba(255,170,41,.78),
      inset 0 1px 0 rgba(255,255,255,.46) !important;
  }
}

/* Shared title badge */
body.user-center .uc-content-body .mf-title-badge {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  margin-right:9px;
  border-radius:11px;
  overflow:hidden;
  vertical-align:middle;
  border:1px solid rgba(247,176,60,.22);
  background:linear-gradient(145deg,#fff1c9,#ffd56d);
  box-shadow:0 7px 15px rgba(215,135,20,.12), inset 0 1px 0 rgba(255,255,255,.75);
}

body.user-center .uc-content-body .mf-title-badge::after {
  content:"";
  position:absolute;
  top:-35%;
  left:-55%;
  width:44%;
  height:170%;
  transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  opacity:.72;
}

body.user-center .uc-content-body .mf-title-badge i {
  position:relative;
  z-index:1;
  font-style:normal;
  color:#b96c08;
  font-size:17px;
  font-weight:900;
  line-height:1;
}

body.user-center .uc-content-body .mf-title-badge.is-starter {
  background:linear-gradient(145deg,#f0f4fb,#dce6f5);
  border-color:rgba(124,151,190,.20);
}
body.user-center .uc-content-body .mf-title-badge.is-starter i { color:#6e819c; }

body.user-center .uc-content-body .mf-title-badge.is-rising {
  background:linear-gradient(145deg,#e8f6ff,#bfe4ff);
  border-color:rgba(67,159,223,.20);
}
body.user-center .uc-content-body .mf-title-badge.is-rising i { color:#2d8fca; }

body.user-center .uc-content-body .mf-title-badge.is-habit {
  background:linear-gradient(145deg,#e5fbf0,#bdeecf);
  border-color:rgba(57,178,108,.20);
}
body.user-center .uc-content-body .mf-title-badge.is-habit i { color:#23965b; }

body.user-center .uc-content-body .mf-title-badge.is-pioneer {
  background:linear-gradient(145deg,#fff1ce,#ffd477);
}
body.user-center .uc-content-body .mf-title-badge.is-pioneer i { color:#bd7008; }

body.user-center .uc-content-body .mf-title-badge.is-expert {
  background:linear-gradient(145deg,#ffe8ca,#ffbd73);
}
body.user-center .uc-content-body .mf-title-badge.is-expert i { color:#c45e0a; }

body.user-center .uc-content-body .mf-title-badge.is-master {
  background:linear-gradient(145deg,#eee7ff,#cdbbff);
  border-color:rgba(124,91,224,.20);
}
body.user-center .uc-content-body .mf-title-badge.is-master i { color:#7855cb; }

body.user-center .uc-content-body .mf-title-badge.is-legend {
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.75),transparent 32%),
    linear-gradient(145deg,#ffe8a3,#ffb52f 60%,#ff8620);
}
body.user-center .uc-content-body .mf-title-badge.is-legend i { color:#9e4c00; }

body.user-center .uc-content-body .mf-pc-title-main strong,
body.user-center .uc-content-body .mf-mobile-title-name {
  display:flex !important;
  align-items:center !important;
}

/* Finer spacing / hierarchy */
body.user-center .uc-content-body .mf-pc-heatmap,
body.user-center .uc-content-body .mf-pc-recent-points,
body.user-center .uc-content-body .mf-mobile-checkin-section {
  transition:transform .20s ease, box-shadow .24s ease, border-color .22s ease;
}

@media (hover:hover) and (pointer:fine) {
  body.user-center .uc-content-body .mf-pc-heatmap:hover,
  body.user-center .uc-content-body .mf-pc-recent-points:hover {
    transform:translateY(-1px);
    border-color:rgba(157,184,224,.25) !important;
    box-shadow:0 13px 28px rgba(44,66,101,.08), inset 0 1px 0 rgba(255,255,255,.90) !important;
  }
}

/* Current-user ranking row stronger but still restrained */
body.user-center .uc-content-body .mf-checkin-rank-row.is-me,
body.user-center .uc-content-body .mf-mobile-rank-row.is-me {
  position:relative;
  overflow:hidden;
}
body.user-center .uc-content-body .mf-checkin-rank-row.is-me::before,
body.user-center .uc-content-body .mf-mobile-rank-row.is-me::before {
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,#ffc14a,#ff8118);
}

/* Light entrance animation. */
@keyframes mfCheckinFadeUp {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes mfCheckinProgressIn {
  from { transform:scaleX(.12); opacity:.55; }
  to { transform:scaleX(1); opacity:1; }
}
@keyframes mfCheckinShine {
  0%,72%,100% { transform:translateX(0) rotate(20deg); opacity:0; }
  78% { opacity:.75; }
  94% { transform:translateX(330%) rotate(20deg); opacity:0; }
}
@keyframes mfTodaySoftPulse {
  0%,100% { box-shadow:0 0 0 3px rgba(75,132,228,.12),0 6px 15px rgba(53,101,185,.16),inset 0 1px 0 rgba(255,255,255,.42); }
  50% { box-shadow:0 0 0 5px rgba(75,132,228,.07),0 8px 18px rgba(53,101,185,.18),inset 0 1px 0 rgba(255,255,255,.46); }
}

body.user-center .uc-content-body .mf-pc-rank-summary,
body.user-center .uc-content-body .mf-pc-title-strip,
body.user-center .uc-content-body .mf-pc-heatmap,
body.user-center .uc-content-body .mf-pc-recent-points,
body.user-center .uc-content-body .mf-checkin-rank-caption,
body.user-center .uc-content-body .mf-mobile-checkin-section {
  animation:mfCheckinFadeUp .34s cubic-bezier(.2,.72,.26,1) both;
}

body.user-center .uc-content-body .mf-pc-title-progress > span,
body.user-center .uc-content-body .mf-mobile-title-track > span {
  transform-origin:left center;
  animation:mfCheckinProgressIn .62s cubic-bezier(.18,.72,.24,1) both;
}

body.user-center .uc-content-body .mf-title-badge::after {
  animation:mfCheckinShine 5.6s ease-in-out infinite;
}

@media (min-width:768px) {
  body.user-center .uc-content-body .mf-heatmap-day.is-today {
    animation:mfTodaySoftPulse 2.8s ease-in-out infinite;
  }
}

/* Dark-mode badge tuning */
html.io-black-mode body.user-center .uc-content-body .mf-title-badge {
  border-color:rgba(255,208,122,.14);
  box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08);
  filter:saturate(.90) brightness(.90);
}

/* Mobile section name consistency and slightly cleaner first frame. */
@media (max-width:767.98px) {
  body.user-center .uc-content-body .mf-mobile-checkin-section {
    animation-duration:.28s;
  }

  body.user-center .uc-content-body .mf-mobile-checkin-section:nth-child(2) { animation-delay:.025s; }
  body.user-center .uc-content-body .mf-mobile-checkin-section:nth-child(3) { animation-delay:.05s; }
  body.user-center .uc-content-body .mf-mobile-checkin-section:nth-child(4) { animation-delay:.075s; }
  body.user-center .uc-content-body .mf-mobile-checkin-section:nth-child(5) { animation-delay:.10s; }

  body.user-center .uc-content-body .mf-mobile-title-name .mf-title-badge {
    width:30px;
    height:30px;
    flex-basis:30px;
    margin-right:8px;
    border-radius:10px;
  }

  body.user-center .uc-content-body .mf-mobile-title-name .mf-title-badge i {
    font-size:15px;
  }

  /* Today on mobile follows same semantic color as desktop. */
  body.user-center .uc-content-body .mf-mobile-heat-day.is-today,
  body.user-center .uc-content-body .mf-mobile-heat-day.is-today.is-checked {
    color:#fff !important;
    border-color:rgba(82,137,236,.52) !important;
    outline:0 !important;
    background:
      radial-gradient(circle at 28% 18%,rgba(255,255,255,.38),transparent 38%),
      linear-gradient(145deg,#89b7ff,#5388e8 56%,#3f71cf) !important;
    box-shadow:
      0 0 0 3px rgba(75,132,228,.12),
      0 6px 14px rgba(53,101,185,.16),
      inset 0 -3px 0 rgba(255,170,41,.72) !important;
  }
}

/* Respect accessibility/performance preferences. */
html.mf-reduced-motion body.user-center .uc-content-body .mf-pc-rank-summary,
html.mf-reduced-motion body.user-center .uc-content-body .mf-pc-title-strip,
html.mf-reduced-motion body.user-center .uc-content-body .mf-pc-heatmap,
html.mf-reduced-motion body.user-center .uc-content-body .mf-pc-recent-points,
html.mf-reduced-motion body.user-center .uc-content-body .mf-checkin-rank-caption,
html.mf-reduced-motion body.user-center .uc-content-body .mf-mobile-checkin-section,
html.mf-reduced-motion body.user-center .uc-content-body .mf-pc-title-progress > span,
html.mf-reduced-motion body.user-center .uc-content-body .mf-mobile-title-track > span,
html.mf-reduced-motion body.user-center .uc-content-body .mf-title-badge::after,
html.mf-reduced-motion body.user-center .uc-content-body .mf-heatmap-day.is-today {
  animation:none !important;
}
@media (prefers-reduced-motion:reduce) {
  body.user-center .uc-content-body .mf-pc-rank-summary,
  body.user-center .uc-content-body .mf-pc-title-strip,
  body.user-center .uc-content-body .mf-pc-heatmap,
  body.user-center .uc-content-body .mf-pc-recent-points,
  body.user-center .uc-content-body .mf-checkin-rank-caption,
  body.user-center .uc-content-body .mf-mobile-checkin-section,
  body.user-center .uc-content-body .mf-pc-title-progress > span,
  body.user-center .uc-content-body .mf-mobile-title-track > span,
  body.user-center .uc-content-body .mf-title-badge::after,
  body.user-center .uc-content-body .mf-heatmap-day.is-today {
    animation:none !important;
  }
}


/* =========================================================
   v1.6.6.7.5.1 — Today marker alignment fix
   Blue means TODAY only; it no longer replaces the check-in state.
   ========================================================= */

/* Desktop:
   - checked today stays orange
   - unchecked today stays neutral
   - blue is only an outer ring */
@media (min-width:768px) {
  body.user-center .uc-content-body .mf-heatmap-day.is-today {
    position:relative !important;
    outline:2px solid rgba(74,132,235,.82) !important;
    outline-offset:2px !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.90),
      0 5px 12px rgba(55,98,172,.10) !important;
    animation:none !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today:not(.is-checked) {
    color:#6f86a8 !important;
    border-color:rgba(154,178,215,.26) !important;
    background:linear-gradient(180deg,#f4f7fc,#e9eff8) !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today.is-checked {
    color:#fff !important;
    border-color:rgba(255,169,45,.34) !important;
    background:linear-gradient(180deg,#ffb52e,#ff8a15) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.92),
      0 7px 16px rgba(241,138,20,.18) !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today em,
  body.user-center .uc-content-body .mf-heatmap-day.is-today.is-checked em {
    color:inherit !important;
    text-shadow:none !important;
  }
}

/* Mobile uses the exact same semantic:
   orange = checked, blue ring = today. */
@media (max-width:767.98px) {
  body.user-center .uc-content-body .mf-mobile-heat-day.is-today {
    position:relative !important;
    outline:2px solid rgba(74,132,235,.82) !important;
    outline-offset:2px !important;
    animation:none !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-today:not(.is-checked) {
    color:#7187a7 !important;
    border-color:rgba(154,178,215,.25) !important;
    background:linear-gradient(180deg,#f3f7fc,#e8eef7) !important;
    box-shadow:0 4px 10px rgba(55,98,172,.08) !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-today.is-checked {
    color:#fff !important;
    border-color:rgba(255,169,45,.34) !important;
    background:linear-gradient(180deg,#ffb52e,#ff8a15) !important;
    box-shadow:0 6px 14px rgba(241,138,20,.18) !important;
  }
}

/* Dark mode keeps the ring readable without changing the orange checked fill. */
html.io-black-mode body.user-center .uc-content-body .mf-heatmap-day.is-today,
html.io-black-mode body.user-center .uc-content-body .mf-mobile-heat-day.is-today {
  outline-color:rgba(104,157,255,.88) !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-heatmap-day.is-today:not(.is-checked),
html.io-black-mode body.user-center .uc-content-body .mf-mobile-heat-day.is-today:not(.is-checked) {
  color:#a8b8d0 !important;
  border-color:rgba(145,169,207,.12) !important;
  background:rgba(55,70,96,.52) !important;
}

html.io-black-mode body.user-center .uc-content-body .mf-heatmap-day.is-today.is-checked,
html.io-black-mode body.user-center .uc-content-body .mf-mobile-heat-day.is-today.is-checked {
  color:#fff !important;
  background:linear-gradient(180deg,#e99b20,#d8750f) !important;
  border-color:rgba(255,185,75,.20) !important;
}


/* =========================================================
   v1.6.6.7.5.2 — Android mobile TODAY marker hard fix
   Do not rely on outline: use visible blue inner+outer rings.
   ========================================================= */
@media (max-width:767.98px) {
  body.user-center .uc-content-body .mf-mobile-heat-day.is-today {
    position:relative !important;
    outline:0 !important;
    border:2px solid #4f8df2 !important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,.96),
      0 0 0 4px rgba(79,141,242,.72),
      0 6px 14px rgba(53,101,185,.12) !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-today::after {
    content:"今天";
    position:absolute;
    right:4px;
    top:3px;
    z-index:3;
    padding:1px 4px;
    border-radius:999px;
    background:#4f8df2;
    color:#fff;
    font-size:8px;
    line-height:1.25;
    font-weight:800;
    pointer-events:none;
    box-shadow:0 2px 5px rgba(55,99,180,.18);
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-today:not(.is-checked) {
    color:#7187a7 !important;
    background:linear-gradient(180deg,#f3f7fc,#e8eef7) !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-today.is-checked {
    color:#fff !important;
    background:linear-gradient(180deg,#ffb52e,#ff8a15) !important;
    border-color:#4f8df2 !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-heat-day.is-today {
    border-color:#72a4ff !important;
    box-shadow:
      0 0 0 2px rgba(27,35,49,.96),
      0 0 0 4px rgba(114,164,255,.74),
      0 6px 14px rgba(0,0,0,.18) !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-heat-day.is-today::after {
    background:#72a4ff;
    color:#102142;
  }
}


/* =========================================================
   v1.6.6.7.6 — final check-in center polish
   ========================================================= */

/* Small sidebar points card: "积分  签到" language on both PC/mobile. */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .mf-points-checkin-label {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:20px;
  margin-top:4px;
  padding:0 8px;
  border-radius:999px;
  color:#e36e0d;
  background:rgba(255,153,35,.12);
  border:1px solid rgba(245,150,32,.18);
  font-size:10px;
  line-height:1;
  font-weight:750;
  letter-spacing:.02em;
}

html.io-black-mode body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .mf-points-checkin-label {
  color:#ffc46e;
  background:rgba(255,163,45,.11);
  border-color:rgba(255,183,76,.16);
}

/* Heatmap TODAY: number first, "今天" directly underneath.
   No corner badge, no overlap. */
body.user-center .uc-content-body .mf-heat-today-text {
  display:block !important;
  margin-top:1px;
  color:#4f8df2;
  font-size:8px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

@media (min-width:768px) {
  body.user-center .uc-content-body .mf-heatmap-day {
    flex-direction:column !important;
    gap:1px !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today {
    padding-top:3px !important;
    padding-bottom:3px !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today.is-checked .mf-heat-today-text {
    color:#2f6fd8 !important;
    text-shadow:none !important;
  }
}

@media (max-width:767.98px) {
  body.user-center .uc-content-body .mf-mobile-heat-day {
    flex-direction:column !important;
    gap:2px !important;
    padding:4px 2px !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day::after {
    display:none !important;
    content:none !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-today {
    min-height:46px !important;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-today.is-checked .mf-heat-today-text {
    color:#1f64cf !important;
    background:rgba(255,255,255,.92);
    border-radius:999px;
    padding:2px 5px;
  }

  body.user-center .uc-content-body .mf-mobile-heat-day.is-today:not(.is-checked) .mf-heat-today-text {
    color:#3976d2 !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-mobile-heat-day.is-today.is-checked .mf-heat-today-text {
    color:#183a72 !important;
    background:rgba(225,237,255,.92);
  }
}

/* Latest-points section: tighter and cleaner mobile rows. */
@media (max-width:767.98px) {
  body.user-center .uc-content-body .mf-mobile-point-row {
    min-height:44px !important;
    padding:7px 0 !important;
  }

  body.user-center .uc-content-body .mf-mobile-point-label {
    font-size:12px !important;
    line-height:1.25 !important;
  }

  body.user-center .uc-content-body .mf-mobile-point-time {
    margin-top:2px !important;
    font-size:9px !important;
  }

  body.user-center .uc-content-body .mf-mobile-point-value {
    min-width:60px;
    text-align:right;
    font-size:15px !important;
  }
}

/* Mobile ranking: top 3 medal treatment, compact rows, current user clearer. */
@media (max-width:767.98px) {
  body.user-center .uc-content-body .mf-mobile-rank-row {
    min-height:56px !important;
    padding:7px 9px !important;
  }

  body.user-center .uc-content-body .mf-mobile-rank-row:nth-child(1) .mf-mobile-rank-no {
    color:#8e5700 !important;
    background:linear-gradient(180deg,#ffe7a9,#ffc95f) !important;
    box-shadow:0 4px 10px rgba(216,145,25,.14);
  }

  body.user-center .uc-content-body .mf-mobile-rank-row:nth-child(2) .mf-mobile-rank-no {
    color:#5b6778 !important;
    background:linear-gradient(180deg,#f0f4f9,#d6dfeb) !important;
    box-shadow:0 4px 10px rgba(107,126,154,.10);
  }

  body.user-center .uc-content-body .mf-mobile-rank-row:nth-child(3) .mf-mobile-rank-no {
    color:#8a4d22 !important;
    background:linear-gradient(180deg,#ffe0c7,#f3b487) !important;
    box-shadow:0 4px 10px rgba(173,97,43,.10);
  }

  body.user-center .uc-content-body .mf-mobile-rank-row.is-me {
    border-color:rgba(242,164,37,.30) !important;
    box-shadow:inset 0 0 0 1px rgba(255,185,67,.06),0 5px 14px rgba(221,137,20,.07) !important;
  }
}

/* Desktop top 3 ranking also gets restrained gold/silver/bronze badges. */
@media (min-width:768px) {
  body.user-center .uc-content-body .mf-checkin-rank-row:nth-child(1) .mf-checkin-rank-no {
    background:linear-gradient(180deg,#ffe8a8,#ffc95f) !important;
    color:#8f5700 !important;
  }

  body.user-center .uc-content-body .mf-checkin-rank-row:nth-child(2) .mf-checkin-rank-no {
    background:linear-gradient(180deg,#f1f5fa,#d6e0ec) !important;
    color:#5b6778 !important;
  }

  body.user-center .uc-content-body .mf-checkin-rank-row:nth-child(3) .mf-checkin-rank-no {
    background:linear-gradient(180deg,#ffe1c9,#f3b588) !important;
    color:#8a4d22 !important;
  }
}

/* Headline progression: slower upgrade cadence, slightly calmer progress look. */
body.user-center .uc-content-body .mf-pc-title-progress,
body.user-center .uc-content-body .mf-mobile-title-track {
  background:rgba(166,185,214,.18) !important;
}

body.user-center .uc-content-body .mf-pc-title-progress > span,
body.user-center .uc-content-body .mf-mobile-title-track > span {
  background:linear-gradient(90deg,#f5b13c,#ff861a) !important;
  box-shadow:0 0 10px rgba(244,160,34,.15);
}

/* Keep final animations gentle. */
@media (max-width:767.98px) {
  body.user-center .uc-content-body .mf-mobile-checkin-section {
    transition:transform .18s ease, box-shadow .20s ease, border-color .20s ease;
  }
}


/* =========================================================
   v1.6.6.7.6.1 — final micro polish
   ========================================================= */

/* Points + check-in must be a true horizontal line, using the empty space. */
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .mf-points-meta-row {
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  min-height:22px !important;
  margin-top:1px !important;
  margin-right:76px !important;
  white-space:nowrap !important;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .mf-points-meta-row > .text-muted,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .mf-points-meta-row > .text-xs,
body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .mf-points-meta-row > .text-sm {
  display:inline-flex !important;
  width:auto !important;
  margin:0 !important;
  flex:none !important;
}

body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .mf-points-checkin-label {
  margin:0 !important;
  min-height:20px !important;
  padding:0 8px !important;
  flex:none !important;
}

@media (max-width:767.98px) {
  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .mf-points-meta-row {
    gap:8px !important;
    margin-right:72px !important;
  }

  body.user-center.logged-in .user-menu > .uc-assets-menu.mf-single-asset > .uc-assets-item .mf-points-checkin-label {
    min-height:22px !important;
    padding:0 10px !important;
    font-size:11px !important;
  }
}

/* Explicit medal chips: impossible to miss. */
body.user-center .uc-content-body .mf-rank-medal {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:28px !important;
  border-radius:9px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 4px 10px rgba(36,51,77,.08) !important;
}

body.user-center .uc-content-body .mf-rank-medal.is-gold {
  color:#8d5600 !important;
  border:1px solid rgba(226,153,33,.32) !important;
  background:linear-gradient(145deg,#fff0b9,#ffc84f) !important;
}

body.user-center .uc-content-body .mf-rank-medal.is-silver {
  color:#526174 !important;
  border:1px solid rgba(143,158,180,.26) !important;
  background:linear-gradient(145deg,#f7f9fc,#ccd7e5) !important;
}

body.user-center .uc-content-body .mf-rank-medal.is-bronze {
  color:#844718 !important;
  border:1px solid rgba(192,113,59,.26) !important;
  background:linear-gradient(145deg,#ffe3ca,#efa96f) !important;
}

/* Outer number holders are neutral when they contain an explicit medal chip. */
body.user-center .uc-content-body .mf-checkin-rank-no:has(.mf-rank-medal),
body.user-center .uc-content-body .mf-mobile-rank-no:has(.mf-rank-medal) {
  width:30px !important;
  height:30px !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Desktop TODAY matches mobile exactly:
   orange checked cell + blue ring + 今天 underneath the number. */
@media (min-width:768px) {
  body.user-center .uc-content-body .mf-heatmap-day.is-today {
    min-height:42px !important;
    height:42px !important;
    padding:4px 2px !important;
    flex-direction:column !important;
    gap:2px !important;
    outline:0 !important;
    border:2px solid #4f8df2 !important;
    box-shadow:
      0 0 0 2px rgba(255,255,255,.96),
      0 0 0 4px rgba(79,141,242,.72),
      0 6px 14px rgba(53,101,185,.12) !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today.is-checked {
    color:#fff !important;
    background:linear-gradient(180deg,#ffb52e,#ff8a15) !important;
    border-color:#4f8df2 !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today:not(.is-checked) {
    color:#7187a7 !important;
    background:linear-gradient(180deg,#f3f7fc,#e8eef7) !important;
  }

  body.user-center .uc-content-body .mf-heatmap-day.is-today .mf-heat-today-text {
    color:#1f64cf !important;
    background:rgba(255,255,255,.92) !important;
    border-radius:999px !important;
    padding:2px 5px !important;
    font-size:8px !important;
    line-height:1 !important;
    margin:0 !important;
  }

  html.io-black-mode body.user-center .uc-content-body .mf-heatmap-day.is-today {
    border-color:#72a4ff !important;
    box-shadow:
      0 0 0 2px rgba(27,35,49,.96),
      0 0 0 4px rgba(114,164,255,.74),
      0 6px 14px rgba(0,0,0,.18) !important;
  }
}


/* =========================================================
   v1.6.7.1 — OneNav native system alerts always on top
   Parent OneNav uses #alert_placeholder.alert-system for password,
   security, withdrawal-account, profile, upload, payment, contribution,
   bookmark and other success/error notices.
   Parent z-index:100015 is below our iOS26 modal layers (~2147483000).
   Keep the native showAlert implementation; only normalize its layer.
   ========================================================= */
html body > #alert_placeholder.alert-system,
html body #alert_placeholder.alert-system {
  position:fixed !important;
  z-index:2147483647 !important;
  isolation:isolate !important;
  pointer-events:none !important;
  transform:translateZ(0) !important;
}

/* Keep every actual toast in the same top stacking context.
   Alerts are informational, so they should never be clipped or sit under
   Bootstrap backdrops / user-center drawers / iOS26 glass overlays. */
html body #alert_placeholder.alert-system > .alert-body {
  position:relative !important;
  z-index:1 !important;
  pointer-events:none !important;
}

/* Preserve OneNav's right-bottom placement but keep a small safe margin so
   the toast remains fully visible on desktop and mobile safe-area screens. */
@media (min-width:768px) {
  html body #alert_placeholder.alert-system {
    right:12px !important;
    bottom:12px !important;
  }
}

@media (max-width:767.98px) {
  html body #alert_placeholder.alert-system {
    right:8px !important;
    bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 12px)) !important;
    max-width:calc(100vw - 16px) !important;
  }

  html body #alert_placeholder.alert-system > .alert-body {
    max-width:min(360px,calc(100vw - 16px)) !important;
  }
}


/* =========================================================
   v1.6.8 — My Footprint Cloud V1
   ========================================================= */
body.user-center .footprint-head {
  flex-wrap:wrap;
  row-gap:8px;
}

body.user-center .mf-footprint-cloud-state {
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}

body.user-center .mf-footprint-cloud-state.is-syncing {
  color:#3277cf !important;
  background:rgba(67,139,234,.10) !important;
}

body.user-center .mf-footprint-cloud-state.is-error {
  color:#b36b12 !important;
  background:rgba(237,157,39,.12) !important;
}

body.user-center .mf-footprint-cloud-state.is-off {
  color:#7b8796 !important;
  background:rgba(131,145,164,.10) !important;
}

body.user-center .mf-footprint-cloud-toggle {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  margin-left:8px;
  padding:0 9px;
  border:1px solid rgba(123,142,167,.18);
  border-radius:999px;
  background:rgba(122,142,168,.08);
  color:#7c8999;
  font-size:10px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition:transform .16s ease,background .2s ease,color .2s ease,border-color .2s ease;
}

body.user-center .mf-footprint-cloud-toggle::before {
  content:"";
  width:6px;
  height:6px;
  margin-right:5px;
  border-radius:50%;
  background:#9ba7b5;
  box-shadow:0 0 0 3px rgba(155,167,181,.10);
}

body.user-center .mf-footprint-cloud-toggle.is-on {
  color:#2f76d0;
  border-color:rgba(68,135,225,.20);
  background:rgba(68,135,225,.09);
}

body.user-center .mf-footprint-cloud-toggle.is-on::before {
  background:#3e8af2;
  box-shadow:0 0 0 3px rgba(62,138,242,.13);
}

@media (hover:hover) {
  body.user-center .mf-footprint-cloud-toggle:hover {
    transform:translateY(-1px);
  }
}

html.io-black-mode body.user-center .mf-footprint-cloud-toggle {
  color:#aab5c4;
  border-color:rgba(193,209,230,.11);
  background:rgba(160,181,210,.07);
}

html.io-black-mode body.user-center .mf-footprint-cloud-toggle.is-on {
  color:#8ab8ff;
  border-color:rgba(107,164,248,.18);
  background:rgba(75,137,231,.11);
}

@media (max-width:767.98px) {
  body.user-center .footprint-head .nav-title {
    flex:0 0 auto;
  }

  body.user-center .footprint-head .tips-box {
    margin-left:6px !important;
  }

  body.user-center .mf-footprint-cloud-toggle {
    order:4;
    margin-left:0;
    min-height:23px;
    padding:0 8px;
    font-size:9px;
  }

  body.user-center .footprint-clear-all {
    margin-left:auto !important;
  }
}


/* =========================================================
   v1.6.9 — Footprint Insights / Frequent Visits / Single Delete
   ========================================================= */
body.user-center .mf-footprint-insights {
  margin:0 0 14px;
  padding:12px;
  border:1px solid rgba(119,137,165,.14);
  border-radius:16px;
  background:rgba(255,255,255,.48);
  box-shadow:0 8px 22px rgba(43,61,89,.045);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

body.user-center .mf-footprint-insights-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

body.user-center .mf-footprint-view-switch,
body.user-center .mf-footprint-range-switch {
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border-radius:12px;
  background:rgba(115,134,161,.075);
}

body.user-center .mf-footprint-view-btn,
body.user-center .mf-footprint-range-btn {
  appearance:none;
  -webkit-appearance:none;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#7c899b;
  min-height:27px;
  padding:0 10px;
  font-size:11px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .15s ease;
}

body.user-center .mf-footprint-view-btn.is-active,
body.user-center .mf-footprint-range-btn.is-active {
  color:#2f72ca;
  background:rgba(255,255,255,.90);
  box-shadow:0 3px 10px rgba(44,67,101,.08);
}

body.user-center .mf-footprint-insights-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  min-height:44px;
  transition:opacity .16s ease;
}

body.user-center .mf-footprint-insights.is-loading .mf-footprint-insights-list {
  opacity:.58;
}

body.user-center .mf-footprint-insight-item {
  position:relative;
  display:grid;
  grid-template-columns:25px minmax(0,1fr) 24px;
  align-items:center;
  gap:8px;
  min-height:54px;
  padding:8px 8px 8px 9px;
  overflow:hidden;
  border:1px solid rgba(129,147,174,.11);
  border-radius:13px;
  background:rgba(255,255,255,.48);
  transition:transform .16s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

body.user-center .mf-footprint-insight-rank {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:8px;
  color:#7d8a9b;
  background:rgba(121,141,170,.09);
  font-size:10px;
  font-weight:800;
}

body.user-center .mf-footprint-insight-main {
  min-width:0;
}

body.user-center .mf-footprint-insight-title {
  display:block;
  overflow:hidden;
  color:inherit;
  font-size:12px;
  line-height:1.35;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.user-center .mf-footprint-insight-meta {
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  margin-top:4px;
  color:#8a96a5;
  font-size:9px;
  line-height:1;
  white-space:nowrap;
}

body.user-center .mf-footprint-type {
  display:inline-flex;
  align-items:center;
  min-height:17px;
  padding:0 5px;
  border-radius:6px;
  color:#4d7fbd;
  background:rgba(75,133,205,.08);
  font-weight:700;
}

body.user-center .mf-footprint-count {
  color:#db7d1e;
  font-weight:750;
}

body.user-center .mf-footprint-delete-one {
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  padding:0;
  border:0;
  border-radius:8px;
  color:#a0a9b5;
  background:transparent;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,transform .14s ease;
}

body.user-center .mf-footprint-delete-one:disabled {
  opacity:.45;
  cursor:wait;
}

body.user-center .mf-footprint-insights-empty {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  border:1px dashed rgba(128,146,172,.14);
  border-radius:12px;
  color:#96a1af;
  font-size:11px;
}

@media (hover:hover) {
  body.user-center .mf-footprint-insight-item:hover {
    transform:translateY(-1px);
    border-color:rgba(89,137,205,.18);
    background:rgba(255,255,255,.68);
    box-shadow:0 6px 16px rgba(45,67,97,.055);
  }

  body.user-center .mf-footprint-delete-one:hover {
    color:#d75f55;
    background:rgba(222,84,75,.08);
  }

  body.user-center .mf-footprint-view-btn:hover,
  body.user-center .mf-footprint-range-btn:hover {
    transform:translateY(-1px);
  }
}

html.io-black-mode body.user-center .mf-footprint-insights {
  border-color:rgba(190,207,232,.09);
  background:rgba(28,35,47,.58);
  box-shadow:0 10px 24px rgba(0,0,0,.10);
}

html.io-black-mode body.user-center .mf-footprint-view-switch,
html.io-black-mode body.user-center .mf-footprint-range-switch {
  background:rgba(169,188,214,.065);
}

html.io-black-mode body.user-center .mf-footprint-view-btn,
html.io-black-mode body.user-center .mf-footprint-range-btn {
  color:#9aa8ba;
}

html.io-black-mode body.user-center .mf-footprint-view-btn.is-active,
html.io-black-mode body.user-center .mf-footprint-range-btn.is-active {
  color:#8bbaff;
  background:rgba(89,118,158,.18);
  box-shadow:none;
}

html.io-black-mode body.user-center .mf-footprint-insight-item {
  border-color:rgba(190,207,232,.075);
  background:rgba(43,52,68,.48);
}

html.io-black-mode body.user-center .mf-footprint-insight-title {
  color:#e7edf6;
}

html.io-black-mode body.user-center .mf-footprint-insight-meta {
  color:#96a4b6;
}

html.io-black-mode body.user-center .mf-footprint-type {
  color:#8bb9f4;
  background:rgba(83,140,213,.12);
}

html.io-black-mode body.user-center .mf-footprint-count {
  color:#f1ad5c;
}

html.io-black-mode body.user-center .mf-footprint-insights-empty {
  border-color:rgba(187,204,228,.09);
  color:#8795a8;
}

@media (max-width:767.98px) {
  body.user-center .mf-footprint-insights {
    margin-bottom:12px;
    padding:10px;
    border-radius:14px;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  body.user-center .mf-footprint-insights-top {
    align-items:stretch;
    flex-direction:column;
    gap:7px;
  }

  body.user-center .mf-footprint-view-switch,
  body.user-center .mf-footprint-range-switch {
    width:100%;
  }

  body.user-center .mf-footprint-view-btn,
  body.user-center .mf-footprint-range-btn {
    flex:1 1 0;
    min-height:30px;
    padding:0 7px;
  }

  body.user-center .mf-footprint-insights-list {
    grid-template-columns:1fr;
    gap:6px;
  }

  body.user-center .mf-footprint-insight-item {
    min-height:52px;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.user-center .mf-footprint-insight-item,
  body.user-center .mf-footprint-delete-one,
  body.user-center .mf-footprint-view-btn,
  body.user-center .mf-footprint-range-btn {
    transition:none !important;
  }
}


/* =========================================================
   v1.7.5 — mobile bottom “投稿” popup readability
   Keep OneNav interaction/layout; only improve contrast and glass clarity.
   ========================================================= */
@media (max-width:767.98px) {
  body .footer-tabbar .new-posts-btn .sub-menu {
    padding:10px !important;
    border:1px solid rgba(255,255,255,.90) !important;
    border-radius:20px !important;
    background:linear-gradient(145deg,rgba(250,253,255,.94),rgba(236,244,255,.88)) !important;
    box-shadow:0 18px 42px rgba(29,53,88,.20), inset 0 1px 0 rgba(255,255,255,.98) !important;
    -webkit-backdrop-filter:blur(22px) saturate(165%) !important;
    backdrop-filter:blur(22px) saturate(165%) !important;
  }

  body .footer-tabbar .new-posts-btn .sub-menu .btn-new-posts.menu-item {
    min-height:84px !important;
    margin:0 4px !important;
    padding:10px 8px !important;
    border:1px solid rgba(114,143,184,.16) !important;
    border-radius:16px !important;
    background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(244,249,255,.82)) !important;
    color:#2f3e52 !important;
    box-shadow:0 8px 18px rgba(49,73,108,.08), inset 0 1px 0 rgba(255,255,255,.98) !important;
    font-size:12px !important;
    font-weight:800 !important;
    text-shadow:none !important;
  }

  body .footer-tabbar .new-posts-btn .sub-menu .btn-new-posts.menu-item > span:last-child {
    color:#2f3e52 !important;
    opacity:1 !important;
    font-size:12px !important;
    font-weight:800 !important;
  }

  body .footer-tabbar .new-posts-btn .sub-menu .btn-new-posts .tips-icon {
    width:48px !important;
    height:48px !important;
    line-height:48px !important;
    border:1px solid rgba(98,139,199,.16) !important;
    background:rgba(241,247,255,.98) !important;
    box-shadow:0 6px 14px rgba(55,88,137,.10), inset 0 1px 0 rgba(255,255,255,.98) !important;
    opacity:1 !important;
  }

  body .footer-tabbar .new-posts-btn .sub-menu .btn-new-posts .tips-icon i {
    opacity:1 !important;
    filter:none !important;
    text-shadow:none !important;
  }

  html.io-black-mode body .footer-tabbar .new-posts-btn .sub-menu {
    border-color:rgba(185,207,238,.16) !important;
    background:linear-gradient(145deg,rgba(39,49,65,.96),rgba(27,35,48,.94)) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  html.io-black-mode body .footer-tabbar .new-posts-btn .sub-menu .btn-new-posts.menu-item {
    border-color:rgba(186,207,236,.12) !important;
    background:linear-gradient(145deg,rgba(54,66,85,.92),rgba(38,48,64,.88)) !important;
    color:#edf3fb !important;
    box-shadow:0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  html.io-black-mode body .footer-tabbar .new-posts-btn .sub-menu .btn-new-posts.menu-item > span:last-child {
    color:#edf3fb !important;
  }

  html.io-black-mode body .footer-tabbar .new-posts-btn .sub-menu .btn-new-posts .tips-icon {
    border-color:rgba(175,202,241,.12) !important;
    background:rgba(70,86,110,.82) !important;
  }
}

/* v1.7.5 — separate level leaderboard card. */
body.user-center .mf-level-rank-box {
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(129,149,178,.13);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(246,250,255,.52));
  box-shadow:0 10px 26px rgba(47,68,101,.055), inset 0 1px 0 rgba(255,255,255,.88);
}
body.user-center .mf-level-rank-caption { margin-top:0 !important; }
body.user-center .mf-mini-title-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  max-width:100%;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(247,183,69,.10);
  color:#c17716;
  border:1px solid rgba(230,164,56,.14);
  font-size:9px;
  line-height:1.2;
  font-weight:750;
  vertical-align:middle;
}
body.user-center .mf-mini-title-badge i { font-style:normal; }
body.user-center .mf-level-rank-side strong { color:#d98920; }
html.io-black-mode body.user-center .mf-level-rank-box {
  border-color:rgba(189,207,234,.08);
  background:linear-gradient(145deg,rgba(48,58,75,.56),rgba(34,42,56,.44));
  box-shadow:0 10px 26px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.025);
}
html.io-black-mode body.user-center .mf-mini-title-badge {
  color:#f0b869;
  background:rgba(194,127,38,.12);
  border-color:rgba(234,172,84,.13);
}
@media (max-width:767.98px) {
  body.user-center .mf-mobile-checkin-section.mf-level-rank-box {
    margin-top:10px;
    padding:10px !important;
    border-radius:15px;
  }
}


/* =========================================================
   v1.7.6 — mobile 投稿 popup: high-contrast light mode
   ========================================================= */
@media (max-width:767.98px) {
  body .footer-tabbar .new-posts-btn > .sub-menu {
    padding:11px !important;
    gap:10px !important;
    border:1px solid rgba(255,255,255,.96) !important;
    border-radius:22px !important;
    background:linear-gradient(145deg,rgba(252,254,255,.97),rgba(235,243,253,.94)) !important;
    box-shadow:0 18px 44px rgba(38,62,97,.22),inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(113,147,194,.10) !important;
    -webkit-backdrop-filter:blur(24px) saturate(170%) !important;
    backdrop-filter:blur(24px) saturate(170%) !important;
  }

  body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item {
    min-height:96px !important;
    margin:0 !important;
    padding:12px 10px !important;
    border-radius:18px !important;
    color:#243247 !important;
    opacity:1 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 8px 20px rgba(46,70,105,.10) !important;
  }

  body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item:nth-child(1) {
    border:1px solid rgba(32,181,123,.28) !important;
    background:linear-gradient(145deg,rgba(235,255,247,.98),rgba(215,247,235,.88)) !important;
  }

  body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item:nth-child(2) {
    border:1px solid rgba(72,145,232,.28) !important;
    background:linear-gradient(145deg,rgba(239,248,255,.99),rgba(218,237,255,.90)) !important;
  }

  body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item > span:last-child {
    color:#26374e !important;
    opacity:1 !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.82) !important;
  }

  body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item .tips-icon {
    width:52px !important;
    height:52px !important;
    line-height:52px !important;
    border-radius:16px !important;
    opacity:1 !important;
    filter:none !important;
  }

  body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item:nth-child(1) .tips-icon {
    --this-color:#0d9e69 !important;
    --this-bg:rgba(255,255,255,.78) !important;
    --this-border:rgba(24,173,113,.24) !important;
    color:#0d9e69 !important;
    background:rgba(255,255,255,.78) !important;
    border:1px solid rgba(24,173,113,.24) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 6px 16px rgba(26,151,102,.14) !important;
  }

  body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item:nth-child(2) .tips-icon {
    --this-color:#287dcc !important;
    --this-bg:rgba(255,255,255,.80) !important;
    --this-border:rgba(61,135,218,.24) !important;
    color:#287dcc !important;
    background:rgba(255,255,255,.80) !important;
    border:1px solid rgba(61,135,218,.24) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 6px 16px rgba(47,119,203,.14) !important;
  }

  body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item .tips-icon i,
  body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item .iconfont {
    color:inherit !important;
    opacity:1 !important;
    filter:none !important;
    text-shadow:none !important;
  }

  html.io-black-mode body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item:nth-child(1),
  html.io-black-mode body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item:nth-child(2) {
    border-color:rgba(188,207,235,.14) !important;
    background:linear-gradient(145deg,rgba(55,67,86,.94),rgba(37,47,62,.90)) !important;
  }

  html.io-black-mode body .footer-tabbar .new-posts-btn > .sub-menu > a.btn-new-posts.menu-item > span:last-child {
    color:#eef4fb !important;
    text-shadow:none !important;
  }
}


/* =========================================================
   v1.7.6.5 — ranking final polish
   ========================================================= */
.mf-level-rank-polished .mf-level-rank-metric{
  min-width:82px;
  display:flex !important;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:1px;
  text-align:right;
}
.mf-level-rank-polished .mf-level-days{
  color:#18a35b !important;
  font-size:14px !important;
  line-height:1.1;
  font-weight:850 !important;
}
.mf-level-rank-polished .mf-level-days-label{
  color:#8b98aa !important;
  font-size:9px !important;
  line-height:1.2;
}
.mf-level-rank-polished .mf-level-points{
  color:#a7b1bf !important;
  font-size:8px !important;
  line-height:1.2;
  font-weight:600 !important;
}
.mf-level-rank-polished .mf-level-rank-badge.is-number{
  min-width:30px !important;
  width:30px !important;
  height:30px !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  border-radius:10px !important;
  background:rgba(236,241,248,.88) !important;
  border:1px solid rgba(132,151,177,.15) !important;
  color:#68788e !important;
  font-weight:800 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

@media (max-width:767.98px){
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="4"],
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="5"],
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="6"],
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="7"],
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="8"],
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="9"],
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="10"]{
    min-height:58px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="4"] .mf-level-rank-badge,
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="5"] .mf-level-rank-badge,
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="6"] .mf-level-rank-badge,
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="7"] .mf-level-rank-badge,
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="8"] .mf-level-rank-badge,
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="9"] .mf-level-rank-badge,
  .mf-level-rank-polished .mf-level-rank-row[data-rank-index="10"] .mf-level-rank-badge{
    transform:scale(.92);
  }
}

html.io-black-mode .mf-level-rank-polished .mf-level-days{
  color:#61d697 !important;
}
html.io-black-mode .mf-level-rank-polished .mf-level-days-label{
  color:#93a1b5 !important;
}
html.io-black-mode .mf-level-rank-polished .mf-level-points{
  color:#76869b !important;
}
html.io-black-mode .mf-level-rank-polished .mf-level-rank-badge.is-number{
  background:rgba(41,51,66,.82) !important;
  border-color:rgba(171,194,223,.10) !important;
  color:#cbd6e4 !important;
}


/* =========================================================
   v1.7.6.6 — level ranking direct-render polish
   ========================================================= */
.mf-level-rank-side {
  min-width:84px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  gap:1px !important;
  text-align:right !important;
}
.mf-level-rank-side strong {
  color:#169a55 !important;
  font-size:13px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
}
.mf-level-rank-side span {
  color:#8b98aa !important;
  font-size:9px !important;
  line-height:1.2 !important;
}
.mf-level-rank-side small {
  display:block !important;
  margin-top:2px !important;
  color:#a3adba !important;
  font-size:8px !important;
  line-height:1.15 !important;
  font-weight:600 !important;
}

/* Mobile: 4th-10th rows are slightly more compact.
   Top 3 retain the current larger emphasis. */
@media (max-width:767.98px) {
  .mf-level-rank-box .mf-mobile-rank-list .mf-level-rank-row:nth-child(n+4) {
    min-height:58px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }
  .mf-level-rank-box .mf-mobile-rank-list .mf-level-rank-row:nth-child(n+4) .mf-mobile-rank-no {
    transform:scale(.92);
    transform-origin:center;
  }
  .mf-level-rank-box .mf-mobile-rank-list .mf-level-rank-row:nth-child(n+4) .mf-mobile-rank-name {
    font-size:12px !important;
  }
  .mf-level-rank-box .mf-mobile-rank-list .mf-level-rank-row:nth-child(n+4) .mf-mobile-rank-meta {
    font-size:9px !important;
  }
  .mf-level-rank-side {
    min-width:72px !important;
  }
}

/* Dark mode */
html.io-black-mode .mf-level-rank-side strong {
  color:#63d99a !important;
}
html.io-black-mode .mf-level-rank-side span {
  color:#92a1b5 !important;
}
html.io-black-mode .mf-level-rank-side small {
  color:#77879b !important;
}


/* =========================================================
   v1.7.7 — 今日签到榜 10/页 + 自定义图片表情
   ========================================================= */
.mf-checkin-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:12px 0 4px;
}
.mf-checkin-pager span{
  min-width:56px;
  text-align:center;
  color:#7f8b9b;
  font-size:11px;
  font-weight:700;
}
.mf-checkin-page-btn{
  width:32px;
  height:32px;
  border:1px solid rgba(125,148,180,.16);
  border-radius:11px;
  background:rgba(255,255,255,.72);
  color:#546579;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 12px rgba(45,68,101,.06);
}
.mf-checkin-page-btn:disabled{opacity:.35;cursor:default}

.mf-checkin-rank-emoji{
  display:inline-block!important;
  width:24px!important;
  height:24px!important;
  margin-left:7px!important;
  vertical-align:middle!important;
  object-fit:contain!important;
  border-radius:7px!important;
}

.mf-checkin-emoji-action{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}
.mf-checkin-emoji-action.is-pc{
  margin-top:-4px;
  margin-bottom:8px;
}
.mf-checkin-emoji-change{
  min-height:30px;
  padding:0 12px;
  border:1px solid rgba(101,151,218,.18);
  border-radius:999px;
  background:rgba(239,247,255,.78);
  color:#4f7fb9;
  font-size:10px;
  font-weight:750;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

.mf-checkin-emoji-modal{
  position:fixed;
  inset:0;
  z-index:2147483646;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(35,46,62,.18);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.mf-checkin-emoji-card{
  width:min(430px,94vw);
  max-height:min(620px,82vh);
  overflow:auto;
  border:1px solid rgba(255,255,255,.72);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(239,246,255,.82));
  box-shadow:0 24px 70px rgba(35,56,86,.20),inset 0 1px 0 rgba(255,255,255,1);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  backdrop-filter:blur(24px) saturate(160%);
}
.mf-checkin-emoji-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 10px;
}
.mf-checkin-emoji-head strong{
  display:block;
  color:#2d3b50;
  font-size:16px;
}
.mf-checkin-emoji-head span{
  display:block;
  margin-top:3px;
  color:#8996a7;
  font-size:10px;
}
.mf-checkin-emoji-close{
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(231,237,245,.86);color:#65758a;font-size:20px;
}
.mf-checkin-emoji-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  padding:8px 16px 14px;
}
.mf-checkin-emoji-item{
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  overflow:hidden;
  border:1px solid rgba(131,154,185,.13);
  border-radius:16px;
  background:rgba(255,255,255,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96);
}
.mf-checkin-emoji-item img{
  width:100%;height:100%;object-fit:contain;
}
.mf-checkin-emoji-item.is-selected{
  border-color:rgba(63,137,222,.42);
  background:rgba(226,241,255,.90);
  box-shadow:0 0 0 3px rgba(75,147,227,.10),inset 0 1px 0 rgba(255,255,255,1);
}
.mf-checkin-emoji-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 16px 16px;
}
.mf-checkin-emoji-skip{
  min-height:34px;
  padding:0 14px;
  border:1px solid rgba(130,150,177,.14);
  border-radius:999px;
  background:rgba(245,248,252,.86);
  color:#77869a;
  font-size:10px;
}
.mf-checkin-emoji-foot small{
  color:#9ba6b4;
  font-size:8px;
  text-align:right;
}

html.io-black-mode .mf-checkin-page-btn{
  border-color:rgba(176,199,227,.10);
  background:rgba(42,52,67,.82);
  color:#c8d5e5;
}
html.io-black-mode .mf-checkin-pager span{color:#92a0b2}
html.io-black-mode .mf-checkin-emoji-change{
  border-color:rgba(115,159,214,.14);
  background:rgba(41,55,73,.76);
  color:#8fc1ff;
}
html.io-black-mode .mf-checkin-emoji-modal{
  background:rgba(7,11,18,.46);
}
html.io-black-mode .mf-checkin-emoji-card{
  border-color:rgba(180,202,229,.10);
  background:linear-gradient(145deg,rgba(46,57,74,.94),rgba(28,36,48,.92));
  box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
}
html.io-black-mode .mf-checkin-emoji-head strong{color:#edf3fb}
html.io-black-mode .mf-checkin-emoji-head span{color:#93a1b4}
html.io-black-mode .mf-checkin-emoji-close{
  background:rgba(27,35,47,.86);color:#d3deeb;
}
html.io-black-mode .mf-checkin-emoji-item{
  border-color:rgba(173,197,227,.09);
  background:rgba(31,40,53,.78);
}
html.io-black-mode .mf-checkin-emoji-item.is-selected{
  border-color:rgba(91,159,238,.34);
  background:rgba(39,65,95,.82);
}
html.io-black-mode .mf-checkin-emoji-skip{
  border-color:rgba(173,197,227,.09);
  background:rgba(31,40,53,.72);
  color:#a9b6c7;
}
html.io-black-mode .mf-checkin-emoji-foot small{color:#77879b}

@media (max-width:767.98px){
  .mf-checkin-emoji-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .mf-checkin-emoji-card{border-radius:22px}
  .mf-checkin-rank-emoji{width:22px!important;height:22px!important}
  .mf-checkin-emoji-action{justify-content:center}
}


/* =========================================================
   v1.7.7.1 — native check-in modal image picker
   ========================================================= */
#refresh_modal_today_checkin .mf-native-checkin-emoji{
  margin:14px 0 12px;
  padding:12px;
  border:1px solid rgba(133,157,188,.14);
  border-radius:16px;
  background:rgba(246,250,255,.66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}
#refresh_modal_today_checkin .mf-native-checkin-emoji-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
#refresh_modal_today_checkin .mf-native-checkin-emoji-head strong{
  display:block;
  color:#34445a;
  font-size:13px;
}
#refresh_modal_today_checkin .mf-native-checkin-emoji-head span{
  display:block;
  margin-top:2px;
  color:#91a0b2;
  font-size:9px;
}
#refresh_modal_today_checkin .mf-native-emoji-clear{
  border:0;
  border-radius:999px;
  padding:5px 9px;
  background:rgba(235,240,247,.9);
  color:#718196;
  font-size:9px;
}
#refresh_modal_today_checkin .mf-native-checkin-emoji-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
#refresh_modal_today_checkin .mf-native-checkin-emoji-item{
  aspect-ratio:1/1;
  padding:6px;
  border:1px solid rgba(131,154,185,.12);
  border-radius:13px;
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  overflow:hidden;
}
#refresh_modal_today_checkin .mf-native-checkin-emoji-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
#refresh_modal_today_checkin .mf-native-checkin-emoji-item.is-selected{
  border-color:rgba(68,145,231,.45);
  background:rgba(225,241,255,.95);
  box-shadow:0 0 0 3px rgba(65,143,229,.09),inset 0 1px 0 rgba(255,255,255,1);
}
#refresh_modal_today_checkin .mf-native-checkin-emoji-tip,
#refresh_modal_today_checkin .mf-native-checkin-emoji-empty{
  margin-top:8px;
  color:#9aa6b5;
  font-size:8px;
  line-height:1.5;
}
html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji{
  border-color:rgba(176,199,227,.09);
  background:rgba(37,47,62,.62);
}
html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-head strong{color:#e9f0f8}
html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-head span{color:#94a2b5}
html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-item{
  border-color:rgba(172,196,226,.08);
  background:rgba(28,36,49,.84);
}
html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-item.is-selected{
  border-color:rgba(85,157,240,.34);
  background:rgba(39,65,95,.84);
}
html.io-black-mode #refresh_modal_today_checkin .mf-native-emoji-clear{
  background:rgba(27,35,47,.86);
  color:#b9c7d8;
}
@media (max-width:767.98px){
  #refresh_modal_today_checkin .mf-native-checkin-emoji-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;
  }
}


/* =========================================================
   v1.7.7.2 — emoji picker interaction + horizontal overflow fix
   ========================================================= */

/* Prevent the native check-in modal from being dragged/scrolled horizontally. */
#refresh_modal_today_checkin,
#refresh_modal_today_checkin .modal-dialog,
#refresh_modal_today_checkin .modal-content,
#refresh_modal_today_checkin .checkin-modal,
#refresh_modal_today_checkin .checkin-modal form,
#refresh_modal_today_checkin .mf-native-checkin-emoji {
  max-width:100% !important;
  min-width:0 !important;
  overflow-x:hidden !important;
  box-sizing:border-box !important;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-grid {
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-item {
  position:relative;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease,opacity .16s ease;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-item img {
  pointer-events:none;
}

/* Selected item is clearly visible. */
#refresh_modal_today_checkin .mf-native-checkin-emoji-item.is-selected {
  transform:scale(1.06);
  border-color:rgba(67,145,231,.82) !important;
  background:linear-gradient(145deg,rgba(225,241,255,.98),rgba(205,231,255,.92)) !important;
  box-shadow:
    0 0 0 3px rgba(62,144,235,.16),
    0 8px 18px rgba(51,111,181,.15),
    inset 0 1px 0 rgba(255,255,255,1) !important;
  z-index:4;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-grid:has(.is-selected) .mf-native-checkin-emoji-item:not(.is-selected) {
  opacity:.58;
}

#refresh_modal_today_checkin .mf-native-emoji-check {
  position:absolute;
  top:4px;
  right:4px;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#3b8fe9;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:0 3px 8px rgba(38,99,170,.26);
  opacity:0;
  transform:scale(.75);
  transition:.15s ease;
  pointer-events:none;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-item.is-selected .mf-native-emoji-check {
  opacity:1;
  transform:scale(1);
}

/* Desktop hover tooltip. */
#refresh_modal_today_checkin .mf-native-emoji-tip-bubble {
  position:absolute;
  left:50%;
  bottom:calc(100% + 7px);
  z-index:9;
  transform:translate(-50%,4px);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:9px;
  background:rgba(35,45,60,.88);
  color:#fff;
  font-size:9px;
  font-weight:700;
  line-height:1;
  box-shadow:0 8px 18px rgba(29,42,61,.16);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease;
}

@media (hover:hover) and (pointer:fine) {
  #refresh_modal_today_checkin .mf-native-checkin-emoji-item:hover {
    transform:translateY(-2px) scale(1.04);
    border-color:rgba(77,145,225,.48) !important;
  }
  #refresh_modal_today_checkin .mf-native-checkin-emoji-item:hover .mf-native-emoji-tip-bubble {
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
  }
  #refresh_modal_today_checkin .mf-native-checkin-emoji-item.is-selected:hover {
    transform:translateY(-2px) scale(1.08);
  }
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-readout {
  margin-top:10px;
  padding:8px 10px;
  border-radius:11px;
  background:rgba(242,246,251,.88);
  color:#7c899a;
  font-size:10px;
  font-weight:700;
  text-align:center;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-readout.has-selection {
  background:rgba(226,241,255,.90);
  color:#3d78bd;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-actions {
  display:flex;
  justify-content:center;
  margin-top:8px;
}

#refresh_modal_today_checkin .mf-native-emoji-confirm {
  min-width:112px;
  height:34px;
  padding:0 16px;
  border:1px solid rgba(67,143,229,.26);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(86,159,239,.96),rgba(57,132,219,.96));
  color:#fff;
  font-size:10px;
  font-weight:800;
  box-shadow:0 6px 14px rgba(49,112,184,.18),inset 0 1px 0 rgba(255,255,255,.34);
}

#refresh_modal_today_checkin .mf-native-emoji-confirm:disabled {
  opacity:.42;
  box-shadow:none;
}

/* Dark mode selected/readout compatibility. */
html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-item.is-selected {
  border-color:rgba(95,169,255,.72) !important;
  background:linear-gradient(145deg,rgba(45,78,114,.94),rgba(34,58,86,.92)) !important;
  box-shadow:
    0 0 0 3px rgba(83,159,246,.12),
    0 8px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-grid:has(.is-selected) .mf-native-checkin-emoji-item:not(.is-selected) {
  opacity:.52;
}

html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-readout {
  background:rgba(29,38,51,.82);
  color:#9cabbf;
}
html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-readout.has-selection {
  background:rgba(38,65,94,.82);
  color:#9fc9ff;
}

/* Mobile: no tooltip hover; selection text + confirm button are the feedback. */
@media (max-width:767.98px) {
  #refresh_modal_today_checkin .modal-dialog,
  #refresh_modal_today_checkin .modal-content,
  #refresh_modal_today_checkin .checkin-modal {
    width:auto !important;
    max-width:calc(100vw - 20px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #refresh_modal_today_checkin .mf-native-checkin-emoji {
    width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  #refresh_modal_today_checkin .mf-native-checkin-emoji-grid {
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  #refresh_modal_today_checkin .mf-native-checkin-emoji-item {
    overflow:hidden !important;
  }

  #refresh_modal_today_checkin .mf-native-emoji-tip-bubble {
    display:none !important;
  }
}


/* =========================================================
   v1.7.7.3 — emoji text clarity fix
   Remove the "glass over text" look while keeping the picker glass style.
   ========================================================= */

/* PC hover tooltip: use a solid readable bubble, no blur on the text layer. */
#refresh_modal_today_checkin .mf-native-emoji-tip-bubble {
  background:#263345 !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 8px 18px rgba(17,27,41,.22) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
  opacity:0;
  text-shadow:none !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Selected mood text under the grid: keep it crisp, not translucent. */
#refresh_modal_today_checkin .mf-native-checkin-emoji-readout {
  background:#f1f5f9 !important;
  color:#58687b !important;
  border:1px solid rgba(118,139,166,.12) !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
  opacity:1 !important;
  text-shadow:none !important;
  font-weight:800 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-readout.has-selection {
  background:#e7f2ff !important;
  color:#2f6fb7 !important;
  border-color:rgba(61,130,210,.18) !important;
}

/* Helper text also stays clear. */
#refresh_modal_today_checkin .mf-native-checkin-emoji-tip,
#refresh_modal_today_checkin .mf-native-checkin-emoji-head span {
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
}

/* Dark mode: solid dark bubbles, high-contrast text. */
html.io-black-mode #refresh_modal_today_checkin .mf-native-emoji-tip-bubble {
  background:#111827 !important;
  color:#f7fbff !important;
  border-color:rgba(177,198,224,.12) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.28) !important;
}

html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-readout {
  background:#202b3a !important;
  color:#c7d4e5 !important;
  border-color:rgba(177,198,224,.09) !important;
}

html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-readout.has-selection {
  background:#244569 !important;
  color:#b9dcff !important;
  border-color:rgba(93,162,239,.18) !important;
}

html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-tip,
html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-head span {
  color:#9eacbd !important;
  opacity:1 !important;
}


/* =========================================================
   v1.7.7.4 — confirm button visibility + desktop header cleanup
   ========================================================= */

/* Day mode: force the confirm button to stay readable even if OneNav button styles override it. */
#refresh_modal_today_checkin .mf-native-checkin-emoji-actions .mf-native-emoji-confirm,
#refresh_modal_today_checkin button.mf-native-emoji-confirm {
  background:linear-gradient(180deg,#5aa8f5 0%,#3b86dc 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(47,124,210,.32) !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none !important;
  -webkit-text-fill-color:#ffffff !important;
  box-shadow:
    0 7px 16px rgba(54,123,200,.20),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-actions .mf-native-emoji-confirm:hover,
#refresh_modal_today_checkin button.mf-native-emoji-confirm:hover {
  background:linear-gradient(180deg,#67b2fb 0%,#438fe7 100%) !important;
  color:#ffffff !important;
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-actions .mf-native-emoji-confirm:active,
#refresh_modal_today_checkin button.mf-native-emoji-confirm:active {
  transform:translateY(1px);
}

#refresh_modal_today_checkin .mf-native-checkin-emoji-actions .mf-native-emoji-confirm:disabled,
#refresh_modal_today_checkin button.mf-native-emoji-confirm:disabled {
  background:#d8e1eb !important;
  color:#8b99aa !important;
  border-color:rgba(117,137,162,.14) !important;
  -webkit-text-fill-color:#8b99aa !important;
  opacity:1 !important;
  box-shadow:none !important;
}

/* Dark mode confirm button remains high contrast. */
html.io-black-mode #refresh_modal_today_checkin .mf-native-checkin-emoji-actions .mf-native-emoji-confirm,
html.io-black-mode #refresh_modal_today_checkin button.mf-native-emoji-confirm {
  background:linear-gradient(180deg,#4d9beb 0%,#3177c4 100%) !important;
  color:#ffffff !important;
  border-color:rgba(111,177,246,.24) !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Desktop: remove the duplicate helper line under "今日表情".
   Hover tooltip + selected readout already provide the same information. */
@media (min-width:768px) {
  #refresh_modal_today_checkin .mf-native-checkin-emoji-head > div > span {
    display:none !important;
  }

  #refresh_modal_today_checkin .mf-native-checkin-emoji-head {
    align-items:center !important;
    margin-bottom:8px !important;
  }
}


/* =========================================================
   v1.7.8.1 — Header/WPCode check-in modal compatibility
   The Header custom code builds #refresh_modal_today_checkin without .checkin-modal
   and forces modal-content to height:220px; overflow:hidden.
   ========================================================= */
#refresh_modal_today_checkin .modal-content {
  height:auto !important;
  min-height:0 !important;
  max-height:calc(100dvh - 36px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
}

#refresh_modal_today_checkin .io-modal-content {
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* Keep the custom Header-created dialog centered and usable after it grows. */
#refresh_modal_today_checkin .modal-dialog {
  max-height:calc(100dvh - 24px) !important;
}

/* Avoid a second scrollbar inside the emoji area. */
#refresh_modal_today_checkin .mf-native-checkin-emoji {
  overflow:visible !important;
}


/* =========================================================
   v1.7.9 — 今日签到“我的排名” + 分页精修
   ========================================================= */

body.user-center .uc-content-body .mf-today-rank-caption,
body.user-center .uc-content-body .mf-today-rank-head{
  gap:12px !important;
}

body.user-center .uc-content-body .mf-rank-caption-copy,
body.user-center .uc-content-body .mf-rank-head-copy{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:9px;
}

body.user-center .uc-content-body .mf-my-rank-pill{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(102,151,218,.16);
  font-size:10px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  letter-spacing:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76);
}

body.user-center .uc-content-body .mf-my-rank-pill i{
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  flex:0 0 6px;
}

body.user-center .uc-content-body .mf-my-rank-pill.is-ranked{
  color:#3979c1;
  background:rgba(231,243,255,.92);
  border-color:rgba(68,137,217,.18);
}

body.user-center .uc-content-body .mf-my-rank-pill.is-ranked i{
  background:#4a91e2;
  box-shadow:0 0 0 3px rgba(74,145,226,.10);
}

body.user-center .uc-content-body .mf-my-rank-pill.is-pending{
  color:#b7772c;
  background:rgba(255,245,228,.92);
  border-color:rgba(222,159,70,.18);
}

body.user-center .uc-content-body .mf-my-rank-pill.is-pending i{
  background:#e4a13f;
  box-shadow:0 0 0 3px rgba(228,161,63,.10);
}

/* Current user row: keep the existing orange identity stripe, but make the
   whole row easier to find when the user happens to be on the current page. */
body.user-center .uc-content-body .mf-checkin-rank-row.is-me,
body.user-center .uc-content-body .mf-mobile-rank-row.is-me{
  border-color:rgba(247,167,47,.38) !important;
  box-shadow:
    0 0 0 2px rgba(247,167,47,.06),
    0 8px 20px rgba(205,125,31,.07),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

body.user-center .uc-content-body .mf-checkin-rank-row.is-me .mf-checkin-rank-name,
body.user-center .uc-content-body .mf-mobile-rank-row.is-me .mf-mobile-rank-name{
  font-weight:850 !important;
}

/* Pager: compact iOS-like control. */
body.user-center .uc-content-body .mf-checkin-pager{
  gap:8px;
  margin:13px 0 5px;
}

body.user-center .uc-content-body .mf-checkin-page-btn{
  width:34px;
  height:34px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:18px;
  line-height:1;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease;
}

@media (hover:hover) and (pointer:fine){
  body.user-center .uc-content-body .mf-checkin-page-btn:not(:disabled):hover{
    transform:translateY(-1px);
    color:#3979c1;
    border-color:rgba(70,139,221,.28);
    background:rgba(239,247,255,.94);
    box-shadow:0 7px 15px rgba(58,112,177,.09),inset 0 1px 0 rgba(255,255,255,.92);
  }
}

body.user-center .uc-content-body .mf-checkin-page-info{
  min-width:78px;
  min-height:34px;
  padding:4px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  border-radius:12px;
  background:rgba(245,248,252,.72);
  border:1px solid rgba(125,148,180,.10);
}

body.user-center .uc-content-body .mf-checkin-page-info b{
  color:#5f6d80;
  font-size:10px;
  line-height:1.1;
  font-weight:850;
}

body.user-center .uc-content-body .mf-checkin-page-info small{
  color:#9aa5b3;
  font-size:8px;
  line-height:1.1;
  font-weight:650;
}

/* Dark mode */
html.io-black-mode body.user-center .uc-content-body .mf-my-rank-pill{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

html.io-black-mode body.user-center .uc-content-body .mf-my-rank-pill.is-ranked{
  color:#a9d1ff;
  background:rgba(45,79,118,.72);
  border-color:rgba(95,164,245,.18);
}

html.io-black-mode body.user-center .uc-content-body .mf-my-rank-pill.is-pending{
  color:#e5b66e;
  background:rgba(95,68,31,.52);
  border-color:rgba(225,165,79,.15);
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-page-info{
  background:rgba(32,41,54,.74);
  border-color:rgba(180,201,228,.07);
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-page-info b{
  color:#c5d1df;
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-page-info small{
  color:#7f8ea1;
}

html.io-black-mode body.user-center .uc-content-body .mf-checkin-rank-row.is-me,
html.io-black-mode body.user-center .uc-content-body .mf-mobile-rank-row.is-me{
  border-color:rgba(242,171,65,.31) !important;
  box-shadow:
    0 0 0 2px rgba(242,171,65,.035),
    0 8px 20px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.025) !important;
}

/* Mobile: compact heading + pill. */
@media (max-width:767.98px){
  body.user-center .uc-content-body .mf-today-rank-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  body.user-center .uc-content-body .mf-rank-head-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
  }

  body.user-center .uc-content-body .mf-my-rank-pill{
    min-height:25px;
    padding:0 8px;
    gap:5px;
    font-size:9px;
  }

  body.user-center .uc-content-body .mf-checkin-pager{
    margin-top:10px;
    gap:7px;
  }

  body.user-center .uc-content-body .mf-checkin-page-btn{
    width:32px;
    height:32px;
    border-radius:11px;
  }

  body.user-center .uc-content-body .mf-checkin-page-info{
    min-width:72px;
    min-height:32px;
    padding:3px 8px;
  }
}