/* ============================================================================
   商业智能体服务平台 · 设计系统 ds.css
   ---------------------------------------------------------------------------
   这是全站唯一的事实源。任何页面都不要再内联自己的 :root 与按钮样式
   （历史问题：14 个页面各抄一份 CSS，圆角 9 档、栅格 7 档、按钮 4 套）。

   基调：浅色 / 大留白 / 圆角（对齐豆包 · DeepSeek）
   规则：
     1. 令牌只在本文件定义，页面只用 var()
     2. 圆角 4 档：6 / 10 / 14 / 20（+ pill 9999）
     3. 栅格 2 档：800（主）/ 640（窄）
     4. 一个页面只允许一个主按钮 .btn-primary
   ============================================================================ */

:root{
  /* ---- 底色与层次 ---- */
  --bg:#fcfcfc;
  --bg-2:#f7f7f8;
  --card:#ffffff;
  --hover:rgba(0,0,0,.04);
  --active:rgba(0,0,0,.07);

  /* ---- 文字（纯黑 + 三级透明度，比堆灰色更有层次） ---- */
  --ink:#0d0d0d;
  --ink-2:rgba(0,0,0,.72);
  --ink-3:rgba(0,0,0,.5);
  --ink-4:rgba(0,0,0,.35);
  --ink-5:rgba(0,0,0,.22);

  /* ---- 描边 ---- */
  --line:rgba(0,0,0,.08);
  --line-2:rgba(0,0,0,.13);

  /* ---- 强调色：只用于链接与状态，不做按钮底色 ---- */
  --blue:#06f;
  --blue-soft:rgba(0,102,255,.08);
  --blue-ring:rgba(0,102,255,.16);

  /* ---- 主按钮：近黑（不是蓝） ---- */
  --dark:#1f2225;

  /* ---- 状态色 ---- */
  --err:#d93f3f;    --err-bg:rgba(217,63,63,.07);
  --warn:#a8741a;   --warn-bg:rgba(168,116,26,.09);
  --ok:#17915a;     --ok-bg:rgba(23,145,90,.08);

  /* ---- 圆角 4 档 ---- */
  --r-sm:6px;
  --r:10px;
  --r-lg:14px;
  --r-xl:20px;

  /* ---- 阴影 ---- */
  --sh-1:0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(0,0,0,.03);
  --sh-2:0 2px 4px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.06);
  --sh-3:0 4px 12px rgba(0,0,0,.05),0 20px 50px rgba(0,0,0,.1);

  /* ---- 字体 ---- */
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --fc:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ---- 动效 ---- */
  --t:.18s cubic-bezier(.4,0,.2,1);

  /* ---- 栅格 ---- */
  --w:800px;
  --w-narrow:640px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg); color:var(--ink); font-family:var(--ff);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit;}
code,pre,.mono{font-family:var(--fc);}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px;}
.sp{flex:1;}
.hidden{display:none !important;}

/* ============================ 骨架 ============================ */
.app{display:flex; height:100vh;}
.side{
  width:0; flex:none; background:var(--bg-2); border-right:1px solid var(--line);
  overflow:hidden; transition:width .22s cubic-bezier(.4,0,.2,1);
}
.side .inner{width:232px; height:100%; display:flex; flex-direction:column; padding:12px 10px;}
.app.has-side .side{width:232px;}
.app.has-side.rail .side{width:60px;}
.app.has-side.rail .side .inner{width:36px;}
.app.has-side.rail .hide-rail{display:none;}
.app.has-side.rail .nav,
.app.has-side.rail .newbtn{justify-content:center; padding:0;}
.app.has-side.rail .railbtn{display:grid;}
.work{flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden;}

/* 侧栏 */
.side-top{display:flex; align-items:center; gap:9px; padding:2px 6px 12px;}
.mk{width:26px; height:26px; border-radius:8px; background:var(--dark); color:#fff; font-size:12px;
  font-weight:700; display:grid; place-items:center; flex:none;}
.brand{font-size:13.5px; font-weight:600; white-space:nowrap;}
/* 图片型 logo（与站点图标同一文件）：沿用 .mk 的尺寸与圆角，去掉字母样式的影响 */
img.mk{display:block; object-fit:contain; background:0 0;}
/* 侧栏与顶栏的标语 */
.tag{font-size:11px; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tagline{font-size:12.5px; color:var(--ink-4); white-space:nowrap; margin-left:2px;}
.fold{margin-left:auto; width:26px; height:26px; border:0; background:0 0; color:var(--ink-4);
  border-radius:7px; cursor:pointer; display:grid; place-items:center; font-size:14px; flex:none; transition:var(--t);}
.fold:hover{background:var(--hover); color:var(--ink-2);}
.railbtn{display:none; width:30px; height:30px; margin:0 auto; border:1px solid var(--line-2);
  background:var(--card); border-radius:9px; color:var(--ink-3); cursor:pointer; place-items:center; font-size:14px;}
.railbtn:hover{background:var(--hover); color:var(--ink);}
.newbtn{display:flex; align-items:center; gap:9px; height:38px; padding:0 11px; margin-bottom:14px;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--card); color:var(--ink);
  font-size:13.5px; font-weight:500; cursor:pointer; transition:var(--t); white-space:nowrap;}
.newbtn:hover{background:var(--hover); box-shadow:var(--sh-1);}
.nav{display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:var(--r);
  color:var(--ink-2); font-size:13.5px; cursor:pointer; border:0; background:0 0; text-align:left;
  width:100%; transition:var(--t); white-space:nowrap;}
.nav:hover{background:var(--hover); color:var(--ink);}
.nav.on{background:var(--active); color:var(--ink); font-weight:500;}
.nav .ic{width:16px; text-align:center; opacity:.62; font-size:14px; flex:none;}
.gp{font-size:11.5px; color:var(--ink-4); padding:16px 10px 6px; font-weight:500; white-space:nowrap;}
.hist{display:flex; flex-direction:column; gap:1px; overflow-y:auto; flex:1; min-height:0;}
.hist a{display:block; padding:7px 10px; border-radius:var(--r); color:var(--ink-3); font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:var(--t);}
.hist a:hover{background:var(--hover); color:var(--ink-2); text-decoration:none;}
.side-bot{margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}

/* 顶栏 */
.head{height:52px; flex:none; display:flex; align-items:center; gap:10px; padding:0 22px;
  border-bottom:1px solid var(--line); background:rgba(252,252,252,.88); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .2s;}
.app.has-side .head{opacity:1; pointer-events:auto;}
.head .ti{font-size:14px; font-weight:600;}

/* 主滚动区 */
.scroll{flex:1; overflow-y:auto;}
.col{max-width:var(--w); margin:0 auto; padding:0 24px;}

/* ============================ 空态 ============================ */
.hero{padding-top:15vh; text-align:center;}
.hero h1{font-size:27px; line-height:1.38; font-weight:600; margin:0 0 8px; letter-spacing:-.02em;}
.hero p{font-size:14.5px; color:var(--ink-3); margin:0;}
.app.has-side .hero{display:none;}

/* ============================ 输入卡 ============================ */
.composer{
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:var(--sh-2); text-align:left; overflow:hidden; transition:var(--t);
}
.composer:focus-within{border-color:rgba(0,0,0,.2);}
.hero .composer{margin-top:26px;}
.composer textarea{
  width:100%; border:0; outline:none; resize:none; padding:15px 18px 0;
  font-family:inherit; font-size:15.5px; line-height:1.65; color:var(--ink);
  background:0 0; min-height:56px; display:block;
}
.composer textarea::placeholder{color:var(--ink-5);}
.att{display:flex; gap:8px; flex-wrap:wrap; padding:0 18px;}
.fchip{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 9px 0 11px;
  border-radius:8px; background:var(--bg-2); border:1px solid var(--line);
  font-size:12.5px; color:var(--ink-2);}
.fchip .x{cursor:pointer; color:var(--ink-4); line-height:1; font-size:13px;}
.fchip .x:hover{color:var(--err);}
.cbar{display:flex; align-items:center; gap:8px; padding:11px 14px 13px; position:relative;}
.addbtn{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px; border-radius:999px;
  border:1px solid var(--line-2); background:0 0; color:var(--ink-3); font-size:13px;
  cursor:pointer; transition:var(--t);}
.addbtn:hover{background:var(--hover); color:var(--ink-2);}

/* 技能胶囊 */
.filters{display:flex; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:16px;}
.sk{height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--line-2); background:0 0;
  color:var(--ink-3); font-size:12.5px; cursor:pointer; transition:var(--t); white-space:nowrap;}
.sk:hover{background:var(--hover); color:var(--ink-2);}
.sk.on{background:var(--dark); border-color:var(--dark); color:#fff; font-weight:500;}
.filters .sk{height:32px; padding:0 14px; font-size:13px;}

/* ============================ 大模型选择器 ============================ */
.mpick{position:relative;}
.mbtn{display:inline-flex; align-items:center; gap:7px; height:36px; max-width:190px; padding:0 11px;
  border-radius:999px; border:1px solid var(--line-2); background:0 0; color:var(--ink-2);
  font-size:13px; cursor:pointer; transition:var(--t);}
.mbtn:hover{background:var(--hover); border-color:rgba(0,0,0,.2);}
.mbtn .mdot{width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none;}
.mbtn .mdot.off{background:var(--ink-5);}
.mbtn .mnm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mbtn .car{font-size:10px; color:var(--ink-4); flex:none;}
.menu{position:absolute; bottom:calc(100% + 8px); left:0; min-width:240px; background:var(--card);
  border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  padding:6px; display:none; z-index:60; max-height:60vh; overflow-y:auto;}
/* 默认向上弹；上方空间不够时 JS 会加 .down 改为向下弹。
   不加这个的话：菜单顶部会跑到视口外，最上面几项**永久点不到**
   —— 实测「开始」旁边的模型选择器出现 y=-101，DeepSeek 正好是被裁掉的第一项。 */
.menu.down{bottom:auto; top:calc(100% + 8px);}
/* 打开时菜单会被搬到 body 下（见 app.js portalMenu）：
   祖先里有 overflow:hidden（.composer / .work），留在原地超出盒子就会被**裁掉**，
   布局矩形看着在视口内、画面上却什么都没有。fixed + 视口坐标彻底绕开裁剪。
   z-index 取 400：高于侧栏(300)、低于弹层遮罩(500)，弹层打开时仍能盖住菜单。 */
.menu.portal{position:fixed; top:0; left:0; right:auto; bottom:auto; z-index:400;}
.menu.on{display:block;}
.menu .mi{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:var(--r);
  font-size:13.5px; color:var(--ink-2); cursor:pointer; transition:var(--t);}
.menu .mi:hover{background:var(--bg-2);}
.menu .mi.sel{color:var(--ink); font-weight:500;}
.menu .mi .ck{margin-left:auto; color:var(--blue); font-size:13px;}
.menu .mi .sub{font-size:11.5px; color:var(--ink-4); font-family:var(--fc);}
.menu .mi .col2{display:flex; flex-direction:column; gap:1px; min-width:0;}
.menu .msep{height:1px; background:var(--line); margin:5px 4px;}
.menu .mi.add{color:var(--blue);}
.menu .mi.dis{color:var(--ink-4); cursor:default;}

/* ============================ 按钮 ============================ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:36px;
  padding:0 18px; border-radius:999px; border:0; background:var(--hover); color:var(--ink);
  font-size:14px; font-weight:500; cursor:pointer; transition:var(--t); white-space:nowrap;}
.btn:hover:not(:disabled){background:var(--active);}
.btn-primary{background:var(--dark); color:#fff;}
.btn-primary:hover:not(:disabled){background:#000;}
.btn-outline{background:var(--card); border:1px solid var(--line-2); font-weight:400;}
.btn-outline:hover:not(:disabled){background:var(--hover);}
.btn-ghost{background:0 0; color:var(--ink-3); font-weight:400;}
.btn-ghost:hover:not(:disabled){background:var(--hover); color:var(--ink);}
.btn-sm{height:30px; padding:0 13px; font-size:12.5px;}
.btn-lg{height:44px; font-size:15px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.35; cursor:not-allowed;}

/* ============================ 对话流 ============================ */
.thread{padding-top:24px;}
.turn{padding-bottom:26px;}
.msg{display:flex; gap:11px; align-items:flex-start;}
.msg .av{width:26px; height:26px; border-radius:50%; background:var(--active); flex:none;
  display:grid; place-items:center; font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:1px;}
.msg .av.ai{background:var(--dark); color:#fff;}
.msg .body{flex:1; min-width:0;}
.msg .txt{font-size:15.5px; font-weight:500; line-height:1.6;}
.meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}

/* 过程内容（对齐 DSH：可折叠 + 每步状态与用时） */
.proc{margin-top:12px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden;}
.proc .ph{display:flex; align-items:center; gap:8px; padding:10px 13px; cursor:pointer;
  user-select:none; transition:var(--t);}
.proc .ph:hover{background:var(--bg-2);}
.proc .ph .ic{font-size:13px; color:var(--ink-4); flex:none;}
.proc .ph .tt{font-size:13px; color:var(--ink-2); font-weight:500;}
.proc .ph .st{font-size:12px; color:var(--ink-4); font-family:var(--fc);}
.proc .ph .cv{margin-left:auto; font-size:11px; color:var(--ink-4); transition:transform var(--t);}
.proc.open .ph .cv{transform:rotate(180deg);}
.proc .pb{display:none; border-top:1px solid var(--line); padding:11px 13px;}
.proc.open .pb{display:block;}
.step{display:flex; align-items:center; gap:9px; padding:5px 0; font-size:13px; color:var(--ink-3);}
.step .d{width:14px; text-align:center; flex:none; font-size:12.5px;}
.step.done{color:var(--ink-2);} .step.done .d{color:var(--ok);}
.step.now{color:var(--ink); font-weight:500;}
.step.now .d{color:var(--blue); animation:ds-spin 1.1s linear infinite; display:inline-block;}
.step .ms{margin-left:auto; font-family:var(--fc); font-size:11.5px; color:var(--ink-4);}
@keyframes ds-spin{to{transform:rotate(360deg);}}
.bar{height:3px; border-radius:999px; background:var(--hover); overflow:hidden;}
.bar i{display:block; height:100%; background:var(--dark); transition:width .5s cubic-bezier(.4,0,.2,1);}

/* 回答与结果 */
.ans{margin-top:12px;}
.ans .lead{font-size:15px; line-height:1.8; color:var(--ink-2); margin:0 0 14px;}
.ans .lead b{color:var(--ink); font-weight:600;}
.ans p{font-size:14.5px; line-height:1.85; color:var(--ink-2); margin:0 0 12px;}
.ans p:last-child{margin-bottom:0;}
.ans p b{color:var(--ink); font-weight:600;}
.acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px;}

/* 标签 */
.tag{display:inline-flex; align-items:center; height:23px; padding:0 9px; border-radius:999px;
  font-size:12px; font-weight:500; background:var(--bg-2); color:var(--ink-3); white-space:nowrap;}
.tag-err{background:var(--err-bg); color:var(--err);}
.tag-warn{background:var(--warn-bg); color:var(--warn);}
.tag-ok{background:var(--ok-bg); color:var(--ok);}
.tag-blue{background:var(--blue-soft); color:var(--blue);}

/* 问题条目 */
.find{border:1px solid var(--line); border-radius:var(--r); padding:13px 14px;
  margin-bottom:9px; background:var(--card);}
.find:last-child{margin-bottom:0;}
.find.e{border-left:3px solid var(--err);}
.find.w{border-left:3px solid var(--warn);}
.find.p{border-left:3px solid var(--ok);}
.find .f1{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.find .f2{font-size:14px; font-weight:500;}
.find .fq{background:var(--bg-2); border-radius:var(--r-sm); padding:9px 11px; margin-top:9px;
  font-size:12.5px; line-height:1.75; color:var(--ink-2);}
.find .fq b{color:var(--ink); font-weight:600;}
.find .fq .pg{font-family:var(--fc); color:var(--ink-4); font-size:11.5px;}
.find .ff{font-size:12.5px; color:var(--ink-3); margin-top:7px; line-height:1.7;}
.find .ff b{color:var(--ink-2); font-weight:600;}

/* 付费 */
.pay{position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:9px;}
.pay .g{padding:13px; filter:blur(5px); opacity:.4; pointer-events:none; user-select:none;}
.pay .v{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:18px;
  background:linear-gradient(180deg,rgba(252,252,252,.5),rgba(252,252,252,.96));}
.pay .v .n1{font-size:14.5px; font-weight:600;}
.pay .v .n1 em{font-style:normal; color:var(--err);}
.pay .v .n2{font-size:12.5px; color:var(--ink-3); margin:4px 0 13px;}
.opts{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.opt{background:var(--card); border:1px solid var(--line-2); border-radius:var(--r);
  padding:11px 15px; min-width:152px; cursor:pointer; text-align:left; transition:var(--t);}
.opt:hover{border-color:rgba(0,0,0,.24); box-shadow:var(--sh-2); transform:translateY(-2px);}
.opt.hot{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-ring);}
.opt.lock{border-style:dashed;}
.opt .k{font-size:12px; color:var(--ink-3);}
.opt .m{font-size:19px; font-weight:600; margin-top:2px;}
.opt .d{font-size:11.5px; color:var(--ink-4); margin-top:2px;}
.opt .lk{font-size:11.5px; color:var(--ink-4); margin-top:4px;}

/* 底部常驻输入条 */
.rebar{flex:none; padding:8px 24px 14px; display:none;
  background:linear-gradient(180deg,rgba(252,252,252,0),var(--bg) 32%);}
.app.has-side .rebar{display:block;}
.rebar .col{padding:0;}
.rebar .composer{border-radius:var(--r-lg); box-shadow:var(--sh-1);}
.rebar textarea{min-height:0; padding:12px 16px 0; font-size:14.5px;}
.rebar .skills{display:flex; gap:6px; flex-wrap:wrap; padding:9px 14px 0;}

/* ============================ 弹层 ============================ */
.mask{position:fixed; inset:0; background:rgba(0,0,0,.32); backdrop-filter:blur(3px); z-index:500;
  display:none; align-items:center; justify-content:center; padding:20px;}
.mask.on{display:flex;}
.modal{background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-3); width:100%;
  max-width:440px; max-height:88vh; overflow:hidden; display:flex; flex-direction:column;}
.modal.wide{max-width:600px;}
.mh{display:flex; align-items:center; gap:10px; padding:18px 22px 14px;}
.mh .t{font-size:17px; font-weight:600;}
.mh .x{margin-left:auto; width:30px; height:30px; border:0; background:0 0; color:var(--ink-4);
  border-radius:8px; cursor:pointer; font-size:16px; display:grid; place-items:center;}
.mh .x:hover{background:var(--hover); color:var(--ink);}
.mb{padding:0 22px 22px; overflow-y:auto;}

/* 表单 */
.fld{margin-bottom:14px;}
.lbl{display:block; font-size:13px; color:var(--ink-3); margin-bottom:6px; font-weight:500;}
.inp{width:100%; height:44px; padding:0 13px; border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:var(--card); color:var(--ink); font-size:15px; font-family:inherit; transition:var(--t);}
.inp:hover{border-color:rgba(0,0,0,.2);}
.inp:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-ring);}
.inp.mono{font-family:var(--fc); font-size:13.5px;}
.row2{display:flex; gap:8px;}
.hint{font-size:12.5px; color:var(--ink-4); margin:6px 0 0; line-height:1.6;}
.tabs{display:flex; gap:4px; background:var(--bg-2); border-radius:999px; padding:4px; margin-bottom:18px;}
.tabs button{flex:1; height:34px; border:0; background:0 0; border-radius:999px; font-size:13.5px;
  color:var(--ink-3); cursor:pointer; transition:var(--t); font-weight:500;}
.tabs button.on{background:var(--card); color:var(--ink); box-shadow:var(--sh-1);}
.divider{display:flex; align-items:center; gap:12px; color:var(--ink-4); font-size:12px; margin:18px 0;}
.divider::before,.divider::after{content:""; height:1px; background:var(--line); flex:1;}
.third{display:flex; gap:8px;}
.third button{flex:1; height:42px; border:1px solid var(--line-2); background:var(--card);
  border-radius:var(--r); font-size:13px; color:var(--ink-2); cursor:pointer; transition:var(--t);
  display:flex; align-items:center; justify-content:center; gap:6px;}
.third button:hover{background:var(--hover);}
.code{display:flex; gap:8px;}
.code .inp{flex:1;}
.code button{height:44px; padding:0 14px; border:1px solid var(--line-2); background:var(--card);
  border-radius:var(--r-lg); font-size:13px; color:var(--ink-2); cursor:pointer; white-space:nowrap;}
.code button:hover{background:var(--hover);}
.code button:disabled{opacity:.45; cursor:not-allowed;}

/* 模型列表 */
.mrow{display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:8px; transition:var(--t);}
.mrow:hover{background:var(--bg-2);}
.mrow .dot{width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none;}
.mrow .dot.off{background:var(--ink-5);}
.mrow .mn{font-size:14px; font-weight:500;}
.mrow .mm{font-size:12px; color:var(--ink-4); font-family:var(--fc);}
.mrow .ma{margin-left:auto; display:flex; gap:2px;}
.prov{display:flex; gap:6px; flex-wrap:wrap;}
.prov button{height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line-2);
  background:0 0; font-size:12.5px; color:var(--ink-3); cursor:pointer; transition:var(--t);}
.prov button:hover{background:var(--hover);}
.prov button.on{background:var(--dark); border-color:var(--dark); color:#fff; font-weight:500;}
.mlist{border:1px solid var(--line); border-radius:var(--r); max-height:170px; overflow-y:auto; margin-top:8px;}
.mlist .mrow{border:0; border-bottom:1px solid var(--line); border-radius:0; margin:0;}
.mlist .mrow:last-child{border-bottom:0;}
.mlist label{display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;}
.mlist input{accent-color:var(--dark); width:16px; height:16px;}

/* 提示条 */
.notice{display:flex; gap:11px; align-items:flex-start; border-radius:var(--r); padding:12px 14px; margin-top:12px;}
.notice.warn{background:var(--warn-bg);}
.notice.info{background:var(--blue-soft);}
.notice .ic{flex:none; font-size:14px;}
.notice .tx{font-size:13px; line-height:1.7; color:var(--ink-2);}
.notice .tx b{font-weight:600; color:var(--ink);}

/* 能力库 */
.cap{border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; margin-bottom:10px;
  background:var(--card); transition:var(--t);}
.cap:hover{box-shadow:var(--sh-2);}
.cap .c1{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.cap .cn{font-size:15px; font-weight:600;}
.cap .cp{margin-left:auto; font-family:var(--fc); font-size:13px; color:var(--ink-3);}
.cap .cd{font-size:13px; color:var(--ink-3); margin-top:7px; line-height:1.7;}
.cap .cf{display:flex; gap:8px; margin-top:12px; align-items:center; flex-wrap:wrap;}

/* Toast */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(10px); z-index:600;
  background:var(--dark); color:#fff; font-size:13.5px; padding:10px 18px; border-radius:999px;
  opacity:0; pointer-events:none; transition:var(--t);}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============================ 窄屏 ============================ */
@media (max-width:720px){
  .app.has-side .side{position:fixed; left:0; top:0; bottom:0; z-index:300;
    box-shadow:0 0 40px rgba(0,0,0,.14);}
  .col{padding:0 16px;}
  .rebar{padding:8px 16px 12px;}
  .hero{padding-top:8vh;} .hero h1{font-size:21px;}
  .opts{flex-direction:column;} .opt{min-width:0; width:100%;}
  .hide-sm{display:none;}
  .modal{max-height:92vh;}
}

/* 动效降级 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}


/* ============================ 备案页脚（全站通用） ============================ */
.beian-sep{color:var(--ink-5);margin:0 2px;}
.beian-foot{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;
  font-size:12.5px;color:var(--ink-4);line-height:2;text-align:center;}
.beian-foot a{color:var(--ink-4);display:inline-flex;align-items:center;
  padding:6px 10px;min-height:26px;border-radius:8px;}
.beian-foot a:hover{color:var(--ink-2);background:var(--hover);}