:root{
    --bg:#E6E2D3; --ink:#1C2B33; --ink-soft:#3a4a52;
    --brass:#B07D2B; --brass-dk:#8c5f17;
    --jade:#2C6E63; --jade-soft:#e4efe9;
    --rust:#A8432B; --rust-soft:#f4e2dc;
    --panel:#16242B; --panel-2:#1f343d;
    --card:#FBF8F1; --line:#d4cdb8; --muted:#6E6A5C;
    --mono:"Space Mono","Noto Sans TC",monospace;
    --disp:"Space Grotesk","Noto Sans TC",sans-serif;
    --body:"Noto Sans TC","Space Grotesk",sans-serif;
    --shadow:0 1px 0 rgba(0,0,0,.04),0 6px 22px -12px rgba(28,43,51,.35);
    --shadow-hi:0 16px 38px -14px rgba(28,43,51,.55);
    --lift:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;padding-bottom:60px}
  button{font-family:inherit}
  .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(14px,3vw,28px)}

  header.top{background:var(--panel);color:#f3ede0;border-bottom:3px solid var(--brass)}
  .brand{display:flex;align-items:baseline;gap:13px;flex-wrap:wrap;padding:20px 0 4px}
  .brand h1{font-family:var(--disp);font-weight:700;font-size:25px;letter-spacing:.5px;margin:0}
  .brand .sub{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--brass);text-transform:uppercase}
  .board{padding:6px 0 22px}
  .board-label{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:#e9b04e;text-transform:uppercase;margin-bottom:10px;font-weight:700}
  .flight-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(135deg,#274551,#1d333c);border:1px solid #3a5b68;border-left:5px solid var(--brass);border-radius:12px;padding:18px 20px;box-shadow:0 12px 32px -16px rgba(0,0,0,.7);transition:var(--lift)}
  .flight-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(0,0,0,.8)}
  .route{display:flex;align-items:center;gap:14px}
  .iata{font-family:var(--mono);font-weight:700;font-size:33px;color:#fff;letter-spacing:1px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
  .plane{color:#e9b04e;font-size:20px}
  .fl-meta{display:flex;flex-direction:column;gap:3px}
  .fl-name{font-weight:700;font-size:19px;color:#fff}
  .fl-when{font-family:var(--mono);font-size:14px;color:#e2eaee}
  .fl-count{margin-left:auto;text-align:right}
  .fl-count .big{font-family:var(--mono);font-weight:700;font-size:30px;color:#e9b04e}
  .fl-count .lbl{font-size:12px;color:#bcc8ce;letter-spacing:1px}
  .board-empty{color:#9fb0b8;font-size:15px;padding:8px 0}

  nav.tabs{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
  nav.tabs .wrap{display:flex;gap:2px;overflow-x:auto}
  .tab{appearance:none;border:none;background:none;cursor:pointer;padding:15px 17px;font-size:17px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s}
  .tab .ti{display:none}
  .tab.active{color:var(--ink);border-bottom-color:var(--brass)}
  .tab:hover{color:var(--ink)}

  .view{padding:22px 0 40px;display:none}
  .view.active{display:block}
  .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
  .toolbar input[type=search],.toolbar select{font-family:var(--body);font-size:15px;padding:10px 13px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
  .toolbar input[type=search]{flex:1;min-width:170px}
  .spacer{flex:1}
  .chk{display:flex;align-items:center;gap:7px;font-size:15px;color:var(--ink-soft);cursor:pointer;user-select:none}
  .chk input{width:17px;height:17px;accent-color:var(--jade)}

  .btn{appearance:none;cursor:pointer;border:1px solid transparent;border-radius:8px;font-weight:700;font-size:15px;padding:10px 16px;transition:var(--lift),background .15s}
  .btn:hover{transform:translateY(-2px)}
  .btn-primary{background:var(--brass);color:#fff}
  .btn-primary:hover{background:var(--brass-dk);box-shadow:0 8px 18px -8px rgba(176,125,43,.7)}
  .btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
  .btn-ghost:hover{border-color:var(--ink)}
  .btn-sm{padding:7px 12px;font-size:14px}
  .btn-danger{color:var(--rust);background:transparent;border-color:var(--rust)}
  .btn-danger:hover{background:var(--rust-soft)}

  /* stat strip / grids */
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:13px;margin-bottom:20px}
  .stat-grid.g3{grid-template-columns:repeat(3,1fr)}
  .stat>div{min-width:0}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 17px;box-shadow:var(--shadow);transition:var(--lift);display:flex;align-items:center;gap:13px;position:relative}
  .stat.has-tip{cursor:default}
  .stat-tip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:12px;line-height:1.7;white-space:nowrap;padding:7px 12px;border-radius:8px;z-index:20;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.3)}
  .stat-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink)}
  .stat.has-tip:hover .stat-tip,.stat.has-tip:focus-within .stat-tip{display:block}
  .med-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#f9ede8;border:1px solid #e8c9bf;border-radius:11px;padding:11px 16px;margin-bottom:4px;font-size:14px}
  .med-row .med-label{font-weight:700;color:var(--rust)}
  .med-row .med-amt{font-family:var(--mono);font-weight:700;font-size:16px;color:var(--rust)}
  .med-row .med-total{margin-left:auto;color:var(--muted);font-size:13px;font-family:var(--mono)}
  .stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi)}
  .stat .ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
  .stat .k{font-size:13px;color:var(--muted);margin-bottom:2px;line-height:1.3}
  .stat .v{font-family:var(--mono);font-weight:700;font-size:21px;line-height:1.1;white-space:nowrap}
  .stat.col{flex-direction:column;align-items:flex-start;gap:5px}
  .stat.accent .v{color:var(--brass)} .stat.med .v{color:var(--rust)} .stat.jade .v{color:var(--jade)}

  .section-head{display:flex;align-items:center;gap:10px;margin:28px 0 12px;cursor:pointer}
  .section-head h3{margin:0;font-size:14px;font-family:var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
  .section-head .hr{flex:1;height:1px;background:var(--line)}
  .section-head .caret{font-size:13px;color:var(--muted)}

  /* ---------- boarding-pass trip card ---------- */
  .bp{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:17px;transition:var(--lift)}
  .bp:hover{transform:translateY(-5px);box-shadow:var(--shadow-hi)}
  .bp.done{opacity:.72} .bp.done:hover{opacity:1}
  .bp-head{display:flex;align-items:center;gap:9px;padding:11px 16px;color:#fff}
  .bp-head .ic{font-size:16px;opacity:.9}
  .bp-head .nm{font-weight:700;font-size:18px}
  .bp-head .badge2{background:rgba(255,255,255,.22);color:#fff;font-family:var(--mono);font-size:11px;padding:2px 9px;border-radius:20px;letter-spacing:.5px}
  .bp-head .days2{margin-left:auto;font-family:var(--mono);font-size:13px;background:rgba(0,0,0,.18);padding:3px 10px;border-radius:20px}
  .bp-row{display:flex;align-items:stretch}
  .bp-flight{flex:1;padding:15px 18px;min-width:0}
  .locs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
  .loc-tag{font-size:12px;background:#efe7d3;border:1px solid var(--line);color:var(--ink-soft);padding:2px 9px;border-radius:20px}
  .route3{display:flex;align-items:flex-start;gap:10px}
  .ep{display:flex;flex-direction:column;min-width:0}
  .ep .code{font-family:var(--mono);font-weight:700;font-size:27px;line-height:1}
  .ep .city{font-size:13px;color:var(--muted);margin-top:3px;white-space:nowrap}
  .ep .det{margin-top:9px;font-family:var(--mono);font-size:13px;color:var(--ink-soft);display:flex;flex-direction:column;gap:1px}
  .ep .det .dd{color:var(--muted)}
  .ep.right{align-items:flex-end;text-align:right}
  .midline{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:11px;min-width:54px}
  .midline .lnrow{display:flex;align-items:center;width:100%}
  .midline .ln{flex:1;border-top:1.6px dashed var(--line)}
  .midline .pl{color:var(--brass);margin:0 5px;font-size:15px}
  .midline .via{font-size:11px;color:var(--brass-dk);margin-top:5px;font-family:var(--mono);position:relative;cursor:help;border-bottom:1px dotted var(--brass-dk)}
  .midline .via .tip{position:absolute;bottom:140%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 12px;border-radius:9px;font-size:12.5px;line-height:1.55;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:40;box-shadow:0 10px 26px -8px rgba(0,0,0,.6);font-family:var(--body)}
  .midline .via .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
  .midline .via:hover .tip,.midline .via:focus .tip{opacity:1}
  .perkrow{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
  .pk{font-size:12.5px;padding:4px 10px;border-radius:7px;border:1px solid var(--line);background:#fff;display:flex;gap:6px;align-items:center}
  .pk .pk-k{color:var(--muted)} .pk.used{border-color:var(--jade);background:var(--jade-soft);color:var(--jade);font-weight:700} .pk.cash{border-style:dashed}
  .metarow{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--ink-soft)}
  .metarow .mi{display:flex;align-items:center;gap:5px} .metarow .mi .mono{font-family:var(--mono)}
  .bp-photo{width:188px;height:122px;flex:none;align-self:center;margin:16px 24px 16px 8px;border-radius:12px;background-size:cover;background-position:center;background-color:#dcd6c4;display:flex;align-items:flex-end;overflow:hidden;box-shadow:0 3px 12px -5px rgba(0,0,0,.35)}
  .bp-photo.ph{background:linear-gradient(135deg,#9bb1a6,#7d8f7a)}
  .bp-photo .ph-label{display:none;padding:11px;font-weight:700;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.6);font-size:15px}
  .bp-photo.ph .ph-label{display:block}
  .bp-stub{width:196px;flex:none;border-left:2px dashed var(--line);padding:16px 18px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:7px;position:relative}
  .bp-stub::before,.bp-stub::after{content:"";position:absolute;left:-10px;width:18px;height:18px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
  .bp-stub::before{top:-10px} .bp-stub::after{bottom:-10px}
  .bp-stub .sk{font-size:13px;color:var(--muted)}
  .bp-stub .sv{font-family:var(--mono);font-weight:700;font-size:23px}
  .bp-stub .sv.none{color:var(--brass);font-size:16px}
  .bp-stub .sbtns{display:flex;gap:8px;margin-top:4px}
  .icon-btn{appearance:none;cursor:pointer;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);font-size:18px;display:inline-flex;align-items:center;justify-content:center;transition:var(--lift),background .15s,color .15s}
  .icon-btn:hover{transform:translateY(-2px);border-color:var(--ink);color:var(--ink)}
  .icon-btn.done{color:var(--jade);border-color:var(--jade);background:var(--jade-soft)}
  /* todo strip */
  .todo-strip{border-top:1px dashed var(--line);padding:12px 18px;background:#fbf6ea}
  .todo-strip .th{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--brass-dk);margin-bottom:8px}
  .todo-strip .th .prog{font-family:var(--mono);color:var(--muted);font-weight:400}
  .todo-items{display:flex;gap:8px 18px;flex-wrap:wrap}
  .todo-it{display:flex;align-items:center;gap:7px;font-size:14px;cursor:pointer;user-select:none}
  .todo-it input{width:16px;height:16px;accent-color:var(--jade)}
  .todo-it.done span{text-decoration:line-through;color:var(--muted)}

  .empty{text-align:center;color:var(--muted);padding:42px 20px;border:1px dashed var(--line);border-radius:14px;background:var(--card)}

  /* spend / stats shared */
  .yr-pills{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
  .yr-pill{appearance:none;cursor:pointer;border:1px solid var(--line);background:var(--card);padding:9px 18px;border-radius:20px;font-weight:700;font-family:var(--mono);font-size:15px;color:var(--muted);transition:var(--lift),background .15s}
  .yr-pill:hover{transform:translateY(-2px)} .yr-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}
  .cat-bar{display:flex;height:13px;border-radius:6px;overflow:hidden;margin:8px 0;border:1px solid var(--line)}
  .cat-seg{height:100%}
  .cat-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft);margin-bottom:22px}
  .cat-legend span b{font-family:var(--mono)}
  .dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:middle}
  .tbl-scroll{overflow-x:auto;border-radius:12px;box-shadow:var(--shadow)}
  table.tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);min-width:760px}
  table.tbl th,table.tbl td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;white-space:nowrap}
  table.tbl th{background:#f0ebdd;font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
  table.tbl td.num,table.tbl th.num{text-align:right;font-family:var(--mono)}
  table.tbl tbody tr{transition:background .12s} table.tbl tbody tr:hover{background:#f6f1e4}
  table.tbl .loc{font-weight:700;white-space:normal} table.tbl .sub{color:var(--muted);font-size:12px}
  table.tbl tr.total td{font-weight:700;background:#f0ebdd;border-top:2px solid var(--ink)}
  .ra{display:flex;gap:6px}

  /* stats page */
  .hero-stat{background:var(--panel);color:#f3ede0;border-radius:16px;padding:22px 24px;margin-bottom:18px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;transition:var(--lift)}
  .hero-stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi)}
  .hero-stat .hk{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:#9fb0b8;text-transform:uppercase}
  .hero-stat .hv{font-family:var(--mono);font-weight:700;font-size:40px;color:#fff;line-height:1.1}
  .yoy{display:flex;flex-direction:column;gap:3px}
  .yoy .yb{font-family:var(--mono);font-weight:700;font-size:18px;padding:5px 12px;border-radius:20px;display:inline-block}
  .yoy .yb.up{background:rgba(168,67,43,.25);color:#ffb59f} .yoy .yb.down{background:rgba(44,110,99,.3);color:#9fe0d2}
  .yoy .yl{font-size:12px;color:#9fb0b8}
  .superlatives{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:18px 0 6px}
  .sup{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 17px;box-shadow:var(--shadow);transition:var(--lift)}
  .sup:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi)}
  .sup .se{font-size:22px} .sup .sk{font-size:13px;color:var(--muted);margin:4px 0 6px} .sup .sn{font-weight:700;font-size:16px} .sup .sv{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--brass);margin-top:3px}

  /* perks */
  .perk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
  .perk-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:17px;box-shadow:var(--shadow);transition:var(--lift);display:flex;flex-direction:column}
  .perk-card .status-pill{margin-top:auto}
  .perk-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi)} .perk-card.over{border-color:var(--rust)} .perk-card.bob{border-color:var(--brass);border-width:2px;grid-column:1/-1}
  .bob-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
  .bob-row .bob-head{display:flex;align-items:center;gap:12px}
  .bob-row .gauge{margin:0}
  .bob-row .bob-meta{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-soft)}
  .bob-row .status-pill{margin:0 0 0 auto;min-width:120px}
  @media(max-width:560px){.perk-grid{grid-template-columns:1fr}.bob-row .status-pill{margin:8px 0 0 0;width:100%}}
  .perk-card .pc-top{display:flex;align-items:baseline;gap:8px}
  .perk-card .pc-name{font-weight:700;font-size:17px}
  .perk-card .pc-cat{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-left:auto}
  .gauge{display:flex;align-items:baseline;gap:6px;margin:12px 0 4px}
  .gauge .left{font-family:var(--mono);font-weight:700;font-size:40px;line-height:1}
  .gauge .of{font-family:var(--mono);color:var(--muted);font-size:16px}
  .gauge.ok .left{color:var(--jade)} .gauge.warn .left{color:var(--brass)} .gauge.over .left{color:var(--rust)}
  .pc-meta{font-size:13px;color:var(--muted);margin-bottom:8px} .pc-expiry{font-family:var(--mono);font-size:12px;color:var(--ink-soft)}
  .uses-toggle{font-size:13px;color:var(--brass-dk);cursor:pointer;font-weight:700;margin-top:9px;margin-bottom:18px;display:inline-block}
  .uses-list{margin-top:8px;font-size:13px;color:var(--ink-soft);display:none} .uses-list.show{display:block}
  .uses-list div{padding:3px 0;border-top:1px dotted var(--line)}
  .visa-note{margin-top:20px;background:var(--jade-soft);border:1px solid var(--jade);border-radius:12px;padding:15px 17px;font-size:15px;color:var(--jade);transition:var(--lift)}
  .visa-note:hover{transform:translateY(-3px)} .visa-note a{color:var(--jade);font-weight:700;text-decoration:underline} .visa-note b{font-family:var(--mono)}

  /* settings */
  .panel-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:19px;box-shadow:var(--shadow);margin-bottom:20px;transition:box-shadow .2s}
  .panel-box:hover{box-shadow:var(--shadow-hi)} .panel-box h3{margin:0 0 4px;font-size:18px} .panel-box p.hint{margin:0 0 14px;color:var(--muted);font-size:14px}
  .mini-tbl{width:100%;border-collapse:collapse}
  .mini-tbl td,.mini-tbl th{padding:8px 6px;font-size:14px;border-bottom:1px solid var(--line);text-align:left}
  .mini-tbl input,.mini-tbl select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:6px;font-family:var(--mono);font-size:14px;background:#fff}
  .mini-tbl input.txt,.mini-tbl select{font-family:var(--body)}
  .mini-tbl th{font-family:var(--mono);font-size:12px;letter-spacing:1px;color:var(--muted);text-transform:uppercase}
  .row-actions{display:flex;gap:8px;flex-wrap:wrap} .upd-time{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:auto}
  .inline-fld{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .inline-fld input{width:120px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:15px;background:#fff}

  /* modal */
  .overlay{position:fixed;inset:0;background:rgba(20,30,35,.55);display:none;z-index:100;flex-direction:column;align-items:center;overflow-y:auto;padding:24px 14px}
  .overlay .modal{margin:auto 0}
  .overlay.show{display:flex}
  .modal{background:var(--bg);border-radius:16px;width:100%;max-width:700px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);border:1px solid var(--line)}
  .modal.sm{max-width:560px}
  .modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}
  .modal-head h2{margin:0;font-size:19px} .modal-head .x{margin-left:auto;cursor:pointer;font-size:26px;color:var(--muted);background:none;border:none;line-height:1}
  .modal-body{padding:22px}
  .fld{margin-bottom:16px} .fld label{display:block;font-size:14px;font-weight:700;margin-bottom:6px;color:var(--ink-soft)}
  .fld input,.fld select,.fld textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-family:var(--body);font-size:15px;background:var(--card);color:var(--ink)}
  .fld textarea{resize:vertical;min-height:50px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .leg-box{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:14px;background:var(--card)}
  .leg-box .lh{font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--brass-dk);text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:10px}
  .rep-row{display:flex;gap:8px;margin-bottom:8px;align-items:center} .rep-row input{flex:1} .rep-row .btn{flex:none}
  .transit-fields,.vendor-fields{display:none} .transit-fields.show{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)} .vendor-fields.show{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .transit-head{font-size:13px;font-weight:700;color:var(--brass-dk);margin-bottom:8px}
  .book-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:center;margin-bottom:8px}
  .book-row .lbl-chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
  .book-row input{padding:9px 10px;font-size:14px;border:1px solid var(--line);border-radius:7px;background:#fff;width:100%}
  .book-row .x{cursor:pointer;color:var(--rust);background:none;border:none;font-size:18px}
  .exp-grid{display:grid;grid-template-columns:auto 1fr 92px;gap:8px 10px;align-items:center}
  .exp-grid .lab{font-weight:700;font-size:14px;color:var(--ink-soft)}
  .exp-grid input,.exp-grid select{padding:9px 10px;font-size:14px;border:1px solid var(--line);border-radius:7px;background:#fff;width:100%}
  .exp-twd{grid-column:1/-1;text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:-4px}
  .other-extra{grid-column:1/-1;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .other-extra input[type=text]{flex:1;min-width:140px;padding:9px 10px;border:1px solid var(--line);border-radius:7px;font-size:14px;background:#fff}
  .other-extra label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
  .exp-total{text-align:right;margin-top:12px;font-family:var(--mono);font-weight:700;font-size:14px}
  .todo-edit{display:flex;gap:8px;align-items:center;margin-bottom:8px} .todo-edit input[type=text]{flex:1} .todo-edit input[type=checkbox]{width:18px;height:18px;accent-color:var(--jade)}
  .modal-foot{display:flex;gap:10px;padding:16px 22px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--bg)}
  .line-out{width:100%;min-height:300px;font-family:var(--mono);font-size:14px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--card);resize:vertical;line-height:1.7}

  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:15px;opacity:0;pointer-events:none;transition:.25s;z-index:200;box-shadow:0 10px 30px -8px rgba(0,0,0,.5)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* drag handle */
  .drag-h{cursor:grab;color:var(--muted);font-size:18px;padding:0 4px;user-select:none;flex:none}
  .drag-h:active{cursor:grabbing}
  .loc-drag.dragging{opacity:.5}
  .loc-drag.over{outline:2px dashed var(--brass);outline-offset:2px;border-radius:8px}
  /* circular superlative icons */
  .sup .se{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px}
  /* perk card icons + divider + status pill */
  .perk-card .pc-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:21px;flex:none}
  .perk-card .pc-top{display:flex;align-items:center;gap:11px}
  .perk-card .pc-head-txt{display:flex;flex-direction:column}
  .perk-card .pc-rem{font-size:13px;color:var(--muted)}
  .pc-divider{height:1px;border-top:1px dashed var(--line);margin:12px 0}
  .pc-line{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft);margin-bottom:5px}
  .pc-line .ci{opacity:.6}
  .status-pill{margin-top:13px;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px;border-radius:10px;font-weight:700;font-size:14px}
  .status-pill.ok{background:var(--jade-soft);color:var(--jade)}
  .status-pill.warn{background:#f6ecd2;color:var(--brass-dk)}
  .status-pill.over{background:var(--rust-soft);color:var(--rust)}
  /* donut */
  .donut-wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}
  .donut-wrap svg .seg{transition:opacity .15s,stroke-width .15s;cursor:pointer}
  .donut-wrap.hl-on svg .seg:not(.on){opacity:.22}
  .donut-wrap.hl-on .dl-row:not(.on){opacity:.38}
  .dl-row{transition:opacity .15s;cursor:pointer;border-radius:8px;padding:2px 4px}
  .dl-row.on{background:#f3eede}
  .donut-legend{flex:1;min-width:240px;display:flex;flex-direction:column;gap:11px}
  .dl-row{display:flex;align-items:center;gap:11px}
  .dl-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex:none}
  .dl-name{font-weight:700;font-size:14px}
  .dl-amt{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}
  .dl-pct{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:15px;color:var(--ink)}
  /* settings panel ticket notches + header icon */
  .panel-box{position:relative}
  .panel-box.ticket::before,.panel-box.ticket::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--line);transform:translateY(-50%)}
  .panel-box.ticket::before{left:-12px} .panel-box.ticket::after{right:-12px}
  .panel-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .panel-head .ph-ico{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}
  .panel-head h3{margin:0}
  .icon-trash{background:none;border:none;cursor:pointer;color:var(--rust);font-size:18px;padding:5px 9px;border-radius:8px;transition:background .15s}
  .icon-trash:hover{background:var(--rust-soft)}
  /* overdue strip on cards */
  .overdue-banner{background:var(--rust-soft);border:1px solid #e0b3a6;border-left:4px solid var(--rust);border-radius:12px;padding:14px 18px;margin-bottom:16px}
  .overdue-banner .ob-title{font-weight:700;color:var(--rust);font-size:15px;margin-bottom:8px;display:flex;align-items:center;gap:7px}
  .overdue-banner .ob-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 0;border-top:1px dotted #d9b3a8;font-size:14px}
  .overdue-banner .ob-item .obn{font-weight:700}
  .overdue-banner .ob-item .obd{color:var(--rust);font-family:var(--mono);font-size:13px}
  .overdue-banner .ob-item .od-btn{margin-left:auto;background:var(--rust);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer;transition:var(--lift)}
  .overdue-banner .ob-item .od-btn:hover{transform:translateY(-2px)}
  .overdue-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;background:var(--rust-soft);color:var(--rust);font-size:14px;font-weight:700;border-bottom:1px solid #e8c9bf}
  .overdue-strip .od-btn{margin-left:auto;background:var(--rust);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-weight:700;font-size:13px;cursor:pointer;transition:var(--lift)}
  .overdue-strip .od-btn:hover{transform:translateY(-2px)}
  #confirm-overlay{z-index:140}
  .bob-uses{margin-top:14px;border-top:1px dashed var(--line);padding-top:11px;width:100%}
  /* ---- responsive ---- */
  @media(min-width:1500px){.wrap{max-width:1340px}}
  @media(max-width:1040px){.superlatives{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:980px){.stat-grid.g3{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:820px){.bp-photo{width:160px;height:108px}}
  @media(max-width:700px){
    .stat-grid{grid-template-columns:1fr 1fr}
    .superlatives{grid-template-columns:1fr 1fr}
    .perk-grid{grid-template-columns:1fr}
    .bob-row .status-pill{margin:8px 0 0 0;width:100%}
    /* bottom fixed nav (app-style) */
    nav.tabs{position:fixed;top:auto;bottom:0;left:0;right:0;border-bottom:none;border-top:1px solid var(--line);background:var(--card);box-shadow:0 -4px 18px -8px rgba(0,0,0,.25);z-index:60;padding-bottom:env(safe-area-inset-bottom)}
    nav.tabs .wrap{padding:0;max-width:none;width:100%}
    .tab{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 9px;font-size:11px;border-bottom:none;border-top:3px solid transparent;min-width:0}
    .tab.active{border-bottom-color:transparent;border-top-color:var(--brass);background:#f3eede}
    .tab .ti{display:block;font-size:21px;line-height:1}
    .tab .tl{font-size:11px}
    body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
    .toast{bottom:calc(86px + env(safe-area-inset-bottom))}
    /* spend: table -> cards */
    .spend-cards{display:flex}
    .tbl-scroll{display:none}
    .toolbar{gap:8px}
    .modal-foot{flex-wrap:wrap}
  }
  @media(max-width:460px){
    .stat-grid,.stat-grid.g3,.superlatives{grid-template-columns:1fr}
  }
  /* spend mobile cards (hidden on desktop) */
  .spend-cards{display:none;flex-direction:column;gap:11px}
  .scard{background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:14px 15px}
  .scard .sc-top{display:flex;align-items:baseline;gap:9px}
  .scard .sc-date{font-family:var(--mono);font-size:13px;color:var(--muted);flex:none}
  .scard .sc-name{font-weight:700;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .scard .sc-total{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:16px;flex:none}
  .scard .sc-cats{display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:10px;font-size:13px;color:var(--ink-soft)}
  .scard .sc-cats .ck{color:var(--muted)}
  .scard .sc-cats .cm{font-family:var(--mono)}
  .scard .sc-cats .ex{color:var(--rust)}
  .scard .sc-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:11px;padding-top:10px;border-top:1px dashed var(--line)}
  @media(prefers-reduced-motion:reduce){*{transition:none!important}.btn:hover,.bp:hover,.stat:hover,.perk-card:hover,.sup:hover,.yr-pill:hover,.flight-card:hover,.visa-note:hover,.hero-stat:hover{transform:none}}
  @media(max-width:720px){
    body{font-size:17px}
    .iata{font-size:26px}
    .grid2,.grid3,.vendor-fields.show{grid-template-columns:1fr}
    .book-row{grid-template-columns:1fr 1fr}
    .fl-count{margin-left:0;text-align:left;width:100%}
    .exp-grid{grid-template-columns:auto 1fr 80px}
    .bp-row{flex-wrap:wrap}
    .bp-photo{width:auto;height:150px;order:-1;margin:14px 14px 2px 14px;align-self:auto}
    .bp-stub{width:100%;border-left:none;border-top:2px dashed var(--line)}
    .bp-stub::before{top:-10px;left:auto;right:24px} .bp-stub::after{bottom:auto;top:-10px;left:24px}
  }
  /* ---- auth overlay ---- */
  .auth-screen{position:fixed;inset:0;background:var(--panel);z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
  .auth-screen.hidden{display:none}
  .auth-box{background:var(--card);border-radius:20px;padding:32px 28px;width:100%;max-width:400px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
  .auth-logo{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--ink);margin:0 0 4px}
  .auth-sub{font-size:14px;color:var(--muted);margin:0 0 28px}
  .auth-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:22px;gap:0}
  .auth-tab{flex:1;background:none;border:none;border-bottom:3px solid transparent;padding:10px;font-size:15px;font-weight:700;color:var(--muted);cursor:pointer}
  .auth-tab.active{color:var(--ink);border-bottom-color:var(--brass)}
  .auth-fld{margin-bottom:14px}
  .auth-fld label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:5px}
  .auth-fld input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:15px;background:#fff;font-family:var(--body)}
  .auth-btn{width:100%;padding:13px;border-radius:10px;font-weight:700;font-size:16px;cursor:pointer;border:none;background:var(--brass);color:#fff;margin-top:6px;transition:background .15s}
  .auth-btn:hover{background:var(--brass-dk)}
  .auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:13px}
  .auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line)}
  .google-btn{width:100%;padding:12px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;border:1px solid var(--line);background:#fff;color:#3c4043;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,box-shadow .15s}
  .google-btn:hover{background:#f8f9fa;box-shadow:0 1px 8px rgba(0,0,0,.12)}
  .google-btn svg{flex:none}
  .auth-err{color:var(--rust);font-size:13px;margin-top:10px;min-height:18px}
  .auth-note{font-size:12px;color:var(--muted);margin-top:14px;text-align:center;line-height:1.5}
  /* ---- sync status bar ---- */
  .sync-bar{display:flex;align-items:center;gap:10px;padding:7px 14px;background:var(--panel-2);color:#e2eaee;font-size:13px;border-bottom:1px solid #2c4651;flex-wrap:wrap}
  .sync-bar .sb-user{font-family:var(--mono);font-size:12px;color:#9fb0b8;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
  .sync-bar .sb-status{font-family:var(--mono);font-size:12px;display:flex;align-items:center;gap:5px}
  .sync-bar .sb-dot{width:7px;height:7px;border-radius:50%;flex:none}
  .sb-dot.ok{background:#4ade80} .sb-dot.syncing{background:#facc15;animation:pulse .8s infinite alternate} .sb-dot.err{background:#f87171} .sb-dot.local{background:#9fb0b8}
  @keyframes pulse{from{opacity:.5}to{opacity:1}}
  .sync-bar .sb-btn{appearance:none;border:1px solid #3a5b68;background:transparent;color:#e2eaee;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;white-space:nowrap}
  .sync-bar .sb-btn:hover{background:#2c4651}

  /* ---- 年度回顧地圖 + 飛行紀錄 ---- */
  .year-map{background:linear-gradient(135deg,#274551,#1d333c);border:1px solid #3a5b68;border-radius:16px;padding:18px 18px 12px;box-shadow:0 12px 32px -16px rgba(0,0,0,.6)}
  .year-map svg{display:block;width:100%;height:auto}
  .year-map .wm-base{fill:#2c4651;stroke:#3a5b68;stroke-width:.4}
  .year-map .wm-visited{fill:#C89B3C;stroke:#e8c26a;stroke-width:.5}
  .year-map .wm-planned{fill:#5b7a9c;stroke:#7d9cbc;stroke-width:.5}
  .year-map .wm-home{fill:#2C6E63;stroke:#4ade80;stroke-width:.6}
  .ym-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:#c9d6dc;font-family:var(--mono)}
  .ym-legend .lg{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
  .ym-legend .lg-visited{background:#C89B3C}
  .ym-legend .lg-planned{background:#5b7a9c}
  .ym-legend .lg-home{background:#2C6E63}
  .fly-review{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
  .fr-chip{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:14px;font-weight:700;color:var(--ink-soft);box-shadow:var(--shadow)}
  .fr-chip.fr-total{background:var(--panel,#1d333c);background:#1d333c;color:#f3ede0;border-color:#3a5b68}
  .fr-chip.fr-cabin{background:#f6ecd2;border-color:var(--brass);color:var(--brass-dk)}

  /* ---- 費用計算機 ---- */
  .amt-wrap{display:flex;gap:6px;align-items:center;min-width:0}
  .amt-wrap input{flex:1;min-width:0}
  .calc-open{flex:none;appearance:none;cursor:pointer;width:36px;height:36px;border:1px solid var(--line);border-radius:7px;background:#fff;font-size:16px;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,transform .1s}
  .calc-open:hover{background:#f6ecd2;border-color:var(--brass)}
  #calc-overlay{z-index:150}
  .calc-box{margin:auto 0;background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.55);width:100%;max-width:320px;padding:16px}
  .calc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-weight:700;color:var(--ink-soft);font-size:14px}
  .calc-head .x{appearance:none;border:none;background:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;padding:2px 6px;border-radius:8px}
  .calc-head .x:hover{background:rgba(0,0,0,.06)}
  .calc-screen{background:#1d333c;border-radius:12px;padding:12px 14px;margin-bottom:12px;text-align:right;overflow:hidden}
  .calc-hist{font-family:var(--mono);font-size:13px;color:#8fa5ae;min-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .calc-cur{font-family:var(--mono);font-size:30px;font-weight:700;color:#f3ede0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .calc-key{appearance:none;cursor:pointer;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:19px;font-weight:700;font-family:var(--mono);color:var(--ink);padding:13px 0;transition:transform .08s,background .12s,box-shadow .12s;box-shadow:0 2px 0 rgba(0,0,0,.06)}
  .calc-key.op{background:#f6ecd2;color:var(--brass-dk);border-color:#e0cf9e}
  .calc-key.fn{background:#e9e4d4;color:var(--ink-soft)}
  .calc-key.eq{background:var(--brass);color:#fff;border-color:var(--brass)}
  .calc-key:hover{filter:brightness(1.04)}
  .calc-key:active,.calc-key.pressed{transform:scale(.9);box-shadow:0 0 0 rgba(0,0,0,0);filter:brightness(.92)}
  .calc-key.pressed{background:#dcd4bd}
  .calc-key.op.pressed{background:#ecd9a4}
  .calc-key.eq.pressed{background:var(--brass-dk,#9A7428);background:#9a7428}