/* ============================================================
   挚谱融通 · 工作台子页样式（2026-10-25）
   与 workbench.html 同一视觉语言：山景底、纸张层、衬线标题、
   等宽小标签、赭红强调。只给工作台内新页面使用。
   ============================================================ */
:root{
  --ink:#1b1f1d; --ink2:#3d423e; --muted:#6f746e; --faint:#9a9e97;
  --paper:#faf8f2; --paper2:#f3efe6;
  --line:rgba(27,31,29,.15); --line-soft:rgba(27,31,29,.08);
  --accent:#b8422c; --accent-soft:rgba(184,66,44,.13);
  --ok:#3f7d58; --warn:#9a6b1f; --bad:#8b3a3a;
  --serif:'Noto Serif SC','Songti SC','STSong',Georgia,serif;
  --sans:'PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--sans);color:var(--ink);background:#7e8b8d;
  background-image:linear-gradient(180deg,rgba(18,26,27,.58),rgba(18,26,27,.22) 42%,rgba(247,244,236,.78) 88%),
                   url("wb/alps-lake.jpg");
  background-size:cover;background-position:center top;background-attachment:fixed;
  -webkit-font-smoothing:antialiased;line-height:1.7;
}
a{color:inherit}
button,input,textarea,select{font-family:inherit}
.hidden{display:none!important}

/* ---------- 顶栏 ---------- */
.top{position:fixed;left:0;right:0;top:0;z-index:40;transition:background .25s,box-shadow .25s;
  background:linear-gradient(180deg,rgba(12,18,19,.56),rgba(12,18,19,0));}
.top.scrolled{background:rgba(18,24,25,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.top-in{max-width:1180px;margin:0 auto;height:62px;padding:0 22px;display:flex;align-items:center;gap:20px;color:#f3f0e7}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.monogram{width:32px;height:32px;border:1px solid rgba(243,240,231,.55);border-radius:3px;display:grid;place-items:center;
  font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:1px;background:rgba(0,0,0,.12)}
.brand b{display:block;font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:2.5px;line-height:1.1}
.brand span{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:2.2px;color:rgba(243,240,231,.62);margin-top:2px}
.crumb{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;color:rgba(243,240,231,.55);white-space:nowrap}
.top-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.tlink{font-size:11.5px;color:rgba(243,240,231,.78);text-decoration:none;white-space:nowrap}
.tlink:hover{color:#fff}
.pts{font-family:var(--mono);font-size:11px;letter-spacing:.8px;display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.pts em{font-style:normal;font-size:8px;letter-spacing:1.6px;color:rgba(243,240,231,.55)}
.pts b{font-size:13px;font-weight:600}
.bell{position:relative;width:30px;height:30px;border:1px solid transparent;background:transparent;color:#f3f0e7;
  border-radius:50%;display:grid;place-items:center;cursor:pointer;text-decoration:none}
.bell:hover{background:rgba(255,255,255,.10)}
.bell i{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--accent);border:1px solid #202626;display:none}
.bell i.on{display:block}
.ava{width:30px;height:30px;border-radius:50%;border:1px solid rgba(243,240,231,.55);background:rgba(20,26,27,.55);
  color:#f3f0e7;font-family:var(--serif);font-size:13px;display:grid;place-items:center;cursor:pointer}
.ava-wrap{position:relative}
.ava-menu{position:absolute;right:0;top:40px;min-width:172px;background:var(--paper);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 18px 44px rgba(10,16,17,.25);padding:6px;display:none;color:var(--ink)}
.ava-menu.on{display:block}
.ava-menu a,.ava-menu button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:transparent;
  font-size:12.5px;color:var(--ink2);text-decoration:none;border-radius:6px;cursor:pointer}
.ava-menu a:hover,.ava-menu button:hover{background:var(--accent-soft);color:var(--accent)}
.ava-menu .sep{height:1px;background:var(--line-soft);margin:5px 4px}

/* ---------- 纸张主区 ---------- */
.sheet{max-width:1180px;margin:96px auto 48px;background:rgba(250,248,242,.95);
  border:1px solid rgba(255,255,255,.55);border-radius:18px;
  box-shadow:0 30px 80px rgba(10,18,20,.28);backdrop-filter:blur(14px);overflow:hidden;
  min-height:calc(100vh - 150px)}
.sheet.narrow{max-width:880px}
.pad{padding:30px 34px 38px}
.pg-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.pg-head .eyebrow{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--faint);display:block;margin-bottom:6px}
.pg-head h1{font-family:var(--serif);font-size:32px;font-weight:600;letter-spacing:2px;margin:0;line-height:1.2}
.pg-head p{margin:6px 0 0;font-size:12.5px;color:var(--muted);max-width:640px}
.pg-head .acts{margin-left:auto;display:flex;gap:8px;align-items:center}

/* ---------- 控件 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 18px;
  border:1px solid var(--line);background:rgba(255,255,255,.5);color:var(--ink);font-size:12.5px;
  border-radius:4px;cursor:pointer;text-decoration:none;transition:.18s;white-space:nowrap}
.btn:hover{border-color:var(--ink);background:#fff}
.btn.primary{background:var(--ink);border-color:var(--ink);color:#f7f3e9}
.btn.primary:hover{background:var(--accent);border-color:var(--accent)}
.btn.small{height:30px;padding:0 12px;font-size:11px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.input{width:100%;height:40px;border:1px solid var(--line);background:#fff;padding:0 12px;font-size:13px;
  color:var(--ink);outline:none;border-radius:4px;transition:.18s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.input{height:auto;min-height:100px;padding:10px 12px;line-height:1.7;resize:vertical}
.label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:1.4px;color:var(--muted);margin:14px 0 6px}
.err{display:none;background:#fdecec;border:1px solid #f0c4c4;color:#8b3a3a;border-radius:6px;padding:8px 12px;font-size:12px;margin-top:12px}
.err.on{display:block}

/* ---------- 统计 / 卡片 ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.34);margin-top:20px;overflow:hidden}
.cell{padding:16px 18px;border-right:1px solid var(--line-soft);min-width:0}
.cell:last-child{border-right:0}
.cell .lb{font-family:var(--mono);font-size:8.5px;letter-spacing:1.5px;color:var(--faint);white-space:nowrap}
.cell .v{font-family:var(--serif);font-size:27px;letter-spacing:.5px;margin:6px 0 2px;line-height:1.1}
.cell .v small{font-family:var(--sans);font-size:11px;color:var(--muted);margin-left:3px;letter-spacing:0}
.cell .s{font-size:10.5px;color:var(--muted)}
.card{background:rgba(255,255,255,.42);border:1px solid var(--line);border-radius:12px;padding:20px 22px;min-width:0}
.card h3{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:1px;margin:0 0 4px}
.card .sub{font-family:var(--mono);font-size:8.5px;letter-spacing:1.4px;color:var(--faint)}
.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;margin-top:22px;align-items:start}
.stack{display:flex;flex-direction:column;gap:18px}

/* ---------- 表格 ---------- */
.tbl{overflow:auto;max-width:100%;margin-top:8px}
table{width:100%;min-width:560px;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-family:var(--mono);font-size:8.5px;font-weight:400;letter-spacing:1.4px;color:var(--faint);
  padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(184,66,44,.035)}
.mono{font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap}
.big{font-size:13px;font-weight:600}
.pos{color:var(--ok)}
.neg{color:var(--bad)}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;white-space:nowrap}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.tag.run{color:var(--accent)} .tag.done{color:var(--ok)} .tag.bad{color:var(--bad)} .tag.wait{color:var(--warn)}
.empty{padding:46px 18px;text-align:center;color:var(--faint);font-size:12.5px;line-height:2}
.empty a{color:var(--accent)}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-family:var(--mono);font-size:9.5px;color:var(--faint)}

/* ---------- 通知列表 ---------- */
.nlist{display:flex;flex-direction:column;margin-top:8px}
.nitem{display:flex;gap:14px;padding:16px 4px;border-bottom:1px solid var(--line-soft);text-decoration:none;position:relative}
.nitem:hover{background:rgba(184,66,44,.035)}
.nitem .dot{width:6px;height:6px;border-radius:50%;background:var(--line);margin-top:7px;flex:none}
.nitem.unread .dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.nitem .body{min-width:0;flex:1}
.nitem .body b{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:2px}
.nitem .body p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.65}
.nitem time{font-family:var(--mono);font-size:8.5px;color:var(--faint);white-space:nowrap;padding-top:3px}
.unreadbar{display:flex;align-items:center;gap:10px;padding:12px 0 2px;font-size:11.5px;color:var(--muted)}
.unreadbar b{color:var(--accent)}

/* ---------- 工单 ---------- */
.tk-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin-top:18px;min-height:460px;background:rgba(255,255,255,.26)}
.tk-list{border-right:1px solid var(--line-soft);max-height:620px;overflow:auto;background:rgba(243,239,230,.5)}
.tk-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line-soft);background:transparent;
  padding:14px 16px;cursor:pointer;font:inherit}
.tk-item:hover{background:rgba(255,255,255,.6)}
.tk-item.on{background:var(--paper);box-shadow:inset 3px 0 0 var(--accent)}
.tk-item b{display:block;font-size:12.5px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-item span{font-family:var(--mono);font-size:8.5px;color:var(--faint);letter-spacing:.6px}
.tk-main{display:flex;flex-direction:column;min-width:0}
.tk-head{padding:16px 20px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:10px}
.tk-head h3{font-family:var(--serif);font-size:16px;margin:0;font-weight:600;letter-spacing:.8px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-head .meta{font-family:var(--mono);font-size:8.5px;color:var(--faint);margin-left:auto;white-space:nowrap}
.tk-thread{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px;max-height:430px}
.msg{max-width:82%;padding:10px 13px;border-radius:10px;font-size:12.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:var(--ink);color:#f7f3e9;border-bottom-right-radius:3px}
.msg.staff{align-self:flex-start;background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:3px}
.msg time{display:block;font-family:var(--mono);font-size:8px;opacity:.55;margin-top:4px;letter-spacing:.5px}
.tk-reply{padding:12px 16px;border-top:1px solid var(--line-soft);display:flex;gap:8px;align-items:flex-end;background:rgba(255,255,255,.3)}
.tk-reply textarea{flex:1;min-height:44px;max-height:120px}
.tk-empty{flex:1;display:grid;place-items:center;color:var(--faint);font-size:12.5px;text-align:center;padding:30px}

/* ---------- 对话 ---------- */
.chat-box{display:flex;flex-direction:column;height:calc(100vh - 250px);min-height:480px;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-top:18px;background:rgba(255,255,255,.35)}
.chat-head{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line-soft);background:rgba(243,239,230,.55)}
.chat-head .st{font-family:var(--mono);font-size:8.5px;color:var(--faint);letter-spacing:1px;margin-left:auto}
.chat-log{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.bub{max-width:76%;padding:11px 14px;border-radius:12px;font-size:13px;line-height:1.75;white-space:pre-wrap;word-break:break-word}
.bub.me{align-self:flex-end;background:var(--ink);color:#f7f3e9;border-bottom-right-radius:3px}
.bub.ai{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px}
.bub .who{display:block;font-family:var(--mono);font-size:8px;letter-spacing:1.2px;opacity:.5;margin-bottom:4px}
.chat-in{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line-soft);background:rgba(255,255,255,.45);align-items:flex-end}
.chat-in textarea{flex:1;min-height:44px;max-height:140px}
.chat-tip{font-size:10.5px;color:var(--faint);margin-top:8px;line-height:1.7}

/* ---------- AIGC 自查 ---------- */
.gauge{display:flex;align-items:center;gap:22px;padding:20px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.4)}
.gauge .num{font-family:var(--serif);font-size:56px;line-height:1;letter-spacing:1px;min-width:120px;text-align:center}
.gauge .num small{font-family:var(--mono);font-size:10px;color:var(--faint);display:block;letter-spacing:2px;margin-top:6px}
.gauge .bar{flex:1;height:8px;background:rgba(27,31,29,.10);border-radius:99px;overflow:hidden}
.gauge .bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .5s,background .5s}
.gauge .txt{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.7}
.checks{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.check{display:flex;gap:10px;font-size:12px;line-height:1.65;color:var(--ink2);padding:10px 12px;border:1px solid var(--line-soft);border-radius:8px;background:rgba(255,255,255,.32)}
.check b{color:var(--ink);font-weight:600}
.check .ic{font-family:var(--mono);font-size:10px;color:var(--accent);flex:none;padding-top:1px}

/* ---------- 弹层 / toast ---------- */
.mask{position:fixed;inset:0;background:rgba(15,22,23,.48);z-index:70;display:none;align-items:center;justify-content:center;padding:20px}
.mask.on{display:flex}
.modal{width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 30px 80px rgba(10,16,17,.34);overflow:hidden}
.modal-head{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.modal-head h3{font-family:var(--serif);font-size:18px;margin:0;letter-spacing:1px}
.modal-head button{margin-left:auto;width:30px;height:30px;border:0;background:transparent;font-size:20px;cursor:pointer;color:var(--faint)}
.modal-head button:hover{color:var(--accent)}
.modal-body{padding:18px 20px 20px;overflow:auto}
.modal-foot{padding:0 20px 18px;display:flex;gap:8px;justify-content:flex-end}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(12px);background:rgba(20,26,27,.94);
  color:#f3efe5;padding:10px 18px;border-radius:99px;font-size:12.5px;z-index:90;opacity:0;pointer-events:none;
  transition:.22s;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.foot{padding:18px 34px 26px;border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:8.5px;
  letter-spacing:1.4px;color:var(--faint);display:flex;gap:12px;align-items:center}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr}
  .cell:nth-child(2){border-right:0}
  .cell:nth-child(1),.cell:nth-child(2){border-bottom:1px solid var(--line-soft)}
  .tk-layout{grid-template-columns:1fr}
  .tk-list{border-right:0;border-bottom:1px solid var(--line-soft);max-height:240px}
  .tk-thread{max-height:360px}
}
@media(max-width:640px){
  .top-in{height:58px;padding:0 14px;gap:10px}
  .crumb,.tlink{display:none}
  .brand b{font-size:14px}.brand span{display:none}
  .sheet{margin:78px 12px 30px;border-radius:14px;min-height:calc(100vh - 110px)}
  .pad{padding:22px 18px 28px}
  .pg-head h1{font-size:26px;letter-spacing:1.4px}
  .pg-head .acts{margin-left:0;width:100%}
  .metrics{grid-template-columns:1fr 1fr}
  .cell{padding:12px}
  .cell .v{font-size:22px}
  .gauge{flex-direction:column;align-items:flex-start}
  .gauge .num{text-align:left}
  .foot{padding:14px 18px 20px}
  .tk-thread{max-height:320px}
}
