/* ============================================================
   TECH LAYER（科技層）：前台共用儀表元件樣式（2026-11-04）
   色票：座艙底＝本站深綠 --navy／--navy2；儀表光＝電光綠 --cyan＋琥珀 --amber。
   行為在 assets/tech.js；組裝在 includes/tech.php＋layout.php。
   移除方式：layout.php 不再掛本檔與 tech.js、index.php 拿掉標記即全數退場。
   ============================================================ */
:root{--font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace}
.tech-mono{font-family:var(--font-mono)}

/* ---- ① 頁首下捲動進度軌 ---- */
#tech-rail{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:rgba(6,35,27,.22)}
#tech-rail-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#17b8c9);box-shadow:0 0 8px rgba(47,208,140,.55)}
#tech-rail-pct{position:fixed;top:7px;right:10px;z-index:90;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:#bfe3cf;background:rgba(4,23,15,.75);border:1px solid rgba(127,231,182,.35);border-radius:4px;padding:1px 6px}
@media (max-width:899px){#tech-rail-pct{display:none}}

/* ---- ③ 等寬字資料標籤 ---- */
.tag{font-family:var(--font-mono);letter-spacing:.05em}

/* ---- ④ 頁尾狀態燈＋雙時鐘 ---- */
.tech-status{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:20px;padding-top:14px;border-top:1px solid rgba(127,231,182,.25);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:#84b89c}
.tech-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none;animation:tech-pulse 2.2s ease-out infinite}
@keyframes tech-pulse{0%{box-shadow:0 0 0 0 rgba(47,208,140,.5)}70%{box-shadow:0 0 0 8px rgba(47,208,140,0)}100%{box-shadow:0 0 0 0 rgba(47,208,140,0)}}
.tech-clocks{margin-left:auto;color:#dff5e9}

/* ---- ② 藍圖格線區塊＋SEC 標籤＋十字標記 ---- */
.tech-sec{position:relative;background-image:linear-gradient(rgba(14,159,110,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(14,159,110,.08) 1px,transparent 1px);background-size:30px 30px}
.tech-tag{position:absolute;top:-25px;left:0;z-index:3;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:#e7f4ec;background:var(--navy);border-left:3px solid var(--cyan);padding:2.5px 9px;pointer-events:none;white-space:nowrap}
.tech-cross{position:absolute;top:0;right:2px;z-index:3;font-family:var(--font-mono);font-size:15px;line-height:1;color:rgba(255,176,32,.55);pointer-events:none}
.tech-sec.inset-tag .tech-tag{top:auto;bottom:10px;right:12px;left:auto}
.tech-sec.inset-tag .tech-cross{top:8px;right:12px}

/* ---- B 首頁 hero 科技層 ---- */
#tech-stars{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(4,23,15,.5) 100%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.hud-c{position:absolute;width:22px;height:22px;z-index:3;pointer-events:none;border:0 solid rgba(255,176,32,.85)}
.hud-c.tl{top:12px;left:12px;border-top-width:2px;border-left-width:2px}
.hud-c.tr{top:12px;right:12px;border-top-width:2px;border-right-width:2px}
.hud-c.bl{bottom:12px;left:12px;border-bottom-width:2px;border-left-width:2px}
.hud-c.br{bottom:12px;right:12px;border-bottom-width:2px;border-right-width:2px}
/* ⑥ 右下即時讀數（桌機 hero 底部預留儀表帶，避免壓到右欄面板） */
@media (min-width:900px){.hero{padding-bottom:150px}}
.hero-readout{position:absolute;right:16px;bottom:14px;z-index:3;font-family:var(--font-mono);background:rgba(4,23,15,.55);border:1px solid rgba(127,231,182,.35);border-radius:8px;padding:8px 12px;backdrop-filter:blur(3px);min-width:196px}
.hr-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:1.5px 0}
.hr-k{font-size:10.5px;letter-spacing:.16em;color:#8fb8a2}
.hr-v{font-size:12.5px;color:#f2f8f4}
.hr-v b{color:var(--amber);font-weight:700}
@media (max-width:899px){
  .hero-readout{position:static;margin:12px 20px 0;min-width:0;display:flex;flex-wrap:wrap;gap:4px 18px}
  .hr-row{gap:8px}
}
/* ---- ⑩ 開機自檢 overlay ---- */
.tech-boot{position:fixed;inset:0;z-index:200;background:#04170f;display:flex;align-items:center;justify-content:center;animation:tb-autohide .45s ease 2.35s forwards;cursor:pointer}
@keyframes tb-autohide{to{opacity:0;visibility:hidden}}
.tech-boot.out{opacity:0;transition:opacity .3s ease;pointer-events:none}
.tech-boot-box{width:min(430px,88vw);border:1px solid rgba(127,231,182,.4);background:#06231b;padding:22px 24px;color:#bfe3cf;font-family:var(--font-mono);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.tech-boot-head{font-size:13px;letter-spacing:.18em;color:#f2f8f4;border-bottom:1px solid rgba(127,231,182,.25);padding-bottom:10px;margin-bottom:12px}
.tech-boot-head span{color:var(--cyan)}
.tech-boot-lines{list-style:none;margin:0;padding:0}
.tech-boot-lines li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;padding:3.5px 0;opacity:0;animation:tb-line .3s ease forwards;animation-delay:var(--d,0s)}
@keyframes tb-line{to{opacity:1}}
.tb-k{letter-spacing:.1em;color:#8fb8a2}
.tb-dots{flex:1;border-bottom:1px dotted rgba(127,231,182,.45);transform:translateY(-3px)}
.tech-boot-lines b{color:var(--amber);font-weight:700}
.tb-tail{font-size:10.5px;letter-spacing:.12em;color:#7fae94}
.tech-boot-bar{height:4px;background:#0d3a29;margin:14px 0 10px}
.tech-boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),#17b8c9);animation:tb-bar 1.25s ease .1s forwards}
@keyframes tb-bar{to{width:100%}}
.tech-boot-done{font-size:12.5px;letter-spacing:.22em;color:var(--amber);opacity:0;animation:tb-line .3s ease 1.4s forwards}
.tech-boot-skip{margin-top:10px;font-size:10px;letter-spacing:.1em;color:#5f7a6a}

/* ---- D 卡片掃光＋對角框＋微傾斜 ---- */
.tech-shine{position:relative;overflow:hidden;--mx:50%;--my:50%}
.tech-shine::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s ease;background:radial-gradient(240px circle at var(--mx) var(--my),rgba(47,208,140,.18),transparent 65%)}
.tech-shine:hover::after{opacity:1}
.tech-hud{--hudc:rgba(14,159,110,.45);background-image:
  linear-gradient(var(--hudc),var(--hudc)),linear-gradient(var(--hudc),var(--hudc)),
  linear-gradient(var(--hudc),var(--hudc)),linear-gradient(var(--hudc),var(--hudc));
  background-size:14px 2px,2px 14px,14px 2px,2px 14px;
  background-position:left 8px top 8px,left 8px top 8px,right 8px bottom 8px,right 8px bottom 8px;
  background-repeat:no-repeat}

/* ---- 減少動態偏好：全部靜止 ---- */
@media (prefers-reduced-motion: reduce){
  .tech-dot{animation:none}
  .tech-boot{display:none !important}
  .tech-boot-lines li,.tech-boot-done{animation:none;opacity:1}
  .tech-boot-bar i{animation:none;width:100%}
  .tech-shine::after{display:none}
}

/* 捲軸溝槽預留：內容高度變化時捲軸不消失重現，避免版面寬度跳動。 */
html{scrollbar-gutter:stable}