/* ==========================================================================
   GLOBAL CSS — 通用全局样式（KERNELMED 主题 / Apple 风格动效）
   使用：<link rel="stylesheet" href="style/global.css">
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties（设计令牌）
   -------------------------------------------------------------------------- */
:root {
    /* ---------- 品牌色 ---------- */
    --color-primary:            #7B2CBF;            /* 主紫色（按钮、强调） */
    --color-primary-hover:      #6A23A6;            /* 紫色 hover */
    --color-primary-active:     #5A189A;            /* 紫色按下 */
    --color-primary-light:      #9D4EDD;            /* 浅紫（渐变末端） */
    --color-primary-pale:       #E0AAFF;            /* 极浅紫（点缀） */
    --color-primary-tint:       #F3E8FF;            /* 紫色底纹 */
    --color-primary-rgb:        123, 44, 191;       /* 用于 rgba() */

    /* ---------- 文字颜色 ---------- */
    --color-text:               #1D1D1F;            /* 主文字 */
    --color-text-secondary:     #333;            /* 次级文字 */
    --color-text-tertiary:      #86868B;            /* 三级文字 */
    --color-text-quaternary:    #AEAEB2;            /* 辅助/占位 */
    --color-text-inverse:       #FFFFFF;            /* 深色背景上的白字 */
    --color-text-link:          var(--color-primary);

    /* ---------- 背景色 ---------- */
    --color-bg:                 #FFFFFF;
    --color-bg-soft:            #F5F5F7;            /* Apple soft grey */
    --color-bg-muted:           #FAFAFC;
    --color-bg-tint:            #F3E8FF;

    /* ---------- 深色区块 ---------- */
    --color-dark-bg:            #1F2657;            /* 深藏蓝 */
    --color-dark-bg-2:          #2A3170;
    --color-dark-text:          #FFFFFF;
    --color-dark-text-soft:     rgba(255,255,255,0.7);
    --color-dark-text-muted:    rgba(255,255,255,0.5);

    /* ---------- 边框 / 分隔线 ---------- */
    --color-border:             rgba(0,0,0,0.08);
    --color-border-soft:        rgba(0,0,0,0.05);
    --color-border-strong:      #D2D2D7;
    --color-border-primary:     rgba(123,44,191,0.2);

    /* ---------- 状态色 ---------- */
    --color-success:            #2E7D32;
    --color-warning:            #ED6C02;
    --color-danger:             #C62828;
    --color-info:               #0288D1;

    /* ---------- 渐变 ---------- */
    --gradient-primary:         linear-gradient(135deg, #13246a 0%, #721c88 100%);
    --gradient-primary-hover:   linear-gradient(135deg, #302274 0%, #a409cc 100%);
    --gradient-primary-mbtop:    linear-gradient(135deg, #ebd9f0 0%, #f4e7f7 100%);
    --gradient-light:           linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
    --gradient-dark:            linear-gradient(135deg, #1F2657 0%, #2A3170 100%);
    --gradient-shine:           linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);

    /* ---------- 字体 ---------- */
    --font-family-base:         "Noto Sans SC", "Source Han Sans CN", "PingFang SC",
    "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, sans-serif;
    --font-family-heading:      var(--font-family-base);
    --font-family-mono:         "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono",
                                "Courier New", monospace;

    --font-size-2xs:            11px;
    --font-size-xs:             12px;
    --font-size-sm:             14px;
    --font-size-base:           16px;
    --font-size-md:             18px;
    --font-size-lg:             20px;
    --font-size-xl:             24px;
    --font-size-2xl:            28px;
    --font-size-3xl:            32px;
    --font-size-4xl:            40px;
    --font-size-5xl:            48px;
    --font-size-6xl:            56px;

    --font-weight-thin:         200;
    --font-weight-light:        300;
    --font-weight-regular:      400;
    --font-weight-medium:       500;
    --font-weight-semibold:     600;
    --font-weight-bold:         700;
    --font-weight-heavy:        800;

    --line-height-tight:        1.1;
    --line-height-snug:         1.25;
    --line-height-normal:       1.5;
    --line-height-relaxed:      1.7;
    --line-height-loose:        2;

    --letter-spacing-tight:     -0.02em;
    --letter-spacing-normal:    0;
    --letter-spacing-wide:      0.02em;
    --letter-spacing-wider:     0.05em;
    --letter-spacing-widest:    0.1em;

    /* ---------- 间距 ---------- */
    --space-1:                  4px;
    --space-2:                  8px;
    --space-3:                  12px;
    --space-4:                  16px;
    --space-5:                  20px;
    --space-6:                  24px;
    --space-8:                  32px;
    --space-10:                 40px;
    --space-12:                 48px;
    --space-16:                 64px;
    --space-20:                 80px;
    --space-24:                 96px;
    --space-32:                 128px;
    --space-section:            120px;
    --space-section-sm:         80px;

    /* ---------- 布局 ---------- */
    --container-max:            1200px;
    --container-wide:           1400px;
    --container-narrow:         960px;
    --container-padding:        24px;
    --container-padding-mobile: 16px;
    --grid-gap:                 24px;

    /* ---------- 圆角 ---------- */
    --radius-xs:                4px;
    --radius-sm:                8px;
    --radius-md:                12px;
    --radius-lg:                16px;
    --radius-xl:                24px;
    --radius-2xl:               32px;
    --radius-pill:              999px;
    --radius-circle:            50%;

    /* ---------- 阴影（Apple 式多层叠加） ---------- */
    --shadow-xs:                0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:                0 2px 6px rgba(0,0,0,0.06),
                                0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:                0 6px 18px rgba(0,0,0,0.08),
                                0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg:                0 14px 36px rgba(0,0,0,0.10),
                                0 4px 12px rgba(0,0,0,0.05);
    --shadow-xl:                0 24px 56px rgba(0,0,0,0.12),
                                0 8px 20px rgba(0,0,0,0.06);
    --shadow-2xl:               0 40px 80px rgba(0,0,0,0.16),
                                0 12px 32px rgba(0,0,0,0.08);
    --shadow-inner:             inset 0 2px 4px rgba(0,0,0,0.06);
    --shadow-focus:             0 0 0 4px rgba(var(--color-primary-rgb), 0.2);
    --shadow-primary:           0 8px 24px rgba(var(--color-primary-rgb), 0.30);
    --shadow-primary-hover:     0 14px 36px rgba(var(--color-primary-rgb), 0.42);
    --shadow-card-hover:        0 20px 48px rgba(0,0,0,0.12),
                                0 6px 16px rgba(0,0,0,0.06);

    /* ---------- 动效（Apple 式缓动） ---------- */
    --ease-apple:               cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out:                 cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:              cubic-bezier(0.65, 0, 0.35, 1);
    --ease-standard:            cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-decelerate:          cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-accelerate:          cubic-bezier(0.4, 0.0, 1, 1);
    --ease-bounce:              cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring:              cubic-bezier(0.5, 1.5, 0.75, 1);

    --duration-instant:         120ms;
    --duration-fast:            240ms;
    --duration-base:            400ms;
    --duration-slow:            600ms;
    --duration-slower:          900ms;
    --duration-page:            1200ms;

    /* ---------- 层级 ---------- */
    --z-base:                   1;
    --z-elevated:               10;
    --z-sticky:                 100;
    --z-overlay:                200;
    --z-header:                 300;
    --z-modal:                  400;
    --z-popover:                500;
    --z-tooltip:                600;
    --z-toast:                  700;

    /* ---------- 其他 ---------- */
    --blur-bg:                  saturate(180%) blur(20px);
    --transition-base:          all var(--duration-base) var(--ease-apple);
    --transition-fast:          all var(--duration-fast) var(--ease-apple);
    --transition-transform:     transform var(--duration-base) var(--ease-apple);
    --p:#7B2CBF;--g:linear-gradient(135deg,#13246a,#721c88);--ink:#1d1d1f;--muted:#6e6e73;--line:#e5e5ea;--bg:#f5f5f7
    --primary: #7B2CBF; --primary-light: #A855F7; --secondary: #13246a; --grad-main: linear-gradient(135deg, #7B2CBF 0%, #5B2AA8 45%, #13246a 100%); --grad-soft: linear-gradient(135deg, rgba(123,44,191,.10), rgba(19,36,106,.10)); --ease: cubic-bezier(.22, 1, .36, 1); --glass: rgba(255,255,255,.78); --ink: #1d1d1f; --ink-2: #6e6e73;
}
/* ---------- Flex 布局 ---------- */
/*不换行对齐方式*/
.Left {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; align-content:center;}
.Center {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:center; align-content:center;}
.Right {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end; align-items:center; align-content:center;}
.Justify {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center; align-content:center;}

.Left_t {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start;}
.Center_t {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:flex-start; align-content:flex-start;}
.Right_t {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-end; align-items:flex-start; align-content:flex-start;}
.Justify_t {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:flex-start; align-content:flex-start;}

/*换行对齐方式*/
.Left_h {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; align-content:center;}
.Center_h {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center;}
.Right_h {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:center; align-content:center;}
.Justify_h {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center; align-content:center;}

.Left_ht {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; align-content:flex-start;}
.Center_ht {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start; align-content:flex-start;}
.Right_ht {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start; align-content:flex-start;}
.Justify_ht {display:flex; display: -webkit-flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; align-content:flex-start;}
/* --------------------------------------------------------------------------
   2. Reset（现代化基础样式）
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;                 /* 平滑滚动 */
    scroll-padding-top: 80px;                /* 锚点跳转留出吸顶高度 */
    font-size: 16px;
    line-height: var(--line-height-normal);
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; 
}

button {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

a {
    color: #333;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-apple);
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text);
}

p {
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

::selection {
    background-color: rgba(var(--color-primary-rgb), 0.2);
    color: var(--color-text);
}

/* 自定义滚动条（Apple 式细滚动条） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: var(--radius-pill);
    transition: background var(--duration-fast) var(--ease-apple);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.32);
}
/* --------------------------------------------------------------------------
   3. 布局与容器
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}
.container--wide    { max-width: var(--container-wide); }
.container--narrow  { max-width: var(--container-narrow); }

.section {
    padding: var(--space-section) 0;
    position: relative;
}
.section--sm   { padding: var(--space-section-sm) 0; }
.section--tight{ padding: var(--space-16) 0; }
.section--soft { background: var(--color-bg-soft); }
.section--tint { background: var(--color-bg-tint); }
.section--dark {
    background: var(--color-dark-bg);
    color: var(--color-dark-text);
}

/* --------------------------------------------------------------------------
   4. 排版字号
   -------------------------------------------------------------------------- */
h1, .h1 {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    letter-spacing: var(--letter-spacing-tight);
}
h2, .h2 {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: var(--font-weight-semibold);
}
h3, .h3 {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: var(--font-weight-semibold);
}
h4, .h4 { font-size: var(--font-size-xl);  font-weight: var(--font-weight-semibold); }
h5, .h5 { font-size: var(--font-size-lg);  font-weight: var(--font-weight-medium); }
h6, .h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-text-secondary);
}

.lead {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.text-xs   { font-size: var(--font-size-xs); }
.text-sm   { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md   { font-size: var(--font-size-md); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }

.text-light    { font-weight: var(--font-weight-light); }
.text-medium   { font-weight: var(--font-weight-medium); }
.text-semibold { font-weight: var(--font-weight-semibold); }
.text-bold     { font-weight: var(--font-weight-bold); }

.text-muted     { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-primary   { color: var(--color-primary); }
.text-uppercase { text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); }
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }


/* --------------------------------------------------------------------------
   6. 卡片（通用容器卡片，hover 上抬 + 图片缩放）
   -------------------------------------------------------------------------- */
.card {
    position: relative;
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--duration-base) var(--ease-apple),
                box-shadow var(--duration-base) var(--ease-apple);
    will-change: transform;
}
.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.card__media { position: relative; overflow: hidden; background: var(--color-bg-soft); }
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slower) var(--ease-apple);
}
.card:hover .card__media img { transform: scale(1.06); }

.card__body { padding: var(--space-6) var(--space-5); }
.card__title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
.card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}
.card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
}

/* 磨砂玻璃卡片 */
.card--glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: var(--blur-bg);
    -webkit-backdrop-filter: var(--blur-bg);
    border: 1px solid var(--color-border-soft);
}

/* --------------------------------------------------------------------------
   7. Grid / Flex 工具类
   -------------------------------------------------------------------------- */
.grid      { display: grid; gap: var(--grid-gap); }
.grid-2    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

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

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* --------------------------------------------------------------------------
   8. 表单（Apple 式简洁输入框）
   -------------------------------------------------------------------------- */
.form-group   { margin-bottom: var(--space-5); }
.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
.form-control {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-4);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-apple),
                box-shadow var(--duration-fast) var(--ease-apple);
}
.form-control:hover   { border-color: var(--color-border-strong); }
.form-control:focus   { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }

textarea.form-control {
    height: auto;
    min-height: 120px;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
}

/* --------------------------------------------------------------------------
   9. 动画与滚动出现（Apple 风格）
   -------------------------------------------------------------------------- */

/* 淡入上移（配合 JS IntersectionObserver 加 .is-visible） */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--duration-slower) var(--ease-apple),
                transform var(--duration-slower) var(--ease-apple);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity var(--duration-slower) var(--ease-apple),
                transform var(--duration-slower) var(--ease-apple);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity var(--duration-slower) var(--ease-apple),
                transform var(--duration-slower) var(--ease-apple);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity var(--duration-slower) var(--ease-apple),
                transform var(--duration-slower) var(--ease-apple);
}
.reveal-scale.is-visible { opacity: 1; transform: scale(1); }

/* 子元素逐个延迟出现 */
.stagger > *              { transition-delay: 0ms; }
.stagger > *:nth-child(1) { transition-delay: 80ms; }
.stagger > *:nth-child(2) { transition-delay: 160ms; }
.stagger > *:nth-child(3) { transition-delay: 240ms; }
.stagger > *:nth-child(4) { transition-delay: 320ms; }
.stagger > *:nth-child(5) { transition-delay: 400ms; }
.stagger > *:nth-child(6) { transition-delay: 480ms; }

/* 浮动（装饰图/光斑） */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
.float      { animation: float 6s var(--ease-apple) infinite; }
.float-slow { animation: float 9s var(--ease-apple) infinite; }
.float-fast { animation: float 4s var(--ease-apple) infinite; }

/* 呼吸脉冲（徽标/圆点） */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(1.1); }
}
.pulse { animation: pulse 2.4s var(--ease-apple) infinite; }

/* 骨架屏微光 */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    background: linear-gradient(90deg,
                rgba(0,0,0,0.06) 25%,
                rgba(0,0,0,0.12) 37%,
                rgba(0,0,0,0.06) 63%);
    background-size: 800px 100%;
    animation: shimmer 1.4s linear infinite;
}

/* 模糊光斑背景（Hero/装饰区可用） */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -50px) scale(1.1); }
    66%      { transform: translate(-20px, 30px) scale(0.95); }
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.4;
    animation: blob 16s var(--ease-apple) infinite;
    pointer-events: none;
}

/* 页面进入过渡 */
.page-enter { animation: pageEnter var(--duration-page) var(--ease-apple) both; }
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 图片懒加载淡入 */
.lazy-fade { opacity: 0; transition: opacity var(--duration-slower) var(--ease-apple); }
.lazy-fade.is-loaded { opacity: 1; }

/* --------------------------------------------------------------------------
   10. 交互（hover / 按压 / 焦点）
   -------------------------------------------------------------------------- */

/* hover 上抬 */
.hover-lift {
    transition: transform var(--duration-base) var(--ease-apple),
                box-shadow var(--duration-base) var(--ease-apple);
}
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hover-lift:active {
    transform: translateY(-2px) scale(0.99);
    transition-duration: var(--duration-instant);
}

/* 图片 hover 缩放容器 */
.media-zoom { overflow: hidden; }
.media-zoom img { transition: transform var(--duration-slower) var(--ease-apple); }
.media-zoom:hover img { transform: scale(1.08); }

/* 磁吸效果基础类（配合自定义 JS） */
.magnetic { transition: transform var(--duration-base) var(--ease-apple); }

.cursor-pointer { cursor: pointer; }

/* --------------------------------------------------------------------------
   11. 工具类
   -------------------------------------------------------------------------- */
.hidden { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-12) 0;
}

.bg-gradient-primary { background: var(--gradient-primary); }
.bg-soft             { background: var(--color-bg-soft); }
.bg-dark             { background: var(--color-dark-bg); color: var(--color-dark-text); }

.shadow-sm      { box-shadow: var(--shadow-sm); }
.shadow-md      { box-shadow: var(--shadow-md); }
.shadow-lg      { box-shadow: var(--shadow-lg); }
.shadow-xl      { box-shadow: var(--shadow-xl); }
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-none    { box-shadow: none !important; }

.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-pill); }

.relative        { position: relative; }
.absolute        { position: absolute; }
.fixed           { position: fixed; }
.sticky          { position: sticky; }
.overflow-hidden { overflow: hidden; }

/* --------------------------------------------------------------------------
   12. 响应式断点
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    :root {
        --container-padding: var(--container-padding-mobile);
        --space-section: 80px;
    }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    html { font-size: 15px; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .section { padding: 64px 0; }
}

/* 无障碍：减少动画 */
@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;
    }
}

/* --------------------------------------------------------------------------
   13. 打印样式
   -------------------------------------------------------------------------- */
@media print {
    .btn { display: none !important; }
    body { color: #000; background: #fff; }
}

/* ==========================================================================
   END
   ========================================================================== */