/* ==========================================
   VANILLA MODERN CSS FRAMEWORK
   一个现代化、渐进增强的纯CSS框架
   利用最新的CSS特性，无需预处理器
   ========================================== */

/* 1. CSS自定义属性（CSS变量）系统 */
:root {
  /* 颜色系统 */
  --color-primary: hsl(220, 85%, 55%);
  --color-primary-dark: hsl(220, 85%, 45%);
  --color-secondary: hsl(200, 100%, 50%);
  --color-accent: hsl(330, 85%, 55%);
  --color-success: hsl(145, 65%, 50%);
  --color-warning: hsl(45, 100%, 50%);
  --color-danger: hsl(0, 85%, 55%);
  --color-dark: hsl(220, 15%, 20%);
  --color-light: hsl(0, 0%, 98%);
  --color-gray-100: hsl(0, 0%, 97%);
  --color-gray-200: hsl(0, 0%, 92%);
  --color-gray-300: hsl(0, 0%, 85%);
  --color-gray-400: hsl(0, 0%, 72%);
  --color-gray-500: hsl(0, 0%, 60%);
  --color-gray-600: hsl(0, 0%, 40%);
  --color-gray-700: hsl(0, 0%, 30%);
  --color-gray-800: hsl(0, 0%, 20%);
  --color-gray-900: hsl(0, 0%, 10%);
  
  /* 间距系统 - 使用逻辑属性 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* 字体系统 */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace;
  --font-size-xs: clamp(0.75rem, 2vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 2.5vw, 1rem);
  --font-size-base: clamp(1rem, 3vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 3.5vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 4vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 5vw, 2rem);
  --font-size-3xl: clamp(2rem, 6vw, 3rem);
  
  /* 布局容器宽度 */
  --container-sm: 100%;
  --container-md: min(100% - 2rem, 48rem);
  --container-lg: min(100% - 3rem, 64rem);
  --container-xl: min(100% - 4rem, 80rem);
  
  /* 阴影系统 */
  --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
  --shadow-md: 0 4px 6px -1px hsla(0, 0%, 0%, 0.1), 0 2px 4px -2px hsla(0, 0%, 0%, 0.1);
  --shadow-lg: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -4px hsla(0, 0%, 0%, 0.1);
  --shadow-xl: 0 20px 25px -5px hsla(0, 0%, 0%, 0.1), 0 8px 10px -6px hsla(0, 0%, 0%, 0.1);
  
  /* 圆角系统 */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  
  /* 过渡动画 */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
}

/* 2. 层叠图层系统 - 控制CSS层叠顺序 */
@layer reset, base, components, utilities;

/* 重置和基础样式层 */
@layer reset {
  /* 现代CSS重置 */
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    block-size: 100%;
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    min-block-size: 100%;
    font-family: var(--font-family-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  
  img, picture, video, canvas, svg {
    display: block;
    max-inline-size: 100%;
  }
  
  input, button, textarea, select {
    font: inherit;
  }
  
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
}

/* 基础样式层 */
@layer base {
  body {
    font-size: var(--font-size-base);
    color: var(--color-gray-800);
    background-color: var(--color-light);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
  }
  
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
  h4 { font-size: var(--font-size-lg); }
  h5, h6 { font-size: var(--font-size-base); }
  
  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  
  a:hover {
    color: var(--color-primary-dark);
  }
  
  code, kbd, pre, samp {
    font-family: var(--font-family-mono);
  }
}

/* 3. 容器查询系统 */
@layer components {
  /* 容器查询包装器 */
  .container-query {
    container-type: inline-size;
    container-name: component;
  }
  
  /* 响应式容器 */
  .container {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--spacing-md);
  }
  
  .container-sm { max-inline-size: var(--container-sm); }
  .container-md { max-inline-size: var(--container-md); }
  .container-lg { max-inline-size: var(--container-lg); }
  .container-xl { max-inline-size: var(--container-xl); }
  
  /* 使用容器查询的卡片组件 */
  .card {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
  }
  
  .card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
  }
  
  @container component (min-width: 480px) {
    .card {
      padding: var(--spacing-xl);
    }
  }
  
  @container component (min-width: 768px) {
    .card {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: var(--spacing-lg);
    }
  }
}

/* 4. 现代化的网格系统 - 使用子网格 */
@layer components {
  /* 基础Grid系统 */
  .grid {
    display: grid;
    gap: var(--spacing-md);
  }
  
  /* 12列网格系统 */
  .grid-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  
  /* 自适应的Grid列 */
  .grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  }
  
  .grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  }
  
  /* 子网格支持 */
  .subgrid {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: subgrid;
  }
  
  /* Grid瀑布流布局（Masonry Layout） */
  .grid-masonry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    grid-auto-rows: masonry;
    gap: var(--spacing-md);
  }
  
  /* 逻辑属性网格 */
  .grid-logical {
    display: grid;
    grid-gap: var(--spacing-md);
  }
}

/* 5. Flexbox实用类 - 使用逻辑属性 */
@layer utilities {
  .flex {
    display: flex;
  }
  
  .flex-col {
    flex-direction: column;
  }
  
  .flex-wrap {
    flex-wrap: wrap;
  }
  
  .justify-start {
    justify-content: flex-start;
  }
  
  .justify-end {
    justify-content: flex-end;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .justify-between {
    justify-content: space-between;
  }
  
  .justify-around {
    justify-content: space-around;
  }
  
  .justify-evenly {
    justify-content: space-evenly;
  }
  
  .items-start {
    align-items: flex-start;
  }
  
  .items-end {
    align-items: flex-end;
  }
  
  .items-center {
    align-items: center;
  }
  
  .items-baseline {
    align-items: baseline;
  }
  
  .items-stretch {
    align-items: stretch;
  }
  
  .gap-xs { gap: var(--spacing-xs); }
  .gap-sm { gap: var(--spacing-sm); }
  .gap-md { gap: var(--spacing-md); }
  .gap-lg { gap: var(--spacing-lg); }
  .gap-xl { gap: var(--spacing-xl); }
  
  /* 逻辑属性间距 */
  .m-inline-auto {
    margin-inline: auto;
  }
  
  .p-inline-sm {
    padding-inline: var(--spacing-sm);
  }
  
  .p-inline-md {
    padding-inline: var(--spacing-md);
  }
  
  .p-inline-lg {
    padding-inline: var(--spacing-lg);
  }
  
  .p-block-sm {
    padding-block: var(--spacing-sm);
  }
  
  .p-block-md {
    padding-block: var(--spacing-md);
  }
  
  .p-block-lg {
    padding-block: var(--spacing-lg);
  }
}

/* 6. 作用域样式（@scope） */
@layer components {
  /* 作用域卡片 */
  @scope (.card) {
    .card-header {
      font-size: var(--font-size-lg);
      font-weight: 700;
      color: var(--color-dark);
      margin-block-end: var(--spacing-md);
    }
    
    .card-body {
      color: var(--color-gray-700);
    }
    
    .card-footer {
      margin-block-start: var(--spacing-lg);
      padding-block-start: var(--spacing-md);
      border-block-start: 1px solid var(--color-gray-200);
    }
  }
  
  /* 作用域导航 */
  @scope (nav) {
    ul {
      display: flex;
      gap: var(--spacing-md);
      list-style: none;
    }
    
    a {
      display: block;
      padding: var(--spacing-sm) var(--spacing-md);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }
    
    a:hover {
      background-color: var(--color-gray-100);
    }
    
    a.active {
      background-color: var(--color-primary);
      color: white;
    }
  }
}

/* 7. 高级形状和视觉效果 */
@layer utilities {
  /* Clip-path形状 */
  .clip-circle {
    clip-path: circle(50% at center);
  }
  
  .clip-polygon {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
  }
  
  .clip-hexagon {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }
  
  /* 渐变背景 */
  .gradient-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  }
  
  .gradient-accent {
    background: linear-gradient(135deg, var(--color-accent), var(--color-warning));
  }
  
  /* 混合模式 */
  .blend-multiply {
    mix-blend-mode: multiply;
  }
  
  .blend-overlay {
    mix-blend-mode: overlay;
  }
  
  /* 遮罩效果 */
  .mask-fade {
    mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  }
}

/* 8. 响应式实用类 */
@layer utilities {
  /* 断点系统 */
  .sm\:hidden {
    display: none;
  }
  
  .md\:flex {
    display: none;
  }
  
  @media (min-width: 640px) {
    .sm\:hidden { display: block; }
    .md\:flex { display: none; }
  }
  
  @media (min-width: 768px) {
    .md\:flex { display: flex; }
  }
  
  @media (min-width: 1024px) {
    .lg\:flex { display: flex; }
  }
  
  @media (min-width: 1280px) {
    .xl\:flex { display: flex; }
  }
  
  /* 方向感知 */
  .direction-ltr { direction: ltr; }
  .direction-rtl { direction: rtr; }
  
  .writing-horizontal { writing-mode: horizontal-tb; }
  .writing-vertical { writing-mode: vertical-rl; }
}

/* 9. 动画和过渡 */
@layer utilities {
  .transition-all {
    transition: all var(--transition-normal);
  }
  
  .transition-colors {
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
  }
  
  .transition-transform {
    transition: transform var(--transition-normal);
  }
  
  /* 关键帧动画 */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideUp {
    from { transform: translateY(1rem); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  
  @keyframes slideIn {
    from { transform: translateX(-1rem); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  
  .animate-fade-in {
    animation: fadeIn var(--transition-normal) ease-out;
  }
  
  .animate-slide-up {
    animation: slideUp var(--transition-normal) ease-out;
  }
  
  .animate-slide-in {
    animation: slideIn var(--transition-normal) ease-out;
  }
  
  /* 滚动行为 */
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  
  .scroll-snap-x {
    scroll-snap-type: x mandatory;
  }
  
  .scroll-snap-y {
    scroll-snap-type: y proximity;
  }
}

/* 10. 实用工具类 */
@layer utilities {
  /* 间距工具 */
  .space-y-xs > * + * { margin-block-start: var(--spacing-xs); }
  .space-y-sm > * + * { margin-block-start: var(--spacing-sm); }
  .space-y-md > * + * { margin-block-start: var(--spacing-md); }
  .space-y-lg > * + * { margin-block-start: var(--spacing-lg); }
  .space-y-xl > * + * { margin-block-start: var(--spacing-xl); }
  
  .space-x-xs > * + * { margin-inline-start: var(--spacing-xs); }
  .space-x-sm > * + * { margin-inline-start: var(--spacing-sm); }
  .space-x-md > * + * { margin-inline-start: var(--spacing-md); }
  .space-x-lg > * + * { margin-inline-start: var(--spacing-lg); }
  .space-x-xl > * + * { margin-inline-start: var(--spacing-xl); }
  
  /* 边框 */
  .border { border: 1px solid var(--color-gray-200); }
  .border-t { border-block-start: 1px solid var(--color-gray-200); }
  .border-b { border-block-end: 1px solid var(--color-gray-200); }
  .border-l { border-inline-start: 1px solid var(--color-gray-200); }
  .border-r { border-inline-end: 1px solid var(--color-gray-200); }
  
  /* 圆角 */
  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded-md { border-radius: var(--radius-md); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-full { border-radius: var(--radius-full); }
  
  /* 阴影 */
  .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); }
  
  /* 文本 */
  .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-lg { font-size: var(--font-size-lg); }
  .text-xl { font-size: var(--font-size-xl); }
  .text-2xl { font-size: var(--font-size-2xl); }
  .text-3xl { font-size: var(--font-size-3xl); }
  
  /* 颜色 */
  .text-primary { color: var(--color-primary); }
  .bg-primary { background-color: var(--color-primary); }
  .border-primary { border-color: var(--color-primary); }
  
  .text-secondary { color: var(--color-secondary); }
  .bg-secondary { background-color: var(--color-secondary); }
  .border-secondary { border-color: var(--color-secondary); }
  
  /* 不透明度 */
  .opacity-0 { opacity: 0; }
  .opacity-25 { opacity: 0.25; }
  .opacity-50 { opacity: 0.5; }
  .opacity-75 { opacity: 0.75; }
  .opacity-100 { opacity: 1; }
  
  /* 显示隐藏 */
  .hidden { display: none; }
  .block { display: block; }
  .inline-block { display: inline-block; }
  .inline { display: inline; }
  .flex { display: flex; }
  .grid { display: grid; }
  
  /* 位置 */
  .relative { position: relative; }
  .absolute { position: absolute; }
  .fixed { position: fixed; }
  .sticky { position: sticky; }
  
  .top-0 { top: 0; }
  .right-0 { right: 0; }
  .bottom-0 { bottom: 0; }
  .left-0 { left: 0; }
  .inset-0 { inset: 0; }
  
  /* 溢出 */
  .overflow-auto { overflow: auto; }
  .overflow-hidden { overflow: hidden; }
  .overflow-visible { overflow: visible; }
  .overflow-scroll { overflow: scroll; }
  
  /* 游标 */
  .cursor-pointer { cursor: pointer; }
  .cursor-default { cursor: default; }
  .cursor-not-allowed { cursor: not-allowed; }
  .cursor-move { cursor: move; }
  
  /* 用户选择 */
  .select-none { user-select: none; }
  .select-text { user-select: text; }
  .select-all { user-select: all; }
  
  /* 可见性 */
  .visible { visibility: visible; }
  .invisible { visibility: hidden; }
  .collapse { visibility: collapse; }
  
  /* 弹性布局 */
  .flex-1 { flex: 1 1 0%; }
  .flex-auto { flex: 1 1 auto; }
  .flex-initial { flex: 0 1 auto; }
  .flex-none { flex: none; }
  
  /* 网格跨度 */
  .col-span-1 { grid-column: span 1 / span 1; }
  .col-span-2 { grid-column: span 2 / span 2; }
  .col-span-3 { grid-column: span 3 / span 3; }
  .col-span-4 { grid-column: span 4 / span 4; }
  .col-span-5 { grid-column: span 5 / span 5; }
  .col-span-6 { grid-column: span 6 / span 6; }
  .col-span-7 { grid-column: span 7 / span 7; }
  .col-span-8 { grid-column: span 8 / span 8; }
  .col-span-9 { grid-column: span 9 / span 9; }
  .col-span-10 { grid-column: span 10 / span 10; }
  .col-span-11 { grid-column: span 11 / span 11; }
  .col-span-12 { grid-column: span 12 / span 12; }
  
  .row-span-1 { grid-row: span 1 / span 1; }
  .row-span-2 { grid-row: span 2 / span 2; }
  .row-span-3 { grid-row: span 3 / span 3; }
  .row-span-4 { grid-row: span 4 / span 4; }
  .row-span-5 { grid-row: span 5 / span 5; }
  .row-span-6 { grid-row: span 6 / span 6; }
  
  /* 对齐方式 */
  .justify-items-start { justify-items: start; }
  .justify-items-end { justify-items: end; }
  .justify-items-center { justify-items: center; }
  .justify-items-stretch { justify-items: stretch; }
  
  .align-items-start { align-items: start; }
  .align-items-end { align-items: end; }
  .align-items-center { align-items: center; }
  .align-items-stretch { align-items: stretch; }
  
  /* 布局 */
  .aspect-square { aspect-ratio: 1 / 1; }
  .aspect-video { aspect-ratio: 16 / 9; }
  .aspect-auto { aspect-ratio: auto; }
  
  /* 变换 */
  .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
  .translate-x-0 { --tw-translate-x: 0px; }
  .translate-y-0 { --tw-translate-y: 0px; }
  .rotate-0 { --tw-rotate: 0deg; }
  .scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; }
  
  /* 过滤 */
  .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
  .blur-sm { --tw-blur: blur(4px); }
  .blur-md { --tw-blur: blur(8px); }
  .blur-lg { --tw-blur: blur(12px); }
  
  /* 背景混合 */
  .bg-blend-multiply { background-blend-mode: multiply; }
  .bg-blend-overlay { background-blend-mode: overlay; }
  .bg-blend-screen { background-blend-mode: screen; }
  
  /* 背景大小 */
  .bg-cover { background-size: cover; }
  .bg-contain { background-size: contain; }
  .bg-auto { background-size: auto; }
  
  /* 背景位置 */
  .bg-center { background-position: center; }
  .bg-top { background-position: top; }
  .bg-right { background-position: right; }
  .bg-bottom { background-position: bottom; }
  .bg-left { background-position: left; }
  
  /* 背景重复 */
  .bg-repeat { background-repeat: repeat; }
  .bg-no-repeat { background-repeat: no-repeat; }
  .bg-repeat-x { background-repeat: repeat-x; }
  .bg-repeat-y { background-repeat: repeat-y; }
  .bg-repeat-round { background-repeat: round; }
  .bg-repeat-space { background-repeat: space; }
  
  /* 背景附件 */
  .bg-fixed { background-attachment: fixed; }
  .bg-local { background-attachment: local; }
  .bg-scroll { background-attachment: scroll; }
  
  /* 背景裁剪 */
  .bg-clip-border { background-clip: border-box; }
  .bg-clip-padding { background-clip: padding-box; }
  .bg-clip-content { background-clip: content-box; }
  .bg-clip-text { background-clip: text; }
  
  /* 填充 */
  .fill-current { fill: currentColor; }
  .stroke-current { stroke: currentColor; }
  
  /* 表格 */
  .table-auto { table-layout: auto; }
  .table-fixed { table-layout: fixed; }
  .border-collapse { border-collapse: collapse; }
  .border-separate { border-collapse: separate; }
  
  /* 列表样式 */
  .list-none { list-style-type: none; }
  .list-disc { list-style-type: disc; }
  .list-decimal { list-style-type: decimal; }
  .list-inside { list-style-position: inside; }
  .list-outside { list-style-position: outside; }
  
  /* 文本对齐 */
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-justify { text-align: justify; }
  .text-start { text-align: start; }
  .text-end { text-align: end; }
  
  /* 文本装饰 */
  .underline { text-decoration-line: underline; }
  .overline { text-decoration-line: overline; }
  .line-through { text-decoration-line: line-through; }
  .no-underline { text-decoration-line: none; }
  
  /* 文本变换 */
  .uppercase { text-transform: uppercase; }
  .lowercase { text-transform: lowercase; }
  .capitalize { text-transform: capitalize; }
  .normal-case { text-transform: none; }
  
  /* 文本溢出 */
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .overflow-ellipsis { text-overflow: ellipsis; }
  .overflow-clip { text-overflow: clip; }
  
  /* 空白处理 */
  .whitespace-normal { white-space: normal; }
  .whitespace-nowrap { white-space: nowrap; }
  .whitespace-pre { white-space: pre; }
  .whitespace-pre-line { white-space: pre-line; }
  .whitespace-pre-wrap { white-space: pre-wrap; }
  
  /* 断字 */
  .break-normal { overflow-wrap: normal; word-break: normal; }
  .break-words { overflow-wrap: break-word; }
  .break-all { word-break: break-all; }
  .break-keep { word-break: keep-all; }
  
  /* 内容 */
  .content-none { content: none; }
  .content-[''] { content: ''; }
  
  /* 指针事件 */
  .pointer-events-none { pointer-events: none; }
  .pointer-events-auto { pointer-events: auto; }
  
  /* 滚动行为 */
  .scroll-auto { scroll-behavior: auto; }
  .scroll-smooth { scroll-behavior: smooth; }
  
  /* 滚动边距 */
  .scroll-m-0 { scroll-margin: 0; }
  .scroll-mt-0 { scroll-margin-top: 0; }
  .scroll-mr-0 { scroll-margin-right: 0; }
  .scroll-mb-0 { scroll-margin-bottom: 0; }
  .scroll-ml-0 { scroll-margin-left: 0; }
  .scroll-mx-0 { scroll-margin-left: 0; scroll-margin-right: 0; }
  .scroll-my-0 { scroll-margin-top: 0; scroll-margin-bottom: 0; }
  
  /* 滚动内边距 */
  .scroll-p-0 { scroll-padding: 0; }
  .scroll-pt-0 { scroll-padding-top: 0; }
  .scroll-pr-0 { scroll-padding-right: 0; }
  .scroll-pb-0 { scroll-padding-bottom: 0; }
  .scroll-pl-0 { scroll-padding-left: 0; }
  .scroll-px-0 { scroll-padding-left: 0; scroll-padding-right: 0; }
  .scroll-py-0 { scroll-padding-top: 0; scroll-padding-bottom: 0; }
  
  /* 滚动捕捉 */
  .snap-start { scroll-snap-align: start; }
  .snap-end { scroll-snap-align: end; }
  .snap-center { scroll-snap-align: center; }
  .snap-align-none { scroll-snap-align: none; }
  
  .snap-normal { scroll-snap-stop: normal; }
  .snap-always { scroll-snap-stop: always; }
  
  /* 触摸操作 */
  .touch-auto { touch-action: auto; }
  .touch-none { touch-action: none; }
  .touch-pan-x { touch-action: pan-x; }
  .touch-pan-y { touch-action: pan-y; }
  .touch-pinch-zoom { touch-action: pinch-zoom; }
  .touch-manipulation { touch-action: manipulation; }
  
  /* 用户选择 */
  .select-none { user-select: none; }
  .select-text { user-select: text; }
  .select-all { user-select: all; }
  .select-auto { user-select: auto; }
  
  /* 重设样式 */
  .resize-none { resize: none; }
  .resize-y { resize: vertical; }
  .resize-x { resize: horizontal; }
  .resize { resize: both; }
  
  /* 滚动条 */
  .scrollbar-thin { scrollbar-width: thin; }
  .scrollbar-auto { scrollbar-width: auto; }
  .scrollbar-none { scrollbar-width: none; }
  
  /* 文本方向 */
  .text-direction-ltr { direction: ltr; }
  .text-direction-rtl { direction: rtl; }
  .text-direction-inherit { direction: inherit; }
  
  /* 书写模式 */
  .text-orientation-mixed { text-orientation: mixed; }
  .text-orientation-upright { text-orientation: upright; }
  .text-orientation-sideways { text-orientation: sideways; }
  .text-orientation-upright { text-orientation: upright; }

/* 11. 现代CSS特性增强 */
@layer utilities {
  /* 视口单位 */
  .vh-100 { block-size: 100vh; }
  .vw-100 { inline-size: 100vw; }
  
  /* 逻辑属性尺寸 */
  .size-full { block-size: 100%; inline-size: 100%; }
  .size-screen { block-size: 100vh; inline-size: 100vw; }
  
  /* 现代滚动条样式 */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-gray-200);
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--color-gray-200);
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: var(--radius-full);
  }
  
  /* 现代聚焦样式 */
  .focus-ring {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  
  .focus-ring:focus-visible {
    outline-color: var(--color-primary);
    box-shadow: 0 0 0 4px hsla(220, 85%, 55%, 0.2);
  }
  
  /* 现代表单控件样式 */
  input[type="range"] {
    -webkit-appearance: none;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: var(--radius-full);
    cursor: pointer;
  }
  
  /* 现代切换开关 */
  .toggle-switch {
    position: relative;
    display: inline-block;
    inline-size: 48px;
    block-size: 24px;
  }
  
  .toggle-switch input {
    opacity: 0;
    inline-size: 0;
    block-size: 0;
  }
  
  .toggle-slider {
    position: absolute;
    inset: 0;
    background-color: var(--color-gray-300);
    transition: var(--transition-fast);
    border-radius: var(--radius-full);
  }
  
  .toggle-slider:before {
    position: absolute;
    content: "";
    block-size: 16px;
    inline-size: 16px;
    inset-block-start: 4px;
    inset-inline-start: 4px;
    background-color: white;
    transition: var(--transition-fast);
    border-radius: var(--radius-full);
  }
  
  input:checked + .toggle-slider {
    background-color: var(--color-primary);
  }
  
  input:checked + .toggle-slider:before {
    transform: translateX(24px);
  }
  
  /* 12. 现代布局增强 */
  .stack > * + * {
    margin-block-start: var(--spacing-md);
  }
  
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
  }
  
  .sidebar {
    display: grid;
    grid-template-columns: fit-content(20rem) 1fr;
    gap: var(--spacing-lg);
  }
  
  .center {
    display: grid;
    place-items: center;
  }
  
  /* 13. 现代文本效果 */
  .text-balance {
    text-wrap: balance;
  }
  
  .text-pretty {
    text-wrap: pretty;
  }
  
  .text-gradient {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-accent));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  
  /* 14. 现代交互效果 */
  .hover-scale {
    transition: transform var(--transition-fast);
  }
  
  .hover-scale:hover {
    transform: scale(1.05);
  }
  
  .active-scale:active {
    transform: scale(0.98);
  }
  
  /* 15. 现代媒体查询 */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-dark: hsl(0, 0%, 98%);
      --color-light: hsl(220, 15%, 20%);
      --color-gray-100: hsl(220, 15%, 15%);
      --color-gray-200: hsl(220, 15%, 20%);
      --color-gray-300: hsl(220, 10%, 30%);
      --color-gray-400: hsl(220, 10%, 40%);
      --color-gray-500: hsl(220, 10%, 50%);
      --color-gray-600: hsl(220, 10%, 60%);
      --color-gray-700: hsl(220, 10%, 70%);
      --color-gray-800: hsl(220, 10%, 80%);
      --color-gray-900: hsl(220, 10%, 90%);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* 16. 现代CSS功能检测 */
@supports (container-type: inline-size) {
  .container-query-support {
    display: block;
  }
}

@supports not (container-type: inline-size) {
  .container-query-support {
    display: none;
  }
}

/* 17. 最终层 - 覆盖层 */
@layer overrides {
  /* 这里可以放置需要覆盖其他样式的特殊规则 */
}