/* Codex fix: mobile console sidebar follows each anime UI theme without staying transparent. */
@media (max-width: 768px) {
  body[data-anime-style] {
    --mobile-sidebar-bg: rgba(255, 247, 253, 0.965);
    --mobile-sidebar-bg-image: linear-gradient(135deg, rgba(251, 110, 169, 0.09), rgba(56, 189, 248, 0.07));
    --mobile-sidebar-border: rgba(251, 110, 169, 0.30);
    --mobile-sidebar-shadow: 10px 0 28px rgba(180, 95, 180, 0.18);
  }

  body[data-anime-style="moe"] {
    --mobile-sidebar-bg: rgba(255, 247, 253, 0.965);
    --mobile-sidebar-bg-image: linear-gradient(135deg, rgba(251, 110, 169, 0.10), rgba(56, 189, 248, 0.08));
    --mobile-sidebar-border: rgba(251, 110, 169, 0.30);
    --mobile-sidebar-shadow: 10px 0 28px rgba(180, 95, 180, 0.18);
  }

  body[data-anime-style="idol"] {
    --mobile-sidebar-bg: rgba(255, 246, 251, 0.965);
    --mobile-sidebar-bg-image: conic-gradient(from 140deg at 16% 12%, rgba(255,255,255,.72), rgba(248,79,167,.16), rgba(255,210,72,.16), rgba(255,255,255,.72));
    --mobile-sidebar-border: rgba(248, 79, 167, 0.32);
    --mobile-sidebar-shadow: 10px 0 30px rgba(248, 79, 167, 0.18);
  }

  body[data-anime-style="cyber"] {
    --mobile-sidebar-bg: rgba(22, 15, 54, 0.965);
    --mobile-sidebar-bg-image: linear-gradient(rgba(35,232,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(255,77,240,.09) 1px, transparent 1px), linear-gradient(135deg, rgba(255,77,240,.10), rgba(35,232,255,.08));
    --mobile-sidebar-border: rgba(35, 232, 255, 0.34);
    --mobile-sidebar-shadow: 0 0 0 1px rgba(35,232,255,.20), 10px 0 34px rgba(255,77,240,.20);
  }

  body[data-anime-style="manga"] {
    --mobile-sidebar-bg: rgba(255, 253, 247, 0.975);
    --mobile-sidebar-bg-image: repeating-radial-gradient(circle at 18% 16%, rgba(47,36,64,.10) 0 2px, transparent 2px 9px), linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,228,95,.18));
    --mobile-sidebar-border: rgba(47, 36, 64, 0.74);
    --mobile-sidebar-shadow: 6px 6px 0 rgba(47, 36, 64, 0.14), 10px 0 26px rgba(47, 36, 64, 0.12);
  }

  html.dark body[data-anime-style="moe"],
  html.dark body[data-anime-style="idol"] {
    --mobile-sidebar-bg: rgba(31, 25, 52, 0.965);
    --mobile-sidebar-bg-image: linear-gradient(135deg, rgba(255,141,189,.12), rgba(103,215,255,.08));
    --mobile-sidebar-border: rgba(255, 141, 189, 0.30);
    --mobile-sidebar-shadow: 10px 0 30px rgba(0, 0, 0, 0.32);
  }

  .app-sider.semi-layout-sider,
  .app-sider .semi-layout-sider-children,
  .app-sider .sidebar-container,
  .app-sider .semi-navigation,
  .app-sider .semi-navigation-inner,
  .app-sider .semi-navigation-list-wrapper,
  .app-sider .semi-navigation-list {
    background-color: var(--mobile-sidebar-bg, var(--semi-color-bg-1, rgba(255, 255, 255, 0.96))) !important;
    background-image: var(--mobile-sidebar-bg-image, none) !important;
    background-size: 44px 44px, 44px 44px, auto !important;
  }

  .app-sider.semi-layout-sider {
    border-right: 1px solid var(--mobile-sidebar-border, var(--anime-border, rgba(80, 65, 105, 0.25))) !important;
    box-shadow: var(--mobile-sidebar-shadow, 10px 0 28px rgba(40, 28, 68, 0.18)) !important;
    backdrop-filter: blur(10px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  }

  body[data-anime-style="manga"] .app-sider.semi-layout-sider {
    border-right-width: 2px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}