.shike-att-scope{
    --bg:#F3F5F7;
    --surface:#FFFFFF;
    --surface-2:#F8FAFB;
    --ink:#1B2430;
    --ink-soft:#5B6674;
    --border:#E3E7EB;
    --primary:#E8940D;
    --primary-dark:#985D09;
    --primary-tint:#FDF1DF;
    --brand:#E8940D;
    --amber:#D98A2B;
    --amber-tint:#FBF0DF;
    --green:#2E8B52;
    --green-tint:#E6F3EA;
    --red:#C24747;
    --red-tint:#FBEAEA;
    --radius:14px;
    --shadow:0 1px 2px rgba(20,30,30,0.04), 0 8px 24px rgba(20,30,30,0.06);
  }
  .shike-att-scope *{box-sizing:border-box;}
  .shike-att-scope, .shike-att-scope{margin:0;padding:0;}
  .shike-att-scope{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--ink);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .shike-att-scope h1, .shike-att-scope h2, .shike-att-scope h3, .shike-att-scope .disp{font-family:'Sora',system-ui,sans-serif;}
  .shike-att-scope .mono{font-family:'JetBrains Mono',monospace;}

  .shike-att-scope .shell{display:flex;min-height:100vh;}
  /* 未登入時（例如刷卡打卡站的公開畫面）整個側邊欄不顯示，主要內容區改成置中顯示，
   * 不需要再幫原本側邊欄佔用的寬度留空間；右下角放一個不起眼的「管理者登入」文字
   * 連結，維持畫面乾淨，同時保留登入入口不會完全消失找不到。 */
  .shike-att-scope .shell-guest{display:block;position:relative;min-height:100vh;padding:0;}
  .shike-att-scope .main-guest{max-width:1180px;margin:0 auto;}
  .shike-att-scope .guest-login-link{
    position:absolute;bottom:14px;right:16px;font-size:12px;color:var(--muted,#8a8f8c);
    background:none;border:none;text-decoration:underline;cursor:pointer;padding:4px 6px;z-index:2;
  }
  .shike-att-scope .guest-login-link:hover{color:var(--primary-dark,#985D09);}

  .shike-att-scope /* Sidebar */
  .sidebar{
    width:220px;flex-shrink:0;background:var(--primary-dark);color:#FBF1E6;
    display:flex;flex-direction:column;padding:22px 14px;
  }
  .shike-att-scope .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 26px;}
  .shike-att-scope .brand-mark{
    width:34px;height:34px;border-radius:9px;
    background:linear-gradient(135deg,#F2B54B,#985D09);
    display:flex;align-items:center;justify-content:center;
    font-family:'Sora';font-weight:700;color:#fff;font-size:15px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
  }
  .shike-att-scope .brand-text .t1{font-family:'Sora';font-weight:700;font-size:15px;color:#fff;line-height:1.2;}
  .shike-att-scope .brand-text .t2{font-size:11px;color:#FBF1E6;letter-spacing:.5px;}

  .shike-att-scope .nav{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
  .shike-att-scope .nav-btn{
    display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
    color:#FBF1E6;background:transparent;border:none;font-size:14px;font-weight:500;
    cursor:pointer;text-align:left;transition:background .15s, color .15s;font-family:'Inter';
  }
  .shike-att-scope .nav-btn .ic{width:18px;text-align:center;font-size:15px;}
  .shike-att-scope .nav-btn:hover{background:rgba(255,255,255,0.12);color:#fff;}
  .shike-att-scope .nav-btn.active{background:var(--primary-tint);color:var(--primary-dark);font-weight:600;}
  .shike-att-scope .nav-btn .lockic{margin-left:auto;font-size:11px;opacity:.7;}

  .shike-att-scope .sidebar-foot{margin-top:auto;padding:10px;}
  .shike-att-scope .user-pill{
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;
    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
    border-radius:10px;padding:9px 11px;font-size:12px;color:#FBF1E6;
  }
  .shike-att-scope .user-pill.on{background:var(--amber-tint);border-color:transparent;color:#7A5116;}
  .shike-att-scope .user-pill .who{display:flex;flex-direction:column;line-height:1.3;}
  .shike-att-scope .user-pill .who b{font-size:12.5px;}
  .shike-att-scope .user-pill .who span{font-size:10.5px;opacity:.8;}
  .shike-att-scope .user-pill button{
    border:none;background:#fff;color:var(--primary-dark);font-size:11.5px;font-weight:600;
    padding:5px 10px;border-radius:7px;cursor:pointer;
  }
  .shike-att-scope .user-pill.on button{background:var(--amber);color:#fff;}

  .shike-att-scope /* Main */
  .main{flex:1;min-width:0;padding:30px 38px;max-width:1180px;}
  .shike-att-scope .page-head{margin-bottom:22px;}
  .shike-att-scope .page-head h1{font-size:21px;margin:0 0 4px;color:var(--ink);}
  .shike-att-scope .page-head p{margin:0;color:var(--ink-soft);font-size:13.5px;}

  .shike-att-scope .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;max-width:100%;box-sizing:border-box;}
  .shike-att-scope .card + .card{margin-top:18px;}

  .shike-att-scope /* Punch page */
  .punch-wrap{display:flex;flex-direction:column;align-items:center;padding:50px 24px 44px;}
  .shike-att-scope .punch-org{font-size:13px;color:var(--ink-soft);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;}
  .shike-att-scope .punch-clock{font-family:'JetBrains Mono';font-weight:600;font-size:56px;letter-spacing:2px;color:var(--primary-dark);margin-bottom:12px;}
  .shike-att-scope .punch-date{color:var(--ink-soft);font-size:14px;margin-bottom:34px;}
  .shike-att-scope .card-input-wrap{width:100%;max-width:420px;margin-bottom:18px;}
  .shike-att-scope .card-input{
    width:100%;height:52px;font-size:22px;letter-spacing:8px;text-align:left;
    border:1px solid #BFD9EE;background:#EFF6FC;border-radius:8px;padding:0 18px;
    color:var(--ink);caret-color:var(--primary);
  }
  .shike-att-scope .card-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint);}
  .shike-att-scope .scan-status{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-soft);margin-bottom:26px;}
  .shike-att-scope .scan-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(46,139,82,.6);animation:pulseDot 1.8s infinite;}
  @keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(46,139,82,.45);}70%{box-shadow:0 0 0 7px rgba(46,139,82,0);}100%{box-shadow:0 0 0 0 rgba(46,139,82,0);}}
  .shike-att-scope .punch-actions{display:flex;gap:10px;}
  .shike-att-scope .btn{border:none;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Inter';transition:filter .1s, transform .08s;}
  .shike-att-scope .btn:active{transform:scale(0.97);}
  .shike-att-scope .btn-primary{background:var(--primary);color:#fff;}
  .shike-att-scope .btn-primary:hover{filter:brightness(1.08);}
  .shike-att-scope .btn-primary:disabled{background:#C7D3D1;cursor:not-allowed;}
  .shike-att-scope .btn-ghost{background:var(--surface-2);color:var(--ink);border:1px solid var(--border);}
  .shike-att-scope .schedule-mode-viewing{border:1px solid var(--primary);color:var(--primary-dark);box-shadow:inset 0 0 0 1px var(--primary);}
  .shike-att-scope .btn-sm{padding:6px 12px;font-size:12.5px;border-radius:8px;}

  .shike-att-scope .punch-result{margin-top:26px;min-height:78px;display:flex;flex-direction:column;align-items:center;gap:6px;}
  .shike-att-scope .stamp{display:flex;align-items:center;gap:10px;padding:10px 20px;border-radius:12px;animation:pop .28s cubic-bezier(.2,1.4,.4,1);}
  .shike-att-scope .stamp.in{background:var(--green-tint);color:#1F6E3D;}
  .shike-att-scope .stamp.out{background:var(--primary-tint);color:var(--primary-dark);}
  .shike-att-scope .stamp.err{background:var(--red-tint);color:#8E2E2E;}
  .shike-att-scope .stamp .name{font-weight:700;font-size:15px;}
  .shike-att-scope .stamp .time{font-family:'JetBrains Mono';font-weight:600;}
  @keyframes pop{from{opacity:0;transform:scale(.85) translateY(4px);}to{opacity:1;transform:scale(1) translateY(0);}}

  .shike-att-scope table{width:100%;border-collapse:collapse;font-size:13.5px;}
  /* table.fixed-cols：某些表格（目前只有「管理者帳號設定」）欄位內容差異很大
     （有的欄位塞了好幾個輸入框跟按鈕），用瀏覽器預設的自動欄寬演算法，一個
     內容比較多的欄位會把其他欄位往內擠壓，嚴重時甚至擠到窄於一個字的寬度，
     文字被迫每個字自己一行、變成直排的怪異排版。改成 table-layout:fixed，
     欄寬完全依 <th> 上明確指定的寬度決定，不會再被任何欄位的實際內容影響，
     徹底避免這種擠壓效應；配合 overflow-wrap 讓塞不下的內容改成正常換行，
     而不是被硬擠壓。 */
  .shike-att-scope table.fixed-cols{table-layout:fixed;}
  .shike-att-scope table.fixed-cols td, .shike-att-scope table.fixed-cols th{overflow-wrap:break-word;word-break:break-word;}
  /* table.pr-item-table：薪資紀錄編輯畫面的「應發／代扣／雇主負擔」三欄項目
     表格。v3.67.0 幫每一列加上「從這個月移除這個項目」的 🗑️ 按鈕之後，表格
     從兩欄變成三欄，在本來就不寬的 flex 欄位裡，瀏覽器的自動欄寬演算法會把
     「項目」欄一路壓到比一個字還窄，項目名稱（例如「自付：勞工保險＋職災＋
     就業保險」「雇主負擔－勞保」）被迫變成一個字一行的直排。這裡沿用上面
     `fixed-cols` 的同一套解法：table-layout:fixed 把金額欄與按鈕欄的寬度寫死，
     剩下的寬度全部留給項目名稱，金額輸入框與刪除按鈕不管怎麼排都不會再回頭
     去擠壓項目名稱欄。同時把這個表格的儲存格內距與按鈕尺寸縮小，把省下來的
     寬度還給項目名稱。 */
  .shike-att-scope table.pr-item-table{table-layout:fixed;}
  .shike-att-scope table.pr-item-table th,.shike-att-scope table.pr-item-table td{padding:7px 6px;overflow-wrap:break-word;word-break:break-word;}
  .shike-att-scope table.pr-item-table td{vertical-align:middle;}
  .shike-att-scope table.pr-item-table .icon-btn{width:26px;height:26px;font-size:12px;border-radius:6px;}
  .shike-att-scope th{text-align:left;color:var(--ink-soft);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px;padding:9px 10px;border-bottom:1px solid var(--border);white-space:normal;}
  .shike-att-scope td{padding:11px 10px;border-bottom:1px solid var(--surface-2);vertical-align:top;}
  .shike-att-scope tr:last-child td{border-bottom:none;}
  .shike-att-scope tr:hover td{background:var(--surface-2);}
  .shike-att-scope .time-cell{font-family:'JetBrains Mono';font-weight:600;}
  .shike-att-scope .muted{color:var(--ink-soft);}
  .shike-att-scope .badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;}
  .shike-att-scope .badge.green{background:var(--green-tint);color:#1F6E3D;}
  .shike-att-scope .badge.amber{background:var(--amber-tint);color:#8A5B14;}
  .shike-att-scope .badge.gray{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--border);}
  .shike-att-scope .badge.red{background:var(--red-tint);color:#8E2E2E;}
  .shike-att-scope .badge.blue{background:#E3EEFC;color:#1E4E8C;}
  .shike-att-scope .badge.purple{background:#F1E6FB;color:#6B3FA0;}
  .shike-att-scope .badge.teal{background:#DFF1EE;color:#1B6F63;}
  .shike-att-scope .badge.pink{background:#FBE7F1;color:#9C3B72;}
  .shike-att-scope .badge.indigo{background:#E8E7FB;color:#4A3F9C;}
  .shike-att-scope .badge.brown{background:#F1E9E1;color:#6B4A2F;}
  .shike-att-scope .badge.crimson{background:#E5383B;color:#fff;font-weight:700;}
  .shike-att-scope .color-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;}

  .shike-att-scope input[type=text], .shike-att-scope input[type=password], .shike-att-scope input[type=time], .shike-att-scope input[type=date], .shike-att-scope input[type=email], .shike-att-scope select, .shike-att-scope textarea{
    font-family:'Inter';font-size:13.5px;padding:7px 10px;border:1px solid var(--border);
    border-radius:8px;background:var(--surface);color:var(--ink);width:100%;
  }
  .shike-att-scope input[type=time], .shike-att-scope input.mono-input{font-family:'JetBrains Mono';}
  .shike-att-scope textarea{resize:vertical;min-height:52px;}
  .shike-att-scope label{font-size:12px;color:var(--ink-soft);font-weight:600;display:block;margin-bottom:4px;}
  .shike-att-scope .field{margin-bottom:12px;}
  .shike-att-scope .row{display:flex;gap:14px;flex-wrap:wrap;}
  .shike-att-scope .row > *{flex:1;}
  .shike-att-scope .toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:18px;}
  .shike-att-scope .toolbar .field{margin-bottom:0;min-width:150px;}
  .shike-att-scope .icon-btn{background:var(--surface-2);border:1px solid var(--border);width:30px;height:30px;border-radius:8px;cursor:pointer;color:var(--ink-soft);display:inline-flex;align-items:center;justify-content:center;font-size:14px;}
  .shike-att-scope .icon-btn:hover{color:var(--primary);border-color:var(--primary);}
  .shike-att-scope .edit-box{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-top:8px;}
  .shike-att-scope .empty{text-align:center;color:var(--ink-soft);padding:36px 10px;font-size:13.5px;}
  .shike-att-scope .lock-note{display:flex;gap:8px;align-items:center;color:var(--ink-soft);font-size:12.5px;background:var(--surface-2);border:1px dashed var(--border);border-radius:10px;padding:9px 12px;margin-bottom:16px;}
  .shike-att-scope .section-title{font-size:19px;font-weight:700;margin:0 0 12px;color:var(--ink);}
  .shike-att-scope .hint{font-size:11.5px;color:var(--ink-soft);margin-top:4px;}
  .shike-att-scope ::placeholder{color:#A9B2BC;}

  .shike-att-scope /* Login gate */
  .login-gate{display:flex;justify-content:center;padding:36px 0;}
  .shike-att-scope .login-card{width:340px;text-align:left;}
  .shike-att-scope .login-card .ic{font-size:28px;margin-bottom:10px;}
  .shike-att-scope .login-card h2{font-size:17px;margin:0 0 4px;}
  .shike-att-scope .login-card p{color:var(--ink-soft);font-size:12.5px;margin:0 0 18px;}
  .shike-att-scope .login-err{color:var(--red);font-size:12px;margin-top:4px;min-height:16px;}
  .shike-att-scope .login-demo{margin-top:14px;font-size:11.5px;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;}

  /* 列印出勤紀錄：只有 @media print（實際觸發列印/列印預覽時）才會生效，平常瀏覽
   * 網頁畫面時完全不受影響。原則是「畫面上看到什麼，印出來就長什麼樣子」，只拿掉
   * 側邊選單、查詢列的輸入框跟按鈕、還有表格最後一欄的「編輯」按鈕這些印在紙上
   * 沒有意義的互動元件，其餘（員工資訊列、出勤紀錄表格本身）維持原樣印出。 */
  @media print {
    .shike-att-scope .sidebar{display:none !important;}
    .shike-att-scope .print-hide{display:none !important;}
    .shike-att-scope .shell{display:block;min-height:auto;}
    .shike-att-scope .main{padding:0;}
  }