/* 嘉業 8 關卡工單系統 — 深色科技指揮中心 */
:root{
  --bg:#070b14; --bg2:#0a1020; --surface:#0e1728; --surface2:#101b30;
  --line:rgba(120,165,230,.14); --line2:rgba(120,165,230,.28);
  --cyan:#2fe6e0; --cyan-d:#16b6c4; --purple:#a78bfa; --magenta:#f472b6;
  --green:#2bf5b0; --amber:#fcc44a; --red:#ff5d78; --blue:#46b6ff;
  --txt:#dde7f7; --mut:#7e8caa; --mut2:#586079;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--txt);
  font-family:"PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(47,230,224,.10), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(167,139,250,.12), transparent 55%),
    linear-gradient(180deg,#070b14,#05080f 60%);
  background-attachment:fixed;
}
body::before{ /* 科技格線 */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(120,165,230,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(120,165,230,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);
}
body>*{position:relative;z-index:1}
button{font-family:inherit;cursor:pointer}
.mono{font-family:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace}

/* 頂列 */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;
  background:linear-gradient(180deg,rgba(14,23,40,.92),rgba(10,16,32,.72));
  border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:14px}
.logo{background:linear-gradient(135deg,var(--cyan),var(--cyan-d));color:#04121a;font-weight:900;
  padding:8px 13px;border-radius:11px;font-size:18px;letter-spacing:2px;
  box-shadow:0 0 22px rgba(47,230,224,.5),inset 0 0 12px rgba(255,255,255,.25)}
.title{font-size:17px;font-weight:800;letter-spacing:.5px}
.subtitle{font-size:11.5px;color:var(--cyan);opacity:.75;letter-spacing:1px}
.role-pick{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--mut);letter-spacing:1px}
.role-pick label{text-transform:uppercase}
.role-pick select{padding:9px 13px;border-radius:10px;border:1px solid var(--line2);font-size:14px;font-weight:700;
  background:#0c1526;color:var(--cyan);outline:none;box-shadow:0 0 0 1px rgba(47,230,224,.08),0 0 18px rgba(47,230,224,.12) inset}

/* 指揮中心 KPI 統計列 */
.stat-bar{display:flex;gap:14px;padding:16px 24px 4px;flex-wrap:wrap}
.stat{flex:1;min-width:130px;background:linear-gradient(160deg,rgba(16,27,48,.9),rgba(10,16,30,.7));
  border:1px solid var(--line);border-radius:14px;padding:13px 16px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,var(--gc,rgba(47,230,224,.22)),transparent 70%)}
.stat .n{font-size:26px;font-weight:800;letter-spacing:1px;color:var(--gtxt,var(--cyan));
  text-shadow:0 0 18px var(--gsh,rgba(47,230,224,.55))}
.stat .l{font-size:11px;color:var(--mut);letter-spacing:1.5px;margin-top:2px;text-transform:uppercase}
.stat .pulse{position:absolute;top:14px;right:16px;width:8px;height:8px;border-radius:50%;
  background:var(--gtxt,var(--cyan));box-shadow:0 0 10px var(--gtxt,var(--cyan));animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* 範圍說明條 */
.scope-bar{margin:14px 24px 0;padding:10px 16px;font-size:12px;color:var(--mut);letter-spacing:.3px;
  background:rgba(12,21,38,.6);border:1px solid var(--line);border-radius:12px}
.scope-bar b{color:var(--cyan)}
.zchip{display:inline-block;margin:0 3px;padding:2px 9px;border-radius:20px;font-size:11px;
  background:rgba(47,230,224,.1);border:1px solid var(--line2);color:var(--txt)}
.zchip.ro{opacity:.55}
.zchip.none{text-decoration:line-through;opacity:.35;background:transparent}

/* 頁籤 */
.tabs{display:flex;align-items:center;gap:8px;padding:16px 24px 0}
.tab{background:transparent;border:1px solid transparent;padding:9px 17px;border-radius:11px;
  font-size:14px;font-weight:700;color:var(--mut);letter-spacing:.5px}
.tab.active{color:#04121a;background:linear-gradient(135deg,var(--cyan),var(--cyan-d));
  box-shadow:0 0 20px rgba(47,230,224,.4)}
.btn-new{margin-left:auto;background:linear-gradient(135deg,var(--purple),#7c5cf0);color:#fff;border:none;
  padding:10px 18px;border-radius:11px;font-weight:800;font-size:14px;box-shadow:0 0 22px rgba(167,139,250,.45)}

/* 看板 */
.board-wrap{display:flex;gap:14px;padding:18px 24px 50px;overflow-x:auto;align-items:flex-start}
.lane{flex:0 0 262px;background:linear-gradient(180deg,rgba(12,20,36,.66),rgba(8,13,26,.5));
  border:1px solid var(--line);border-radius:16px;padding:12px;min-height:130px}
.lane-head{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;color:var(--txt);margin-bottom:3px}
.lane-head .gate{margin-left:auto;font-size:10px;color:var(--mut);background:rgba(70,182,255,.1);
  border:1px solid var(--line2);padding:2px 8px;border-radius:20px}
.lane-sub{font-size:11px;color:var(--mut);margin-bottom:12px;letter-spacing:.5px}
.lane.ongoing{border-color:rgba(70,182,255,.4);box-shadow:0 0 26px rgba(70,182,255,.14) inset}

.card{background:linear-gradient(165deg,rgba(18,29,52,.96),rgba(11,18,34,.92));
  border:1px solid var(--line);border-left:3px solid var(--ac,var(--cyan));border-radius:13px;
  padding:12px 13px;margin-bottom:11px;cursor:pointer;transition:transform .1s,box-shadow .15s,border-color .15s;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 6px 18px rgba(0,0,0,.35)}
.card:hover{transform:translateY(-3px);border-color:var(--line2);
  box-shadow:0 0 24px var(--acg,rgba(47,230,224,.28)),0 10px 24px rgba(0,0,0,.5)}
.card.s_in_progress{--ac:var(--green);--acg:rgba(43,245,176,.28)}
.card.s_pending_approval{--ac:var(--amber);--acg:rgba(252,196,74,.3)}
.card.s_rejected{--ac:var(--red);--acg:rgba(255,93,120,.3)}
.card.s_ongoing{--ac:var(--blue);--acg:rgba(70,182,255,.3)}
.card-name{font-weight:800;font-size:13.5px;line-height:1.4}
.card-code{font-size:11px;color:var(--mut);margin-top:3px;letter-spacing:.5px}
.card-foot{display:flex;align-items:center;gap:6px;margin-top:11px}
.badge{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:800;letter-spacing:.5px;border:1px solid transparent}
.b_pending{background:rgba(252,196,74,.14);color:var(--amber);border-color:rgba(252,196,74,.4)}
.b_rejected{background:rgba(255,93,120,.14);color:var(--red);border-color:rgba(255,93,120,.4)}
.b_in_progress{background:rgba(43,245,176,.12);color:var(--green);border-color:rgba(43,245,176,.38)}
.b_ongoing{background:rgba(70,182,255,.14);color:var(--blue);border-color:rgba(70,182,255,.4)}
.xp{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--purple);font-family:ui-monospace,monospace;
  text-shadow:0 0 12px rgba(167,139,250,.5)}
.empty{color:#3c4a63;font-size:12px;text-align:center;padding:18px 0}

/* 進度燈條 */
.lights{display:flex;gap:4px;margin-top:11px}
.dot{width:14px;height:14px;border-radius:50%;background:#1a2640;font-size:9px;display:flex;align-items:center;
  justify-content:center;color:#5c6c8c;font-weight:700;border:1px solid rgba(120,165,230,.12)}
.dot.done{background:var(--green);color:#04221a;box-shadow:0 0 9px rgba(43,245,176,.7);border-color:transparent}
.dot.cur{background:transparent;color:var(--cyan);border:1.5px solid var(--cyan);box-shadow:0 0 10px rgba(47,230,224,.6)}
.dot.pending{background:var(--amber);color:#2a1e00;box-shadow:0 0 9px rgba(252,196,74,.7);border-color:transparent}
.dot.rejected{background:var(--red);color:#2a0008;box-shadow:0 0 9px rgba(255,93,120,.7);border-color:transparent}
.dot.ongoing{background:var(--blue);color:#021527;box-shadow:0 0 9px rgba(70,182,255,.7);border-color:transparent}

/* 抽屜 / modal */
.drawer,.modal{position:fixed;inset:0;display:none;z-index:50}
.drawer.open,.modal.open{display:block}
.drawer-bg,.modal-bg{position:absolute;inset:0;background:rgba(2,5,12,.66);backdrop-filter:blur(3px)}
.drawer-panel{position:absolute;right:0;top:0;height:100%;width:min(580px,95vw);overflow-y:auto;padding:24px;
  background:linear-gradient(180deg,#0a1020,#070b14);border-left:1px solid var(--line2);
  box-shadow:-10px 0 50px rgba(0,0,0,.6),-1px 0 0 rgba(47,230,224,.2)}
.d-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.d-name{font-size:20px;font-weight:900;color:#fff}
.d-cust{font-size:12.5px;color:var(--mut);margin-top:4px;letter-spacing:.5px}
.x{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;width:34px;height:34px;
  font-size:18px;color:var(--mut)}
.d-strip{display:flex;gap:5px;margin:18px 0;flex-wrap:wrap}
.step{flex:1;min-width:58px;text-align:center;font-size:10.5px;padding:8px 3px;border-radius:10px;line-height:1.35;
  background:rgba(16,27,48,.7);color:var(--mut);border:1px solid var(--line)}
.step.done{background:rgba(43,245,176,.12);color:var(--green);border-color:rgba(43,245,176,.35)}
.step.cur{background:linear-gradient(135deg,var(--cyan),var(--cyan-d));color:#04121a;font-weight:800;border-color:transparent;
  box-shadow:0 0 18px rgba(47,230,224,.45)}
.step.pending{background:rgba(252,196,74,.12);color:var(--amber);border-color:rgba(252,196,74,.35)}
.step.rejected{background:rgba(255,93,120,.12);color:var(--red);border-color:rgba(255,93,120,.35)}
.step.ongoing{background:rgba(70,182,255,.12);color:var(--blue);border-color:rgba(70,182,255,.35)}
.step .se{font-size:15px;display:block;margin-bottom:2px}

.panel{background:linear-gradient(160deg,rgba(15,24,44,.9),rgba(10,16,30,.7));border:1px solid var(--line);
  border-radius:14px;padding:15px;margin-top:14px}
.panel h4{margin:0 0 10px;font-size:14px;color:#fff;display:flex;align-items:center;gap:8px;letter-spacing:.5px}
.panel .gate-who{margin-left:auto;font-size:11px;font-weight:700;color:var(--cyan);background:rgba(47,230,224,.1);
  padding:3px 10px;border-radius:20px;border:1px solid var(--line2)}
.kv{font-size:13px;margin:6px 0;color:var(--txt);line-height:1.5}
.kv b{color:var(--mut);font-weight:600;margin-right:7px;letter-spacing:.5px}
.tasklist{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--txt)}
.tasklist li{margin:3px 0}
.locked{color:#46557a;font-size:12.5px;font-style:italic}
.hidden-zone{background:repeating-linear-gradient(45deg,rgba(20,30,52,.5),rgba(20,30,52,.5) 10px,rgba(14,22,40,.5) 10px,rgba(14,22,40,.5) 20px);
  border:1px dashed var(--line2);border-radius:14px;padding:13px 16px;margin-top:14px;color:var(--mut);font-size:12.5px}

textarea,input{width:100%;background:#0a1322;border:1px solid var(--line2);border-radius:10px;padding:10px;
  font-size:13px;font-family:inherit;margin-top:7px;color:var(--txt);outline:none}
textarea:focus,input:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(47,230,224,.15)}
input[readonly]{color:var(--cyan);font-family:ui-monospace,monospace;font-size:12px}
.btn{border:none;border-radius:10px;padding:10px 16px;font-size:13.5px;font-weight:800;letter-spacing:.5px;color:#04121a}
.btn.primary{background:linear-gradient(135deg,var(--cyan),var(--cyan-d));box-shadow:0 0 18px rgba(47,230,224,.35)}
.btn.go{background:linear-gradient(135deg,var(--green),#19c98c);box-shadow:0 0 18px rgba(43,245,176,.4)}
.btn.stop{background:linear-gradient(135deg,var(--red),#e23a59);color:#fff;box-shadow:0 0 18px rgba(255,93,120,.4)}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--mut);border:1px solid var(--line)}
.btn.orange{background:linear-gradient(135deg,var(--purple),#7c5cf0);color:#fff;box-shadow:0 0 18px rgba(167,139,250,.4)}
.act-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.act-row a.btn{text-decoration:none;display:inline-block}
.log{font-size:12px;color:var(--mut);border-left:2px solid var(--line2);padding-left:11px;margin-top:7px;line-height:1.5}
.log b{color:var(--cyan)}

.modal-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,92vw);
  background:linear-gradient(180deg,#0c1426,#080d1a);border:1px solid var(--line2);border-radius:18px;padding:26px;
  box-shadow:0 0 60px rgba(47,230,224,.15)}
.modal-box h3{margin:0 0 14px;color:#fff;letter-spacing:.5px}
.modal-box label{font-size:12px;color:var(--mut);display:block;margin-top:12px;letter-spacing:.5px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* 英雄榜 */
.heroes-wrap{padding:24px}
.heroes-wrap h2{color:#fff;letter-spacing:1px}
.hero{position:relative;overflow:hidden;border-radius:18px;padding:20px 22px;margin-bottom:16px;max-width:700px;
  background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(47,230,224,.1)),#0b1426;
  border:1px solid var(--line2);box-shadow:0 0 40px rgba(167,139,250,.16)}
.hero::before{content:"🏆";position:absolute;right:18px;top:10px;font-size:54px;opacity:.12}
.hero h3{margin:0 0 6px;color:#fff;letter-spacing:.5px}
.hero .sum{color:var(--mut);font-size:13.5px;line-height:1.6}
.hero .metrics{display:flex;gap:22px;margin-top:14px;flex-wrap:wrap}
.hero .metrics div{font-size:11px;color:var(--mut);letter-spacing:1px;text-transform:uppercase}
.hero .metrics b{display:block;font-size:20px;color:var(--cyan);font-family:ui-monospace,monospace;
  text-shadow:0 0 16px rgba(47,230,224,.5);margin-bottom:2px}