/* 营销站页面（主页/项目/价格）：手绘平面图背景 */

body.mirror-home-sketch,
body.mirror-home-canvas,
body.mirror-home-sketch html,
body.mirror-home-canvas html {
  background-color: #f0efeb !important;
  color-scheme: light !important;
}

html[data-mirror-home="1"],
html[data-mirror-home="1"] body {
  background: #f0efeb !important;
}

body.mirror-home-sketch #root > div.min-h-screen,
body.mirror-home-canvas #root > div.min-h-screen,
body.mirror-home-sketch #root > div[class*="min-h-screen"],
body.mirror-home-canvas #root > div[class*="min-h-screen"] {
  background: transparent !important;
  background-color: transparent !important;
}

html[data-mirror-home="1"] #root,
html[data-mirror-home="1"] #root > div.min-h-screen,
html[data-mirror-home="1"] #root > div[class*="min-h-screen"] {
  background-color: transparent !important;
  background-image: none !important;
}

/* 子页面主内容层保持在背景之上 */
body.mirror-home-sketch #root .relative.z-10,
body.mirror-home-canvas #root .relative.z-10 {
  position: relative;
  z-index: 10;
}

/* 隐藏官方深色首页背景层。官方 DOM 会变，选择器要覆盖 fixed + canvas 两类背景层。 */
body.mirror-home-sketch #root div.fixed.inset-0.z-0,
body.mirror-home-canvas #root div.fixed.inset-0.z-0,
body.mirror-home-sketch #root div.fixed.inset-0.pointer-events-none,
body.mirror-home-canvas #root div.fixed.inset-0.pointer-events-none,
body.mirror-home-sketch #root div[class*="fixed"][class*="inset-0"]:has(canvas),
body.mirror-home-canvas #root div[class*="fixed"][class*="inset-0"]:has(canvas),
body.mirror-home-sketch #root canvas,
body.mirror-home-canvas #root canvas {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

#mirror-sketch-bg {
  --mouse-x: 50%;
  --mouse-y: 50%;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.mirror-home-sketch #root {
  position: relative;
  z-index: 1;
}

#mirror-sketch-bg .msk-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#mirror-sketch-bg .msk-paper {
  background-image: url("/landing/assets/paper_texture.png");
  opacity: 0.9;
}

#mirror-sketch-bg .msk-blueprint {
  background-image: url("/landing/assets/blueprint_base.png");
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

#mirror-sketch-bg .msk-blueprint.is-visible {
  opacity: 0.6;
}

#mirror-sketch-bg .msk-mask {
  background: radial-gradient(
    circle 150px at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0) 0%,
    rgba(240, 239, 235, 0.95) 100%
  );
}

#mirror-sketch-bg .msk-ruler {
  position: absolute;
  top: 10%;
  left: 5%;
  width: min(400px, 42vw);
  transform: rotate(-15deg);
  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.1));
  object-fit: contain;
}

#mirror-sketch-bg .msk-pencil {
  position: absolute;
  top: 10%;
  right: 5%;
  width: min(300px, 36vw);
  transform: rotate(20deg);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.15));
  transition: transform 0.1s linear;
  object-fit: contain;
}

/* 手绘浅底下首页主标题/副标题可读 */
body.mirror-home-sketch #root .min-h-\[calc\(100dvh-6rem\)\] .text-black,
body.mirror-home-sketch #root .min-h-\[calc\(100dvh-6rem\)\] .dark\:text-white,
body.mirror-home-sketch #root .min-h-\[calc\(100dvh-6rem\)\] .text-neutral-700,
body.mirror-home-sketch #root .min-h-\[calc\(100dvh-6rem\)\] .dark\:text-white\/80 {
  color: #1a1a1a !important;
}

body.mirror-home-sketch #root .min-h-\[calc\(100dvh-6rem\)\] .font-mono.uppercase {
  color: #666 !important;
}

/* 「重构」标签：黑底白字 */
body.mirror-home-sketch #root .min-h-\[calc\(100dvh-6rem\)\] .bg-black.dark\:bg-white\/90 {
  background-color: #000 !important;
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

body.mirror-home-sketch #root .min-h-\[calc\(100dvh-6rem\)\] .bg-black.dark\:bg-white\/90 span {
  color: #fff !important;
}

/* 顶部导航条：黑底胶囊 + 删除四项后居中排布 */
body.mirror-home-sketch nav.fixed > div.max-w-7xl {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.25rem;
  background: rgba(0, 0, 0, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
}

body.mirror-home-sketch nav.fixed > div.max-w-7xl > div.hidden.lg\\:flex.items-center {
  justify-content: center !important;
  justify-self: center;
  gap: 2.75rem !important;
  width: 100%;
}

body.mirror-home-sketch nav.fixed > div.max-w-7xl,
body.mirror-home-sketch nav.fixed > div.max-w-7xl svg {
  color: #fff !important;
}

body.mirror-home-sketch nav.fixed .max-w-7xl [class*="text-black"],
body.mirror-home-sketch nav.fixed .max-w-7xl [class*="text-neutral"],
body.mirror-home-sketch nav.fixed .max-w-7xl [class*="dark:text-"] {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.mirror-home-sketch nav.fixed .max-w-7xl .font-bold[class*="text-black"],
body.mirror-home-sketch nav.fixed .max-w-7xl .font-bold[class*="dark:text-white"] {
  color: #fff !important;
}

body.mirror-home-sketch nav.fixed .max-w-7xl .absolute.-bottom-1.h-0\.5,
body.mirror-home-sketch nav.fixed .max-w-7xl div[class*="nav-underline"] {
  background: #fff !important;
}

/* 登录 / 注册 / 主题按钮：黑框白字 */
body.mirror-home-sketch nav.fixed .max-w-7xl > div:last-child button {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.mirror-home-sketch nav.fixed .max-w-7xl > div:last-child button.font-bold {
  background: #000 !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
}

/* 移动端展开菜单 */
body.mirror-home-sketch nav.fixed + div [class*="lg:hidden"],
body.mirror-home-sketch nav .lg\\:hidden.mt-2.rounded-2xl {
  background: rgba(0, 0, 0, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

body.mirror-home-sketch nav .lg\\:hidden.mt-2.rounded-2xl button,
body.mirror-home-sketch nav .lg\\:hidden.mt-2.rounded-2xl [class*="text-black"],
body.mirror-home-sketch nav .lg\\:hidden.mt-2.rounded-2xl [class*="dark:text-"] {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* 首页用户菜单：深色面板 + 高对比白字 */
body.mirror-home-sketch div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"],
body.mirror-home-canvas div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"] {
  background: rgba(18, 18, 18, 0.94) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38) !important;
}

body.mirror-home-sketch div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"] *,
body.mirror-home-canvas div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"] * {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.mirror-home-sketch div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"] svg,
body.mirror-home-canvas div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"] svg {
  color: rgba(255, 255, 255, 0.82) !important;
  stroke: currentColor !important;
}

body.mirror-home-sketch div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"] button:hover,
body.mirror-home-canvas div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"] button:hover,
body.mirror-home-sketch div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"] [role="button"]:hover,
body.mirror-home-canvas div.fixed.w-56[class*="backdrop-blur-2xl"][class*="z-[9999]"] [role="button"]:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}