/* 極簡有限公司 —— 外觀與排版。
   分區順序：變數 → 頂部狀態列 → 主區 → 建造列 → 警示 → 家具面板
   → 側欄面板 → 員工列 → 案件卡 → 夜晚 → 過場 → 教學 → 招募 → 窄螢幕 */
  :root{
    --bg:#101012; --panel:#18181b; --line:#2a2a30; --line2:#3a3a42;
    --txt:#f4f4f8; --dim:#b2b2be; --dim2:#84848f;
    --ok:#4dd97f; --bad:#ff5c5c; --warn:#ffc14d; --acc:#ffffff;
    --gold:#f5c450;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  button{transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease;
         user-select:none;-webkit-user-select:none}
  button:not(:disabled):active{filter:brightness(.82)}
  html,body{height:100%}
  body{background:var(--bg);color:var(--txt);
       font:16px/1.55 "Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
       -webkit-font-smoothing:antialiased;padding:10px;overflow:hidden}
  #app{width:100%;height:100%;display:flex;flex-direction:column;gap:9px}

  /* ══ 頂部狀態列 ══ */
  #top{flex:none;position:relative;display:flex;align-items:center;gap:20px;
       background:var(--panel);border:1px solid var(--line);padding:11px 16px 34px}
  #daybar{position:absolute;left:0;right:0;bottom:0;height:26px;overflow:hidden;
          background:#1b1b21;border-top:1px solid var(--line)}
  /* 時鐘就住在進度條裡、水平置中 —— 時間與進度本來就是同一件事 */
  #daybar b{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;
            align-items:center;justify-content:center;font-size:13px;font-weight:600;
            letter-spacing:2px;font-variant-numeric:tabular-nums;color:var(--txt);
            text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.7);
            pointer-events:none}
  #daybar i{position:relative;display:block;height:100%;width:0}
  #daybar i::after{content:'';position:absolute;right:0;top:0;bottom:0;width:2px;
                   background:rgba(255,255,255,.9)}
  #daybar em{position:absolute;top:3px;bottom:3px;width:1px;
             background:rgba(255,255,255,.16);pointer-events:none}
  #daybar em.noon{top:0;bottom:0;width:1px;background:rgba(255,255,255,.3)}
  #daybar em.lunchb{top:0;bottom:0;width:auto;background:rgba(255,193,77,.16);
                    border-left:1px solid rgba(255,193,77,.35);
                    border-right:1px solid rgba(255,193,77,.35)}
  /* 這個月第幾天：十顆格子，最後一顆是結帳日 */
  #mbar{display:flex;gap:3px;align-items:center;height:23px}
  #mbar i{width:9px;height:9px;display:block;background:#22222a;
          border:1px solid var(--line2)}
  #mbar i.on{background:var(--dim2);border-color:var(--dim2)}
  #mbar i.cur{background:var(--acc);border-color:var(--acc);
              box-shadow:0 0 7px rgba(255,255,255,.45)}
  #mbar i.pay{border-color:var(--warn)}
  #mbar i.pay.on,#mbar i.pay.cur{background:var(--warn);border-color:var(--warn);box-shadow:none}
  #mNote{letter-spacing:.3px !important;white-space:nowrap}
  /* 錢變多變少都要看得見 —— 從現金那一格往上飄 */
  #cashfx{position:absolute;left:44px;top:24px;width:190px;height:0;pointer-events:none;z-index:3}
  #cashfx i{position:absolute;left:0;font-size:15px;font-weight:600;font-style:normal;
            font-variant-numeric:tabular-nums;white-space:nowrap;
            animation:cfx 1.5s cubic-bezier(.2,.7,.3,1) forwards;
            text-shadow:0 2px 8px rgba(0,0,0,.75)}
  #cashfx i.up{color:var(--ok)}
  #cashfx i.dn{color:var(--bad)}
  @keyframes cfx{0%{opacity:0;transform:translateY(6px) scale(.9)}
                 18%{opacity:1;transform:translateY(-2px) scale(1.06)}
                 30%{transform:translateY(-4px) scale(1)}
                 100%{opacity:0;transform:translateY(-26px)}}
  .stat{display:flex;align-items:center;gap:11px;min-width:104px}
  .stat .si{width:23px;height:23px;flex:none;color:var(--dim2);display:block}
  .stat .sv{display:flex;flex-direction:column;gap:1px;min-width:0}
  .stat b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.3px;
          white-space:nowrap}
  #tCash{color:var(--gold)}
  #iCash{color:var(--gold) !important}
  .stat span{font-size:11px;color:var(--dim2);letter-spacing:1.5px}
  .stat.act{background:none;border:1px solid transparent;font:inherit;color:inherit;
            cursor:pointer;padding:3px 7px;margin:-3px -7px;text-align:left}
  .stat.act:hover{border-color:var(--line2);background:#1d1d24}
  .tgroup{margin-left:auto;display:flex;align-items:center;gap:16px}
  .vsep{width:1px;align-self:stretch;background:var(--line)}
  #spd{display:flex;gap:5px;align-items:stretch}
  #spd button{background:#222228;border:1px solid var(--line2);color:var(--dim);
              padding:6px 15px;cursor:pointer;font-size:15px;font-family:inherit;
              display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
  #spd button small{font-size:10.5px;color:var(--dim2);letter-spacing:0}
  #spd button.on small{color:rgba(0,0,0,.52)}
  #spd button:hover{border-color:#5a5a68;color:var(--txt)}
  #spd button.on{background:var(--acc);color:#000;border-color:var(--acc);font-weight:600}
  #spd button svg{width:20px;height:20px;display:block}
  #spd button.on svg{color:#000}
  #btnOpt,#btnTut{background:#222228;border:1px solid var(--line2);color:var(--dim);
          padding:8px 10px;cursor:pointer;display:flex;align-items:center;
          font-family:inherit;font-size:17px;line-height:1}
  #btnTut{padding:8px 13px;font-weight:600}
  #btnOpt:hover,#btnTut:hover{border-color:#5a5a68;color:var(--txt)}
  #btnOpt svg{width:22px;height:22px;display:block}
  /* 設定面板：掛在齒輪下面（#top 是 position:relative） */
  #opts{position:absolute;right:14px;top:56px;z-index:12;width:274px;
        background:var(--panel);border:1px solid var(--line2);padding:10px;
        display:flex;flex-direction:column;gap:7px;box-shadow:0 10px 28px rgba(0,0,0,.5)}
  #opts[hidden]{display:none}
  #opts .oh{display:flex;align-items:center;justify-content:space-between;
            font-size:12px;letter-spacing:2px;color:var(--dim2)}
  #opts .oh button{background:none;border:0;color:var(--dim2);cursor:pointer;
                   font-size:14px;font-family:inherit;padding:0 2px;line-height:1}
  #opts .oh button:hover{color:var(--txt)}
  #opts .orow{display:flex;align-items:center;justify-content:space-between;gap:10px;
              background:#222228;border:1px solid var(--line2);color:var(--txt);
              font-family:inherit;font-size:14px;padding:10px 12px;cursor:pointer;text-align:left}
  #opts .orow:hover{border-color:#6a6a78;background:#2a2a32}
  #opts .orow:active{filter:brightness(1.25)}
  #opts .orow em{font-style:normal;font-size:13px;color:var(--dim2);letter-spacing:1px}
  #opts .orow em.on{color:var(--ok)}
  #opts .orow.bad{color:var(--bad);border-color:#4a2c30}
  #opts .orow.bad:hover{border-color:var(--bad);background:#2a1e20}
  #opts .onote{font-size:12px;color:var(--dim2);line-height:1.75;padding:2px 2px 0}

  /* ══ 主區 ══ */
  #main{flex:1;min-height:0;display:flex;gap:9px}
  #stage{flex:1;min-width:400px;min-height:0;overflow:hidden;position:relative;
         display:flex;flex-direction:column;gap:9px;
         background:var(--panel);border:1px solid var(--line);padding:9px}
  #cvwrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
  canvas{display:block;cursor:crosshair}
  #staffcol{flex:0 1 420px;min-width:340px;min-height:0;display:flex;flex-direction:column}
  #staffcol .box{flex:1}
  #casecol{flex:0 1 400px;min-width:350px;min-height:0;display:flex;flex-direction:column;gap:9px}

  /* ══ 建造工具列（貼在辦公室上方，滿版時也在視線內）══ */
  #tools{flex:none;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  #tools button{display:flex;align-items:center;gap:8px;background:#222228;
                border:1px solid var(--line2);color:var(--txt);padding:10px 15px;
                cursor:pointer;font-size:14.5px;font-family:inherit;line-height:1}
  #tools button:hover{border-color:#5f5f6e;background:#282830}
  #tools button.on{background:var(--acc);color:#000;border-color:var(--acc);font-weight:600}
  #tools button svg{width:21px;height:21px;flex:none;display:block}
  #tools .cost{color:var(--dim2);font-size:12.5px;font-variant-numeric:tabular-nums}
  #tools button.on .cost{color:rgba(0,0,0,.55)}
  /* 每種家具三個價位，貴的真的有差 */
  #tools .tool{display:flex;align-items:stretch}
  #tools .tool button{border-right:0}
  #tools select{background:#1c1c22;border:1px solid var(--line2);color:var(--dim);
                font:inherit;font-size:12.5px;padding:0 4px;cursor:pointer;max-width:118px}
  #tools select:hover{border-color:#5f5f6e;color:var(--txt)}
  #tools select:focus{outline:1px solid var(--line2)}
  #hint{margin-left:auto;color:var(--dim2);font-size:13px;padding-right:4px}

  /* ══ 沒工位警示 ══ */
  /* 浮在辦公室上層，不佔版面 —— 出現／消失都不會把畫面推一下 */
  #alert{position:absolute;left:12px;right:12px;top:12px;z-index:5;
         display:flex;align-items:center;gap:12px;padding:11px 15px;
         background:rgba(50,38,14,.96);border:1px solid var(--warn);color:var(--warn);
         font-size:14.5px;box-shadow:0 6px 22px rgba(0,0,0,.55);
         animation:alertIn .22s ease-out, pulseA 1.7s ease-in-out infinite .22s}
  @keyframes alertIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  #alert[hidden]{display:none}
  #alert b{font-weight:600}
  #alert svg{width:23px;height:23px;flex:none}
  #alert button{margin-left:auto;background:var(--warn);color:#000;border:0;
                padding:9px 17px;font-size:13.5px;font-family:inherit;cursor:pointer;
                font-weight:600;flex:none}
  #alert button:hover{background:#ffd070}
  @keyframes pulseA{
    0%,100%{box-shadow:0 0 0 0 rgba(255,193,77,.40)}
    50%    {box-shadow:0 0 0 6px rgba(255,193,77,0)}
  }

  /* ══ 家具面板：點場上的家具就能看等級、升級、拆掉 ══ */
  #fpanel{position:absolute;right:12px;top:12px;z-index:6;width:236px;
          background:rgba(20,20,26,.97);border:1px solid var(--line2);
          box-shadow:0 8px 26px rgba(0,0,0,.6);padding:10px;
          display:flex;flex-direction:column;gap:7px;
          animation:alertIn .18s ease-out}
  #fpanel[hidden]{display:none}
  #fpanel .fp-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
                font-size:14.5px;color:var(--txt);font-weight:600}
  #fpanel .fp-h span{font-size:12px;color:var(--dim);font-weight:400}
  #fpanel .fp-s{font-size:12px;color:var(--dim);margin-top:-3px}
  #fpanel button{display:flex;align-items:center;justify-content:space-between;gap:8px;
                 background:#232330;border:1px solid var(--line2);color:var(--txt);
                 padding:8px 10px;font-size:13px;font-family:inherit;cursor:pointer;
                 text-align:left;line-height:1.3;width:100%}
  #fpanel button small{display:block;color:var(--dim2);font-size:11px;margin-top:2px}
  #fpanel button b{flex:none;color:var(--ok);font-size:12.5px;font-variant-numeric:tabular-nums}
  #fpanel button:not(:disabled):hover{border-color:var(--acc);background:#2b2b3a}
  #fpanel button:disabled{color:var(--dim2);cursor:default}
  #fpanel button:disabled b{color:var(--bad)}
  #fpanel .fp-max{font-size:12px;color:var(--dim2);text-align:center;padding:5px 0}
  #fpanel .fp-w{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--txt);
                background:#1b1b24;border:1px solid var(--line);padding:7px 9px}
  #fpanel .fp-w svg{width:15px;height:15px;flex:none}
  #fpanel .fp-w span{color:var(--dim);font-size:12px}
  #fpanel .fp-w .none{color:var(--dim2)}
  #fpanel .fp-w em{margin-left:auto;font-style:normal;font-size:10.5px;color:#000;
                   background:var(--acc);padding:1px 5px;letter-spacing:1px}
  #fpanel .fp-lb{font-size:11.5px;color:var(--dim2);letter-spacing:1.5px;margin:1px 0 -2px}
  #fpanel .fp-sw{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}
  /* 換人清單也按職位分組（跟員工列同一套順序 ROLE_ORDER） */
  #fpanel .fp-g{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:1.2px;
                color:var(--rc);padding:5px 2px 1px;border-top:1px solid var(--line)}
  #fpanel .fp-g:first-child{border-top:0;padding-top:1px}
  #fpanel .fp-g svg{width:13px;height:13px;flex:none}
  #fpanel .fp-sw::-webkit-scrollbar{width:6px}
  #fpanel .fp-sw::-webkit-scrollbar-thumb{background:var(--line2)}
  #fpanel .fp-sw button{padding:6px 9px;font-size:12.5px;gap:6px;justify-content:flex-start}
  #fpanel .fp-sw button svg{width:14px;height:14px;flex:none}
  #fpanel .fp-sw button span{flex:1;min-width:0;text-align:left}
  #fpanel .fp-sw button em{font-style:normal;font-size:11px;color:var(--dim2)}
  #fpanel .fp-auto{justify-content:center;font-size:12px;color:var(--dim);flex-direction:column;gap:1px}
  #fpanel .fp-auto small{color:var(--dim2);font-size:10.5px}
  #fpanel .fp-a{display:flex;gap:6px}
  #fpanel .fp-a button{justify-content:center;font-size:12.5px;padding:7px 6px}
  #fpanel .fp-a button:first-child{color:var(--bad);border-color:#4a2c30}
  #fpanel .fp-a button:first-child:hover{border-color:var(--bad);background:#2a1e20}

  /* ══ 業務回報：外面談回來的案子 ══ */
  #news{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;width:340px;max-width:calc(100% - 24px);
        background:rgba(24,18,12,.97);border:1px solid #ff8c42;
        box-shadow:0 8px 26px rgba(0,0,0,.6);padding:11px 12px;
        display:flex;flex-direction:column;gap:8px;
        animation:alertIn .22s ease-out, pulseN 1.9s ease-in-out infinite .22s}
  #news[hidden]{display:none}
  @keyframes pulseN{0%,100%{box-shadow:0 0 0 0 rgba(255,140,66,.36)}
                    55%    {box-shadow:0 0 0 7px rgba(255,140,66,0)}}
  #news .nh{display:flex;align-items:center;gap:7px;font-size:13px;color:#ff8c42;
            letter-spacing:1px}
  #news .nh svg{width:16px;height:16px}
  #news .nt{font-size:16px;color:var(--txt);font-weight:600;display:flex;
            justify-content:space-between;gap:8px;align-items:baseline}
  #news .nm{font-size:12.5px;color:var(--dim);display:flex;flex-wrap:wrap;gap:5px}
  #news .na{display:flex;gap:6px;margin-top:2px}
  #news .na button{flex:1;border:0;padding:9px 8px;font-size:13px;font-family:inherit;
                   cursor:pointer;line-height:1.2}
  #news .na .yes{background:#ff8c42;color:#000;font-weight:600}
  #news .na .yes:hover{background:#ffa566}
  #news .na .no{background:#2a2a32;border:1px solid var(--line2);color:var(--txt)}
  #news .na .no:hover{border-color:#7a7a8a}
  #news .nn{font-size:11.5px;color:var(--dim2);line-height:1.6}

  /* ══ 側欄面板 ══ */
  .box{background:var(--panel);border:1px solid var(--line);
       display:flex;flex-direction:column;min-height:0;flex:1}
  .box.staff{flex:1.25}
  .box h3{flex:none;display:flex;align-items:center;gap:8px;
          font-size:13px;letter-spacing:2px;color:var(--dim);font-weight:500;
          padding:7px 8px 7px 12px;border-bottom:1px solid var(--line);min-height:44px}
  .box h3 .ttl{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
  .box h3 .note{letter-spacing:0;font-size:11px;flex:none}
  .box h3 button{display:flex;align-items:center;gap:5px;background:#222228;
                 border:1px solid var(--line2);color:var(--txt);padding:7px 10px;
                 cursor:pointer;font-size:13.5px;font-family:inherit;letter-spacing:0;
                 line-height:1;flex:none}
  .box h3 button:hover{border-color:#5f5f6e;background:#282830}
  .box h3 button svg{width:17px;height:17px;flex:none;display:block}
  .box h3 .btng{display:flex;flex:none}
  .box h3 .btng button+button{border-left:0;letter-spacing:.5px;font-size:12.5px;padding:7px 9px}
  .box h3 button.on{background:var(--acc);color:#000;border-color:var(--acc);font-weight:600}
  .box .body{padding:7px;flex:1;min-height:0;overflow-y:auto}
  .box .body::-webkit-scrollbar{width:7px}
  .box .body::-webkit-scrollbar-thumb{background:var(--line2)}

  /* ══ 員工列 ══ */
  /* 員工一人一格，格線分得開一點 */
  .row{display:flex;align-items:center;gap:9px;padding:9px 9px;cursor:pointer;
       border:1px solid var(--line);background:#1b1b21;margin-bottom:6px;font-size:15px}
  .row:hover{background:#22222a;border-color:var(--line2)}
  .row.sel{border-color:var(--acc);background:#24242c;box-shadow:inset 0 0 0 1px var(--acc)}
  .row.away{opacity:.5}
  .row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
  .row .nm b{font-weight:600;font-size:15.5px}
  .row .meta{color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums}
  .ic{width:13px;height:13px;flex:none;vertical-align:-2px}
  .row>.ic{width:17px;height:17px}
  .wchip .ic{width:12px;height:12px}
  .bars{display:flex;flex-direction:column;gap:4px;width:68px;flex:none}
  .brow{display:flex;align-items:center;gap:5px}
  .brow .ic{width:12px;height:12px}
  .bar{height:5px;background:#2a2a30;flex:1}
  .bar i{display:block;height:100%}
  /* 一藍一綠是什麼，寫在最上面一次 */
  .legend{display:flex;gap:13px;align-items:center;color:var(--dim2);
          font-size:11.5px;padding:2px 8px 7px}
  .legend span{display:inline-flex;align-items:center;gap:4px}
  .legend .rt{margin-left:auto;width:23px;justify-content:center;padding-right:1px}
  /* 員工按職位分組 */
  .ghead{display:flex;align-items:center;gap:7px;padding:8px 8px 4px;font-size:12px;
         letter-spacing:1.5px;color:var(--rc);border-top:1px solid var(--line);margin-top:5px}
  .ghead b{margin-left:auto;color:var(--dim2);font-weight:400;letter-spacing:0;font-size:11.5px}
  /* 資遣：確認做在列上，不開瀏覽器對話框 */
  /* 老闆：工作 ↔ 監督 */
  .row .bossw{flex:none;background:#222228;border:1px solid var(--line2);color:var(--dim);
              font-family:inherit;font-size:11.5px;letter-spacing:1px;padding:5px 9px;
              cursor:pointer;align-self:center}
  .row .bossw:hover{border-color:#7a7a8a;color:var(--txt)}
  .row .bossw.sup{border-color:var(--ok);color:var(--ok)}
  .row .fire{margin-left:2px;flex:none;width:21px;height:21px;padding:0;visibility:hidden;
             border:1px solid var(--line2);background:#22222a;color:var(--dim2);
             font-size:12px;font-family:inherit;cursor:pointer;line-height:1}
  .row:hover .fire{visibility:visible}
  .row .fire:hover{border-color:var(--bad);color:var(--bad);background:#2a1e20}
  .fireq{display:flex;align-items:center;gap:7px;padding:9px 8px;font-size:12.5px;
         border:1px solid var(--bad);background:#241a1c;color:var(--warn);margin:1px 0}
  .fireq span{flex:1;min-width:0}
  .fireq button{border:0;padding:7px 12px;font-size:12.5px;font-family:inherit;cursor:pointer}
  .fireq .yes{background:var(--bad);color:#000;font-weight:600}
  .fireq .no{background:#2c2c36;color:var(--txt);border:1px solid var(--line2)}

  /* ══ 案件卡 ══ */
  .case{position:relative;padding:9px;border:1px solid var(--line);margin-bottom:6px;
        cursor:pointer;border-left-width:3px;border-left-color:var(--line)}
  /* 進行中＝工作台：深色、貼齊、重點在進度 */
  .case.ac{background:#15151b}
  /* 案件板＝公告欄上的紙條：亮一階、有釘子、右上角折角 */
  #market .body{background:#0e0e12}
  .case.mk{background:#212129;border-color:#3d3d4a;padding-left:16px}
  .case.mk:hover{background:#27272f;border-color:#55556a}
  .case.mk.open{background:#2b2b35;border-color:var(--acc)}
  .case.mk::before{content:'';position:absolute;left:5px;top:12px;width:5px;height:5px;
                   border-radius:50%;background:#7b7b8c;box-shadow:0 1px 2px rgba(0,0,0,.7)}
  .case.mk::after{content:'';position:absolute;right:0;top:0;
                  border:7px solid transparent;border-top-color:#0e0e12;border-right-color:#0e0e12}
  .case:hover{border-color:var(--line2)}
  .case .t{display:flex;align-items:center;justify-content:space-between;gap:8px;
           font-size:16px;color:var(--txt)}
  .case .t b{flex:1;min-width:0;font-weight:600;overflow:hidden;
             text-overflow:ellipsis;white-space:nowrap}
  .case .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
  .case .s{font-size:12.5px;color:var(--dim);margin-top:5px;display:flex;gap:8px;
           justify-content:space-between;font-variant-numeric:tabular-nums}
  .case .s span{display:inline-flex;align-items:center;gap:4px;min-width:0}
  .pbar{height:5px;background:#2a2a30;margin-top:6px}
  .pbar i{display:block;height:100%;background:var(--acc)}
  .who{font-size:12.5px;color:var(--dim);margin-top:6px;min-height:17px;
       display:flex;flex-wrap:wrap;gap:4px}
  .wchip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;
         border:1px solid var(--line2);cursor:pointer;font-size:12px;line-height:1.5}
  .wchip:hover{border-color:var(--bad);background:#2a1e20}
  .wchip u{text-decoration:none;color:var(--bad);font-size:10px}
  .wchip i{font-style:normal;opacity:.55;font-size:11px}
  .wchip:hover i{opacity:1;color:var(--bad)}
  .wchip.nodesk,.wchip.offrole{border-color:#5a3a3a}
  .warn-desk{color:var(--warn);font-size:11px;letter-spacing:0;font-weight:400;margin-left:6px}
  .case.ok{border-left-color:var(--ok)}
  .case.warn{border-left-color:var(--warn)}
  .case.bad{border-left-color:var(--bad)}
  .case.bad .t{color:var(--dim)}
  /* 職位票：這件案子要哪些人。當前階段的全亮，其餘壓暗，沒有的人劃掉 */
  .rls{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}
  .rl{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:12px;
      line-height:1.6;border:1px solid var(--rc);color:var(--rc);opacity:.45;
      background:rgba(255,255,255,.035)}
  .rl.cur{opacity:1;font-weight:600;box-shadow:inset 0 0 0 1px var(--rc)}
  .rl.nodesk{border-style:dashed}
  .rl.none{opacity:.26;text-decoration:line-through}
  /* 選了人之後，可以指派的案子自己發亮 —— 提示長在該點的東西上 */
  @keyframes pickG{0%,100%{box-shadow:0 0 0 0 rgba(77,217,127,.42)}
                   55%    {box-shadow:0 0 0 5px rgba(77,217,127,0)}}
  @keyframes pickW{0%,100%{box-shadow:0 0 0 0 rgba(255,193,77,.40)}
                   55%    {box-shadow:0 0 0 5px rgba(255,193,77,0)}}
  .case.pick{border-color:var(--ok);background:#18211c;
             animation:pickG 1.3s ease-in-out infinite}
  .case.pick.off{border-color:var(--warn);background:#211d13;animation-name:pickW}
  .pk{flex:none;font-size:11px;padding:2px 8px;background:var(--ok);color:#000;font-weight:600}
  .case.pick.off .pk{background:var(--warn)}
  .fz{font-size:12.5px;margin-top:6px;display:flex;align-items:center;gap:6px}
  .fz.ok{color:var(--ok)} .fz.warn{color:var(--warn)} .fz.bad{color:var(--bad)}
  .case.open{border-color:var(--acc);background:#1d1d22}
  .stages{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
          display:flex;flex-direction:column;gap:4px}
  .stg{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--txt)}
  .stg .sd{display:flex;flex:none}
  .stg .sn{flex:1}
  .stg .sr{color:var(--dim);font-size:12px}
  .stg .sw{color:var(--dim2);font-size:11px;font-variant-numeric:tabular-nums;
           min-width:34px;text-align:right}
  .stg.miss .sn,.stg.miss .sr{color:var(--bad)}
  /* 展開的進行中案件：每階段進度 + 每個人的速度 */
  .stg2{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim);padding:2px 0}
  .stg2 .ic{width:13px;height:13px}
  .stg2 .sn{width:58px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .stg2 .sbar{flex:1;height:5px;background:#2a2a30;position:relative;overflow:hidden}
  .stg2 .sbar i{display:block;height:100%;background:var(--line2);position:relative}
  .stg2 .sbar u{position:absolute;left:0;top:0;height:100%;background:#2f5c3b}
  .stg2 .sw{width:60px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums}
  .stg2.done{color:var(--dim2)}
  .stg2.done .sbar i{background:#3f6b4c}
  .stg2.now{color:var(--txt)}
  .stg2.now .sbar i{background:var(--acc)}
  .wrate{display:flex;justify-content:space-between;align-items:center;gap:8px;
         font-size:12px;color:var(--dim);padding:2px 0}
  .wrate b{font-weight:400;display:inline-flex;align-items:center;gap:5px}
  .eta{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;
       color:var(--txt);margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
  .cp{flex:none;font-size:11.5px;padding:1px 7px;border:1px solid currentColor;letter-spacing:.5px}
  .cp.ok{color:var(--ok)} .cp.dim{color:var(--dim2)} .cp.bad{color:var(--bad)}
  .cp.plan{color:#a86edb}
  .cp.lead{color:#ff8c42}
  .cp.net{color:var(--txt);border-color:var(--line2);background:#1e1e25}
  .case.ac .t span small{font-size:10px;font-weight:400;color:var(--dim2);margin-left:4px;
                         letter-spacing:.5px}
  .acts{display:flex;gap:6px;margin-top:10px}
  .acts button{flex:1;padding:11px 9px;font-size:13.5px;font-family:inherit;cursor:pointer;
               border:0;line-height:1}
  .acts .take{background:var(--acc);color:#000;font-weight:600}
  .acts .take:hover{background:#cfd4e0;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
  .acts .take.risky{background:var(--warn)}
  .acts .take.risky:hover{background:#ffd473;box-shadow:0 0 0 2px rgba(255,193,77,.25)}
  .acts .cancel{flex:0 0 80px;background:#26262e;border:1px solid var(--line2);color:var(--dim)}
  .acts .cancel:hover{border-color:#7a7a8a;color:var(--txt);background:#30303a}

  /* ══ 夜晚 ══ */
  #night{position:absolute;inset:9px;background:rgba(8,8,12,.93);
         display:none;flex-direction:column;align-items:center;justify-content:center;gap:15px}
  #night.on{display:flex}
  /* 內容比畫面高的時候要能捲 —— 現在只有底下那顆按鈕能推進，不能被切掉。
     上下兩塊墊片負責置中，擠不下時自己縮成 0；真正的內容一律不准被壓
     （#log / #events 有 overflow:auto，最小尺寸是 0，不擋的話會被壓成一條線）。 */
  #night{overflow-y:auto;padding:14px 10px}
  #night > *{flex:0 0 auto}
  #night::before,#night::after{content:'';flex:1 1 0;min-height:0}
  #night h2{font-size:30px;font-weight:400;letter-spacing:5px}
  #night .sub{color:var(--dim);font-size:15.5px;text-align:center;line-height:1.95}
  /* 睡覺鍵與它左邊的「上一步」 */
  #night .nbtns{display:flex;gap:10px;align-items:stretch;justify-content:center}
  #night #prevStep{background:#222228;border:1px solid var(--line2);color:var(--dim);
                   padding:14px 24px;font-size:14px;letter-spacing:3px;cursor:pointer}
  #night #prevStep:hover{border-color:#7a7a8a;color:var(--txt)}
  #night #prevStep[hidden]{display:none}
  #night .nbtns button{background:var(--acc);color:#000;border:0;padding:14px 38px;
                cursor:pointer;font-size:16px;letter-spacing:3px;font-family:inherit;font-weight:600}
  #night #nextDay:not(:disabled):hover{background:#cfd4e0;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
  #night #nextDay:disabled{background:#2c2c34;color:var(--dim2);cursor:default;font-weight:400}
  #log{color:var(--dim);font-size:14px;line-height:1.9;text-align:center;max-height:130px;
       overflow-y:auto;line-height:1.85;min-width:380px}
  .g{color:var(--ok)} .r{color:var(--bad)} .y{color:var(--warn)}

  #events{display:flex;flex-direction:column;gap:8px;width:500px;max-width:94%;
          max-height:280px;overflow-y:auto}
  #events[hidden]{display:none}          /* #events 有 display:flex，會壓過 [hidden] */
  #events::-webkit-scrollbar{width:7px}
  #events::-webkit-scrollbar-thumb{background:var(--line2)}
  .ev{background:var(--panel);border:1px solid var(--line2);
      border-left:3px solid var(--warn);padding:12px 14px;text-align:left}
  .ev .eh{font-size:15.5px;margin-bottom:5px}
  .ev .et{font-size:12.5px;color:var(--dim);line-height:1.8;margin-bottom:10px}
  .ev .eo{display:flex;gap:7px;flex-wrap:wrap}
  #night .ev .eo button{background:#222228;border:1px solid var(--line2);color:var(--txt);
       padding:8px 13px;font-size:13.5px;cursor:pointer;font-family:inherit;
       letter-spacing:0;text-align:left;line-height:1.35;font-weight:400}
  #night .ev .eo button:hover{border-color:#6a6a78;background:#2a2a32}
  #night .ev .eo button small{color:var(--dim2);display:block;font-size:11px;margin-top:3px}

  /* ══ 父親留下的債（夜晚還款）══ */
  #debt{width:500px;max-width:94%;background:var(--panel);border:1px solid var(--line2);
        border-left:3px solid var(--bad);padding:11px 14px;text-align:left}
  #debt.clear{border-left-color:var(--ok)}
  #debt .dh .due{font-size:20px;font-weight:600;letter-spacing:.5px}
  #debt .dh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
            font-size:13px;color:var(--dim);margin-bottom:8px}
  #debt .dh b{font-size:20px;color:var(--txt);font-weight:600;letter-spacing:.5px}
  #debt .dh .due{color:var(--warn)}
  #debt .dh .due.ok{color:var(--ok)}
  #debt .dp{height:4px;background:#22222a;margin-bottom:9px;overflow:hidden}
  #debt .dp i{display:block;height:100%;background:var(--ok);transition:width .3s}
  #debt .drow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px;align-items:center}
  #debt .drow > span{font-size:11.5px;color:var(--dim2);flex:0 0 50px}
  #debt .dstage{font-size:11px;color:var(--dim2);letter-spacing:2px;margin-bottom:7px}
  #debt .dgrp{background:#191920;padding:9px 11px 4px}
  #debt .dsep{height:11px}
  #debt .dgrp.bank{border-left:2px solid var(--line2)}
  #debt.done{border-left-color:var(--ok)}
  .ehd{font-size:11px;color:var(--dim2);letter-spacing:2px}
  .enone{font-size:12.5px;color:var(--dim2);margin-top:5px}
  .drecap{display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;
          font-size:17px;
          font-size:12.5px;color:var(--dim2);background:#16161c;
          border-left:2px solid var(--line2);padding:7px 10px;margin-bottom:3px}
  .drecap b{font-weight:600}
  .drecap button{background:#222228;border:1px solid var(--line2);color:var(--dim);
                 padding:5px 10px;font-size:11.5px;font-family:inherit;cursor:pointer}
  .drecap button:hover{border-color:#7a7a8a;color:var(--txt)}
  #night #debt button{background:#222228;border:1px solid var(--line2);color:var(--txt);
       padding:6px 11px;font-size:12.5px;cursor:pointer;font-family:inherit;
       letter-spacing:0;font-weight:400}
  #night #debt button:not(:disabled):hover{border-color:#6a6a78;background:#2a2a32}
  #night #debt button:not(:disabled):active{filter:brightness(1.25)}
  #night #debt button:disabled{color:#4a4a56;border-color:#26262e;cursor:default}
  #night #debt button.pri{border-color:var(--ok);color:var(--ok)}
  #night #debt button.pri:disabled{border-color:#26262e;color:#4a4a56}
  #debt .dnote{font-size:14px;color:var(--dim);line-height:1.85;margin-top:9px}
  /* 債主的耐性：三顆點，滅一顆就少一次機會 */
  #debt .dchance{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
                 background:#191920;border-left:2px solid var(--warn);padding:8px 11px;margin-top:9px}
  #debt .dchance.hot{border-left-color:var(--bad)}
  #debt .dchance > span:first-child{font-size:14px;color:var(--dim);letter-spacing:1px;flex:none}
  #debt .dchance .dots{display:flex;gap:4px;flex:none}
  #debt .dchance .dots i{width:14px;height:14px;display:block;border:1px solid var(--line2);
                         background:#22222a;border-radius:50%}
  #debt .dchance .dots i.on{background:var(--warn);border-color:var(--warn)}
  #debt .dchance.hot .dots i.on{background:var(--bad);border-color:var(--bad)}
  #debt .dchance .dtx{font-size:11.5px;color:var(--dim);flex:1 1 100%}
  #debt .dauto{display:flex;align-items:flex-start;gap:8px;margin-top:11px;padding:9px 11px;
               background:#191920;border-left:2px solid var(--ok);cursor:pointer;
               font-size:12.5px;color:var(--dim)}
  #debt .dauto input{width:19px;height:19px;accent-color:var(--ok);cursor:pointer;flex:none;
                     margin-top:1px}
  #debt .dauto{font-size:15px}
  #debt .dauto small{display:block;font-size:12.5px;color:var(--dim2);margin-top:3px}

  /* ══ 開場故事（分段打字機）══ */
  #story{position:fixed;inset:0;z-index:70;background:#07070b;
         display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
  #story[hidden]{display:none}
  #story .stx{font-size:17px;line-height:2.5;color:var(--txt);letter-spacing:2px;
              text-align:center;max-width:560px;padding:0 24px;min-height:120px;
              display:flex;flex-direction:column;justify-content:center}
  #story .car{display:inline-block;width:8px;height:17px;background:var(--acc);
              vertical-align:-2px;margin-left:3px;animation:blink .9s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  #story .sfoot{display:flex;flex-direction:column;align-items:center;gap:16px}
  #story .sdots{display:flex;gap:6px}
  #story .sdots em{width:16px;height:2px;background:#2c2c36;display:block}
  #story .sdots em.was{background:#4a4a58}
  #story .sdots em.on{background:var(--acc)}
  #storyGo{background:transparent;color:var(--dim);border:1px solid var(--line2);
           padding:10px 30px;cursor:pointer;font-size:14px;letter-spacing:4px;font-family:inherit}
  #storyGo:hover{border-color:#7a7a8a;color:var(--txt)}

  /* ══ 操作教學：聚光燈 ══ */
  #spot{position:fixed;inset:0;z-index:60;pointer-events:none}
  #spot[hidden]{display:none}
  #spot .bd{position:absolute;background:rgba(5,5,9,.76);pointer-events:auto;display:block}
  #spot .ring{position:absolute;pointer-events:none;display:block;border-radius:3px;
              box-shadow:0 0 0 2px var(--acc),0 0 22px rgba(255,255,255,.30);
              animation:spulse 1.7s ease-in-out infinite}
  @keyframes spulse{50%{box-shadow:0 0 0 3px var(--acc),0 0 30px rgba(255,255,255,.45)}}

  #coach{position:fixed;z-index:62;width:370px;max-width:calc(100vw - 24px);
         background:var(--panel);border:1px solid #55556a;border-left:3px solid var(--acc);
         padding:14px 16px;box-shadow:0 10px 40px rgba(0,0,0,.7)}
  #coach[hidden]{display:none}
  #coach .ch{font-size:15.5px;color:var(--txt);margin-bottom:7px;letter-spacing:1px}
  #coach .cd{font-size:12.5px;color:var(--dim);line-height:1.95}
  #coach .cd b{color:var(--txt)}
  #coach button{margin-top:11px;background:var(--acc);color:#000;border:0;padding:8px 20px;
                cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;letter-spacing:2px}
  #coach button:hover{background:#cfd4e0}
  #coach .cwait{margin-top:10px;font-size:11.5px;color:var(--acc);letter-spacing:1px}

  #tutSkip{position:fixed;top:12px;right:14px;z-index:80;background:#1c1c24;
           border:1px solid var(--line2);color:var(--dim);padding:7px 14px;
           font-size:12px;font-family:inherit;cursor:pointer;letter-spacing:1px}
  #tutSkip[hidden]{display:none}
  #tutSkip:hover{border-color:#7a7a8a;color:var(--txt)}

  /* ══ 教學最後一頁：你的目標 ══ */
  #goal{position:fixed;inset:0;z-index:70;background:rgba(7,7,11,.97);
        display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:16px 0}
  #goal[hidden]{display:none}
  #goal .gbox{max-width:520px;padding:0 26px;display:flex;flex-direction:column;gap:4px}
  #goal h2{font-size:23px;font-weight:400;letter-spacing:6px;text-align:center;margin-bottom:12px}
  #goal .gd{font-size:13px;color:var(--dim);line-height:2.1}
  #goal .gd p{margin:0 0 13px}
  #goal .gd b{color:var(--txt)}
  #goal .gd .tg-last{border-left:2px solid var(--acc);padding-left:12px;color:var(--txt)}
  #goalGo{margin-top:16px;background:var(--acc);color:#000;border:0;padding:13px;
          cursor:pointer;font-size:15px;letter-spacing:4px;font-family:inherit;font-weight:600}
  #goalGo:hover{background:#cfd4e0;box-shadow:0 0 0 3px rgba(255,255,255,.16)}

  /* 挑戰案（老闆應酬帶回來的）：紅橘色調、斜紋底、左邊一條粗的 */
  .case.sp{border-color:#ff7a3d;border-left:4px solid #ff7a3d;
           background:linear-gradient(135deg,rgba(255,122,61,.12),rgba(255,122,61,.04) 60%),
                      repeating-linear-gradient(45deg,rgba(255,122,61,.07) 0 7px,transparent 7px 14px),
                      #1c1a19}
  .case.sp .t b{color:#ffb184}
  .cp.sp{color:#ff7a3d;border-color:#ff7a3d;background:rgba(255,122,61,.12);font-weight:600}
  /* 政府標案：藍灰、虛線外框（還沒得標，所以是虛的） */
  .case.gov{border:1px dashed #6f9bd1;border-left:4px solid #6f9bd1;
            background:linear-gradient(135deg,rgba(111,155,209,.13),rgba(111,155,209,.03) 60%),#181a1e}
  .case.gov .t b{color:#a8c8ee}
  .cp.gov{color:#6f9bd1;border-color:#6f9bd1;background:rgba(111,155,209,.12)}

  /* ══ 銀行（白天也能借，時間會停住）══ */
  #bank{position:absolute;inset:9px;z-index:9;background:rgba(8,8,12,.92);
        display:none;align-items:center;justify-content:center;padding:10px;overflow-y:auto}
  #bank.on{display:flex}
  .bbox{background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--warn);
        width:470px;max-width:96%;margin:auto;padding:14px 16px;
        display:flex;flex-direction:column;gap:10px;text-align:left}
  .bbox.force{border-left-color:var(--bad)}
  .bbox h2{font-size:13px;letter-spacing:3px;color:var(--dim);font-weight:500}
  .bbox .bnum{font-size:21px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.5px}
  .bbox .bhd{display:flex;align-items:baseline;gap:10px;justify-content:space-between}
  .bbox .bhd span{font-size:11.5px;color:var(--dim2)}
  .bbox .brow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .bbox .brow > span{font-size:11.5px;color:var(--dim2);flex:0 0 46px}
  .bbox button{background:#222228;border:1px solid var(--line2);color:var(--txt);
               padding:8px 12px;font-size:13px;font-family:inherit;cursor:pointer;letter-spacing:.5px}
  .bbox button:not(:disabled):hover{border-color:#6a6a78;background:#2a2a32}
  .bbox button:disabled{color:#4a4a56;border-color:#26262e;cursor:default}
  .bbox button.pri{border-color:var(--ok);color:var(--ok)}
  .bbox button.danger{border-color:var(--bad);color:var(--bad)}
  .bbox .bnote{font-size:11.5px;color:var(--dim2);line-height:1.75}
  .bbox .bfoot{display:flex;justify-content:flex-end;gap:6px;margin-top:2px}

  /* ══ 結局 ══ */
  #over{position:absolute;inset:9px;z-index:10;background:rgba(8,8,12,.96);
        display:none;align-items:center;justify-content:center}
  #over.on{display:flex;animation:tfade .5s ease-out}
  #over .obox{text-align:center;max-width:520px;padding:0 26px;
              display:flex;flex-direction:column;gap:18px}
  #over h2{font-size:30px;font-weight:400;letter-spacing:8px}
  #over .osub{color:var(--dim);font-size:14px;line-height:2.2}
  #over .ograde{font-size:14px;color:var(--dim2);letter-spacing:1px}
  #over .ograde b{font-size:26px;letter-spacing:2px;vertical-align:-2px}
  #overAgain{background:var(--acc);color:#000;border:0;padding:13px 30px;
             cursor:pointer;font-size:15px;letter-spacing:4px;font-family:inherit;font-weight:600}
  #overAgain:hover{background:#cfd4e0;box-shadow:0 0 0 3px rgba(255,255,255,.16)}

  /* ══ 日夜過場（2 秒，逐行浮出）══ */
  /* 雲端與本機的進度對不上 —— 讓玩家自己選（浮層只認按鈕） */
  #cloudpick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:11;
             width:400px;max-width:calc(100% - 24px);background:var(--panel);
             border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.6);
             padding:14px;display:flex;flex-direction:column;gap:9px}
  #cloudpick[hidden]{display:none}
  #cloudpick .ch{font-size:17px;font-weight:600;color:var(--txt)}
  #cloudpick .cs{font-size:13px;color:var(--dim);line-height:1.75}
  #cloudpick button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
                    background:#222228;border:1px solid var(--line2);color:var(--txt);
                    font-family:inherit;font-size:14.5px;padding:10px 12px;cursor:pointer;
                    text-align:left}
  #cloudpick button:hover{border-color:var(--acc);background:#2b2b3a}
  #cloudpick button:active{filter:brightness(1.25)}
  #cloudpick button em{font-style:normal;font-size:12px;color:var(--dim2);line-height:1.6}

  /* 按下睡覺 → 3 秒 ZZZ：緩入 1 秒、維持 1 秒、緩出 1 秒 */
  #sleep{position:absolute;inset:9px;z-index:9;background:rgba(6,6,10,.97);
         display:none;align-items:center;justify-content:center;gap:12px}
  #sleep.on{display:flex;animation:zfade 3s ease-in-out forwards}
  @keyframes zfade{0%{opacity:0}33%{opacity:1}66%{opacity:1}100%{opacity:0}}
  #sleep b{color:var(--dim);font-weight:300;letter-spacing:4px;
           animation:zfloat 1.6s ease-in-out infinite}
  #sleep b:nth-child(1){font-size:52px}
  #sleep b:nth-child(2){font-size:38px;animation-delay:.3s}
  #sleep b:nth-child(3){font-size:27px;animation-delay:.6s}
  @keyframes zfloat{0%,100%{transform:translateY(4px);opacity:.4}
                    50%{transform:translateY(-10px);opacity:1}}
  #trans{position:absolute;inset:9px;z-index:8;background:rgba(8,8,12,.94);
         display:none;flex-direction:column;align-items:center;justify-content:center;
         gap:16px;overflow-y:auto;padding:14px 0;justify-content:safe center}
  #trans.on{display:flex;animation:tfade .3s ease-out}
  #trans.on.out{animation:tout .62s cubic-bezier(.4,0,.6,1) forwards}
  @keyframes tfade{from{opacity:0}to{opacity:1}}
  @keyframes tout{from{opacity:1}to{opacity:0;transform:scale(1.035)}}
  #trans.out .tl div,#trans.out h2{animation:none}
  #trans h2{font-size:36px;font-weight:300;letter-spacing:9px;color:var(--txt);
            animation:tup .45s cubic-bezier(.2,.85,.25,1) both}
  #trans .sub{font-size:16px;color:var(--dim2);letter-spacing:2px;margin-top:-6px;
              text-align:center;line-height:2;max-width:520px;
              animation:tup .45s cubic-bezier(.2,.85,.25,1) both}
  #trans .tl{display:flex;flex-direction:column;gap:2px;width:430px;max-width:92%;
             font-size:17px;color:var(--dim);margin:4px 0}
  #trans .trow{display:flex;align-items:center;gap:11px;padding:8px 12px;
               border-bottom:1px solid #23232b;border-left:3px solid transparent;
               animation:tup .5s cubic-bezier(.2,.85,.25,1) both}
  #trans .trow:last-child{border-bottom:0}
  #trans .trow.hi{background:#1a1a21;border-bottom-color:transparent}
  /* 綠＝不錯、黃＝普通/要注意、紅＝不好 */
  #trans .trow.g{border-left-color:var(--ok)}
  #trans .trow.y{border-left-color:var(--warn)}
  #trans .trow.r{border-left-color:var(--bad)}
  #trans .trow.g .tv,#trans .trow.g .ti{color:var(--ok)}
  #trans .trow.y .tv,#trans .trow.y .ti{color:var(--warn)}
  #trans .trow.r .tv,#trans .trow.r .ti{color:var(--bad)}
  #trans .trow.g .tv small,#trans .trow.y .tv small,#trans .trow.r .tv small{color:var(--dim2)}
  #trans .ti{width:19px;height:19px;flex:none;display:flex;color:var(--dim2)}
  #trans .ti svg{width:19px;height:19px}
  #trans .tk{flex:none;white-space:nowrap;font-size:15.5px;color:var(--dim2);letter-spacing:1px}
  #trans .tv{flex:1;min-width:0;font-size:19px;color:var(--txt);font-weight:600;
             font-variant-numeric:tabular-nums;text-align:right}
  #trans .tv small{font-size:13.5px;font-weight:400;color:var(--dim2);margin-left:6px;
                   letter-spacing:0}
  #trans .tl b{color:var(--txt);font-weight:600}
  #trans .tgo{background:var(--acc);color:#000;border:0;padding:12px 34px;margin-top:6px;
              font-size:15px;letter-spacing:3px;font-family:inherit;font-weight:600;
              cursor:pointer;animation:tup .5s cubic-bezier(.2,.85,.25,1) both}
  #trans .tgo:hover{background:#cfd4e0;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
  @keyframes tup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* ══ 開場教學：純文字，講清楚循環就好 ══ */
  #tut{position:absolute;inset:9px;z-index:9;background:rgba(8,8,12,.95);
       display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:8px}
  #tut.on{display:flex;animation:tfade .3s ease-out}
  #tut::-webkit-scrollbar{width:7px}
  #tut::-webkit-scrollbar-thumb{background:var(--line2)}
  .tbox{background:var(--panel);border:1px solid var(--line2);width:560px;max-width:96%;
        margin:auto;padding:20px 22px 18px;display:flex;flex-direction:column;gap:13px}
  .tbox h2{font-size:17px;letter-spacing:3px;font-weight:500;color:var(--txt)}
  .tsteps{display:flex;flex-direction:column;gap:9px;font-size:13.5px;
          color:var(--dim);line-height:1.75}
  .tsteps b{color:var(--txt);font-weight:600;margin-right:7px}
  .tsteps div{border-left:2px solid var(--line2);padding-left:11px}
  .texp{font-size:13px;color:var(--dim);line-height:1.9;background:#1e1e25;
        border:1px solid var(--line);padding:11px 13px}
  .texp b{color:var(--ok)}
  .tfoot{font-size:12.5px;color:var(--dim2);line-height:1.8}
  .tfoot b{color:var(--dim)}
  #tutGo{background:var(--acc);color:#000;border:0;padding:13px;margin-top:2px;
         font-size:15px;letter-spacing:4px;font-family:inherit;font-weight:600;cursor:pointer}
  #tutGo:hover{background:#cfd4e0;box-shadow:0 0 0 3px rgba(255,255,255,.16)}

  /* ══ 招募面板 ══ */
  /* 四位人選比較高，容器要能捲；margin:auto 讓它有空間時仍然置中 */
  #hire{position:absolute;inset:9px;background:rgba(8,8,12,.90);
        display:none;align-items:flex-start;justify-content:center;
        overflow-y:auto;padding:6px}
  #hire.on{display:flex}
  #hire::-webkit-scrollbar{width:7px}
  #hire::-webkit-scrollbar-thumb{background:var(--line2)}
  .hbox{background:var(--panel);border:1px solid var(--line2);width:520px;max-width:96%;margin:auto}
  .hbox h2{font-size:13px;letter-spacing:3px;color:var(--dim);font-weight:500;
           padding:14px 16px;border-bottom:1px solid var(--line)}
  .hbox h2 small{float:right;letter-spacing:0;color:var(--dim2);font-size:12px}
  #hlist{padding:9px;display:flex;flex-direction:column;gap:7px}
  .cand{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--line)}
  .cand .cd{width:22px;height:22px;flex:none;display:flex}
  .cand .cd svg{width:22px;height:22px}
  .cand .ci{flex:1;min-width:0}
  .cand .ci b{font-size:16.5px;font-weight:600}
  .cand .ci div{font-size:12.5px;color:var(--dim);margin-top:3px;font-variant-numeric:tabular-nums}
  .cand .rdesc{font-size:12px;color:var(--dim2);line-height:1.7;margin-top:4px;
               letter-spacing:0;font-variant-numeric:normal}
  .cand .cd{align-self:flex-start;margin-top:3px}
  .cand button{align-self:center}
  .cand button{background:var(--acc);color:#000;border:0;padding:10px 20px;
               cursor:pointer;font-size:14px;font-family:inherit;flex:none;font-weight:600}
  .cand button:not(:disabled):hover{background:#cfd4e0;box-shadow:0 0 0 2px rgba(255,255,255,.18)}
  .cand:hover{border-color:var(--line2)}
  .cand button:disabled{background:#33333c;color:var(--dim2);cursor:default;font-weight:400}
  .hbox .foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;
              align-items:center;gap:12px}
  .hbox .foot span{color:var(--dim2);font-size:11.5px;flex:1}
  .hbox .foot button{background:#222228;border:1px solid var(--line2);color:var(--txt);
                     padding:10px 22px;cursor:pointer;font-size:14px;font-family:inherit}
  .hbox .foot button:hover{border-color:#7a7a8a;background:#2c2c36}

  /* ══ 窄螢幕：側欄掉到下方 ══ */
  @media (max-width:1320px){
    body{overflow:auto}
    #app{height:auto;min-height:100%}
    #main{flex-wrap:wrap}
    #stage{flex:1 1 100%;height:58vh;min-height:330px;min-width:0}
    #staffcol{flex:1 1 300px;height:auto}
    #casecol{flex:1 1 340px;height:auto}
    .box,.box.staff{flex:none}
    .box .body{max-height:215px}
  }