:root{
  --bg:#0e1319; --panel:#151c25; --panel2:#1b2430; --line:#26323f;
  --tx:#d9e2ec; --mu:#7b8da1; --ac:#2bb3d6; --ac2:#1d8fb0;
  --ok:#33c18d; --wn:#e2a63c; --er:#e35d5d;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Cascadia Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);
  font:14.5px/1.65 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
a{color:var(--ac);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.sp{flex:1 1 auto;min-width:0}

/* 顶栏 */
.hdr{position:sticky;top:0;z-index:20;background:rgba(16,22,30,.96);
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px)}
/* 顶栏：11 个导航项 + 搜索框 + 5 个语言 + 「开始设计」按钮，自然宽度约 1280px，
   而正文容器只有 1180px。**单行放不下时 flex 默认会收缩**，而汉字的 min-content 是
   "一个字"，于是被压成一列竖排（实测 .brand 被压成 20px 宽、高出页头 125px，.cta 同样），
   页头又有背景色挡着，看起来就是"字被裁掉了一部分"。三处修正：
     ① 顶栏用自己的更宽容器（1440），正文仍保持 1180；
     ② 顶栏元素一律 flex-shrink:0 —— 宁可换行，绝不把汉字压成竖排；
     ③ 允许换行兜底：窄窗口下右侧那组整体落到第二行，而不是被挤出可视区。 */
.hdr-in{display:flex;align-items:center;gap:14px;min-height:58px;
  max-width:1440px;flex-wrap:wrap;row-gap:6px;padding-top:6px;padding-bottom:6px}
.brand{font-size:17px;font-weight:700;color:var(--tx);letter-spacing:.3px;
  flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center}
/* 公司 logo 的**图形部分**（已抠掉连通的白色，见 tools 里生成脚本）当页头品牌标。
   42px：页头内容区高 46px，还能留一点呼吸。整幅竖版锁定版只有 34px 时图形只剩二十几像素，
   客户反馈"太小很难看"——所以页头只放图形，完整版放首页品牌区。 */
.brand-logo{width:42px;height:42px;margin-right:10px;flex:0 0 auto}
.brand b{color:var(--ac)}
.brand span{color:var(--mu);margin:0 1px}
.nav{display:flex;gap:12px;row-gap:4px;font-size:12.5px;
  flex:0 1 auto;flex-wrap:wrap;min-width:0}
.nav a{color:var(--mu)}
.nav a.on{color:var(--tx);font-weight:600}
.nav a:hover{color:var(--ac);text-decoration:none}
.langs{display:flex;gap:4px;flex:0 0 auto}
.langs a{font-size:11.5px;color:var(--mu);border:1px solid var(--line);
  border-radius:5px;padding:2px 7px;font-family:var(--mono)}
.langs a.on{color:#04141b;background:var(--ac);border-color:var(--ac);font-weight:700}
.cta{background:linear-gradient(180deg,var(--ac),var(--ac2));color:#04141b;font-weight:700;
  font-size:13px;padding:7px 14px;border-radius:8px;flex:0 0 auto;white-space:nowrap}
.cta:hover{text-decoration:none;filter:brightness(1.08)}
/* 右侧一组：margin-left:auto 把它推到最右；窗口不够宽时**整组**换到第二行并继续靠右 */
.hdr-right{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:auto}

/* 页脚 */
.ftr{border-top:1px solid var(--line);margin-top:56px;padding:20px 0 40px;
  color:var(--mu);font-size:12.5px}
.ft{display:flex;gap:16px;align-items:center}

/* 通用 */
h1{font-size:26px;margin:34px 0 8px;letter-spacing:.2px}
h2{font-size:17px;margin:34px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--line)}
h3{font-size:14.5px;margin:20px 0 8px}
.lead{color:var(--mu);margin:0 0 20px;max-width:760px}
.mono{font-family:var(--mono)}
.muted{color:var(--mu)}
.small{font-size:12.5px}

/* 卡片网格 */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px 17px}
.card h3{margin:0 0 6px;font-size:15px}
.card .meta{font-size:12px;color:var(--mu)}
.card a{font-weight:600}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:14px 16px;text-align:center}
.stat .n{font-family:var(--mono);font-size:26px;color:var(--ac)}
.stat .k{font-size:12px;color:var(--mu);margin-top:2px}

/* 徽标 */
.tag{display:inline-block;font-size:11px;padding:1px 8px;border-radius:999px;
  border:1px solid var(--line);color:var(--mu);font-family:var(--mono);margin-right:5px}
.tag.ok{color:#7fe0b8;border-color:#1d5a42;background:#12261e}
.tag.wn{color:#e8c37a;border-color:#5a4318;background:#241f14}
.tag.ac{color:#8fd8ee;border-color:#1b5568;background:#0f2530}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
/* 窄屏：表格列多时 min-content 会把**整页**撑出横向滚动（实测 /products 在 390px 下撑宽 94px）。
   让表格自己成为一个可横向滚动的块，页面宽度不再被它决定。
   display:block 不会拆掉表格布局——tr/td 仍是 table-row/cell，浏览器会包一层匿名表格盒。 */
@media (max-width:900px){
  table{display:block;overflow-x:auto;max-width:100%}
}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mu);font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:600}
td.n,th.n{text-align:right;font-family:var(--mono);white-space:nowrap}
tbody tr:hover{background:#18212c}

/* 表单 */
label{display:block;font-size:12.5px;color:var(--mu);margin:10px 0 4px}
input,select,textarea{width:100%;background:#0d1319;border:1px solid var(--line);
  color:var(--tx);border-radius:7px;padding:7px 9px;font:inherit;font-size:13px;
  min-width:0}   /* 不加这条，输入框的固有宽度（约 170px）就是它的 min-content，
                    窄屏下会把整个 grid 列顶宽 → 整页横向滚动 */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ac)}
input[type=number]{font-family:var(--mono)}
button{background:linear-gradient(180deg,var(--ac),var(--ac2));border:0;color:#04141b;
  font-weight:700;font-size:13.5px;padding:9px 18px;border-radius:8px;cursor:pointer}
button.ghost{background:var(--panel2);color:var(--tx);border:1px solid var(--line)}
button.danger{background:#7a2626;color:#ffd9d9}
button:hover{filter:brightness(1.08)}

/* 选型器 */
.finder{display:grid;grid-template-columns:266px 1fr;gap:26px;align-items:start}
/* minmax(0,1fr) 而不是 1fr：1fr 的隐含最小值是 min-content，
   栅格子项一旦宽于视口就把整页顶出横向滚动条（实测 /products 在 390px 下顶宽 94px） */
@media (max-width:900px){.finder{grid-template-columns:minmax(0,1fr)}}
.filters{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:14px 16px 18px;position:sticky;top:74px}
.filters h3{margin:0 0 4px}
.filters .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.filters .row2{grid-template-columns:1fr}}
.filters .acts{display:flex;gap:8px;margin-top:16px}
.filters .acts button{flex:1;padding:8px 0}
.res-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;color:var(--mu);font-size:13px}
.res-hd b{color:var(--ac);font-family:var(--mono);font-size:16px}

/* 向导 */
.wizard{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;max-width:760px}
.wizard .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
@media (max-width:700px){.wizard .grid2{grid-template-columns:1fr}}

/* 后台 */
.admin-msg{background:#12261e;border:1px solid #1d5a42;color:#7fe0b8;
  border-radius:8px;padding:8px 13px;font-size:13px;margin:14px 0}
.admin-note{background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:11px 14px;font-size:12.5px;color:var(--mu);margin:14px 0}
.acts-cell{white-space:nowrap}
.acts-cell form{display:inline}

/* 徽章行 */
.badges{margin:6px 0 0}

/* 首页 hero */
.hero{padding:46px 0 6px}
/* 首页品牌区：完整锁定版 logo（透明底）。页头只有 58px 高，整幅竖版塞进去必然很小很难看，
   所以"完整 logo"放这里，页头只放图形部分。窄屏缩到 120px 免得压掉正文。 */
.hero-logo{display:block;width:168px;height:168px;margin:0 0 16px}
@media (max-width:560px){.hero-logo{width:120px;height:120px}}
.hero h1{font-size:34px;margin:0 0 10px;line-height:1.25}
.hero .lead{font-size:15.5px;max-width:720px}
.hero-cta{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}
.btn-p,.btn-s{display:inline-block;padding:11px 22px;border-radius:9px;font-weight:700;
  font-size:14px}
.btn-p{background:linear-gradient(180deg,var(--ac),var(--ac2));color:#04141b}
.btn-s{background:var(--panel2);color:var(--tx);border:1px solid var(--line)}
.btn-p:hover,.btn-s:hover{text-decoration:none;filter:brightness(1.08)}
.card.pick{transition:border-color .12s}
.card.pick:hover{border-color:var(--ac);text-decoration:none}

/* 代码块 */
pre.code{background:#0d1319;border:1px solid var(--line);border-radius:9px;
  padding:12px 15px;overflow-x:auto;font-family:var(--mono);font-size:12px;
  line-height:1.75;color:#b9d4e4;margin:10px 0}

/* 内容页（企业站：关于/方案/新闻/联系） */
.pg-head{padding:34px 0 4px}
.pg-head h1{font-size:30px;margin:0 0 10px;line-height:1.28}
.crumbs{font-size:12.5px;color:var(--mu);margin-bottom:12px}
.crumbs a{color:var(--mu)}
.sol-meta{margin-top:10px}
.prose{max-width:820px;font-size:14.5px;line-height:1.85;color:#cfdae4;margin-top:8px}
.prose h2{font-size:21px;margin:30px 0 10px;color:var(--tx)}
.prose h3{font-size:17px;margin:24px 0 8px;color:var(--tx)}
.prose h4,.prose h5{font-size:15px;margin:20px 0 6px;color:var(--tx)}
.prose p{margin:0 0 13px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose li{margin:5px 0}
.prose b{color:var(--tx)}
.prose code{font-family:var(--mono);font-size:12.5px;background:#0d1319;
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:#a8d5e8}
.prose a{text-decoration:underline}
.prose hr{border:0;border-top:1px solid var(--line);margin:22px 0}

/* 新闻列表 */
.news-list{display:grid;gap:12px;margin-top:14px}
.news-item{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:start}
.news-item h3{margin:0 0 6px}
.news-item .news-date{color:var(--mu);padding-top:3px;font-family:var(--mono)}
@media (max-width:640px){.news-item{grid-template-columns:1fr}}

/* 表单（联系页 / 后台内容编辑） */
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;max-width:820px;margin:26px 0}
.form-card h2{margin:0 0 10px;font-size:19px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}
.form-foot{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}
label.chk{display:flex;align-items:center;gap:8px;color:var(--tx);margin-top:12px}
.admin-err{background:#2a1414;border:1px solid #6b2a2a;color:#ffb4b4;
  border-radius:8px;padding:8px 13px;font-size:13px;margin:14px 0}


/* 企业站首页 / 页脚 / 站点资料编辑 */
.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.hero-strip{margin-top:22px;padding:11px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--panel);font-size:13px;color:var(--mu);display:inline-block}
.sec{margin-top:44px}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-hd h2{margin:0;font-size:21px}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.cta-band h2{margin:0;font-size:20px}
.cta-band-acts{display:flex;align-items:center;gap:14px}
.brand .brand-sub{font-size:11.5px;color:var(--mu);margin-left:8px;font-weight:400}
.ft-cols{display:grid;grid-template-columns:1.5fr 1fr 1.3fr 1fr;gap:26px;padding:26px 0 6px}
@media (max-width:900px){.ft-cols{grid-template-columns:1fr 1fr}}
.ft-brand{font-size:16px;font-weight:700;color:var(--ac);margin-bottom:6px}
.ft-hd{font-size:11.5px;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;
  margin-bottom:9px;font-weight:600}
.ft-cols a{display:block;color:var(--mu);padding:2px 0}
.ft-cols a:hover{color:var(--tx);text-decoration:none}
.ft-cols .tag{display:inline-block;margin:0}
.site-edit{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap}
.site-edit input,.site-edit textarea{min-width:230px;flex:1}
.site-edit select.mini{width:auto;padding:5px 7px;font-size:12px}
.prose p.note{background:var(--panel2);border-left:3px solid var(--ac);
  padding:9px 14px;border-radius:0 8px 8px 0;color:var(--mu);font-size:13.5px}
.contact-block{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:14px 0 0}
@media (max-width:700px){.contact-block{grid-template-columns:1fr}}
.contact-block dt{color:var(--mu);font-size:12.5px}
.contact-block dd{margin:2px 0 0;font-size:14px}

/* 公司位置与导航（联系页）。嵌不嵌地图都能用：没嵌就是地址 + 四个导航按钮 */
.map-addr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.map-copy{cursor:pointer;font-size:12.5px;color:var(--ac);background:none;
  border:1px solid var(--line);border-radius:8px;padding:3px 10px}
.map-copy:hover{border-color:var(--ac)}
/* 高度必须由容器/iframe 明确给出：不写高度时多数浏览器会把它塌成默认的 150px 框 */
.map-embed{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--panel2)}
.map-embed iframe{display:block;width:100%;height:380px;border:0}
@media (max-width:700px){.map-embed iframe{height:280px}}
.map-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.map-btn{display:inline-block;font-size:13px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--tx);text-decoration:none}
.map-btn:hover{border-color:var(--ac);color:var(--ac)}

/* AI 需求录入卡片与确认页 */
.ai-card{background:linear-gradient(180deg,#101a24,#0d141b);border:1px solid #1d4a5a;
  border-radius:12px;padding:18px 20px;margin:22px 0 0}
.ai-card h2{color:var(--tx)}
.nl-reply{font-size:15px;line-height:1.8;color:#d7e6f0;background:var(--panel2);
  border-left:3px solid var(--ac);padding:11px 15px;border-radius:0 9px 9px 0;margin:6px 0 12px}
ul.tight{margin:6px 0 0;padding-left:20px}
ul.tight li{margin:3px 0;font-size:13px;color:var(--mu)}
tr.row-default{background:#151d26}
tr.row-default input,tr.row-default select{border-color:#4a3d1c}
.tag.wn{white-space:nowrap}

/* 留言卡片（后台） */
.inq-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:15px 17px;margin:14px 0}
.inq-hd{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.inq-msg{margin-top:6px;font-size:13.5px;line-height:1.75;white-space:pre-wrap;color:#cfdae4}
.inq-body{border-left:3px solid var(--line);padding-left:12px;margin-top:8px}

/* 两栏布局 + 右侧栏（对标站每页都有侧栏） */
.layout{display:block}
.layout.with-aside{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:30px;align-items:start}
/* 同上：窄屏收起侧栏时必须用 minmax(0,1fr)，否则正文里任何"不肯收缩"的元素
   （表格、双列表单）都会把整页顶宽 */
@media (max-width:1000px){.layout.with-aside{grid-template-columns:minmax(0,1fr)}}
.aside{position:sticky;top:74px;display:grid;gap:14px}
.side-block{background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:13px 15px}
.side-hd{font-size:12.5px;font-weight:700;color:var(--tx);margin-bottom:9px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.side-item{display:block;font-size:13px;color:var(--mu);padding:5px 0;line-height:1.5}
.side-item:hover{color:var(--tx);text-decoration:none}
.side-item .small{display:block;font-size:11.5px}
.side-more{display:inline-block;margin-top:8px;font-size:12.5px}
.side-tags{display:flex;flex-wrap:wrap;gap:6px}
.side-tags .tag{margin:0;cursor:pointer}
.side-block.hotline{border-color:#1d4a5a;background:linear-gradient(180deg,#101a24,#0d141b)}

/* 应用分类 / 案例卡 / 站点地图 */
.grp-hd{font-size:18px;margin:30px 0 12px;padding-left:11px;border-left:3px solid var(--ac)}
.sol-card{display:flex;flex-direction:column;gap:8px}
.sol-card h3{margin:0}
.case-card{display:flex;flex-direction:column}
.link-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 18px}
.link-cols a{font-size:13px;color:var(--mu);padding:3px 0}
.link-cols a:hover{color:var(--tx)}
.stat.hl{border-color:var(--ac)}
/* 导航项变多，收紧间距（配合顶栏 flex-shrink:0：宁可换行，也不把字压成竖排）。
   加「电源挑战」那一项之后，1280/1366 这两个宽度会从单行变成两行——实测过把间距
   从 12px 收到 10px 也收不回来（还差约 45px），所以**没有**为此去动这个已经调好的值：
   两行顶栏是本文件这一行刻意选定的取舍。真要收回单行，动的是品牌副标题
   （`@media (max-width:1499px){.brand .brand-sub{display:none}}`，约省 105px）。 */
.nav{gap:12px}
.nav a{white-space:nowrap}

/* 登录与密码页 */
.login-wrap{max-width:560px;margin:40px auto}
.login-wrap h1{font-size:26px;margin:0 0 8px}

/* 站内 AI 导购：收成**贴右边缘的竖条**，点一下从右侧滑出面板。
 *
 * 为什么不再用右下角浮标：右下角已经被在线客服占着（.supw），两个胶囊叠在那儿，
 * 客户第一眼看到两个按钮不知道点哪个；而且 AI 一次要等 15~30 秒，它不该一直"喊人"。
 * 改成贴边的竖标签后：位置固定在右侧居中（和右下角的客服按钮天然不重叠，
 * 不再需要 .has-support 错位魔法），平时只是一条窄边，点它才展开。 */
/* 竖条要**自己**用 transform 居中，不能给容器 .aiw 加 transform：
   transform 会为后代建立包含块，抽屉的 position:fixed 就会相对这条 32px 宽的竖条定位
   （实测抽屉高度变成 100px 而不是整屏）。容器保持无定位、无 transform。 */
.aiw{font-size:13.5px}
.aiw-btn{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:61;
  background:linear-gradient(180deg,var(--ac),var(--ac2));color:#04141b;border:0;
  border-radius:10px 0 0 10px;padding:16px 9px;font-weight:700;cursor:pointer;
  writing-mode:vertical-rl;letter-spacing:2px;line-height:1;
  box-shadow:-4px 0 16px rgba(0,0,0,.35)}
.aiw-btn:hover{filter:brightness(1.08)}
.aiw-btn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
/* 面板：右侧抽屉，留出竖条的宽度（46px），这样开着的时候竖条还在、还能再点一下收起 */
.aiw-panel{position:fixed;right:46px;top:0;bottom:0;width:400px;
  max-width:calc(100vw - 46px);background:var(--panel);border-left:1px solid #1d4a5a;
  box-shadow:-12px 0 40px rgba(0,0,0,.45);display:flex;flex-direction:column}
.aiw-panel[hidden]{display:none}
.aiw-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;
  border-bottom:1px solid var(--line);background:var(--panel2)}
.aiw-x{background:none;border:0;color:var(--mu);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.aiw-body{flex:1;padding:12px 13px;overflow-y:auto;display:grid;gap:9px;align-content:start}
.aiw-hint{color:var(--mu);font-size:12.5px;line-height:1.6}
.aiw-eg{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);
  color:var(--tx);border-radius:8px;padding:7px 10px;font-size:12.5px;cursor:pointer;font-weight:400}
.aiw-eg:hover{border-color:var(--ac)}
.aiw-msg{border-radius:9px;padding:8px 11px;line-height:1.75;font-size:13px;word-break:break-word}
.aiw-msg.me{background:#12202b;color:#cfe3ee;justify-self:end;max-width:88%}
.aiw-msg.ai{background:var(--panel2);border:1px solid var(--line)}
.aiw-msg.pending{color:var(--mu);font-size:12.5px}
.aiw-msg.err{background:#2a1414;border:1px solid #6b2a2a;color:#ffb4b4}
.aiw-src{margin-top:8px;padding-top:7px;border-top:1px dashed var(--line);font-size:12px;color:var(--mu)}
.aiw-src a{margin-right:10px}
.aiw-cta{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.aiw-cta a{padding:7px 13px;font-size:12.5px;border-radius:8px}
.aiw-note{margin-top:7px;font-size:11.5px;color:var(--mu)}
.aiw-form{display:flex;gap:7px;padding:10px 13px;border-top:1px solid var(--line);background:var(--panel2)}
.aiw-form textarea{flex:1;resize:none;font-size:13px}
.aiw-form button{white-space:nowrap;align-self:flex-end}
.aiw-foot{padding:7px 13px 10px;font-size:11.5px;color:var(--mu);background:var(--panel2)}
/* 窄屏：抽屉占满整宽（竖条被盖住，用面板右上角的 × 关），竖条本身收窄一点少挡内容。
   用 left:0;right:0 而不是 width:100vw —— vw 把滚动条宽度也算进去了，
   在有竖向滚动条的页面上会向右多出 ~15px（实测 390px 下 left=-15） */
@media (max-width:560px){
  .aiw-panel{right:0;left:0;width:auto;max-width:none;border-left:0}
  .aiw-btn{padding:13px 7px;letter-spacing:1px}
}

/* 在线客服浮标（公司自己的客服入口）。
   和 AI 导购同处右下角：客服在最下面，AI 浮标整体上移——两个球叠在一起，
   访客只会点到靠外的那一个，另一个等于不存在。 */
.supw{position:fixed;right:20px;bottom:20px;z-index:61;font-size:13.5px}
.supw-btn{background:#0f7a4a;color:#eafff3;border:0;border-radius:999px;padding:11px 18px;
  font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.supw-btn:hover{background:#12905a}
.supw-panel{position:absolute;right:0;bottom:56px;width:300px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid #1d5a42;border-radius:12px;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.45)}
.supw-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;
  border-bottom:1px solid var(--line);background:var(--panel2)}
.supw-body{padding:12px 13px;display:grid;gap:9px}
.supw-qr{width:100%;max-width:200px;margin:0 auto;border-radius:8px;background:#fff;padding:6px}
.supw-go{display:block;text-align:center;background:#0f7a4a;color:#eafff3;border-radius:9px;
  padding:10px 14px;font-weight:700}
.supw-go:hover{background:#12905a;text-decoration:none}
.supw-note{border-top:1px dashed var(--line);padding-top:8px;line-height:1.6}
/* AI 导购现在是**贴右边缘、垂直居中**的竖条，客服浮标在右下角——
   两者位置天然错开，不再需要 .has-support 那种"把 AI 往上抬 78px"的错位魔法
   （错位类一旦漏加，两个浮标就会互相盖住，实测踩过）。 */
/* 自建会话窗：消息区固定高度滚动，输入框常驻底部 */
.supw-chat .supw-body{padding:0;gap:0}
.supw-msgs{max-height:46vh;min-height:120px;overflow-y:auto;padding:12px 13px;
  display:grid;gap:8px;align-content:start}
.supw-msg{border-radius:9px;padding:7px 10px;line-height:1.7;font-size:13px;word-break:break-word;
  background:var(--panel2);border:1px solid var(--line)}
.supw-msg.me{background:#12202b;color:#cfe3ee;justify-self:end;max-width:88%}
.supw-msg.staff{background:#0f2a1f;border-color:#1d5a42}
.supw-msg.sys{background:none;border:1px dashed var(--line);color:var(--mu);font-size:12px}
.supw-msg.pending{opacity:.6}
.supw-msg.failed{border-color:#6b2a2a;background:#2a1414}
.supw-who{font-size:11px;color:var(--mu);margin-bottom:2px;font-family:var(--mono)}
.supw-form{display:flex;gap:7px;padding:10px 13px;border-top:1px solid var(--line);
  background:var(--panel2)}
.supw-form textarea{flex:1;resize:none;font-size:13px}
.supw-form button{white-space:nowrap;align-self:flex-end}
.supw-chat .small.muted{padding:0 13px 10px;background:var(--panel2)}
.supw-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ffd166;
  margin-left:6px;vertical-align:middle}
/* 跟进时间线：只追加的记录流 */
.tl{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.tl-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:8px}
.tl-item{border-left:3px solid var(--ac);padding:2px 0 2px 10px;margin-bottom:8px}
.tl-item.legacy{border-left-color:var(--line);opacity:.85}
.tl-meta{color:var(--mu);font-size:11px}
.tl-body{font-size:13px;line-height:1.7;white-space:pre-wrap;color:#cfdae4;margin-top:2px}
.tl-form{margin-top:8px}
.tl-form textarea{width:100%;font-size:13px}

/* 后台工作台：左列表 + 右会话 */
.wb{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
@media (max-width:860px){.wb{grid-template-columns:1fr}}
.wb-list{max-height:70vh;overflow-y:auto;display:grid;gap:8px}
.wb-item{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;color:var(--tx)}
.wb-item:hover{border-color:var(--ac);text-decoration:none}
.wb-item.on{border-color:var(--ac);background:var(--panel2)}
.wb-item .nm{font-weight:600;font-size:13.5px}
.wb-item .pv{font-size:12px;color:var(--mu);margin-top:3px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-item .mt{font-size:11px;color:var(--mu);font-family:var(--mono);margin-top:4px}
.wb-thread{max-height:56vh;overflow-y:auto;display:grid;gap:9px;padding:4px 2px}
.wb-reply{display:grid;gap:8px;margin-top:12px}
.wb-reply textarea{min-height:70px;font-size:13.5px}
@media (max-width:560px){
  .supw-panel{width:calc(100vw - 24px);right:-8px}
}

/* 反垃圾蜜罐：对人不可见（不用 display:none——部分机器人会跳过隐藏元素） */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 图片：产品页图集 / 列表缩略图 / 后台图库 ---------- */
/* 图集：主图 + 缩略图条。没有图片时整块不渲染（**不放占位图**）。 */
.gal{margin:18px 0 26px;display:grid;gap:12px}
.gal-main{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;overflow:hidden}
.gal-main img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;
  background:#0b1016;cursor:zoom-in;margin:0 auto}
.gal-main figcaption{font-size:12px;color:var(--mu);padding:8px 12px;
  border-top:1px solid var(--line)}
.gal-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.gal-thumbs a{display:block;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:#0b1016;line-height:0}
.gal-thumbs a.on,.gal-thumbs a:hover{border-color:var(--ac)}
.gal-thumbs img{width:92px;height:66px;object-fit:cover;display:block}
.specgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;
  margin-top:12px}
.specgrid figure{margin:0;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.specgrid img{display:block;width:100%;height:auto;background:#fff;cursor:zoom-in}
.specgrid figcaption{font-size:12px;color:var(--mu);padding:8px 10px}
/* 列表页缩略图：固定比例，避免每张图高矮不一把卡片撑乱 */
.thumb{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;background:#0b1016;
  border:1px solid var(--line);margin-bottom:10px;display:block}
/* 表格里的小缩略图（产品检索结果） */
.prow{display:flex;gap:10px;align-items:center}
.pthumb{width:72px;height:54px;object-fit:cover;border-radius:6px;background:#0b1016;
  border:1px solid var(--line);flex:0 0 auto}

/* ---- 产品中心顶部的「按类别浏览」分类条 + 命中的筛选条件小标签 ----
   （取代原来的左侧筛选栏：公司要求去掉左栏，但 `/products?category=…` 是站内热词
    落地页的目标地址，所以类别得留一个能点、能看出当前在哪一类的入口。） */
.catbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.catbar-hd{font-size:12.5px;color:var(--mu);margin-right:2px}
.catbar a{font-size:12.5px;color:var(--mu);border:1px solid var(--line);border-radius:999px;
  padding:3px 11px;background:var(--panel)}
.catbar a:hover{color:var(--tx);border-color:var(--ac);text-decoration:none}
.catbar a.on{background:var(--ac);border-color:var(--ac);color:#04141b;font-weight:700}
.catbar a i{font-style:normal;font-size:11px;opacity:.7;margin-left:5px;
  font-family:var(--mono)}
.fchips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.fchip{font-size:12px;color:var(--tx);background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:2px 6px 2px 9px}
.fchip a{color:var(--mu);margin-left:7px;font-size:13px;line-height:1}
.fchip a:hover{color:var(--er);text-decoration:none}
.fclear{font-size:12.5px;margin-left:4px}

/* ---- 产品中心「图墙」排布（对标 szelanpo dyxp.html 的 pd_list_dl：图/参数在上、型号名在下）---- */
.viewsw{display:inline-flex;gap:2px;margin-left:auto;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:2px}
.viewsw a{font-size:12px;color:var(--mu);padding:3px 10px;border-radius:6px}
.viewsw a:hover{color:var(--tx);text-decoration:none}
.viewsw a.on{background:var(--ac);color:#04141b;font-weight:700}
/* 列数用 auto-fill 而不是写死 3 列：写死的话在窄屏会得到折 4~6 行型号名的窄格子，
   那叫"被挤扁"不叫"同版式"。auto-fill 让格子按容器宽度自己决定列数：
   去掉左侧筛选栏之后正文有 838px，185px 的格子会排出 4 列（比对标站还密），
   所以下限给到 220px —— 桌面与 768px 平板都稳定 3 列（每格 ≈268 / 226px，与对标站
   ~300px 的照片格同量级）、560px 两列、390px 一列。
   不用 1fr 而用 minmax(…,1fr)：1fr 的隐含最小值是 min-content，
   型号名很长时会把整行顶宽（与 .finder 那条同一个坑，实测过）。
   grid-auto-rows:1fr —— 一屏卡片高度**完全齐平**：型号名长短不一，
   默认 auto 行高会让每行高矮不同，整墙看上去就是参差的（实测高低差 59px）。 */
.pd-grid{display:grid;gap:16px;margin-top:2px;grid-auto-rows:1fr;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.pd-tile{display:flex;flex-direction:column;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:12px 13px 13px;
  color:var(--tx);transition:border-color .12s,transform .12s}
.pd-tile:hover{border-color:var(--ac);text-decoration:none;transform:translateY(-2px)}
/* 图片位：固定 4:3，有图时裁切填充、没图时用规格摘要撑住同一块面积，
   这样"有图/没图"两种卡片高度一致，不会一屏里参差不齐 */
.pd-shot{position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;border-radius:8px;background:#0b1016;border:1px solid var(--line);
  overflow:hidden;padding:10px}
.pd-shot img{width:100%;height:100%;object-fit:contain;display:block}
/* 有真图时图片位不留内边距：照片铺满 4:3 的框（contain 保证不拉伸变形） */
.pd-tile-img .pd-shot{padding:0}
.pd-spec{display:flex;flex-direction:column;gap:6px;width:100%;text-align:center;
  font-family:var(--mono);line-height:1.45}
.pd-spec-hd{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);
  font-family:inherit}
.pd-key{font-size:12px;color:var(--tx);word-break:break-word}
.pd-nums{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:center}
.pd-nums span{font-size:11.5px;color:var(--ac);border:1px solid var(--line);
  border-radius:5px;padding:1px 6px;background:var(--panel2)}
.pd-noimg{font-size:10.5px;color:var(--wn);font-family:inherit}
.pd-name{font-size:13.5px;font-weight:600;line-height:1.45;color:var(--tx);
  overflow-wrap:anywhere}
.pd-tile:hover .pd-name{color:var(--ac)}
.pd-meta{font-size:11.5px;color:var(--mu);margin-top:auto}
.pd-flag{font-size:11px}

/* ---- 分页条（对标站 apage：记录总数 / 页数 + 首页 上一页 1..N 下一页 尾页）---- */
.apage{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:20px;
  padding-top:14px;border-top:1px solid var(--line);font-size:12.5px}
.apage-txt{color:var(--mu);font-family:var(--mono);margin-right:8px}
.apage a,.apage .off{border:1px solid var(--line);border-radius:6px;padding:3px 9px;
  background:var(--panel);color:var(--mu);font-family:var(--mono);min-width:30px;
  text-align:center}
.apage a:hover{border-color:var(--ac);color:var(--tx);text-decoration:none}
.apage a.cur{background:var(--ac);border-color:var(--ac);color:#04141b;font-weight:700}
.apage .off{opacity:.45}
/* 灯箱：纯原生 JS，无依赖 */
.lightbox{position:fixed;inset:0;background:rgba(4,7,10,.93);z-index:60;display:none;
  align-items:center;justify-content:center;padding:20px}
.lightbox.on{display:flex}
.lightbox img{max-width:96vw;max-height:88vh;border-radius:8px}
.lightbox .close{position:absolute;top:14px;right:20px;color:#fff;font-size:26px;
  background:none;border:0;cursor:pointer}

/* 产品特点清单：参考国内电源 IC 官网的写法，一行一条、不编号图标，信息密度优先 */
.feat{margin:8px 0 0;padding-left:20px}
.feat li{margin:4px 0;line-height:1.7}
.feat li::marker{color:var(--ac)}

/* 顶栏站内搜索（大厂官网都有，工程师第一反应就是搜型号） */
.navsearch{display:flex;align-items:center;gap:2px;background:var(--panel2);
  border:1px solid var(--line);border-radius:8px;padding:2px 4px 2px 8px}
.navsearch input{background:none;border:0;color:var(--tx);font-size:12.5px;width:110px;
  outline:none;padding:3px 0}
.navsearch input::placeholder{color:var(--mu)}
.navsearch button{background:none;border:0;color:var(--mu);cursor:pointer;font-size:12px;
  padding:2px 4px}
.navsearch button:hover{color:var(--ac)}
@media (max-width:900px){.navsearch{display:none}}

/* 后台图库 */
.dropzone{border:2px dashed var(--line);border-radius:12px;padding:18px;
  background:var(--panel2);text-align:center}
.dropzone.over{border-color:var(--ac);background:#12242c}
.dropzone input[type=file]{color:var(--tx);max-width:100%}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;
  margin-top:14px}
.mcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:9px;color:var(--tx)}
.mcard:hover{border-color:var(--ac);text-decoration:none}
.mcard.on{border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac)}
.mcard img{width:100%;height:130px;object-fit:cover;border-radius:7px;background:#0b1016;
  display:block}
.mcard .small{margin-top:6px;line-height:1.7}
.media-edit{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:22px;
  align-items:start}
.media-edit .mpic{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);
  background:#0b1016}
.mnote{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
@media (max-width:760px){
  .media-edit{grid-template-columns:1fr}
  .gal-thumbs img{width:74px;height:54px}
}

/* ---- 电源设计挑战（游戏）----
   左边旋钮、右边记分板。控件宽度都收在容器内（range 用 width:100%），
   390px 窄屏塌成一列也不许出横向滚动条——tools/check_layout.js 抓的就是这一类故障。 */
.gm{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:22px;
  align-items:start;margin:18px 0 4px}
.gm-knobs{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px}
.gm-knobs h2{font-size:17px;margin:0 0 14px}
.gm-row{margin:0 0 15px}
.gm-row label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13px;margin-bottom:6px}
.gm-row select{width:100%}
.gm-row input[type=range]{width:100%;max-width:100%;accent-color:var(--ac);display:block}
.gm-val{font-family:var(--mono);font-size:12.5px;color:var(--ac);white-space:nowrap}
.gm-hint{font-size:11.5px;color:var(--mu);line-height:1.65;margin:5px 0 0}
.gm-score{display:flex;gap:20px;align-items:center;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.gm-score.pass{border-color:#1d5a42;background:linear-gradient(180deg,#10241c,#0d141b)}
.gm-score.fail{border-color:#6b2a2a;background:linear-gradient(180deg,#2a1414,#0d141b)}
.gm-num{font-family:var(--mono);font-size:42px;line-height:1;color:var(--ac)}
.gm-score.pass .gm-num{color:#7fe0b8}
.gm-score.fail .gm-num{color:#ffb4b4}
.gm-grade{font-size:17px;font-weight:700;margin-top:4px}
.gm-verdict{font-size:15px;font-weight:600}
table.gm-gates{width:100%;margin:0}
table.gm-gates td,table.gm-gates th{font-size:13px}
table.gm-gates tr.ok td:first-child{border-left:3px solid #1d5a42}
table.gm-gates tr.bad td:first-child{border-left:3px solid #6b2a2a;color:#ffb4b4}
.gm-loss{display:grid;gap:10px;margin:8px 0 0}
.gm-loss-hd{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:4px}
.gm-bar{height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  overflow:hidden}
.gm-bar i{display:block;height:100%;border-radius:999px}
.gm-checks{margin:8px 0 0;padding-left:20px}
.gm-checks li{font-size:13px;line-height:1.75;margin:3px 0}
.gm-checks li.ok::marker{color:#7fe0b8}
.gm-checks li.warn::marker{color:#e8c37a}
.gm-checks li.error::marker{color:#ffb4b4}
.gm-checks li.info::marker{color:var(--ac)}
.gm-h3{font-size:16px;margin:18px 0 0}
.gm-share{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.gm-share input{flex:1 1 260px;min-width:0;font-family:var(--mono);font-size:12.5px}
.gm-share button{white-space:nowrap}
@media (max-width:880px){
  .gm{grid-template-columns:1fr}
  .gm-num{font-size:36px}
}

/* 本页问答（功率档/方案页）：折叠式 Q&A。
   站点原本没有这个样式（/faq 是纯 markdown 正文），所以新加块必须自己带样式——
   否则浏览器默认渲染是一排挤在一起的三角形，看起来像没做完。 */
.faq{margin:6px 0 0}
.faq details{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  margin-bottom:8px;padding:10px 14px}
.faq summary{cursor:pointer;font-weight:600;font-size:14px;line-height:1.55}
.faq details[open] summary{margin-bottom:8px;color:var(--ac)}
.faq .faq-a{font-size:13.5px;line-height:1.75;max-width:840px;color:var(--tx)}