/* AccelerAI 共用視覺（四個頁面共用：/、/speedtest、/admin、登入頁）
   owner 2026-10-09：「多用一些動態漸變的 UI 套件、並且風格上多用漸層 AI 科技風 但保持我給你的同色系」
   顏色只用 MoBagel 四色：#002153 深藍、#155EF2 亮藍、#FFC100 黃、#A0F9B1 薄荷綠（其餘都是它們的深淺或透明度）
   全部是 CSS（⛔ 不載外部套件：內網沒網路也要能顯示）；系統開「減少動態效果」⇒ 動畫全關 */
:root {
  --navy: #002153; --blue: #155EF2; --yellow: #FFC100; --mint: #A0F9B1;
  --navy-deep: #000d22; --blue-deep: #0a3bb0;
  --g-brand: linear-gradient(135deg, #155EF2 0%, #002153 100%);
  --g-tri: linear-gradient(90deg, #155EF2, #A0F9B1, #FFC100, #155EF2);
  --g-btn: linear-gradient(135deg, #2a6cf5 0%, #155EF2 45%, #0a3bb0 100%);
  --g-warn: linear-gradient(135deg, #FFC100, #ffd54d);
  --glow-blue: 0 0 0 1px rgba(21, 94, 242, .35), 0 6px 24px rgba(21, 94, 242, .35);
  --glow-mint: 0 0 18px rgba(160, 249, 177, .35);
}
[hidden] { display: none !important; }

/* ---------- 流動極光背景（放在 body 第一個子元素：<div class="aurora"></div>） ---------- */
.aurora { position: fixed; inset: -20%; z-index: -1; pointer-events: none; overflow: hidden; filter: blur(60px) saturate(1.1); opacity: var(--aurora-opacity, .55); }
.aurora::before, .aurora::after, .aurora i { content: ""; position: absolute; border-radius: 50%; mix-blend-mode: var(--aurora-blend, normal); }
.aurora::before { width: 55vmax; height: 55vmax; left: 5%; top: 0; background: radial-gradient(circle, rgba(21, 94, 242, .55), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; }
.aurora::after { width: 45vmax; height: 45vmax; right: 0; top: 20%; background: radial-gradient(circle, rgba(160, 249, 177, .38), transparent 65%); animation: drift2 32s ease-in-out infinite alternate; }
.aurora i { width: 38vmax; height: 38vmax; left: 30%; bottom: 0; background: radial-gradient(circle, rgba(255, 193, 0, .22), transparent 65%); animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vmax, 14vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vmax, 10vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(-10vmax, -16vmax) scale(1.2); } }

/* ---------- 玻璃面板 ---------- */
.glass { background: var(--glass-bg, rgba(255, 255, 255, .62)); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-line, rgba(21, 94, 242, .14)); }

/* ---------- 旋轉的漸層外框（.gborder；內容背景用 --gb-bg） ---------- */
@property --ga { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.gborder { position: relative; isolation: isolate; }
.gborder::before { content: ""; position: absolute; inset: 0; padding: var(--gb-w, 1.5px); border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--ga), #155EF2, #A0F9B1, #FFC100, #155EF2 60%, rgba(21, 94, 242, .15) 75%, #155EF2);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-ga 6s linear infinite; opacity: var(--gb-opacity, .9); }
.gborder.slow::before { animation-duration: 12s; }
@keyframes spin-ga { to { --ga: 360deg; } }

/* ---------- 漸層流動文字 ---------- */
.gtext { background: var(--g-tri); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: flow 8s linear infinite; }
@keyframes flow { to { background-position: 300% 0; } }

/* ---------- 發光按鈕 ---------- */
.gbtn { background: var(--g-btn); background-size: 160% 160%; color: #fff; border: 0; box-shadow: var(--glow-blue); transition: transform .15s, box-shadow .2s, filter .2s; animation: flow-bg 6s ease infinite; }
.gbtn:hover { filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(160, 249, 177, .5), 0 8px 30px rgba(21, 94, 242, .5); }
.gbtn:active { transform: scale(.97); }
.gbtn:disabled { filter: grayscale(.6) brightness(.9); box-shadow: none; animation: none; }
.gbtn.warn { background: var(--g-warn); color: var(--navy); box-shadow: 0 6px 22px rgba(255, 193, 0, .35); }
@keyframes flow-bg { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- 流光（思考中、讀取中） ---------- */
.shimmer { background: linear-gradient(90deg, var(--shimmer-base, #8fa3c8) 0%, var(--shimmer-hi, #155EF2) 40%, #A0F9B1 50%, var(--shimmer-base, #8fa3c8) 70%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* ---------- 不確定進度條（排隊中） ---------- */
.gprogress { height: 4px; border-radius: 99px; background: rgba(21, 94, 242, .15); overflow: hidden; position: relative; }
.gprogress::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, transparent, #155EF2, #A0F9B1, #FFC100, transparent);
  animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- 漸層小標 ---------- */
.gchip { background: linear-gradient(135deg, rgba(160, 249, 177, .28), rgba(21, 94, 242, .18)); border: 1px solid rgba(160, 249, 177, .45); }
.gchip.gold { background: linear-gradient(135deg, rgba(255, 193, 0, .32), rgba(255, 193, 0, .12)); border-color: rgba(255, 193, 0, .6); }

/* ---------- 進場 ---------- */
.rise { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Logo＋標語（owner 2026-10-09：「speed to impact 字體位置不對 他應該是A 一半的下方開始」）
   量自 logo.png：「Acceler」的 A 在 245～306 欄（寬 730）⇒ 一半＝37.74%；標語靠左從那裡開始，跟著 --lw 等比例 ---------- */
.lockup { --lw: 240px; width: var(--lw); max-width: 80vw; }
.lockup .logo { width: 100%; display: block; background: currentColor; aspect-ratio: 730 / 177;
  -webkit-mask: url(/logo.png) no-repeat left center / contain; mask: url(/logo.png) no-repeat left center / contain; }
.lockup .tag { margin: calc(var(--lw) * .05) 0 0 37.74%; font-size: max(12px, calc(var(--lw) * .05)); line-height: 1.1; text-align: left;
  letter-spacing: .02em; white-space: nowrap; opacity: .85; }