/* ===== 服务日记 · 黑白灰＋绿主题（暗红仅作危险警示） ===== */
:root{
  --bg:#F1EDE2;
  --card:#FDFBF4;
  --ink:#161616;
  --soft:#6B6B6B;
  --line:#D9D9D6;
  --green:#1E7A3C;
  --green-soft:#E4F0E8;
  --red:#B3261E;
  --red-soft:#F7E8E6;
  --shadow:0 1px 4px rgba(0,0,0,.07);
  --radius:10px;
  --font:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
  font-size:var(--font);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
button:disabled{opacity:.45;cursor:not-allowed}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ===== 顶栏（白底黑字） ===== */
#topbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  background:var(--card);color:var(--ink);
  border-bottom:1px solid var(--line);
  padding:8px 12px;z-index:50;
}
.tb-left{display:flex;flex-direction:column;line-height:1.25}
.tb-title{font-weight:700;font-size:1.05em;letter-spacing:2px}
.tb-date{font-size:.78em;color:var(--soft)}
.tb-stats{display:flex;flex-wrap:wrap;gap:5px;flex:1;justify-content:center}
.stat{
  background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:1px 9px;font-size:.8em;white-space:nowrap;cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;color:var(--ink);
}
.stat b{font-weight:700}
.stat.hot{color:var(--red);border-color:var(--red);font-weight:700}
.stat.warn{color:#8A5A00}
.stat.good{color:var(--green)}
.tb-btns{grid-column:2;justify-self:center;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tb-btn{
  background:var(--bg);border:1px solid var(--line);
  color:var(--ink);border-radius:14px;padding:2px 10px;font-size:.82em;
}
.tb-btn:hover{border-color:var(--ink)}

/* ===== 布局 ===== */
#layout{flex:1;display:flex;min-height:0;max-width:1280px;width:100%;margin:0 auto;gap:10px;padding:10px}
#sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
#main{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0;overflow-y:auto}
#logPanel{width:250px;flex-shrink:0;display:flex;flex-direction:column;min-height:0}
#scene,#taskPanel,.side-profile{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ===== 侧栏 ===== */
.side-profile{padding:10px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.side-avatar{width:84px;height:84px;border-radius:50%;border:2px solid var(--line);object-fit:cover;background:var(--bg)}
.side-name{font-weight:700;font-size:1.05em}
.side-job{font-size:.82em;color:var(--soft);line-height:1.35}
.side-rank{display:inline-block;background:var(--ink);color:#fff;font-size:.75em;border-radius:10px;padding:1px 9px;margin-top:3px}
.side-detail{width:100%;font-size:.78em;color:var(--soft);text-align:left;border-top:1px dashed var(--line);padding-top:6px}
.side-detail div{display:flex;justify-content:space-between}
.side-detail b{color:var(--ink)}
.side-tabs{display:flex;flex-direction:column;gap:6px}
.side-tab{
  text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 12px;font-size:.9em;box-shadow:var(--shadow);transition:transform .08s;
  display:flex;justify-content:space-between;align-items:center;color:var(--ink);
}
.side-tab:hover{transform:translateX(2px);border-color:var(--ink)}
.side-tab .badge{background:var(--green);color:#fff;border-radius:9px;font-size:.72em;padding:0 6px}

/* ===== 主场景 ===== */
#scene{display:flex;flex-direction:column;min-height:170px;overflow:visible;flex-shrink:0}
#sceneCard{padding:14px 16px;flex:1 1 auto;overflow:visible}
#sceneCard h2{font-size:1.12em;margin-bottom:6px;color:var(--ink)}
#sceneCard .scene-tag{display:inline-block;font-size:.72em;border-radius:8px;padding:0 8px;margin-bottom:6px;background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.scene-tag.tag-crisis{color:var(--red);border-color:var(--red)}
#sceneCard .scene-text{white-space:pre-wrap;font-size:.95em}
.scene-who{color:var(--soft);font-size:.85em;margin-bottom:4px}
#sceneChoices{padding:10px 16px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;background:#F7F2E8;flex-shrink:0;overflow:visible}
.choice-btn{
  text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px;font-size:.92em;box-shadow:0 1px 3px rgba(0,0,0,.05);color:var(--ink);
}
.choice-btn:hover{border-color:var(--ink)}
.choice-btn .c-cost{float:right;font-size:.78em;color:var(--soft)}
.choice-btn .c-tag{float:right;font-size:.72em;border-radius:7px;padding:0 6px;margin-left:6px}
.ct-good{background:var(--green-soft);color:var(--green)}
.ct-bad{background:var(--red-soft);color:var(--red)}
.ct-mid{background:var(--bg);color:var(--soft);border:1px solid var(--line)}
.choice-hint{font-size:.78em;color:var(--soft);font-style:italic}

/* ===== 任务面板 ===== */
#taskPanel{padding:10px 14px}
.panel-title{font-size:.95em;color:var(--ink);margin-bottom:8px;letter-spacing:1px;font-weight:700}
.task-item{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:8px 11px;margin-bottom:8px}
.task-item.done{opacity:.62}
.task-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;flex-wrap:wrap}
.task-title{font-weight:700;font-size:.92em}
.task-deadline{font-size:.76em;color:var(--soft);white-space:nowrap}
.task-deadline.urgent{color:var(--red);font-weight:700}
.task-desc{font-size:.82em;color:var(--soft);margin:2px 0 6px}
.pbar{height:9px;background:var(--bg);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.pbar-fill{height:100%;background:var(--green);transition:width .3s}
.task-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.task-act{
  font-size:.8em;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:3px 10px;color:var(--ink);
}
.task-act:hover{border-color:var(--ink);background:var(--card)}
.task-act:disabled{opacity:.4}
.task-reward{font-size:.74em;color:var(--green);margin-top:5px}

/* ===== 日志 ===== */
#logPanel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px;overflow:hidden}
#logList{flex:1;overflow-y:auto;font-size:.8em;display:flex;flex-direction:column;gap:4px}
.log-item{background:var(--bg);border-radius:8px;padding:5px 9px;animation:logIn .25s;color:var(--ink)}
.log-item .lg-time{color:var(--soft);font-size:.8em;margin-right:5px}
.log-good{color:var(--green);font-weight:600}
.log-bad{color:var(--red);font-weight:600}
.log-mid{color:#8A5A00;font-weight:600}
@keyframes logIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}

/* ===== 底栏：结束本周居中 ===== */
#bottombar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  background:var(--card);border-top:1px solid var(--line);
  padding:8px 14px;box-shadow:0 -1px 6px rgba(0,0,0,.06);z-index:50;
}
#bbLeft{justify-self:start;display:flex;gap:8px}
#bbCenter{justify-self:center}
#bbRight{justify-self:end;display:flex;gap:8px}
.btn-week{
  background:var(--green);color:#fff;border:none;border-radius:24px;
  padding:15px 54px;font-size:1.2em;font-weight:700;letter-spacing:1px;
  box-shadow:0 2px 8px rgba(30,122,60,.35);
}
.btn-week:hover{filter:brightness(1.08)}
.btn-week:disabled{opacity:.5;box-shadow:none}
.btn{border-radius:16px;padding:6px 16px;font-size:.9em;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.btn:hover{border-color:var(--ink)}
.btn-primary{background:var(--green);color:#fff;border-color:var(--green)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn-ghost{background:none;padding:6px 10px}

/* ===== 弹窗 ===== */
#overlay{position:fixed;inset:0;background:rgba(20,20,20,.45);z-index:100;display:flex;align-items:center;justify-content:center;padding:14px}
#modal{
  background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 30px rgba(0,0,0,.3);
  width:min(780px,96vw);max-height:88vh;display:flex;flex-direction:column;overflow:hidden;animation:pop .18s;color:var(--ink);
}
@keyframes pop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line)}
.modal-head h3{font-size:1.02em;letter-spacing:1px;color:var(--ink)}
.modal-close{font-size:1.3em;color:var(--ink);padding:0 6px}
.modal-body{padding:14px 16px;overflow-y:auto;flex:1}
.modal-foot{padding:10px 16px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}

/* ===== 通用组件 ===== */
.list-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:8px 10px;margin-bottom:8px;cursor:pointer}
.list-row:hover{border-color:var(--ink)}
.list-row.sel{border-color:var(--green);background:var(--green-soft)}
.list-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--line);flex-shrink:0;background:var(--bg)}
.list-info{flex:1;min-width:0}
.list-name{font-weight:700;font-size:.92em;color:var(--ink)}
.list-sub{font-size:.78em;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-right{font-size:.8em;color:var(--soft);text-align:right;flex-shrink:0}
.chip{display:inline-block;font-size:.72em;border-radius:9px;padding:0 8px;margin-left:4px;background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.kv{display:flex;justify-content:space-between;font-size:.85em;padding:3px 0;border-bottom:1px dashed var(--line)}
.kv b{color:var(--ink);font-weight:600}
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.avatar-cell{border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--bg);text-align:center;padding:6px}
.avatar-cell.sel{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}
.avatar-cell img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}
.avatar-cell .av-label{font-size:.74em;color:var(--soft);margin-top:3px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btn-sm{padding:3px 12px;font-size:.8em;border-radius:12px}
.danger-text{color:var(--red)}.good-text{color:var(--green)}.warn-text{color:#8A5A00}
.help-line{overflow-wrap:anywhere;font-size:.82em;color:var(--soft);margin:3px 0}
.hr{border:none;border-top:1px dashed var(--line);margin:10px 0}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:10px 12px;margin-bottom:8px}
.card h4{color:var(--ink);font-size:.92em;margin-bottom:4px}
.group-t{font-size:.9em;margin:10px 0 6px;color:var(--ink)}
.tree-node{font-size:.84em}
.tree-children{padding-left:14px;border-left:1px dotted var(--line);margin-left:4px}
.tree-toggle{cursor:pointer;color:var(--ink)}
textarea,input[type=text],select{
  font-family:inherit;font-size:.9em;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--ink);padding:6px 9px;width:100%;
}
textarea:focus,input:focus,select:focus{outline:2px solid var(--green)}

/* ===== Toast ===== */
#toastBox{position:fixed;top:64px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:#fff;border-radius:12px;padding:8px 16px;box-shadow:0 4px 16px rgba(0,0,0,.3);font-size:.9em;animation:toastIn .3s;max-width:300px}
.toast.good{background:var(--green)}
.toast.bad{background:var(--red)}
.toast.warn{background:#8A5A00}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}to{opacity:1}}

/* ===== 新手引导 ===== */
#tutorialBox{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:150;
  background:var(--card);color:var(--ink);border:1px solid var(--ink);border-radius:14px;padding:12px 18px;max-width:520px;
  box-shadow:0 6px 24px rgba(0,0,0,.25);font-size:.9em;
}
#tutorialBox button{margin-left:10px;background:var(--ink);color:#fff;border-radius:12px;padding:3px 14px;font-size:.85em}

/* ===== 响应式 ===== */
@media (max-width: 900px){
  #sidebar{display:none}
  #logPanel{display:none}
  #layout{flex-direction:column}
  #main{overflow:visible}
  body{font-size:calc(var(--font) - 1px)}
}
@media (max-width: 560px){
  #topbar{padding:6px 8px;gap:6px}
  .tb-stats{order:3;width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .stat{font-size:.74em}
  #layout{padding:6px;gap:6px}
  #bottombar{padding:6px 8px}
  .btn-week{padding:13px 38px;font-size:1.1em}
  .grid2,.grid3{grid-template-columns:1fr}
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ===== 标题画面 ===== */
#titleScreen{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.ts-inner{text-align:center;max-width:520px;animation:pop .5s}
.ts-badge{display:inline-block;background:var(--ink);color:#fff;font-size:.8em;letter-spacing:2px;border-radius:14px;padding:4px 16px;margin-bottom:18px}
.ts-title{font-size:2.6em;letter-spacing:14px;color:var(--ink);margin-bottom:6px;font-weight:800}
.ts-sub{color:var(--soft);margin-bottom:34px}
.ts-btns{display:flex;flex-direction:column;gap:12px;max-width:280px;margin:0 auto}
.ts-btn{width:100%;padding:12px;font-size:1.05em}
.ts-foot{margin-top:36px;font-size:.78em;color:var(--soft)}

/* ===== 创建向导：卡片模块 ===== */
#wizard{flex:1;overflow-y:auto;padding:14px 16px 30px;max-width:860px;width:100%;margin:0 auto}
.wz-head{text-align:center;margin-bottom:14px}
.wz-head h2{color:var(--ink)}
.wz-head .help-line{font-size:.8em}
#wzHome{display:block;max-width:440px;margin:0 auto;width:100%}
.wz-module{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  cursor:pointer;box-shadow:var(--shadow);transition:transform .1s;text-align:left;
}
.wz-module:hover{transform:translateY(-2px);border-color:var(--ink)}
.wz-module.ready{border-color:var(--green)}
.wz-module-head{font-weight:700;font-size:1.02em;color:var(--ink);margin-bottom:6px}
.wz-module-head .pick-check{color:var(--green);font-weight:800}
.wz-module-sum{font-size:.84em;color:var(--soft);line-height:1.5;word-break:break-all}
.wz-avatar-mini{width:34px;height:34px;border-radius:50%;vertical-align:middle;object-fit:cover;border:1px solid var(--line)}
#wzPicker{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px 16px;max-width:560px;margin:0 auto;width:100%}
#wzPicker .wz-pickwrap{max-height:60vh;overflow-y:auto}
#wzPicker .wz-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
#wzPicker .wz-head h2{flex:1}
.wz-pickgroup{margin-bottom:10px}
.wz-pickgroup label{display:block;font-size:.86em;font-weight:700;margin-bottom:6px;color:var(--ink)}
.pick-strip{
  display:flex;flex-direction:column;gap:8px;max-height:38vh;overflow-y:auto;
  padding:4px 2px;-webkit-overflow-scrolling:touch;
}
.pick-strip::-webkit-scrollbar{width:6px}
.pick-card{
  width:100%;max-width:none;min-width:0;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:9px 12px;cursor:pointer;position:relative;color:var(--ink);
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px;
}
.pick-card:hover{border-color:var(--ink)}
.pick-card.sel{border-color:var(--green);background:var(--green-soft);box-shadow:0 0 0 1px var(--green)}
.pick-card small{flex:1;text-align:right}
.pick-card small{font-size:.72em;color:var(--soft);line-height:1.4}
.pick-card b{font-size:.88em}
.pick-check{color:var(--green);font-weight:800;flex:0 0 auto}
.pick-avatar{width:82px;height:82px;border-radius:10px;object-fit:cover;border:1px solid var(--line);background:#FBF7EE}
.pick-dis{opacity:.45}
.wz-nav-center{display:flex;justify-content:center;gap:12px;margin-top:14px}
.wz-final-card{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.wz-ava{width:110px;height:110px;border-radius:14px;border:1px solid var(--line);object-fit:cover;background:var(--bg)}
.wz-final-info{flex:1;color:var(--ink)}
.wz-final-name{font-size:1.25em;font-weight:800;margin-bottom:6px}
.wz-final-info div{font-size:.9em;margin:2px 0}

/* ===== NPC 小卡片 ===== */
.npc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.npc-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  transition:transform .1s;
}
.npc-card:nth-child(4n+2){border-bottom:3px solid #C8C8C4}
.npc-card:nth-child(4n+3){border-bottom:3px solid #B5C4B3}
.npc-card:nth-child(4n){border-bottom:3px solid #C9C3B3}
.npc-card:hover{transform:translateY(-2px);border-top-color:var(--ink)}
.npc-card-avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:var(--bg)}
.npc-card-name{font-weight:700;font-size:.88em;color:var(--ink)}
.npc-card-job{font-size:.74em;color:var(--soft);line-height:1.4;max-width:100%;word-break:break-all}
.npc-card-feel{font-size:.76em;color:var(--soft);border-top:1px dashed var(--line);width:100%;padding-top:3px}
.npc-card-feel.feel-good{color:var(--green);font-weight:700}

/* ===== NPC 大卡片 ===== */
.npc-big{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.npc-big-avatar{width:86px;height:86px;border-radius:14px;object-fit:cover;border:2px solid var(--line);background:var(--bg)}
.npc-big-head h3{font-size:1.15em;color:var(--ink)}
.npc-big-job{font-size:.86em;color:var(--ink);font-weight:600}
.npc-big-rel{margin-top:4px}

/* ===== 分组岗位树 ===== */
details.job-level,details.job-sys,details.job-dept{margin:4px 0}
details.job-level>summary,details.job-sys>summary,details.job-dept>summary{
  cursor:pointer;font-size:.9em;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);
}
details.job-level>summary{font-weight:700;background:var(--bg)}
details.job-sys>summary{background:#F3EFE4}
details.job-dept>summary{background:var(--card)}
details[open]>summary{margin-bottom:4px}
.job-sys .list-row,.job-dept .list-row{margin-bottom:4px}

/* ===== 图鉴锁定 ===== */
.g-locked{opacity:.62}
.g-locked h4{color:var(--soft)!important}

@media (max-width:560px){
  .ts-title{font-size:2em;letter-spacing:8px}
  .wz-final-card{flex-direction:column;align-items:center;text-align:center}
  #wzHome{grid-template-columns:1fr}
  .npc-grid{grid-template-columns:repeat(auto-fill,minmax(116px,1fr))}
}

/* ===== 向导·个人信息条目 ===== */
.wz-items{display:flex;flex-direction:column;gap:10px}
.wz-item-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 16px;cursor:pointer;transition:border-color .15s}
.wz-item-row:hover{border-color:var(--ink)}
.wz-item-row.ready{border-color:var(--green);background:var(--green-soft)}
.wz-item-label{font-weight:700;font-size:1em;white-space:nowrap}
.wz-item-val{flex:1;text-align:right;color:var(--soft);font-size:.92em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-item-row.ready .wz-item-val{color:var(--ink)}
.wz-item-arrow{color:var(--soft);font-size:1.2em;line-height:1}

/* ===== 组织架构：可点击人员行 ===== */
.tree-npc{cursor:pointer;border-radius:8px;padding:3px 8px;transition:background .12s}
.tree-npc:hover{background:var(--green-soft)}

/* ===== 组织架构：逐级下钻 ===== */
.org-crumb{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.org-city-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.org-city{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;position:relative;transition:border-color .15s}
.org-city:hover{border-color:var(--ink)}
.org-city b{font-size:.95em}
.org-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--soft);font-size:1.2em}

/* ===== 生涯评分 ===== */
.gold-text{color:#B8860B}

/* ===== 玩家信息页：属性进度条 ===== */
.attr-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.attr-row>span{width:96px;font-size:.86em;flex:0 0 auto;color:var(--ink)}
.attr-row>b{width:38px;text-align:right;font-size:.88em}
.attr-bar{flex:1;height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.attr-fill{height:100%;background:var(--green);border-radius:6px;transition:width .2s}
.attr-fill.warn-fill{background:#C08A00}
/* ===== 组织架构：筛选与年龄 ===== */
.org-filter{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.org-filter label{font-size:.86em;font-weight:700}
.org-filter select{padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-family:inherit}
.npc-card-age{font-size:.72em;color:var(--soft);margin-left:6px}
#sideProfile{cursor:pointer}

/* ===== 侧栏属性（头像下方） ===== */
.side-attrs{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px}
.side-attrs-title{margin:0 0 6px;font-size:.9em}
.side-attrs .attr-row{gap:6px;margin:4px 0}
.side-attrs .attr-row>span{width:44px;font-size:.76em}
.side-attrs .attr-row>b{width:26px;font-size:.78em}
.side-attrs .attr-bar{height:7px}
.side-nums{margin-top:6px}
.side-nums .kv{font-size:.76em}
.side-age{font-weight:400;color:var(--soft);font-size:.72em}
/* ===== 主页身边人物 ===== */
#npcPanel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px 12px}
#npcRow .npc-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* ===== 底栏：居中结束本周 ===== */
#bottombar{display:flex;justify-content:center;align-items:center;position:relative}
#bbRight{position:absolute;right:12px;display:flex;gap:6px}
/* ===== 消息列表独立滚动 ===== */
#logPanel{overflow:hidden}
#logList{overflow-y:auto;flex:1;min-height:0}
/* ===== 防截断 ===== */
#sceneCard .scene-text{overflow-wrap:anywhere}
.task-desc{overflow-wrap:anywhere}
.task-title{overflow-wrap:anywhere}
.task-actions{flex-wrap:wrap}
/* ===== 紧凑选择网格 ===== */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.pick-grid .pick-card{width:auto;justify-content:center;padding:6px 6px;font-size:.86em;min-height:34px}
.pick-card{padding:7px 10px}
.wz-item-row{padding:7px 10px}
/* ===== 移动端顶栏按钮 ===== */
@media (max-width: 900px){
  .tb-btns{flex-wrap:wrap;gap:4px;width:100%}
  .tb-btn{font-size:.76em;padding:2px 8px}
}

/* ===== 文本换行与溢出修复 ===== */
.help-line{overflow-wrap:anywhere}
.scene-text{overflow-wrap:anywhere}
#main{overflow-x:hidden}
#sceneCard,#taskPanel,#npcPanel{min-width:0}
/* ===== NPC 卡片紧凑 ===== */
.npc-card{padding:8px 8px 6px;gap:3px}
.npc-card-avatar{width:46px;height:46px}
.npc-card-name{font-size:.84em;overflow-wrap:anywhere}
.npc-card-job{font-size:.7em}
.npc-card-feel{font-size:.72em}
/* ===== 移动端：整页滚动 + 底栏固定 ===== */
@media (max-width: 900px){
  #app{height:auto;min-height:100dvh;padding-bottom:70px}
  #layout{overflow:visible}
  #bottombar{position:fixed;left:0;right:0;bottom:0;z-index:60}
  #npcRow .npc-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
  .tb-btns{padding-right:2px}
}

/* ===== 开局：竖向卡片 + 独立确认按钮 ===== */
.wz-cards{display:flex;flex-direction:column;gap:10px}
.wz-submit{max-width:440px;margin:16px auto 0;text-align:center}
.wz-submit-btn{width:100%;padding:12px 16px;font-size:1.05em}
/* ===== 主页工作任务按钮 ===== */
#taskBar{padding:0}
.task-open-btn{
  width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:10px 14px;font-weight:700;color:var(--ink);
  text-align:left;font-size:.95em;
}
.task-open-btn:hover{border-color:var(--ink)}
.task-open-btn.urgent{border-color:var(--red);color:var(--red)}
/* ===== 身边人物分组 ===== */
.npc-group{margin-bottom:10px}
.npc-group:last-child{margin-bottom:0}
.npc-group-title{font-size:.84em;color:var(--soft);font-weight:700;margin:0 0 6px}
/* ===== 手机端弹窗适配 ===== */
@media (max-width: 900px){
  #modal{max-height:88vh;width:94vw}
  .modal-head{padding:10px 12px}
  .modal-body{padding:12px}
  .task-act{font-size:.76em;padding:4px 8px}
  .btn-row{gap:6px}
  .grid2{grid-template-columns:1fr}
  .wz-cards{gap:8px}
  .wz-submit-btn{padding:11px 12px;font-size:1em}
}

/* ===== 顶栏居中 ===== */
.tb-left{justify-self:start}
@media (max-width: 900px){
  #topbar{grid-template-columns:1fr;row-gap:6px}
  .tb-btns{grid-column:1;width:100%;justify-self:stretch;justify-content:center}
}

/* ============================================================
   手机端适配（≤900px）：玩家卡置顶、顶栏单行、人物紧凑、消息可见
   ============================================================ */
@media (max-width: 900px){
  /* 底栏留白（含刘海屏安全区） */
  #app{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}

  /* 顶栏：标题一行 + 功能按钮单行可横滑 */
  #topbar{grid-template-columns:1fr;row-gap:4px;padding:6px 8px}
  .tb-title{font-size:.95em;letter-spacing:1px}
  .tb-date{font-size:.7em}
  .tb-btns{
    grid-column:1;width:100%;justify-self:stretch;
    display:flex;flex-wrap:nowrap;gap:4px;justify-content:space-between;
    overflow-x:auto;padding-bottom:1px;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tb-btns::-webkit-scrollbar{display:none}
  .tb-btn{flex:1 1 auto;font-size:.7em;padding:3px 4px;text-align:center;white-space:nowrap}

  /* 侧栏 → 置顶玩家卡（头像可点看简历 + 属性进度条） */
  #sidebar{
    display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;
    width:100%;overflow:visible;
  }
  .side-profile{
    flex:1 1 100%;flex-direction:row;align-items:center;justify-content:flex-start;
    text-align:left;gap:10px;padding:8px 10px;
  }
  .side-avatar{width:46px;height:46px;border-width:1px;flex:0 0 auto}
  .side-name{font-size:.95em}
  .side-age{font-size:.7em}
  .side-rank{font-size:.64em;padding:0 7px;margin:0 0 0 2px}
  .side-job{font-size:.72em;line-height:1.3}
  .side-attrs, .side-profile{box-shadow:none}
  .side-rank{white-space:nowrap}
  .side-name{white-space:nowrap}
  .side-profile .help-line{display:none}
  .side-attrs{flex:1 1 100%;padding:8px 10px}
  .side-attrs-title{font-size:.78em;margin:0 0 4px}
  .side-attrs .attr-row{gap:6px;margin:3px 0}
  .side-attrs .attr-row>span{width:38px;font-size:.7em}
  .side-attrs .attr-row>b{width:24px;font-size:.72em}
  .side-attrs .attr-bar{height:6px}
  .side-attrs .side-nums{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin-top:4px}
  .side-nums .kv{font-size:.7em}

  /* 消息面板在手机端恢复显示（限高内滚动） */
  #logPanel{display:flex;width:100%;max-height:190px}
  #logPanel .panel-title{font-size:.86em}
  #logList{font-size:.74em}

  /* 主页场景与按钮紧凑 */
  #main{gap:8px}
  #layout{padding:6px;gap:8px}
  #taskBar{padding:0}
  .task-open-btn{padding:9px 12px;font-size:.88em}
  #scene{min-height:120px}
  #sceneCard{padding:10px 12px}
  #sceneCard h2{font-size:1.02em;margin-bottom:4px}
  #sceneCard .scene-text{font-size:.88em;line-height:1.5}
  #sceneCard .help-line{font-size:.78em}
  #sceneChoices{padding:8px 12px 10px;gap:6px}
  .choice-btn{font-size:.86em;padding:8px 10px}
  #npcPanel{padding:8px 10px}
  .panel-title{font-size:.9em;margin:0 0 6px}
  .npc-group-title{font-size:.78em}

  /* 身边人物：3列小卡片 */
  #npcRow .npc-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
  #npcRow .npc-card{padding:6px 5px;gap:2px}
  #npcRow .npc-card-avatar{width:38px;height:38px;border-width:1px}
  #npcRow .npc-card-name{font-size:.78em}
  #npcRow .npc-card-age{font-size:.66em;margin-left:3px}
  #npcRow .npc-card-job{font-size:.64em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #npcRow .npc-card-feel{font-size:.66em;padding-top:2px}

  /* 底栏按钮 */
  #bottombar{padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
  .btn-week{padding:12px 40px;font-size:1.02em;letter-spacing:0}
  #bbRight{right:8px}

  /* 弹窗：几乎满屏、内容自适应 */
  #overlay{padding:6px}
  #modal{width:96vw;max-height:88vh}
  .modal-head{padding:10px 12px}
  .modal-head h3{font-size:.95em}
  .modal-body{padding:10px 11px}
  .card{padding:8px 10px;margin-bottom:8px}
  .kv{font-size:.8em}
  .task-act{font-size:.73em;padding:4px 8px}
  .task-title{font-size:.9em}
  .task-desc{font-size:.78em}
  .list-row{padding:7px 8px}
  .list-name{font-size:.82em}
  .list-sub{font-size:.68em}
  .org-filter{gap:6px}
  .org-filter select{font-size:.78em;padding:3px 6px}
  #orgSearch{font-size:.8em;padding:7px 9px}
  .npc-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:7px}
  .npc-card{padding:6px}
  .npc-card-avatar{width:40px;height:40px}
  .npc-card-name{font-size:.8em}
  .npc-card-job{font-size:.66em}
  .npc-card-feel{font-size:.68em}
  .btn-row{gap:6px}
  .grid2{grid-template-columns:1fr}
  .attr-row>span{width:70px;font-size:.78em}
  .attr-row>b{width:30px;font-size:.8em}

  /* 创建人物：更紧凑 */
  #wizard{padding:10px 10px 16px}
  .wz-head h2{font-size:1.25em}
  .wz-head{margin-bottom:8px}
  .wz-module{padding:9px 11px;border-radius:10px}
  .wz-module-head{font-size:.95em;margin-bottom:4px}
  .wz-module-sum{font-size:.78em}
  .wz-cards{gap:8px}
  .wz-submit{margin-top:12px}
  .wz-submit-btn{padding:11px 12px;font-size:1em}
  #wzPicker{padding:10px 11px 14px}
  #wzPicker .wz-head h2{font-size:1.1em}
  #wzPicker .wz-head .help-line{display:none}
  .wz-item-row{padding:7px 9px}
  .wz-item-label{font-size:.9em}
  .wz-item-val{font-size:.84em}
  .pick-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:5px}
  .pick-grid .pick-card{min-height:32px;font-size:.82em;padding:5px 4px}
  .pick-card{padding:6px 8px;font-size:.86em}
  .pick-avatar{width:64px;height:64px}

  /* 生涯结算 */
  #modal .modal-body h2{font-size:2em}
}

/* ===== 手机端细节优化 ===== */
@media (max-width: 900px){
  /* 创建人物垂直居中 */
  #wizard{
    min-height:calc(100dvh - 40px);
    display:flex;flex-direction:column;justify-content:center;
  }
  #wizard #wzHome, #wizard #wzPicker{width:100%}
  /* 组织架构城市卡紧凑 */
  .org-city{padding:8px 10px;font-size:.86em}
  .org-city .help-line{font-size:.72em}
  .org-crumb{font-size:.8em}
  .tree-toggle{font-size:.82em;padding:6px 4px}
  /* 简历摘要：手机端上下两行 */
  .career-lines .kv{flex-direction:column;align-items:flex-start;gap:2px;line-height:1.4}
  .career-lines .kv b{text-align:left;font-size:.92em;color:var(--soft);font-weight:600}
  /* 弹窗按钮行贴底 */
  .btn-row{flex-wrap:wrap}
  .btn{padding:7px 12px;font-size:.86em}
  .btn-week{padding:11px 34px;font-size:1em}
}