/* ============================================
   AooPower Design System v5.0 - Modern Pro
   Optimized for conversion & readability
   ============================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* 主色调 - 蓝色系（信任、专业） */
  --primary:#2563eb;
  --primary-light:#3b82f6;
  --primary-dark:#1d4ed8;
  --primary-gradient:linear-gradient(135deg,#2563eb,#7c3aed);
  
  /* 辅助色 */
  --secondary:#7c3aed;
  --success:#10b981;
  --success-bg:#d1fae5;
  --danger:#ef4444;
  --danger-bg:#fee2e2;
  --warning:#f59e0b;
  --warning-bg:#fef3c7;
  --info:#06b6d4;
  --info-bg:#cffafe;
  
  /* 中性色 */
  --bg:#f8fafc;
  --bg-alt:#f1f5f9;
  --card-bg:#ffffff;
  --text:#0f172a;
  --text-primary:#1e293b;
  --text-secondary:#475569;
  --text-tertiary:#64748b;
  --text-muted:#94a3b8;
  --border:#e2e8f0;
  --border-light:#f1f5f9;
  --border-focus:#cbd5e1;
  
  /* 阴影系统 */
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 2px 4px rgba(0,0,0,.06);
  --shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-md:0 6px 8px -1px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.05);
  --shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);
  
  /* 圆角系统 */
  --radius-sm:6px;
  --radius:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-full:9999px;
  
  /* 间距系统 */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  
  /* 字体系统 */
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans SC',sans-serif;
  --font-mono:'SF Mono',Monaco,'Cascadia Code','Roboto Mono',Consolas,monospace;
  
  /* 最大宽度 */
  --max-w:1200px;
  --max-w-narrow:900px;
  --max-w-content:800px;
  --max-w-prose:65ch;
  
  /* 过渡动画 */
  --transition-fast:150ms cubic-bezier(.4,0,.2,1);
  --transition:200ms cubic-bezier(.4,0,.2,1);
  --transition-slow:300ms cubic-bezier(.4,0,.2,1);
}

/* ===== 基础重置 ===== */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--primary-dark);text-decoration:underline}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}

/* ===== 排版系统 ===== */
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--text-primary);margin-bottom:var(--space-4)}
h1{font-size:clamp(1.75rem,4vw,2.5rem);letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
h4{font-size:1.125rem}
h5{font-size:1rem}
h6{font-size:.875rem}

p{margin-bottom:var(--space-4);color:var(--text-secondary)}
p:last-child{margin-bottom:0}

.text-sm{font-size:.875rem;line-height:1.5}
.text-lg{font-size:1.125rem;line-height:1.7}
.text-xl{font-size:1.25rem;line-height:1.7}
.text-2xl{font-size:1.5rem;line-height:1.6}

.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.font-medium{font-weight:500}

.text-primary{color:var(--text-primary)}
.text-secondary{color:var(--text-secondary)}
.text-muted{color:var(--text-muted)}
.text-brand{color:var(--primary)}

/* ===== 导航栏 ===== */
.navbar{background:var(--card-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;box-shadow:var(--shadow-sm)}
.nav-container{max-width:var(--max-w);margin:0 auto;padding:0 var(--space-6);display:flex;justify-content:space-between;align-items:center;height:64px}
.nav-logo{font-size:1.5rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;transition:opacity var(--transition-fast)}
.nav-logo:hover{opacity:.8;text-decoration:none}
.nav-menu{display:flex;gap:var(--space-8);list-style:none;align-items:center}
.nav-menu a{color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:.95rem;padding:var(--space-2) 0;border-bottom:2px solid transparent;transition:all var(--transition-fast)}
.nav-menu a:hover,.nav-menu a.active{color:var(--primary);border-bottom-color:var(--primary);text-decoration:none}
.nav-right{display:flex;align-items:center;gap:var(--space-4)}

/* 语言切换 */
.lang-switch{display:flex;gap:2px;background:var(--bg-alt);border-radius:var(--radius-md);padding:3px}
.lang-switch a{color:var(--text-tertiary);text-decoration:none;font-size:13px;font-weight:600;padding:5px 12px;border-radius:var(--radius-sm);transition:all var(--transition-fast)}
.lang-switch a:hover{color:var(--text-primary);text-decoration:none}
.lang-switch a.active{color:var(--primary);background:var(--card-bg);box-shadow:var(--shadow-xs)}

/* 移动端菜单 */
.nav-mobile-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-primary);padding:var(--space-2)}
@media(max-width:768px){
  .nav-menu{display:none}
  .nav-mobile-toggle{display:block}
  .nav-container{height:56px;padding:0 var(--space-4)}
  .navbar.open .nav-menu{display:flex;flex-direction:column;position:absolute;top:56px;left:0;right:0;background:var(--card-bg);border-bottom:1px solid var(--border);padding:var(--space-4);box-shadow:var(--shadow-lg)}
  .navbar.open .nav-menu li{width:100%}
  .navbar.open .nav-menu a{display:block;padding:var(--space-3) 0;border-bottom:1px solid var(--border-light)}
}

/* ===== 容器 ===== */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--space-6)}
.container-narrow{max-width:var(--max-w-narrow);margin:0 auto;padding:0 var(--space-6)}
.container-content{max-width:var(--max-w-content);margin:0 auto;padding:0 var(--space-6)}

/* ===== Hero 区域 ===== */
.hero{text-align:center;padding:var(--space-16) 0 var(--space-12);background:linear-gradient(180deg,var(--card-bg) 0%,var(--bg) 100%)}
.hero h1{margin-bottom:var(--space-4);background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);max-width:600px;margin:0 auto var(--space-8)}
.hero-features{display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap}
.hero-features .feature{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--bg-alt);border-radius:var(--radius-full);font-size:.9rem;font-weight:500;color:var(--text-secondary)}
@media(max-width:640px){
  .hero{padding:var(--space-10) 0 var(--space-8)}
  .hero-features{flex-direction:column;gap:var(--space-3)}
}

/* ===== 按钮系统 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-weight:600;font-size:.95rem;border-radius:var(--radius-md);transition:all var(--transition-fast);border:none;cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.4)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(37,99,235,.5);text-decoration:none;color:#fff}
.btn-secondary{background:var(--card-bg);color:var(--text-primary);border:2px solid var(--border)}
.btn-secondary:hover{background:var(--bg-alt);border-color:var(--border-focus);text-decoration:none}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:1.05rem;border-radius:var(--radius-lg)}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:.875rem}
.btn-block{width:100%}

/* ===== 卡片系统 ===== */
.card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:all var(--transition-slow);border:1px solid var(--border-light)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.card-header{padding:var(--space-6);border-bottom:1px solid var(--border-light)}
.card-body{padding:var(--space-6)}
.card-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--border-light);background:var(--bg-alt)}

/* 工具卡片 */
.tool-card{display:block;background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow);transition:all var(--transition-slow);border:1px solid var(--border-light);text-decoration:none;color:inherit}
.tool-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px);text-decoration:none;color:inherit}
.tool-icon{font-size:2.5rem;margin-bottom:var(--space-4)}
.tool-name{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-2)}
.tool-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.5}

/* 分类卡片 */
.category-card{display:block;background:var(--card-bg);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow);transition:all var(--transition-slow);border:1px solid var(--border-light);text-decoration:none;color:inherit;text-align:center}
.category-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px);text-decoration:none;color:inherit}
.category-icon{font-size:3rem;margin-bottom:var(--space-4)}
.category-card h3{font-size:1.125rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-2)}
.category-card p{font-size:.9rem;color:var(--text-secondary)}

/* ===== 网格系统 ===== */
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* ===== 工具页 ===== */
.tool-wrap{max-width:var(--max-w-narrow);margin:0 auto;padding:var(--space-8) var(--space-6)}
.tool-container{background:var(--card-bg);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);overflow:hidden}
.tool-header{background:var(--primary-gradient);color:#fff;padding:var(--space-8) var(--space-6);text-align:center}
.tool-header h1{font-size:1.75rem;margin-bottom:var(--space-2);color:#fff}
.tool-header p{font-size:1rem;opacity:.95;max-width:500px;margin:0 auto}
.tool-body{padding:var(--space-6)}

/* 表单元素 */
.tool-form{margin-bottom:var(--space-6)}
.form-group{margin-bottom:var(--space-4)}
.form-group label{display:block;margin-bottom:var(--space-2);font-weight:600;font-size:.9rem;color:var(--text-primary)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:var(--space-3) var(--space-4);border:2px solid var(--border);border-radius:var(--radius-md);font-size:1rem;transition:border-color var(--transition-fast);background:#fff}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}

/* 结果展示 */
.results-section{background:var(--success-bg);border:2px solid var(--success);border-radius:var(--radius-lg);padding:var(--space-6);margin-top:var(--space-6);text-align:center}
.result-hero{margin-bottom:var(--space-6)}
.result-value{font-size:3rem;font-weight:800;color:var(--success);line-height:1.2}
.result-label{font-size:.9rem;color:var(--text-secondary);margin-top:var(--space-2)}
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.metric-card{background:var(--card-bg);padding:var(--space-4);border-radius:var(--radius-md);text-align:center;box-shadow:var(--shadow-xs)}
.metric-card .val{font-size:1.5rem;font-weight:700;color:var(--primary)}
.metric-card .lbl{font-size:.8rem;color:var(--text-tertiary);margin-top:var(--space-1)}

/* ===== SEO 内容区 ===== */
.seo-content{max-width:var(--max-w-content);margin:var(--space-12) auto;padding:0 var(--space-6)}
.seo-content h2{font-size:1.5rem;margin-bottom:var(--space-4);color:var(--text-primary)}
.seo-content p{color:var(--text-secondary);margin-bottom:var(--space-4)}
.seo-content ul,.seo-content ol{margin:var(--space-4) 0;padding-left:var(--space-6);color:var(--text-secondary)}
.seo-content li{margin-bottom:var(--space-2)}

/* ===== 页脚 ===== */
.footer{background:var(--text-primary);color:#fff;padding:var(--space-12) 0 var(--space-6);margin-top:var(--space-16)}
.footer-container{max-width:var(--max-w);margin:0 auto;padding:0 var(--space-6);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8)}
.footer-section h4{font-size:1rem;font-weight:700;margin-bottom:var(--space-4);color:#fff}
.footer-section p{font-size:.9rem;color:var(--text-muted);line-height:1.6}
.footer-section ul{list-style:none}
.footer-section ul li{margin-bottom:var(--space-2)}
.footer-section ul li a{color:var(--text-muted);font-size:.9rem;transition:color var(--transition-fast)}
.footer-section ul li a:hover{color:#fff;text-decoration:none}
.footer-bottom{max-width:var(--max-w);margin:var(--space-8) auto 0;padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:.875rem;color:var(--text-muted)}
@media(max-width:768px){
  .footer-container{grid-template-columns:1fr;gap:var(--space-6)}
}

/* ===== 广告位 ===== */
.ad-slot{background:var(--bg-alt);border:1px dashed var(--border);border-radius:var(--radius-md);padding:var(--space-4);margin:var(--space-6) 0;text-align:center;min-height:100px;display:flex;align-items:center;justify-content:center}
.ad-slot::before{content:'Advertisement';font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}

/* ===== 面包屑 ===== */
.breadcrumb{max-width:var(--max-w);margin:0 auto;padding:var(--space-4) var(--space-6);font-size:.85rem;color:var(--text-tertiary)}
.breadcrumb a{color:var(--primary);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .separator{margin:0 var(--space-2);color:var(--border)}

/* ===== 工具列表页 ===== */
.tools-header{text-align:center;padding:var(--space-12) 0 var(--space-8)}
.tools-header h1{margin-bottom:var(--space-4)}
.tools-header p{font-size:1.125rem;color:var(--text-secondary);max-width:600px;margin:0 auto}

/* 搜索框 */
.tools-search{max-width:600px;margin:0 auto var(--space-8)}
.search-input{width:100%;padding:var(--space-4) var(--space-6);border:2px solid var(--border);border-radius:var(--radius-full);font-size:1rem;transition:all var(--transition-fast)}
.search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.1)}

/* 分类筛选 */
.tools-filters{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-bottom:var(--space-8)}
.filter-btn{padding:var(--space-2) var(--space-4);border:2px solid var(--border);border-radius:var(--radius-full);background:var(--card-bg);font-size:.9rem;font-weight:500;color:var(--text-secondary);transition:all var(--transition-fast)}
.filter-btn:hover{border-color:var(--primary);color:var(--primary)}
.filter-btn.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* 工具网格 */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-6);margin-bottom:var(--space-12)}

/* ===== 博客列表页 ===== */
.blog-header{text-align:center;padding:var(--space-12) 0 var(--space-8)}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--space-8);margin-bottom:var(--space-12)}

/* 博客卡片 */
.blog-card{display:block;background:var(--card-bg);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:all var(--transition-slow);border:1px solid var(--border-light);text-decoration:none;color:inherit}
.blog-card:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px);text-decoration:none;color:inherit}
.blog-card-image{height:200px;background:var(--primary-gradient);display:flex;align-items:center;justify-content:center;font-size:4rem}
.blog-card-body{padding:var(--space-6)}
.blog-card-meta{font-size:.8rem;color:var(--text-tertiary);margin-bottom:var(--space-2)}
.blog-card-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:var(--space-3);line-height:1.3}
.blog-card-excerpt{font-size:.95rem;color:var(--text-secondary);line-height:1.6}

/* ===== 博客文章页 ===== */
.article-header{text-align:center;padding:var(--space-12) 0 var(--space-8);max-width:800px;margin:0 auto}
.article-meta{font-size:.9rem;color:var(--text-tertiary);margin-bottom:var(--space-4)}
.article-content{max-width:var(--max-w-prose);margin:0 auto;padding:0 var(--space-6);font-size:1.05rem;line-height:1.8;color:var(--text-secondary)}
.article-content h2{font-size:1.5rem;margin-top:var(--space-10);margin-bottom:var(--space-4);color:var(--text-primary)}
.article-content h3{font-size:1.25rem;margin-top:var(--space-8);margin-bottom:var(--space-3);color:var(--text-primary)}
.article-content p{margin-bottom:var(--space-5)}
.article-content ul,.article-content ol{margin:var(--space-5) 0;padding-left:var(--space-6)}
.article-content li{margin-bottom:var(--space-2)}
.article-content a{color:var(--primary);text-decoration:underline}
.article-content blockquote{border-left:4px solid var(--primary);padding-left:var(--space-4);margin:var(--space-6) 0;font-style:italic;color:var(--text-secondary)}
.article-content code{background:var(--bg-alt);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.85em}
.article-content pre{background:var(--text-primary);color:#fff;padding:var(--space-4);border-radius:var(--radius-md);overflow-x:auto;margin:var(--space-6) 0}
.article-content pre code{background:none;padding:0;color:inherit}

/* ===== 特性展示 ===== */
.features-section{padding:var(--space-16) 0;background:var(--card-bg)}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);max-width:var(--max-w);margin:0 auto;padding:0 var(--space-6)}
.feature-box{text-align:center;padding:var(--space-6)}
.feature-icon{font-size:3rem;margin-bottom:var(--space-4)}
.feature-box h3{font-size:1.125rem;font-weight:700;margin-bottom:var(--space-2)}
.feature-box p{font-size:.95rem;color:var(--text-secondary)}
@media(max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.features-grid{grid-template-columns:1fr}}

/* ===== 分类展示 ===== */
.categories-section{padding:var(--space-16) 0}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-6);max-width:var(--max-w);margin:0 auto;padding:0 var(--space-6)}

/* ===== Section 通用 ===== */
.section{padding:var(--space-16) 0}
.section-title{font-size:1.75rem;font-weight:700;text-align:center;margin-bottom:var(--space-10);color:var(--text-primary)}
.section-footer{text-align:center;margin-top:var(--space-10)}

/* ===== 工具页标签 ===== */
.tool-tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}
.tool-tag{padding:var(--space-1) var(--space-3);background:var(--bg-alt);border-radius:var(--radius-full);font-size:.75rem;font-weight:500;color:var(--text-secondary)}

/* ===== 加载状态 ===== */
.loading{display:inline-block;width:20px;height:20px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 隐藏元素 ===== */
.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}

/* ===== 打印优化 ===== */
@media print{
  .navbar,.footer,.ad-slot,.no-print{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd}
}