:root { --bg:#0f1420; --card:#16203a; --txt:#dfe7f0; --sub:#9fb3c8; --blue:#3b6dff; --green:#2e7d4f; }
* { box-sizing: border-box; }
/* 讓 hidden 屬性永遠有效：否則 .phase{display:flex} 之類會蓋掉內建的 [hidden]{display:none} */
[hidden] { display: none !important; }
body { margin:0; background:var(--bg); color:var(--txt); font-family:system-ui,"Noto Sans TC",sans-serif; }
.app { max-width:560px; margin:0 auto; padding:24px 16px 60px; }
h1 { text-align:center; font-size:22px; }
h2 { font-size:15px; color:var(--sub); margin:18px 0 8px; }
.gauges { display:flex; gap:10px; }
.gauge { flex:1; text-align:center; background:var(--card); border-radius:12px; padding:16px 6px; }
.g-label { font-size:12px; color:var(--sub); }
.g-num { font-size:32px; font-weight:800; line-height:1.1; }
.g-unit { font-size:11px; color:var(--sub); }
.phase { display:flex; align-items:center; justify-content:center; gap:8px; margin:16px 0; color:var(--blue); font-weight:700; }
.spinner { width:16px; height:16px; border-radius:50%; border:3px solid #1c2742; border-top-color:var(--blue); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.g-num.counting { animation:pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.55; } }
.verdict { background:#13351f; border:1px solid var(--green); border-radius:12px; padding:14px; margin:14px 0; line-height:1.5; }
.verdict.ok { background:#3a3413; border-color:#9d8b2e; }
.verdict.poor { background:#3a1313; border-color:#9d2e2e; }
.start { width:100%; background:var(--blue); color:#fff; border:none; padding:14px; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; }
.start:disabled { opacity:.5; cursor:default; }
ul { list-style:none; padding:0; margin:0; }
.regions li, .services li { display:flex; justify-content:space-between; padding:8px 10px; background:var(--card); border-radius:8px; margin-bottom:5px; gap:10px; }
.regions li span:last-child, .services li span:last-child { text-align:right; flex-shrink:0; }
.custom { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.custom input { flex:1 1 160px; padding:10px; border-radius:8px; border:1px solid #2a3550; background:#0c1118; color:var(--txt); }
.custom button { padding:10px 12px; border:none; border-radius:8px; background:#2746a6; color:#fff; cursor:pointer; }