:root{
  --bg: #f8fafc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15,23,42,.08);
  --brand: #2563eb;
  --brand2: #0ea5e9;
  --shadow: 0 16px 40px rgba(2,6,23,.10);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
}

/* 案例站点页面背景：全页单一渐变（避免多个渐变堆叠） */
body.anli-page{
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, rgba(37,99,235,.08) 45%, #f8fafc 100%);
}

.container{max-width:1120px;margin:0 auto;padding:0 16px}

/* anli 作为子站/嵌入到其它站点时，避免外部 CSS 覆盖导致错版 */
body.anli-page .topbar .container{
  max-width:1120px !important;
  margin:0 auto !important;
  padding:0 16px !important;
}
body.anli-page .topbar__inner{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:16px !important;padding:14px 0 !important;}
body.anli-page .topbar__left{display:flex !important;align-items:center !important;gap:14px !important;min-width:0 !important;}
body.anli-page .topbar__right{display:flex !important;align-items:center !important;gap:10px !important;}

body.anli-page .brand{display:flex !important;align-items:center !important;gap:12px !important;min-width:0 !important;}
body.anli-page .brand__logo{
  width:40px !important;
  height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
  flex:0 0 40px !important;
  display:block !important;
  object-fit:contain !important;
}

/* 复选框只做“视觉隐藏”，不能用 hidden 属性，否则 label 可能无法切换 */
body.anli-page .nav-toggle{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
  left:-9999px;
}

/* 默认：PC 显示顶部菜单，隐藏右上角图标 */
body.anli-page .topmenu--desktop{display:flex !important;}
body.anli-page .navicon{display:none !important;}

/* 紧凑模式：用于“嵌入外站窄容器但 viewport 很宽”的场景 */
body.anli-page.anli-compact .topmenu--desktop{display:none !important;}
body.anli-page.anli-compact .navicon{display:flex !important;}

@media (max-width: 960px){
  body.anli-page .topmenu--desktop{display:none !important;}
  body.anli-page .navicon{display:flex !important;}
}
@media (max-width: 720px){
  body.anli-page .brand__logo{width:34px !important;height:34px !important;max-width:34px !important;max-height:34px !important;flex:0 0 34px !important;}
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  background: rgba(248,250,252,.75);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.topbar__left{display:flex;align-items:center;gap:14px;min-width:0}
.topbar__right{display:flex;align-items:center;gap:10px}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;min-width:0}
.brand__logo{
  width:42px;
  height:42px;
  border-radius:14px;
  object-fit:contain;
  background:#ffffff;
  border:1px solid rgba(15,23,42,.06);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}
.brand__text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand__text strong{font-size:15px}
.brand__text .muted{font-size:12px}

/* 顶部菜单（PC 横向） */
.topmenu{display:flex;align-items:center;gap:6px}
.topmenu__link{color:var(--muted);text-decoration:none;font-size:14px;padding:8px 10px;border-radius:12px;white-space:nowrap}
.topmenu__link:hover{background: rgba(37,99,235,.08); color: var(--brand)}

/* 窄屏/嵌入容器：顶部菜单折叠到右上角图标 */
@media (max-width: 960px){
  .topmenu--desktop{display:none}
  .navicon{display:flex}
}

/* 手机端右上角菜单图标 */
.navicon{
  display:none;
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0;
}
.navicon__svg{width:20px;height:20px;color: rgba(15,23,42,.78);display:block}

/* 移动端抽屉菜单 */
.drawer__overlay{
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.35);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 30;
}
.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(82vw, 320px);
  background: rgba(255,255,255,.98);
  border-left:1px solid rgba(15,23,42,.10);
  box-shadow: 0 24px 60px rgba(2,6,23,.22);
  transform: translateX(102%);
  transition: transform .22s ease;
  z-index: 31;
  display:flex;
  flex-direction:column;
}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 16px 12px;border-bottom:1px solid rgba(15,23,42,.08)}
.drawer__title{font-weight:900}
.drawer__close{width:38px;height:38px;border-radius:14px;border:1px solid rgba(15,23,42,.10);display:flex;align-items:center;justify-content:center;background:rgba(248,250,252,.9);cursor:pointer;user-select:none;font-size:20px;line-height:1}
.drawer__nav{display:flex;flex-direction:column;padding:10px}
.drawer__link{padding:12px 12px;border-radius:14px;text-decoration:none;color:var(--text);border:1px solid transparent}
.drawer__link:hover{background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.18); color: #1d4ed8}

.nav-toggle:checked ~ .drawer__overlay{opacity:1;pointer-events:auto}
.nav-toggle:checked ~ .drawer{transform: translateX(0)}

/* 兼容旧类（不再使用） */
.nav{display:flex;gap:10px;align-items:center}
.nav__link{color:var(--muted);text-decoration:none;font-size:14px;padding:8px 10px;border-radius:10px}
.nav__link:hover{background: rgba(37,99,235,.08); color: var(--brand)}

.hero{padding:26px 0 14px}
.hero__title{font-size:28px;margin:0 0 8px}
.hero__sub{margin:0;color:var(--muted);max-width:72ch}

.card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card--soft{box-shadow: 0 10px 28px rgba(2,6,23,.08)}

.section{padding:14px 0 28px}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:14px 0}
.section__title{margin:0;font-size:18px}
.section__hint{margin:0;color:var(--muted);font-size:13px}

.muted{color:var(--muted)}
.h1{font-size:34px;margin:0 0 10px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  text-decoration:none;
  border:1px solid rgba(37,99,235,.18);
  box-shadow: 0 12px 26px rgba(37,99,235,.18);
  transition: transform .10s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:hover{filter:brightness(.98)}
.btn:active{transform: translateY(1px); box-shadow: 0 8px 18px rgba(37,99,235,.16)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);background:#fff;color:var(--muted)}
.badge--primary{background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.22); color: #1d4ed8}
.badge--info{background: rgba(14,165,233,.10); border-color: rgba(14,165,233,.22); color: #0369a1}
.badge--success{background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.22); color: #15803d}
.badge--danger{background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.22); color: #b91c1c}
.badge--muted{background: rgba(100,116,139,.10); border-color: rgba(100,116,139,.22); color: #475569}

/* 品牌分类：手机横向滑动；PC 端可换行（两行展示） */
.brandbar{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  flex-wrap:nowrap;
}
.brandbar::-webkit-scrollbar{display:none}
.brandbar__wrap{padding:10px}

@media (min-width: 960px){
  .brandbar{
    overflow-x:hidden;
    flex-wrap:wrap;
  }
}

.brandchip{
  flex: 0 0 auto;
  display:flex;align-items:center;gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration:none;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.85);
}
.brandchip:hover{border-color: rgba(37,99,235,.30); color: var(--brand)}
.brandchip--active{background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.30); color: #1d4ed8}
.brandchip__logo{width:22px;height:22px;border-radius:8px;object-fit:contain;background:#fff;border:1px solid rgba(15,23,42,.06);padding:2px}

.grid{
  display:grid;
  gap: 14px;
}

/* 型号卡片：手机 2 列；PC 5 列 */
.model-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (min-width: 960px){
  .model-grid{grid-template-columns: repeat(4, minmax(0, 1fr));}
  .hero__title{font-size:34px}
}

.model-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.88);
  overflow:hidden;
  transition: transform .12s ease, border-color .12s ease;
}
.model-card:hover{transform: translateY(-2px); border-color: rgba(37,99,235,.28)}
.model-card__img{
  height: 120px;
  background: radial-gradient(260px 120px at 30% 10%, rgba(37,99,235,.16), transparent 60%),
              radial-gradient(240px 120px at 80% 0%, rgba(14,165,233,.14), transparent 60%),
              #ffffff;
  display:flex;align-items:center;justify-content:center;
}
.model-card__img img{max-width: 88%; max-height: 88%; object-fit: contain}
.model-card__ph{width:54px;height:54px;border-radius:18px;background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(14,165,233,.18)); border: 1px solid rgba(37,99,235,.18)}
.model-card__body{padding: 10px 12px}
.model-card__name{margin:0;font-size:14px;font-weight:650;line-height:1.25}

/* 案例列表卡片 */
.case-grid{grid-template-columns: repeat(1, minmax(0,1fr));}
@media (min-width: 720px){
  .case-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (min-width: 1024px){
  .case-grid{grid-template-columns: repeat(3, minmax(0,1fr));}
}

.case-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);background: rgba(255,255,255,.90);border-radius:18px;overflow:hidden;transition: transform .12s ease, border-color .12s ease}
.case-card:hover{transform: translateY(-2px); border-color: rgba(37,99,235,.28)}

/* 标题/图片/简介：标题更大，图片更“方形扎实” */
.case-card__head{padding:14px 18px 10px}
.case-card__title{margin:0;font-size:17px;line-height:1.25;font-weight:750}

.case-card__imgs{
  background:transparent;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
  padding: 0 18px 12px;
}
.case-card__thumb{
  border-radius:14px;
  overflow:hidden;
  background:#f1f5f9;
  border:1px solid rgba(15,23,42,.08);
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:zoom-in;
}
.case-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}

.case-card__body{padding:10px 18px 16px}
.case-card__summary{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--muted);font-size:13px;margin:14px 0}
.breadcrumb a{color:inherit;text-decoration:none}
.breadcrumb a:hover{color:var(--brand)}

.detail{
  display:grid;
  gap: 16px;
}
@media (min-width: 980px){
  .detail{grid-template-columns: 1.15fr .85fr; align-items:start}
}

.detail__main{padding:16px}
.detail__side{padding:16px}

.kv{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kv__title{margin:0;font-size:22px;line-height:1.25}
.kv__summary{margin:10px 0 0;color:var(--muted);line-height:1.75}

.meta{display:grid;gap:10px;margin-top:12px}
.meta__row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background: rgba(248,250,252,.6)}
.meta__k{color:var(--muted);font-size:12px}
.meta__v{font-weight:650;font-size:13px}

.timeline{display:grid;gap:12px;margin-top:12px}
.step{padding:12px;border:1px solid var(--line);border-radius:16px;background: rgba(255,255,255,.92)}
.step__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.step__remark{margin:0;font-size:14px;line-height:1.65}
.step__time{white-space:nowrap;color:var(--muted);font-size:12px}
.step__imgs{display:grid;gap:10px;margin-top:10px;grid-template-columns: repeat(2,minmax(0,1fr))}
@media (min-width:720px){.step__imgs{grid-template-columns: repeat(3,minmax(0,1fr))}}
.step__imgs a{display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(15,23,42,.08);background:#f1f5f9;cursor:zoom-in}
.step__imgs img{width:100%;height:100%;object-fit:cover;display:block}

/* 详情页灯箱：点击图片放大 */
body.anli-page .lightbox{position:fixed;inset:0;z-index:80;display:none;}
body.anli-page .lightbox.is-open{display:block;}
body.anli-page .lightbox__backdrop{position:absolute;inset:0;background:rgba(2,6,23,.65);}
body.anli-page .lightbox__panel{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
body.anli-page .lightbox__img{
  max-width:min(1080px, 92vw);
  max-height:86vh;
  border-radius:16px;
  box-shadow: 0 28px 80px rgba(2,6,23,.40);
  background:#fff;
}
body.anli-page .lightbox__close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(15,23,42,.55);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.pager{display:flex;justify-content:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.pager a{padding:10px 12px;border-radius:12px;border:1px solid var(--line);background: rgba(255,255,255,.88);text-decoration:none;color:var(--text)}
.pager a:hover{border-color: rgba(37,99,235,.28); color: var(--brand)}
.pager .is-active{background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.28); color:#1d4ed8}

.footer{border-top:1px solid var(--line); margin-top: 26px; background: rgba(248,250,252,.6)}
.footer__inner{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 0}
.footer__title{font-weight:800}
.footer__desc{color:var(--muted);font-size:13px;margin-top:6px;max-width:60ch}
.footer__link{color:var(--muted);text-decoration:none}
.footer__link:hover{color:var(--brand)}

/* 移动端细节优化（list/detail 更贴合手机端阅读） */
.btn--block{width:100%;display:flex;}

.detail__cover{
  margin-top:14px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
}
.detail__cover img{width:100%;height:auto;display:block;max-height:420px;object-fit:cover;}

@media (max-width: 720px){
  .container{padding:0 14px}
  .hero{padding:18px 0 10px}
  .hero__title{font-size:24px}
  .brand__logo{width:auto;height:34px;max-width:100px;max-height:34px;border-radius:12px}

  .topmenu--desktop{display:none}
  .navicon{display:flex}

  .case-card__head{padding:12px 16px 10px}
  .case-card__title{font-size:16px}
  .case-card__imgs{gap:7px;padding:0 16px 12px}
  .case-card__body{padding:10px 16px 14px}

  .detail__main,.detail__side{padding:14px}
  .kv__title{font-size:20px}
  .kv__summary{font-size:14px;line-height:1.7}
  .detail__cover img{max-height:280px}

  .step{padding:12px}
  .step__remark{font-size:14px}
}