:root{
    --red:#37668A;--red-dark:#2A506E;--red-soft:#E9F0F5;--danger:#C0392B;
    --ink:#1B2430;--ink-2:#5A6573;--line:#E6E9EE;--line-2:#EEF1F5;
    --bg:#F4F6F9;--card:#FFFFFF;--good:#1E9E6A;--good-soft:#E6F5EE;--good-dk:#157a52;--warn:#C9821B;
    --shadow:0 1px 2px rgba(27,36,48,.06),0 6px 18px rgba(27,36,48,.05);--radius:14px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{overflow-y:scroll;scrollbar-gutter:stable}
  body{background:var(--bg);color:var(--ink);font-family:"Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;font-size:15px;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer}
  input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
  h1,h2,h3{margin:0}a{color:var(--red)}

  /* login */
  #gate{position:fixed;inset:0;background:linear-gradient(160deg,#1B2430,#2A3647);display:flex;align-items:center;justify-content:center;z-index:100}
  #gate .box{background:#fff;border-radius:18px;padding:34px 30px;width:330px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center}
  #gate .ecg{height:34px;margin-bottom:14px}
  #gate .gate-logo{height:42px;margin:0 auto 16px;display:block}
  #gate h2{font-size:19px;letter-spacing:.5px}
  #gate p{color:var(--ink-2);font-size:13px;margin:6px 0 18px}
  #gate input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:12px;text-align:center;letter-spacing:2px}
  #gate button{width:100%;padding:12px;border:0;border-radius:10px;background:var(--red);color:#fff;font-weight:600;font-size:15px}
  #gate .err{color:var(--danger);font-size:13px;height:18px;margin-top:6px}

  /* shell */
  header.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
  .top-inner{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px}
  .brand{display:flex;align-items:center;gap:12px}
  .brand .mark{width:40px;height:40px;border-radius:11px;background:var(--red);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px}
  .brand-logo{height:34px;display:block}
  .brand-txt h1{font-size:18px;font-weight:700;line-height:1.1}
  .brand h1{font-size:18px;font-weight:700}
  .brand small{display:block;color:var(--ink-2);font-size:11px;font-weight:500;letter-spacing:.4px}
  .ecg-strip{flex:1;height:30px;opacity:.8;min-width:50px}
  .top-actions{display:flex;gap:8px}
  .top-actions button{background:transparent;border:1px solid var(--line);color:var(--ink-2);border-radius:9px;padding:7px 11px;font-size:13px}
  .top-actions button:hover{border-color:var(--red);color:var(--red)}
  .top-actions .primary{border-color:var(--red);color:var(--red);font-weight:600}

  nav.tabs{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;gap:4px;overflow-x:auto}
  nav.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:13px 14px;font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
  nav.tabs button.active{color:var(--red);border-bottom-color:var(--red)}
  nav.tabs .tab-sep{align-self:center;width:1px;height:18px;background:var(--line);margin:0 10px;flex:0 0 auto}
  .quickfill{font-size:11px;font-weight:600;color:var(--red);background:transparent;border:1px solid var(--red);border-radius:6px;padding:1px 7px;margin-left:8px;cursor:pointer;vertical-align:middle}
  .quickfill:hover{background:var(--red);color:#fff}
  main{max-width:1180px;margin:0 auto;padding:20px}
  .panel{display:none}.panel.active{display:block}

  .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:16px}
  .toolbar .grow{flex:1;min-width:120px}
  .field{display:flex;flex-direction:column;gap:3px}
  .field label{font-size:11px;color:var(--ink-2);font-weight:600}
  .ctl{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
  .btn{border:0;border-radius:9px;padding:9px 14px;font-weight:600;font-size:14px;background:var(--red);color:#fff}
  .btn:hover{background:var(--red-dark)}
  .btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
  .btn.ghost:hover{border-color:var(--red);color:var(--red)}
  .btn.sm{padding:6px 10px;font-size:13px}
  .toggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);user-select:none;cursor:pointer;padding:8px 0}
  .toggle input{width:16px;height:16px;accent-color:var(--red)}

  /* course rows */
  .course{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;box-shadow:var(--shadow);overflow:hidden}
  .course.arch{opacity:.62}
  .course.thisweek{background:#F1F7FC;border-color:#CFE0EE}
  .course.thisweek .crow:hover{background:#EAF2FA}
  .course.warn-remind{border-left:4px solid var(--danger)}
  .course.warn-incomplete{border-left:4px solid var(--warn)}
  .cmid{min-width:0}
  .crow{display:grid;grid-template-columns:38px 58px 1fr auto;gap:10px;padding:13px 16px;cursor:pointer;align-items:start}
  .crow:hover{background:#FCFCFD}
  .cserial{font-size:12px;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.2;padding-top:6px}
  .cserial small{display:block;color:#9aa3af;font-weight:500;font-size:10px}
  .cdate{font-weight:800;font-size:20px;line-height:1.15}.cdate small{display:block;color:var(--ink-2);font-weight:600;font-size:12px;margin-top:1px}
  .cmid .cname{font-weight:700;font-size:18px}
  .cmeta{color:var(--ink-2);font-size:15px;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 12px;overflow-wrap:anywhere}
  .crow-nodes{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
  .cright{display:flex;align-items:center;gap:8px;padding-top:2px}
  .cright{display:flex;flex-direction:column;align-items:flex-end;gap:8px;align-self:stretch}
  .cright .top{display:flex;align-items:center;gap:8px}
  .cright .spacer{flex:1}
  .linebtn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:8px;padding:5px 10px;font-size:12.5px;font-weight:600}
  .cright-actions{display:flex;align-items:center;gap:6px}
  .linkbtn{border:1px solid var(--line);background:#fff;color:#37668A;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:600;cursor:pointer}
  .linkbtn:hover{background:#EEF3F8;border-color:#37668A}
  .linkbtn.addgear{color:#1B7A4B;border-style:dashed}
  .linkbtn.addgear:hover{background:#EAF5EE;border-color:#1B7A4B}
  .link-hint{font-size:11px;color:var(--ink-2);margin-top:5px}
  .link-hint a{color:#37668A;font-weight:600;text-decoration:none}
  .link-hint a:hover{text-decoration:underline}
  .linkgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .linebtn:hover{border-color:#06C755;color:#06C755}
  .linebtn.sent{border-color:#06C755;color:#06C755;background:#EBFAF0}
  .archhead{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--warn);background:#FFF7EC;border:1px solid #F3E2C2;border-radius:10px;padding:10px 14px;margin-bottom:12px}
  .chev{color:var(--ink-2);transition:transform .18s;font-size:13px}
  .course.open .chev{transform:rotate(90deg)}
  .pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;background:var(--line-2);color:var(--ink-2)}
  .pill.company{background:var(--good-soft);color:var(--good)}
  .pill.assoc{background:#EAF3FF;color:#2563B5}
  .pill.labor{background:#EEF0FF;color:#4350B5}
  .pill.arch{background:#FFF3E0;color:var(--warn)}

  .node{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:30px;padding:4px 10px;font-size:12px;background:#fff;cursor:pointer;user-select:none;color:var(--ink-2)}
  .node .dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#fff}
  .node.done{border-color:var(--good);background:var(--good-soft);color:var(--good-dk)}
  .node.done .dot{background:var(--good);border-color:var(--good)}
  .node.off{opacity:.45;border-style:dashed;background:#FAFBFC;cursor:default;color:var(--ink-2)}
  .node.off .dot{background:#fff;border-color:var(--line)}
  .ml{color:#9aa3af;font-weight:700;font-size:13px;margin-right:3px}
  .nodetoggles{display:flex;flex-wrap:wrap;gap:8px 18px}
  .ntog{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);cursor:pointer}
  .ntog input{width:16px;height:16px;accent-color:var(--red)}

  .cbody{display:none;border-top:1px dashed var(--line);padding:16px;background:#FBFCFE}
  .course.open .cbody{display:block}
  .sec{margin-bottom:18px}.sec:last-child{margin-bottom:0}
  .secrow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.secrow .sec{margin-bottom:0}
  .sec h4{font-size:12px;letter-spacing:.6px;color:var(--ink-2);text-transform:uppercase;margin-bottom:9px;display:flex;align-items:center;gap:8px}
  .sec h4::before{content:"";width:3px;height:13px;background:var(--red);border-radius:2px}

  .editgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
  .editgrid .full{grid-column:1/-1}
  .editgrid label,.linkgrid label{font-size:11px;color:var(--ink-2);font-weight:600;display:block;margin-bottom:4px}
  .editgrid input,.editgrid select,.editgrid textarea,.linkgrid input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
  .editgrid textarea{min-height:54px;resize:vertical}
  .editgrid textarea.tall{min-height:calc(5 * 1.55em + 26px)}   /* 附註：約可寫 5 行 */

  /* tag input */
  .taginput{display:flex;flex-wrap:wrap;gap:5px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:5px 6px;background:#fff;position:relative}
  .taginput .chip{display:inline-flex;align-items:center;gap:5px;background:var(--red-soft);color:var(--red);border-radius:7px;padding:3px 6px 3px 9px;font-size:13px;font-weight:600}
  .taginput .chip i{cursor:pointer;font-style:normal;color:var(--red);opacity:.7;font-size:13px}
  .taginput .chip i:hover{opacity:1}
  .taginput .tag-entry{border:0;outline:none;flex:1;min-width:80px;padding:5px 4px;font-size:14px}
  .tag-suggest{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(27,36,48,.14);z-index:20;margin-top:4px;overflow:hidden}
  .sg-item{padding:8px 11px;cursor:pointer;font-size:13.5px}
  .sg-item:hover{background:var(--red-soft)}

  table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
  table.grid th,table.grid td{padding:7px 9px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:middle}
  table.grid th{font-size:11px;color:var(--ink-2);font-weight:700;text-transform:uppercase}
  table.grid input{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:7px}
  table.grid input.num{text-align:right}

  .billbox{background:#fff;border:1px solid var(--line);border-radius:11px;padding:14px}
  .billtop{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
  .moneyin{display:flex;align-items:center;gap:6px;margin-bottom:6px}
  .moneyin span{color:var(--ink-2);font-size:13px}
  .moneyin input{width:150px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;text-align:right}
  .subbill{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
  .subbill h5{margin:0 0 8px;font-size:12.5px;font-weight:700}
  .total-row{margin-top:8px;text-align:right;font-size:14px;font-weight:700}
  .total-row b{color:var(--red);font-size:16px;margin-left:6px}
  .empty-hint{color:var(--ink-2);font-size:13px;padding:6px 2px}
  .cactions{display:flex;flex-wrap:wrap;gap:8px}
  .lastedit{margin-top:10px;font-size:12px;color:var(--ink-2)}
  .lastedit b{color:var(--ink)}
  .course-hist{margin-top:14px;margin-left:auto;width:max-content;max-width:360px;border-top:1px solid var(--line);padding-top:8px}
  .course-hist .ch-title{font-size:11px;font-weight:700;color:var(--ink-2);margin-bottom:4px;text-align:right}
  .course-hist .ch-row{display:flex;gap:10px;justify-content:flex-end;font-size:12px;color:var(--ink-2);padding:1px 0}
  .course-hist .ch-time{font-variant-numeric:tabular-nums}
  .course-hist .ch-actor{font-weight:600;color:var(--ink)}
  .course-hist .ch-empty{font-size:12px;color:var(--ink-2);text-align:right}
  .audit-day{position:sticky;top:0;background:#fff;font-size:12px;font-weight:700;color:var(--ink-2);padding:8px 14px 4px}
  .audit-row{display:flex;align-items:baseline;gap:8px;padding:6px 14px;font-size:13px;border-bottom:1px solid #F0F2F4}
  .audit-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;align-self:center}
  .audit-time{flex:0 0 auto;color:var(--ink-2);font-variant-numeric:tabular-nums;font-size:12px}
  .audit-actor{flex:0 0 auto;font-weight:600}
  .audit-act{flex:0 0 auto;color:var(--ink-2)}
  .audit-sum{flex:1;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* generic table cards */
  .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:4px;overflow-x:auto}
  table.full{width:100%;border-collapse:collapse;font-size:14px}
  table.full th,table.full td{padding:10px 12px;border-bottom:1px solid var(--line-2);text-align:left;white-space:nowrap}
  table.full thead th{background:#fff;font-size:11.5px;color:var(--ink-2);text-transform:uppercase}
  table.full input,table.full select{padding:6px 8px;border:1px solid var(--line);border-radius:7px}
  th.r,td.r{text-align:right}
  .typebadge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
  .typebadge.in{background:var(--red-soft);color:var(--red)}
  .typebadge.out{background:#EEF0FF;color:#4350B5}
  .check{display:inline-block;width:22px;text-align:center;font-weight:700}
  .check.yes{color:var(--good)}.check.no{color:var(--line)}
  .matrix td.cell{text-align:center;cursor:pointer;user-select:none}
  .matrix td.cell:hover{background:var(--line-2)}
  .draghandle{cursor:grab;color:#b6bdc7;font-size:16px;user-select:none;display:inline-block;width:18px;text-align:center}
  .draghandle:active{cursor:grabbing}
  .matrix tr.dragover td{box-shadow:inset 0 2px 0 var(--red)}
  .iconbtn{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px;color:var(--ink-2);font-size:14px;line-height:1}
  .iconbtn:hover{border-color:var(--red);color:var(--red)}

  /* salary */
  .salary-summary{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
  .stat{flex:1;min-width:170px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
  .stat .lab{font-size:12px;color:var(--ink-2);font-weight:600}
  .stat .val{font-size:23px;font-weight:800;margin-top:4px}
  .stat.green .val{color:var(--good)}.stat.blue .val{color:#2563B5}.stat.red .val{color:var(--danger)}
  .money.pos{color:var(--good);font-weight:700}.money.neg{color:var(--danger);font-weight:700}
  .sblock{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
  .sblock h3{font-size:14px;padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
  .sblock h3::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--red)}
  .sblock.assoc h3::before{background:#2563B5}.sblock.labor h3::before{background:#4350B5}
  table.sal{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
  table.sal th.r,table.sal td.r{width:116px}
  table.sal td.det{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.sal th{font-size:11px;color:var(--ink-2);text-transform:uppercase;padding:9px 14px;text-align:left;border-bottom:1px solid var(--line-2)}
  table.sal th.r{text-align:right}
  table.sal td{padding:9px 14px;border-bottom:1px solid var(--line-2)}
  table.sal tfoot td{font-weight:700;border-top:1px solid var(--line);border-bottom:0;background:#FBFCFE}
  .srow{cursor:pointer}.srow:hover{background:#FCFCFD}
  .chev2{display:inline-block;color:var(--ink-2);font-size:11px;transition:transform .15s;width:12px}
  .chev2.open{transform:rotate(90deg)}
  .subtab{width:100%;border-collapse:collapse;font-size:13px;background:#FBFCFE;border-radius:8px;overflow:hidden;margin:2px 0}
  .subtab th{font-size:10.5px;color:var(--ink-2);padding:6px 12px;text-transform:uppercase}
  .subtab td{padding:6px 12px;border-bottom:1px solid var(--line-2)}
  .subwrap td{padding:4px 14px 10px 30px;background:#FBFCFE}
  .detrow td{background:#FBFCFE;font-size:13px}
  .detrow .det{padding-left:34px;color:var(--ink-2)}

  /* modal */
  .scrim{position:fixed;inset:0;background:rgba(27,36,48,.45);display:none;align-items:flex-start;justify-content:center;z-index:60;padding:30px 16px;overflow:auto}
  .scrim.show{display:flex}
  /* 講師排班工具 */
  .sched-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .sched-head{margin-bottom:6px}
  .sched-head>div{text-align:center;font-size:12px;color:var(--ink-2);font-weight:600;padding:4px 0}
  .sched-cell{min-width:0;min-height:96px;border:1px solid var(--line);border-radius:10px;padding:5px 6px;display:flex;flex-direction:column;gap:3px;background:#fff;cursor:pointer;transition:background .12s;overflow:hidden}
  .sched-cell:hover{background:#F7F9FB}
  .sched-cell.other{background:#FAFBFC;opacity:.55}
  .sched-cell.today{border-color:#1B7A4B;box-shadow:0 0 0 1px #1B7A4B inset}
  .sched-cell .dnum{font-size:12px;color:var(--ink-2);text-align:right;line-height:1}
  .sched-chip{max-width:100%;font-size:11px;line-height:1.25;border-radius:6px;padding:2px 6px;cursor:pointer;border:1.5px solid;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sched-chip.solid{color:#fff;border-color:transparent}
  .sched-chip.hollow{background:#fff}
  .sched-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:12px}
  .sched-legend .lg{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-2)}
  .sched-legend .sw{width:12px;height:12px;border-radius:4px;border:1.5px solid}
  .av-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
  .av-cell{min-height:40px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;user-select:none}
  .av-cell.other{opacity:.4}
  .av-cell.sel{background:var(--red);color:#fff;border-color:var(--red);font-weight:600}
  .av-head>div{font-size:11px}
  .av-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .av-row .avd{font-weight:600;min-width:84px}
  .av-row label.slot{display:inline-flex;align-items:center;gap:3px;font-size:13px;color:var(--ink-2)}
  .av-row input.avnote{flex:1;min-width:140px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;font-size:13px}
  .av-row .avdel{color:var(--danger);font-size:12px;cursor:pointer;background:none;border:0}
  .otlist{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
  .otrow{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:14px}
  .otrow input[type=checkbox]{width:16px;height:16px;accent-color:var(--red)}
  .otrow .who{font-weight:700}
  .otrow .ottimes{margin-left:auto;display:flex;gap:10px}
  .otrow .ottimes label{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-2)}
  .otrow .ottimes .ti{width:62px;padding:5px 6px;border:1px solid var(--line);border-radius:7px;text-align:center;font-size:13px}
  .modal{background:#fff;border-radius:16px;width:820px;max-width:100%;box-shadow:0 24px 70px rgba(0,0,0,.3)}
  .modal header{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
  .modal header h3{font-size:16px}
  .modal .mbody{padding:18px 20px}
  .settabs{display:flex;gap:6px;margin-bottom:14px}
  .settabs button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
  .settabs button.active{border-color:var(--red);color:var(--red);background:var(--red-soft)}

  .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:11px 18px;border-radius:30px;font-size:13.5px;opacity:0;transition:.25s;z-index:90;box-shadow:0 8px 24px rgba(0,0,0,.25)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .muted{color:var(--ink-2)}
  .hint{font-size:14px;color:var(--ink-2);margin:-6px 0 14px}

  .mcard,.mview,.medit-bar,.m-only{display:none}
  #btnSettings .set-m{display:none}
  .msal,.att-mcards{display:none}
  @media(max-width:680px){
    /* 頂欄：往下捲時只留分頁列 */
    header.top{top:-52px}
    .top-inner{padding:8px 14px;height:52px;gap:10px}
    .brand-logo{height:28px}.brand-txt h1{font-size:16px}.brand small{display:none}
    .top-actions{margin-left:auto}
    #btnSettings{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px}
    #btnSettings .set-d{display:none}
    #btnSettings .set-m{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
    /* 編輯表單：避免日期等輸入框超出畫面（iOS Safari） */
    .editgrid>*,.secrow>*{min-width:0}
    .editgrid input,.editgrid select,.editgrid textarea{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
    .editgrid input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-height:40px;text-align:left}
    .cbody table.grid input{min-width:0;width:100%;box-sizing:border-box}
    nav.tabs{padding:0 8px}nav.tabs button{padding:10px 10px;font-size:13.5px}nav.tabs .tab-sep{margin:0 4px}
    main{padding:12px}
    /* 工具列：搜尋＋篩選，其餘收合 */
    #panel-courses .toolbar{gap:8px;margin-bottom:12px}
    #panel-courses .toolbar .m-search{flex:1;min-width:0}
    #panel-courses .toolbar .m-search label{display:none}
    #panel-courses .toolbar .m-only{display:inline-flex}
    #panel-courses .toolbar .m-fold{display:none!important}
    #panel-courses .toolbar.fold-open .m-fold{display:flex!important}
    #panel-courses .toolbar .m-search{order:1;flex:1 1 calc(100% - 96px)}
    #btnFilter{order:2}
    #panel-courses .toolbar .m-fold{order:3}
    #panel-courses .toolbar.fold-open .field.m-fold{flex:1 1 calc(50% - 4px);min-width:0}
    #panel-courses .toolbar.fold-open .field.m-fold .ctl{width:100%}
    #panel-courses .toolbar.fold-open .btn.m-fold{flex:1 1 calc(50% - 4px);justify-content:center}
    #btnAdd{position:fixed;right:16px;bottom:20px;z-index:40;border-radius:28px;padding:13px 18px;box-shadow:0 6px 18px rgba(0,0,0,.22)}
    body:has(.course.open) #btnAdd{display:none!important}   /* 展開課程時先藏起來，避免擋住按鈕 */
    .mview a[href^="tel:"],.mcard a[href^="tel:"]{white-space:nowrap}
    #courseList{padding-bottom:70px}
    /* 課程卡片 */
    .crow{display:block;padding:12px 14px}
    .crow>.cserial,.crow>.cdate,.crow>.cmid,.crow>.cright{display:none}
    .mcard{display:block}
    .mc-top{display:flex;align-items:center;gap:6px}
    .mc-top .grow{flex:1}
    .mc-date{font-weight:800;font-size:17px}.mc-date small{font-size:13px;font-weight:600;color:var(--ink-2)}
    .mc-serial{font-size:11px;color:#9aa3af;font-weight:600}
    .mc-name{font-weight:700;font-size:16px;margin:6px 0 6px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .mc-cat{font-weight:500;font-size:12.5px;color:var(--ink-2);margin-left:6px}
    .mc-row{display:flex;gap:8px;font-size:14px;color:var(--ink);line-height:1.45;margin-top:3px;overflow-wrap:anywhere}
    .mc-ic{width:16px;flex:0 0 16px;display:inline-flex;padding-top:3px;color:#9aa3af}
    .mc-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .mc-sess{white-space:nowrap}.mc-sep{color:#9aa3af}
    .mc-row a,.mview a{color:var(--red);text-decoration:none}
    .mc-foot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;flex-wrap:wrap}
    .mc-foot .grow{flex:1}
    .mc-dots{display:inline-flex;gap:3px}.mc-dots i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--line);display:inline-block}.mc-dots i.on{background:var(--good);border-color:var(--good)}
    .mwarn{font-size:11.5px;font-weight:700;color:var(--warn);background:#FFF5E6;border-radius:12px;padding:2px 8px}
    .mwarn.red{color:var(--danger);background:#FDECEA}
    /* 展開：預設檢視模式，按「編輯」才顯示表單 */
    .cbody{padding:12px 14px}
    .mview{display:block}
    .cedit{display:none}
    .course.editing .mview{display:none}
    .course.editing .cedit{display:block}
    .medit-bar{display:flex;margin-bottom:12px}
    .mv-warn{font-size:13px;color:var(--danger);background:#FDECEA;border-radius:8px;padding:8px 10px;margin-bottom:10px}
    .mv-sec{font-size:12px;font-weight:700;color:var(--ink-2);margin:10px 0 6px}
    .mv-nodes{display:flex;flex-wrap:wrap;gap:6px}
    .mv-nodes .node{padding:7px 12px;font-size:13px}
    .mv-row{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:14px}
    .mv-k{flex:0 0 58px;color:#9aa3af;font-weight:700;font-size:12.5px;padding-top:1px}
    .mv-v{flex:1;min-width:0;overflow-wrap:anywhere}
    .mv-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
    .mv-actions .grow{flex:1}
    .mv-actions .linkbtn,.mv-actions .linebtn{padding:8px 12px;font-size:13px}
    /* 課程薪資 */
    #panel-salary .toolbar{gap:8px;margin-bottom:12px}
    #panel-salary .toolbar .grow{display:none}
    #panel-salary .staff-only{display:none!important}
    #btnSalaryLine{margin-left:auto}
    .salary-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
    .stat{min-width:0;padding:9px 12px;border-radius:10px}
    .stat .lab{font-size:11px}
    .stat .val{font-size:18px;margin-top:2px}
    .sblock table.sal{display:none}
    .msal{display:block}
    .msr{padding:10px 14px;border-bottom:1px solid var(--line-2);cursor:pointer}
    .msr:last-child{border-bottom:0}
    .msr-top{display:flex;align-items:center;gap:8px}
    .msr-name{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .msr-amt{font-size:16px;white-space:nowrap}
    .msr-sub{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2);margin-top:2px}
    .msr-chev{transition:transform .15s}
    .msr.open .msr-chev{transform:rotate(90deg)}
    .msr-items{display:none;margin-top:8px;padding-top:6px;border-top:1px dashed var(--line)}
    .msr.open .msr-items{display:block}
    .msr-items>div{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0}
    .msr-items>div>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .msr.total{background:#F8FAFC;cursor:default}
    /* 差勤總表 */
    #att-root #pg-summary .tw,#att-root #pg-summary #anno-box{display:none}
    #att-root .att-mcards{display:flex;flex-direction:column;gap:10px}
    #att-root .amc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
    #att-root .amc-h{display:flex;align-items:center;font-weight:700;font-size:15px;margin-bottom:6px}
    #att-root .amc-r{display:flex;gap:10px;padding:6px 0;border-top:1px solid var(--line-2);font-size:13.5px}
    #att-root .amc-k{flex:0 0 32px;color:#9aa3af;font-weight:700;font-size:12.5px;padding-top:1px}
    #att-root .amc-v{flex:1;min-width:0;line-height:1.55}
    #att-root .amc-sub{display:block;font-size:12px;color:var(--ink-2)}
    #att-root .amc-anno{font-size:12.5px;color:#555;background:#fff8f0;border-left:3px solid #e8a060;border-radius:0 6px 6px 0;padding:6px 10px;margin-top:6px;line-height:1.6}
    #att-root .amc-anno strong{color:#b85000}
    .crow{grid-template-columns:36px 54px 1fr auto;gap:8px}
    .editgrid{grid-template-columns:1fr}
    .secrow{grid-template-columns:1fr}
    .ecg-strip{display:none}
    .modal{width:100%}
  }

/* ===== 差勤模組樣式（限定 #att-root） ===== */
#att-root *{box-sizing:border-box;margin:0;padding:0}
#att-root{font-family:'Helvetica Neue',Arial,sans-serif;background:#f3f3f1;color:#1a1a1a;font-size:14px}
#att-root{max-width:1800px;margin:0 auto;padding:20px 16px}
#att-root .pg{display:none}
#att-root .pg.on{display:block}
#att-root select:not(.ctl){font-size:13px;padding:5px 10px;border-radius:6px;border:1px solid #ccc;background:#fff;color:#111;height:32px;cursor:pointer}
#att-root input[type=text],#att-root input[type=date],#att-root input[type=number]{font-size:13px;padding:5px 10px;border-radius:6px;border:1px solid #ccc;background:#fff;color:#111;height:32px}
#att-root .bsm{font-size:13px;padding:5px 14px;border-radius:6px;border:1px solid #ccc;background:#fff;color:#111;cursor:pointer;height:32px}
#att-root .bsm:hover{background:#ebebea}
#att-root .sw{overflow-x:auto;border:1px solid #e0e0de;border-radius:10px;background:#fff}
#att-root .st{border-collapse:collapse;font-size:11px;table-layout:fixed}
#att-root .st th{background:#f6f6f4;padding:4px 2px;font-size:10px;font-weight:500;color:#555;text-align:center;border-bottom:1px solid #e4e4e2;border-right:1px solid #e4e4e2;white-space:nowrap;line-height:1.4;overflow:hidden}
#att-root .st th.nc{text-align:center;padding:4px;position:sticky;left:0;z-index:3;background:#f6f6f4}
#att-root .st th.mc{text-align:left;padding-left:8px}
#att-root .st td{padding:2px 2px;border-bottom:1px solid #e4e4e2;border-right:1px solid #e4e4e2;vertical-align:top;overflow:hidden}
#att-root .st td.ncc{text-align:center;padding:6px 6px;font-weight:500;font-size:13px;white-space:nowrap;position:sticky;left:0;background:#fff;z-index:2;vertical-align:middle}
#att-root .st td.mcc{padding:4px 8px;vertical-align:middle}
#att-root .st tr:last-child td{border-bottom:none}
#att-root .st td:last-child,#att-root .st th:last-child{border-right:none}
#att-root .dc{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:3px 3px;width:100%;overflow:hidden}
#att-root .lv-sel{font-size:10px;width:100%;height:21px;padding:0 2px;border-radius:3px;border:1px solid #ddd;background:#fff;cursor:pointer;color:#111;min-width:0}
#att-root .lv-sel:focus{outline:1px solid #4a90d9}
#att-root .time-stack{display:flex;flex-direction:column;gap:2px;width:100%}
#att-root .time-field{display:flex;align-items:center;gap:2px;width:100%}
#att-root .time-lbl{font-size:9px;color:#bbb;width:11px;flex-shrink:0;text-align:right;line-height:1}
#att-root .ti{font-size:10px;flex:1;min-width:0;width:0;height:20px;padding:0 2px;border-radius:2px;border:1px solid #ddd;text-align:center;background:#fff;color:#111}
#att-root .ti:focus{outline:1px solid #4a90d9;border-color:#4a90d9}
#att-root .ti.has-val{border-color:#999;background:#f7f7f5;font-weight:600}
#att-root .comp-tag{font-size:9px;font-weight:600;border-radius:2px;padding:1px 3px;line-height:1.4;white-space:nowrap;text-align:center;margin-top:1px}
#att-root .cp{background:#e2f5e8;color:#1a6a35}
#att-root .cn{background:#fde8e8;color:#8a1a1a}
#att-root .cz{background:#f0f0ee;color:#777}
#att-root .offday{background:#ffeae0}
#att-root .tdy{background:#ddeeff!important}
#att-root .bx{display:inline-block;font-size:10px;padding:1px 5px;border-radius:3px;font-weight:500;white-space:nowrap;margin:1px 1px}
#att-root .b特休{background:#ddeeff;color:#1a5a9a}
#att-root .b病假{background:#fef0da;color:#7a4a0a}
#att-root .b事假{background:#eeecff;color:#4a3899}
#att-root .b補休{background:#e8f5e2;color:#2a5e15}
#att-root .b上課假{background:#fde8f2;color:#7a2060}
#att-root .tw{border:1px solid #e0e0de;border-radius:10px;overflow:hidden;overflow-x:auto;background:#fff}
#att-root .dt{width:100%;border-collapse:collapse;font-size:13px;white-space:nowrap;table-layout:fixed}
#att-root .dt th{background:#f6f6f4;padding:9px 6px;font-size:11px;font-weight:500;color:#888;text-align:center;border-bottom:1px solid #e4e4e2}
#att-root .dt th.sec-head{background:#eeeef0;color:#555;font-size:11px;font-weight:600;letter-spacing:.3px;border-top:2px solid #d0d0d4}
#att-root .dt td{padding:9px 6px;border-bottom:1px solid #e4e4e2;color:#111;text-align:center;overflow:hidden;text-overflow:ellipsis}
#att-root .dt tr:last-child td{border-bottom:none}
#att-root .dt tr:hover td{background:#f9f9f7}
#att-root .dt .sec-div{border-right:2px solid #d8d8dc}
#att-root .rok{color:#1a7a50;font-weight:600}
#att-root .rlo{color:#b87010;font-weight:600}
#att-root .rno{color:#b82020;font-weight:600}
#att-root .cpos{color:#1a6a35;font-weight:600}
#att-root .cneg{color:#b82020;font-weight:600}
#att-root .anno-box{margin-top:14px;display:flex;flex-direction:column;gap:6px}
#att-root .anno{font-size:12px;color:#555;background:#fff8f0;border-left:3px solid #e8a060;border-radius:0 6px 6px 0;padding:8px 12px;line-height:1.7}
#att-root .anno strong{color:#b85000}
#att-root .av{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;margin-right:6px;vertical-align:middle;flex-shrink:0}
#att-root{font-family:'Noto Sans TC','Helvetica Neue',Arial,sans-serif;background:#F4F6F9;color:#1B2430}
#att-root{height:100%;display:flex;flex-direction:column;overflow:auto;padding:0}
#att-root #pg-schedule.on{display:flex;flex-direction:column;flex:1;min-height:0}
#att-root #pg-schedule .sw{flex:1;min-height:0;max-height:none;overflow:auto}
#att-root .bsm{border-radius:8px;border-color:#E6E9EE}
#att-root .bsm:hover{background:#EEF1F5;border-color:#37668A;color:#37668A}
#att-root select:not(.ctl),#att-root input[type=text],#att-root input[type=date],#att-root input[type=number]{border-radius:8px;border-color:#E6E9EE}
#att-root .sw,#att-root .tw{border-color:#E6E9EE;border-radius:12px}
#att-root .st th,#att-root .dt th{background:#F1F4F8;color:#5A6573}
#att-root .st th.nc,#att-root .st td.ncc{position:sticky;left:0}
#att-root .tdy{background:#E9F0F5!important}
#att-root .av{font-weight:700}
#att-root{height:calc(100vh - 150px);min-height:520px;padding:0;max-width:none}
#att-root #pg-schedule .sw{flex:0 1 auto}
/* 凍結窗格：日期列釘在上方、員工欄釘在左側（在表格自己的捲動範圍內） */
#att-root .st thead th{position:sticky;top:0;z-index:3}
#att-root .st thead th.nc{left:0;z-index:5}
#att-root .st td.ncc{z-index:2}
#att-root .toolbar{margin-bottom:16px}
#att-root .ctl{padding:8px 10px}
#att-root .att-status{align-self:center;margin-left:auto;font-size:12px;color:#1a7a50;transition:opacity 1s;opacity:0}

/* ===== 教具販售 ===== */
.segbtns{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;align-self:flex-end}
.segbtns button{border:0;background:#fff;padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer}
.segbtns button+button{border-left:1px solid var(--line)}
.segbtns button.active{background:var(--red-soft);color:var(--red)}
#panel-sales table.stable tbody tr{cursor:pointer}
#panel-sales table.stable tbody tr:hover{background:#f7f9fb}
#panel-sales table.stable td.wrap{white-space:normal;min-width:120px}
#panel-sales .sm,#salesScrim .sm{font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.schip{display:inline-block;font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;background:#eef2f6;color:var(--ink-2)}
.schip.st-open{background:#e9f0f5;color:#2a506e}.schip.st-won{background:#e6f5ee;color:#157a52}
.schip.st-lost{background:#f1f1f1;color:#888}.schip.st-exp{background:#fff1e0;color:#a35f00}
#salesScrim .emp-sec{font-size:13px;margin:16px 0 8px;color:var(--ink)}
#salesScrim .emp-sec:first-child{margin-top:0}
#salesScrim .emp-hint{font-size:12px;color:var(--ink-2);margin-top:4px}
#salesScrim .se-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
#salesScrim .se-from{background:#f7f9fb;border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-size:13px;margin-bottom:12px}
#salesScrim table.sitems td{vertical-align:middle;white-space:normal}
#salesScrim .si-pick{width:100%}
#salesScrim .si-pick+.si-name{margin-top:4px}
#salesScrim .si-name{width:100%}
#salesScrim .si-num{width:100%;text-align:right}
#salesScrim .sfoot{display:flex;gap:8px;align-items:center;padding:12px 20px;border-top:1px solid var(--line);position:sticky;bottom:0;background:#fff;border-radius:0 0 16px 16px;flex-wrap:wrap}
#salesScrim .sfoot .grow{flex:1}
.btn.ghost.danger-t{color:var(--danger)}
#prodTable tr.p-off input:not([type=checkbox]){color:#9aa3ad}
@media (max-width:680px){
  #panel-sales .toolbar{gap:8px}
  #panel-sales table.stable th:nth-child(4),#panel-sales table.stable td:nth-child(4),
  #panel-sales table.stable th:nth-child(7),#panel-sales table.stable td:nth-child(7){display:none}
  #panel-sales .card{overflow-x:auto}
}
/* 教具販售工具列：按鈕、輸入框、切換鈕同高 */
#panel-sales .toolbar .btn,#panel-sales .toolbar .ctl{height:38px;box-sizing:border-box;display:inline-flex;align-items:center}
#panel-sales .segbtns{height:38px;box-sizing:border-box}
#panel-sales .segbtns button{height:36px}