/*
 * 文件作用：
 * 1. 作为首页对应的 discover 页面样式入口文件。
 * 2. 按原始离线资源路径 `offline_cantian_discover/assets/css/discover-page.css` 手动整理项目内可维护样式。
 * 3. 统一串联首页所需的公共基础样式与首页布局样式，供 `home` 页面单独引用。
 */

@import url("./home-layout-utils.css");

@import url("./shared-base.css");

/*
 * 超链接样式说明：
 * 1. 统一去掉当前 home 模块内全部超链接默认下划线。
 * 2. 保留各链接原有布局和颜色类，仅覆盖文本装饰。
 */
a,
a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none;
}

html,
body,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--font-sans, 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
}

.bg-button-sec-bg {
  -webkit-appearance: none;
  appearance: none;
  background-image: none;
  background-color: var(--button-sec-bg, transparent);
}

button.border-button-border,
button.bg-button-sec-bg {
  -webkit-appearance: none;
  appearance: none;
}

/*
 * 按钮与推荐卡片说明：
 * 1. 统一抹平浏览器默认 button 外观，避免拆分后出现原生灰底、外凸边框。
 * 2. 单独为推荐卡片补足 hover 反馈，让图片缩放和卡片抬升保持同步。
 */
button.home-text-button,
button.home-secondary-button,
button.home-card-button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background-image: none;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

button.home-text-button {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

button.home-text-button:hover {
  background: transparent;
}

button.home-secondary-button {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(216, 194, 163, 0.92);
  background: rgba(255, 252, 247, 0.9);
  box-shadow: 0 8px 20px rgba(118, 84, 40, 0.08);
}

button.home-secondary-button:hover {
  border-color: rgba(218, 177, 112, 0.9);
  background: rgba(246, 236, 217, 0.92);
}

button.home-card-button {
  display: block;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(99, 69, 35, 0.08);
  overflow: hidden;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

button.home-card-button:hover {
  transform: translateY(-2px);
  border-color: rgba(223, 187, 133, 0.56);
  box-shadow: 0 18px 34px rgba(99, 69, 35, 0.14);
}

.home-card-media {
  border-radius: inherit;
}

.home-card-image {
  display: block;
  transform-origin: center center;
  transition: transform 0.32s ease, filter 0.32s ease;
}

button.home-card-button:hover .home-card-image {
  transform: scale(1.05);
  filter: saturate(1.03);
}

.home-card-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.12) 44%, rgba(255, 255, 255, 0) 100%);
}

.text-sm {
  line-height: 21px;
}

/*
 * 首页排版对齐说明：
 * 1. 原始离线首页存在独立的标题字号类，当前项目工具样式未完整覆盖。
 * 2. 这里显式补齐首页实际用到的排版类。
 */
.text_h2__bG8Jr {
  font-size: 2rem;
  font-weight: 700;
  line-height: 3rem;
}

.text_h3__Z0M3t {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

.recommend-groups__title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}


:where(html[dir="ltr"]),:where([data-sonner-toaster][dir="ltr"]){--toast-icon-margin-start: -3px;--toast-icon-margin-end: 4px;--toast-svg-margin-start: -1px;--toast-svg-margin-end: 0px;--toast-button-margin-start: auto;--toast-button-margin-end: 0;--toast-close-button-start: 0;--toast-close-button-end: unset;--toast-close-button-transform: translate(-35%, -35%)}:where(html[dir="rtl"]),:where([data-sonner-toaster][dir="rtl"]){--toast-icon-margin-start: 4px;--toast-icon-margin-end: -3px;--toast-svg-margin-start: 0px;--toast-svg-margin-end: -1px;--toast-button-margin-start: 0;--toast-button-margin-end: auto;--toast-close-button-start: unset;--toast-close-button-end: 0;--toast-close-button-transform: translate(35%, -35%)}:where([data-sonner-toaster]){position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1: hsl(0, 0%, 99%);--gray2: hsl(0, 0%, 97.3%);--gray3: hsl(0, 0%, 95.1%);--gray4: hsl(0, 0%, 93%);--gray5: hsl(0, 0%, 90.9%);--gray6: hsl(0, 0%, 88.7%);--gray7: hsl(0, 0%, 85.8%);--gray8: hsl(0, 0%, 78%);--gray9: hsl(0, 0%, 56.1%);--gray10: hsl(0, 0%, 52.3%);--gray11: hsl(0, 0%, 43.5%);--gray12: hsl(0, 0%, 9%);--border-radius: 8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:none;z-index:999999999;transition:transform .4s ease}:where([data-sonner-toaster][data-lifted="true"]){transform:translateY(-10px)}@media (hover: none) and (pointer: coarse){:where([data-sonner-toaster][data-lifted="true"]){transform:none}}:where([data-sonner-toaster][data-x-position="right"]){right:var(--offset-right)}:where([data-sonner-toaster][data-x-position="left"]){left:var(--offset-left)}:where([data-sonner-toaster][data-x-position="center"]){left:50%;transform:translate(-50%)}:where([data-sonner-toaster][data-y-position="top"]){top:var(--offset-top)}:where([data-sonner-toaster][data-y-position="bottom"]){bottom:var(--offset-bottom)}:where([data-sonner-toast]){--y: translateY(100%);--lift-amount: calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);filter:blur(0);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:none;overflow-wrap:anywhere}:where([data-sonner-toast][data-styled="true"]){padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px #0000001a;width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}:where([data-sonner-toast]:focus-visible){box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}:where([data-sonner-toast][data-y-position="top"]){top:0;--y: translateY(-100%);--lift: 1;--lift-amount: calc(1 * var(--gap))}:where([data-sonner-toast][data-y-position="bottom"]){bottom:0;--y: translateY(100%);--lift: -1;--lift-amount: calc(var(--lift) * var(--gap))}:where([data-sonner-toast]) :where([data-description]){font-weight:400;line-height:1.4;color:inherit}:where([data-sonner-toast]) :where([data-title]){font-weight:500;line-height:1.5;color:inherit}:where([data-sonner-toast]) :where([data-icon]){display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}:where([data-sonner-toast][data-promise="true"]) :where([data-icon])>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}:where([data-sonner-toast]) :where([data-icon])>*{flex-shrink:0}:where([data-sonner-toast]) :where([data-icon]) svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}:where([data-sonner-toast]) :where([data-content]){display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;cursor:pointer;outline:none;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}:where([data-sonner-toast]) :where([data-button]):focus-visible{box-shadow:0 0 0 2px #0006}:where([data-sonner-toast]) :where([data-button]):first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}:where([data-sonner-toast]) :where([data-cancel]){color:var(--normal-text);background:rgba(0,0,0,.08)}:where([data-sonner-toast][data-theme="dark"]) :where([data-cancel]){background:rgba(255,255,255,.3)}:where([data-sonner-toast]) :where([data-close-button]){position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;color:var(--gray12);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast] [data-close-button]{background:var(--gray1)}:where([data-sonner-toast]) :where([data-close-button]):focus-visible{box-shadow:0 4px 12px #0000001a,0 0 0 2px #0003}:where([data-sonner-toast]) :where([data-disabled="true"]){cursor:not-allowed}:where([data-sonner-toast]):hover :where([data-close-button]):hover{background:var(--gray2);border-color:var(--gray5)}:where([data-sonner-toast][data-swiping="true"]):before{content:"";position:absolute;left:-50%;right:-50%;height:100%;z-index:-1}:where([data-sonner-toast][data-y-position="top"][data-swiping="true"]):before{bottom:50%;transform:scaleY(3) translateY(50%)}:where([data-sonner-toast][data-y-position="bottom"][data-swiping="true"]):before{top:50%;transform:scaleY(3) translateY(-50%)}:where([data-sonner-toast][data-swiping="false"][data-removed="true"]):before{content:"";position:absolute;inset:0;transform:scaleY(2)}:where([data-sonner-toast]):after{content:"";position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}:where([data-sonner-toast][data-mounted="true"]){--y: translateY(0);opacity:1}:where([data-sonner-toast][data-expanded="false"][data-front="false"]){--scale: var(--toasts-before) * .05 + 1;--y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}:where([data-sonner-toast])>*{transition:opacity .4s}:where([data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"])>*{opacity:0}:where([data-sonner-toast][data-visible="false"]){opacity:0;pointer-events:none}:where([data-sonner-toast][data-mounted="true"][data-expanded="true"]){--y: translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}:where([data-sonner-toast][data-removed="true"][data-front="true"][data-swipe-out="false"]){--y: translateY(calc(var(--lift) * -100%));opacity:0}:where([data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="true"]){--y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}:where([data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"]){--y: translateY(40%);opacity:0;transition:transform .5s,opacity .2s}:where([data-sonner-toast][data-removed="true"][data-front="false"]):before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount-y, 0px)) translate(var(--swipe-amount-x, 0px));transition:none}[data-sonner-toast][data-swiped=true]{user-select:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=left]{animation-name:swipe-out-left}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=right]{animation-name:swipe-out-right}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=up]{animation-name:swipe-out-up}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=down]{animation-name:swipe-out-down}@keyframes swipe-out-left{0%{transform:var(--y) translate(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translate(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{0%{transform:var(--y) translate(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translate(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{0%{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{0%{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}@media (max-width: 600px){[data-sonner-toaster]{position:fixed;right:var(--mobile-offset-right);left:var(--mobile-offset-left);width:100%}[data-sonner-toaster][dir=rtl]{left:calc(var(--mobile-offset-left) * -1)}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset-left) * 2)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset-left)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--mobile-offset-bottom)}[data-sonner-toaster][data-y-position=top]{top:var(--mobile-offset-top)}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset-left);right:var(--mobile-offset-right);transform:none}}[data-sonner-toaster][data-theme=light]{--normal-bg: #fff;--normal-border: var(--gray4);--normal-text: var(--gray12);--success-bg: hsl(143, 85%, 96%);--success-border: hsl(145, 92%, 91%);--success-text: hsl(140, 100%, 27%);--info-bg: hsl(208, 100%, 97%);--info-border: hsl(221, 91%, 91%);--info-text: hsl(210, 92%, 45%);--warning-bg: hsl(49, 100%, 97%);--warning-border: hsl(49, 91%, 91%);--warning-text: hsl(31, 92%, 45%);--error-bg: hsl(359, 100%, 97%);--error-border: hsl(359, 100%, 94%);--error-text: hsl(360, 100%, 45%)}[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg: #000;--normal-border: hsl(0, 0%, 20%);--normal-text: var(--gray1)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg: #fff;--normal-border: var(--gray3);--normal-text: var(--gray12)}[data-sonner-toaster][data-theme=dark]{--normal-bg: #000;--normal-bg-hover: hsl(0, 0%, 12%);--normal-border: hsl(0, 0%, 20%);--normal-border-hover: hsl(0, 0%, 25%);--normal-text: var(--gray1);--success-bg: hsl(150, 100%, 6%);--success-border: hsl(147, 100%, 12%);--success-text: hsl(150, 86%, 65%);--info-bg: hsl(215, 100%, 6%);--info-border: hsl(223, 100%, 12%);--info-text: hsl(216, 87%, 65%);--warning-bg: hsl(64, 100%, 6%);--warning-border: hsl(60, 100%, 12%);--warning-text: hsl(46, 87%, 65%);--error-bg: hsl(358, 76%, 10%);--error-border: hsl(357, 89%, 16%);--error-text: hsl(358, 100%, 81%)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast] [data-close-button]{background:var(--normal-bg);border-color:var(--normal-border);color:var(--normal-text)}[data-sonner-toaster][data-theme=dark] [data-sonner-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}[data-rich-colors=true][data-sonner-toast][data-type=success],[data-rich-colors=true][data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=info],[data-rich-colors=true][data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning],[data-rich-colors=true][data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=error],[data-rich-colors=true][data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size: 16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:nth-child(1){animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}to{opacity:.15}}@media (prefers-reduced-motion){[data-sonner-toast],[data-sonner-toast]>*,.sonner-loading-bar{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}



.rfm-marquee-container {
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  position: relative;
  width: var(--width);
  transform: var(--transform);
}
.rfm-marquee-container:hover div {
  animation-play-state: var(--pause-on-hover);
}
.rfm-marquee-container:active div {
  animation-play-state: var(--pause-on-click);
}

.rfm-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}
.rfm-overlay::before, .rfm-overlay::after {
  background: linear-gradient(to right, var(--gradient-color), rgba(255, 255, 255, 0));
  content: "";
  height: 100%;
  position: absolute;
  width: var(--gradient-width);
  z-index: 2;
  pointer-events: none;
  touch-action: none;
}
.rfm-overlay::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}
.rfm-overlay::before {
  left: 0;
  top: 0;
}

.rfm-marquee {
  flex: 0 0 auto;
  min-width: var(--min-width);
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  animation: scroll var(--duration) linear var(--delay) var(--iteration-count);
  animation-play-state: var(--play);
  animation-delay: var(--delay);
  animation-direction: var(--direction);
}
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.rfm-initial-child-container {
  flex: 0 0 auto;
  display: flex;
  min-width: auto;
  flex-direction: row;
  align-items: center;
}

.rfm-child {
  transform: var(--transform);
}



[data-vaul-drawer]{touch-action:none;will-change:transform;transition:transform .5s cubic-bezier(.32, .72, 0, 1);animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=open]{animation-name:slideFromBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=bottom][data-state=closed]{animation-name:slideToBottom}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=open]{animation-name:slideFromTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=top][data-state=closed]{animation-name:slideToTop}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=open]{animation-name:slideFromLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=left][data-state=closed]{animation-name:slideToLeft}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=open]{animation-name:slideFromRight}[data-vaul-drawer][data-vaul-snap-points=false][data-vaul-drawer-direction=right][data-state=closed]{animation-name:slideToRight}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,100%,0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,-100%,0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(-100%,0,0)}[data-vaul-drawer][data-vaul-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(100%,0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=top]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=bottom]{transform:translate3d(0,var(--snap-point-height,0),0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=left]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-drawer][data-vaul-delayed-snap-points=true][data-vaul-drawer-direction=right]{transform:translate3d(var(--snap-point-height,0),0,0)}[data-vaul-overlay][data-vaul-snap-points=false]{animation-duration:.5s;animation-timing-function:cubic-bezier(0.32,0.72,0,1)}[data-vaul-overlay][data-vaul-snap-points=false][data-state=open]{animation-name:fadeIn}[data-vaul-overlay][data-state=closed]{animation-name:fadeOut}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:0;transition:opacity .5s cubic-bezier(.32, .72, 0, 1)}[data-vaul-overlay][data-vaul-snap-points=true]{opacity:1}[data-vaul-drawer]:not([data-vaul-custom-container=true])::after{content:'';position:absolute;background:inherit;background-color:inherit}[data-vaul-drawer][data-vaul-drawer-direction=top]::after{top:initial;bottom:100%;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=bottom]::after{top:100%;bottom:initial;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=left]::after{left:initial;right:100%;top:0;bottom:0;width:200%}[data-vaul-drawer][data-vaul-drawer-direction=right]::after{left:100%;right:initial;top:0;bottom:0;width:200%}[data-vaul-overlay][data-vaul-snap-points=true]:not([data-vaul-snap-points-overlay=true]):not(
[data-state=closed]
){opacity:0}[data-vaul-overlay][data-vaul-snap-points-overlay=true]{opacity:1}[data-vaul-handle]{display:block;position:relative;opacity:.7;background:#e2e2e4;margin-left:auto;margin-right:auto;height:5px;width:32px;border-radius:1rem;touch-action:pan-y}[data-vaul-handle]:active,[data-vaul-handle]:hover{opacity:1}[data-vaul-handle-hitarea]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100%,2.75rem);height:max(100%,2.75rem);touch-action:inherit}@media (hover:hover) and (pointer:fine){[data-vaul-drawer]{user-select:none}}@media (pointer:fine){[data-vaul-handle-hitarea]:{width:100%;height:100%}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{to{opacity:0}}@keyframes slideFromBottom{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToBottom{to{transform:translate3d(0,100%,0)}}@keyframes slideFromTop{from{transform:translate3d(0,-100%,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToTop{to{transform:translate3d(0,-100%,0)}}@keyframes slideFromLeft{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToLeft{to{transform:translate3d(-100%,0,0)}}@keyframes slideFromRight{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToRight{to{transform:translate3d(100%,0,0)}}

/*
 * 文件作用：
 * 1. 保存首页离线模板的公共补充样式。
 * 2. 负责首页桌面端与移动端布局切换。
 * 3. 保持与原始 discover 页面视觉一致，同时适配当前项目结构。
 */

/*
 * 首页单模板布局说明：
 * 1. 首页已改为单套主结构，桌面端与移动端通过媒体查询切换局部块显示。
 * 2. 保留旧版离线命名，减少对现有样式和交互的破坏范围。
 */
html,
body {
  margin: 0;
  padding: 0;
  /* 约束根高度，确保全屏外壳 100vh 与内部滚动在移动端稳定生效 */
  height: 100%;
}

.home-shell {
  display: flex;
  /* 用 100dvh 适配移动端动态浏览器 UI（地址栏），回退 100vh */
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

.home-mobile-header {
  display: none;
}

.home-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.home-desktop-sidebar {
  display: flex;
  flex: 0 0 auto;
}

.home-main-content {
  display: flex;
  min-height: 100vh;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-x: hidden;
}

.home-scroll-area {
  display: flex;
  flex: 1 1 auto;
  overflow-y: hidden;
}

.home-content-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  justify-content: center;
  overflow-y: auto;
  background: var(--primary-bg-100, #fcfaf7);
  padding-bottom: 48px;
}

.home-content-background {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background-image: url("../img/bg_@2.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.65;
}

.home-layout {
  position: relative;
  z-index: 10;
  width: 100%;
  min-width: 600px;
  max-width: 1280px;
  padding: 32px 32px 0;
}

.home-upgrade {
  position: absolute;
  right: 32px;
  top: 24px;
  z-index: 20;
}

.home-center {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 64px;
}

.home-hero {
  min-height: 180px;
}

.home-hero__desktop {
  display: flex;
  min-height: 180px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px 16px;
  text-align: center;
}

.home-hero__mobile {
  display: none;
}

.home-body {
  display: grid;
  min-height: 0;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

/* PC端无右侧面板的页面（关于我们、联系支持）：单列居中布局 */
.home-body--single {
  display: flex;
  justify-content: center;
}
.home-body--single > .home-center {
  max-width: 720px;
  width: 100%;
}

.home-recommend {
  min-width: 0;
}

.home-footer {
  padding-top: 0;
}

.right-panel {
  display: flex;
  width: 100%;
  flex-shrink: 0;
  flex-direction: column;
  gap: 16px;
  padding-top: 56px;
  padding-bottom: 80px;
}

.recommend-groups {
  min-width: 0;
}

.recommend-groups__header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recommend-groups__title {
  font-size: 28px;
  line-height: 1.2;
}

.recommend-group__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.recommend-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: color 0.2s ease;
}

.recommend-card__content {
  padding: 20px 20px;
}

.desktop-content {
  padding-bottom: 48px;
}

.desktop-scroll {
  padding-bottom: 48px;
}

.mobile-drawer__login-card {
  border: 0.666667px solid rgba(230, 176, 88, 0.2);
  background: linear-gradient(135deg, #fcfaf8 0%, #f5f0e8 100%);
}

.mobile-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-footer {
  display: flex;
  justify-content: center;
  padding: 20px 0 8px;
}

.page-footer--mobile {
  padding: 14px 0 2px;
}

.page-footer__inner {
  width: min(100%, 760px);
  padding: 0 18px;
  text-align: center;
}

.page-footer__line {
  color: rgba(106, 67, 32, 0.88);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.9;
}

.page-footer__copy {
  margin-top: 2px;
  color: rgba(84, 63, 39, 0.7);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.08em;
}

@media (max-width: 767px) {
  .page-footer {
    width: 100%;
    padding: 20px 16px 12px;
  }

  .page-footer__inner {
    width: 100%;
    padding: 0 12px;
  }

  .page-footer__line {
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.04em;
  }

  .page-footer__copy {
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 1023px) {
  .home-mobile-header {
    display: block;
  }

  .home-desktop-sidebar {
    display: none;
  }

  .home-main-content {
    min-height: auto;
  }

  .home-scroll-area {
    overflow-y: auto;
  }

  .home-content-shell {
    padding-bottom: 0;
    overflow-x: hidden;
  }

  .home-layout {
    min-width: 0;
    max-width: none;
    padding: 16px 0 32px;
  }

  .home-upgrade {
    display: none;
  }

  /* 移动端 hero 区域：取消桌面端最小高度 */
  .home-hero {
    min-height: auto;
  }

  .home-hero__desktop {
    display: none;
  }

  .home-hero__mobile {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(229, 217, 201, 0.95);
    border-radius: 16px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 10px 24px rgba(93, 58, 26, 0.08);
    /* 移动端约束 hero 最大高度，避免背景图过大 */
    max-height: 260px;
  }
  /* 移动端 hero 背景图片适配 */
  .home-hero__mobile .absolute.inset-0 {
    background-size: cover;
    background-position: center;
  }

  /* 紧凑版 mobile hero（八字排盘页用，去掉背景图和额外内边距，降低高度） */
  .home-hero__mobile--compact {
    padding: 12px 16px;
  }
  .home-hero__mobile--compact::before {
    display: none;
  }

  .home-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }

  .home-center {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 0;
    padding-left: 16px;
    padding-right: 16px;
    min-width: 0;
  }

  .home-recommend {
    padding-bottom: 0;
    min-width: 0;
  }

  .home-footer {
    padding-top: 14px;
    padding-bottom: 2px;
  }

  /* 移动端页脚：补充水平内边距（home-layout 不再设左右 padding） */
  .page-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* H5端右侧面板默认隐藏（bazi/fortune 等子页面不展示） */
  .right-panel {
    display: none;
  }

  /* 仅首页 H5 显示右侧面板，以卡片形式排列在主内容下方 */
  .home-shell--page-home .right-panel {
    display: flex;
    width: 100%;
    padding: 0 16px 24px;
  }

  /* 首页 H5 右侧面板卡片样式增强 */
  .home-shell--page-home .right-panel > section,
  .home-shell--page-home .right-panel > div {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(93, 58, 26, 0.08);
  }

  /* H5 右侧面板背景图缩小并定位到右下角，作为装饰元素 */
  .home-shell--page-home .right-panel .absolute[class*="inset-0"][class*="url"] {
    top: auto !important;
    left: auto !important;
    right: -8% !important;
    bottom: -8% !important;
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    opacity: 0.45;
  }

  /* H5 八字排盘卡片背景图保持完整覆盖（不受上方装饰规则影响） */
  .home-shell--page-home .right-panel > div:nth-child(2) .absolute[class*="inset-0"][class*="url"] {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    opacity: 0.65;
  }

  .recommend-groups__title {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .recommend-group__cards {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .recommend-card {
    width: 58%;
    min-width: 188px;
    flex-shrink: 0;
    border-color: rgba(229, 217, 201, 0.95);
  }

  .recommend-card__content {
    padding: 16px 16px;
  }
}

.desktop-sidebar.desktop-sidebar--collapsed {
  width: 64px !important;
  overflow: visible !important;
}

.desktop-sidebar.desktop-sidebar--collapsed .brand-logo--desktop {
  display: none;
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-toggle svg {
  transform: rotate(180deg);
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-footer {
  display: none;
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-main {
  padding-top: 0;
  overflow: visible !important;
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-main > div.flex-1 {
  display: none;
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-main > div.px-4 {
  padding-left: 0;
  padding-right: 0;
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-main nav > div {
  gap: 4px;
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-main nav .text_body_small__HVBBa {
  display: none;
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-main nav .flex.cursor-pointer.items-center {
  position: relative;
  justify-content: center;
  gap: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 14px;
}

.desktop-sidebar.desktop-sidebar--collapsed .sidebar-main nav .flex.cursor-pointer.items-center[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(24, 24, 24, 0.92);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* =========================================================
 * Asset Detail Shared CSS (ct- 组件样式)
 * 来源：bazi/login 页面共用，从 coverage 提取
 * ========================================================= */

/* ===== 0) Base Reset ===== */
html,
body {
  margin: 0;
  padding: 0;
}

/* ===== 1) Root & Tokens ===== */
.ct-asset-detail-root {
  margin: 0;
  padding: var(--ct-root-padding);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: scroll;
  --ct-font-sans: var(--font-sans, 'PingFang SC', 'PingFang TC', 'Microsoft YaHei', 'Microsoft JhengHei', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
  --ct-font-serif-heading: var(--font-serif, 'SourceHanSerifSC-Bold', 'Noto Serif SC', 'Noto Serif TC', 'Noto Serif', 'Songti SC', 'Songti TC', 'STSong', 'PMingLiU', Georgia, 'Times New Roman', serif);
  --ct-bg-primary: #fefbf6;
  --ct-bg-soft: #fff8ee;
  --ct-color-border: #f1e3c9;
  --ct-color-primary: #6b440d;
  --ct-color-muted: #aeaeb0;
  --ct-color-body: #333333;
  --ct-color-accent: #e1b577;
  --ct-color-ivory: #f5e9d6;
  --ct-color-white: #ffffff;
  --ct-color-emphasis-bg: var(--ct-color-primary);
  --ct-color-border-light: #ece6da;
  --ct-color-timeline-dot: #b28a57;
  --ct-fs-body: 16px;
  --ct-fs-body-sm: 14px;
  --ct-fs-tip: 12px;
  --ct-fs-title-main: 24px;
  --ct-fs-h1: 28px;
  --ct-fs-h2: 24px;
  --ct-fs-h3: 20px;
  --ct-fs-h4: 18px;
  --ct-fs-h5: 16px;
  --ct-fs-h6: 14px;
  --ct-lh-body: 24px;
  --ct-lh-body-sm: 22px;
  --ct-lh-tip: 18px;
  --ct-lh-title-main: 28px;
  --ct-lh-h1: 40px;
  --ct-lh-h2: 34px;
  --ct-lh-h3: 30px;
  --ct-lh-h4: 28px;
  --ct-lh-h5: 24px;
  --ct-lh-h6: 22px;
  --ct-fw-400: 400;
  --ct-fw-600: 600;
  --ct-fw-700: 700;
  --ct-space-1: 4px;
  --ct-space-2: 8px;
  --ct-space-3: 12px;
  --ct-space-4: 16px;
  --ct-space-6: 24px;
  --ct-root-padding: var(--ct-space-6);
  --ct-radius-sm: 6px;
  --ct-radius-md: 8px;
  --ct-radius-lg: 12px;
  --ct-radius-xl: 16px;
  --ct-media-gutter: 12px;
  --ct-media-max-width: 720px;
  --ct-img-headline-w: 118px;
  --ct-img-headline-h: 21px;
  font-family: var(--ct-font-sans);
  font-size: var(--ct-fs-body);
  line-height: var(--ct-lh-body);
  word-break: break-word;
}

/* ===== 2) Semantic Element Defaults ===== */
.ct-asset-detail-root h1,
.ct-asset-detail-root h2,
.ct-asset-detail-root h3,
.ct-asset-detail-root h4,
.ct-asset-detail-root h5,
.ct-asset-detail-root h6 {
  margin: 0;
  font-family: var(--ct-font-serif-heading);
}

.ct-asset-detail-root p {
  margin: 0;
}

.ct-asset-detail-root strong,
.ct-asset-detail-root b {
  font-weight: 700;
}

.ct-asset-detail-root em,
.ct-asset-detail-root i {
  font-style: italic;
}

.ct-asset-detail-root u {
  text-decoration: underline;
}

.ct-asset-detail-root s,
.ct-asset-detail-root del {
  text-decoration: line-through;
}

.ct-asset-detail-root a {
  text-decoration: underline;
}

.ct-asset-detail-root ul {
  margin: var(--ct-space-2) 0;
  padding-left: 24px;
  list-style: disc outside;
}

.ct-asset-detail-root ol {
  margin: var(--ct-space-2) 0;
  padding-left: 24px;
  list-style: decimal outside;
}

.ct-asset-detail-root li {
  margin: var(--ct-space-1) 0;
}

.ct-asset-detail-root blockquote {
  margin: var(--ct-space-2) 0;
  padding: var(--ct-space-2) var(--ct-space-3);
  border-left: 3px solid var(--ct-color-border);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-bg-soft);
}

.ct-asset-detail-root pre {
  margin: var(--ct-space-2) 0;
  padding: 10px var(--ct-space-3);
  border-radius: var(--ct-radius-md);
  background-color: var(--ct-bg-soft);
  overflow: auto;
}

.ct-asset-detail-root code {
  padding: 1px 4px;
  border-radius: 4px;
  background-color: var(--ct-bg-soft);
}

.ct-asset-detail-root table {
  width: 100%;
  margin: var(--ct-space-2) 0;
  border-collapse: collapse;
}

.ct-asset-detail-root th,
.ct-asset-detail-root td {
  border: 1px solid var(--ct-color-border);
  padding: 6px var(--ct-space-2);
  text-align: left;
}

.ct-asset-detail-root hr {
  margin: var(--ct-space-2) 0;
  border: none;
  border-top: 1px solid var(--ct-color-border);
}

/* ===== 3) Responsive Media ===== */
.ct-asset-detail-root img:not(.ct-img-headline),
.ct-asset-detail-root svg {
  display: block;
  width: calc(100% - (var(--ct-media-gutter) * 2));
  max-width: var(--ct-media-max-width);
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.ct-asset-detail-root img:not(.ct-img-headline) {
  border-radius: var(--ct-radius-lg);
}

@media (min-width: 1024px) {
  .ct-asset-detail-root {
    --ct-media-gutter: 20px;
    --ct-media-max-width: 760px;
  }
}

/* ===== 4) Typography ===== */
.ct-h1 {
  font-size: var(--ct-fs-h1);
  line-height: var(--ct-lh-h1);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h2 {
  font-size: var(--ct-fs-h2);
  line-height: var(--ct-lh-h2);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h3 {
  font-size: var(--ct-fs-h3);
  line-height: var(--ct-lh-h3);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h4 {
  font-size: var(--ct-fs-h4);
  line-height: var(--ct-lh-h4);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h5 {
  font-size: var(--ct-fs-h5);
  line-height: var(--ct-lh-body);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h6 {
  font-size: var(--ct-fs-h6);
  line-height: var(--ct-lh-h6);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-text-body {
  font-size: var(--ct-fs-body);
  line-height: var(--ct-lh-body);
  font-weight: var(--ct-fw-400);
}

.ct-text-body-sm {
  font-size: var(--ct-fs-body-sm);
  line-height: var(--ct-lh-h6);
  font-weight: var(--ct-fw-400);
}

.ct-text-tip {
  font-size: var(--ct-fs-tip);
  line-height: var(--ct-lh-tip);
  font-weight: var(--ct-fw-400);
}

.ct-fs-12 {
  font-size: var(--ct-fs-tip);
}

.ct-fs-14 {
  font-size: var(--ct-fs-body-sm);
}

.ct-fs-16 {
  font-size: var(--ct-fs-body);
}

.ct-fs-20 {
  font-size: var(--ct-fs-h3);
}

.ct-fw-400 {
  font-weight: var(--ct-fw-400);
}

.ct-fw-600 {
  font-weight: var(--ct-fw-600);
}

.ct-fw-700 {
  font-weight: var(--ct-fw-700);
}

.ct-lh-18 {
  line-height: var(--ct-lh-tip);
}

.ct-lh-20 {
  line-height: 20px;
}

.ct-lh-24 {
  line-height: var(--ct-lh-body);
}

.ct-lh-28 {
  line-height: var(--ct-lh-title-main);
}

.ct-lh-relaxed {
  line-height: 1.75;
}

.ct-ls-200 {
  letter-spacing: 0.2em;
}

.ct-ls-350 {
  letter-spacing: 0.35em;
}

.ct-lp-lg {
  letter-spacing: 4px;
}

.ct-font-serif,
.ct-font-serif-heading {
  font-family: var(--ct-font-serif-heading);
}

/* ===== 5) Color Tokens ===== */
.ct-color-primary {
  color: var(--ct-color-primary);
}

.ct-color-muted {
  color: var(--ct-color-muted);
}

.ct-color-body {
  color: var(--ct-color-body);
}

.ct-color-accent {
  color: var(--ct-color-accent);
  font-weight: var(--ct-fw-700);
}

.ct-color-highlight {
  color: var(--ct-color-accent);
  font-weight: var(--ct-fw-700);
}

.ct-color-sep {
  color: var(--ct-color-accent);
}

.ct-color-white {
  color: var(--ct-color-white);
}

.ct-color-ivory {
  color: var(--ct-color-ivory);
}

/* ===== 6) Surface & Border ===== */
.ct-bg-primary {
  background-color: var(--ct-bg-primary);
}

.ct-bg-soft {
  background-color: var(--ct-bg-soft);
}

.ct-bg-emphasis {
  background-color: var(--ct-color-primary);
}

.ct-bg-white {
  background-color: #ffffff;
}

.ct-border {
  border: 1px solid var(--ct-color-border);
}

.ct-border-top {
  border-top: 1px solid var(--ct-color-border);
}

.ct-border-bottom {
  border-bottom: 1px solid var(--ct-color-border);
}

.ct-border-primary {
  border-color: var(--ct-color-border);
}

.ct-border-light {
  border-color: var(--ct-color-border-light);
}

.ct-shadow-soft {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.ct-rounded-6 {
  border-radius: var(--ct-radius-sm);
}

.ct-rounded-8 {
  border-radius: var(--ct-radius-md);
}

.ct-rounded-12 {
  border-radius: var(--ct-radius-lg);
}

.ct-rounded-16 {
  border-radius: var(--ct-radius-xl);
}

/* ===== 7) Layout ===== */
.ct-text-center {
  width: 100%;
  text-align: center;
}

.ct-text-left {
  text-align: left;
}

.ct-text-right {
  text-align: right;
}

.ct-text-nowrap {
  white-space: nowrap;
}

.ct-text-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-flex-y-center {
  display: flex;
  align-items: center;
}

.ct-flex-x-center {
  display: flex;
  justify-content: center;
}

.ct-flex-row {
  display: flex;
  flex-direction: row;
}

.ct-flex-col {
  display: flex;
  flex-direction: column;
}

.ct-items-center {
  align-items: center;
}

.ct-items-start {
  align-items: flex-start;
}

.ct-items-end {
  align-items: flex-end;
}

.ct-justify-between {
  justify-content: space-between;
}

.ct-justify-start {
  justify-content: flex-start;
}

.ct-justify-center {
  justify-content: center;
}

.ct-justify-end {
  justify-content: flex-end;
}

.ct-flex-wrap {
  flex-wrap: wrap;
}

.ct-flex-nowrap {
  flex-wrap: nowrap;
}

.ct-gap-4 {
  gap: 4px;
}

.ct-gap-8 {
  gap: 8px;
}

.ct-overflow-hidden {
  overflow: hidden;
}

.ct-w-full {
  width: 100%;
}

.ct-h-full {
  height: 100%;
}

.ct-ar-1-1 {
  aspect-ratio: 1 / 1;
}

.ct-ar-9-16 {
  aspect-ratio: 9 / 16;
}

/* ===== 8) Generic Spacing Utilities ===== */
.ct-m-0 {
  margin: 0;
}

.ct-mb-4 {
  margin-bottom: 4px;
}

.ct-mb-8 {
  margin-bottom: 8px;
}

.ct-mt-4 {
  margin-top: 4px;
}

.ct-mt-8 {
  margin-top: 8px;
}

.ct-my-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.ct-my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.ct-mx-4 {
  margin-left: 4px;
  margin-right: 4px;
}

.ct-mx-8 {
  margin-left: 8px;
  margin-right: 8px;
}

.ct-ml-4 {
  margin-left: 4px;
}

.ct-p-0 {
  padding: 0;
}

.ct-p-4 {
  padding: 4px;
}

.ct-p-8 {
  padding: 8px;
}

.ct-pt-4 {
  padding-top: 4px;
}

.ct-pt-8 {
  padding-top: 8px;
}

.ct-pb-4 {
  padding-bottom: 4px;
}

.ct-pb-8 {
  padding-bottom: 8px;
}

.ct-px-4 {
  padding-left: 4px;
  padding-right: 4px;
}

.ct-px-8 {
  padding-left: 8px;
  padding-right: 8px;
}

.ct-px-24 {
  padding-left: 24px;
  padding-right: 24px;
}

.ct-py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.ct-py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ===== 9) Mock Spacing Mapping ===== */
.ct-sp-mb-1 {
  margin-bottom: 4px;
}

.ct-sp-mb-2 {
  margin-bottom: 8px;
}

.ct-sp-mb-3 {
  margin-bottom: 12px;
}

.ct-sp-mb-4 {
  margin-bottom: 16px;
}

.ct-sp-mt-2 {
  margin-top: 8px;
}

.ct-sp-mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}

.ct-sp-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.ct-sp-pl-1 {
  padding-left: 4px;
}

.ct-sp-pl-3 {
  padding-left: 12px;
}

.ct-sp-px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.ct-sp-px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.ct-sp-py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ct-sp-py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.ct-sp-gap-2 {
  gap: 8px;
}

/* ===== 10) Component Blocks ===== */
.ct-image {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--ct-radius-lg);
}

.ct-title-main {
  font-family: var(--ct-font-serif-heading);
  font-size: var(--ct-fs-title-main);
  line-height: var(--ct-lh-title-main);
  font-weight: var(--ct-fw-400);
}

.ct-tag-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start;
}

.ct-tag-item {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 6px;
}

.ct-timeline-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ct-space-2);
}

.ct-timeline-content {
  flex: 1;
  min-width: 0;
}

.ct-timeline-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--ct-color-timeline-dot);
  margin-bottom: 0;
}

.ct-timeline-row .ct-timeline-dot {
  flex: 0 0 auto;
  margin-top: 8px;
}

.ct-img-headline {
  display: block;
  width: var(--ct-img-headline-w);
  height: var(--ct-img-headline-h);
  object-fit: cover;
}

/* ===== Hexagram (Liu Yao) ===== */
.ct-hex-page {
  background-image: url("../img/86016e73a34419d4.png"),
    url("../img/1618e23d4410fa0d.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% auto, 100% auto;
}

.ct-hex-question {
  padding-left: 12px;
  border-left: 2px solid #a62c2b;
  color: var(--ct-color-primary);
}

.ct-hex-question p {
  transform: skewX(-8deg);
}

.ct-hex-time-pill {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.05em;
  color: #7e7e7e;
}

.ct-hex-section {
  padding-top: 16px;
  padding-bottom: 16px;
}

.ct-hex-type {
  display: inline-block;
  padding: 0 8px;
  border-radius: 8px;
  color: #fefbf6;
  font-size: 12px;
  line-height: 18px;
}

.ct-hex-type-ben {
  background-color: #a62c2b;
}

.ct-hex-type-bian {
  background-color: #7e7e7e;
}

.ct-hex-name {
  margin: 8px 0;
  font-size: 36px;
  line-height: 36px;
  color: var(--ct-color-primary);
}

.ct-hex-seq {
  color: #7e7e7e;
  font-size: 16px;
  line-height: 24px;
}

.ct-hex-yao-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-hex-yao-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.ct-hex-side {
  width: 96px;
  font-size: 14px;
  line-height: 1.4;
  color: #333333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ct-hex-side-left {
  text-align: right;
}

.ct-hex-side-right {
  text-align: left;
}

.ct-hex-yang {
  width: 144px;
  height: 16px;
  border-radius: 6px;
  background-color: var(--ct-color-primary);
}

.ct-hex-yang-active {
  background-color: #a62c2b;
}

.ct-hex-yin {
  width: 144px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ct-hex-yin-half {
  display: block;
  width: 64px;
  height: 100%;
  border-radius: 6px;
  background-color: var(--ct-color-primary);
}

.ct-hex-mark {
  color: #3f6ea8;
}

.ct-hex-arrow {
  margin: 24px 0;
  color: #a62c2b;
}

.ct-asset-detail-root svg.ct-hex-arrow-icon {
  width: 48px;
  max-width: 48px;
  height: 48px;
  margin: 0;
}

.ct-asset-detail-root img.ct-hex-signature {
  width: 100px;
  max-width: 100px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: 0;
  border-radius: 0;
}

/* =========================================================
 * 阿里云验证码图标样式 (572b2d8453543b1d.css)
 * 来源：登录页面 coverage 提取
 * ========================================================= */
.iconfont-aliyun-captcha {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  font-style: normal !important;
  font-weight: 400 !important;
}

.aliyun-captcha .icon-close-line:before {
  content: "\e67e";
}

.aliyun-captcha .icon-arrow_circular:before {
  content: "\e8b9";
}

.aliyun-captcha .icon-icon-test1:before {
  content: "\e651";
}

.aliyun-captcha .icon-icon-test2:before {
  content: "\e652";
}

.aliyun-captcha .icon-warning-fill:before {
  content: "\e625";
}

.aliyun-captcha .icon-checkmark-line:before {
  content: "\e626";
}

.aliyun-captcha .icon-double-right-line:before {
  content: "\e624";
}

.aliyun-captcha .icon-help-line:before {
  content: "\e67f";
}

.aliyun-captcha .icon-closemark-line:before {
  content: "\e67d";
}

.aliyun-captcha .icon-aliyun:before {
  content: "\ec48";
}

.aliyun-captcha .icon-message-line:before {
  content: "\e680";
}

.aliyun-captcha .icon-refresh-line:before {
  content: "\e685";
}

/* =========================================================
 * 登录页专有样式 (login-page)
 * ========================================================= */
/* 隐藏左侧菜单，让登录内容居中占满 */
.home-main--no-sidebar {
  grid-template-columns: 1fr;
}
.login-page-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: var(--primary-bg-100, #fcfaf7);
  padding: 80px 16px 40px;
}

.login-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 448px;
}

.login-card-stack {
  width: 100%;
}

.login-card {
  position: relative;
  min-height: 20rem;
}

.login-desktop-card {
  display: block;
  /* 桌面端卡片边框、背景、阴影（替代 Tailwind 任意值 border-[#EEDFCB] shadow-[...]） */
  border: 1px solid #EEDFCB;
  border-radius: 16px;
  background-color: var(--card);
  padding: 32px;
  box-shadow: 0 16px 40px rgba(93, 58, 26, 0.10);
}

.login-mobile-card {
  display: none;
}

.login-footer-links {
  margin-top: 28px;
  padding-top: 16px;
}

.login-top-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.login-top-brand__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.login-top-brand__logo {
  display: block;
  width: auto;
  max-width: min(280px, 100%);
  height: 56px;
  max-height: 56px;
  object-fit: contain;
}

/* 登录页 toast 警告提示 */
.login-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #FCA5A5;
  background: #FEF2F2;
  padding: 10px 20px;
  font-size: 14px;
  color: #DC2626;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.login-toast__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.login-toast--visible {
  opacity: 1;
}

/* 发送验证码按钮 hover 态 */
.js-send-code:hover:not(:disabled) {
  background: #F5EDE0;
}

.login-center-background {
  position: absolute;
  background-image: url("../img/bg_@2.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  inset: 0;
  opacity: 0.65;
}

@media (max-width: 1023px) {
  .login-top-brand {
    display: none;
  }

  .login-desktop-card {
    display: none;
  }

  .login-page-shell {
    align-items: flex-start;
    padding: 24px 24px 40px;
  }

  .login-mobile-card {
    display: block;
  }

  .login-content {
    max-width: 420px;
  }

  .login-footer-links {
    margin-top: 28px;
  }
}

/* =========================================================
 * 国学推演页专有样式 (bazi-page)
 * ========================================================= */

/* 页面外壳布局 */
.bazi-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}

.bazi-mobile-header { display: none; }

.bazi-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.bazi-desktop-sidebar { display: flex; flex: 0 0 auto; }

.bazi-main-content {
  display: flex;
  min-height: 100vh;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-x: hidden;
}

.bazi-scroll-area { display: flex; flex: 1 1 auto; overflow-y: hidden; }

.bazi-content-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--primary-bg-100, #fcfaf7);
}

.bazi-content {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* ----- 左右栅格布局（与 home-layout/home-body/home-center 同结构） ----- */
.bazi-layout {
  position: relative;
  z-index: 10;
  width: 100%;
  min-width: 600px;
  max-width: 1280px;
  padding: 32px 32px 0;
}

.bazi-body {
  display: grid;
  min-height: 0;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.bazi-center {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 64px;
}

.bazi-center-background {
  position: absolute;
  background-image: url("../img/bg_@2.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  inset: 0;
  opacity: 0.65;
}

/* =========================================================
 * 八字排盘表单样式 (bazi-form) — 与 login 页面同风格
 * 卡片：border #EEDFCB / 16px 圆角 / 深阴影
 * 输入框：h-10 / rounded-lg / border-border / bg-card
 * 提交按钮：rounded-full / bg-primary
 * ========================================================= */

/* ----- 页面容器 ----- */
.bazi-page-wrapper {
  width: 100%;
  min-width: 0;
  /* 限宽并居中，左右两侧留对称空白 */
  max-width: 720px;
  margin: 0 auto;
  /* 表单上移，靠近上方推荐区 */
  margin-top: -8px;
}

/* ----- 表单卡片（与 login-desktop-card 同风格） ----- */
.bazi-form-card {
  border: 1px solid #eedfcb;
  border-radius: 16px;
  background: var(--card, #fff);
  padding: 32px;
  box-shadow: 0 16px 40px rgba(93, 58, 26, 0.1);
  min-width: 0;
  overflow: hidden;
}

/* ----- 排盘结果区：区块标题（左侧竖线 + 文字） ----- */
.bazi-section-title {
  position: relative;
  padding-left: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--foreground-third, #3d3026);
  line-height: 1.2;
}
.bazi-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--primary, #8b6940);
}

/* ----- 排盘结果区：每个区块的间距 ----- */
.bazi-result-section {
  margin-bottom: 28px;
  min-width: 0;
  overflow: hidden;
}
.bazi-result-section:last-child {
  margin-bottom: 0;
}
/* 排盘结果区内 text-primary 改为红色，提高可读性 */
.bazi-result-section .text-primary {
  color: #c53030;
}

/* ----- 排盘结果区：横向滚动容器 ----- */
.bazi-scroll-x {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #d4c5a9 transparent;
}
.bazi-scroll-x::-webkit-scrollbar {
  height: 4px;
}
.bazi-scroll-x::-webkit-scrollbar-track {
  background: transparent;
}
.bazi-scroll-x::-webkit-scrollbar-thumb {
  background: #d4c5a9;
  border-radius: 2px;
}
.bazi-scroll-x::-webkit-scrollbar-thumb:hover {
  background: #c4b599;
}

/* ----- Tailwind 工具类补充 ----- */
.flex-shrink-0 { flex-shrink: 0; }
.flex-nowrap { flex-wrap: nowrap; }
.table-fixed { table-layout: fixed; }

/* ----- 排盘结果区：信息网格（自适应多列） ----- */
.bazi-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

/* ----- 排盘结果区：对称表格样式 ----- */
.bazi-table {
  width: 100%;
  border-collapse: collapse;
}
.bazi-table th {
  padding: 8px 10px;
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  color: #8b7d6b;
  background: #F9F5EE;
  border-bottom: 1px solid #E9DFD1;
  white-space: nowrap;
}
.bazi-table td {
  padding: 8px 10px;
  text-align: center;
  font-size: 13px;
  color: #5d4e3a;
  border-bottom: 1px solid #F5EFE5;
  white-space: nowrap;
}
.bazi-table tbody tr:last-child td {
  border-bottom: none;
}
.bazi-table .bazi-table-main {
  font-size: 15px;
  font-weight: 600;
  color: #3d3026;
}
.bazi-table .bazi-table-accent {
  color: #c53030;
}
.bazi-table .bazi-table-label {
  font-weight: 500;
  color: #8b7d6b;
  background: #FAF7F0;
}

/* ----- 缺失的 Tailwind 任意值类（login 页面也引用了这些） ----- */
.text-\[15px\] { font-size: 15px; }
.shadow-\[0_4px_12px_rgba\(93\,58\,26\,0\.12\)\] {
  box-shadow: 0 4px 12px rgba(93, 58, 26, 0.12);
}
.border-\[\#E9DFD1\] { border-color: #e9dfd1; }
.border-\[\#E8DCCB\] { border-color: #e8dccb; }

/* ----- 胶囊式分段切换（性别、节气、真太阳时、夏令时共用） ----- */
.bazi-seg-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* 分段按钮：未选中态（与 login 次要按钮同风格） */
.bazi-seg-btn {
  /* 降低高度与最小宽度，避免单字按钮显得宽矮 */
  height: 36px;
  min-width: 52px;
  padding: 0 20px;
  border: 1px solid var(--border, #f3ede5);
  border-radius: 9999px;
  background: var(--secondary, #fff);
  color: var(--foreground-third-700, rgba(93, 58, 26, 0.7));
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bazi-seg-btn:hover {
  border-color: var(--border-primary, rgba(230, 176, 88, 0.5));
  color: var(--foreground-third, #5d3a1a);
}

/* 分段按钮：选中态（与 login 主提交按钮同风格） */
.bazi-seg-btn--active {
  border-color: transparent;
  background: var(--primary, #f9d194);
  color: var(--primary-foreground, #5d3a1a);
  box-shadow: 0 4px 12px rgba(93, 58, 26, 0.12);
}

.bazi-seg-btn--active:hover {
  border-color: transparent;
  color: var(--primary-foreground, #5d3a1a);
}

/* ----- 生日选择器弹出层 ----- */
.bazi-picker {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: 100%;
  border: 1px solid #eedfcb;
  border-radius: 16px;
  background: var(--card, #fff);
  padding: 16px;
  box-shadow: 0 16px 40px rgba(93, 58, 26, 0.1);
  box-sizing: border-box;
}

/* 选择器下拉框（年月日时） */
.bazi-picker__select {
  height: 40px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid var(--border, #f3ede5);
  border-radius: 8px;
  background: var(--card, #fff);
  font-size: 0.875rem;
  color: var(--foreground-second, #333);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
}

.bazi-picker__select:focus { border-color: var(--primary, #f9d194); }

/* ----- 地点自动补全下拉层 ----- */
.bazi-autocomplete {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 40;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #eedfcb;
  border-radius: 12px;
  background: var(--card, #fff);
  box-shadow: 0 8px 24px rgba(93, 58, 26, 0.08);
}

/* 自动补全选项 */
.bazi-autocomplete__item {
  padding: 8px 14px;
  font-size: 0.875rem;
  color: var(--foreground-second, #333);
  cursor: pointer;
  transition: background 0.15s ease;
}

.bazi-autocomplete__item:hover { background: var(--primary-bg-100, #fffbf5); }

/* ----- 高级选项折叠区域 ----- */
.bazi-advanced {
  border-top: 1px solid var(--border, #f3ede5);
  /* margin-top 不在此设置，由父级 form 的 space-y-6 统一控制 */
  padding-top: 4px;
}

/* 高级选项展开图标旋转 */
.bazi-advanced-icon { transition: transform 0.3s ease; }

/* ----- 中等屏幕响应式：右侧面板仅首页展示，单列布局 ----- */
@media (min-width: 768px) and (max-width: 1199px) {
  .home-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .right-panel {
    display: none;
  }
  /* 首页中等屏幕下右侧面板以卡片形式展示在主内容下方 */
  .home-shell--page-home .right-panel {
    display: flex;
    padding: 0 24px 24px;
  }
}

/* ----- 移动端响应式 ----- */
@media (max-width: 1023px) {
  /* 移动端卡片：保留可见样式，简化 */
  .bazi-form-card {
    border: 1px solid #eedfcb;
    border-radius: 12px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 4px 16px rgba(93, 58, 26, 0.06);
  }

  /* 移动端 hero 区：取消桌面端 min-height: 180px，缩小间距 */
  .home-hero {
    min-height: auto;
  }

  /* 弹出层在移动端全宽 */
  .bazi-picker,
  .bazi-autocomplete {
    position: fixed;
    left: 0;
    right: 0;
    top: auto;
    width: auto;
    max-height: 40vh;
  }

  /* ---- 修复 H5 表格右侧溢出不可滚动 ----
   * 原理：滚动点是 .bazi-scroll-x(overflow-x:auto)。
   * 需保证从视口到该容器的整条链，flex 项都设 min-width:0，
   * 否则宽表格会把 flex 项撑破视口，导致右侧内容被裁且无法滚动。 */

  /* 视口层：约束宽度并裁掉横向溢出，让内部滚动接管 */
  .home-content-shell {
    min-width: 0;
    overflow-x: hidden;
  }

  /* 布局容器：约束宽度 */
  .home-layout {
    min-width: 0;
    overflow-x: hidden;
  }

  /* flex 滚动链各层补 min-width:0，防止被内容撑破 */
  .home-scroll-area,
  .home-main-content {
    min-width: 0;
  }

  /* 页面容器：约束宽度，裁掉横向溢出 */
  .bazi-page-wrapper {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
    /* 移动端取消桌面端的负 margin，改为正值，给标题与表单之间留出呼吸空间 */
    margin-top: 16px;
  }

  /* 移动端表单卡片：不截断横向溢出，让内部 bazi-scroll-x 可滚动 */
  .bazi-form-card {
    min-width: 0;
    max-width: 100%;
    overflow-x: visible;
  }

  /* 移动端排盘结果区：放开 overflow，让 bazi-scroll-x 能横向滚动 */
  .bazi-form-card .bazi-result-section {
    overflow: visible;
  }

  /* 表格在滚动容器内用 width:auto + min-width，防止 width:100% 与 min-width 冲突 */
  .bazi-scroll-x .bazi-table {
    width: auto;
    min-width: 100%;
  }
}

/* ===== 顶部测算类型选择区 ===== */
.fortune-type-selector {
  margin-bottom: 24px;
}

.fortune-type-title {
  text-align: center;
  margin-bottom: 20px;
}

.fortune-type-title__text {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--foreground-third, #3a2e1e);
  font-family: var(--font-serif, 'Noto Serif SC', serif);
  margin: 0;
}

.fortune-type-title__desc {
  font-size: 0.875rem;
  color: var(--foreground-third-700, #6b5d4d);
  margin: 6px 0 0;
}

/* 类型卡片网格 - 3列 */
.fortune-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* 单个类型卡片 */
.fortune-type-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px solid rgba(229, 217, 201, 0.7);
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.fortune-type-card:hover {
  border-color: rgba(180, 140, 80, 0.5);
  box-shadow: 0 4px 16px rgba(139, 105, 20, 0.08);
  transform: translateY(-1px);
}

/* 选中态 */
.fortune-type-card--active {
  border-color: #b28a57;
  background: linear-gradient(135deg, #fffcf5 0%, #fdf6e9 100%);
  box-shadow: 0 4px 20px rgba(139, 105, 20, 0.12);
}

/* 卡片图标容器 */
.fortune-type-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fcf6ec 0%, #f5ead6 100%);
  color: #8b6914;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fortune-type-card__icon svg {
  width: 20px;
  height: 20px;
}

.fortune-type-card--active .fortune-type-card__icon {
  background: linear-gradient(135deg, #b28a57 0%, #d4a84b 100%);
  color: #ffffff;
}

/* 卡片信息区 */
.fortune-type-card__info {
  min-width: 0;
}

.fortune-type-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--foreground-third, #3a2e1e);
}

.fortune-type-card__desc {
  font-size: 0.6875rem;
  color: var(--foreground-third-700, #6b5d4d);
  line-height: 1.125rem;
  margin-top: 1px;
}

/* ===== 表单区域（login 风格） ===== */
.fortune-form-section { width: 100%; }

/* 表单卡片（与 login-desktop-card 同风格） */
.fortune-form-card {
  border: 1px solid #eedfcb;
  border-radius: 16px;
  background: var(--card, #fff);
  padding: 32px;
  box-shadow: 0 16px 40px rgba(93, 58, 26, 0.1);
}

/* 表单卡片头部 */
.fortune-form-card__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e9dfd1;
}

.fortune-form-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fcf6ec 0%, #f5ead6 100%);
  color: #8b6914;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fortune-form-card__icon svg {
  width: 24px;
  height: 24px;
}

.fortune-form-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground-third, #3a2e1e);
  margin: 0;
}

.fortune-form-card__subtitle {
  font-size: 0.8125rem;
  color: var(--foreground-third-700, rgba(93, 58, 26, 0.7));
  margin: 2px 0 0;
}

/* 表单隐藏控制 */
.fortune-form--hidden { display: none; }

/* 下拉选择框（login 风格：与输入框一致） */
.fortune-form__select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border, #f3ede5);
  border-radius: 8px;
  background: var(--card, #fff);
  font-size: 15px;
  color: var(--foreground-second, #333);
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.fortune-form__select:focus { border-color: var(--primary, #f9d194); }

/* 双人表单分组标题 */
.fortune-form__pair-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8b6914;
  margin-bottom: 12px;
}

.fortune-form__pair-title svg { color: #8b6914; }

/* ===== 移动端响应式 ===== */
@media (max-width: 1023px) {
  .bazi-mobile-header { display: block; }
  .bazi-desktop-sidebar { display: none; }
  .bazi-center-background { display: none; }
  .bazi-main-content { min-height: auto; }
  .bazi-scroll-area { overflow-y: auto; }

  .bazi-content {
    align-items: center;
    padding: 0;
  }

  .bazi-content-shell {
    background: linear-gradient(180deg, #fcfaf7 0%, #faf5ee 62%, #fcfaf5 100%);
  }

  .bazi-layout {
    min-width: 0;
    max-width: none;
    padding: 16px 16px 32px;
  }

  .bazi-body {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
  }

  .bazi-center {
    gap: 12px;
    padding-bottom: 0;
  }

  .bazi-page-wrapper { max-width: none; }

  .fortune-type-title__text { font-size: 1.375rem; }

  .fortune-type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .fortune-type-card {
    padding: 10px 12px;
    gap: 8px;
    border-radius: 10px;
  }

  .fortune-type-card__icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .fortune-type-card__icon svg { width: 16px; height: 16px; }
  .fortune-type-card__name { font-size: 0.8125rem; }
  .fortune-type-card__desc { display: none; }

  /* 移动端表单卡片：去掉边框阴影（与 login-mobile-card 一致） */
  .fortune-form-card {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .fortune-form-card__header {
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
}

/* =========================================================
 * 国学推演页布局样式 (fortune-page)
 * 布局结构与 bazi-page 相同，使用 fortune- 前缀
 * ========================================================= */

.fortune-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}

.fortune-mobile-header { display: none; }

.fortune-main {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.fortune-desktop-sidebar { display: flex; flex: 0 0 auto; }

.fortune-main-content {
  display: flex;
  min-height: 100vh;
  flex: 1 1 auto;
  flex-direction: column;
  overflow-x: hidden;
}

.fortune-scroll-area { display: flex; flex: 1 1 auto; overflow-y: hidden; }

.fortune-content-shell {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--primary-bg-100, #fcfaf7);
}

.fortune-content {
  position: relative;
  z-index: 10;
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

/* ----- 左右栅格布局（与 home-layout/home-body/home-center 同结构） ----- */
.fortune-layout {
  position: relative;
  z-index: 10;
  width: 100%;
  min-width: 600px;
  max-width: 1280px;
  padding: 32px 32px 0;
}

.fortune-body {
  display: grid;
  min-height: 0;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.fortune-center {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 64px;
}

.fortune-center-background {
  position: absolute;
  background-image: url("../img/bg_@2.webp");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
  inset: 0;
  opacity: 0.65;
}

.fortune-page-wrapper {
  width: 100%;
  max-width: 720px;
}

@media (max-width: 1023px) {
  .fortune-mobile-header { display: block; }
  .fortune-desktop-sidebar { display: none; }
  .fortune-center-background { display: none; }
  .fortune-main-content { min-height: auto; }
  .fortune-scroll-area { overflow-y: auto; }

  .fortune-content {
    align-items: center;
    padding: 0;
  }

  .fortune-content-shell {
    background: linear-gradient(180deg, #fcfaf7 0%, #faf5ee 62%, #fcfaf5 100%);
  }

  .fortune-layout {
    min-width: 0;
    max-width: none;
    padding: 16px 16px 32px;
  }

  .fortune-body {
    display: flex;
    flex-direction: column-reverse;
    gap: 12px;
  }

  .fortune-center {
    gap: 12px;
    padding-bottom: 0;
  }

  .fortune-page-wrapper { max-width: none; }
}

/* =========================================================
 * 关于我们页面专有样式 (about-page)
 * ========================================================= */

/* 关于页标题区 */
.about-hero {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px 16px;
  text-align: center;
}

/* 关于页段落间距 */
.about-section {
  margin-top: 8px;
}

/* 关于页内容卡片 */
.about-card {
  border: 1px solid rgba(229, 217, 201, 0.95);
  border-radius: 16px;
  background: #ffffff;
  padding: 28px 32px;
  box-shadow: 0 8px 24px rgba(93, 58, 26, 0.06);
}

/* 关于页卡片图标 */
.about-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fcf6ec 0%, #f5ead6 100%);
  color: #8b6914;
  margin-bottom: 16px;
}

/* 关于页卡片标题 */
.about-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  color: var(--foreground-third, #3a2e1e);
  margin-bottom: 12px;
}

/* 关于页卡片正文 */
.about-card__text {
  font-size: 0.875rem;
  line-height: 1.75rem;
  color: var(--foreground-third-700, #6b5d4d);
  margin-bottom: 8px;
}

.about-card__text:last-child {
  margin-bottom: 0;
}

/* 关于页核心理念网格 */
.about-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 8px;
}

/* 关于页理念单项 */
.about-value-item {
  padding: 16px;
  border: 1px solid rgba(229, 217, 201, 0.6);
  border-radius: 12px;
  background: #fffdf9;
}

/* 关于页理念项标题 */
.about-value-item__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--foreground-third, #3a2e1e);
  margin-bottom: 6px;
}

/* 关于页理念项描述 */
.about-value-item__desc {
  font-size: 0.8125rem;
  line-height: 1.5rem;
  color: var(--foreground-third-700, #6b5d4d);
  margin: 0;
}

/* =========================================================
 * 联系支持页面专有样式 (contact-page)
 * ========================================================= */

/* 联系页标题区 */
.contact-hero {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px 16px;
  text-align: center;
}

/* 联系页段落间距 */
.contact-section {
  margin-top: 8px;
}

/* 联系方式卡片网格 */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* 联系方式单项卡片 */
.contact-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(229, 217, 201, 0.95);
  border-radius: 16px;
  background: #ffffff;
  padding: 24px 20px;
  box-shadow: 0 8px 24px rgba(93, 58, 26, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-method-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(93, 58, 26, 0.10);
}

/* 联系方式图标 */
.contact-method-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fcf6ec 0%, #f5ead6 100%);
  color: #8b6914;
  margin-bottom: 14px;
}

/* 联系方式卡片主体 */
.contact-method-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 联系方式卡片标题 */
.contact-method-card__title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--foreground-third, #3a2e1e);
}

/* 联系方式卡片描述 */
.contact-method-card__desc {
  font-size: 0.8125rem;
  line-height: 1.375rem;
  color: var(--foreground-third-700, #6b5d4d);
  margin: 0;
}

/* 联系方式链接 */
.contact-method-card__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #8b6914;
  transition: color 0.15s ease;
}

.contact-method-card__link:hover {
  color: #6b4f0d;
}

/* 联系方式标签（非链接） */
.contact-method-card__label {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #8b6914;
}

/* 联系页内容卡片 */
.contact-card {
  border: 1px solid rgba(229, 217, 201, 0.95);
  border-radius: 16px;
  background: #ffffff;
  padding: 28px 32px;
  box-shadow: 0 8px 24px rgba(93, 58, 26, 0.06);
}

/* 联系页卡片图标 */
.contact-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fcf6ec 0%, #f5ead6 100%);
  color: #8b6914;
  margin-bottom: 16px;
}

/* 联系页卡片标题 */
.contact-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
  color: var(--foreground-third, #3a2e1e);
  margin-bottom: 12px;
}

/* 联系页卡片正文 */
.contact-card__text {
  font-size: 0.875rem;
  line-height: 1.75rem;
  color: var(--foreground-third-700, #6b5d4d);
  margin-bottom: 8px;
}

.contact-card__text:last-child {
  margin-bottom: 0;
}

/* 常见问题列表 */
.contact-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* 常见问题单项 */
.contact-faq-item {
  padding: 16px;
  border: 1px solid rgba(229, 217, 201, 0.6);
  border-radius: 12px;
  background: #fffdf9;
}

/* 常见问题问题标题 */
.contact-faq-item__question {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--foreground-third, #3a2e1e);
  margin-bottom: 6px;
}

/* 常见问题答案 */
.contact-faq-item__answer {
  font-size: 0.8125rem;
  line-height: 1.5rem;
  color: var(--foreground-third-700, #6b5d4d);
  margin: 0;
}

/* =========================================================
 * 底部语言切换下拉菜单样式
 * ========================================================= */

/* 语言切换容器 - 相对定位 */
.footer-lang-switcher {
  position: relative;
  display: flex;
  justify-content: center;
}

/* 下拉面板 - 默认隐藏 */
.footer-lang-dropdown {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  min-width: 160px;
  border: 1px solid rgba(229, 217, 201, 0.95);
  border-radius: 12px;
  background: #ffffff;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(93, 58, 26, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  z-index: 100;
}

/* 下拉面板展开态 */
.footer-lang-dropdown--open {
  opacity: 1;
  visibility: visible;
}

/* 语言选项按钮 */
.footer-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--foreground-third-700, #6b5d4d);
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease;
  text-align: left;
}

.footer-lang-option:hover {
  background: rgba(139, 105, 20, 0.06);
}

/* 选中状态 */
.footer-lang-option--active {
  color: var(--foreground-third, #3a2e1e);
  font-weight: 600;
}

/* 勾选标记 */
.footer-lang-option__check {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: #8b6914;
}

/* 语言名称 */
.footer-lang-option__text {
  flex: 1;
}

/* 语言代码标签 */
.footer-lang-option__code {
  font-size: 0.6875rem;
  color: #aeaeb0;
  letter-spacing: 0.04em;
}

/* 箭头旋转过渡 */
.footer-lang-chevron {
  transition: transform 0.2s ease;
}

/* =========================================================
 * 侧栏语言切换下拉面板样式（浮动弹出，与 footer 一致）
 * ========================================================= */

/* 侧栏语言切换容器 */
.sidebar-lang-wrapper {
  position: relative;
}

/* 侧栏语言浮动下拉面板 */
.sidebar-lang-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  min-width: 160px;
  border: 1px solid rgba(229, 217, 201, 0.95);
  border-radius: 12px;
  background: #ffffff;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(93, 58, 26, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 100;
}

.sidebar-lang-dropdown--open {
  opacity: 1;
  visibility: visible;
}

/* 侧栏语言选项按钮 */
.sidebar-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--foreground-third-700, #6b5d4d);
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease;
  text-align: left;
}

.sidebar-lang-option:hover {
  background: rgba(139, 105, 20, 0.06);
}

.sidebar-lang-option--active {
  color: var(--foreground-third, #3a2e1e);
  font-weight: 600;
}

.sidebar-lang-option__check {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: #8b6914;
}

.sidebar-lang-option__text {
  flex: 1;
}

.sidebar-lang-option__code {
  font-size: 0.6875rem;
  color: #aeaeb0;
  letter-spacing: 0.04em;
}

/* 侧栏箭头旋转过渡 */
.sidebar-lang-chevron {
  transition: transform 0.2s ease;
}

/* =========================================================
 * 移动端抽屉语言切换下拉面板样式（浮动弹出，与 footer 一致）
 * ========================================================= */

/* 抽屉语言切换容器 */
.drawer-lang-wrapper {
  position: relative;
}

/* 抽屉语言浮动下拉面板 */
.drawer-lang-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 6px;
  min-width: 160px;
  border: 1px solid rgba(229, 217, 201, 0.95);
  border-radius: 12px;
  background: #ffffff;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(93, 58, 26, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 100;
}

.drawer-lang-dropdown--open {
  opacity: 1;
  visibility: visible;
}

/* 抽屉语言选项按钮 */
.drawer-lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--foreground-third-700, #6b5d4d);
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease;
  text-align: left;
}

.drawer-lang-option:hover {
  background: rgba(139, 105, 20, 0.06);
}

.drawer-lang-option--active {
  color: var(--foreground-third, #3a2e1e);
  font-weight: 600;
}

.drawer-lang-option__check {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
  font-size: 0.75rem;
  color: #8b6914;
}

.drawer-lang-option__text {
  flex: 1;
}

.drawer-lang-option__code {
  font-size: 0.6875rem;
  color: #aeaeb0;
  letter-spacing: 0.04em;
}

/* 抽屉箭头旋转过渡 */
.drawer-lang-chevron {
  transition: transform 0.2s ease;
}

/* 移动端响应式：关于页和联系页 */
@media (max-width: 1023px) {
  .about-hero {
    padding: 16px 16px 12px;
    min-height: auto;
  }

  .about-card {
    padding: 20px 20px;
    border-radius: 12px;
  }

  .about-values {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contact-hero {
    padding: 16px 16px 12px;
    min-height: auto;
  }

  .contact-methods {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contact-card {
    padding: 20px 20px;
    border-radius: 12px;
  }
}