:root{
    --paper:#F8F6F0; --paper-dim:#F1EEE4; --ink:#1E2A3A; --ink-soft:#4A5568;
    --rule-red:#A13B3B; --rule-red-dim:#C98F8F; --gold:#B8912F; --line:#DCD6C6; --white:#FFFFFF;
    --green:#3F7D4F; --hl-red:#C0392B; --blue:#2C5C8A; --focus-bg:#FFFDF6; --gold-tint-bg:#FFFBF0;
  }
  /* 深色模式變數覆蓋:自動跟隨系統設定(prefers-color-scheme),除非使用者手動強制指定了淺色或深色(data-theme屬性) */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#1A1F2B; --paper-dim:#242A38; --ink:#E8E6E0; --ink-soft:#A0AEC0;
      --rule-red:#C85850; --rule-red-dim:#8A5550; --gold:#D4A94A; --line:#3A4152; --white:#252B38;
      --green:#6FBF87; --hl-red:#E0685A; --blue:#6CA3D9; --focus-bg:#332C1A; --gold-tint-bg:#3A2E14;
    }
  }
  :root[data-theme="dark"]{
    --paper:#1A1F2B; --paper-dim:#242A38; --ink:#E8E6E0; --ink-soft:#A0AEC0;
    --rule-red:#C85850; --rule-red-dim:#8A5550; --gold:#D4A94A; --line:#3A4152; --white:#252B38;
    --green:#6FBF87; --hl-red:#E0685A; --blue:#6CA3D9; --focus-bg:#332C1A; --gold-tint-bg:#3A2E14;
  }
  *{box-sizing:border-box;}
  html, body{overflow-x:hidden; max-width:100vw;}
  body{margin:0; background:var(--paper-dim); font-family:'Noto Sans TC','Source Serif 4', serif; color:var(--ink);}

  /* ---------- Login ---------- */
  .login-screen{position:fixed; inset:0; background:var(--paper-dim); display:flex; align-items:center; justify-content:center; z-index:100;}
  .login-card{background:var(--paper); border:1px solid var(--ink); padding:36px 34px; width:320px; position:relative;}
  .login-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--rule-red);}
  .login-card h1{font-size:20px; margin:0 0 4px;}
  .login-card .sub{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); margin-bottom:22px;}
  .login-card label{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); display:block; margin:14px 0 4px;}
  .login-card input{width:100%; padding:9px 10px; border:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:13px; background:var(--white); color:var(--ink);}
  .login-card button{margin-top:20px; width:100%; padding:10px; background:var(--ink); color:var(--paper); border:none; font-family:'IBM Plex Mono', monospace; font-size:13px; cursor:pointer;}
  .login-card button:hover{background:var(--rule-red);}
  .login-error{color:var(--rule-red); font-family:'IBM Plex Mono', monospace; font-size:11.5px; margin-top:12px; min-height:14px;}
  .login-hint{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-soft); margin-top:18px; line-height:1.6; border-top:1px solid var(--line); padding-top:14px;}
  .login-card .about-toggle-btn{
    width:100%; background:none; border:none; color:var(--gold); font-family:'IBM Plex Mono',monospace;
    font-size:11px; padding:10px 0 0; margin-top:0; cursor:pointer; text-align:center;
  }
  .login-card .about-toggle-btn:hover{ color:var(--ink); background:none; }
  .about-panel{
    margin-top:10px; padding-top:12px; border-top:1px dashed var(--line);
    font-family:'Noto Sans TC', sans-serif; font-size:12px; color:var(--ink-soft); line-height:1.7; text-align:left;
  }
  .about-panel ul{ margin:6px 0; padding-left:20px; }
  .about-panel li{ margin-bottom:2px; }
  .about-version{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink-soft); margin-top:10px; text-align:center; }

  /* ---------- Layout ---------- */
  .app{display:none; grid-template-columns:250px 1fr; min-height:100vh; max-width:100vw; overflow-x:hidden;}
  .app.show{display:grid;}
  .sidebar{background:var(--paper); border-right:2px solid var(--ink); display:flex; flex-direction:column;}
  .sidebar-head{padding:18px 16px 12px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
  .sidebar-head h1{font-size:15px; margin:0 0 4px; font-weight:700;}
  .sidebar-head .sub{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink-soft);}
  .who .name{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--rule-red); text-align:right;}
  .role-badge{
    font-family:'IBM Plex Mono', monospace; font-size:9px; color:var(--gold); text-align:right;
    border:1px solid var(--gold); border-radius:2px; padding:1px 5px; display:inline-block; margin:2px 0 4px auto;
  }
  .who-actions{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px 8px; margin-top:4px; }
  .who button{background:none; border:none; font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink-soft); cursor:pointer; text-decoration:underline; padding:6px 0; text-align:right;}
  .who-actions-row2{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; margin-top:6px; padding-top:8px; border-top:1px dashed var(--line); } /* 第二排跟第一排用虛線隔開,登出在這一排,維持額外的視覺區隔 */
  .new-entry-btn{margin:12px 16px 8px; padding:9px 10px; background:var(--ink); color:var(--paper); border:none; font-family:'IBM Plex Mono', monospace; font-size:11.5px; cursor:pointer; text-align:left;}
  .turnaround-bar{
    margin:8px 16px 0; padding:8px 10px; background:var(--paper-dim); border:1px solid var(--gold);
    display:flex; align-items:center; gap:6px; font-family:'IBM Plex Mono', monospace; font-size:10.5px;
  }
  .turnaround-label{ color:var(--gold); flex-shrink:0; }
  .turnaround-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:'Noto Sans TC',sans-serif; font-weight:700; color:var(--ink); }
  #turnaroundSwitchBtn{
    flex-shrink:0; background:none; border:1px solid var(--line); color:var(--ink-soft); cursor:pointer;
    font-size:10px; padding:3px 6px; border-radius:2px;
  }
  #turnaroundSwitchBtn:hover{ border-color:var(--gold); color:var(--gold); }
  .ms-label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft); margin-bottom:2px; }
  .ms-input{ width:100%; padding:6px 6px; border:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:11px; }
  .turnaround-item{
    display:flex; align-items:center; gap:8px; padding:8px 6px; border-bottom:1px dashed var(--line); cursor:pointer;
  }
  .turnaround-item:hover{ background:var(--paper-dim); }
  .turnaround-item.active{ background:var(--gold-tint-bg); }
  .turnaround-item .name{ flex:1; font-family:'Noto Sans TC',sans-serif; font-size:12.5px; }
  .turnaround-item .active-tag{ font-family:'IBM Plex Mono',monospace; font-size:9px; color:var(--green); border:1px solid var(--green); padding:1px 5px; border-radius:2px; }

  .dash-section{ margin-bottom:18px; }
  .dash-section-title{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--gold); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.05em; }
  .dash-progress-bar{ height:10px; background:var(--paper-dim); border-radius:5px; overflow:hidden; margin-bottom:6px; }
  .dash-progress-fill{ height:100%; background:var(--gold); border-radius:5px; transition:width 0.3s; }
  .dash-progress-labels{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft); margin-bottom:4px; }
  .dash-counter-text{ font-family:'Noto Sans TC',sans-serif; font-size:13px; font-weight:600; color:var(--blue); }
  .dash-heatmap{ display:grid; grid-template-columns:repeat(10, 1fr); gap:3px; }
  .dash-heatmap-toggle-btn{
    background:none; border:none; font-family:'IBM Plex Mono', monospace; font-size:10.5px;
    color:var(--gold); text-decoration:underline; cursor:pointer; padding:0;
  }
  .dash-heat-cell{
    aspect-ratio:1; border-radius:2px; font-family:'IBM Plex Mono',monospace; font-size:8px;
    display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
  }
  .dash-heat-cell.has-entry{ background:#C8E0CC; color:var(--ink); }
  .dash-heat-cell.no-entry{ background:#F5E0DC; color:var(--ink-soft); }
  .dash-heat-cell.future{ background:var(--paper-dim); opacity:0.4; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .dash-heat-cell.has-entry{ background:#1F4A2E; color:#8FD4A5; }
    :root:not([data-theme="light"]) .dash-heat-cell.no-entry{ background:#4A2320; color:#D99C94; }
  }
  :root[data-theme="dark"] .dash-heat-cell.has-entry{ background:#1F4A2E; color:#8FD4A5; }
  :root[data-theme="dark"] .dash-heat-cell.no-entry{ background:#4A2320; color:#D99C94; }
  .dash-empty{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); padding:8px 0; }
  .dash-issue-row{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12.5px; }
  .dash-issue-row .days{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--hl-red); flex-shrink:0; }
  .dash-stat-row{ display:flex; align-items:center; gap:8px; padding:4px 0; }
  .dash-stat-row .label{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink); width:110px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dash-stat-bar-wrap{ flex:1; background:var(--paper-dim); border-radius:3px; overflow:hidden; height:14px; }
  .dash-stat-bar{ height:100%; background:var(--blue); }
  .dash-stat-row .count{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); width:24px; text-align:right; flex-shrink:0; }
  .issue-item{ display:flex; align-items:center; gap:8px; padding:8px 6px; border-bottom:1px dashed var(--line); cursor:pointer; }
  .issue-item:hover{ background:var(--paper-dim); }
  .issue-item .title{ flex:1; font-family:'Noto Sans TC',sans-serif; font-size:12.5px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .issue-item .tag{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft); flex-shrink:0; }
  .status-badge{ font-family:'IBM Plex Mono',monospace; font-size:9px; padding:2px 6px; border-radius:2px; flex-shrink:0; white-space:nowrap; }
  .status-badge.open{ color:var(--hl-red); border:1px solid var(--hl-red); background:#FFF5F5; }
  .status-badge.inprogress{ color:var(--gold); border:1px solid var(--gold); background:var(--gold-tint-bg); }
  .status-badge.resolved{ color:var(--green); border:1px solid var(--green); background:#F5FFF8; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .status-badge.open{ background:#3A1F1F; }
    :root:not([data-theme="light"]) .status-badge.inprogress{ background:#3A2E14; }
    :root:not([data-theme="light"]) .status-badge.resolved{ background:#1A3324; }
  }
  :root[data-theme="dark"] .status-badge.open{ background:#3A1F1F; }
  :root[data-theme="dark"] .status-badge.inprogress{ background:#3A2E14; }
  :root[data-theme="dark"] .status-badge.resolved{ background:#1A3324; }
  .status-choice-btn{ flex:1; padding:8px 6px; border:1px solid var(--line); background:var(--white); font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; border-radius:2px; }
  .status-choice-btn.current{ font-weight:700; }
  .status-choice-btn.open.current{ border-color:var(--hl-red); color:var(--hl-red); background:#FFF5F5; }
  .status-choice-btn.inprogress.current{ border-color:var(--gold); color:var(--gold); background:var(--gold-tint-bg); }
  .status-choice-btn.resolved.current{ border-color:var(--green); color:var(--green); background:#F5FFF8; }
  .timeline-item{ padding:8px 0; border-bottom:1px dashed var(--line); font-size:12.5px; }
  .timeline-item .tl-date{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--gold); font-weight:600; }
  .timeline-item .tl-section{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--ink-soft); margin-left:6px; }
  .new-entry-btn:hover{background:var(--rule-red);}
  .search-box-wrap{ padding:6px 16px 8px; }
  .search-input{
    width:100%; padding:7px 10px; border:1px solid var(--line); background:var(--white);
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink);
  }
  .search-input:focus{ outline:1px solid var(--gold); }
  .date-range-row{ display:flex; align-items:center; gap:4px; margin-top:6px; }
  .filter-has-image-row{
    display:flex; align-items:center; gap:5px; margin-top:6px; font-size:11px;
    font-family:'IBM Plex Mono', monospace; color:var(--ink-soft); cursor:pointer;
  }
  .filter-has-image-row input{ cursor:pointer; }
  .date-range-input{
    flex:1; min-width:0; padding:5px 4px; border:1px solid var(--line); background:var(--white);
    font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink);
  }
  .date-range-sep{ font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink-soft); flex-shrink:0; }
  #filterClearBtn{
    flex-shrink:0; background:none; border:1px solid var(--line); color:var(--ink-soft); cursor:pointer;
    font-size:11px; padding:5px 7px; border-radius:2px;
  }
  #filterClearBtn:hover{ border-color:var(--hl-red); color:var(--hl-red); }
  .entry-list{flex:1; overflow-y:auto; padding:4px 0 20px;}
  .version-footer{
    padding:10px 16px; border-top:1px solid var(--line); font-family:'IBM Plex Mono', monospace;
    font-size:9px; color:var(--ink-soft); line-height:1.6; text-align:center;
  }
  .entry-item{position:relative; padding:9px 16px 9px 20px; cursor:pointer; border-bottom:1px solid var(--line);}
  .entry-item::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:transparent;}
  .entry-item:hover{background:var(--paper-dim);}
  .entry-item.active{background:var(--paper-dim);}
  .entry-item.active::before{background:var(--rule-red);}
  .entry-item .d{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--rule-red);}
  .entry-item .t{font-size:12.5px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .entry-item .fmt{display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:9px; color:var(--gold); border:1px solid var(--gold); padding:0 4px; border-radius:2px; margin-right:5px;}
  .entry-del-btn{
    position:absolute; right:8px; top:9px; background:none; border:none; cursor:pointer;
    font-size:12px; opacity:0.35; padding:3px 5px; border-radius:3px; line-height:1;
  }
  .entry-item:hover .entry-del-btn{ opacity:0.7; }
  .entry-del-btn:hover{ opacity:1 !important; background:#FBEAEA; }

  /* ---------- Delete confirm modal ---------- */
  .confirm-overlay{ position:fixed; inset:0; background:rgba(30,42,58,0.6); z-index:250; display:none; align-items:center; justify-content:center; }
  .confirm-overlay.show{ display:flex; }
  .confirm-card{ background:var(--paper); border:1px solid var(--ink); max-width:360px; width:90%; padding:24px; position:relative; }
  .confirm-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--hl-red); }
  .confirm-card h3{ font-size:16px; margin:0 0 10px; color:var(--ink); }
  .confirm-card p{ font-size:13px; line-height:1.7; color:var(--ink-soft); margin:0 0 20px; white-space:pre-line; }
  .confirm-actions{ display:flex; gap:10px; justify-content:flex-end; }
  .phrase-row{ display:flex; gap:6px; align-items:center; margin-bottom:6px; }
  .phrase-btn{
    flex:1; text-align:left; padding:7px 10px; border:1px solid var(--line); background:var(--white);
    font-family:'Noto Sans TC', sans-serif; font-size:12.5px; color:var(--ink); cursor:pointer; border-radius:2px;
  }
  .phrase-btn:hover{ border-color:var(--gold); background:var(--gold-tint-bg); }
  .confirm-actions button{ font-family:'IBM Plex Mono',monospace; font-size:12px; padding:8px 16px; cursor:pointer; border-radius:2px; }
  .confirm-cancel-btn{ background:var(--white); border:1px solid var(--line); color:var(--ink-soft); }
  .confirm-cancel-btn:hover{ border-color:var(--ink); color:var(--ink); }
  .confirm-delete-btn{ background:var(--hl-red); border:1px solid var(--hl-red); color:#fff; }
  .confirm-neutral-btn{ background:var(--ink); border:1px solid var(--ink); color:#fff; }
  /* 這類「實心強調按鈕」故意拿--ink當背景色搭配寫死的白字;但--ink在深色模式下會變成淺色,
     白字配淺色背景會看不清楚,深色模式下改成固定的深色背景,維持按鈕該有的高對比,不隨主題翻轉 */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .confirm-neutral-btn{ background:#0F1520; border-color:#0F1520; }
    :root:not([data-theme="light"]) #continueConfirmBtn, :root:not([data-theme="light"]) #batchExportDocxBtn, :root:not([data-theme="light"]) #newEntryConfirmBtn{ background:#0F1520 !important; border-color:#0F1520 !important; }
  }
  :root[data-theme="dark"] .confirm-neutral-btn{ background:#0F1520; border-color:#0F1520; }
  :root[data-theme="dark"] #continueConfirmBtn, :root[data-theme="dark"] #batchExportDocxBtn, :root[data-theme="dark"] #newEntryConfirmBtn{ background:#0F1520 !important; border-color:#0F1520 !important; }
  /* 原生日期輸入框的圖示/日曆選擇器,瀏覽器是看color-scheme這個屬性決定用淺色系還是深色系圖示,
     不是看一般的color/background;沒設定時瀏覽器預設當作淺色背景處理,深色模式下圖示會融入背景看不清楚 */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) input[type="date"]{ color-scheme:dark; }
  }
  :root[data-theme="dark"] input[type="date"]{ color-scheme:dark; }
  .manual-download-item{
    display:block; padding:10px 14px; background:var(--paper-dim); border:1px solid var(--line); border-radius:6px;
    font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue); text-decoration:none; word-break:break-all;
  }
  .manual-download-item:hover{ border-color:var(--gold); background:var(--focus-bg); }
  .confirm-delete-btn:hover{ background:#a52f22; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .confirm-delete-btn:hover{ background:#8F3A32; } }
  :root[data-theme="dark"] .confirm-delete-btn:hover{ background:#8F3A32; }

  .main{display:flex; flex-direction:column; overflow-y:auto; min-width:0; overflow-x:hidden;}
  .topbar{padding:16px 28px 10px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); background:var(--paper); flex-wrap:wrap;}
  .topbar .field{display:flex; flex-direction:column; gap:2px; min-width:0;}
  .topbar label{font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--ink-soft);}
  .date-input{font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--rule-red); border:1px solid var(--line); padding:5px 6px; background:var(--white);}
  .format-select{font-family:'IBM Plex Mono', monospace; font-size:12px; border:1px solid var(--line); padding:5px 6px; background:var(--white); color:var(--ink);}
  .title-input{flex:1; min-width:220px; border:1px solid var(--line); padding:6px 8px; background:var(--white); font-family:'Noto Sans TC', sans-serif; font-size:15px; font-weight:700; color:var(--ink);}
  .view-mode-btn{
    font-family:'IBM Plex Mono', monospace; font-size:11px; padding:6px 12px; cursor:pointer;
    border:1px solid var(--gold); background:var(--gold-tint-bg); color:var(--gold); border-radius:2px; white-space:nowrap;
  }
  .view-mode-btn.editing{ border-color:var(--green); background:#F3FAF4; color:var(--green); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .view-mode-btn.editing{ background:#1F3324; } }
  :root[data-theme="dark"] .view-mode-btn.editing{ background:#1F3324; }
  .offline-badge{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:#fff; background:var(--hl-red);
    padding:3px 8px; border-radius:2px; white-space:nowrap;
  }
  .pending-update-badge{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:#1E2A3A; background:var(--gold);
    padding:3px 8px; border-radius:2px; white-space:nowrap; cursor:default;
  }
  .save-status{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-soft); white-space:nowrap; margin-left:auto;}
  .presence-bar{padding:5px 28px; display:flex; gap:8px; align-items:center; min-height:14px; background:var(--paper);}
  .presence-chip{
    font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:700; color:#27500A;
    display:inline-flex; align-items:center; gap:8px; background:#EAF3DE; border:1px solid var(--green);
    border-radius:16px; padding:8px 14px 8px 11px;
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .presence-chip{ background:#1F3324; color:#8FD4A5; } }
  :root[data-theme="dark"] .presence-chip{ background:#1F3324; color:#8FD4A5; }
  .presence-dot{ width:9px; height:9px; border-radius:50%; background:var(--green); flex-shrink:0; animation:presencePulse 1.4s ease-in-out infinite; }
  @keyframes presencePulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.4; transform:scale(0.75);} }
  #toastContainer{
    position:fixed; top:70px; right:16px; z-index:250; display:flex; flex-direction:column; gap:8px; align-items:flex-end;
    pointer-events:none; /* 容器本身不擋滑鼠,個別toast元素自己視需要開放互動 */
  }
  .app-toast{
    background:var(--ink); color:var(--paper); border-radius:6px; padding:9px 14px; font-size:12px;
    display:flex; align-items:center; gap:8px; box-shadow:0 3px 10px rgba(0,0,0,0.2); max-width:320px;
    animation:appToastIn 0.35s ease-out;
  }
  .app-toast.err{ background:var(--hl-red); color:#fff; }
  .app-toast.leaving{ animation:appToastOut 0.35s ease-in forwards; }
  @keyframes appToastIn{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }
  @keyframes appToastOut{ from{opacity:1;} to{opacity:0; transform:translateY(-8px);} }
  .presence-chip::before{content:"●"; font-size:7px;}

  .doc-wrap{flex:1; padding:20px 28px 60px;}

  /* ---------- Format 1 table ---------- */
  .f1-table{width:100%; table-layout:fixed; border-collapse:collapse; background:var(--white); border:1.5px solid var(--ink);}
  .f1-table th{background:var(--paper-dim); font-size:12.5px; font-weight:700; padding:6px 8px; border:1px solid var(--ink); font-family:'Noto Sans TC', sans-serif;}
  .f1-table td{border:1px solid var(--line); vertical-align:top; padding:0;}
  .col-date{width:60px; text-align:center;}
  .col-shift{width:64px; text-align:center;}
  .col-remark{width:150px;}
  .legend-row td{background:var(--paper-dim); padding:6px 10px; font-size:12px; color:var(--rule-red); font-weight:600;}
  .section-row td{background:#EDE7D6; padding:7px 10px; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:0.02em;}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .section-row td{ background:#2E3548; } }
  :root[data-theme="dark"] .section-row td{ background:#2E3548; }
  .export-toggle-label{
    font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--ink-soft); font-weight:normal;
    display:inline-flex; align-items:center; gap:4px; cursor:pointer; letter-spacing:normal;
  }
  .export-toggle-label input{ cursor:pointer; }

  .cell-input{width:100%; border:none; background:transparent; padding:6px 6px; font-family:'IBM Plex Mono', monospace; font-size:12px; text-align:center; color:var(--ink);}
  .cell-input:focus{outline:1px solid var(--gold); background:var(--focus-bg);}
  .task-cell{padding:5px 8px;}
  .task-row{display:flex; gap:6px; align-items:flex-start; min-width:0;}
  .task-check{font-size:13px; color:var(--ink-soft); line-height:1.6; padding-top:6px; user-select:none; flex-shrink:0;}
  .task-line{ display:flex; align-items:flex-start; gap:6px; }
  .item-time-input{
    flex-shrink:0; width:82px; padding:5px 4px; border:1px solid var(--line); background:var(--paper-dim);
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink); margin-top:2px; border-radius:2px;
  }
  .item-time-input:focus{ outline:none; border-color:var(--gold); background:var(--focus-bg); }
  .item-time-input.warn{ border:1px solid var(--hl-red); color:var(--hl-red); background:#FFF5F5; }
  .voice-input-btn{
    flex-shrink:0; width:28px; height:28px; margin-top:2px; padding:0; border-radius:50%;
    border:1px solid var(--line); background:var(--white); color:var(--ink-soft); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:all 0.15s;
  }
  .voice-input-btn:hover{ border-color:var(--gold); color:var(--gold); }
  .voice-input-btn.recording{ background:var(--hl-red); border-color:var(--hl-red); color:var(--white); animation:voicePulse 1.2s infinite; }
  @keyframes voicePulse{ 0%,100%{opacity:1;} 50%{opacity:0.6;} }
  .task-line .task-text{ flex:1; min-width:0; }
  .task-body{flex:1; min-width:0;}
  .task-text{width:100%; border:none; background:transparent; font-family:'Noto Sans TC', sans-serif; font-size:13.5px; line-height:1.7; resize:none; overflow:hidden; padding:5px 2px; color:var(--ink); word-break:break-word; overflow-wrap:anywhere;}
  .task-text.hl{color:var(--hl-red); font-weight:500;}
  .task-text:focus{outline:1px solid var(--gold); background:var(--focus-bg);}
  .sub-text{width:100%; border:none; background:transparent; font-family:'Noto Sans TC', sans-serif; font-size:12.5px; line-height:1.6; resize:none; overflow:hidden; padding:2px 2px 5px 14px; color:var(--ink-soft); word-break:break-word; overflow-wrap:anywhere;}
  .tag-widget{
    position:relative; width:100%; border:1px dashed var(--line); background:transparent; border-radius:2px;
    padding:3px 4px; margin-top:2px; display:flex; flex-wrap:wrap; align-items:center; gap:4px; min-height:26px;
  }
  .tag-widget:focus-within{ border-color:var(--gold); background:var(--focus-bg); }
  .tag-chips-wrap{ display:flex; flex-wrap:wrap; gap:4px; }
  .tag-chip{
    display:inline-flex; align-items:center; gap:4px; background:#FFF6DE; border:1px solid var(--gold);
    color:#8A6D1D; font-family:'IBM Plex Mono', monospace; font-size:10.5px; padding:2px 6px; border-radius:10px; white-space:nowrap;
  }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tag-chip{ background:#3A2E14; color:#E0C880; } }
  :root[data-theme="dark"] .tag-chip{ background:#3A2E14; color:#E0C880; }
  .tag-chip.readonly{ background:var(--paper-dim); border-color:var(--line); color:var(--ink-soft); }
  .tag-chip-x{ cursor:pointer; opacity:0.6; font-size:9px; }
  .tag-chip-x:hover{ opacity:1; color:var(--hl-red); }
  .tag-chip-input{
    flex:1; min-width:80px; border:none; background:transparent; font-family:'IBM Plex Mono', monospace;
    font-size:11px; color:var(--gold); padding:2px 2px;
  }
  .tag-chip-input:focus{ outline:none; }
  .tag-chip-input::placeholder{ color:#C9C2AC; }
  .tag-suggest-box{
    position:absolute; left:0; top:100%; z-index:20; width:100%; background:var(--white); border:1px solid var(--line);
    box-shadow:0 3px 10px rgba(0,0,0,0.12); max-height:160px; overflow-y:auto; margin-top:2px;
  }
  .tag-suggest-item{
    padding:6px 10px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink); cursor:pointer;
  }
  .tag-suggest-item:hover{ background:var(--paper-dim); }
  .shift-input-wrap{ position:relative; }
  .shift-suggest-box{
    position:absolute; left:0; top:100%; z-index:20; width:100px; background:var(--white); border:1px solid var(--line);
    box-shadow:0 3px 10px rgba(0,0,0,0.12); margin-top:2px; display:none;
  }
  .shift-suggest-box.show{ display:block; }
  .shift-suggest-item{ padding:6px 10px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink); cursor:pointer; text-align:center; }
  .shift-suggest-item:hover{ background:var(--paper-dim); }
  .sub-text.hl{color:var(--hl-red);}
  .sub-text:focus{outline:1px solid var(--gold); background:var(--focus-bg);}
  .task-row-actions{display:flex; gap:4px; padding:4px 8px 2px; flex-wrap:wrap;}
  .mini-btn{font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--ink-soft); background:none; border:1px solid var(--line); padding:2px 6px; cursor:pointer; border-radius:2px;}
  .mini-btn:hover{border-color:var(--ink); color:var(--ink);}
  .mini-btn.on{background:var(--hl-red); color:var(--white); border-color:var(--hl-red);}
  .mini-btn.star-on{background:var(--gold); color:var(--white); border-color:var(--gold);}
  .remark-text{width:100%; border:none; background:transparent; font-family:'Noto Sans TC', sans-serif; font-size:12.5px; line-height:1.6; resize:none; overflow:hidden; padding:6px 8px; color:var(--ink); word-break:break-word; overflow-wrap:anywhere;}
  .remark-text.hl{color:var(--hl-red);}
  .remark-text:focus{outline:1px solid var(--gold); background:var(--focus-bg);}
  .group-block{border-bottom:2px solid var(--ink);}
  .group-toolbar{display:flex; justify-content:flex-end; gap:6px; padding:5px 8px; background:var(--paper-dim);}
  .add-group-btn{font-family:'IBM Plex Mono', monospace; font-size:11px; background:var(--white); border:1px solid var(--line); padding:6px 10px; cursor:pointer; color:var(--ink-soft);}
  .add-group-btn:hover{border-color:var(--ink); color:var(--ink);}

  /* ---------- Format 2 board ---------- */
  .f2-board{background:var(--white); border:1.5px solid var(--ink);}
  .f2-header{padding:14px 18px; border-bottom:1.5px solid var(--ink); display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px;}
  .f2-header h2{font-size:19px; margin:0; font-weight:700;}
  .f2-header .rd{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft);}
  .f2-counters{display:flex; gap:0; border-bottom:1px solid var(--line); background:var(--paper-dim);}
  .f2-counter{flex:1; padding:8px 14px; font-family:'Noto Sans TC', sans-serif; font-size:13px; font-weight:600; border-right:1px solid var(--line); color:var(--blue);}
  .f2-counter:last-child{border-right:none;}
  .f2-counters-grid{
    display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-left:none; background:var(--paper-dim);
  }
  .f2-counters-grid .f2-counter{
    border-right:1px solid var(--line); border-bottom:1px solid var(--line); border-left:1px solid var(--line);
  }
  .f2-counters-grid .f2-counter:nth-child(2n){ border-right:none; }
  .f2-counters-grid .f2-counter:nth-child(n+3){ border-bottom:none; }
  .f2-settings-toggle{font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--ink-soft); background:none; border:none; text-decoration:underline; cursor:pointer; padding:4px 14px;}
  .override-badge{
    font-family:'IBM Plex Mono', monospace; font-size:9px; color:var(--hl-red); border:1px solid var(--hl-red);
    padding:2px 6px; border-radius:2px; white-space:nowrap;
  }
  .entry-turnaround-select{
    font-family:'Noto Sans TC', sans-serif; font-size:11.5px; padding:3px 6px; border:1px solid var(--gold);
    background:var(--gold-tint-bg); color:var(--ink); max-width:220px;
  }
  .f2-settings{display:none; padding:10px 14px; background:var(--paper); border-bottom:1px solid var(--line); gap:14px; flex-wrap:wrap;}
  .milestone-edit-note{
    flex-basis:100%; font-family:'Noto Sans TC', sans-serif; font-size:11.5px; color:var(--gold);
    background:var(--gold-tint-bg); border:1px dashed var(--gold); padding:6px 10px; border-radius:2px; margin-bottom:2px;
  }
  .f2-settings.show{display:flex;}
  .f2-settings .field{display:flex; flex-direction:column; gap:3px;}
  .f2-settings label{font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--ink-soft);}
  .f2-settings input{font-family:'IBM Plex Mono', monospace; font-size:11.5px; border:1px solid var(--line); padding:4px 6px;}

  .f2-section{border-bottom:2px solid var(--ink); display:flex; min-width:0;}
  .f2-section-label{width:90px; flex-shrink:0; background:var(--paper-dim); font-weight:700; font-size:13px; padding:10px 8px; border-right:1px solid var(--ink); font-family:'Noto Sans TC', sans-serif;}
  .f2-section-body{flex:1; min-width:0; padding:8px 12px;}
  .f2-item{display:flex; gap:6px; align-items:flex-start; padding:3px 0; min-width:0;}
  .f2-item .num{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft); padding-top:6px; width:24px; flex-shrink:0; text-align:right;}
  .f2-item textarea{flex:1; min-width:0; border:none; background:transparent; font-family:'Noto Sans TC', sans-serif; font-size:13px; line-height:1.7; resize:none; overflow:hidden; padding:5px 4px; color:var(--ink); word-break:break-word; overflow-wrap:anywhere;}
  .f2-item textarea.hl{color:var(--hl-red); font-weight:600;}
  .f2-item textarea:focus{outline:1px solid var(--gold); background:var(--focus-bg);}
  .f2-item-actions{display:flex; gap:3px; padding-top:6px; flex-wrap:wrap;}
  .f2-add-row{margin-top:4px;}
  .f2-two-col{columns:2; column-gap:22px;}
  .f2-two-col .f2-item{break-inside:avoid;}
  .f2-groups{display:block; min-width:0;}
  .f2-group{border-bottom:1px solid var(--line); min-width:0;}
  .f2-group:last-child{border-bottom:none;}
  .f2-group-head{ display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--line); }
  .f2-group-head .f2-group-title{ border-bottom:none; flex:1; }
  .f2-group-head .mini-btn{ margin-right:10px; flex-shrink:0; white-space:nowrap; }
  .f2-group-title{font-family:'Noto Sans TC', sans-serif; font-size:13px; font-weight:700; border:none; background:transparent; width:100%; padding:8px 12px; border-bottom:1px solid var(--line); color:var(--ink);}
  .f2-group-title:focus{outline:1px solid var(--gold);}
  .f2-group-body{padding:8px 12px;}

  .f2-legend{padding:8px 18px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); background:var(--paper-dim); border-bottom:1px solid var(--line);}

  /* ---------- Pending items (CSV staging) ---------- */
  .f2-pending{border-bottom:2px solid var(--ink); padding:12px 18px; background:var(--focus-bg);}
  .f2-pending-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
  .f2-pending-head h3{font-size:13px; margin:0; font-family:'Noto Sans TC', sans-serif; color:var(--ink);}
  .f2-pending-empty{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft);}
  .f2-pending-row{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line);
    border-radius:4px; margin-bottom:6px; background:var(--white); flex-wrap:wrap;
  }
  .f2-pending-risk{font-family:'IBM Plex Mono', monospace; font-size:11px; background:var(--paper-dim); border:1px solid var(--line); padding:2px 6px; border-radius:3px; flex-shrink:0;}
  .f2-pending-main{flex:1; min-width:180px; font-size:12.5px;}
  .f2-pending-main b{font-family:'Noto Sans TC', sans-serif;}
  .f2-pending-main .sub{color:var(--ink-soft); font-size:11px;}
  .f2-pending-actions{display:flex; gap:6px; flex-shrink:0;}
  .assign-btn{
    font-family:'IBM Plex Mono', monospace; font-size:11px; border:1px solid var(--line); padding:5px 10px;
    cursor:pointer; background:var(--white);
  }
  .assign-btn.a{color:#2E7D32; border-color:#2E7D32;}
  .assign-btn.a:hover{background:#2E7D32; color:var(--white);}
  .assign-btn.b{color:#1D6FA5; border-color:#1D6FA5;}
  .assign-btn.b:hover{background:#1D6FA5; color:var(--white);}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .assign-btn.a{ color:#6FBF87; border-color:#6FBF87; }
    :root:not([data-theme="light"]) .assign-btn.a:hover{ background:#6FBF87; color:var(--paper); }
    :root:not([data-theme="light"]) .assign-btn.b{ color:#6CA3D9; border-color:#6CA3D9; }
    :root:not([data-theme="light"]) .assign-btn.b:hover{ background:#6CA3D9; color:var(--paper); }
  }
  :root[data-theme="dark"] .assign-btn.a{ color:#6FBF87; border-color:#6FBF87; }
  :root[data-theme="dark"] .assign-btn.a:hover{ background:#6FBF87; color:var(--paper); }
  :root[data-theme="dark"] .assign-btn.b{ color:#6CA3D9; border-color:#6CA3D9; }
  :root[data-theme="dark"] .assign-btn.b:hover{ background:#6CA3D9; color:var(--paper); }
  .assign-btn.discard{color:var(--ink-soft);}
  .assign-btn.discard:hover{border-color:var(--hl-red); color:var(--hl-red);}

  /* 追蹤表交替底色:依分組順序循環4種顏色,延時表固定用中性色(取代原本寫死A/B字串比對的方式,已隨動態分組失效) */
  .f2-track-table[data-color-idx="0"] tbody tr:nth-child(odd) td{ background:#E7F3E8; }
  .f2-track-table[data-color-idx="1"] tbody tr:nth-child(odd) td{ background:#E4EFF8; }
  .f2-track-table[data-color-idx="2"] tbody tr:nth-child(odd) td{ background:#F8EFE0; }
  .f2-track-table[data-color-idx="3"] tbody tr:nth-child(odd) td{ background:#F0E7F3; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .f2-track-table[data-color-idx="0"] tbody tr:nth-child(odd) td{ background:#25422E; }
    :root:not([data-theme="light"]) .f2-track-table[data-color-idx="1"] tbody tr:nth-child(odd) td{ background:#213D57; }
    :root:not([data-theme="light"]) .f2-track-table[data-color-idx="2"] tbody tr:nth-child(odd) td{ background:#4A3B1E; }
    :root:not([data-theme="light"]) .f2-track-table[data-color-idx="3"] tbody tr:nth-child(odd) td{ background:#43325A; }
  }
  :root[data-theme="dark"] .f2-track-table[data-color-idx="0"] tbody tr:nth-child(odd) td{ background:#25422E; }
  :root[data-theme="dark"] .f2-track-table[data-color-idx="1"] tbody tr:nth-child(odd) td{ background:#213D57; }
  :root[data-theme="dark"] .f2-track-table[data-color-idx="2"] tbody tr:nth-child(odd) td{ background:#4A3B1E; }
  :root[data-theme="dark"] .f2-track-table[data-color-idx="3"] tbody tr:nth-child(odd) td{ background:#43325A; }
  .f2-track-table[data-track-key="delay"] tbody tr:nth-child(odd) td{ background:#F1EEE4; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .f2-track-table[data-track-key="delay"] tbody tr:nth-child(odd) td{ background:#3A362E; } }
  :root[data-theme="dark"] .f2-track-table[data-track-key="delay"] tbody tr:nth-child(odd) td{ background:#3A362E; }
  #printOnlyStage .f2-track-table[data-track-key="delay"] tbody tr:nth-child(odd) td,
  #batchPrintStage .f2-track-table[data-track-key="delay"] tbody tr:nth-child(odd) td,
  .export-force-light .f2-track-table[data-track-key="delay"] tbody tr:nth-child(odd) td,
  .preview-stage .f2-track-table[data-track-key="delay"] tbody tr:nth-child(odd) td{ background:#F1EEE4 !important; }
  .f2-track-table td{ background:var(--white); }

  .f2-track-table{width:100%; table-layout:fixed; border-collapse:collapse; margin-bottom:18px;}
  .f2-track-table caption{text-align:left; font-family:'Noto Sans TC', sans-serif; font-weight:700; font-size:13px; padding:6px 4px; color:var(--ink);}
  .f2-track-table th{background:var(--paper-dim); border:1px solid var(--ink); font-size:11.5px; padding:5px 6px; font-family:'Noto Sans TC', sans-serif;}
  .f2-track-table td{border:1px solid var(--line); padding:0;}
  .f2-track-table input, .f2-track-table textarea, .f2-track-table select{width:100%; border:none; background:transparent; font-family:'Noto Sans TC', sans-serif; font-size:12px; padding:5px 6px; color:var(--ink);}
  .f2-track-table textarea{resize:none; overflow:visible; line-height:1.5;} /* overflow改visible是保險層:就算高度算錯,文字頂多超出邊框顯示,不會像overflow:hidden那樣直接被切掉消失 */
  .f2-track-table input:focus, .f2-track-table textarea:focus{outline:1px solid var(--gold); background:var(--focus-bg);}
  .f2-id-cell{font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-align:center; background:var(--paper-dim); width:70px;}
  .f2-risk-cell{width:60px; text-align:center;}
  .f2-track-img-cell{text-align:center; vertical-align:middle;}
  .f2-track-toolbar{display:flex; justify-content:flex-end; gap:6px; margin:-10px 0 14px;}

  ::-webkit-scrollbar{width:9px;}
  ::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}

  /* ---------- Import / Export bar ---------- */
  .io-bar{display:flex; align-items:center; gap:14px; padding:8px 28px; background:var(--paper); border-bottom:1px solid var(--line); flex-wrap:wrap;}
  .io-group{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding-right:14px; border-right:1px solid var(--line);}
  .io-group:last-of-type{border-right:none;}
  .io-group-label{
    font-family:'IBM Plex Mono', monospace; font-size:9.5px; color:var(--gold); font-weight:600;
    letter-spacing:0.05em; margin-right:2px; white-space:nowrap;
  }
  .io-btn{font-family:'IBM Plex Mono', monospace; font-size:11px; background:var(--white); border:1px solid var(--line); padding:5px 10px; cursor:pointer; color:var(--ink-soft);}
  .io-btn:hover{border-color:var(--ink); color:var(--ink);}
  .io-divider{width:1px; height:16px; background:var(--line); margin:0 4px;}
  .io-msg{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--green); margin-left:6px;}
  .io-more-toggle{ margin-left:auto; color:var(--gold); border-color:var(--gold); }
  .io-more-panel{ display:flex; align-items:center; gap:14px; padding:8px 28px; background:var(--paper-dim); border-bottom:1px solid var(--line); flex-wrap:wrap; }
  .io-msg.err{color:var(--hl-red);}
  .attach-thumb{max-width:140px; max-height:100px; display:block; margin:4px 0; border:1px solid var(--line); cursor:zoom-in;}
  .attach-thumb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:3px; max-width:180px; margin:4px 0; }
  .attach-thumb-item{ position:relative; }
  .attach-thumb-item img{ width:100%; height:56px; object-fit:cover; display:block; border:1px solid var(--line); cursor:zoom-in; }
  .attach-thumb-item .thumb-remove-btn{
    position:absolute; top:1px; right:1px; background:rgba(0,0,0,0.65); color:#fff; border:none;
    width:16px; height:16px; font-size:10px; line-height:16px; cursor:pointer; border-radius:2px; padding:0;
  }
  .attach-thumb-item .thumb-reorder{ position:absolute; bottom:1px; left:1px; display:flex; gap:1px; }
  .attach-thumb-item .thumb-reorder button{
    background:rgba(0,0,0,0.65); color:#fff; border:none; font-size:9px; padding:0 3px; cursor:pointer; border-radius:2px; line-height:14px;
  }
  .img-lightbox{position:fixed; inset:0; background:rgba(30,42,58,0.85); display:none; align-items:center; justify-content:center; z-index:200; cursor:zoom-out;}
  .img-lightbox.show{display:flex;}
  .img-lightbox img{max-width:90vw; max-height:90vh; box-shadow:0 6px 30px rgba(0,0,0,0.4);}

  /* ---------- Mobile card layout (scoped to #docWrap only) ---------- */
  .cell-input-ghost{color:#B9B3A0; font-style:italic; padding:6px;}
  @media screen and (max-width:700px){
    #docWrap .f1-table thead,
    #docWrap .f2-track-table thead,
    .preview-stage .f2-track-table thead{ display:none; }
    #docWrap .f1-table, #docWrap .f1-table tbody,
    #docWrap .f2-track-table, #docWrap .f2-track-table tbody{ display:block; width:100%; }
    #docWrap .f1-table tr:not(.legend-row):not(.section-row){
      display:block; border:1px solid var(--line); border-radius:6px; margin-bottom:10px; background:var(--white); overflow:hidden;
    }
    #docWrap .f1-table tr.legend-row, #docWrap .f1-table tr.section-row{ display:block; }
    #docWrap .f1-table td{ display:block; width:100% !important; border:none; border-bottom:1px solid var(--line); }
    #docWrap .f1-table td:last-child{ border-bottom:none; }
    #docWrap .f1-table td[data-label]::before,
    #docWrap .f2-track-table td[data-label]::before,
    .preview-stage .f2-track-table td[data-label]::before{
      content: attr(data-label); display:block; font-family:'IBM Plex Mono',monospace;
      font-size:9.5px; color:var(--gold); font-weight:600; padding:6px 8px 0; letter-spacing:0.04em;
    }
    #docWrap .f2-track-table{ border:none; }
    #docWrap .f2-track-table tr{ display:block; border:1px solid var(--line); border-radius:6px; margin-bottom:10px; background:var(--white); }
    #docWrap .f2-track-table td{ display:block; width:100% !important; border:none; border-bottom:1px solid var(--line); }
    #docWrap .f2-track-table td:last-child{ border-bottom:none; }
    #docWrap .f2-track-table caption{ display:block; width:100%; font-size:14px; padding:8px 4px; text-align:left; white-space:normal; }
    #docWrap .f2-track-img-cell{ text-align:left; padding:8px; }
    #docWrap .f2-track-img-cell .attach-thumb{ max-width:100px; max-height:70px; }
    #docWrap .f2-track-img-cell > div{ justify-content:flex-start !important; }

    /* 預覽/歷史預覽:格式二追蹤表在窄螢幕也採用同一套卡片式呈現(7欄資料太密,自動欄寬無法合理塞進手機螢幕) */
    .preview-stage .f2-track-table{ border:none; table-layout:auto; }
    .preview-stage .f2-track-table tr{ display:block; border:1px solid var(--line); border-radius:6px; margin-bottom:10px; background:var(--white); }
    .preview-stage .f2-track-table td{ display:block; width:100% !important; border:none; border-bottom:1px solid var(--line); }
    .preview-stage .f2-track-table td:last-child{ border-bottom:none; }
    .preview-stage .f2-track-table caption{ display:block; width:100%; font-size:14px; padding:8px 4px; text-align:left; white-space:normal; }
    .preview-stage .f2-track-img-cell{ text-align:left; padding:8px; }
    .preview-stage .f2-track-img-cell .attach-thumb{ max-width:100px; max-height:70px; }
    .preview-stage .f2-track-img-cell > div{ justify-content:flex-start !important; }

    /* 觸控友善尺寸 */
    #docWrap .mini-btn{ font-size:12px; padding:6px 10px; }
    #docWrap .task-text, #docWrap .f2-item textarea{ font-size:15px; }
    #docWrap .add-group-btn{ padding:9px 12px; font-size:12px; }

    .io-bar{ flex-wrap:wrap; overflow-x:visible; gap:8px 0; }
    .io-group{ flex:1 1 100%; border-right:none; border-bottom:1px dashed var(--line); padding:0 0 8px; }
    .io-group:last-of-type{ border-bottom:none; }
    .io-btn{ flex-shrink:0; padding:7px 11px; font-size:11.5px; }
  }

  /* ---------- Preview modal (always renders desktop/table style, outside #docWrap) ---------- */
  .preview-overlay{ position:fixed; inset:0; background:rgba(30,42,58,0.7); z-index:150; display:none; }
  .preview-overlay.show{ display:block; }
  .preview-panel{
    position:absolute; inset:16px; background:var(--paper-dim); border-radius:8px; overflow:auto; padding:16px;
  }
  .preview-close{
    position:sticky; top:0; float:right; font-family:'IBM Plex Mono',monospace; font-size:12px;
    background:var(--ink); color:var(--paper); border:none; padding:8px 14px; cursor:pointer; z-index:2; border-radius:4px;
  }
  #backToTopBtn{
    position:fixed; bottom:28px; right:28px; z-index:50; display:none;
    font-family:'IBM Plex Mono', monospace; font-size:12px; padding:9px 14px; border-radius:20px; border:none; cursor:pointer;
    background:var(--ink); color:var(--paper); box-shadow:0 2px 8px rgba(0,0,0,0.25);
  }
  #backToTopBtn:hover{ opacity:0.85; }
  .preview-stage{ min-width:0; width:100%; clear:both; }
  @media (min-width:760px){ .preview-stage{ min-width:700px; } }
  /* 預覽/歷史預覽:改回自動欄寬,讓瀏覽器依實際可用寬度自然分配(此處已無先前"表格被撐寬超出畫布"的問題,
     因為那個問題根源已修正;PNG/PDF匯出用的是另一個獨立、固定960px寬度的離屏容器,不受這裡影響) */
  .preview-stage .f1-table, .preview-stage .f2-track-table{ table-layout:auto; }
  .preview-stage textarea::placeholder{ color:transparent; } /* 空白項目的輸入提示文字不該出現在預覽結果裡 */
  @media (max-width:600px){
    .preview-stage .col-remark{ width:70px; }
    .preview-stage .col-date{ width:44px; }
    .preview-stage .col-shift{ width:44px; }
  }
  .history-item{
    padding:9px 10px; border-radius:4px; cursor:pointer; margin-bottom:2px;
    font-family:'IBM Plex Mono', monospace; border:1px solid transparent;
  }
  .history-item:hover{ background:var(--paper-dim); }
  .history-item.active{ background:var(--paper-dim); border-color:var(--gold); }
  .history-item .t{ font-size:11.5px; color:var(--rule-red); }
  .history-item .u{ font-size:10.5px; color:var(--ink-soft); margin-top:2px; }
  .history-empty{ padding:16px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); }
  .history-item .cmp-checkbox{ margin-right:6px; vertical-align:middle; }

  /* ---------- Diff view ---------- */
  .diff-header{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-soft);
    padding:10px 14px; background:var(--paper-dim); border:1px solid var(--line); margin-bottom:14px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }
  .diff-header b{ color:var(--ink); font-family:'Noto Sans TC', sans-serif; }
  .diff-body{
    font-family:'Noto Sans TC', sans-serif; font-size:13px; line-height:1.9;
    background:var(--white); border:1px solid var(--line); padding:12px 16px;
    white-space:pre-wrap; word-break:break-word;
  }
  .diff-line{ display:block; padding:1px 6px; border-radius:2px; }
  .diff-line.diff-add{ background:#E6F6E9; color:#1E6B33; }
  .diff-line.diff-add::before{ content:"+ "; color:#1E6B33; font-weight:700; }
  .diff-line.diff-del{ background:#FBEAEA; color:#A13B3B; text-decoration:line-through; }
  .diff-line.diff-del::before{ content:"− "; color:#A13B3B; font-weight:700; }
  .diff-line.diff-same{ color:var(--ink-soft); }
  .diff-line.diff-same::before{ content:"　 "; }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .diff-line.diff-add{ background:#1A3324; color:#8FD4A5; }
    :root:not([data-theme="light"]) .diff-line.diff-add::before{ color:#8FD4A5; }
    :root:not([data-theme="light"]) .diff-line.diff-del{ background:#3A1F1F; color:#E0685A; }
    :root:not([data-theme="light"]) .diff-line.diff-del::before{ color:#E0685A; }
  }
  :root[data-theme="dark"] .diff-line.diff-add{ background:#1A3324; color:#8FD4A5; }
  :root[data-theme="dark"] .diff-line.diff-add::before{ color:#8FD4A5; }
  :root[data-theme="dark"] .diff-line.diff-del{ background:#3A1F1F; color:#E0685A; }
  :root[data-theme="dark"] .diff-line.diff-del::before{ color:#E0685A; }
  .diff-empty-msg{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink-soft); padding:20px; text-align:center; }

  /* ---------- In-app user guide ---------- */
  .guide-panel{ max-width:820px; margin:0 auto; background:var(--white); padding:32px 40px; }
  .guide-content h2{ font-size:19px; margin:28px 0 10px; color:var(--ink); border-bottom:2px solid var(--ink); padding-bottom:6px; }
  .guide-content h2:first-child{ margin-top:0; }
  .guide-content h3{ font-size:14.5px; margin:18px 0 6px; color:var(--rule-red); }
  .guide-content p{ font-size:13.5px; line-height:1.8; margin:0 0 10px; color:var(--ink); }
  .guide-content ul{ margin:0 0 12px; padding-left:22px; }
  .guide-content li{ font-size:13.5px; line-height:1.8; margin-bottom:4px; }
  .guide-content .g-note{
    border-left:3px solid var(--gold); background:var(--focus-bg); padding:8px 12px; margin:10px 0 16px;
    font-size:12.5px; color:var(--ink-soft); font-style:italic;
  }
  .guide-content table{ width:100%; border-collapse:collapse; margin:10px 0 18px; font-size:12.5px; }
  .guide-content th, .guide-content td{ border:1px solid var(--line); padding:7px 9px; text-align:left; }
  .guide-content th{ background:var(--paper-dim); font-family:'Noto Sans TC', sans-serif; }
  .show-more-btn{
    display:block; width:100%; margin:-16px 0 18px; padding:9px; background:var(--paper-dim); border:1px dashed var(--line);
    color:var(--ink-soft); font-family:'IBM Plex Mono', monospace; font-size:12px; cursor:pointer; border-radius:2px;
  }
  .show-more-btn:hover{ border-color:var(--gold); color:var(--gold); }
  .quickstart-box{
    background:var(--gold-tint-bg); border:1.5px solid var(--gold); border-radius:6px; padding:16px 20px; margin-bottom:24px;
  }
  .quickstart-box h2{ font-size:16px; border-bottom:none; padding-bottom:0; }
  .guide-search-row{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  #guideSearchInput{
    flex:1; padding:9px 12px; border:1px solid var(--line); font-family:'Noto Sans TC', sans-serif; font-size:13px;
    background:var(--white); color:var(--ink); border-radius:3px;
  }
  #guideSearchResultCount{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); white-space:nowrap; }
  mark.guide-search-hl{ background:var(--gold); color:#1E2A3A; padding:0 1px; border-radius:2px; }
  .guide-toc{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
  .toc-group{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
  .toc-group-label{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--gold); font-weight:700; width:100%; margin-bottom:1px; }
  .guide-toc a{
    font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); text-decoration:none;
    border:1px solid var(--line); padding:5px 10px; border-radius:3px;
  }
  .guide-toc a:hover{ border-color:var(--ink); color:var(--ink); }
  .guide-link-btn{
    font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-soft); background:none;
    border:none; text-decoration:underline; cursor:pointer; padding:0;
  }

  @media (max-width:800px){
    .app{grid-template-columns:1fr;}
    .sidebar{
      display:flex; position:fixed; top:0; bottom:0; left:0; width:260px;
      transform:translateX(-100%); transition:transform 0.25s ease; z-index:60;
    }
    .sidebar.open{ transform:translateX(0); }
    .menu-toggle{ display:inline-flex !important; }
    .sidebar-backdrop{ display:none; position:fixed; inset:0; background:rgba(30,42,58,0.5); z-index:55; }
    .sidebar-backdrop.show{ display:block; }
    .f2-groups, .f2-two-col{display:block; columns:1;}

    /* 手機版topbar:標題欄位獨立佔滿一整列,避免跟日期/格式擠在一起被截斷 */
    .topbar{ padding:12px 14px 8px; gap:8px; }
    .topbar .field{ flex:1 1 auto; min-width:0; }
    .date-input{ width:100%; min-width:0; }
    .format-select{ width:100%; min-width:0; }
    .field-title{ flex:1 1 100% !important; order:10; }
    .title-input{ min-width:0; width:100%; }
    .view-mode-btn{ order:11; flex-shrink:0; }
    .save-status{ order:12; margin-left:0; flex:1 1 100%; text-align:right; }

    /* 格式二單欄項目列表(轄區工作/A組/B組/明日預計/每日檢討及注意事項):文字框跟按鈕分成上下兩行,避免擠壓 */
    #docWrap .f2-item{ flex-wrap:wrap; }
    #docWrap .f2-item .num{ padding-top:8px; }
    #docWrap .f2-item textarea{ flex:1 1 100%; order:1; }
    #docWrap .f2-item-actions{ flex:1 1 100%; order:2; padding-left:30px; }
  }
  .menu-toggle{
    display:none; align-items:center; justify-content:center; width:34px; height:34px;
    background:var(--ink); color:var(--paper); border:none; font-size:16px; cursor:pointer; flex-shrink:0;
  }

  #batchPrintStage{ display:none; }

  /* 匯出/預覽/列印一律維持淺色,不受使用者目前畫面深色/淺色模式影響:
     在這幾個容器範圍內,把所有CSS變數重新鎖定回淺色版本;因為CSS變數會往下層級聯,
     裡面任何用var(--xxx)的元素(不管巢狀多深)都會自動套用這裡覆蓋的淺色值,不是:root當下的深色值 */
  #printOnlyStage, #batchPrintStage, .preview-stage, .export-force-light{
    --paper:#F8F6F0; --paper-dim:#F1EEE4; --ink:#1E2A3A; --ink-soft:#4A5568;
    --rule-red:#A13B3B; --rule-red-dim:#C98F8F; --gold:#B8912F; --line:#DCD6C6; --white:#FFFFFF;
    --green:#3F7D4F; --hl-red:#C0392B; --blue:#2C5C8A; --focus-bg:#FFFDF6; --gold-tint-bg:#FFFBF0;
    color:var(--ink); background:var(--paper);
    /* 上面這行color/background很重要:只重設變數,對「沒有自己寫color:var(--ink)、單純靠繼承拿顏色」的子元素沒有用,
       因為繼承拿到的是外層(深色模式下的body)已經算好的顏色值,不會因為這裡重新定義了變數就重新計算一次;
       容器本身明確寫出color/background,才能讓繼承鏈從這裡開始,正確往下傳遞淺色版本 */
  }
  /* 以下3個元件的深色模式覆蓋是直接寫死色碼(不是走CSS變數),不會被上面的變數鎖定機制保護到,
     但這3個元件都會出現在實際列印/匯出的文件內容裡,所以要額外用#printOnlyStage等ID選擇器加大優先權,強制蓋回淺色版本 */
  /* 以下這幾個元件的深色模式覆蓋是直接寫死色碼(不是走CSS變數),不會被上面的變數鎖定機制保護到,
     但都會出現在實際列印/匯出的文件內容裡,所以要額外用#printOnlyStage等選擇器加大優先權,強制蓋回淺色版本
     (.export-force-light涵蓋PNG匯出用的離屏容器,先前這裡漏掉這個class,導致PNG匯出被深色模式污染) */
  #printOnlyStage .section-row td, #batchPrintStage .section-row td, .export-force-light .section-row td, .preview-stage .section-row td{ background:#EDE7D6 !important; }
  #printOnlyStage .f2-track-table[data-color-idx="0"] tbody tr:nth-child(odd) td,
  #batchPrintStage .f2-track-table[data-color-idx="0"] tbody tr:nth-child(odd) td,
  .export-force-light .f2-track-table[data-color-idx="0"] tbody tr:nth-child(odd) td,
  .preview-stage .f2-track-table[data-color-idx="0"] tbody tr:nth-child(odd) td{ background:#E7F3E8 !important; }
  #printOnlyStage .f2-track-table[data-color-idx="1"] tbody tr:nth-child(odd) td,
  #batchPrintStage .f2-track-table[data-color-idx="1"] tbody tr:nth-child(odd) td,
  .export-force-light .f2-track-table[data-color-idx="1"] tbody tr:nth-child(odd) td,
  .preview-stage .f2-track-table[data-color-idx="1"] tbody tr:nth-child(odd) td{ background:#E4EFF8 !important; }
  #printOnlyStage .f2-track-table[data-color-idx="2"] tbody tr:nth-child(odd) td,
  #batchPrintStage .f2-track-table[data-color-idx="2"] tbody tr:nth-child(odd) td,
  .export-force-light .f2-track-table[data-color-idx="2"] tbody tr:nth-child(odd) td,
  .preview-stage .f2-track-table[data-color-idx="2"] tbody tr:nth-child(odd) td{ background:#F8EFE0 !important; }
  #printOnlyStage .f2-track-table[data-color-idx="3"] tbody tr:nth-child(odd) td,
  #batchPrintStage .f2-track-table[data-color-idx="3"] tbody tr:nth-child(odd) td,
  .export-force-light .f2-track-table[data-color-idx="3"] tbody tr:nth-child(odd) td,
  .preview-stage .f2-track-table[data-color-idx="3"] tbody tr:nth-child(odd) td{ background:#F0E7F3 !important; }
  #printOnlyStage .tag-chip, #batchPrintStage .tag-chip, .export-force-light .tag-chip, .preview-stage .tag-chip{ background:#FFF6DE !important; color:#8A6D1D !important; }
  @media print{
    @page{ size:portrait; } /* 建議直式,大多數瀏覽器會把列印對話框預設選中直式,但使用者仍可手動改成橫式,不是強制鎖死 */
    body{background:#ffffff !important;} /* 寫死白色,不能用var(--white),深色模式下這個變數會變成深色 */
    /* 儀表板PDF快照:只在body帶有dashboard-printing這個class時生效,不影響其他彈窗(confirm-overlay是共用class)。
       改用一般文件流(取代position:fixed/absolute),避免先前查證過的「疊加彈窗列印時容易跑版」問題 */
    body.dashboard-printing .login-screen, body.dashboard-printing .sidebar, body.dashboard-printing .topbar,
    body.dashboard-printing .app, body.dashboard-printing .main{ display:none !important; }
    body.dashboard-printing .preview-overlay:not(#dashboardOverlay){ display:none !important; }
    body.dashboard-printing #printOnlyStage{ display:none !important; } /* 雙重保險,避免跟儀表板內容一起意外顯示 */
    body.dashboard-printing #dashboardOverlay{
      position:static !important; inset:auto !important; background:none !important; display:block !important;
    }
    body.dashboard-printing #dashboardOverlay .confirm-card{
      position:static !important; max-width:640px !important; max-height:none !important; overflow:visible !important;
      box-shadow:none !important; border:none !important; margin:0 auto !important;
      /* 保留一個接近螢幕上的寬度上限(640px,不是完全不設限的none)。
         即使使用者手動選了橫式列印、紙張變寬,內容也維持原本比例、兩側留白,不會被撐開拉伸變形 */
    }
    body.dashboard-printing #exportDashboardPdfBtn, body.dashboard-printing #dashboardCloseBtn, body.dashboard-printing .dash-seg{ display:none !important; }
    /* 加大字級,提升列印可讀性——儀表板畫面上的小字級(9-10.5px)是為了螢幕上緊湊呈現設計的,
       印到紙上會偏小,這裡額外放大,不影響平常在螢幕上看到的樣子;用萬用選擇器統一設定基礎字級,
       h3大標題另外設定更大的字級,兩條規則不重疊衝突(後面的h3規則寫在*規則之後,優先套用) */
    body.dashboard-printing #dashboardOverlay,
    body.dashboard-printing #dashboardOverlay *{ font-size:13px !important; line-height:1.5 !important; }
    body.dashboard-printing #dashboardOverlay h3{ font-size:20px !important; }
    .login-screen, .sidebar, .topbar, .io-bar, .io-more-panel, .presence-bar, .mini-btn, .add-group-btn,
    .group-toolbar, .f2-track-toolbar, .f2-settings-toggle, .f2-settings, .f2-item-actions, .override-badge, .entry-turnaround-wrap,
    .task-row-actions, #toastContainer{ display:none !important; }
    .app{display:block !important;}
    .main{display:block !important;}
    .doc-wrap{padding:0;}
    #docWrap{ display:none !important; } /* 列印改用純文字版的printOnlyStage,不再直接印互動畫面本身,徹底避開textarea高度計算跟瀏覽器列印時機不同步的問題 */
    #printOnlyStage{ position:static !important; left:auto !important; top:auto !important; width:auto !important; display:block !important; }
    .f1-table, .f2-board{border-color:#000 !important;}
    .f1-table, .f2-track-table{ table-layout:auto !important; } /* 跟預覽畫面的修正保持一致;table-layout:fixed在列印時會讓沒設寬度的欄位被擠壓,導致文字高度算錯而被截斷看不全 */
    textarea, input{border:none !important; background:transparent !important;}
    .f2-risk-cell select{ appearance:none !important; -webkit-appearance:none !important; border:none !important; background:transparent !important; } /* 危險等級是純裝飾性下拉箭頭,關掉不影響A/B/C實質內容顯示 */
    textarea::placeholder{ color:transparent !important; } /* 空白項目的輸入提示文字不該被印出來 */
    .tag-chip-input, .tag-chip-x, .tag-suggest-box, .shift-suggest-box{ display:none !important; } /* 列印是直接印即時畫面,互動元件要用CSS隱藏 */
    .track-row-check{ display:none !important; } /* 追蹤表勾選框,列印/預覽不該出現,匯出PNG時另外由convertFormFieldsToText處理(不是CSS隱藏,是直接排除轉換) */
    .f2-track-table th:first-child, .f2-track-table td:first-child{ display:none !important; } /* 選取/排序整欄(含表頭)在列印時不需要,連同欄位本身一起隱藏,不留空欄佔版面 */
    .f2-pending{ display:none !important; } /* 待分類是尚未分類、還沒定案的暫存內容,不該出現在列印結果裡 */
    .voice-input-btn{ display:none !important; }
    .export-toggle-label{ display:none !important; }
    .export-toggle-row{ display:none !important; } /* 格式一的納入匯出勾選框是獨立一列,列印時整列都要隱藏,避免留下空白列 */
    .review-hidden-export{ display:none !important; } /* 未勾選「納入匯出」的今日/每日檢討及注意事項,列印時不印出 */
    .tag-widget{ border:none !important; padding:0 !important; min-height:0 !important; }
    .tag-widget:not(:has(.tag-chip)){ display:none !important; } /* 沒有任何標籤時,整個元件不佔版面 */
    .f2-two-col{columns:2;}
    table{page-break-inside:auto;}
    tr{page-break-inside:avoid;}

    /* 批次匯出模式:只顯示batchPrintStage,其餘畫面全部隱藏 */
    body.batch-printing > *:not(#batchPrintStage){ display:none !important; }
    body.batch-printing #batchPrintStage{ display:block !important; }
    .batch-day-block{ page-break-after:always; padding:20px; }
    .batch-day-block:last-child{ page-break-after:auto; }
  }

/* ===== v1.20 格式一:今日工作許可證區塊(欄位與編輯方式重用格式二追蹤表) ===== */
.f1-section-bar{ background:#EDE7D6; padding:7px 10px; font-size:13px; font-weight:700; color:var(--ink); letter-spacing:0.02em; border-top:1px solid var(--line); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .f1-section-bar{ background:#2E3548; } }
:root[data-theme="dark"] .f1-section-bar{ background:#2E3548; }
#printOnlyStage .f1-section-bar, #batchPrintStage .f1-section-bar, .export-force-light .f1-section-bar, .preview-stage .f1-section-bar{ background:#EDE7D6 !important; }
.f1-permit-block .f2-track-table{ margin-bottom:0; }
.f1-permit-block .f2-track-toolbar{ margin:6px 8px 10px; }
.f1-permit-block .f2-pending{ border-bottom:none; border-top:1px solid var(--line); }
.f2-track-table[data-track-key="f1permits"] tbody tr:nth-child(odd) td{ background:#F1EEE4; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .f2-track-table[data-track-key="f1permits"] tbody tr:nth-child(odd) td{ background:#3A362E; } }
:root[data-theme="dark"] .f2-track-table[data-track-key="f1permits"] tbody tr:nth-child(odd) td{ background:#3A362E; }
#printOnlyStage .f2-track-table[data-track-key="f1permits"] tbody tr:nth-child(odd) td,
#batchPrintStage .f2-track-table[data-track-key="f1permits"] tbody tr:nth-child(odd) td,
.export-force-light .f2-track-table[data-track-key="f1permits"] tbody tr:nth-child(odd) td,
.preview-stage .f2-track-table[data-track-key="f1permits"] tbody tr:nth-child(odd) td{ background:#F1EEE4 !important; }

/* v1.22 總覽熱力圖 30/60/100 天三段切換 */
.dash-seg{ display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.dash-seg button{ background:none; border:none; border-left:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--gold); padding:3px 9px; cursor:pointer; }
.dash-seg button:first-child{ border-left:none; }
.dash-seg button.active{ background:var(--gold); color:var(--white, #fff); font-weight:600; }