:root{
  --orange:#F07F09; --orange-dk:#B25E05; --orange-lt:#FDF0DE;
  --ink:#232323; --ink-2:#5A554C; --line:#E0DACB; --bg:#FAF8F4; --panel:#fff;
  --green:#4E8542; --green-lt:#EAF2E7;
  --red:#9F2936; --red-lt:#FBEAEC;
  --blue:#1B587C; --blue-lt:#E4EEF4;
  --gold:#C19859; --gold-lt:#FBF1E0;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 "Microsoft JhengHei","PingFang TC",-apple-system,sans-serif}
a{color:var(--blue)}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px 60px}

nav{background:var(--ink);color:#fff;padding:0 20px}
nav .inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:22px;height:54px}
nav .brand{font-weight:700;font-size:17px;color:var(--orange);text-decoration:none;display:flex;align-items:center;gap:8px;letter-spacing:.5px}
nav .brand span{color:#fff;background:var(--orange);border-radius:4px;padding:0 5px;font-size:14px;line-height:20px}
nav .nav-sep{width:1px;height:22px;background:#4A453D;margin:0 2px}
.brand-logo{height:26px;width:auto;display:block}
nav a{color:#CFC8BA;text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:5px}
nav .nav-ico{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
nav a:hover,nav a.on{color:#fff}
nav .right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:#9A9384}

.ro{background:var(--gold-lt);border-bottom:1px solid var(--gold);
  color:#7A5C1F;font-size:13px;padding:7px 20px;text-align:center}

h1{font-size:23px;margin:26px 0 4px}
.lede{color:var(--ink-2);font-size:14px;margin:0 0 20px}

.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
select,input[type=text],input[type=password]{
  font:14px inherit;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
button,.btn{font:14px inherit;padding:7px 15px;border:1px solid var(--orange);border-radius:6px;
  background:var(--orange);color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
.btn.ghost{background:#fff;color:var(--orange-dk)}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:15px 17px}
.card .n{font-size:30px;font-weight:700;line-height:1.1}
.card .l{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.card.done .n{color:var(--green)} .card.ns .n{color:var(--gold)}
.card.nc .n{color:var(--red)} .card.tot .n{color:var(--ink)}

.unit{background:var(--panel);border:1px solid var(--line);border-radius:9px;margin-bottom:10px;overflow:hidden}
.unit summary{list-style:none;cursor:pointer;padding:13px 17px;display:flex;align-items:center;gap:14px}
.unit summary::-webkit-details-marker{display:none}
.unit summary:hover{background:#FBF9F5}
.unit .nm{font-weight:700;min-width:150px}
.unit .mgr{color:var(--ink-2);font-size:12.5px;min-width:110px}
.meter{flex:1;height:9px;background:#EDE8DC;border-radius:5px;overflow:hidden;min-width:120px}
.meter i{display:block;height:100%;background:var(--green)}
.pct{font-weight:700;min-width:58px;text-align:right;font-variant-numeric:tabular-nums}
.cnt{color:var(--ink-2);font-size:12.5px;min-width:96px;text-align:right;font-variant-numeric:tabular-nums}

table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:9px 12px;border-top:1px solid var(--line);font-size:13.5px;text-align:left;vertical-align:middle}
th{background:#F6F2EA;color:var(--ink-2);font-size:12px;font-weight:700}
td.num{text-align:right;font-variant-numeric:tabular-nums}

.tag{display:inline-block;padding:2px 9px;border-radius:11px;font-size:11.5px;font-weight:700;white-space:nowrap}
.tag.done{background:var(--green-lt);color:var(--green)}
.tag.ns{background:var(--gold-lt);color:#8A6318}
.tag.nc{background:var(--red-lt);color:var(--red)}
.tag.soft{background:#F0ECE3;color:var(--ink-2);font-weight:400}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:20px;margin-bottom:18px}
.kv{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:6px}
.kv div span{display:block;font-size:11.5px;color:var(--ink-2)}
.kv div b{font-size:15px}

/* 唯讀分數（非本人負責的項目）：刻意跟下面 .scale-input 的可點擊按鈕做出區別——
   虛線框、灰階、無 hover 效果，一眼就看得出「這排不是你要填的」，不是設計疏漏。 */
.scale{display:flex;gap:6px}
.scale span{min-width:32px;height:30px;line-height:28px;text-align:center;border:1px dashed var(--line);
  border-radius:6px;font-size:13px;color:#B8B2A4;background:#FAF9F6}
.scale span.sel{background:#EDE8DC;border-color:#D8D0BC;border-style:solid;color:var(--ink-2);font-weight:700}
.rubric{font-size:12px;color:var(--ink-2);margin-top:3px}
.row-locked{opacity:.6}
.row-editable td:first-child{border-left:3px solid var(--orange)}
.lock-ico{display:inline-block;width:11px;height:11px;vertical-align:-1px;margin-right:3px;
  stroke:currentColor;stroke-width:1.6;fill:none}

.login{max-width:370px;margin:90px auto;background:#fff;border:1px solid var(--line);
  border-radius:11px;padding:32px}
.login h2{margin:0 0 4px;font-size:19px;display:flex;align-items:center;gap:10px}
.login-logo{height:34px;width:auto;display:block}
.login p{margin:0 0 20px;color:var(--ink-2);font-size:13px}
.login .f{margin-bottom:12px}
.login input{width:100%}
.login button{width:100%;padding:10px}
.err{background:var(--red-lt);color:var(--red);padding:9px 12px;border-radius:6px;
  font-size:13px;margin-bottom:14px}
.empty{color:var(--ink-2);padding:28px;text-align:center;background:#fff;
  border:1px dashed var(--line);border-radius:9px}
@media(max-width:820px){.cards{grid-template-columns:repeat(2,1fr)}}

.msg{padding:10px 14px;border-radius:7px;font-size:13.5px;margin-bottom:14px}
.msg.ok{background:var(--green-lt);color:var(--green);border:1px solid #C6DCC0}
.msg.err{background:var(--red-lt);color:var(--red);border:1px solid #EFD5D8}
.msg.warn{background:var(--gold-lt);color:#8A6318;border:1px solid #EBD9B6}
h3,h4{margin:22px 0 8px;font-size:15px}
h4{color:var(--ink-2);font-size:13.5px}
.adm{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.adm-card{display:block;background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:20px;text-decoration:none;color:inherit}
.adm-card:hover{border-color:var(--orange);background:#FFFDF9}
.adm-card b{display:block;font-size:17px;margin-bottom:6px}
.adm-card span{font-size:13px;color:var(--ink-2);line-height:1.7}
.inline{display:inline}
.inline button{padding:3px 10px;font-size:12px}
@media(max-width:820px){.adm{grid-template-columns:1fr}}

/* 真正可點擊的分數按鈕：實線框＋陰影＋游標提示，跟上面唯讀的 .scale 做出對比 */
.scale-input{display:flex;gap:6px}
.scale-input label{position:relative;cursor:pointer}
.scale-input input{position:absolute;opacity:0;width:0;height:0}
.scale-input span{display:block;min-width:34px;height:32px;line-height:30px;text-align:center;
  border:1px solid var(--line);border-radius:6px;font-size:13px;color:var(--ink-2);background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}
.scale-input label:hover span{border-color:var(--orange);color:var(--orange-dk);box-shadow:0 1px 4px rgba(240,127,9,.25)}
.scale-input input:checked + span{background:var(--orange);border-color:var(--orange);color:#fff;font-weight:700}
.scale-input input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 20px}
.grid2 label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
.grid2 label input,.grid2 label select{font:14px inherit;padding:7px 10px;border:1px solid var(--line);
  border-radius:6px;background:#fff;color:var(--ink)}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

.admin-layout{display:flex;gap:28px;align-items:flex-start}
.admin-sidebar{flex:0 0 212px;position:sticky;top:20px;display:flex;flex-direction:column;gap:1px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 8px}
.admin-sidebar a{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 18px;
  margin-left:2px;border-radius:6px;color:var(--ink);text-decoration:none;
  font-size:14px;line-height:1.3}
.admin-sidebar a svg{flex:0 0 18px;width:18px;height:18px;stroke:currentColor;stroke-width:1.5;
  fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.68}
.admin-sidebar a:hover{background:#F6F2EA}
.admin-sidebar a.on{background:var(--orange-lt);color:var(--orange-dk);font-weight:700}
.admin-sidebar a.on svg{opacity:1}
.admin-sidebar-group{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;
  padding:14px 10px 4px 10px;font-weight:700;border-top:1px solid var(--line);margin-top:6px}
.admin-sidebar-group:first-of-type{border-top:none;margin-top:2px}
.admin-content{flex:1;min-width:0}
@media(max-width:900px){
  .admin-layout{flex-direction:column}
  .admin-sidebar{position:static;width:100%;flex-direction:row;flex-wrap:wrap}
  .admin-sidebar a{padding:8px 10px;margin-left:0}
  .admin-sidebar-group{display:none}
}

/* 進度看板：待您評分（直屬下一階）的人上色、排前面；「您」的待評標籤用橘色 */
.my-queue{border:1px solid var(--orange);background:var(--orange-lt);border-radius:10px;padding:14px 18px;margin:0 0 20px}
.my-queue h2{margin:0 0 4px;font-size:17px;color:var(--orange-dk)}
.my-queue table{background:#fff;margin-top:10px}
tr.row-mine td{background:var(--orange-lt)}
tr.row-mine td:first-child{border-left:3px solid var(--orange)}
.tag.mine{background:var(--orange);color:#fff;font-weight:700}
.unit summary .mine-cnt{margin-left:auto;white-space:nowrap}
.tag.proxy{background:#fff;border:1px dashed #C9BFAE;color:var(--ink-2)}
.row-proxy td:first-child{border-left:3px dashed #C9BFAE}
.nav-badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--orange);color:#fff;
  font-size:12px;font-weight:700;line-height:18px;text-align:center;margin-left:2px}
.todo-items{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.todo-items a{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border:1px solid var(--orange);border-radius:16px;
  background:#fff;color:var(--orange-dk);text-decoration:none;font-size:14px}
.todo-items a:hover{background:var(--orange-lt)}
.todo-items a b{color:var(--orange)}
.tag.warn-cfg{background:#FDECEC;color:#A33;font-weight:400}
nav .brand,nav a,nav .right span{white-space:nowrap;flex-shrink:0}
@media (max-width:900px){nav .inner{overflow-x:auto;gap:16px}nav .right{margin-left:16px}}
.login .login-note{font-size:12px;color:var(--ink-2);margin:10px 0 0;line-height:1.6}
/* 帳號管理：角色卡片可點選篩選 */
.role-cards a.card{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.role-cards a.card:hover{border-color:var(--orange)}
.role-cards a.card.picked{border:2px solid var(--orange);box-shadow:0 2px 8px rgba(240,127,9,.15)}
.adm-group{margin:22px 0 8px;font-size:15px;color:var(--ink-2)}
/* 系統管理圖表 */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px;margin:14px 0}
.chart-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.chart-box h3{margin:0 0 8px;font-size:15px}
.chart-box .chart{position:relative;height:260px}
.chart-box.tall .chart{height:380px}
.chart-note{font-size:12px;color:var(--ink-2);margin:6px 0 0}
@media (max-width:900px){.chart-grid{grid-template-columns:1fr}}