:root {
  --ink: #1d2a2c;
  --paper: #f4f5f2;
  --card: #ffffff;
  --line: #d6dad4;
  --muted: #5d6b6d;
  --ok: #1f7a4d;
  --bad: #b3372b;
  --accent: #2c5f66;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8ecea;
    --paper: #151a1b;
    --card: #1e2527;
    --line: #333d3f;
    --muted: #9aa8aa;
    --ok: #4cc38a;
    --bad: #f0786c;
    --accent: #6fb3bb;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
}
main { max-width: 34rem; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; letter-spacing: .02em; }
.sub { color: var(--muted); margin: 0 0 2rem; }
.entry {
  display: block;
  padding: 1.1rem 1.25rem;
  margin-bottom: .9rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}
.entry:hover, .entry:focus-visible { border-color: var(--accent); outline: none; }
.entry b { display: block; font-size: 1.1rem; }
.entry span { color: var(--muted); font-size: .95rem; }
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
}
.panel h2 { font-size: 1rem; margin: 0 0 .5rem; }
.row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.row:first-of-type { border-top: 0; }
.ok { color: var(--ok); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }
.note { color: var(--muted); font-size: .9rem; margin-top: 1.5rem; }
.copy { color: var(--muted); font-size: .75rem; text-align: center; margin: 1.2rem 0 .5rem; }
a { color: var(--accent); }

/* ---------- 表單與按鈕 ---------- */
label { display: block; font-size: .95rem; margin: .9rem 0 .25rem; color: var(--muted); }
input, select, textarea {
  width: 100%;
  font: inherit;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
button {
  font: inherit;
  padding: .6rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.danger { color: var(--bad); }
button.small { padding: .25rem .6rem; font-size: .88rem; }
button:disabled { opacity: .55; cursor: not-allowed; }
.err { color: var(--bad); min-height: 1.6em; margin: .75rem 0 0; }
.big-input { font-size: 1.25rem; padding: .85rem 1rem; letter-spacing: .08em; }
.full { width: 100%; margin-top: 1.25rem; padding: .9rem; font-size: 1.1rem; }

/* ---------- 管理端 ---------- */
.wide { max-width: 64rem; }
.topbar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 1.25rem 0 1rem; border-bottom: 1px solid var(--line); }
.tabs button { white-space: nowrap; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; padding: .6rem .8rem; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--accent); font-weight: 700; }
.toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
th, td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .95rem; }
th { color: var(--muted); font-weight: 600; background: var(--paper); }
td.actions { text-align: right; }
td.actions button { margin: .12rem 0 .12rem .3rem; }
.tag { display: inline-block; padding: 0 .5rem; border-radius: 4px; border: 1px solid var(--line); font-size: .85rem; }
.tag.ok { color: var(--ok); border-color: var(--ok); }
.tag.bad { color: var(--bad); border-color: var(--bad); }
.table-wrap { overflow-x: auto; }
dialog { border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); padding: 1.25rem 1.5rem; width: min(30rem, 92vw); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.dlg-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
.hint { color: var(--muted); font-size: .88rem; margin: .25rem 0 0; }
.empty { color: var(--muted); padding: 1.5rem 0; }

/* ---------- 員工端：日報表單與照片 ---------- */
button.big { font-size: 1.15rem; padding: 1rem; }
.readonly { padding: .65rem .75rem; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); min-height: 2.9rem; }
textarea.big-input { font-size: 1.05rem; letter-spacing: normal; line-height: 1.6; resize: vertical; }
select.big-input { letter-spacing: normal; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.tile { position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: .85rem; }
.tile .x { position: absolute; top: 2px; right: 2px; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; line-height: 1; background: rgba(0,0,0,.6); border: 0; color: #fff; font-size: 1.1rem; }
.tile .st { position: absolute; left: 0; right: 0; bottom: 0; padding: .15rem .3rem; font-size: .78rem; background: rgba(0,0,0,.62); color: #fff; text-align: center; }
.tile .st.ok { background: rgba(31,122,77,.85); }
.tile .st.bad { background: rgba(179,55,43,.92); }
.tile .st button { all: unset; cursor: pointer; text-decoration: underline; }
.tile .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.tile .no { position: absolute; left: 3px; top: 3px; padding: 0 .35rem; font-size: .75rem; border-radius: 4px; background: rgba(0,0,0,.6); color: #fff; }
.rep { display: block; width: 100%; text-align: left; padding: .8rem 1rem; margin-bottom: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.rep b { display: block; }
.rep span { color: var(--muted); font-size: .9rem; }
.kv { display: grid; grid-template-columns: 5.5rem 1fr; gap: .25rem .75rem; margin: 0 0 1rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
dialog .photo-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
dialog { max-height: 90vh; overflow-y: auto; }
a.tile { display: block; color: inherit; text-decoration: none; }

/* 施工位置快速按鈕 */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .5rem; }
.chips:empty { display: none; }
.chip { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 1rem; cursor: pointer; min-height: 2.4rem; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 管理端子頁籤 */
.subtabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.subtabs button { padding: .3rem .85rem; font-size: .92rem; border-radius: 999px; }
.subtabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tagchip { display: inline-block; padding: 0 .5rem; margin: 0 .2rem .2rem 0; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-size: .82rem; }
.tagbox { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; border: 1px solid var(--line); border-radius: 6px; padding: .3rem; background: var(--card); }
.tagbox input { border: 0; flex: 1; min-width: 7rem; padding: .25rem; background: transparent; }
.tagbox .tagchip button { all: unset; cursor: pointer; margin-left: .3rem; color: var(--muted); }

/* 報價單編輯 */
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 .9rem; }
.qline { border: 1px solid var(--line); border-radius: 8px; padding: .55rem; margin-bottom: .6rem; background: var(--card); }
.qrow1 { display: grid; grid-template-columns: 1.6rem minmax(9rem, 1fr) 5.2rem 4.4rem 6.5rem 6.5rem auto auto; gap: .4rem; align-items: center; }
.qrow2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .4rem; margin-top: .4rem; }
.qline input { padding: .35rem .5rem; }
.qno { color: var(--muted); text-align: center; }
.q-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.q-star.on { background: #f5c542; border-color: #d9a400; color: #fff; }
.q-hint { margin: .25rem 0 0; min-height: 1em; }
.qtotals { max-width: 22rem; margin-left: auto; }
.qtotals .trow { display: flex; justify-content: space-between; align-items: center; padding: .25rem 0; }
.qtotals .total { border-top: 2px solid var(--line); font-size: 1.15rem; margin-top: .3rem; padding-top: .5rem; }
@media (max-width: 720px) { .qrow1 { grid-template-columns: 1.6rem 1fr 1fr; } .qrow1 .q-name { grid-column: 2 / 4; } }

/* 施作數量 */
.works .wrow{margin-bottom:14px}
.works .wline{display:flex;gap:8px;margin-top:8px}
.works .wline .big-input{margin:0}
.works .w-qty{flex:1;min-width:0}
.works .w-unit{width:110px;flex:none}
.works .wdel{flex:none;width:48px;font-size:1.4rem;line-height:1;padding:0}
.works select,.works input{width:100%;margin:0 0 8px}
.works .wline input{margin:0}
.works .w-qty{flex:1;min-width:0;width:auto}
.works .w-unit{width:110px;flex:none}
.works .wrow{padding-bottom:6px;border-bottom:1px dashed #b9c0c6}
.works .wrow:last-child{border-bottom:0}
.toolbar > .hint { flex: 1 1 18rem; min-width: 0; margin: 0; }
.toolbar button, button.small { white-space: nowrap; flex: none; }
dialog.wide { width: min(52rem, 96vw); }
dialog.wide th, dialog.wide td { white-space: nowrap; }
dialog.wide td:nth-child(5) { white-space: normal; min-width: 8rem; }

.radios { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.radios .opt { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 1rem; }
.radios .opt input { width: auto; margin: 0; }
.tab-badge { display: inline-block; min-width: 1.2em; padding: 0 .35em; margin-left: .3em; border-radius: 999px; background: #d33; color: #fff; font-size: .75rem; line-height: 1.4; text-align: center; }
#guide-dlg h3 { margin: .2rem 0 .4rem; font-size: 1.2rem; }
#guide-dlg p { line-height: 1.7; margin: 0 0 .8rem; }
.guide-step { color: var(--muted); font-size: .85rem; }
.guide-btns { display: flex; gap: .6rem; justify-content: flex-end; margin-top: .5rem; }
.guide-btns button { flex: 1; }
.guide-skip { text-align: center; margin: .6rem 0 0 !important; font-size: .9rem; }
.guide-news { padding-left: 1.1rem; margin: 0 0 .8rem; line-height: 1.6; }
.guide-news li { margin-bottom: .6rem; }
.guide-news span { color: var(--muted); font-size: .92rem; }

.gal-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .5rem .75rem; }
.gal-filters label { margin-top: 0; font-size: .85rem; }
.gal-bar { align-items: center; gap: .5rem; flex-wrap: wrap; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.gal-tile { position: relative; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.gal-tile.on { border-color: var(--accent); }
.gal-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; cursor: zoom-in; background: #ddd; }
.gal-chk { position: absolute; top: 4px; left: 4px; margin: 0; padding: 4px; background: rgba(255,255,255,.85); border-radius: 6px; line-height: 0; }
.gal-chk input { width: 1.2rem; height: 1.2rem; margin: 0; }
.gal-tag { position: absolute; top: 4px; right: 4px; background: rgba(179,55,43,.92); color: #fff; font-size: .72rem; padding: 0 .35rem; border-radius: 4px; }
.gal-cap { padding: .25rem .4rem; font-size: .8rem; cursor: pointer; line-height: 1.35; }
.gal-cap span { color: var(--muted); }
#gal-dlg, #pl-dlg { width: min(64rem, 96vw); max-height: 96vh; padding: .75rem; }
.gal-top, .gal-acts { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.gal-stage { display: flex; align-items: center; gap: .4rem; margin: .5rem 0; }
.gal-stage img { flex: 1; min-width: 0; max-height: 68vh; object-fit: contain; background: #111; border-radius: 6px; }
.gal-nav { width: 2.6rem; height: 4rem; padding: 0; font-size: 1.8rem; flex: none; }
.gal-info { font-size: .92rem; margin-bottom: .5rem; }
@media (max-width: 600px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } .gal-nav { width: 2rem; } }
.guide-img { display: block; max-width: 100%; max-height: 50vh; margin: 0 auto .8rem; border-radius: 6px; }

/* ---------- 管理端：手機版選單（三條線）---------- */
.menu-btn { display: none; }
.menu-panel { display: none; }
@media (max-width: 720px) {
  #app .topbar { flex-wrap: nowrap; align-items: center; }
  #app .topbar .sub { display: none; }
  #app > .tabs { display: none; }
  .menu-btn { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 2.9rem; height: 2.9rem; padding: 0; flex: none; border-radius: .6rem; }
  .menu-btn span { display: block; width: 1.4rem; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .15s, opacity .15s; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu-panel:not([hidden]) { display: block; background: var(--card); border: 1px solid var(--line); border-radius: .75rem; margin: .5rem 0 1rem; padding: .4rem; max-height: 75vh; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  .menu-panel .mp-who { padding: .6rem .8rem; color: var(--muted); font-size: .95rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
  .menu-panel button { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: .5rem; padding: .8rem .9rem; font-size: 1.05rem; }
  .menu-panel button[aria-current="true"] { background: var(--paper); font-weight: 700; color: var(--accent); }
  .menu-panel .mp-sep { border-top: 1px solid var(--line); margin: .3rem 0; }
  .menu-panel .mp-logout { color: var(--bad); }
}

/* ---------- 管理端：手機版整體規格（只影響 body.admin、寬度 720px 以下）----------
   字級：標題 1.3rem／小標 1.05rem／內文 16px／說明 13px。
   按鈕與輸入框高度一致（44px），表格改成卡片，子分頁單排可滑動。 */
@media (max-width: 720px) {
  body.admin { font-size: 16px; line-height: 1.6; }
  body.admin main { padding: 1.1rem 1rem calc(2.5rem + env(safe-area-inset-bottom)); }
  body.admin h1 { font-size: 1.3rem; margin: 0; }
  body.admin .panel { padding: .9rem 1rem; margin-top: 0; border-radius: 12px; }
  body.admin .panel h2, body.admin h2 { font-size: 1.05rem; }
  body.admin .hint { font-size: .82rem; line-height: 1.5; }
  body.admin label { font-size: .88rem; margin: .75rem 0 .25rem; }

  body.admin input, body.admin select, body.admin textarea { font-size: 16px; min-height: 44px; padding: .55rem .75rem; border-radius: 10px; max-width: 100%; }
  body.admin textarea { min-height: 5.5rem; }
  body.admin input[type="checkbox"], body.admin input[type="radio"] { min-height: 0; width: 1.25rem; height: 1.25rem; }
  body.admin input[type="file"] { min-height: 0; width: 100% !important; padding: .5rem; }
  body.admin input[type="date"] { -webkit-appearance: none; appearance: none; }
  body.admin button { font-size: 16px; min-height: 44px; padding: .5rem 1rem; border-radius: 10px; }
  body.admin button.small { font-size: .9rem; min-height: 40px; padding: .35rem .8rem; }

  body.admin .toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .6rem; margin-bottom: .75rem; }
  body.admin .toolbar > * { flex: none !important; }
  body.admin .toolbar > input, body.admin .toolbar > select { width: 100% !important; max-width: none !important; }

  /* 子分頁：單排、可左右滑 */
  body.admin .subtabs { flex-wrap: nowrap; overflow-x: auto; gap: .45rem; margin: 0 -1rem .8rem; padding: 0 1rem .2rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  body.admin .subtabs::-webkit-scrollbar { display: none; }
  body.admin .subtabs button { flex: none; min-height: 38px; padding: .3rem 1rem; font-size: .95rem; white-space: nowrap; }

  /* 表格 → 卡片 */
  body.admin .table-wrap { overflow: visible; }
  body.admin table.cards { border: 0; background: none; min-width: 0; }
  body.admin table.cards thead { display: none; }
  body.admin table.cards tbody, body.admin table.cards tr, body.admin table.cards td { display: block; }
  body.admin table.cards tr { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .65rem .9rem; margin-bottom: .6rem; }
  body.admin table.cards td { border: 0; padding: .18rem 0; font-size: .95rem; display: flex; gap: .7rem; align-items: flex-start; text-align: left; min-width: 0; word-break: break-word; }
  body.admin table.cards td::before { content: attr(data-l); color: var(--muted); font-size: .8rem; flex: none; width: 4.6em; padding-top: .18rem; }
  body.admin table.cards td:not([data-l])::before { display: none; }
  body.admin table.cards td:first-child { font-weight: 700; font-size: 1.02rem; padding-bottom: .3rem; }
  body.admin table.cards td:first-child::before { display: none; }
  body.admin table.cards td:empty { display: none; }
  body.admin table.cards td.actions { flex-wrap: wrap; gap: .5rem; margin-top: .45rem; padding-top: .6rem; border-top: 1px solid var(--line); white-space: normal; min-width: 0; }
  body.admin table.cards td.actions::before { display: none; }
  body.admin table.cards td.actions button, body.admin table.cards td.actions a { flex: 1 1 auto; margin: 0; text-align: center; }
  body.admin table.cards td[colspan] { display: block; color: var(--muted); text-align: center; padding: 1rem 0; }

  /* 相簿篩選：兩欄、可收合 */
  body.admin .gal-filters { grid-template-columns: 1fr 1fr; gap: .4rem .6rem; }
  body.admin .gal-filters > div:last-child { grid-column: 1 / -1; }
  body.admin details.filt > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: space-between; list-style: none; }
  body.admin details.filt > summary::-webkit-details-marker { display: none; }
  body.admin details.filt > summary::after { content: "▾"; color: var(--muted); }
  body.admin details.filt[open] > summary::after { content: "▴"; }
  body.admin .gal-bar { gap: .5rem; }
  body.admin .gal-bar button { flex: 1 1 auto !important; }

  /* 彈出視窗：從畫面下方滑出，單手好按 */
  body.admin dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 92vh; overflow-y: auto; padding: 1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom)); }
  body.admin .dlg-actions { position: sticky; bottom: calc(-1.1rem - env(safe-area-inset-bottom)); background: var(--card); padding-top: .6rem; }
  body.admin .dlg-actions { flex-wrap: wrap; }
  body.admin .dlg-actions button { flex: 1 1 calc(50% - .3rem); white-space: nowrap; }
  body.admin .dlg-actions button.primary { flex: 1 1 100%; order: -1; }
}
details.filt > summary { cursor: pointer; font-weight: 600; list-style: none; }
details.filt > summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
  body.admin .toolbar.gal-bar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  body.admin .toolbar.gal-bar > span:first-child { flex: 1 1 100% !important; }
  body.admin .toolbar.gal-bar button { flex: 1 1 28% !important; padding: .4rem .3rem; font-size: .92rem; }
  body.admin .toolbar.gal-bar > label { flex: 1 1 100% !important; display: flex; align-items: center; gap: .5rem; }
}

/* 預覽身分的提示條 */
.pv-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; background: #8a5a00; color: #fff; padding: .55rem .9rem; border-radius: 0 0 10px 10px; margin: -1.1rem -1rem .8rem; font-size: .92rem; }
.pv-bar[hidden] { display: none; }
.pv-bar button { background: #fff; color: #5a3b00; border: 0; font-weight: 700; min-height: 36px; padding: .25rem .9rem; }
@media (min-width: 721px) { .pv-bar { margin: -2.5rem -1.25rem 1rem; } }

/* 請款單 */
.brow1 { display: grid; grid-template-columns: 1.6rem minmax(9rem, 1fr) 5.6rem 4.4rem 6.2rem 5.6rem 6rem auto; gap: .4rem; align-items: end; }
.brow1 .bf { display: block; margin: 0; }
.brow1 .bf > span { display: block; font-size: .7rem; color: var(--muted, #777); margin-bottom: 1px; }
.brow1 .qno, .brow1 .b-name, .brow1 .b-amt, .brow1 .b-del { align-self: end; }
.b-amt { text-align: right; font-weight: 600; padding-bottom: .4rem; }
.badj { display: grid; grid-template-columns: minmax(8rem, 1fr) 5.5rem 5.5rem 7rem auto; gap: .4rem; margin-bottom: .4rem; align-items: center; }
.bo-chk { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.bo-chk label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.bo-chk input { width: auto; }
@media (max-width: 720px) {
  .brow1 { grid-template-columns: 1fr 1fr; align-items: end; }
  .brow1 .qno { display: none; }
  .brow1 .b-name { grid-column: 1 / 3; }
  .brow1 .b-amt { text-align: left; font-size: 1.05rem; }
  .brow1 .b-del { justify-self: end; }
  .be-mode { white-space: normal !important; text-align: left; max-width: 100%; flex: 1 1 100%; }
  .badj { grid-template-columns: 1fr 1fr; }
  .badj .ba-label { grid-column: 1 / 3; }
}

/* 施作項目：規格小標籤 */
.spec-wrap { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; min-width: 0; flex: 1 1 auto; }
.schip { display: inline-flex; align-items: center; gap: .55rem; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .92rem; white-space: nowrap; }
.schip a { font-size: .78rem; color: var(--accent); text-decoration: none; padding: .2rem .1rem; }

/* 日報彈窗：標題列固定在上方，右上角 ✕ 關閉；照片右上角 × 刪除 */
.dlg-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--card); margin: 0 -1.5rem .75rem; padding: 1rem 1.5rem .5rem; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; }
.dlg-x { flex: none; width: 2.2rem; height: 2.2rem; padding: 0; border-radius: 50%; line-height: 1; font-size: 1.1rem; }
.pt { position: relative; }
.pt .pdel { min-width: 0; min-height: 0; aspect-ratio: 1; flex: none; position: absolute; top: 3px; right: 3px; z-index: 2; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 0; line-height: 1; font-size: 1.15rem; background: rgba(179,55,43,.92); color: #fff; }
@media (max-width: 720px) { body.admin .dlg-head { margin: 0 -1rem .75rem; padding: 1rem 1rem .5rem; } }

details.fold > summary { cursor: pointer; padding: .55rem 0; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸"; display: inline-block; width: 1.1rem; color: var(--muted); }
details.fold[open] > summary::before { content: "▾"; }

.tag { white-space: nowrap; }
td.cl-t { min-width: 7.5rem; white-space: nowrap; line-height: 1.9; }
td.cl-b { min-width: 10rem; }
td.actions { white-space: nowrap; }

a.btn-link { display: inline-block; font: inherit; padding: .25rem .6rem; font-size: .88rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); text-decoration: none; white-space: nowrap; }
body.admin a.btn-link { font-size: .9rem; min-height: 40px; padding: .35rem .8rem; box-sizing: border-box; line-height: 1.6; }
.menu-panel .mp-home { padding: .8rem .9rem; font-size: 1.05rem; border-radius: .5rem; }
.topnav { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
dialog .photo-grid { margin-top: 1rem; }
dialog select + .photo-grid, dialog .photo-grid { margin-top: 1rem; }
dialog .dlg-head + * { scroll-margin-top: 4rem; }
.qgrid { align-items: end; }
.qgrid > div > label { margin-top: 0; }
.cv-steps { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; }
.cv-steps > * { flex: 1 1 12rem; text-align: center; box-sizing: border-box; }
.cv-steps label.cv-file { display: flex; flex-direction: column; gap: .25rem; margin: 0; font-size: .9rem; }
.cv-steps label.cv-file input { width: 100%; font-size: .85rem; }

dialog:has(.dlg-head), body.admin dialog:has(.dlg-head) { padding-top: 0; }

/* 管理功能按鈕：管理員專用分頁不放在頂端選單 */
.tabs button.admintab{display:none}
.mgmt-wrap{position:relative;display:inline-block}
.mgmt-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:10rem;background:var(--card,#fff);border:1px solid var(--line,#ddd);border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.15);padding:.3rem;display:flex;flex-direction:column;gap:.15rem}
.mgmt-menu[hidden]{display:none}
.mgmt-menu button{width:100%;text-align:left;border:0;background:transparent;padding:.55rem .7rem;border-radius:8px;font:inherit;min-height:40px}
.mgmt-menu button:hover,.mgmt-menu button[aria-current="true"]{background:rgba(0,0,0,.07)}
#btn-mgmt.on{font-weight:700}
.kindbox{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:.2rem 0 .5rem}
label.chk{display:inline-flex;align-items:center;gap:.35rem;margin:.15rem 0;font-weight:400}
label.chk input{width:auto;margin:0}

/* 從施作數量帶入：欄位不要被擠成直排，窄螢幕改成左右捲動 */
.im-tbl{min-width:46rem;table-layout:auto}
.im-tbl th,.im-tbl td{white-space:nowrap;vertical-align:middle}
.im-tbl td:nth-child(2){white-space:normal;min-width:11rem}
.im-tbl td .hint{white-space:nowrap;font-size:.75rem}
.im-tbl th:first-child,.im-tbl td:first-child{width:2rem}

/* 人員列表：姓名、角色不要被擠成直排；操作按鈕自動換行 */
.utbl th,.utbl td{vertical-align:middle}
.utbl td:nth-child(1),.utbl td:nth-child(2),.utbl td:nth-child(4),.utbl th{white-space:nowrap}
.utbl td:nth-child(3){min-width:8rem}
.utbl td:nth-child(5){min-width:7rem}
.utbl td.actions{display:table-cell;white-space:normal;min-width:15rem;text-align:right}
.utbl td.actions .small{margin:.15rem 0 .15rem .25rem}
.note.c { text-align: center; }