/* 來源：Eva 的 artifact「專案管理系統預覽」（docs/source/eva-artifact-2026-10-21.html），樣式原封保留 */
/* Layout: charcoal band opens with a one-sentence verdict and judged numbers; below, a traffic-light board, one row per project; bars live in the opened detail. */
:root {
  --bg: #F5F5F5; --surface: #FFFFFF; --fg: #222222; --ink: #2D2D2D; --muted: #5F5A5B; --line: #E2DEDE;
  --accent: #D32F2F; --accent-soft: #FBE7E7;
  --band: #2D2D2D; --band-fg: #FFFFFF; --band-muted: #C9C3C3;
  --red: #D32F2F; --red-bg: #FDE3E1; --yellow: #B07800; --yellow-bg: #FBF0D9; --green: #2E7D5B; --green-bg: #E4F2EA;
  --track: #ECE9E9; --fill: #2D2D2D; --mark: #D32F2F;
  --f-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --f-num: "Roboto Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--f-body); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 56px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 24px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.preview { background: var(--yellow-bg); color: var(--ink); padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.preview b { color: var(--yellow); }
.preview button { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 2px 12px; }
.preview button[aria-pressed="true"] { background: var(--ink); color: var(--band-fg); border-color: var(--ink); }

.band { background: var(--band); color: var(--band-fg); border-top: 5px solid var(--accent); }
.band .in { max-width: 1180px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 28px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 18px; }
.band .who { color: var(--band-muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.band h1 { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.2; }
.verdict { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) repeat(3, minmax(0, 1.2fr)); gap: 10px; }
.v { border-radius: 10px; padding: 14px 16px; background: rgba(255,255,255,.07); display: grid; gap: 2px; }
.v b { font: 500 38px/1.1 var(--f-num); font-variant-numeric: tabular-nums; }
.v span { color: var(--band-muted); }
.v.red b { color: #FF7A72; } .v.yellow b { color: #F2C14E; } .v.green b { color: #7FD6A8; }
.v small { color: var(--band-muted); font-size: 16px; }

.filters { display: grid; gap: 8px; }
.frow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.frow .lbl { width: 4.5em; color: var(--muted); font-weight: 700; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 2px 12px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--band-fg); border-color: var(--ink); }
.chip .n { font-family: var(--f-num); margin-left: 4px; }

.legend { color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.legend i { display: inline-block; width: 3px; height: 14px; background: var(--mark); vertical-align: -2px; margin-right: 6px; }

.proj { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--green); border-radius: 10px; }
.proj[data-light="red"] { border-left-color: var(--red); }
.proj[data-light="yellow"] { border-left-color: var(--yellow); }
.phead { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 14px 24px; }
.phead:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pname b { font-size: 19px; color: var(--ink); display: block; }
.pname .sub { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tag { font-size: 16px; padding: 0 9px; border-radius: 999px; background: var(--track); color: var(--muted); }
.light { font-weight: 700; padding: 0 10px; border-radius: 999px; }
.light.red { background: var(--red-bg); color: var(--red); } .light.yellow { background: var(--yellow-bg); color: var(--yellow); } .light.green { background: var(--green-bg); color: var(--green); }
.why { color: var(--red); margin-top: 6px; }
.why.y { color: var(--yellow); }
.bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; }
.bar { display: grid; gap: 3px; }
.bar .t { display: flex; justify-content: space-between; gap: 8px; }
.bar .t span:first-child { color: var(--muted); }
.bar .t b { font-family: var(--f-num); font-weight: 500; color: var(--ink); white-space: nowrap; }
.track { position: relative; height: 14px; background: var(--track); border-radius: 3px; }
.fillb { position: absolute; inset: 0 auto 0 0; background: var(--fill); border-radius: 3px; max-width: 100%; }
.fillb.over { background: var(--red); }
.mark { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--mark); }
.bar .note { color: var(--muted); font-size: 16px; }

.detail { border-top: 1px solid var(--line); padding: 16px 18px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.detail h3 { margin: 0 0 6px; font-size: 18px; color: var(--ink); }
.detail p { margin: 0; }
.kv { display: grid; grid-template-columns: 6em 1fr; gap: 4px 10px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.contrib { display: grid; gap: 6px; }
.crow { display: grid; grid-template-columns: 7em minmax(0, 1fr) 7.5em; gap: 10px; align-items: center; }
.crow .who small { display: block; color: var(--muted); font-size: 16px; line-height: 1.2; }
.crow .num { font-family: var(--f-num); text-align: right; white-space: nowrap; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 700; white-space: nowrap; }
td.num { font-family: var(--f-num); white-space: nowrap; }
.tblbox { overflow-x: auto; }
.late { color: var(--red); font-weight: 700; }
.full { grid-column: 1 / -1; }
form.pm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; background: var(--bg); border-radius: 8px; padding: 14px; }
form label { display: grid; gap: 4px; color: var(--muted); }
form input, form select, form textarea { color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; width: 100%; }
form .wide { grid-column: 1 / -1; }
.btn { background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 8px 18px; font-weight: 700; justify-self: start; }
.btn.ghost { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
.msg { color: var(--green); }
.err { color: var(--red); }
.empty { padding: 20px; color: var(--muted); background: var(--surface); border-radius: 10px; }


.headline { margin: 0; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.4; font-weight: 700; }
.headsub { margin: -10px 0 0; font-size: 20px; line-height: 1.6; color: var(--band-fg); text-wrap: pretty; }
.headsub, .headline { word-break: keep-all; overflow-wrap: anywhere; }
.headline em { font-style: normal; padding: 0 6px; border-radius: 4px; }
.headline em.r { background: var(--red); color: #fff; }
.headline em.y { background: #F2C14E; color: #2D2D2D; }
.v span { order: -1; }
.v b { font-size: 30px; }
button.v { all: unset; box-sizing: border-box; cursor: pointer; border-radius: 10px; padding: 14px 16px; background: rgba(255,255,255,.07); display: grid; gap: 2px; border: 2px solid transparent; }
button.v.on { border-color: var(--band-fg); }
button.v:focus-visible { outline: 2px solid var(--band-fg); outline-offset: 2px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.filters .lbl { font-weight: 700; color: var(--muted); }
.filters label { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.filters select { color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.legend { margin: 0; }
.st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500; }
.st i { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.st.red { color: var(--red); } .st.red i { background: var(--red); }
.st.yellow { color: var(--yellow); } .st.yellow i { background: #E0A100; }
.st.green { color: var(--green); } .st.green i { background: var(--green); }
.st.grey { color: var(--muted); } .st.grey i { background: transparent; border: 2px solid var(--muted); width: 8px; height: 8px; }
.board { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.board table { min-width: 820px; }
.board th { padding: 12px 14px; }
.board td { padding: 12px 14px; vertical-align: middle; }
.prow[data-light="red"] td:first-child { box-shadow: inset 5px 0 0 var(--red); }
.prow[data-light="yellow"] td:first-child { box-shadow: inset 5px 0 0 #E0A100; }
.prow[data-light="green"] td:first-child { box-shadow: inset 5px 0 0 var(--green); }
.pbtn { all: unset; cursor: pointer; display: flex; gap: 12px; align-items: center; }
.pbtn b { display: block; color: var(--ink); font-size: 18px; }
.pbtn small { display: block; color: var(--muted); font-size: 16px; }
.pbtn:hover b { color: var(--accent); }
.pbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.big { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.big.red { background: var(--red); } .big.yellow { background: #E0A100; } .big.green { background: var(--green); }
.nil { display: inline-block; min-width: 2.4em; text-align: center; color: var(--muted); }
.drow > td { background: var(--bg); padding: 0; }
.drow .detail { border-top: 0; }

.whos { display: grid; gap: 10px; }
.whos h2 { margin: 0; font-size: 20px; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.wcard { background: var(--surface); color: var(--fg); border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.wtop { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.wtop b { font-size: 20px; color: var(--ink); }
.wtop span { color: var(--muted); }
.witem { all: unset; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.witem .big { width: 14px; height: 14px; margin-top: 6px; }
.witem b { color: var(--ink); }
.witem:hover b { color: var(--accent); }
.witem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.verdict { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.plain { color: var(--muted); }
.board td.num { text-align: right; }
.todos { display: grid; gap: 4px; background: var(--surface); color: var(--fg); border-radius: 10px; padding: 8px 14px; }
.todo { padding: 8px 0; border-bottom: 1px solid var(--line); }
.todo:last-child { border-bottom: 0; }
.big.none { background: transparent; border: 2px solid var(--muted); width: 10px; height: 10px; }
.weekbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.weekbar b { font-size: 18px; color: var(--ink); }
.btn[disabled] { opacity: .4; cursor: default; }
table.week { min-width: 680px; }
table.week td.num, table.week th.num { text-align: right; }
table.week tr.tot td { font-weight: 700; border-top: 2px solid var(--line); }
.verdict.eng { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
details.allrec { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
details.allrec summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--ink); list-style: none; }
details.allrec summary::-webkit-details-marker { display: none; }
details.allrec summary::before { content: "＋ "; color: var(--accent); }
details.allrec[open] summary::before { content: "－ "; }

.big.grey { background: transparent; border: 3px solid var(--muted); width: 12px; height: 12px; }
button.v.grey b { color: var(--band-muted); }
.prow[data-light="green"] td:first-child { box-shadow: none; }
.prow[data-light="grey"] td:first-child { box-shadow: inset 5px 0 0 var(--track); }
.nw { white-space: nowrap; }
.bar .t span:first-child { white-space: nowrap; }
.bar .t b { text-align: right; }
.detail .note { color: var(--muted); margin: 0 0 6px; }
.dmeta { margin: 0; color: var(--muted); }
.dask { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.dask p { margin: 4px 0 0; }
.dgap { margin: 0; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; }
.pmbox { background: var(--surface); border: 2px solid var(--ink); border-radius: 10px; padding: 14px 16px; }
details.more summary { cursor: pointer; color: var(--accent); list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "＋ "; }
details.more[open] summary::before { content: "－ "; }
.morebox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 10px; }
.pend { display: grid; gap: 6px; }
.pend p { margin: 0; color: var(--muted); }
.tgroup { display: grid; padding: 8px 0; border-bottom: 1px solid var(--line); }
.tgroup:last-child { border-bottom: 0; }
.tname { color: var(--ink); }
.tgroup .todo { border-bottom: 0; padding: 4px 0 4px 4px; }
.daybtn { margin-left: 8px; border: 1px solid var(--band-fg); background: transparent; color: var(--band-fg); border-radius: 6px; padding: 0 10px; }
@media (max-width: 700px) {
  .board table, .board tbody, .board tr, .board td { display: block; width: 100%; }
  .board table { min-width: 0; }
  .board thead { display: none; }
  .board tr.prow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .board tr.prow td { padding: 0; border: 0; box-shadow: none !important; }
  .board tr.prow td:first-child, .board tr.prow td:nth-child(2) { grid-column: 1 / -1; }
  .board tr.prow td:first-child::before { display: none; }
  .board tr.prow[data-light="red"] { box-shadow: inset 5px 0 0 var(--red); }
  .board tr.prow[data-light="yellow"] { box-shadow: inset 5px 0 0 #E0A100; }
  .board td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 16px; }
  .board td.num { text-align: left; }
  .board tr.drow > td { padding: 0; }
  .morebox { grid-template-columns: 1fr; }
}

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--band-fg); border-radius: 999px; padding: 2px 14px; }
.tabs button[aria-current="page"] { background: var(--band-fg); color: var(--band); border-color: var(--band-fg); font-weight: 700; }
.code { font-family: var(--f-num); font-weight: 500; color: var(--ink); background: var(--track); border-radius: 4px; padding: 0 6px; margin-right: 6px; }
.code.big2 { font-size: 18px; }
.notes { display: grid; gap: 8px; }
.nitem { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: grid; gap: 6px; }
.nitem.pend { border: 2px solid #E0A100; }
.nitem p { margin: 0; }
.nhead { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.nhead a { color: var(--accent); }
.src { font-size: 16px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; }
.nitem textarea, .nbtn input { color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; width: 100%; }
.nbtn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nbtn input { width: auto; flex: 1 1 200px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.filters input[type="search"] { color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; min-width: 220px; }

@media (max-width: 860px) {
  .verdict { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phead, .detail, form.pm, .bars { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .bars { grid-template-columns: 1fr; }
  .verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crow { grid-template-columns: 5.5em minmax(0, 1fr) 6.5em; }
}
/* --- 新增：登入畫面 --- */
.login{max-width:420px;margin:48px auto;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:8px;text-align:center}
.login p{color:var(--muted)}

.sample{display:inline-block;margin-left:4px;padding:0 4px;border-radius:3px;background:#fde68a;color:#7c4a03;font-size:11px}