/* ===== BFE Orientation PWA ===== */
:root{
  --blue:#0e4d92; --blue-deep:#0a3a70; --blue-light:#e8f0fa;
  --ink:#1b2733; --ink-soft:#5a6b7b; --line:#e2e8f0;
  --bg:#f5f7fb; --card:#ffffff; --accent:#f5a623; --good:#16a34a;
  --warn-bg:#fff5e6; --warn-line:#f5a623;
  --radius:16px; --shadow:0 6px 22px -10px rgba(14,77,146,.30);
  --font:'Noto Sans TC','PingFang TC','Microsoft JhengHei',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;
  font-size:16px;overflow-x:hidden}
button{font-family:inherit}
.btn-primary{background:var(--blue);color:#fff;border:none;border-radius:12px;
  padding:13px 20px;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s}
.btn-primary:hover{background:var(--blue-deep)}

/* ===== Gate ===== */
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,#0e4d92,#0a3a70)}
.gate-card{background:#fff;border-radius:24px;padding:34px 28px;width:min(380px,100%);
  text-align:center;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:12px}
.gate-logo{font-size:46px}
.gate-card h1{margin:0;font-size:24px;color:var(--blue)}
.gate-sub{margin:0 0 8px;color:var(--ink-soft);font-size:14px}
.gate-card input{padding:13px 16px;border:1px solid var(--line);border-radius:12px;font-size:18px;
  text-align:center;letter-spacing:2px;outline:none}
.gate-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light)}
.gate-err{margin:0;color:#dc2626;font-size:14px}

/* ===== Picker ===== */
.picker{min-height:100vh;padding:32px 20px calc(32px + env(safe-area-inset-bottom));background:var(--bg)}
.picker-inner{max-width:560px;margin:0 auto}
.picker h2{font-size:22px;color:var(--blue);margin:8px 0 6px}
.picker-sub{color:var(--ink-soft);font-size:14px;margin:0 0 22px}
.picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dest-btn{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 14px;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;
  text-align:left;box-shadow:var(--shadow);transition:transform .12s,border-color .12s}
.dest-btn:hover{transform:translateY(-2px);border-color:var(--blue)}
.dest-btn small{display:block;font-weight:500;color:var(--ink-soft);font-size:13px;margin-top:4px}

/* ===== App shell ===== */
.app-header{position:sticky;top:0;z-index:20;background:var(--blue);color:#fff;
  padding-top:env(safe-area-inset-top)}
.app-header-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;max-width:760px;margin:0 auto}
.app-title{font-size:17px;font-weight:800}
.dest-chip{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:7px 14px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.dest-chip:hover{background:rgba(255,255,255,.28)}

.phases{position:sticky;top:calc(env(safe-area-inset-top) + 52px);z-index:19;display:flex;gap:4px;
  overflow-x:auto;background:#fff;border-bottom:1px solid var(--line);padding:8px 10px;
  max-width:760px;margin:0 auto;scrollbar-width:none}
.phases::-webkit-scrollbar{display:none}
.phase-tab{flex:0 0 auto;background:transparent;border:none;border-radius:10px;padding:9px 13px;
  font-size:14px;font-weight:700;color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:.15s}
.phase-tab.active{background:var(--blue-light);color:var(--blue)}

.content{max-width:760px;margin:0 auto;padding:18px 16px calc(96px + env(safe-area-inset-bottom))}

/* ===== Content blocks ===== */
.phase-intro{font-size:14px;color:var(--ink-soft);margin:2px 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px;margin:0 0 14px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px;font-size:17px;color:var(--blue);display:flex;align-items:center;gap:8px}
.card.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.card.warn h3{color:#b9770e}
.card.dest h3{color:var(--blue-deep)}

ul.points{list-style:none;margin:0;padding:0}
ul.points li{position:relative;padding:7px 0 7px 24px;border-bottom:1px solid #f1f5f9;font-size:15px}
ul.points li:last-child{border-bottom:none}
ul.points li::before{content:"›";position:absolute;left:6px;top:7px;color:var(--blue);font-weight:800}

/* checklist (tappable) */
ul.check{list-style:none;margin:0;padding:0}
ul.check li{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid #f1f5f9;
  font-size:15px;cursor:pointer;user-select:none}
ul.check li:last-child{border-bottom:none}
.box{flex:0 0 22px;width:22px;height:22px;border:2px solid var(--line);border-radius:7px;margin-top:1px;
  display:grid;place-items:center;color:#fff;font-size:14px;transition:.12s}
ul.check li.done .box{background:var(--good);border-color:var(--good)}
ul.check li.done{color:var(--ink-soft)}
ul.check li.done .lbl{text-decoration:line-through}

.timediff{background:var(--blue-light);border-radius:12px;padding:12px 14px;font-size:15px;
  color:var(--blue-deep);margin:0}

/* ready bar */
.ready-bar{position:fixed;left:0;right:0;bottom:0;z-index:21;background:#fff;border-top:1px solid var(--line);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;
  max-width:760px;margin:0 auto}
.ready-track{flex:1;height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.ready-fill{height:100%;width:0;background:linear-gradient(90deg,var(--good),#22c55e);transition:width .3s}
#readyText{font-size:13px;font-weight:700;color:var(--ink-soft);white-space:nowrap}

@media (min-width:620px){ .picker-grid{grid-template-columns:1fr 1fr 1fr} }