/* ====================================================
   前端公共样式表 — 语义化 CSS（不依赖 Tailwind）
   适用范围：modules/frontend/views/front/ 下所有模板
   ==================================================== */

/* ---------- CSS 变量（品牌色 / 中性色 / 圆角 / 阴影） ---------- */
:root {
  --brand-50:  #E8F4FC;
  --brand-500: #4A90E2;
  --brand-600: #3F82D6;
  --accent-500:#FF9500;
  --ink-900:   #1A1A1A;
  --ink-700:   #333333;
  --surface-50:#F5F7FA;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-900: #0f172a;
  --radius:    6px;
  --shadow-soft:0 2px 4px rgba(0,0,0,.05);
  --shadow-md:  0 4px 10px rgba(0,0,0,.08);
  --transition: .2s ease;
  --mainColor: #4A90E2;
}

/* ---------- 基础重置 ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- 通用辅助类 ---------- */
.hidden   { display:none !important; }
.sr-only  { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ================================================================
   LAYOUT — 页面整体 / header / footer
   ================================================================ */

/* 页面整体 */
.page-body { min-height:100vh; background:var(--surface-50); color:var(--ink-700); }

/* 通用内容容器 */
.container { max-width:72rem; margin:0 auto; padding:0 1rem; }

/* 顶部占位 */
.header-spacer { height:4rem; }

/* ---- 站点 Header ---- */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  border-bottom:1px solid var(--slate-200);
  transition:background var(--transition);
}
/* .site-header .container 由内层 div 的内联 flex 布局控制 */

/* Logo */
.header-logo { margin:0; flex-shrink:0; }
.header-logo a { display:flex; align-items:center; gap:.5rem; white-space:nowrap; }
.header-logo img { width:2.25rem; height:2.25rem; border-radius:var(--radius); object-fit:contain; }
.header-logo .site-name { font-size:1rem; font-weight:600; color:var(--ink-900); white-space:nowrap; }

/* PC 导航 */
.main-nav { display:none; align-items:center; gap:2rem; font-size:.875rem; white-space:nowrap; margin-left: 20%;}
.main-nav a { font-size:1rem; font-weight:500; transition:color var(--transition); }
.main-nav a:hover { color:#3b82f6; }

/* 右侧操作区 */
.header-actions { display:none; align-items:center; gap:.75rem; }
.btn-login { padding:.5rem .75rem; border-radius:var(--radius); font-size:.875rem; color:var(--ink-900); transition:color var(--transition); }
.btn-login:hover { color:var(--brand-600); }
.btn-register { display:inline-block; padding:.5rem 1rem; border-radius:var(--radius); font-size:.875rem; color:#fff; background:var(--brand-500); box-shadow:var(--shadow-soft); transition:background var(--transition); }
.btn-register:hover { background:var(--brand-600); }

/* 用户下拉 */
.user-dropdown { position:relative; }
.user-dropdown-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius:var(--radius); background:transparent; border:none; cursor:pointer; }
.user-dropdown-btn:hover { background:var(--slate-50); }
.user-avatar { width:2rem; height:2rem; border-radius:50%; background:var(--brand-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.875rem; font-weight:600; }
.user-dropdown-menu { position:absolute; right:0; margin-top:.5rem; width:10rem; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft); border:1px solid var(--slate-200); overflow:hidden; z-index:50; }
.user-dropdown-menu a { display:block; padding:.625rem 1rem; font-size:.875rem; color:var(--ink-700); }
.user-dropdown-menu a:hover { background:var(--slate-50); color:var(--brand-600); }
.user-dropdown-menu .divider { border-top:1px solid var(--slate-100); }
.user-dropdown-menu .logout { color:#ef4444; }
.user-dropdown-menu .logout:hover { background:#fef2f2; }

/* 语言切换 */
.lang-switcher { position:relative; }
.lang-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-radius:var(--radius); font-size:.875rem; color:var(--ink-900); background:transparent; border:none; cursor:pointer; }
.lang-btn:hover { color:var(--brand-600); }
.lang-menu { position:absolute; right:0; margin-top:.5rem; width:11rem; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft); border:1px solid var(--slate-200); overflow:hidden; z-index:50; }
.lang-menu button { width:100%; text-align:left; padding:.5rem .75rem; font-size:.875rem; background:transparent; border:none; cursor:pointer; display:flex; align-items:center; gap:.5rem; }
.lang-menu button:hover { background:var(--slate-50); }

/* 移动端菜单 */
.mobile-menu-btn { display:inline-flex; align-items:center; justify-content:center; padding:.5rem; border-radius:var(--radius); background:transparent; border:none; cursor:pointer; }
.mobile-menu-btn svg { width:1.5rem; height:1.5rem; color:var(--ink-900); }
.mobile-menu { border-top:1px solid var(--slate-200); background:#fff; }
.mobile-menu .container { padding-top:.75rem; padding-bottom:.75rem; }
.mobile-menu nav { display:flex; flex-direction:column; gap:.5rem; font-size:.875rem; }
.mobile-menu nav a { padding:.5rem 0; }
.mobile-menu nav a:hover { color:var(--brand-500); }
.mobile-menu .divider { height:1px; background:var(--slate-200); margin:.5rem 0; }
.mobile-user-avatar { width:1.75rem; height:1.75rem; border-radius:50%; background:var(--brand-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; }
.mobile-menu .console-link { display:flex; align-items:center; gap:.5rem; padding:.5rem 0; }
.mobile-menu .logout-link { color:#ef4444; padding:.5rem 0; }

/* ---- 页脚 ---- */
.site-footer { border-top:1px solid var(--slate-200); background:#fff; }
.site-footer .container { padding-top:2.5rem; padding-bottom:2.5rem; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
.footer-grid h3 { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.footer-grid h3.footer-brand { font-size:1rem; }
.footer-grid p { margin-top:.5rem; font-size:.875rem; color:var(--ink-700); }
.footer-links { display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem; font-size:.875rem; }
.footer-links a { color:var(--ink-700); }
.footer-links a:hover { color:var(--brand-500); }
.footer-copy { margin-top:2rem; font-size:.75rem; color:var(--slate-500); }

@media(min-width:768px) { .footer-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) {
  .main-nav { display:flex; }
  .header-actions { display:flex; }
  .mobile-menu-btn { display:none; }
}



/* ================================================================
   PAGES — 各页面通用组件样式
   ================================================================ */

/* ---- 通用：页面顶部 Banner 区 ---- */
.page-banner { background:var(--brand-50); padding:3.5rem 0; }
.page-banner .banner-inner { max-width:48rem; }
.page-banner .banner-title { font-size:1.875rem; font-weight:600; color:var(--ink-900); line-height:1.25; }
.page-banner .banner-title .highlight { display:block; color:var(--brand-500); padding-top:.75rem; }
.page-banner .banner-desc { margin-top:1.25rem; font-size:1rem; color:var(--ink-700); }
.page-banner .banner-actions { margin-top:2rem; display:flex; flex-direction:column; gap:.75rem; }
@media(min-width:640px) { .page-banner .banner-actions { flex-direction:row; } }
@media(min-width:768px) {
  .page-banner { padding:4.5rem 0; }
  .page-banner .banner-title { font-size:3rem; }
  .page-banner .banner-desc { font-size:1.125rem; }
}

/* ---- 通用按钮 ---- */
.btn-primary {
  display:inline-flex; justify-content:center; align-items:center;
  padding:.75rem 1.5rem; border-radius:var(--radius); font-size:.875rem; font-weight:500;
  color:#fff; background:var(--brand-500); box-shadow:var(--shadow-soft);
  transition:background var(--transition); border:none; cursor:pointer;
}
.btn-primary:hover { background:var(--brand-600); }
.btn-secondary {
  display:inline-flex; justify-content:center; align-items:center;
  padding:.75rem 1.5rem; border-radius:var(--radius); font-size:.875rem; font-weight:500;
  color:var(--ink-900); background:#fff; box-shadow:var(--shadow-soft);
  transition:background var(--transition); border:none; cursor:pointer;
}
.btn-secondary:hover { background:var(--slate-50); }
.btn-accent {
  display:inline-flex; justify-content:center; align-items:center;
  padding:.5rem 1rem; border-radius:var(--radius); font-size:.875rem; font-weight:500;
  color:#fff; background:var(--accent-500); box-shadow:var(--shadow-soft);
  transition:opacity var(--transition); border:none; cursor:pointer;
}
.btn-accent:hover { opacity:.9; }
.btn-outline {
  display:inline-flex; justify-content:center; align-items:center;
  padding:.625rem 1.25rem; border-radius:var(--radius); font-size:.875rem; font-weight:500;
  color:var(--ink-700); background:#fff; box-shadow:var(--shadow-soft);
  transition:background var(--transition); border:none; cursor:pointer;
}
.btn-outline:hover { background:var(--slate-50); }
.btn-outline svg { width:1rem; height:1rem; }
.btn-back { display:inline-flex; align-items:center; gap:.5rem; }

/* ---- 区块标题 ---- */
.section-title { font-size:1.5rem; font-weight:600; color:var(--ink-900); }
.section-desc  { margin-top:.5rem; font-size:.875rem; color:var(--ink-700); }
@media(min-width:768px) { .section-title { font-size:1.875rem; } .section-desc { font-size:1rem; } }

/* ---- section 间距 ---- */
.section-gap { padding:3.5rem 0; }
.section-gap-sm { padding:3rem 0; }
.section-bg-white { background:#fff; }
@media(min-width:768px) { .section-gap { padding:4.5rem 0; } }

/* ---- 通用卡片 ---- */
.card { border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft); padding:1.25rem; }
.card-surface { border-radius:var(--radius); background:var(--surface-50); box-shadow:var(--shadow-soft); padding:1.5rem; }
.card-brand { border-radius:var(--radius); background:var(--brand-50); box-shadow:var(--shadow-soft); padding:1.5rem; }
.card-lg { padding:1.5rem; }
.card-title { font-weight:600; color:var(--ink-900); }
.card-text  { margin-top:.5rem; font-size:.875rem; color:var(--ink-700); }

/* ---- 通用网格 ---- */
.grid-1 { display:grid; grid-template-columns:1fr; gap:1rem; }
.grid-2 { display:grid; grid-template-columns:1fr; gap:1rem; }
.grid-3 { display:grid; grid-template-columns:1fr; gap:1rem; }
.grid-4 { display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:640px) { .grid-2 { grid-template-columns:repeat(2,1fr); } .grid-3 { grid-template-columns:repeat(2,1fr); } .grid-4 { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); } }

/* ---- 图标容器 ---- */
.icon-box { width:2.5rem; height:2.5rem; border-radius:var(--radius); background:var(--brand-50); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.icon-box svg { width:1.25rem; height:1.25rem; color:var(--brand-500); }

/* ---- 标签 ---- */
.tag { display:inline-block; font-size:.75rem; padding:.25rem .5rem; border-radius:var(--radius); background:var(--brand-50); color:var(--brand-600); }
.tag-pill { border-radius:9999px; }
.tag-sticky { background:#fef2f2; color:#ef4444; font-weight:500; }
.tag-hot    { background:#fff7ed; color:#f97316; font-weight:500; }


/* ================================================================
   HOME — 首页专属
   ================================================================ */

/* 服务卡片：横向满宽（第4个） */
.service-card-wide { display:flex; flex-direction:column; gap:.75rem; }
.service-card-wide .service-info { display:flex; align-items:flex-start; gap:1rem; }
.service-card-wide .service-info .card-title { font-weight:600; color:var(--ink-900); }
@media(min-width:768px) {
  .service-card-wide { flex-direction:row; align-items:center; justify-content:space-between; }
}

/* 案例卡片 */
.case-card { border-radius:var(--radius); background:var(--surface-50); box-shadow:var(--shadow-soft); overflow:hidden; }
.case-card .case-thumb { position:relative; width:100%; height:10rem; aspect-ratio:3/2; }
.case-card .case-thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.case-card .case-body { padding:1.25rem; }
.case-card .case-title { font-weight:600; color:var(--ink-900); max-width:16rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.case-card .case-desc { margin-top:.5rem; font-size:.875rem; color:var(--ink-700); }
.case-card .case-tags { margin-top:.75rem; display:flex; flex-wrap:wrap; gap:.5rem; }

/* 员工卡片 */
.employee-card { display:flex; flex-direction:column; gap:.75rem; }
.employee-card .employee-header { display:flex; align-items:center; gap:.75rem; }
.employee-card .employee-avatar { width:3rem; height:3rem; border-radius:50%; overflow:hidden; background:var(--surface-50); flex-shrink:0; }
.employee-card .employee-avatar img { width:100%; height:100%; object-fit:cover; }
.employee-card .employee-name { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.employee-card .employee-role { font-size:.75rem; color:var(--ink-700); }
.employee-card .employee-bio  { font-size:.875rem; color:var(--ink-700); }

/* 关于我们 + 咨询表单 */
.about-contact-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:1024px) { .about-contact-grid { grid-template-columns:repeat(2,1fr); } }

/* 咨询表单 */
.consult-form { margin-top:1rem; display:grid; grid-template-columns:1fr; gap:.75rem; }
@media(min-width:640px) { .consult-form { grid-template-columns:repeat(2,1fr); } }
.consult-form .form-full { grid-column:1 / -1; }
.consult-form label { font-size:.875rem; color:var(--ink-900); display:block; }
.consult-form input,
.consult-form textarea {
  margin-top:.25rem; width:100%; border-radius:var(--radius); border:1px solid var(--slate-200);
  background:#fff; padding:.5rem .75rem; font-size:.875rem; outline:none;
  transition:border-color var(--transition);
}
.consult-form input:focus,
.consult-form textarea:focus { border-color:var(--brand-500); }
.consult-form .form-actions { display:flex; align-items:center; gap:.75rem; grid-column:1 / -1; }
.consult-form .form-msg { font-size:.875rem; color:var(--ink-700); }

/* ================================================================
   CASES — 案例列表页（复用 .case-card）
   ================================================================ */
/* （已由 .case-card 覆盖） */

/* ================================================================
   NEWS — 新闻列表页
   ================================================================ */

/* 分类筛选 pills */
.category-pills { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.pill {
  display:inline-block; padding:.5rem 1rem; border-radius:9999px; font-size:.875rem; font-weight:500;
  transition:background var(--transition), color var(--transition); box-shadow:var(--shadow-soft);
}
.pill-default { background:#fff; color:var(--ink-700); }
.pill-default:hover { color:var(--brand-600); }
.pill-active  { background:var(--brand-500); color:#fff; }

/* 新闻列表 */
.news-list { border-top:1px solid var(--slate-200); }
.news-item { border-bottom:1px solid var(--slate-200); }
.news-item > a {
  display:flex; gap:1.25rem; padding:1.5rem 1rem; border-radius:var(--radius);
  transition:background var(--transition);
}
.news-item > a:hover { background:rgba(248,250,252,.5); }
.news-content { flex:1; min-width:0; }
.news-meta { display:flex; align-items:center; gap:.75rem; font-size:.75rem; color:var(--slate-500); margin-bottom:.5rem; }
.news-title { font-size:1rem; font-weight:600; color:var(--ink-900); transition:color var(--transition); }
.news-item:hover .news-title { color:var(--brand-500); }
.news-excerpt { margin-top:.5rem; font-size:.875rem; color:var(--ink-700); line-height:1.625; }
.news-tags { margin-top:.75rem; display:flex; flex-wrap:wrap; gap:.375rem; }
.news-stats { margin-top:.75rem; display:flex; align-items:center; gap:1rem; font-size:.75rem; color:var(--slate-400); }
.news-stats span { display:flex; align-items:center; gap:.25rem; }
.news-stats svg { width:.875rem; height:.875rem; }

/* 缩略图 */
.news-thumb { flex-shrink:0; display:none; }
.news-thumb-inner { width:10rem; height:7rem; border-radius:var(--radius); overflow:hidden; background:var(--slate-100); }
.news-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.news-item:hover .news-thumb img { transform:scale(1.05); }
@media(min-width:640px) { .news-thumb { display:block; } }
@media(min-width:768px) { .news-thumb-inner { width:12rem; height:8rem; } .news-title { font-size:1.125rem; } }


/* 文本截断 */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* 空数据 */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5rem 0; }
.empty-state .empty-icon { width:5rem; height:5rem; background:var(--slate-100); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.empty-state .empty-icon svg { width:2.5rem; height:2.5rem; color:var(--slate-400); }
.empty-state h3 { font-size:1.125rem; font-weight:500; color:var(--slate-900); margin-bottom:.5rem; }
.empty-state p { font-size:.875rem; color:var(--slate-500); text-align:center; max-width:24rem; }

/* 分页 */
.pagination { margin-top:2.5rem; display:flex; align-items:center; justify-content:space-between; }
.pagination-info { font-size:.875rem; color:var(--slate-500); }
.pagination-info strong { font-weight:500; color:var(--ink-900); }
.pagination-nav { display:flex; align-items:center; gap:.25rem; }
.page-btn {
  padding:.5rem .75rem; border-radius:var(--radius); font-size:.875rem; box-shadow:var(--shadow-soft);
  transition:background var(--transition); display:flex; align-items:center;
}
.page-btn svg { width:1rem; height:1rem; }
.page-btn-default { background:#fff; color:var(--ink-700); }
.page-btn-default:hover { background:var(--slate-50); }
.page-btn-active  { background:var(--brand-500); color:#fff; font-weight:500; }
.page-btn-disabled { background:#fff; color:var(--slate-400); opacity:.5; cursor:not-allowed; }
.page-btn-ellipsis { background:#fff; color:var(--slate-400); opacity:.5; cursor:default; }

/* 订阅 / CTA 条 */
.cta-bar {
  border-radius:var(--radius); background:var(--brand-50); box-shadow:var(--shadow-soft);
  padding:1.5rem; display:flex; flex-direction:column; gap:1rem;
}
.cta-bar .cta-title { font-size:1.125rem; font-weight:600; color:var(--ink-900); }
.cta-bar .cta-desc  { margin-top:.5rem; font-size:.875rem; color:var(--ink-700); }
.cta-bar form { display:flex; flex-direction:column; gap:.5rem; width:100%; }
.cta-bar input {
  width:100%; border-radius:var(--radius); border:1px solid var(--slate-200); background:#fff;
  padding:.5rem .75rem; font-size:.875rem; outline:none;
}
.cta-bar input:focus { border-color:var(--brand-500); }
@media(min-width:640px) { .cta-bar form { flex-direction:row; width:auto; } .cta-bar input { width:18rem; } }
@media(min-width:768px) {
  .cta-bar { flex-direction:row; align-items:center; justify-content:space-between; padding:1.5rem 2rem; }
}

/* ================================================================
   NEWS DETAIL — 新闻详情页
   ================================================================ */

/* 面包屑 */
.breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:.875rem; color:var(--slate-500); padding:.5rem 0; }
.breadcrumb a { transition:color var(--transition); }
.breadcrumb a:hover { color:var(--brand-500); }
.breadcrumb svg { width:.875rem; height:.875rem; color:var(--slate-400); }
.breadcrumb .current { color:var(--ink-900); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:16rem; }

/* 文章容器 */
.article-wrap { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden; }
.article-header { padding:1.5rem; }
.article-title { font-size:1.5rem; font-weight:700; color:var(--ink-900); line-height:1.25; }
.article-meta { margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; font-size:.875rem; color:var(--slate-500); }
.article-meta span { display:flex; align-items:center; gap:.375rem; }
.article-meta svg { width:1rem; height:1rem; }
.article-summary { margin-top:1.25rem; padding:.75rem 1rem; background:var(--slate-50); border-radius:var(--radius); border-left:4px solid var(--brand-500); }
.article-summary p { font-size:.875rem; color:var(--ink-700); line-height:1.625; }
.article-tags { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.article-divider { margin:1.5rem; border:0; border-top:1px solid var(--slate-100); }
@media(min-width:768px) {
  .article-header { padding:2rem 2.5rem; }
  .article-title  { font-size:1.875rem; }
}

/* 文章正文 — prose */
.article-body { padding:0 1.5rem 2rem; }
.prose { color:var(--ink-700); line-height:1.8; }
.prose h1,.prose h2,.prose h3,.prose h4 { color:var(--ink-900); font-weight:600; margin-top:1.5em; margin-bottom:.5em; }
.prose h2 { font-size:1.25rem; }
.prose h3 { font-size:1.125rem; }
.prose p { margin-bottom:1em; line-height:1.625; }
.prose a { color:var(--brand-500); }
.prose a:hover { text-decoration:underline; }
.prose img { max-width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow-soft); }
.prose table { width:100%; border-collapse:collapse; font-size:.875rem; }
.prose th,.prose td { border:1px solid var(--slate-200); padding:8px 12px; }
.prose th { background:var(--slate-50); color:var(--ink-900); }
.prose blockquote { border-left:4px solid var(--brand-500); background:var(--slate-50); padding:12px 16px; border-radius:0 var(--radius) var(--radius) 0; margin:1em 0; }
.prose pre { background:var(--slate-900); color:var(--slate-200); border-radius:var(--radius); padding:1rem; overflow:auto; }
.prose code { font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; font-size:.8125rem; background:var(--slate-100); padding:2px 6px; border-radius:4px; }
.prose pre code { background:transparent; padding:0; }
.prose ul,.prose ol { padding-left:1.5em; margin-bottom:1em; }
.prose li { margin-bottom:.25em; }
@media(min-width:768px) { .article-body { padding:0 2.5rem 2.5rem; } }

/* 上一篇 / 下一篇 */
.prev-next-nav { margin-top:2rem; display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:768px) { .prev-next-nav { grid-template-columns:repeat(2,1fr); } }
.nav-link-card {
  display:flex; align-items:center; gap:.75rem; padding:1rem; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow-soft); transition:box-shadow var(--transition);
}
.nav-link-card:hover { box-shadow:var(--shadow-md); }
.nav-link-card.next { justify-content:flex-end; text-align:right; }
.nav-link-card svg { width:1.25rem; height:1.25rem; color:var(--slate-400); flex-shrink:0; transition:color var(--transition); }
.nav-link-card:hover svg { color:var(--brand-500); }
.nav-link-card .nav-label { font-size:.75rem; color:var(--slate-400); margin-bottom:.25rem; }
.nav-link-card .nav-title { font-size:.875rem; font-weight:500; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:color var(--transition); }
.nav-link-card:hover .nav-title { color:var(--brand-500); }

/* 相关推荐 */
.related-section { margin-top:2.5rem; }
.related-section h3 { font-size:1.125rem; font-weight:600; color:var(--ink-900); margin-bottom:1rem; }
.related-card { display:block; padding:1rem; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-soft); transition:box-shadow var(--transition); }
.related-card:hover { box-shadow:var(--shadow-md); }
.related-card .related-thumb { width:100%; height:8rem; border-radius:var(--radius); overflow:hidden; background:var(--slate-100); margin-bottom:.75rem; }
.related-card .related-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.related-card:hover .related-thumb img { transform:scale(1.05); }
.related-card .related-date { font-size:.75rem; color:var(--slate-500); margin-bottom:.25rem; }
.related-card .related-title { font-size:.875rem; font-weight:600; color:var(--ink-900); transition:color var(--transition); }
.related-card:hover .related-title { color:var(--brand-500); }
.related-card .related-desc { margin-top:.25rem; font-size:.75rem; color:var(--ink-700); }

/* ================================================================
   SERVICES / ABOUTUS — 服务页 / 关于我们
   ================================================================ */

/* 信息块（用于 services 的技术标签网格 / aboutus 的小块） */
.info-block { border-radius:var(--radius); background:var(--brand-50); padding:1rem; }
.info-block .info-title { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.info-block .info-text  { margin-top:.25rem; font-size:.875rem; color:var(--ink-700); }

/* 流程步骤 */
.step-list { display:flex; flex-direction:column; gap:.75rem; margin-top:1rem; }
.step-item { border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft); padding:1rem; }
.step-item-surface { border-radius:var(--radius); background:var(--surface-50); padding:1rem; }
.step-title { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.step-desc  { margin-top:.25rem; font-size:.875rem; color:var(--ink-700); }

/* 技术标签网格 */
.tag-grid { margin-top:1rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }
.tag-item { border-radius:var(--radius); background:var(--brand-50); padding:.5rem .75rem; font-size:.875rem; color:var(--ink-900); }


/* ================================================================
   USER CENTER — 用户中心（控制台 / 个人资料 / 订单 / 地址 / 工单 等）
   ================================================================ */

/* ---- 用户中心整体布局 ---- */
.console-layout {
  max-width:72rem; margin:0 auto; padding:0 1rem;
  padding-top:2.5rem; padding-bottom:2.5rem;
}
.console-grid {
  display:grid; grid-template-columns:1fr; gap:1.5rem;
}
@media(min-width:1024px) {
  .console-grid { grid-template-columns:3fr 9fr; }
}

/* ---- 侧边栏 ---- */
.console-sidebar-wrap {
  position:relative;
}
@media(min-width:1024px) {
  .console-sidebar-wrap { position:sticky; top:6rem; }
}
.console-sidebar-gap { display:flex; flex-direction:column; gap:1rem; }

/* 侧边栏卡片 */
.sidebar-card {
  border-radius:var(--radius); background:#fff; border:1px solid var(--slate-100);
  box-shadow:var(--shadow-soft); padding:1.25rem;
}

/* 用户头像行 */
.sidebar-user { display:flex; align-items:center; gap:.75rem; }
.user-avatar-circle {
  width:2.5rem; height:2.5rem; border-radius:50%; background:var(--brand-500);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.875rem; font-weight:600; flex-shrink:0;
}
.sidebar-user-info { min-width:0; }
.sidebar-user-name { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.sidebar-user-id { margin-top:.125rem; font-size:.75rem; color:var(--slate-500); }

/* 侧边栏导航 */
.sidebar-nav { margin-top:1rem; display:flex; flex-direction:column; gap:.25rem; font-size:.875rem; }
.sidebar-nav a {
  display:block; border-radius:var(--radius); padding:.5rem .75rem;
  color:var(--ink-700); transition:background var(--transition), color var(--transition);
}
.sidebar-nav a:hover { background:var(--slate-50); }
.sidebar-nav a.active {
  background:var(--slate-100); font-weight:500; color:var(--brand-600);
}

/* 快捷操作 */
.quick-ops-label { font-size:.75rem; color:var(--slate-500); }
.quick-ops-grid { margin-top:.75rem; display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; }

/* ---- 主内容区 ---- */
.console-main { display:flex; flex-direction:column; gap:1.5rem; }

/* 页面头部卡片 */
.page-header-card {
  border-radius:var(--radius); background:#fff; border:1px solid var(--slate-100);
  box-shadow:var(--shadow-soft); padding:1.5rem;
}
.page-header-top { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.page-header-sub { font-size:.75rem; color:var(--slate-500); }
.page-header-title { margin-top:.25rem; font-size:1.5rem; font-weight:600; color:var(--ink-900); }
.page-header-desc { margin-top:.5rem; font-size:.875rem; color:var(--ink-700); }

/* ---- 通用表单样式 ---- */
.form-card {
  border-radius:var(--radius); background:#fff; border:1px solid var(--slate-100);
  box-shadow:var(--shadow-soft); padding:1.5rem;
}
.form-card-title { font-size:1rem; font-weight:600; color:var(--ink-900); margin-bottom:1.5rem; }
.form-body { display:flex; flex-direction:column; gap:1.25rem; }
.form-row-2 { display:grid; grid-template-columns:1fr; gap:1.25rem; }
.form-row-3 { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:640px) {
  .form-row-2 { grid-template-columns:repeat(2,1fr); }
  .form-row-3 { grid-template-columns:repeat(3,1fr); }
}
.form-group { display:flex; flex-direction:column; }
.form-label {
  display:block; font-size:.875rem; font-weight:500; color:var(--ink-700); margin-bottom:.375rem;
}
.form-label .required { color:#ef4444; }
.form-input,
.form-select,
.form-textarea {
  width:100%; border-radius:var(--radius); border:1px solid var(--slate-200);
  padding:.5rem .75rem; font-size:.875rem; color:var(--ink-900); outline:none;
  transition:border-color var(--transition), box-shadow var(--transition);
  background:#fff;
}
.form-input::placeholder,
.form-textarea::placeholder { color:var(--slate-400); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color:var(--brand-500);
  box-shadow:0 0 0 2px rgba(74,144,226,.15);
}
.form-textarea { resize:vertical; }
.form-checkbox-wrap { display:flex; align-items:flex-end; }
.form-checkbox-label { display:flex; align-items:center; gap:.5rem; cursor:pointer; padding:.5rem 0; }
.form-checkbox {
  width:1rem; height:1rem; border-radius:4px; accent-color:var(--brand-500);
}
.form-actions {
  padding-top:1rem; border-top:1px solid var(--slate-100);
  display:flex; align-items:center; gap:.75rem;
}

/* ---- 状态徽章 ---- */
.status-badge {
  display:inline-flex; align-items:center; padding:.125rem .625rem;
  border-radius:9999px; font-size:.75rem; font-weight:500;
}
.status-default   { background:var(--slate-100); color:#475569; }
.status-pending    { background:#fef3c7; color:#b45309; }
.status-info       { background:#dbeafe; color:#1d4ed8; }
.status-processing { background:#e0e7ff; color:#4338ca; }
.status-review     { background:#f3e8ff; color:#7c3aed; }
.status-success    { background:#dcfce7; color:#15803d; }
.status-danger     { background:#fee2e2; color:#dc2626; }
.status-warning    { background:#ffedd5; color:#c2410c; }
.status-muted      { background:#f1f5f9; color:#64748b; }
.status-urgent     { background:#fee2e2; color:#b91c1c; }


/* ---- 筛选标签栏 ---- */
.filter-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-pill {
  display:inline-block; padding:.375rem .75rem; border-radius:var(--radius);
  font-size:.875rem; font-weight:500; transition:background var(--transition), color var(--transition);
}
.filter-pill-default { background:var(--surface-50); color:var(--ink-700); }
.filter-pill-default:hover { background:var(--slate-100); }
.filter-pill-active { background:var(--brand-500); color:#fff; }

/* ---- 订单列表样式 ---- */
.order-card {
  border-radius:var(--radius); background:#fff; border:1px solid var(--slate-100);
  box-shadow:var(--shadow-soft); overflow:hidden;
}
.order-card-header {
  padding:.75rem 1.25rem; background:var(--surface-50); border-bottom:1px solid var(--slate-100);
  display:flex; align-items:center; justify-content:space-between;
}
.order-card-meta { display:flex; align-items:center; gap:1rem; font-size:.75rem; color:var(--slate-500); }
.order-card-body { padding:1.25rem; }
.order-item { display:flex; align-items:center; gap:1rem; margin-bottom:.75rem; }
.order-item:last-child { margin-bottom:0; }
.order-item-img {
  width:4rem; height:4rem; border-radius:var(--radius); background:var(--slate-100);
  overflow:hidden; flex-shrink:0;
}
.order-item-img img { width:100%; height:100%; object-fit:cover; }
.order-item-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--slate-400); font-size:.75rem;
}
.order-item-info { flex:1; min-width:0; }
.order-item-name { font-size:.875rem; font-weight:500; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-item-sku { font-size:.75rem; color:var(--slate-500); margin-top:.125rem; }
.order-item-qty { font-size:.75rem; color:var(--slate-400); margin-top:.125rem; }
.order-item-price { font-size:.875rem; font-weight:600; color:var(--ink-900); flex-shrink:0; }
.order-card-footer {
  padding:.75rem 1.25rem; border-top:1px solid var(--slate-100);
  display:flex; align-items:center; justify-content:space-between;
}
.order-pay-amount { font-size:.875rem; color:var(--ink-700); }
.order-pay-amount strong { font-size:1rem; font-weight:600; color:#ef4444; }
.order-card-actions { display:flex; align-items:center; gap:.5rem; }

/* ---- 地址卡片 ---- */
.address-card {
  border-radius:var(--radius); background:#fff; border:1px solid var(--slate-100);
  box-shadow:var(--shadow-soft); padding:1.25rem;
}
.address-card.is-default { border-left:4px solid var(--brand-500); }
.address-card-body { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.address-card-info { flex:1; min-width:0; }
.address-card-name-row { display:flex; align-items:center; gap:.5rem; }
.address-card-name { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.address-card-phone { font-size:.875rem; color:var(--slate-500); }
.address-default-tag {
  display:inline-flex; align-items:center; padding:.125rem .5rem;
  border-radius:9999px; font-size:.75rem; font-weight:500;
  background:var(--brand-50); color:var(--brand-600);
}
.address-card-detail { margin-top:.375rem; font-size:.875rem; color:var(--ink-700); }
.address-card-zip { margin-top:.125rem; font-size:.75rem; color:var(--slate-400); }
.address-card-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

/* ---- 小按钮 ---- */
.btn-sm {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.375rem .75rem; border-radius:var(--radius); font-size:.75rem; font-weight:500;
  transition:background var(--transition), color var(--transition);
  border:1px solid var(--slate-200); background:#fff; color:var(--ink-700); cursor:pointer;
}
.btn-sm:hover { background:var(--slate-50); }
.btn-sm-danger {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.375rem .75rem; border-radius:var(--radius); font-size:.75rem; font-weight:500;
  transition:background var(--transition), color var(--transition);
  border:1px solid #fecaca; background:#fff; color:#dc2626; cursor:pointer;
}
.btn-sm-danger:hover { background:#fef2f2; }

/* ---- 空状态（简单版） ---- */
.empty-box {
  border-radius:var(--radius); background:#fff; border:1px solid var(--slate-100);
  box-shadow:var(--shadow-soft); padding:2.5rem; text-align:center;
}
.empty-box-icon { color:var(--slate-400); margin-bottom:.5rem; }
.empty-box-icon svg { width:3rem; height:3rem; margin:0 auto; }
.empty-box-text { font-size:.875rem; color:var(--slate-500); }
.empty-box-link { margin-top:.75rem; display:inline-flex; align-items:center; font-size:.875rem; color:var(--brand-600); }
.empty-box-link:hover { color:var(--brand-500); }

/* ---- 简单分页 ---- */
.simple-pagination { display:flex; align-items:center; justify-content:center; gap:.5rem; padding-top:.5rem; }
.simple-page-btn {
  padding:.375rem .75rem; border-radius:var(--radius); background:#fff;
  border:1px solid var(--slate-200); font-size:.875rem; color:var(--ink-700);
}
.simple-page-btn:hover { background:var(--slate-50); }
.simple-page-info { padding:.375rem .75rem; font-size:.875rem; color:var(--slate-500); }

/* ---- 工单卡片 ---- */
.ticket-card {
  display:block; border-radius:var(--radius); background:#fff;
  border:1px solid var(--slate-100); box-shadow:var(--shadow-soft);
  padding:1.25rem; transition:border-color var(--transition);
}
.ticket-card:hover { border-color:var(--brand-200, #bfdbfe); }
.ticket-card-body { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.ticket-card-info { min-width:0; flex:1; }
.ticket-card-title-row { display:flex; align-items:center; gap:.5rem; }
.ticket-card-title { font-size:.875rem; font-weight:600; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ticket-card-excerpt { margin-top:.25rem; font-size:.75rem; color:var(--slate-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ticket-card-meta { margin-top:.5rem; display:flex; align-items:center; gap:.75rem; font-size:.75rem; color:var(--slate-400); }
.ticket-card-arrow { color:var(--slate-300); flex-shrink:0; margin-top:.25rem; }
.ticket-card-arrow svg { width:1.25rem; height:1.25rem; }

/* 工单详情对话 */
.ticket-message {
  border-radius:var(--radius); background:#fff; border:1px solid var(--slate-100);
  box-shadow:var(--shadow-soft); padding:1.5rem;
}
.ticket-message.is-admin { border-left:4px solid var(--brand-500); }
.ticket-msg-row { display:flex; align-items:flex-start; gap:.75rem; }
.ticket-avatar {
  width:2rem; height:2rem; border-radius:50%; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:600; flex-shrink:0;
}
.ticket-avatar-user { background:var(--brand-500); }
.ticket-avatar-admin { background:#22c55e; }
.ticket-msg-content { flex:1; min-width:0; }
.ticket-msg-author { display:flex; align-items:center; gap:.5rem; }
.ticket-msg-name { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.ticket-msg-time { font-size:.75rem; color:var(--slate-400); }
.ticket-admin-badge {
  display:inline-flex; align-items:center; padding:.125rem .375rem;
  border-radius:4px; font-size:.75rem; background:#dcfce7; color:#15803d;
}
.ticket-msg-text { margin-top:.5rem; font-size:.875rem; color:var(--ink-700); white-space:pre-wrap; }

/* 工单关闭状态 */
.ticket-closed-bar {
  border-radius:var(--radius); background:var(--slate-50); border:1px solid var(--slate-200);
  padding:1rem; text-align:center; font-size:.875rem; color:var(--slate-500);
}

/* ---- 订单详情特有 ---- */
.detail-section {
  border-radius:var(--radius); background:#fff; border:1px solid var(--slate-100);
  box-shadow:var(--shadow-soft); padding:1.5rem;
}
.detail-section-title { font-size:1rem; font-weight:600; color:var(--ink-900); margin-bottom:1rem; }
.detail-info-grid { display:grid; grid-template-columns:1fr; gap:1rem; font-size:.875rem; }
@media(min-width:640px) { .detail-info-grid { grid-template-columns:repeat(2,1fr); } }
.detail-info-grid .full-span { grid-column:1 / -1; }
.detail-info-label { color:var(--slate-500); }
.detail-info-value { color:var(--ink-900); }
.detail-divider-section {
  border-radius:var(--radius); background:#fff; border:1px solid var(--slate-100);
  box-shadow:var(--shadow-soft); overflow:hidden;
}
.detail-divider-header {
  padding:1rem 1.5rem; border-bottom:1px solid var(--slate-100);
}
.detail-item-list { }
.detail-item-list > div { border-bottom:1px solid var(--slate-100); }
.detail-item-list > div:last-child { border-bottom:0; }
.detail-item-row { padding:1rem 1.5rem; display:flex; align-items:center; gap:1rem; }
.detail-item-thumb {
  width:5rem; height:5rem; border-radius:var(--radius); background:var(--slate-100);
  overflow:hidden; flex-shrink:0;
}
.detail-item-thumb img { width:100%; height:100%; object-fit:cover; }
.detail-item-info { flex:1; min-width:0; }
.detail-item-name { font-size:.875rem; font-weight:500; color:var(--ink-900); }
.detail-item-sub { font-size:.75rem; color:var(--slate-500); margin-top:.25rem; }
.detail-item-right { text-align:right; flex-shrink:0; }
.detail-item-price { font-size:.875rem; color:var(--ink-900); }
.detail-item-qty { font-size:.75rem; color:var(--slate-500); margin-top:.125rem; }
.detail-item-total { font-size:.875rem; font-weight:600; color:var(--ink-900); margin-top:.25rem; }

/* 金额汇总 */
.amount-row { display:flex; align-items:center; justify-content:space-between; font-size:.875rem; }
.amount-row-label { color:var(--slate-500); }
.amount-row-value { color:var(--ink-900); }
.amount-row-value.discount { color:#16a34a; }
.amount-total-row {
  padding-top:.75rem; margin-top:.75rem; border-top:1px solid var(--slate-100);
  display:flex; align-items:center; justify-content:space-between;
}
.amount-total-label { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.amount-total-value { font-size:1.125rem; font-weight:700; color:#ef4444; }

/* 物流 & 订单日志 */
.timeline-item { display:flex; align-items:flex-start; gap:.75rem; }
.timeline-dot {
  width:.5rem; height:.5rem; border-radius:50%; background:var(--brand-500);
  margin-top:.375rem; flex-shrink:0;
}
.timeline-text { font-size:.875rem; color:var(--ink-900); }
.timeline-time { font-size:.75rem; color:var(--slate-400); margin-top:.125rem; }


/* ================================================================
   CONSOLE — 用户控制台首页特有
   ================================================================ */
.console-product-badge {
  display:inline-flex; align-items:center; padding:.25rem .625rem;
  border-radius:9999px; font-size:.75rem; font-weight:500;
  background:var(--brand-50); color:var(--brand-600);
}
.console-product-card {
  border-radius:var(--radius); background:#fff; border:1px solid var(--brand-50);
  box-shadow:var(--shadow-soft); overflow:hidden; transition:box-shadow var(--transition), transform var(--transition);
}
.console-product-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.console-product-card .card-inner { padding:1rem; }
.console-product-card .product-header { display:flex; align-items:flex-start; gap:.75rem; }
.console-product-icon {
  width:3rem; height:3rem; border-radius:var(--radius); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:var(--shadow-soft); overflow:hidden;
}
.console-product-icon.active { background:linear-gradient(135deg, var(--brand-500), #38bdf8); }
.console-product-icon.inactive { background:linear-gradient(135deg, #94a3b8, #64748b); }
.console-product-icon img { width:2.625rem; height:2.625rem; object-fit:cover; }
.console-product-info { flex:1; min-width:0; }
.console-product-name { font-size:.875rem; font-weight:600; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.console-product-desc { margin-top:.375rem; font-size:.75rem; color:var(--slate-500); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5rem; }
.console-product-footer {
  margin-top:.625rem; padding-top:.625rem; border-top:1px solid var(--slate-100);
  display:flex; align-items:center; justify-content:space-between; font-size:.75rem;
}
.console-product-status { color:var(--brand-600); }
.console-product-status.expired { color:#ef4444; }
.console-product-status.inactive { color:var(--slate-400); }
.console-product-link { color:var(--brand-600); font-weight:500; transition:color var(--transition); }
.console-product-link:hover { color:var(--brand-500); }

/* 快捷入口 */
.shortcut-card {
  border-radius:var(--radius); background:var(--surface-50); border:1px solid var(--slate-100);
  padding:1rem; transition:background var(--transition);
}
.shortcut-card:hover { background:#fff; }
.shortcut-card-title { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.shortcut-card-desc { margin-top:.25rem; font-size:.75rem; color:var(--slate-500); }

/* 活动卡片 */
.activity-card {
  border-radius:var(--radius); background:var(--surface-50); border:1px solid var(--slate-100);
  padding:1rem;
}
.activity-card-title { font-size:.875rem; color:var(--ink-900); }
.activity-card-desc { margin-top:.25rem; font-size:.75rem; color:var(--slate-500); }

/* 账户信息卡片 */
.stat-card-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
@media(min-width:640px) { .stat-card-grid { grid-template-columns:repeat(3,1fr); } }
.stat-card {
  border-radius:var(--radius); background:var(--surface-50); border:1px solid var(--slate-100);
  padding:1rem;
}
.stat-card-label { font-size:.75rem; color:var(--slate-500); }
.stat-card-value { margin-top:.25rem; font-size:1.125rem; font-weight:600; color:var(--ink-900); }


/* ================================================================
   CART — 购物车
   ================================================================ */
.cart-breadcrumb-bar {
  background:#fff; border-bottom:1px solid var(--slate-200);
}
.cart-breadcrumb-bar .container { padding-top:.75rem; padding-bottom:.75rem; }
.cart-breadcrumb { display:flex; align-items:center; font-size:.875rem; color:var(--ink-700); }
.cart-breadcrumb a:hover { color:var(--brand-500); }
.cart-breadcrumb svg { width:1rem; height:1rem; margin:0 .5rem; color:var(--slate-400); }
.cart-breadcrumb .current { color:var(--ink-900); font-weight:500; }

.cart-section { padding:2rem 0; }
@media(min-width:768px) { .cart-section { padding:3rem 0; } }
.cart-title { font-size:1.5rem; font-weight:600; color:var(--ink-900); }

.cart-grid { margin-top:1.5rem; display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:1024px) { .cart-grid { grid-template-columns:2fr 1fr; } }

/* 全选栏 */
.cart-toolbar {
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft);
  padding:1rem; display:flex; align-items:center; justify-content:space-between;
}
.cart-select-all { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.875rem; color:var(--ink-700); }
.cart-select-all input { width:1rem; height:1rem; accent-color:var(--brand-500); border-radius:4px; }
.cart-delete-btn { font-size:.875rem; color:#ef4444; background:none; border:none; cursor:pointer; }
.cart-delete-btn:hover { color:#dc2626; }

.cart-list { display:flex; flex-direction:column; gap:.75rem; }

/* 购物车条目 */
.cart-item {
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft); padding:1rem;
}
.cart-item-row { display:flex; align-items:flex-start; gap:1rem; }
.cart-item-checkbox { width:1rem; height:1rem; margin-top:.5rem; accent-color:var(--brand-500); flex-shrink:0; border-radius:4px; }
.cart-item-thumb {
  flex-shrink:0; width:5rem; height:5rem; border-radius:var(--radius);
  overflow:hidden; background:var(--surface-50); display:block;
}
.cart-item-thumb img { width:100%; height:100%; object-fit:cover; }
.cart-item-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--slate-300);
}
.cart-item-placeholder svg { width:2rem; height:2rem; }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name {
  font-size:.875rem; font-weight:600; color:var(--ink-900); display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color var(--transition);
}
.cart-item-name:hover { color:var(--brand-500); }
.cart-item-sku { margin-top:.25rem; font-size:.75rem; color:var(--slate-500); }
.cart-item-price-row { margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.cart-item-price { display:flex; align-items:baseline; gap:.5rem; }
.cart-item-price .price-current { font-size:1rem; font-weight:700; color:var(--brand-500); }
.cart-item-price .price-original { font-size:.75rem; color:var(--slate-400); text-decoration:line-through; }
.cart-item-remove {
  flex-shrink:0; background:none; border:none; color:var(--slate-400);
  cursor:pointer; transition:color var(--transition); padding:0;
}
.cart-item-remove:hover { color:#ef4444; }
.cart-item-remove svg { width:1rem; height:1rem; }

/* 数量控制器 */
.qty-control {
  display:flex; align-items:center; border:1px solid var(--slate-200);
  border-radius:var(--radius); overflow:hidden;
}
.qty-btn {
  width:1.75rem; height:1.75rem; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:var(--ink-700); background:none; border:none; cursor:pointer;
}
.qty-btn:hover { background:var(--slate-50); }
.qty-input {
  width:2.5rem; height:1.75rem; text-align:center; font-size:.75rem;
  border-left:1px solid var(--slate-200); border-right:1px solid var(--slate-200);
  border-top:none; border-bottom:none; outline:none;
}
/* 隐藏数字输入框箭头 */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.qty-input { -moz-appearance:textfield; }

/* 购物车摘要 */
.cart-summary {
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft); padding:1.5rem;
}
@media(min-width:1024px) { .cart-summary { position:sticky; top:6rem; } }
.cart-summary-title { font-size:1rem; font-weight:600; color:var(--ink-900); }
.cart-summary-body { margin-top:1rem; display:flex; flex-direction:column; gap:.5rem; font-size:.875rem; }
.summary-row { display:flex; justify-content:space-between; }
.summary-row-label { color:var(--ink-700); }
.summary-row-value { color:var(--ink-900); font-weight:500; }
.summary-divider { border-top:1px solid var(--slate-200); padding-top:1rem; margin-top:.5rem; }
.summary-total { display:flex; justify-content:space-between; align-items:baseline; }
.summary-total-label { font-size:.875rem; color:var(--ink-700); }
.summary-total-value { font-size:1.25rem; font-weight:700; color:var(--brand-500); }
.cart-checkout-btn {
  margin-top:1rem; width:100%; padding:.75rem; border-radius:var(--radius);
  background:var(--brand-500); color:#fff; font-size:.875rem; font-weight:500;
  border:none; cursor:pointer; box-shadow:var(--shadow-soft); transition:background var(--transition);
}
.cart-checkout-btn:hover { background:var(--brand-600); }

/* 购物车空状态 */
.cart-empty { margin-top:3rem; text-align:center; }
.cart-empty-icon {
  margin:0 auto; width:6rem; height:6rem; border-radius:50%; background:var(--surface-50);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.cart-empty-icon svg { width:3rem; height:3rem; color:var(--slate-300); }
.cart-empty-text { font-size:.875rem; color:var(--ink-700); }
.cart-empty-btn {
  margin-top:1rem; display:inline-flex; align-items:center; padding:.5rem 1.5rem;
  border-radius:var(--radius); background:var(--brand-500); color:#fff;
  font-size:.875rem; font-weight:500; box-shadow:var(--shadow-soft);
  transition:background var(--transition);
}
.cart-empty-btn:hover { background:var(--brand-600); }


/* ================================================================
   CHECKOUT — 结算页
   ================================================================ */
.checkout-steps-bar { background:#fff; border-bottom:1px solid var(--slate-100); }
.checkout-steps-bar .container { padding-top:1rem; padding-bottom:1rem; }
.checkout-steps {
  display:flex; align-items:center; justify-content:center; gap:1rem; font-size:.875rem;
}
.step-item { display:flex; align-items:center; gap:.5rem; }
.step-number {
  width:1.5rem; height:1.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:500;
}
.step-number.active { background:var(--brand-500); color:#fff; }
.step-number.inactive { background:var(--slate-200); color:var(--slate-500); }
.step-label { font-weight:500; }
.step-label.active { color:var(--brand-500); }
.step-label.inactive { color:var(--slate-500); }
.step-line { width:3rem; height:1px; background:var(--slate-300); }

/* 结算商品清单 */
.checkout-item {
  display:flex; align-items:flex-start; gap:1rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--slate-100);
}
.checkout-item:last-child { border-bottom:0; padding-bottom:0; }
.checkout-item-thumb {
  flex-shrink:0; width:4rem; height:4rem; border-radius:var(--radius);
  overflow:hidden; background:var(--surface-50);
}
.checkout-item-thumb img { width:100%; height:100%; object-fit:cover; }
.checkout-item-info { flex:1; min-width:0; }
.checkout-item-name { font-size:.875rem; font-weight:500; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.checkout-item-sku { margin-top:.125rem; font-size:.75rem; color:var(--slate-500); }
.checkout-item-right { text-align:right; flex-shrink:0; }
.checkout-item-price { font-size:.875rem; font-weight:700; color:var(--ink-900); }
.checkout-item-qty { margin-top:.125rem; font-size:.75rem; color:var(--slate-500); }
.checkout-item-list { display:flex; flex-direction:column; gap:.75rem; }
.checkout-submit-msg { font-size:.75rem; text-align:center; color:#ef4444; }


/* ================================================================
   PRODUCT DETAIL — 商品详情
   ================================================================ */
.product-section { padding:2rem 0; }
@media(min-width:768px) { .product-section { padding:3rem 0; } }
.product-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media(min-width:1024px) { .product-grid { grid-template-columns:repeat(2,1fr); } }

/* 主图 */
.product-main-img {
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-soft);
  overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
}
.product-main-img img { width:100%; height:100%; object-fit:cover; }
.product-main-img .no-image { display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--slate-300); }
.product-main-img .no-image svg { width:5rem; height:5rem; }
.product-main-img .no-image span { margin-top:.5rem; font-size:.875rem; }

/* 缩略图 */
.product-thumbs { margin-top:1rem; display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem; }
.product-thumbs::-webkit-scrollbar { height:4px; }
.product-thumbs::-webkit-scrollbar-track { background:transparent; }
.product-thumbs::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:2px; }
.thumb-item {
  flex-shrink:0; width:5rem; height:5rem; border-radius:var(--radius);
  border:2px solid transparent; overflow:hidden; cursor:pointer; transition:border-color var(--transition);
}
.thumb-item:hover { border-color:var(--brand-500); }
.thumb-item.active { border-color:var(--brand-500); }
.thumb-item img { width:100%; height:100%; object-fit:cover; }

/* 商品信息 */
.product-info { display:flex; flex-direction:column; }
.product-title { font-size:1.5rem; font-weight:600; color:var(--ink-900); line-height:1.3; }
@media(min-width:768px) { .product-title { font-size:1.875rem; } }
.product-desc { margin-top:.75rem; font-size:.875rem; color:var(--ink-700); line-height:1.625; }
@media(min-width:768px) { .product-desc { font-size:1rem; } }

/* 价格区域 */
.product-price-box {
  margin-top:1.5rem; border-radius:var(--radius); background:var(--brand-50); padding:1rem;
}
.product-price-row { display:flex; align-items:baseline; gap:.75rem; }
.product-price-label { font-size:.875rem; color:var(--ink-700); }
.product-price-current { font-size:1.875rem; font-weight:700; color:var(--brand-500); }
.product-price-original { font-size:.875rem; color:var(--slate-400); text-decoration:line-through; }

/* SKU 选择器 */
.sku-section { margin-top:1.5rem; }
.sku-section-label { font-size:.875rem; color:var(--ink-700); margin-bottom:.5rem; }
.sku-list { display:flex; flex-wrap:wrap; gap:.5rem; }
.sku-btn {
  padding:.5rem 1rem; border-radius:var(--radius); border:1px solid var(--slate-200);
  background:#fff; font-size:.875rem; color:var(--ink-700);
  cursor:pointer; transition:border-color var(--transition), background var(--transition);
}
.sku-btn:hover { border-color:var(--brand-500); }
.sku-btn.active {
  border-color:var(--brand-500); background:var(--brand-50);
  color:var(--brand-600); font-weight:500;
}

/* 商品属性行 */
.product-attr-list { margin-top:1rem; display:flex; flex-direction:column; gap:.75rem; }
.product-attr-row { display:flex; align-items:center; font-size:.875rem; }
.product-attr-label { width:5rem; color:var(--ink-700); }
.product-attr-value { color:var(--ink-900); }
.product-tag-row { display:flex; align-items:center; gap:.5rem; margin-top:.5rem; }
.product-tag {
  display:inline-flex; align-items:center; padding:.25rem .5rem;
  border-radius:var(--radius); font-size:.75rem; font-weight:500;
}
.product-tag-hot { background:#fef2f2; color:#ef4444; }
.product-tag-new { background:#f0fdf4; color:#16a34a; }
.product-tag-recommend { background:var(--brand-50); color:var(--brand-500); }

/* 数量选择器 */
.product-qty-row { margin-top:1.5rem; display:flex; align-items:center; gap:.75rem; }
.product-qty-label { font-size:.875rem; color:var(--ink-700); width:5rem; }
.product-qty-control {
  display:flex; align-items:center; border:1px solid var(--slate-200);
  border-radius:var(--radius); overflow:hidden;
}
.product-qty-btn {
  width:2.25rem; height:2.25rem; display:flex; align-items:center; justify-content:center;
  color:var(--ink-700); background:none; border:none; cursor:pointer;
}
.product-qty-btn:hover { background:var(--slate-50); }
.product-qty-btn svg { width:1rem; height:1rem; }
.product-qty-input {
  width:3.5rem; height:2.25rem; text-align:center; font-size:.875rem;
  border-left:1px solid var(--slate-200); border-right:1px solid var(--slate-200);
  border-top:none; border-bottom:none; outline:none; color:var(--ink-900);
}
.product-qty-input::-webkit-outer-spin-button,
.product-qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.product-qty-input { -moz-appearance:textfield; }
.product-qty-hint { font-size:.75rem; color:var(--slate-400); }

/* 操作按钮 */
.product-actions { margin-top:2rem; display:flex; flex-direction:column; gap:.75rem; }
@media(min-width:640px) { .product-actions { flex-direction:row; } }

/* 商品详情内容区 */
.product-content-section { padding:2rem 0; background:#fff; }
@media(min-width:768px) { .product-content-section { padding:3rem 0; } }
.product-tab-bar { border-bottom:1px solid var(--slate-200); padding-bottom:.75rem; margin-bottom:1.5rem; }
.product-tab-bar .tab-btn {
  font-size:.875rem; font-weight:600; color:var(--brand-500);
  border-bottom:2px solid var(--brand-500); padding-bottom:.75rem;
  background:none; border-top:none; border-left:none; border-right:none; cursor:pointer;
}
.product-content img { max-width:100%; height:auto; border-radius:var(--radius); margin:1rem 0; }
.product-content p { margin-bottom:.75rem; line-height:1.75; }
.product-content h2,.product-content h3,.product-content h4 { margin-top:1.5rem; margin-bottom:.75rem; font-weight:600; color:var(--ink-900); }
.product-content ul,.product-content ol { padding-left:1.5rem; margin-bottom:.75rem; }
.product-content li { margin-bottom:.25rem; }
.product-content table { width:100%; border-collapse:collapse; margin:1rem 0; }
.product-content table th,.product-content table td { border:1px solid var(--slate-200); padding:.5rem .75rem; text-align:left; font-size:.875rem; }
.product-content table th { background:var(--surface-50); font-weight:600; }

/* 推荐商品 */
.related-products-section { padding:2rem 0; }
@media(min-width:768px) { .related-products-section { padding:3rem 0; } }
.related-product-card {
  display:block; border-radius:var(--radius); background:#fff;
  box-shadow:var(--shadow-soft); overflow:hidden; transition:box-shadow var(--transition);
}
.related-product-card:hover { box-shadow:var(--shadow-md); }
.related-product-thumb {
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--surface-50);
}
.related-product-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.related-product-card:hover .related-product-thumb img { transform:scale(1.05); }
.related-product-thumb .product-badges { position:absolute; top:.5rem; left:.5rem; display:flex; gap:.25rem; }
.related-product-thumb .product-badges span {
  padding:.125rem .5rem; border-radius:var(--radius); color:#fff; font-size:.75rem;
}
.related-product-body { padding:1rem; }
.related-product-name {
  font-size:.875rem; font-weight:600; color:var(--ink-900);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:color var(--transition);
}
.related-product-card:hover .related-product-name { color:var(--brand-500); }
.related-product-desc { margin-top:.25rem; font-size:.75rem; color:var(--ink-700); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related-product-price { margin-top:.5rem; display:flex; align-items:baseline; gap:.5rem; }
.related-product-price .price-current { font-size:1.125rem; font-weight:700; color:var(--brand-500); }
.related-product-price .price-original { font-size:.75rem; color:var(--slate-400); text-decoration:line-through; }


/* ================================================================
   AUTH — 登录 / 注册页面
   ================================================================ */
@keyframes authPulse { 0%,100%{opacity:.3;} 50%{opacity:.6;} }
@keyframes authBounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-20px);} }

.auth-page {
  position:relative; min-height:calc(100vh - 4rem);
  background:linear-gradient(135deg, var(--brand-500), var(--brand-600), #1d4ed8);
  display:flex; align-items:center; justify-content:center; padding:1.5rem 1rem; overflow:hidden;
}
.auth-canvas { position:absolute; inset:0; width:100%; height:100%; }
.auth-bg-circles { position:absolute; inset:0; overflow:hidden; }
.auth-bg-circle {
  position:absolute; border-radius:50%; filter:blur(40px);
}
.auth-bg-circle-1 { top:2.5rem; left:2.5rem; width:18rem; height:18rem; background:rgba(255,255,255,.05); animation:authPulse 4s ease-in-out infinite; }
.auth-bg-circle-2 { top:25%; right:25%; width:24rem; height:24rem; background:rgba(96,165,250,.1); animation:authBounce 8s ease-in-out infinite; }
.auth-bg-circle-3 { bottom:25%; left:33%; width:20rem; height:20rem; background:rgba(34,211,238,.1); animation:authPulse 6s ease-in-out infinite; }
.auth-bg-circle-4 { bottom:-5rem; right:-5rem; width:24rem; height:24rem; background:rgba(255,255,255,.05); animation:authBounce 10s ease-in-out infinite; }
.auth-wave { position:absolute; bottom:0; left:0; width:100%; height:12rem; opacity:.2; }
.auth-wave svg { width:100%; height:100%; }

/* 登录/注册卡片（毛玻璃） */
.auth-card {
  position:relative; z-index:10; width:100%; max-width:26rem;
  background:rgba(255,255,255,.12); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-radius:1rem; border:1px solid rgba(255,255,255,.2);
  box-shadow:0 25px 50px rgba(0,0,0,.25); padding:2.5rem; color:#fff;
}
.auth-card-header { text-align:center; margin-bottom:2rem; }
.auth-card-icon {
  margin:0 auto; width:4rem; height:4rem; border-radius:1rem; background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
}
.auth-card-icon svg { width:2rem; height:2rem; color:#fff; }
.auth-card-title { margin-top:1.25rem; font-size:1.5rem; font-weight:700; }
.auth-card-desc { margin-top:.5rem; font-size:.875rem; color:rgba(255,255,255,.7); }

/* 表单元素 */
.auth-form { display:flex; flex-direction:column; gap:1.25rem; }
.auth-form-group { position:relative; }
.auth-form-label { display:block; font-size:.875rem; font-weight:500; color:rgba(255,255,255,.9); margin-bottom:.5rem; }
.auth-form-icon {
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.5);
}
.auth-form-icon svg { width:1.25rem; height:1.25rem; }
.auth-form-input {
  width:100%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:.5rem; padding:.625rem .75rem .625rem 2.5rem;
  font-size:.875rem; color:#fff; outline:none;
  transition:border-color var(--transition), background var(--transition);
}
.auth-form-input::placeholder { color:rgba(255,255,255,.4); }
.auth-form-input:focus {
  border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.15);
}
.auth-form-input-no-icon { padding-left:.75rem; }
.auth-form-row { display:flex; align-items:center; justify-content:space-between; font-size:.875rem; }
.auth-checkbox { display:flex; align-items:center; gap:.5rem; cursor:pointer; color:rgba(255,255,255,.8); }
.auth-checkbox input { accent-color:#fff; }
.auth-link { color:rgba(255,255,255,.8); transition:color var(--transition); text-decoration:underline; font-style: italic; }
.auth-link:hover { color:#fff; }

.auth-submit-btn {
  width:100%; padding:.75rem; border-radius:.5rem; border:none;
  background:rgba(255,255,255,.2); color:#fff; font-size:.875rem; font-weight:600;
  cursor:pointer; transition:background var(--transition); backdrop-filter:blur(10px);
}
.auth-submit-btn:hover { background:rgba(255,255,255,.3); }

/* 分割线 */
.auth-divider {
  display:flex; align-items:center; gap:.75rem; font-size:.75rem; color:rgba(255,255,255,.5);
}
.auth-divider-line { flex:1; height:1px; background:rgba(255,255,255,.2); }

/* 社交登录 */
.social-login-btn {
  width:100%; padding:.625rem; border-radius:.5rem;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.8); font-size:.875rem; font-weight:500;
  cursor:pointer; transition:background var(--transition);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.social-login-btn:hover { background:rgba(255,255,255,.15); }
.social-login-btn svg { width:1.25rem; height:1.25rem; }

/* 底部切换链接 */
.auth-bottom { margin-top:1.5rem; text-align:center; font-size:.875rem; color:rgba(255,255,255,.7); }
.auth-bottom a { color:#fff; font-weight:600; transition:color var(--transition); }
.auth-bottom a:hover { text-decoration:underline; }

/* 注册卡片（更宽） */
.auth-card-register { max-width:30rem; }
.auth-form-2cols { display:grid; grid-template-columns:1fr; gap:1.25rem; }
@media(min-width:640px) { .auth-form-2cols { grid-template-columns:repeat(2,1fr); } }

/* ---- 地址选择卡片 (checkout) ---- */
.address-select-card {
  border-radius:var(--radius); border:2px solid var(--slate-200); padding:1rem;
  cursor:pointer; transition:border-color var(--transition);
}
.address-select-card:hover { border-color:var(--brand-500); }
.address-select-card.selected { border-color:var(--brand-500); background:var(--brand-50); }
.address-select-card .addr-name { font-size:.875rem; font-weight:600; color:var(--ink-900); }
.address-select-card .addr-phone { margin-left:.5rem; font-size:.875rem; color:var(--slate-500); }
.address-select-card .addr-detail { margin-top:.25rem; font-size:.875rem; color:var(--ink-700); }