/* Reset & Base Styles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--font-family);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text-primary);background-color:var(--color-bg-secondary);min-height:100vh;overflow-x:hidden}
/* 滚动条样式 */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--color-bg-tertiary);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb{background:var(--color-text-quaternary);border-radius:var(--radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}
/* 选中文字样式 */
::selection{background-color:var(--color-brand-subtle);color:var(--color-brand)}
/* 链接基础样式 */
a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}
/* 图片基础样式 */
img{max-width:100%;height:auto;display:block}
/* 按钮基础样式 */
button{font-family:inherit;cursor:pointer;border:none;background:none;outline:none}
button:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}
/* 输入框基础样式 */
input,textarea,select{font-family:inherit;font-size:inherit;outline:none}
/* 列表基础样式 */
ul,ol{list-style:none}
/* 容器 */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-padding)}
/* 滚动进度条 */
.scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:linear-gradient(90deg,var(--color-brand),var(--color-brand-light));z-index:var(--z-tooltip);transition:width .1s linear}
/* 通用按钮样式 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:var(--text-base);font-weight:var(--font-medium);border-radius:var(--radius-md);transition:all var(--transition-slow) var(--ease-out);cursor:pointer;white-space:nowrap}
.btn svg{flex-shrink:0}
.btn-primary{background-color:var(--color-brand);color:white;box-shadow:var(--shadow-md)}
.btn-primary:hover{background-color:var(--color-brand-dark);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-secondary{background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.btn-secondary:hover{background-color:var(--color-bg-tertiary);border-color:var(--color-text-quaternary);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-secondary:active{transform:translateY(0) scale(.98)}
.btn-outline{background-color:transparent;color:var(--color-text-secondary);border:1px solid var(--color-border)}
.btn-outline:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary);border-color:var(--color-text-tertiary)}
.btn-ghost{background-color:transparent;color:var(--color-text-secondary)}
.btn-ghost:hover{background-color:var(--color-bg-tertiary);color:var(--color-text-primary)}
.btn-lg{padding:var(--space-4) var(--space-6);font-size:var(--text-md);border-radius:var(--radius-lg)}
.btn-sm{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);border-radius:var(--radius-sm)}
/* 徽章样式 */
.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-semibold);border-radius:var(--radius-sm)}
.badge-new{background-color:var(--color-rose);color:var(--color-rose-text)}
.badge-hot{background-color:var(--color-apricot);color:var(--color-apricot-text)}
.badge-featured{background-color:var(--color-lavender);color:var(--color-lavender-text)}
/* 分类标签 */
.tag{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:var(--font-medium);border-radius:var(--radius-full);background-color:var(--color-bg-tertiary);color:var(--color-text-secondary);transition:all var(--transition-fast)}
.tag:hover{background-color:var(--color-brand-subtle);color:var(--color-brand)}
/* 区块标题 */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-6)}
.section-title{font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--color-text-primary);display:flex;align-items:center;gap:var(--space-3)}
/* 空状态 */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16) var(--space-6);text-align:center}
.empty-icon{font-size:64px;margin-bottom:var(--space-4);opacity:.6}
.empty-state h3{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-text-primary);margin-bottom:var(--space-2)}
.empty-state p{font-size:var(--text-base);color:var(--color-text-tertiary)}
/* 加载动画 */
.loading-spinner{display:inline-block;width:24px;height:24px;border:2px solid var(--color-border);border-top-color:var(--color-brand);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* 骨架屏 */
.skeleton{background:linear-gradient(90deg,var(--color-bg-tertiary) 25%,var(--color-border-light) 50%,var(--color-bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}