/* ============================================================
   TECH LAYER（科技層）：前台共用儀表元件樣式（2026-11-04）
   比照 jp 範本移植、適配本站色票：座艙底＝本站深紺 --navy／--navy2；
   儀表光＝品牌主色 --cyan（#2A9D8F）＋亮青 #5EC8B8，成就色沿用 --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-line:#2f4266;--tech-mute:#93a5c4;--tech-fog:#c7d2e8;--tech-acc2:#5ec8b8}
.tech-mono{font-family:var(--font-mono)}

/* ---- ① 頁首下捲動進度軌 ---- */
#tech-rail{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;background:rgba(19,26,42,.22)}
#tech-rail-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--amber));box-shadow:0 0 8px rgba(42,157,143,.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:var(--tech-fog);background:rgba(13,19,34,.72);border:1px solid rgba(147,165,196,.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(255,255,255,.14);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:#8fa1cc}
.tech-dot{width:8px;height:8px;border-radius:50%;background:var(--tech-acc2);flex:none;animation:tech-pulse 2.2s ease-out infinite}
@keyframes tech-pulse{0%{box-shadow:0 0 0 0 rgba(94,200,184,.5)}70%{box-shadow:0 0 0 8px rgba(94,200,184,0)}100%{box-shadow:0 0 0 0 rgba(94,200,184,0)}}
.tech-clocks{margin-left:auto;color:var(--tech-fog)}

/* ---- ② 藍圖格線區塊＋SEC 標籤＋十字標記 ---- */
.tech-sec{position:relative;background-image:linear-gradient(rgba(90,110,150,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(90,110,150,.10) 1px,transparent 1px);background-size:30px 30px}
.blk-dark.tech-sec{background-image:linear-gradient(rgba(147,165,196,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(147,165,196,.08) 1px,transparent 1px),linear-gradient(172deg,#17233e 0%,var(--navy) 48%,#0c1322 100%);background-size:30px 30px,30px 30px,auto}
.tech-tag{position:absolute;top:-25px;left:0;z-index:3;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:#e8ecf3;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(42,157,143,.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}
/* 會員首頁既有區塊上方間距不足 25px 者，替 SEC 標籤讓位（只套用帶 tech-sec 的區塊） */
.tasks.tech-sec,.mapgrid.tech-sec{margin-top:40px}
.card.tech-sec{margin-top:38px !important}

/* ---- 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(5,9,18,.45) 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(232,163,61,.8)}
.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 右欄為字卡組，讀數面板置於字卡下方（靜置式、零重疊） */
.hero-readout{position:relative;z-index:3;margin:16px 0 0 auto;width:fit-content;min-width:212px;font-family:var(--font-mono);background:rgba(9,14,26,.52);border:1px solid rgba(147,165,196,.35);border-radius:8px;padding:8px 12px;backdrop-filter:blur(3px)}
.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:var(--tech-mute)}
.hr-v{font-size:12.5px;color:#f7f3ea}
.hr-v b{color:var(--amber);font-weight:700}
@media (max-width:899px){
  .hero-readout{margin:14px 0 0;width:100%;min-width:0;display:flex;flex-wrap:wrap;gap:4px 18px}
  .hr-row{gap:8px}
}
/* ⑨ 資料跑馬燈：2026-11-04 依指示移除（HTML 產生器與樣式全數下架） */

/* ---- ⑩ 開機自檢 overlay ---- */
.tech-boot{position:fixed;inset:0;z-index:200;background:#0b1120;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 var(--tech-line);background:var(--navy2);padding:22px 24px;color:var(--tech-fog);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:#f7f3ea;border-bottom:1px solid var(--tech-line);padding-bottom:10px;margin-bottom:12px}
.tech-boot-head span{color:var(--tech-acc2)}
.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:var(--tech-mute)}
.tb-dots{flex:1;border-bottom:1px dotted rgba(147,165,196,.45);transform:translateY(-3px)}
.tech-boot-lines b{color:var(--amber);font-weight:700}
.tb-tail{font-size:10.5px;letter-spacing:.12em;color:#8fa1cc}
.tech-boot-bar{height:4px;background:#22314f;margin:14px 0 10px}
.tech-boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--amber));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:#7c8aa5}

/* ---- 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(94,200,184,.16),transparent 65%)}
.tech-shine:hover::after{opacity:1}
.tech-hud{--hudc:rgba(42,157,143,.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}
}