:root{
  --bg:#f6f7f9; --card:#fff; --ink:#1a1d21; --ink2:#5b6470; --line:#e4e7ec;
  --brand:#0f7b6c; --brand-ink:#0b5c51; --brand-soft:#e6f4f1;
  --warn:#b45309; --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
button{font:inherit;cursor:pointer}
input,textarea{font:inherit;color:inherit}

/* 按钮 */
.btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 16px;transition:.15s}
.btn:hover{border-color:#c9cfd8}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-ink)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.sm{padding:6px 12px;font-size:13px}
.link{background:none;border:0;color:var(--ink2);text-decoration:underline;padding:0;font-size:13px}

/* 登录页 */
.gate{min-height:100%;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,#eef4f3,#f6f7f9 45%)}
.gate-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:32px;box-shadow:0 8px 30px rgba(20,30,40,.06)}
.brand{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.brand-mark{width:44px;height:44px;flex:none;border-radius:12px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:700;letter-spacing:.5px}
.brand-mark.sm{width:30px;height:30px;border-radius:9px;font-size:12px}
/* 图标自带圆角方块和底色, 铺满父级即可 —— 不铺满会从边缘漏出一圈原来的绿底。
   border-radius:inherit 让 44px 和 30px 两种尺寸各自跟随父级圆角。 */
/* 图标自带圆角与底色, 容器就别再画背景: 容器圆角(12px/9px)比图标自身的小,
   两圈圆角之间的缝隙会漏出底色 —— 换 logo 后四角冒绿边就是这么来的。
   :has(img) 覆盖 applyBrand() 动态塞进来的企业 logo;
   .has-img 是静态那两处的兜底, 老浏览器不支持 :has() 时仍然生效。 */
/* 🔴 必须拆成两条: CSS 选择器列表里只要有一个无法解析, **整条规则作废**。
   原来写成 `.brand-mark:has(img),.brand-mark.has-img{...}` 一组, 不支持 :has()
   的浏览器会把 .has-img 那半边一起丢掉 —— 所谓兜底根本不存在。 */
.brand-mark.has-img{background:none}
.brand-mark:has(img){background:none}
.brand-mark img{width:100%;height:100%;border-radius:inherit;display:block;object-fit:cover}
.brand h1{margin:0;font-size:18px;font-weight:650}
.brand h1 span{font-weight:400;color:var(--ink2);font-size:14px}
.brand p{margin:2px 0 0;color:var(--ink2);font-size:13px}
.tabs{display:flex;gap:4px;background:#f1f3f5;padding:4px;border-radius:9px;margin-bottom:20px}
.tab{flex:1;border:0;background:transparent;padding:8px;border-radius:6px;color:var(--ink2)}
.tab.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.form{display:grid;gap:14px}
.form label{display:grid;gap:6px;font-size:13px;color:var(--ink2)}
.form input{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.form input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.hint{margin:0;font-size:12px;color:var(--ink2)}
.msg{min-height:20px;margin:12px 0 0;font-size:13px;color:var(--warn)}

/* 主框架 */
.app{display:flex;height:100%}
.side{width:248px;flex:none;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 12px}
.side-top{display:flex;gap:10px;align-items:center;padding:0 4px 16px}
.side-title{font-weight:650;font-size:15px;line-height:1.2}
.side-title em{display:block;font-style:normal;font-size:12px;color:var(--ink2);font-weight:400}
.nav{display:grid;gap:2px;margin:16px 0 12px}
.nav-item{border:0;background:transparent;text-align:left;padding:9px 12px;border-radius:8px;
  color:var(--ink2);display:flex;justify-content:space-between;align-items:center}
.nav-item:hover{background:#f4f6f7}
.nav-item.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.soon{font-size:11px;color:var(--ink2);background:#f1f3f5;padding:1px 6px;border-radius:20px}
.convs{flex:1;overflow:auto;display:grid;gap:2px;align-content:start;grid-auto-rows:min-content;border-top:1px solid var(--line);padding-top:10px}
.conv{border:0;background:transparent;text-align:left;padding:8px 12px;border-radius:8px;
  font-size:13px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv:hover{background:#f4f6f7}
.conv.on{background:#f1f3f5;color:var(--ink)}
.side-foot{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;
  align-items:center;font-size:13px;color:var(--ink2)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.view{flex:1;min-height:0;display:flex;flex-direction:column}

/* 问答 */
.chat{flex:1;overflow:auto;padding:28px 24px}
.welcome{max-width:760px;margin:8vh auto 0;text-align:center}
.welcome h2{margin:0 0 8px;font-size:22px}
.welcome p{color:var(--ink2);margin:0 0 22px}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{border:1px solid var(--line);background:#fff;border-radius:20px;padding:7px 14px;
  font-size:13px;color:var(--ink2)}
.chip:hover{border-color:var(--brand);color:var(--brand-ink)}
.turn{max-width:820px;margin:0 auto 26px}
.bubble{padding:14px 16px;border-radius:12px;white-space:pre-wrap;word-break:break-word}
.turn.user .bubble{background:var(--brand-soft);margin-left:auto;max-width:80%}
.turn.ai .bubble{background:#fff;border:1px solid var(--line)}
.meta{font-size:12px;color:var(--ink2);margin:6px 2px 0;display:flex;gap:12px;flex-wrap:wrap}
.srcs{margin-top:10px;border-top:1px dashed var(--line);padding-top:10px}
.srcs h4{margin:0 0 8px;font-size:12px;color:var(--ink2);font-weight:600}
.src{font-size:12.5px;color:var(--ink2);padding:7px 10px;background:#fafbfc;border:1px solid var(--line);
  border-radius:8px;margin-bottom:6px}
.src b{color:var(--ink)}
.src-imgs{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.src-imgs img{width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:#fff}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--brand);display:block;
  animation:bl 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}

.composer{border-top:1px solid var(--line);background:#fff;padding:12px 24px 16px;
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.mode{grid-column:1/-1;display:flex;gap:16px;font-size:13px;color:var(--ink2)}
.mode label{display:flex;gap:5px;align-items:center;cursor:pointer}
#q{resize:none;max-height:160px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:#fff;line-height:1.6}
#q:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* 占位与管理 */
.placeholder{margin:12vh auto;text-align:center;color:var(--ink2);max-width:520px}
.placeholder h3{color:var(--ink);margin:0 0 8px}
/* ===== 统一页框 =====
   三个视图原来各写各的: 内边距 28/14/24px、max-width 960/无/1000px、
   工具页 margin:0 auto 居中而企业管理左对齐、企业管理和工作流连页标题都没有。
   现在三页统一: 同样的内边距 24/28、同样的 max-width 1040、同样居中、同样的页头。
   工作流虽是画布页, 但 1040-56=984px 的作图区够用(实测), 为了切页时标题不跳,
   一并收进同一宽度。 */
/* width:100% 不可省。.view 是 flex column, 在 flex 子项上写 margin:0 auto
   会取消默认的 stretch、让盒子退化成"按内容收缩"再居中 —— 实测工具页因此
   只有 592px 而可用区有 1192px, max-width 完全没机会生效。 */
.tools-page,.admin{padding:24px 28px;width:100%;max-width:1040px;margin:0 auto;overflow:auto}
.admin{display:grid;gap:18px;align-content:start}
.page-head{margin:0 0 18px}
.page-head h2{font-size:20px;margin:0 0 6px;line-height:1.3}
.page-head .sub{color:var(--ink2);margin:0;font-size:13px;line-height:1.6}
/* 企业管理是 grid, 页头要横跨整列, 否则会被当成第一个卡片跟着排 */
.admin>.page-head{grid-column:1/-1}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.card h3{margin:0 0 14px;font-size:15px}
.card h3 small{font-weight:400;color:var(--ink2);font-size:12px}
.stat-row{display:flex;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.stat{background:var(--brand-soft);border-radius:9px;padding:12px 18px;min-width:120px}
.stat b{display:block;font-size:22px;color:var(--brand-ink)}
.stat span{font-size:12px;color:var(--ink2)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.tbl th{color:var(--ink2);font-weight:600;font-size:12px}
.inline-form{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.inline-form input{padding:7px 10px;border:1px solid var(--line);border-radius:7px;width:150px}

@media(max-width:820px){
  .side{position:fixed;left:-260px;top:0;bottom:0;z-index:20;transition:.2s}
  .side.open{left:0;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .chat{padding:18px 14px}.composer{padding:10px 14px 14px}
  .turn.user .bubble{max-width:92%}
}

/* markdown 渲染 */
.bubble.md{white-space:normal}
.bubble.md>:first-child{margin-top:0}
.bubble.md>:last-child{margin-bottom:0}
.bubble.md p{margin:.55em 0}
.bubble.md h3,.bubble.md h4,.bubble.md h5{margin:1em 0 .5em;font-size:14.5px;font-weight:650}
.bubble.md ul,.bubble.md ol{margin:.5em 0;padding-left:1.4em}
.bubble.md li{margin:.25em 0}
.bubble.md code{background:#f1f3f5;padding:1px 5px;border-radius:4px;font-size:12.5px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.bubble.md pre.code{background:#f6f8fa;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;overflow-x:auto;font-size:12.5px;line-height:1.55}
.tbl-wrap{overflow-x:auto;margin:.7em 0}
.md-tbl{border-collapse:collapse;font-size:13px;min-width:100%}
.md-tbl th,.md-tbl td{border:1px solid var(--line);padding:7px 10px;text-align:left;
  white-space:normal;word-break:break-word;vertical-align:top}
.md-tbl th{background:#fafbfc;font-weight:600;color:var(--ink2);font-size:12px}

/* ===== 弹层 ===== */
.overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:100;display:flex;align-items:center;justify-content:center}
.overlay.hidden{display:none}
.overlay-card{background:#fff;border-radius:14px;width:min(680px,92vw);max-height:86vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.overlay-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.overlay-body{padding:16px 18px;overflow:auto}
.run-log{background:#0f172a;color:#cbd5e1;font-size:12px;padding:12px;border-radius:8px;white-space:pre-wrap;max-height:260px;overflow:auto}
.run-out{border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:6px}
.rev-box{background:#fdf2f8;border:1px solid #fbcfe8;border-radius:8px;padding:10px;display:flex;gap:10px;align-items:center;margin:10px 0}

/* ===== 工具模块 ===== */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tool-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff;position:relative}
.tool-card h4{margin-bottom:6px}
.tool-card p{color:var(--ink2);font-size:13px;line-height:1.5}
/* 工具卡改成外链: 整张卡可点。a 默认带下划线和链接色, 必须显式抹掉,
   否则九张卡会全变成蓝色带下划线, 和站内其它卡片不是一套东西。 */
/* flex 列 + margin-top:auto: 描述有两行有三行, 用 block 的话「打开工具」
   会跟着文字高低起伏, 同一行卡片看着参差不齐。 */
a.tool-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
a.tool-card:hover{border-color:var(--brand);box-shadow:0 4px 14px rgba(0,0,0,.06);
  transform:translateY(-1px)}
a.tool-card .go{margin-top:auto;padding-top:12px;font-size:12px;
  color:var(--brand);font-weight:600}
.tools-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--ink2);font-size:13px}
.tools-foot a{color:var(--brand);font-weight:600}
.badge{position:absolute;top:12px;right:12px;background:#eef2ff;color:#4f46e5;font-size:11px;padding:2px 8px;border-radius:10px}

/* ===== 工作流 ===== */
/* 工作流是画布页, 不收 max-width。曾为了让三页标题对齐把它收进 1040px, 但
   .flow-side 占 280px + 12px 间隙, 画布实际只剩 1040-56-292=692px(不是当时
   误记的 984 —— 那个数量的是 .flow-body 整体, 没扣右侧面板)。为 76px 的标题
   对齐砍掉 18% 作图区不划算, 只保留内边距一致。 */
.flow-page{display:flex;flex-direction:column;height:100%;overflow:auto;padding:24px 28px}
.flow-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.flow-bar select{padding:6px 10px;border:1px solid var(--line);border-radius:8px;max-width:220px}
.flow-sep{width:1px;height:22px;background:var(--line)}
.palette{font-size:13px;color:var(--ink2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pal{border:1px dashed var(--line);background:#fff;border-radius:8px;padding:4px 10px;cursor:pointer;font-size:12px}
.pal:hover{border-color:var(--brand);color:var(--brand)}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.warn{color:#dc2626;border-color:#fecaca}
#wf-link.on{background:var(--brand);color:#fff}
.flow-body{display:flex;gap:12px;min-height:340px}
.flow-canvas{flex:1;position:relative;border:1px solid var(--line);border-radius:12px;background:
  linear-gradient(90deg,#f8fafc 1px,transparent 1px),linear-gradient(#f8fafc 1px,transparent 1px);
  background-size:20px 20px;overflow:auto;min-height:340px}
#wf-edges{position:absolute;inset:0;pointer-events:none}
.wf-edge{fill:none;stroke:#94a3b8;stroke-width:2}
.wf-edge-label{font-size:11px;fill:#dc2626}
.wf-node{position:absolute;width:150px;background:#fff;border:1.5px solid var(--line);border-radius:10px;
  padding:8px 10px 6px;cursor:grab;user-select:none;box-shadow:0 2px 8px rgba(15,23,42,.06)}
.wf-node.sel{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.wf-node i{display:block;width:26px;height:4px;border-radius:2px;margin-bottom:5px}
.wf-node b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-node small{color:var(--ink2);font-size:11px}
.flow-side{width:280px;flex:none;border:1px solid var(--line);border-radius:12px;padding:12px;overflow:auto;background:#fff}
.f-lab{display:block;font-size:12px;color:var(--ink2);margin-bottom:8px}
.f-lab input,.f-lab textarea{width:100%;margin-top:3px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit}
.edge-row{font-size:12px;color:var(--ink2);display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dashed var(--line)}
.edge-row b{cursor:pointer;color:#dc2626}
.runs-card{margin-top:12px}
.st{font-size:12px;padding:2px 8px;border-radius:10px}
.st.run{background:#eff6ff;color:#2563eb}.st.ok{background:#f0fdf4;color:#16a34a}
.st.bad{background:#fef2f2;color:#dc2626}.st.rev{background:#fdf2f8;color:#db2777}

/* ===== 附件/导出/流式 ===== */
.att{display:inline-flex;align-items:center;gap:5px;background:#f1f5f9;border-radius:10px;padding:2px 8px;font-size:12px;margin-left:6px}
.att b{cursor:pointer;color:#94a3b8}
.att b:hover{color:#dc2626}
.exports{margin-left:auto;display:inline-flex;gap:6px}
.exports button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:2px 10px;font-size:12px;cursor:pointer;color:var(--ink2)}
.exports button:hover{border-color:var(--brand);color:var(--brand)}
.pend-note{color:var(--ink2);font-size:13px;margin-left:8px}
.logo-view{height:30px;display:none;border-radius:6px;vertical-align:middle}
#side-logo img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.meta{display:flex;align-items:center;gap:10px}

/* ===== 用量与成本 ===== */
.usage-card .stat-row{flex-wrap:wrap}
.usage-chart{margin:10px 0 6px}
.chart-head{font-size:13px;color:var(--ink2);margin-bottom:4px}
#usage-line svg .grid{stroke:#eef2f7;stroke-width:1}
#usage-line svg .gax{fill:#94a3b8;font-size:10px}
#usage-line svg .area{fill:rgba(37,99,235,.10)}
#usage-line svg .lineln{fill:none;stroke:var(--brand);stroke-width:2}
#usage-line svg .dot{fill:var(--brand)}
.usage-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px}
.usage-cols h4{font-size:13px;margin-bottom:4px;color:var(--ink)}
.budget-box{margin-top:14px;padding:12px;border:1px dashed var(--line);border-radius:10px;background:#fbfdff}
.budget-box>b{font-size:13px;display:block;margin-bottom:8px}
@media(max-width:820px){.usage-cols{grid-template-columns:1fr}}

/* 回答后的建议追问(如「查看更多新品」) */
.sugs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.sug{background:#fff;border:1px solid var(--brand,#2F6F5E);color:var(--brand,#2F6F5E);
     border-radius:16px;padding:6px 14px;font-size:13px;cursor:pointer;font-family:inherit;line-height:1.4}
.sug:hover{background:var(--brand,#2F6F5E);color:#fff}

/* 参考来源图片放大 */
.src-imgs img{cursor:zoom-in;transition:transform .12s}
.src-imgs img:hover{transform:scale(1.06)}
#lightbox{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.86);
  display:flex;align-items:center;justify-content:center}
#lightbox.hidden{display:none!important}
#lb-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:6px;
  box-shadow:0 10px 50px rgba(0,0,0,.55);background:#fff}
#lb-close{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;
  font-size:38px;line-height:1;cursor:pointer;opacity:.85;padding:4px 10px}
#lb-close:hover{opacity:1}
#lb-prev,#lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);
  border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer;padding:14px 18px;border-radius:10px}
#lb-prev{left:22px}#lb-next{right:22px}
#lb-prev:hover,#lb-next:hover{background:rgba(255,255,255,.28)}
#lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:13px;opacity:.8;letter-spacing:.5px}
@media(max-width:640px){#lb-prev,#lb-next{padding:10px 12px;font-size:26px}
  #lb-prev{left:8px}#lb-next{right:8px}}


/* 工作流运行进度条 —— 一次跑 1~4 分钟, 没有可见的进度用户会以为卡死 */
.run-prog{margin:0 0 12px}
.run-prog-bar{height:6px;border-radius:4px;background:#e8ecef;overflow:hidden}
.run-prog-bar>i{display:block;height:100%;background:var(--brand,#0e7c66);
  transition:width .45s ease;animation:runpulse 1.6s ease-in-out infinite}
@keyframes runpulse{0%,100%{opacity:1}50%{opacity:.55}}
.run-prog-txt{margin-top:6px;font-size:13px;font-weight:600}
.run-prog-hint{margin-top:4px;font-size:12px;color:var(--ink2,#6b7780);line-height:1.6}
.run-log{max-height:260px;overflow:auto}

/* 验证码一行: 输入框 + 获取按钮 */
.code-row{display:flex;gap:8px;align-items:stretch}
.code-row input{flex:1;min-width:0}
.code-row .btn{white-space:nowrap;flex:0 0 auto}
.code-row .btn:disabled{opacity:.55;cursor:not-allowed}

/* 工作流使用说明 */
.flow-help{margin:0 0 12px;border:1px solid var(--line,#e3e8ea);border-radius:10px;background:#fbfcfc}
.flow-help>summary{cursor:pointer;padding:10px 14px;font-weight:600;font-size:14px;list-style:none}
.flow-help>summary::-webkit-details-marker{display:none}
.flow-help>summary::before{content:"▸ ";color:var(--ink2,#6b7780)}
.flow-help[open]>summary::before{content:"▾ "}
.fh-body{padding:0 14px 14px;font-size:13px;line-height:1.75;color:var(--ink,#243)}
.fh-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.fh-cols{grid-template-columns:1fr}}
.fh-body h4{margin:8px 0 6px;font-size:13px}
.fh-body ol,.fh-body ul{margin:0;padding-left:20px}
.fh-body li{margin:3px 0}
.fh-nodes{list-style:none;padding-left:0}
.fh-nodes li{padding-left:0}
.fh-tip{margin:8px 0 0;color:var(--ink2,#6b7780)}
.fh-q{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line,#e3e8ea)}
.fh-q p{margin:0 0 10px}
.fh-cur{margin-top:12px;padding:10px 12px;background:#eef5f3;border-radius:8px}
.fh-cur h4{margin:0 0 4px}
.fh-cur p{margin:2px 0}
.fh-cur code{background:#fff;padding:1px 6px;border-radius:4px;font-size:12px}

/* 登录卡片: 四个面板叠在同一格, 容器高度恒等于最高的那个 —— 切页签不再跳动。
   隐藏用 visibility 而不是 display, 否则 grid 会塌回当前面板的高度。
   只作用于直接子元素(>), 表单内部的 .hidden(如验证码行)仍走正常的 display:none。 */
.gate-forms{display:grid}
.gate-forms>*{grid-area:1/1;align-self:start}   /* start 不可省: 默认 stretch 会把矮面板的行拉开, 输入框和按钮跟着变形 */
.gate-forms>.hidden{display:grid!important;visibility:hidden;pointer-events:none}
.req{color:#c0392b;margin-left:2px;font-weight:700}
/* 标签文字与必填星号同行(.form label 是 grid, 不包起来星号会自己占一行) */
.form label>.lb{display:block}
/* 字段级说明: 跟在标签后面, 比标签更淡更小。写成 inline 而不是独立一行 ——
   .form label 是 grid, 单独成块会多占一行 gap, 把整张卡撑高。
   卡片窄时会自然折到下一行, 不会把输入框挤变形。 */
.form label .tip{font-style:normal;font-size:11px;color:var(--ink2);
  opacity:.85;margin-left:6px;font-weight:400}

/* 手机端侧栏唤出。桌面端整套隐藏, 不动原有布局 */
#side-toggle{display:none}
#side-mask{display:none}
@media(max-width:820px){
  #side-toggle{display:flex;position:fixed;left:10px;top:10px;z-index:30;
    width:38px;height:38px;align-items:center;justify-content:center;
    border:1px solid var(--line,#e3e8ea);border-radius:9px;background:#fff;
    font-size:17px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.08)}
  #side-mask{display:block;position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.35)}
  #side-mask.hidden{display:none}
  /* 给汉堡让位, 否则它压在聊天区第一行上 */
  .main{padding-top:52px}
}