/* =============================================================================
   win11.css — 全站统一 UI 设计规范（Windows 11 Fluent Design）v3.0
   -----------------------------------------------------------------------------
   【使用方式】在每个 HTML 页面 <head> 中、页面自身 <style> 之前引入：
       <link rel="stylesheet" href="https://lcql.cn/assets/assets/win11.css">        （根目录页面）
       <link rel="stylesheet" href="https://lcql.cn/assets/win11.css">     （子目录页面）
       并在 </body> 前引入动效脚本：
       <script src="https://lcql.cn/assets/assets/win11-motion.js"></script>

   【v3.0 本次升级】
   - 全站统一的 Fluent 缓动曲线（加速 / 减速 / 弹簧）与时长令牌；
   - 页面入场淡入 + 站内跳转淡出转场；
   - 导航：亚克力材质 + 滚动加深 + 入场下滑 + 胶囊悬停下划线；
   - 按钮：Win11 按压回弹 + 点击水波纹 + 焦点环；
   - 卡片：统一悬浮抬升、描边泛蓝、柔和分层阴影；
   - 弹窗：遮罩淡入 + 弹窗弹簧缩放入场（含各类 .modal / .modal-overlay）；
   - 提示条：弹簧滑入；输入框：悬停/聚焦光晕；
   - 页面级滚动入场动画（scroll-driven，无需 JS，渐进增强）；
   - 页面切换淡入淡出转场。

   【原则】只统一"视觉表现"（配色 / 圆角 / 阴影 / 材质 / 动效 / 交互反馈），
   不改变任何页面的布局（display / grid / flex / width / padding / position）。
   ============================================================================= */


/* ===================== [1] 设计令牌（全站唯一视觉规范源） ===================== */
:root {
  /* --- 1.1 配色（Windows 11 默认系统色板） --- */
  --win11-accent:        #0078D4;  /* 主强调色：Windows 蓝          */
  --win11-accent-hover:  #106EBE;  /* 强调色 hover 态               */
  --win11-accent-active: #005A9E;  /* 强调色 active 按压态          */
  --win11-accent-soft:   #E1EFFD;  /* 强调色浅底（徽章 / 选中背景） */
  --win11-accent-ring:   rgba(0, 120, 212, 0.20);  /* focus 光晕 */
  --win11-accent-alt:    #2B88D8;  /* 强调色渐变辅色（装饰用）      */

  --win11-text:          #1F1F1F;  /* 一级文字（标题 / 强调）       */
  --win11-text-secondary:#4A4A4A;  /* 二级文字（正文）              */
  --win11-text-tertiary: #6B6B6B;  /* 三级文字（辅助 / 占位）       */
  --win11-text-disabled: #9E9E9E;  /* 禁用文字                      */

  --win11-bg:            #F3F3F3;  /* 页面基底背景（Win11 中性灰）  */
  --win11-bg-elevated:   #FFFFFF;  /* 抬升背景                      */
  --win11-surface:       #FFFFFF;  /* 卡片 / 面板表面               */
  --win11-surface-hover: #F9F9F9;  /* 表面 hover 态                 */
  --win11-surface-sunken:#F5F5F5;  /* 内凹 / 次级填充               */
  --win11-border:        #E5E5E5;  /* 常规边框                      */
  --win11-border-input:  #E0E0E0;  /* 输入框边框                    */
  --win11-border-strong: rgba(0, 0, 0, 0.12);
  --win11-border-subtle: rgba(0, 0, 0, 0.06);

  --win11-success: #107C10;        /* 成功（Win11 绿） */
  --win11-warning: #B7860B;        /* 警告（Win11 金） */
  --win11-danger:  #D13438;        /* 错误 / 危险（Win11 红） */

  /* --- 1.2 材质（Mica 云母 / Acrylic 亚克力） --- */
  --win11-mica:
    radial-gradient(circle at 18% -10%, rgba(0, 120, 212, 0.10) 0%, transparent 42%),
    radial-gradient(circle at 88% 6%,  rgba(0, 168, 244, 0.08) 0%, transparent 38%),
    linear-gradient(160deg, #EAF3FB 0%, #F3F3F3 46%, #F5F7FA 100%);
  --win11-acrylic:        rgba(243, 243, 243, 0.85);
  --win11-acrylic-strong: rgba(255, 255, 255, 0.72);
  --win11-blur:     20px;
  --win11-saturate: 180%;
  --win11-acrylic-filter: blur(var(--win11-blur)) saturate(var(--win11-saturate));

  /* --- 1.3 字体层级 --- */
  --win11-font: 'Segoe UI Variable', 'Segoe UI', -apple-system,
                BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
  --win11-fs-display: 32px;
  --win11-fs-title:   24px;
  --win11-fs-subtitle:18px;
  --win11-fs-body:    14px;
  --win11-fs-caption: 12px;
  --win11-fw-regular: 400;
  --win11-fw-medium:  500;
  --win11-fw-bold:    600;

  /* --- 1.4 间距（4px 基准网格） --- */
  --win11-space-xs:  4px;
  --win11-space-sm:  8px;
  --win11-space-md:  12px;
  --win11-space-lg:  16px;
  --win11-space-xl:  24px;
  --win11-space-xxl: 32px;

  /* --- 1.5 圆角（Win11 圆角体系） --- */
  --win11-radius-sm: 4px;
  --win11-radius-md: 8px;
  --win11-radius-lg: 12px;
  --win11-radius-xl: 16px;

  /* --- 1.6 阴影（Fluent 分层深度） --- */
  --win11-shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.04);
  --win11-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --win11-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --win11-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
  --win11-shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);

  /* --- 1.7 动效（Fluent 标准缓动 + 时长） --- */
  --win11-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);   /* 标准：进出对称 */
  --win11-ease-decel:    cubic-bezier(0.1, 0.9, 0.2, 1);   /* 减速：入场 */
  --win11-ease-accel:    cubic-bezier(0.7, 0.0, 1.0, 0.5); /* 加速：出场 */
  --win11-ease-spring:   cubic-bezier(0.16, 1.16, 0.28, 1);/* 弹簧：轻微回弹 */
  --win11-dur-fast:   120ms;
  --win11-dur-mid:    200ms;
  --win11-dur-slow:   320ms;
  --win11-dur-slower: 480ms;
  --win11-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 兼容层：把页面中历史沿用的各种变量名统一映射到上面的规范令牌。 */
:root {
  --win-accent:        var(--win11-accent);
  --win-accent-hover:  var(--win11-accent-hover);
  --win-accent-active: var(--win11-accent-active);
  --win-surface:       var(--win11-surface);
  --win-card:          var(--win11-surface);
  --win-card-solid:    var(--win11-surface);
  --win-radius:        var(--win11-radius-lg);
  --win-radius-sm:     var(--win11-radius-md);
  --win-radius-md:     var(--win11-radius-lg);
  --win-radius-lg:     var(--win11-radius-xl);
  --win-text:          var(--win11-text);
  --win-text-secondary:var(--win11-text-secondary);
  --win-text-tertiary: var(--win11-text-tertiary);
  --win-bg:            var(--win11-bg);
  --win-border:        var(--win11-border);
  --win-shadow-sm:     var(--win11-shadow-sm);
  --win-shadow-md:     var(--win11-shadow-md);
  --win-shadow-lg:     var(--win11-shadow-lg);
  --win-transition:    var(--win11-transition);

  --primary:           var(--win11-accent);
  --accent:            var(--win11-accent);
  --win-blue:          var(--win11-accent);
  --bg:                var(--win11-bg);
  --card:              var(--win11-surface);
  --card-bg:           var(--win11-surface);
  --border:            var(--win11-border);
  --text:              var(--win11-text);
  --text-primary:      var(--win11-text);
  --text-secondary:    var(--win11-text-secondary);
  --radius:            var(--win11-radius-lg);
  --radius-btn:        var(--win11-radius-md);
  --shadow:            var(--win11-shadow-sm);
}


/* ===================== [2] 全站 Mica 云母背景层 ===================== */
html {
  background-color: var(--win11-bg);
  background-image: var(--win11-mica);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100%;
}

body {
  background-color: var(--win11-bg) !important;
  background-image: var(--win11-mica) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--win11-font);
  color: var(--win11-text);
  /* 页面入场淡入（仅 opacity，不产生额外合成层） */
  animation: win11-page-in var(--win11-dur-slow) var(--win11-ease-decel) both;
}

/* 页面入场 */
@keyframes win11-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 页面离场（由 win11-motion.js 在站内跳转时添加 .win-leaving） */
html.win-leaving body {
  animation: none !important;
  opacity: 0 !important;
  transition: opacity 160ms ease !important;
}


/* ===================== [3] 全站亚克力导航材质 ===================== */
header,
.header,
.site-header,
.app-header,
.topbar {
  background-color: rgba(245, 245, 245, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  transition: background-color var(--win11-dur-slow) var(--win11-ease-standard),
              box-shadow var(--win11-dur-slow) var(--win11-ease-standard),
              border-color var(--win11-dur-slow) var(--win11-ease-standard) !important;
  animation: win11-header-in var(--win11-dur-slower) var(--win11-ease-decel) both;
}

/* 顶部细渐变高光，随滚动显现 */
header::after,
.header::after,
.site-header::after,
.app-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 120, 212, 0.35) 35%,
      rgba(64, 196, 255, 0.55) 50%,
      rgba(0, 120, 212, 0.35) 65%,
      transparent 100%);
  opacity: 0;
  transition: opacity var(--win11-dur-slow) var(--win11-ease-standard);
  pointer-events: none;
}

/* 滚动后：导航更实、更深、更"抬升"（由 win11-motion.js 添加） */
header.win-scrolled,
.header.win-scrolled,
.site-header.win-scrolled,
.app-header.win-scrolled,
.topbar.win-scrolled {
  background-color: rgba(250, 250, 250, 0.88) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 10px 28px rgba(0, 0, 0, 0.05) !important;
  border-bottom-color: rgba(0, 0, 0, 0.10) !important;
}

header.win-scrolled::after,
.header.win-scrolled::after,
.site-header.win-scrolled::after,
.app-header.win-scrolled::after {
  opacity: 1;
}

@keyframes win11-header-in {
  from { opacity: 0; translate: 0 -14px; }
  to   { opacity: 1; translate: 0 0; }
}


/* ===================== [4] 导航项（Fluent 胶囊 + 居中下划线） ===================== */
.nav-links a,
header nav ul li > a {
  position: relative;
  border-radius: var(--win11-radius-md) !important;
  transition: color var(--win11-dur-mid) var(--win11-ease-standard),
              background-color var(--win11-dur-mid) var(--win11-ease-standard),
              transform var(--win11-dur-fast) var(--win11-ease-standard) !important;
}

.nav-links a::after,
header nav ul li > a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--win11-accent);
  transition: width var(--win11-dur-mid) var(--win11-ease-decel) !important;
  pointer-events: none;
}

@media (hover: hover) {
  .nav-links a:hover,
  header nav ul li > a:hover {
    background-color: rgba(0, 120, 212, 0.08) !important;
    color: var(--win11-accent) !important;
  }

  .nav-links a:hover::after,
  header nav ul li > a:hover::after {
    width: 20px !important;
  }

  /* Logo 悬停微缩放 */
  .logo:hover {
    transform: scale(1.05);
  }
}

.nav-links a:active,
header nav ul li > a:active {
  transform: scale(0.97);
}

.logo {
  transition: transform var(--win11-dur-mid) var(--win11-ease-spring) !important;
}


/* ===================== [5] 基础渲染 ===================== */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(0, 120, 212, 0.25);
  color: inherit;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #C8C8C8;
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color var(--win11-dur-mid) linear;
}
::-webkit-scrollbar-thumb:hover {
  background: #A8A8A8;
  background-clip: content-box;
  border: 2px solid transparent;
}

/* 章节标题：居中渐变色强调条（Win11 强调色） */
.section-title::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin: 0.7rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--win11-accent), #40C4FF);
}

/* 页头 / Hero 文字入场 */
.page-header h1,
.hero h1 {
  animation: win11-fade-up var(--win11-dur-slower) var(--win11-ease-decel) both;
}
.page-header p,
.hero p {
  animation: win11-fade-up var(--win11-dur-slower) var(--win11-ease-decel) 90ms both;
}

@keyframes win11-fade-up {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}


/* 页头：缓慢游走的极光光晕，强化 Win11 材质层次 */
.page-header {
  position: relative;
  overflow: hidden;
}

.page-header::after {
  content: '';
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(620px circle at 18% 0%, rgba(0, 120, 212, 0.12), transparent 60%),
    radial-gradient(520px circle at 86% 18%, rgba(0, 188, 242, 0.12), transparent 58%);
  animation: win11-aurora 22s ease-in-out infinite alternate;
  pointer-events: none;
}

.page-header > * {
  position: relative;
  z-index: 1;
}

@keyframes win11-aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}


/* ===================== [6] 按钮交互状态 ===================== */
button,
[role="button"],
input[type="submit"],
input[type="button"],
.btn,
.cta-button {
  transition: filter var(--win11-dur-fast) var(--win11-ease-standard),
              transform var(--win11-dur-fast) var(--win11-ease-standard),
              box-shadow var(--win11-dur-slow) var(--win11-ease-standard),
              background-color var(--win11-dur-mid) var(--win11-ease-standard),
              border-color var(--win11-dur-mid) var(--win11-ease-standard),
              color var(--win11-dur-mid) var(--win11-ease-standard);
}

@media (hover: hover) {
  button:not(:disabled):hover,
  [role="button"]:not(:disabled):hover,
  input[type="submit"]:not(:disabled):hover,
  input[type="button"]:not(:disabled):hover {
    filter: brightness(1.05);
  }
}

button:not(:disabled):active,
[role="button"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="button"]:not(:disabled):active {
  filter: brightness(0.94);
  transform: scale(0.97);
}

button:disabled,
[role="button"][disabled],
input:disabled,
select:disabled,
textarea:disabled,
a[disabled],
.btn-disabled,
.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  filter: none !important;
  transform: none !important;
  pointer-events: none;
}

/* 点击水波纹（由 win11-motion.js 注入 .win-ripple） */
.win-rippling {
  position: relative !important;
  overflow: hidden !important;
}

.win-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.20;
  pointer-events: none;
  transform: scale(0);
  animation: win11-ripple 620ms var(--win11-ease-decel) forwards;
}

@keyframes win11-ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}


/* ===================== [7] 输入控件交互状态 ===================== */
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover {
  border-color: var(--win11-border-strong);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
  border-color: var(--win11-accent);
  box-shadow: 0 0 0 2px var(--win11-accent-ring), 0 1px 2px rgba(0, 0, 0, 0.04);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--win11-text-disabled);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  transition: border-color var(--win11-dur-mid) var(--win11-ease-standard),
              box-shadow var(--win11-dur-mid) var(--win11-ease-standard),
              background-color var(--win11-dur-mid) var(--win11-ease-standard);
}


/* ===================== [8] 卡片 / 可交互表面 ===================== */
/* 统一悬浮过渡（页面自身若已定义过渡，则页面优先，保持其原有效果） */
.card,
.product-card,
.news-card,
.service-card,
.project-card,
.order-card,
.order-item,
.info-card,
.license-card,
.contact-card,
.stat-card,
.stats-card,
.member-card,
.category-card,
.popular-card,
.filter-card,
.section-card,
.address-item,
.favorite-card,
.team-intro,
.promo-banner,
.profile-banner,
.profile-header,
.menu-btn {
  transition: transform var(--win11-dur-slow) var(--win11-ease-decel),
              box-shadow var(--win11-dur-slow) var(--win11-ease-decel),
              border-color var(--win11-dur-slow) var(--win11-ease-decel),
              background-color var(--win11-dur-slow) var(--win11-ease-decel);
}

@media (hover: hover) {
  .card:hover,
  .product-card:hover,
  .news-card:hover,
  .service-card:hover,
  .project-card:hover,
  .order-card:hover,
  .info-card:hover,
  .license-card:hover,
  .contact-card:hover,
  .stat-card:hover,
  .member-card:hover,
  .category-card:hover,
  .popular-card:hover,
  .section-card:hover,
  .address-item:hover,
  .favorite-card:hover,
  .team-intro:hover,
  .profile-banner:hover {
    box-shadow: var(--win11-shadow-hover);
    border-color: rgba(0, 120, 212, 0.22);
    transform: translateY(-4px);
  }
}

/* 表格行悬停：Win11 淡蓝高亮 */
table tbody tr {
  transition: background-color var(--win11-dur-mid) var(--win11-ease-standard);
}

@media (hover: hover) {
  table tbody tr:hover {
    background-color: rgba(0, 120, 212, 0.045);
  }
}


/* ===================== [9] 弹窗 / 对话框（Win11 ContentDialog） ===================== */
/* 9.1 遮罩：变暗 + 亚克力模糊 */
.modal-overlay {
  background: rgba(0, 0, 0, 0.40) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  overscroll-behavior: contain;
}

/* 9.2 遮罩淡入（.active / .show 两种历史写法都覆盖） */
.modal-overlay.active,
.modal-overlay.show,
.modal.active,
.modal.show,
.lc-overlay.show {
  animation: win11-overlay-in var(--win11-dur-mid) var(--win11-ease-standard) both;
}

@keyframes win11-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 9.3 弹窗本体：弹簧缩放入场（使用独立 translate/scale，不干扰页面原有的
   transform 居中写法） */
.modal-overlay.active > .modal-content,
.modal-overlay.active .modal-content,
.modal-overlay.active > .modal,
.modal-overlay.show > .modal-content,
.modal-overlay.show .modal-content,
.modal-overlay.show > .modal,
.modal-overlay.show > .lc-modal,
.modal.active > .modal-content,
.modal.show > .modal-content,
.modal.show .modal-content,
.lc-overlay.show > .lc-modal {
  animation: win11-dialog-in 360ms var(--win11-ease-spring) both;
  transform-origin: center;
}

@keyframes win11-dialog-in {
  from {
    opacity: 0;
    translate: 0 18px;
    scale: 0.96;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/* 9.3b 出场动画：平滑淡出 + 轻微下沉（关闭时由 win11-motion.js 添加 .win11-closing） */
.modal-overlay.win11-closing,
.modal.win11-closing,
.lc-overlay.win11-closing {
  animation: win11-overlay-out var(--win11-dur-mid) var(--win11-ease-accel) both;
  pointer-events: none;
}

.modal-overlay.win11-closing > .modal-content,
.modal-overlay.win11-closing .modal-content,
.modal-overlay.win11-closing > .modal,
.modal-overlay.win11-closing > .lc-modal,
.modal.win11-closing > .modal-content,
.modal.win11-closing .modal-content,
.lc-overlay.win11-closing > .lc-modal {
  animation: win11-dialog-out var(--win11-dur-mid) var(--win11-ease-accel) both;
}

@keyframes win11-overlay-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes win11-dialog-out {
  from {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  to {
    opacity: 0;
    translate: 0 10px;
    scale: 0.97;
  }
}

/* 9.4 弹窗卡片本体：纯白表面 + 细边框 + 强分层阴影 */
.modal,
.modal-content,
.modal-dialog {
  background: #FFFFFF !important;
  border: 1px solid var(--win11-border) !important;
  border-radius: var(--win11-radius-lg) !important;
  box-shadow: var(--win11-shadow-dialog) !important;
  color: var(--win11-text) !important;
}

/* 嵌套的 .modal-content 不再重复卡片外观 */
.modal .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* 9.5 头部 / 底部细分割线 */
.modal-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--win11-border) !important;
}
.modal-footer {
  border-top: 1px solid var(--win11-border) !important;
}
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-title {
  color: var(--win11-text) !important;
  font-weight: var(--win11-fw-bold) !important;
}
.modal-body,
.modal-text {
  color: var(--win11-text-secondary) !important;
}

/* 9.6 关闭按钮：Win11 图标按钮 */
.modal-header .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--win11-radius-sm) !important;
  color: var(--win11-text-secondary) !important;
  transition: background-color var(--win11-dur-mid) var(--win11-ease-standard),
              color var(--win11-dur-mid) var(--win11-ease-standard) !important;
}
.modal-header .modal-close:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--win11-text) !important;
}

/* 9.7 弹窗内按钮统一 Win11 圆角 */
.modal button,
.modal-content button,
.modal-footer button,
.modal-content .btn,
.modal-footer .btn {
  border-radius: var(--win11-radius-md) !important;
}

/* 9.8 细节打磨：焦点环 / 关闭按钮按压 / 卡片分层 */
.modal,
.modal-content,
.modal-dialog,
.lc-modal {
  position: relative !important;
  transition: box-shadow var(--win11-dur-mid) var(--win11-ease-standard) !important;
}

.modal:focus-visible,
.modal-content:focus-visible,
.modal-dialog:focus-visible,
.lc-modal:focus-visible {
  outline: 2px solid var(--win11-accent-ring) !important;
  outline-offset: 3px !important;
}

.modal-header .modal-close:active {
  transform: scale(0.92);
  background: rgba(0, 0, 0, 0.08) !important;
}
.modal-header .modal-close:focus-visible {
  outline: 2px solid var(--win11-accent-ring) !important;
  outline-offset: -2px !important;
}

/* 弹窗主体滚动更顺滑 */
.modal-body,
.modal-text,
.lc-modal-body {
  scrollbar-width: thin;
  scrollbar-color: var(--win11-border-strong) transparent;
}
.modal-body::-webkit-scrollbar,
.lc-modal-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.modal-body::-webkit-scrollbar-thumb,
.lc-modal-body::-webkit-scrollbar-thumb {
  background: var(--win11-border-strong);
  border-radius: 4px;
}


/* ===================== [10] 提示条 Toast（Win11 InfoBar） ===================== */
.toast {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  color: var(--win11-text) !important;
  border: 1px solid var(--win11-border) !important;
  border-left-width: 4px !important;
  border-radius: var(--win11-radius-md) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  z-index: 2147482500 !important;
}

.toast.show,
.toast.active {
  animation: win11-toast-in 420ms var(--win11-ease-spring) both !important;
}

/* 出场：与入场对称地淡出上移（关闭时由 win11-motion.js 添加 .win11-closing） */
.toast.win11-closing {
  animation: win11-toast-out var(--win11-dur-mid) var(--win11-ease-accel) both !important;
  pointer-events: none;
}

@keyframes win11-toast-in {
  from {
    opacity: 0;
    translate: 0 -22px;
    scale: 0.96;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes win11-toast-out {
  from {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  to {
    opacity: 0;
    translate: 0 -16px;
    scale: 0.98;
  }
}

.toast.info    { border-left-color: var(--win11-accent) !important; }
.toast.success { border-left-color: var(--win11-success) !important; }
.toast.error   { border-left-color: var(--win11-danger) !important; }
.toast.warning { border-left-color: var(--win11-warning) !important; }
.toast.info i    { color: var(--win11-accent) !important; }
.toast.success i { color: var(--win11-success) !important; }
.toast.error i   { color: var(--win11-danger) !important; }
.toast.warning i { color: var(--win11-warning) !important; }


/* ===================== [11] 加载态（骨架屏 / 旋转指示器） ===================== */
.skeleton-img,
.skeleton-icon,
.skeleton {
  background-image: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 80%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: win11-shimmer 1.4s linear infinite;
}

@keyframes win11-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -60% 0; }
}

/* 旋转指示器：统一为 Fluent 平滑旋转 */
.spinner,
.loading-spinner {
  animation: win11-spin 900ms linear infinite;
}

@keyframes win11-spin {
  to { transform: rotate(360deg); }
}


/* ===================== [12] 首屏氛围光斑（Hero） ===================== */
/* 首页 Hero 中缓慢漂浮的柔光，让首屏更有呼吸感 */
.hero::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -140px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 168, 244, 0.20) 0%, rgba(0, 120, 212, 0.06) 45%, transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  animation: win11-float 16s var(--win11-ease-standard) infinite alternate;
}

@keyframes win11-float {
  from { translate: 0 0; scale: 1; opacity: 0.85; }
  to   { translate: -50px -38px; scale: 1.10; opacity: 1; }
}

/* 首屏渐变标题的流光（仅对使用渐变文字的标题生效） */
.hero h1 span {
  background-size: 200% 200% !important;
  animation: win11-gradient-shift 9s ease-in-out infinite alternate;
}

@keyframes win11-gradient-shift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}


/* ===================== [13] 滚动入场动画（scroll-driven，渐进增强） ===================== */
/* 支持 animation-timeline 的浏览器：区块随滚动优雅上浮淡入；
   不支持的浏览器完全不受影响（无 JS、无副作用）。 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body > section:not(.hero):not(.page-header),
    .section-spacing,
    .services,
    .news-section,
    .products-section,
    .services-grid > *,
    .products-grid > *,
    .projects-grid > *,
    .news-list > *,
    .members-grid > * {
      animation: win11-reveal linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 28%;
    }
  }
}

@keyframes win11-reveal {
  from {
    opacity: 0;
    translate: 0 22px;
    scale: 0.985;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

/* 兜底：旧浏览器由 win11-motion.js 添加 .win-reveal / .win-reveal-in */
.win-reveal {
  opacity: 0;
  translate: 0 22px;
  scale: 0.985;
  transition: opacity 520ms var(--win11-ease-decel),
              translate 520ms var(--win11-ease-decel),
              scale 520ms var(--win11-ease-decel);
}

.win-reveal.win-reveal-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}


/* ===================== [14] 顶部滚动进度条（由 win11-motion.js 注入） ===================== */
.win-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--win11-accent), #40C4FF);
  box-shadow: 0 0 8px rgba(0, 120, 212, 0.35);
  z-index: 2147483000;
  pointer-events: none;
  transition: transform 90ms linear;
  will-change: transform;
}


/* ===================== [15] 可访问性 ===================== */
:focus-visible {
  outline: 2px solid var(--win11-accent);
  outline-offset: 2px;
  border-radius: var(--win11-radius-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* 减弱动画偏好：系统开启"减少动画"时禁用全站过渡/动画 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===================== [16] 响应式一致性 ===================== */
@media (max-width: 768px) {
  button,
  [role="button"] {
    min-height: 32px;
  }
  /* 防止 iOS 输入框 focus 时页面自动放大 */
  input, select, textarea {
    font-size: max(16px, 1em);
  }
}

img, video, canvas, svg {
  max-width: 100%;
}


/* ===================== [17] 附加精致动效 ===================== */

/* 17.1 卡片图片容器：悬停时图片缓慢放大 + 提亮（Win11 相册式微缩放） */
.product-image,
.member-avatar,
.news-image,
.service-image,
.project-image,
.category-image,
.avatar {
  overflow: hidden;
}

.product-image img,
.member-avatar img,
.news-image img,
.service-image img,
.project-image img,
.category-image img,
.avatar img {
  display: block;
  transition: transform 700ms var(--win11-ease-decel),
              filter 700ms var(--win11-ease-decel);
  will-change: transform;
}

@media (hover: hover) {
  .product-image:hover img,
  .member-avatar:hover img,
  .news-image:hover img,
  .service-image:hover img,
  .project-image:hover img,
  .category-image:hover img,
  .avatar:hover img {
    transform: scale(1.06);
    filter: brightness(1.05);
  }
}

/* 17.2 图标容器：卡片悬停时图标独立弹跳，层次更丰富 */
.service-icon,
.project-icon,
.stat-icon,
.category-icon,
.feature-icon {
  transition: transform var(--win11-dur-mid) var(--win11-ease-spring),
              background-color var(--win11-dur-mid) var(--win11-ease-standard);
}

@media (hover: hover) {
  .service-card:hover .service-icon,
  .project-card:hover .project-icon,
  .stat-card:hover .stat-icon,
  .category-card:hover .category-icon,
  .feature-card:hover .feature-icon {
    transform: translateY(-3px) scale(1.08);
  }
}

/* 17.3 按钮 / CTA 内图标：悬停时轻微弹起 */
.btn i,
.btn svg,
.cta-button i,
.cta-button svg,
.btn-primary i,
.btn-primary svg,
.btn-action i,
.btn-action svg {
  transition: transform var(--win11-dur-mid) var(--win11-ease-spring);
  display: inline-block;
}

@media (hover: hover) {
  .btn:hover i,
  .btn:hover svg,
  .cta-button:hover i,
  .cta-button:hover svg,
  .btn-primary:hover i,
  .btn-primary:hover svg,
  .btn-action:hover i,
  .btn-action:hover svg {
    transform: translateY(-1px) scale(1.12);
  }
}

/* 17.4 回到顶部按钮（由 win11-motion.js 注入） */
.win-backtop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--win11-border);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  color: var(--win11-accent);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--win11-shadow-hover);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--win11-dur-mid) var(--win11-ease-standard),
              transform var(--win11-dur-mid) var(--win11-ease-spring),
              background-color var(--win11-dur-mid) var(--win11-ease-standard);
  z-index: 2147482900;
}

.win-backtop.win-show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (hover: hover) {
  .win-backtop:hover {
    background: rgba(255, 255, 255, 0.96);
    transform: translateY(-2px) scale(1.05);
  }
}

.win-backtop:active {
  transform: scale(0.92);
}

.win-backtop:focus-visible {
  outline: 2px solid var(--win11-accent-ring) !important;
  outline-offset: 2px !important;
}


/* =============================================================================
   [18] 页面级 Win11 统一层（v4）
   -----------------------------------------------------------------------------
   目标：除顶部导航以外，所有页面组件的视觉表现统一为 Windows 11 Fluent。
   原则：只调整颜色 / 材质 / 圆角 / 阴影 / 动效等表现属性，
         不改变 display / grid / flex / width / height / padding / position。
         顶部导航（header、.header、.site-header、.app-header、.topbar、
         .nav-links、header nav）不在本层覆盖范围内。
   ============================================================================= */

/* 18.1 卡片表面：纯白 Mica 表面 + 细描边 + 分层柔和阴影 */
.card,
.section-card,
.stat-card,
.stats-card,
.info-card,
.form-card,
.product-card,
.news-card,
.service-card,
.project-card,
.member-card,
.category-card,
.popular-card,
.favorite-card,
.address-item,
.order-card,
.order-item,
.filter-card,
.post-card,
.thread-card,
.notice-card,
.list-card,
.panel,
.menu-btn,
.profile-card,
.recent-orders,
.notifications-card,
.account-menu {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.055) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035),
              0 4px 14px rgba(0, 0, 0, 0.035) !important;
}

/* 18.2 卡片悬停：抬升 + 描边泛蓝 + 深度阴影（Fluent 悬浮态） */
@media (hover: hover) {
  .card:hover,
  .section-card:hover,
  .stat-card:hover,
  .product-card:hover,
  .news-card:hover,
  .favorite-card:hover,
  .address-item:hover,
  .order-card:hover,
  .post-card:hover,
  .thread-card:hover,
  .notice-card:hover,
  .list-card:hover,
  .menu-btn:hover,
  .profile-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(0, 120, 212, 0.22) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09),
                0 2px 6px rgba(0, 0, 0, 0.04) !important;
  }
}

/* 18.3 按钮：Win11 控件圆角与字重（保留各页原配色语义） */
.btn,
.cta-button,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-success,
.btn-warning,
.btn-danger,
.btn-action,
.btn-sm,
.btn-xs,
.btn-login,
.btn-submit,
.role-btn,
.filter-btn,
.filter-tab,
.tab-btn,
.pay-btn,
.btn-pay,
.btn-buy,
.redeem-btn,
.action-btn,
.icon-btn,
.btn-icon {
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* 18.3.1 主按钮：Win11 强调色 + 顶部高光 + 按压回弹 */
.btn-primary,
.btn-login,
.btn-submit,
.pay-btn,
.btn-pay,
.btn-buy {
  background-color: var(--win11-accent) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 58%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

@media (hover: hover) {
  .btn-primary:hover,
  .btn-login:hover,
  .btn-submit:hover,
  .pay-btn:hover,
  .btn-pay:hover,
  .btn-buy:hover {
    background-color: var(--win11-accent-hover) !important;
    box-shadow: 0 6px 18px rgba(0, 120, 212, 0.26),
                inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  }
}

.btn-primary:active,
.btn-login:active,
.btn-submit:active,
.pay-btn:active,
.btn-pay:active,
.btn-buy:active {
  background-color: var(--win11-accent-active) !important;
}

/* 18.3.2 次级按钮：白底细描边 + 悬停淡蓝 */
.btn-outline,
.btn-secondary,
.role-btn,
.icon-btn,
.btn-icon {
  background-color: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: var(--win11-text) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

@media (hover: hover) {
  .btn-outline:hover,
  .btn-secondary:hover,
  .icon-btn:hover,
  .btn-icon:hover {
    background-color: #FFFFFF !important;
    border-color: rgba(0, 120, 212, 0.35) !important;
    color: var(--win11-accent) !important;
  }
}

/* 18.4 输入控件：白底 + 1px 描边 + 聚焦双层光晕 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea {
  background-color: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  border-radius: 6px !important;
  color: var(--win11-text) !important;
  transition: border-color 180ms var(--win11-ease-standard),
              box-shadow 180ms var(--win11-ease-standard),
              background-color 180ms var(--win11-ease-standard) !important;
}

@media (hover: hover) {
  input[type="text"]:hover,
  input[type="password"]:hover,
  input[type="email"]:hover,
  input[type="number"]:hover,
  input[type="search"]:hover,
  input[type="tel"]:hover,
  input[type="url"]:hover,
  input[type="date"]:hover,
  input[type="time"]:hover,
  select:hover,
  textarea:hover {
    border-color: rgba(0, 0, 0, 0.20) !important;
  }
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
  border-color: var(--win11-accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.14) !important;
  outline: none !important;
}

/* 输入框前置图标：聚焦时同步点亮强调色 */
.input-icon i,
.search-box i,
.field i {
  transition: color 180ms var(--win11-ease-standard);
}
.input-icon:focus-within i,
.search-box:focus-within i {
  color: var(--win11-accent);
}

/* 18.5 表格：Fluent 表头 + 细分割线 + 行悬停高亮 */
thead th {
  background-color: #FAFAFA !important;
  color: #5F5F5F !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

tbody td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.045) !important;
}

tbody tr:last-child td {
  border-bottom: none !important;
}

/* 18.6 分区标题栏：极浅渐变，强化层次 */
.section-header {
  background-color: transparent !important;
  background-image: linear-gradient(180deg, #FCFCFD 0%, #F7F8FA 100%) !important;
}

/* 18.7 状态徽章 / 标签：Win11 胶囊形 */
.badge,
.tag,
.chip,
.status-badge,
.order-status,
.type-badge,
.stock-badge,
.filter-chip,
.verified-badge {
  border-radius: 999px !important;
}

/* 18.8 电子券 / 物流信息区：柔和内高光 + 圆角 */
.coupon-section,
.delivery-section {
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65),
              0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

.coupon-code-display,
.mini-coupon-code-display {
  letter-spacing: 0.12em;
}

/* 18.9 空状态图标：缓慢浮动，避免页面显得静止 */
.no-data .no-icon,
.empty-icon,
.empty-state i,
.empty-state .icon {
  animation: win11-bob 4.2s ease-in-out infinite;
}

@keyframes win11-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* 18.10 分页按钮：Win11 圆角与悬停反馈 */
.pagination button,
.pagination a,
.page-btn {
  border-radius: 6px !important;
  transition: background-color 180ms var(--win11-ease-standard),
              border-color 180ms var(--win11-ease-standard),
              color 180ms var(--win11-ease-standard),
              box-shadow 180ms var(--win11-ease-standard);
}

@media (hover: hover) {
  .pagination button:not(:disabled):hover,
  .pagination a:hover,
  .page-btn:not(.active):hover {
    border-color: rgba(0, 120, 212, 0.40) !important;
    color: var(--win11-accent) !important;
    box-shadow: 0 2px 8px rgba(0, 120, 212, 0.12);
  }
}

/* 18.11 动态内容入场（由 win11-motion.js 为 JS 渲染出的节点添加）
   使用独立的 translate / scale，避免覆盖组件自身的 transform 布局。 */
.win-card-in {
  animation: win11-card-in 460ms var(--win11-ease-decel) both;
}

@keyframes win11-card-in {
  from {
    opacity: 0;
    translate: 0 16px;
    scale: 0.985;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

.win-row-in {
  animation: win11-row-in 420ms var(--win11-ease-decel) both;
}

@keyframes win11-row-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =============================================================================
   [19] 移动端适配层
   -----------------------------------------------------------------------------
   仅作用于窄屏（≤768px / ≤480px），桌面端布局与间距完全不受影响。
   目标：避免横向溢出、控件过小、弹窗超出屏幕、券码/表格被裁切。
   ============================================================================= */

@media (max-width: 768px) {
  /* 19.1 禁止整页横向滚动（clip 不会影响 sticky 定位） */
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  /* 19.2 表单控件 16px，避免 iOS 聚焦时自动放大 */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* 19.3 弹窗宽度不超过屏幕，提示条左右留白 */
  .modal,
  .modal-content,
  .modal-dialog,
  .lc-modal {
    max-width: calc(100vw - 24px) !important;
  }

  .toast {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }

  /* 19.4 券码 / 条形码在窄屏内自适应，不撑破卡片 */
  .coupon-barcode,
  .mini-coupon-barcode {
    max-width: 100% !important;
  }

  .coupon-barcode svg,
  .mini-coupon-barcode svg {
    max-width: 100% !important;
    height: auto !important;
  }

  .coupon-code-display,
  .mini-coupon-code-display {
    word-break: break-all;
    font-size: 1.05rem !important;
    letter-spacing: 0.1em !important;
  }

  /* 19.5 触控友好的最小点击高度 */
  button,
  .btn,
  [role="button"] {
    min-height: 36px;
  }

  /* 19.6 表格字号与分页换行 */
  table {
    font-size: 13px;
  }

  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  /* 19.7 卡片内部允许收缩，避免长内容撑宽 */
  .card,
  .section-card,
  .order-card,
  .product-card,
  .news-card,
  .favorite-card {
    min-width: 0;
  }

  /* 19.8 工具栏 / 按钮组自动换行 */
  .flex-row,
  .flex-between,
  .actions,
  .btn-group,
  .toolbar-actions {
    flex-wrap: wrap;
  }

  /* 19.9 长文本与代码块换行 */
  pre,
  code {
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* 19.10 回顶按钮与 AI 助手悬浮按钮上移，避开底部导航 */
  .win-backtop {
    bottom: 148px;
    right: 16px;
  }

  html body #lcai-fab {
    bottom: 84px !important;
  }
}

@media (max-width: 480px) {
  button,
  .btn,
  [role="button"] {
    min-height: 40px;
  }

  .coupon-code-display,
  .mini-coupon-code-display {
    font-size: 0.95rem !important;
  }

  .page-header h1,
  .hero h1 {
    font-size: clamp(1.5rem, 7vw, 2.1rem);
  }

  .page-header p,
  .hero p {
    font-size: clamp(0.85rem, 3.6vw, 1rem);
  }
}