:root{
    --paper:#F4EFE3; --paper2:#EDE6D3; --ink:#263238; --ink2:#5b6b68;
    --river:#0F4C5C; --river2:#1E6E7E; --seal:#B23A2E; --gold:#B9822E;
    --line:#d8cfb8; --good:#2f7d5b; --warn:#c07a1e;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    font-family:"Noto Sans SC", system-ui, -apple-system, sans-serif;
    background:#20302f; color:var(--ink);
    min-height:100vh; display:flex; flex-direction:column; align-items:center;
    padding:28px 16px 60px;
  }
  .stage-note{max-width:760px; color:#cfe0dc; text-align:center; margin-bottom:18px; line-height:1.7;}
  .stage-note h1{font-family:"Noto Serif SC",serif; font-size:22px; color:#f4ead2; margin-bottom:6px;}
  .stage-note p{font-size:13px; opacity:.85;}
  /* phone frame */
  .phone{
    width:390px; height:844px; background:var(--paper); border-radius:44px;
    box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 0 0 10px #111b1b, inset 0 0 0 12px #2c3a39;
    overflow:hidden; position:relative; display:flex; flex-direction:column;
  }
  .statusbar{height:34px; display:flex; align-items:center; justify-content:space-between;
    padding:0 26px; font-size:12px; color:var(--ink); flex:none;}
  .topbar{flex:none; padding:6px 18px 10px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--line); background:var(--paper);}
  .topbar .brand{font-family:"Noto Serif SC",serif; font-weight:900; font-size:17px; color:var(--river);}
  .topbar .brand small{display:block; font-family:"Noto Sans SC"; font-weight:400; font-size:10px; color:var(--ink2); letter-spacing:2px;}
  .lang{display:flex; gap:2px; background:var(--paper2); border-radius:999px; padding:3px;}
  .lang button{border:0; background:transparent; font-size:11px; padding:4px 9px; border-radius:999px; cursor:pointer; color:var(--ink2);}
  .lang button.on{background:var(--river); color:#fff; font-weight:700;}
  .screen{flex:1; overflow-y:auto; position:relative;}
  .tabbar{flex:none; height:64px; background:#fff; border-top:1px solid var(--line);
    display:flex;}
  .tabbar button{flex:1; border:0; background:none; cursor:pointer; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px; font-size:10px; color:var(--ink2);}
  .tabbar button.on{color:var(--seal); font-weight:700;}
  .tabbar svg{width:22px; height:22px;}

  /* ===== shared bits ===== */
  .view{padding:16px 16px 28px;}
  .h-serif{font-family:"Noto Serif SC",serif;}
  .chip{display:inline-block; font-size:10px; padding:2px 8px; border-radius:999px; border:1px solid var(--line);
    color:var(--ink2); margin-right:4px; background:#fff;}
  .b-good{color:var(--good);} .b-warn{color:var(--warn);}
  .btn{display:block; width:100%; border:0; background:var(--river); color:#fff; padding:13px; border-radius:12px;
    font-size:15px; font-weight:700; cursor:pointer; margin-top:12px; font-family:inherit;}
  .btn.ghost{background:transparent; color:var(--river); border:1.5px solid var(--river);}
  .btn.done{background:var(--good); cursor:default;}
  .toast{position:absolute; left:50%; bottom:90px; transform:translateX(-50%); background:var(--ink); color:#fff;
    padding:10px 16px; border-radius:10px; font-size:13px; opacity:0; transition:.25s; pointer-events:none; z-index:50; white-space:nowrap;}
  .toast.show{opacity:.96;}

  /* ===== MAP view ===== */
  .mapwrap{position:relative;}
  .map-title{font-family:"Noto Serif SC",serif; font-size:19px; font-weight:900; color:var(--river); margin-bottom:2px;}
  .map-sub{font-size:11px; color:var(--ink2); margin-bottom:10px;}
  .corridor{position:relative; padding-left:26px;}
  .corridor::before{content:""; position:absolute; left:9px; top:8px; bottom:8px; width:3px;
    background:linear-gradient(var(--river) 0%, var(--river) 55%, #c9c2ad 55%, #c9c2ad 100%); border-radius:3px;}
  .mrow{position:relative; padding:10px 0; cursor:pointer;}
  .mdot{position:absolute; left:-26px; top:14px; width:21px; height:21px; border-radius:50%;
    background:#fff; border:2.5px solid #b9b09a; display:flex; align-items:center; justify-content:center;
    font-size:11px; color:#fff; font-weight:700;}
  .mdot.pilot{border-color:var(--river);}
  .mdot.have{background:var(--seal); border-color:var(--seal); color:#fff;}
  .mcard{background:#fff; border:1px solid var(--line); border-radius:10px; padding:9px 12px;}
  .mrow:active .mcard{background:var(--paper2);}
  .mname{font-size:14px; font-weight:700;}
  .mrole{font-size:10px; color:var(--ink2); margin-top:2px;}

  /* ===== guide (station) view ===== */
  .g-back{font-size:13px; color:var(--river); cursor:pointer; margin-bottom:10px; display:inline-block;}
  .g-hero{height:120px; border-radius:14px; background:linear-gradient(135deg,var(--river) 0%, var(--river2) 100%);
    display:flex; align-items:flex-end; padding:14px; color:#fff; margin-bottom:12px;}
  .g-hero h2{font-family:"Noto Serif SC",serif; font-size:22px; font-weight:900;}
  .g-hero .role{font-size:11px; opacity:.9;}
  .badges{display:flex; gap:6px; margin:8px 0 12px; flex-wrap:wrap;}
  .badge{font-size:10px; padding:4px 8px; border-radius:8px; background:var(--paper2);}
  .sec{margin-bottom:14px;}
  .sec h3{font-size:13px; color:var(--river); margin-bottom:6px; font-weight:700;}
  .sec p{font-size:13px; line-height:1.7; color:var(--ink);}
  .childtoggle{display:flex; align-items:center; gap:8px; font-size:12px; margin:10px 0;}
  .switch{width:40px; height:22px; border-radius:999px; background:var(--line); position:relative; cursor:pointer; transition:.2s;}
  .switch.on{background:var(--gold);}
  .switch::after{content:""; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:2px; left:2px; transition:.2s;}
  .switch.on::after{left:20px;}
  .taskcard{background:#fff; border:1px dashed var(--gold); border-radius:12px; padding:12px; margin-top:8px;}
  .taskcard .t{font-size:13px; font-weight:700; color:var(--gold); margin-bottom:4px;}
  .taskcard .d{font-size:12px; color:var(--ink2); line-height:1.6;}

  /* ===== PASSPORT view ===== */
  .cover{background:var(--river); color:#f4ead2; border-radius:14px; padding:18px; text-align:center; margin-bottom:14px;
    border:1px solid #0a3642;}
  .cover .cn{font-family:"Noto Serif SC",serif; font-size:24px; font-weight:900; letter-spacing:4px;}
  .cover .en{font-size:10px; letter-spacing:3px; opacity:.7; margin-top:4px;}
  .holder{display:flex; justify-content:space-between; font-size:12px; margin-top:12px; text-align:left; opacity:.95;}
  .progress{height:8px; background:var(--paper2); border-radius:99px; overflow:hidden; margin:10px 0 4px;}
  .progress i{display:block; height:100%; background:var(--seal); border-radius:99px; transition:.4s;}
  .pnote{font-size:11px; color:var(--ink2); text-align:center; margin-bottom:14px;}
  .stamps{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}
  .stamp{aspect-ratio:1; border-radius:50%; border:2px solid var(--line); display:flex; flex-direction:column;
    align-items:center; justify-content:center; cursor:pointer; background:#fff; position:relative; transition:.2s;}
  .stamp .mark{font-family:"Noto Serif SC",serif; font-size:20px; font-weight:900; color:var(--line);}
  .stamp .nm{font-size:9px; color:var(--ink2); margin-top:2px;}
  .stamp.have{border-color:var(--seal); background:#fdf3f1;}
  .stamp.have .mark{color:var(--seal); transform:rotate(-8deg);}
  .stamp.have .nm{color:var(--seal);}
  .stamp small{position:absolute; top:6px; right:8px; font-size:8px; color:var(--gold);}
  .cert{background:var(--paper2); border-radius:12px; padding:14px; margin-top:14px; text-align:center; display:none;}
  .cert.show{display:block;}
  .cert .c{font-family:"Noto Serif SC",serif; font-weight:900; color:var(--seal); font-size:16px;}