@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

  :root{
    --bg: #F3F3F6;
    --card: #FFFFFF;
    --ink: #15151A;
    --ink-soft: #52525E;
    --ink-faint: #6B6B76;
    --border: #E7E7EC;
    --border-soft: #EFEFF3;
    --accent: #4F46E5;
    --accent-ink: #3730A3;
    --accent-soft: #EEF2FF;
    --positive: #0F9D6E;
    --warn: #C6790B;
    --destructive: #DC2626;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-sm: 9px;
    --sans: 'Inter', -apple-system, sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --c-transport: #3B82F6;
    --c-accommodation: #D97706;
    --c-activity: #10B981;
    --c-other: #8B5CF6;
    --shadow-card: 0 1px 2px rgba(21,21,26,.04), 0 12px 28px -14px rgba(21,21,26,.10);
    --shadow-pop: 0 20px 48px -12px rgba(21,21,26,.22);
  }
  *{box-sizing:border-box;}
  @media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
  body{
    margin:0; color:var(--ink); font-family:var(--sans); font-size:0.875rem; line-height:1.5;
    -webkit-font-smoothing:antialiased;
    background:
      radial-gradient(1100px 480px at 12% -8%, rgba(79,70,229,.06), transparent 60%),
      radial-gradient(900px 460px at 100% 0%, rgba(79,70,229,.045), transparent 55%),
      var(--bg);
  }
  ::selection{background:var(--accent-soft);}
  button, select, input, textarea{font-family:inherit;}

  select{
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236B6B76' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 11px center; background-size:10px 7px;
    cursor:pointer; padding-right:30px;
  }

  /* ---------- Gate ---------- */
  #gate{
    position:fixed; inset:0; background:#0B0B10; color:#F3F3F6;
    display:flex; align-items:center; justify-content:center; z-index:60;
    padding:24px; overflow:hidden;
  }
  #gate.hidden{display:none;}
  .gate-glow{
    position:absolute; width:900px; height:900px; border-radius:50%;
    background:radial-gradient(circle, rgba(79,70,229,.22), rgba(79,70,229,.05) 45%, transparent 70%);
    pointer-events:none;
  }
  .gate-card{
    position:relative; width:100%; max-width:360px; text-align:center;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
    border-radius:22px; padding:36px 32px 32px; backdrop-filter:blur(20px);
    box-shadow:0 30px 80px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
    display:flex; flex-direction:column; align-items:center; gap:16px;
    animation:gate-card-in 520ms cubic-bezier(0.23,1,0.32,1) both;
  }
  @keyframes gate-card-in{from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}
  @media (prefers-reduced-motion: reduce){ .gate-card{animation:fade-in 200ms ease both;} }
  .gate-route-bg{
    position:absolute; inset:0; border-radius:22px; overflow:hidden; pointer-events:none; opacity:.5;
    background-image:
      radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.35) 45%, transparent 46%),
      radial-gradient(1.5px 1.5px at 78% 18%, rgba(255,255,255,.28) 45%, transparent 46%),
      radial-gradient(1.5px 1.5px at 62% 82%, rgba(255,255,255,.22) 45%, transparent 46%),
      radial-gradient(1.5px 1.5px at 12% 78%, rgba(255,255,255,.2) 45%, transparent 46%);
  }
  #gate .brand-lockup{justify-content:center; margin-bottom:2px; position:relative;}
  #gate .wm-primary{color:#F3F3F6;}
  #gate .icon-box{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 8px 24px -8px rgba(79,70,229,.6);}
  #gate .icon-box svg{width:28px; height:28px;}
  #gate .wordmark{font-size:1rem; margin-left:2px;}
  #gate h1{font-weight:700; font-size:1.0625rem; margin:2px 0 0; color:#F3F3F6; letter-spacing:-.01em; position:relative;}
  #gate p{color:#9C9CA8; font-size:0.8125rem; max-width:280px; margin:0; position:relative; line-height:1.5;}
  .gate-field{width:100%; position:relative;}
  #gate input{
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:#F3F3F6;
    padding:13px 15px; border-radius:11px; font-size:0.9375rem; width:100%; box-sizing:border-box;
    font-family:var(--mono); letter-spacing:.02em; transition:border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
  }
  #gate input::placeholder{color:#6B6B76; letter-spacing:normal; font-family:var(--sans);}
  #gate input:focus{outline:none; border-color:#6C63F0; background:rgba(255,255,255,.07); box-shadow:0 0 0 4px rgba(108,99,240,.18);}
  #gate button{
    background:var(--accent); color:#fff; border:none; padding:12px 24px; border-radius:11px;
    font-weight:700; font-size:0.875rem; cursor:pointer; width:100%;
    transition:background-color 150ms ease, transform 100ms cubic-bezier(0.23,1,0.32,1), box-shadow 150ms ease;
    box-shadow:0 10px 24px -10px rgba(79,70,229,.7);
  }
  #gate button:hover{background:var(--accent-ink); box-shadow:0 12px 28px -8px rgba(79,70,229,.8);}
  #gate button:disabled{opacity:.55; cursor:default; box-shadow:none;}
  #gate button:active{transform:scale(.97);}
  #gate .msg{font-size:0.75rem; min-height:16px; position:relative;}
  #gate .msg.err{color:#F3A7A7;}

  /* ---------- Minimal top chrome ---------- */
  header.top{
    position:sticky; top:0; z-index:10; padding:14px 26px;
    background:rgba(243,243,246,.74); backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid var(--border-soft);
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    max-width:1360px; margin:0 auto;
  }
  /* ---------- Brand lockup: icon + two-tone wordmark ---------- */
  .brand-lockup{display:flex; align-items:center; gap:9px; flex-shrink:0;}
  .icon-box{
    width:28px; height:28px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; position:relative;
  }
  .icon-box svg{width:20px; height:20px; display:block;}
  /* A slow, continuous spin — reads as "globe", not as a spinner/loading
     state, because of the pace (7s/turn) and because nothing else about
     the icon suggests a busy/pending state. */
  @keyframes globe-spin{to{transform:rotate(360deg);}}
  @media (prefers-reduced-motion: no-preference){
    .icon-box svg.globe-mark{ animation:globe-spin 7s linear infinite; transform-origin:50% 50%; }
  }
  header.top .wordmark{font-weight:800; font-size:0.9375rem; letter-spacing:-0.02em; flex-shrink:0;}
  .wordmark .wm-primary{color:var(--ink);}
  .wordmark .wm-accent{color:var(--accent); font-weight:500;}
  header.top .trip-name{font-size:0.8125rem; color:var(--ink-soft); padding-left:14px; border-left:1px solid var(--border); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:480px;}
  header.top .spacer{flex:1;}
  .sync-status{display:flex; align-items:center; gap:6px; flex-shrink:0; padding:2px 6px; margin:-2px -6px; border-radius:6px; cursor:pointer; transition:background-color 140ms ease;}
  .sync-status:hover, .sync-status:focus-visible{background:var(--bg);}
  .sync-status:active{transform:scale(.98);}
  .sync-status:focus-visible{outline:2px solid var(--accent-line, var(--accent)); outline-offset:1px;}
  .sync-dot{width:6px; height:6px; border-radius:50%; background:var(--positive); display:inline-block; flex-shrink:0; transition:background-color 200ms ease;}
  .sync-dot.dirty{background:var(--warn);}
  .sync-status-text{font-family:var(--mono); font-size:0.6875rem; color:var(--ink-faint); white-space:nowrap; transition:color 200ms ease;}
  .sync-status-text.warn{color:var(--warn);}

  .search-trigger{
    display:flex; align-items:center; gap:8px; padding:9px 16px 9px 13px; border-radius:22px;
    border:1px solid var(--border); background:var(--card); color:var(--ink-faint); font-size:0.8125rem; cursor:pointer;
    font-weight:500; transition:border-color 150ms var(--ease-out), color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  }
  .search-trigger:hover{border-color:#CFCFF6; color:var(--ink-soft); box-shadow:0 0 0 4px var(--accent-soft);}
  .search-trigger .glyph{font-size:0.875rem;}

  .fab-menu{
    position:fixed; right:22px; bottom:26px; z-index:15;
    width:52px; height:52px; border-radius:50%; background:var(--ink); color:#fff;
    border:none; cursor:pointer; font-size:1.25rem; display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px rgba(23,23,28,.25); transition:transform 120ms var(--ease-out), background-color .15s;
  }
  .fab-menu:hover{background:var(--accent);}
  .fab-menu:active{transform:scale(0.92);}
  @media(min-width:900px){ .fab-menu{display:none;} }

  /* ---------- Top tabs (Ledger / Stats / Overview / Settings) ---------- */
  .tabs-bar{max-width:1360px; margin:0 auto; padding:0 60px 0 26px; box-sizing:border-box;}
  .tabs{
    display:flex; gap:4px; margin:18px 0 0; padding:4px; background:var(--card); border:1px solid var(--border);
    border-radius:13px; width:fit-content;
  }
  .tabs button{
    border:none; background:none; padding:9px 18px; border-radius:9px; font-size:0.8125rem; font-weight:600;
    color:var(--ink-faint); cursor:pointer; transition:color 150ms ease, background-color 150ms ease;
  }
  .tabs button.on{background:var(--ink); color:#fff;}
  .tabs button:not(.on):hover{color:var(--ink);}
  @media(max-width:900px){ .tabs-bar{padding:0 20px;} }

  section.view{display:none;}
  section.view.on{display:block; animation:view-in 380ms var(--ease-out);}
  @keyframes view-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
  @media(prefers-reduced-motion: reduce){ section.view.on{animation:none;} }

  .page{max-width:1360px; margin:0 auto; padding:22px 60px 60px 26px;}
  section h2{font-size:1.1875rem; letter-spacing:-.01em; color:var(--ink); font-weight:800; margin:0 0 16px;}

  /* ---------- KPI / summary (Stats / Overview headers) ---------- */
  .kpi-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:18px;}
  .kpi-row.n3{grid-template-columns:repeat(3,1fr);}
  .kpi-row.n5{grid-template-columns:repeat(5,1fr);}
  .kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:15px 17px; box-shadow:var(--shadow-card);}
  .kpi.hl{background:linear-gradient(145deg,var(--accent-soft),#fff); border-color:#DCDCF9;}
  .kpi .label{font-size:0.6562rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:600;}
  .kpi.hl .label{color:var(--accent-ink);}
  .kpi .value{font-family:var(--mono); font-size:clamp(15px,2vw,19px); font-weight:700; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .kpi .sub{font-size:0.6562rem; color:var(--ink-faint); margin-top:3px;}

  /* ---------- Boarding-pass trip hero (Ledger) ---------- */
  .trip-summary-card{
    position:relative; display:flex; background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; margin-bottom:14px;
    flex-wrap:wrap;
  }
  .hero-main{flex:1 1 420px; min-width:0; padding:24px 28px 22px; position:relative;}
  .hero-main::before{
    content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
    background-image:
      radial-gradient(2px 2px at 20% 30%, rgba(79,70,229,.10) 40%, transparent 41%),
      radial-gradient(2px 2px at 68% 62%, rgba(79,70,229,.10) 40%, transparent 41%),
      radial-gradient(2px 2px at 85% 22%, rgba(79,70,229,.08) 40%, transparent 41%);
  }
  .hero-title{font-size:clamp(20px,2.4vw,27px); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:0 0 14px; position:relative;}
  .hero-facts{display:flex; flex-wrap:wrap; gap:20px; margin-bottom:16px; position:relative;}
  .hero-fact{display:flex; align-items:flex-start; gap:8px;}
  .hero-fact svg{width:15px; height:15px; color:var(--ink-faint); margin-top:2px; flex-shrink:0;}
  .hero-fact .f-main{font-family:var(--mono); font-size:0.8125rem; font-weight:600; color:var(--ink);}
  .hero-fact .f-sub{font-size:0.6562rem; color:var(--ink-faint); margin-top:1px;}
  .hero-tags{display:flex; flex-wrap:wrap; gap:14px; position:relative;}
  .hero-tags .grp{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
  .hero-tags .grp-label{font-size:0.6562rem; color:var(--ink-faint); font-weight:600; margin-right:2px; text-transform:uppercase; letter-spacing:.04em;}
  .hero-tags .tsc-empty{font-size:0.7188rem; color:var(--ink-faint); font-style:italic;}

  .hero-stub-cut{
    flex:0 0 0; position:relative; width:0; border-left:2px dashed #D9D9E6; margin:16px 0; align-self:stretch;
  }
  .hero-stub-cut::before, .hero-stub-cut::after{
    content:''; position:absolute; left:50%; transform:translateX(-50%);
    width:26px; height:26px; border-radius:50%; background:var(--bg);
  }
  .hero-stub-cut::before{top:-13px;} .hero-stub-cut::after{bottom:-13px;}

  .hero-stub{flex:1 1 260px; min-width:240px; padding:24px 26px 22px; display:flex; flex-direction:column;}
  .hero-stub-label{font-size:0.6562rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px;}
  .hero-figure .amt{font-family:var(--mono); font-weight:700; letter-spacing:-.01em; font-size:clamp(24px,2.6vw,30px); color:var(--ink); display:block; line-height:1.05;}
  .hero-figure .note{font-size:0.6875rem; color:var(--ink-faint); margin-top:5px;}
  .hero-sub-figure{display:flex; justify-content:space-between; align-items:baseline; padding-top:13px; margin-top:13px; border-top:1px solid var(--border-soft); font-size:0.75rem;}
  .hero-sub-figure .l{color:var(--ink-soft);}
  .hero-sub-figure .v{font-family:var(--mono); font-weight:600;}

  .comp-bar-wrap{margin-top:auto; padding-top:16px;}
  .comp-bar-label{display:flex; justify-content:space-between; font-size:0.6562rem; color:var(--ink-faint); font-weight:600; margin-bottom:7px; text-transform:uppercase; letter-spacing:.03em;}
  .comp-bar{display:flex; height:8px; border-radius:20px; overflow:hidden; background:var(--bg); margin-bottom:9px;}
  .comp-bar .seg{height:100%; transition:filter .15s, width .8s var(--ease-out);}
  .comp-bar .seg:hover{filter:brightness(1.12);}
  .comp-legend{display:flex; flex-wrap:wrap; gap:11px;}
  .comp-legend .li{display:flex; align-items:center; gap:5px; font-size:0.6875rem; color:var(--ink-soft);}
  .comp-legend .sw{width:7px; height:7px; border-radius:2px; flex-shrink:0;}
  .comp-legend .pct{font-family:var(--mono); color:var(--ink-faint);}

  @media(max-width:680px){
    .trip-summary-card{flex-direction:column;}
    .hero-stub-cut{width:auto; height:0; border-left:none; border-top:2px dashed #D9D9E6; margin:0 20px; align-self:auto;}
    .hero-stub-cut::before, .hero-stub-cut::after{top:50%; transform:translateY(-50%);}
    .hero-stub-cut::before{left:-13px;} .hero-stub-cut::after{left:auto; right:-13px;}
  }

  /* Legacy trip-identity rows (kept for any leftover usage) */
  .tsc-row{display:flex; gap:24px; flex-wrap:wrap;}
  .tsc-item{min-width:120px;}
  .tsc-item.full{flex:1; min-width:100%;}
  .tsc-label{font-size:0.6562rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:600; margin-bottom:5px;}
  .tsc-value{font-family:var(--mono); font-size:0.875rem; font-weight:600; color:var(--ink);}
  .tsc-pills{line-height:1.9;}
  .tsc-empty{font-size:0.75rem; color:var(--ink-faint); font-style:italic;}

  /* ---------- Control bar ---------- */
  .control-bar{display:flex; gap:9px; align-items:center; margin-bottom:14px; flex-wrap:wrap;}
  .control-bar input[type=text]{
    padding:9px 13px 9px 34px; border:1px solid var(--border); border-radius:10px; background:var(--card) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'><circle cx='11' cy='11' r='7' stroke='%23A0A0AC' stroke-width='1.8'/><path d='M20 20l-3.5-3.5' stroke='%23A0A0AC' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat 11px center;
    font-size:0.8125rem; width:200px; transition:border-color .15s, box-shadow .15s;
  }
  .control-bar input[type=text]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .control-bar select{padding:9px 30px 9px 13px; border:1px solid var(--border); border-radius:10px; background-color:var(--card); font-size:0.8125rem;}
  .btn-add-item{
    display:flex; align-items:center; gap:7px; padding:9px 16px 9px 13px; border-radius:10px; border:none;
    background:var(--ink); color:#fff; font-size:0.7812rem; font-weight:700; margin-left:auto; flex-shrink:0;
    transition:transform .12s var(--ease-out), background-color .15s;
  }
  .btn-add-item:hover{background:var(--accent);}
  .btn-add-item:active{transform:scale(.95);}
  .chip{font-size:0.7188rem; font-weight:600; padding:7px 13px; border-radius:20px; border:1px solid var(--border); background:var(--card); color:var(--ink-soft); cursor:pointer; transition:all 150ms var(--ease-out);}
  .chip.on{background:var(--ink); border-color:var(--ink); color:#fff;}
  .chip:active{transform:scale(.96);}
  .chip-x{opacity:0.6; font-size:0.625rem; margin-left:2px;}

  /* ---------- Category sections ---------- */
  .cat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:11px; overflow:hidden; box-shadow:var(--shadow-card); position:relative;}
  .cat-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; cursor:pointer; user-select:none; position:relative;}
  .cat-head::before{content:''; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px;}
  .cat-transport .cat-head::before{background:var(--c-transport);}
  .cat-accommodation .cat-head::before{background:var(--c-accommodation);}
  .cat-activity .cat-head::before{background:var(--c-activity);}
  .cat-other .cat-head::before{background:var(--c-other);}
  .cat-head .name{font-weight:700; font-size:0.8438rem; display:flex; align-items:center; gap:9px;}
  .cat-dot{display:none;}
  .cat-head .totals{display:flex; flex-direction:column; align-items:flex-end; gap:1px; font-family:var(--mono);}
  .cat-head .totals .t{font-size:0.8125rem; font-weight:700;}
  .cat-head .totals .y{font-size:0.6875rem; color:var(--accent);}
  .cat-head .chev{font-size:0.6875rem; color:var(--ink-faint); margin-left:8px; transition:transform 200ms var(--ease-out); display:inline-block;}
  .cat.collapsed .cat-head .chev{transform:rotate(-90deg);}
  .cat-body{border-top:1px solid var(--border-soft); display:grid; grid-template-rows:1fr; transition:grid-template-rows 280ms var(--ease-out);}
  .cat.collapsed .cat-body{grid-template-rows:0fr; border-top-color:transparent;}
  .cat-body-inner{overflow:hidden; min-height:0;}

  table.items{width:100%; border-collapse:collapse; font-size:0.7812rem;}
  table.items th{text-align:left; font-size:0.625rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-faint); font-weight:700; padding:9px 18px; border-bottom:1px solid var(--border-soft); white-space:nowrap; background:#FBFBFC;}
  table.items td{padding:11px 18px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
  table.items tr:last-child td{border-bottom:none;}
  table.items tr.item-row{transition:background-color 120ms ease, opacity 180ms ease, transform 180ms ease;}
  table.items tr.item-row:hover{background:#FAFAFC;}
  table.items tr.item-row.removing{opacity:0; transform:translateX(8px);}
  table.items td.num{font-family:var(--mono); text-align:right; white-space:nowrap; font-weight:500;}
  table.items td.name{font-weight:600; cursor:pointer;}
  table.items td.name:hover{color:var(--accent);}
  table.items td.meta{color:var(--ink-soft); font-size:0.75rem;}
  table.items td.pernight{font-family:var(--mono); text-align:right; color:var(--accent); font-size:0.6875rem; white-space:nowrap;}
  .pill{display:inline-block; font-size:0.625rem; padding:3px 9px; border-radius:20px; background:var(--bg); color:var(--ink-soft); font-weight:600; margin:1px 3px 1px 0;}
  .pill.prepaid{background:#E4F7EF; color:var(--positive);}
  .pill.spot{background:#FCF1DF; color:var(--warn);}
  .pill.solo{background:#F3E8FD; color:#8B5CF6;}
  .actions{white-space:nowrap; text-align:right;}
  .actions button{background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:5px; border-radius:7px; opacity:0; transition:opacity 150ms ease, background-color 150ms ease, color 150ms ease; vertical-align:middle;}
  .actions button svg{width:14px; height:14px; display:block;}
  table.items tr.item-row:hover .actions button, table.items tr.item-row:focus-within .actions button{opacity:1;}
  @media(hover:none){ .actions button{opacity:1; padding:10px 11px;} }
  .actions button:hover{color:var(--ink); background:var(--bg);}
  .empty-row{padding:18px 12px; color:var(--ink-faint); font-style:italic; text-align:center;}
  .add-row-btn{
    margin-top:0; font-family:var(--sans); font-weight:600; font-size:0.75rem; color:var(--ink-faint);
    background:none; border:1px dashed var(--border); border-radius:9px; padding:9px 14px; cursor:pointer;
    width:100%; text-align:center; transition:all 150ms ease;
  }
  .add-row-btn:hover{border-color:#C7C7F5; color:var(--accent); background:var(--accent-soft);}

  /* ---------- Chip select (custom tags) ---------- */
  .chip-select{display:flex; flex-wrap:wrap; gap:6px;}
  .chip-select .chip.chip-add{border-style:dashed; color:var(--ink-faint);}
  .chip-input{font-family:var(--sans); font-size:0.7812rem; padding:6px 12px; border-radius:20px; border:1px solid var(--accent); width:110px;}

  /* ---------- Buttons ---------- */
  .btn{font-size:0.7812rem; font-weight:600; cursor:pointer; border-radius:9px; padding:8px 14px; border:1px solid var(--border); background:var(--card); color:var(--ink); transition:transform 100ms var(--ease-out), background-color 120ms ease, border-color 120ms ease, color 120ms ease;}
  .btn:hover{border-color:var(--ink-faint);}
  .btn:active{transform:scale(0.97);}
  .btn.primary{background:var(--ink); color:#fff; border-color:var(--ink);}
  .btn.primary:hover{background:var(--accent); border-color:var(--accent);}
  .btn.accent{background:var(--accent); color:#fff; border-color:var(--accent);}
  .btn.accent:hover{background:var(--accent-ink); border-color:var(--accent-ink);}
  .btn.danger{background:#fff; color:#B5473C; border-color:#F0D4CE;}
  .btn.danger:hover{border-color:#B5473C; background:#FDF1ED;}
  .btn.ghost{background:transparent;}
  .btn.small{padding:6px 10px; font-size:0.7188rem;}
  .btn:disabled{opacity:.5; cursor:default;}
  .toggle{position:relative; width:40px; height:23px; border-radius:20px; background:var(--border); border:none; cursor:pointer; flex-shrink:0; transition:background-color .18s var(--ease-out);}
  .toggle.on{background:var(--positive);}
  .toggle::after{content:''; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .18s var(--ease-out);}
  .toggle.on::after{transform:translateX(17px);}
  .segmented{display:inline-flex; background:var(--bg); border-radius:9px; padding:3px; gap:2px;}
  .segmented button{font-size:0.7188rem; font-weight:600; padding:8px 13px; border:none; background:none; color:var(--ink-faint); cursor:pointer; border-radius:7px; transition:all 150ms var(--ease-out);}
  .segmented button.on{background:var(--card); color:var(--ink); box-shadow:var(--shadow-card);}

  /* ---------- Modal ---------- */
  .modal-overlay{position:fixed; inset:0; background:rgba(15,15,20,.42); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:40; padding:16px;}
  .modal-overlay.open{display:flex;}
  .modal{background:var(--card); width:100%; max-width:560px; max-height:88vh; overflow:auto; border-radius:20px; padding:22px; animation:modal-in 260ms var(--ease-out); box-shadow:var(--shadow-pop);}
  @keyframes modal-in{from{opacity:0; transform:translateY(16px) scale(0.97);} to{opacity:1; transform:translateY(0) scale(1);}}
  @media (prefers-reduced-motion: reduce){ .modal{animation:fade-in 150ms ease;} }
  @keyframes fade-in{from{opacity:0;} to{opacity:1;}}
  .modal h2{font-size:1.0625rem; margin:0 0 16px; font-weight:800; letter-spacing:-.01em;}
  .field-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .field{margin-bottom:10px;}
  .field label.checkbox-row{display:flex; align-items:center; gap:8px; font-size:0.7812rem; color:var(--ink); cursor:pointer; font-weight:400; text-transform:none; letter-spacing:normal;}
  .checkbox-row input[type="checkbox"]{width:15px; height:15px; accent-color:var(--accent); cursor:pointer; flex-shrink:0;}
  .field.full{grid-column:1/-1;}
  /* Lets #dynamicFieldsWrap swap its inner fields (route/legs/date/nights)
     without breaking out of the parent's 2-col grid — the wrapper itself
     generates no box, so its .field/.field.full children lay out exactly
     as if they were direct children of .field-grid. */
  .dyn-wrap{display:contents;}
  .field label{display:block; font-size:0.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:4px;}
  .field input, .field select, .field textarea{width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:9px; font-size:0.8438rem; background:var(--card); color:var(--ink); transition:border-color .15s, box-shadow .15s;}
  .field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .field select{padding-right:28px;}

  @media(max-width:640px){
    .modal-overlay{align-items:flex-end; padding:0;}
    .modal{border-radius:22px 22px 0 0; max-height:92vh; animation:sheet-in 300ms var(--ease-out);}
    @keyframes sheet-in{from{transform:translateY(100%);} to{transform:translateY(0);}}
  }

  /* ---------- Custom autocomplete (replaces native <datalist>) ---------- */
  .ac-wrap{position:relative;}
  .ac-panel{
    position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:30;
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    box-shadow:var(--shadow-pop);
    max-height:220px; overflow-y:auto; display:none;
  }
  .ac-panel.open{display:block;}
  .ac-option{padding:9px 13px; font-size:0.8438rem; cursor:pointer; color:var(--ink);}
  .ac-option mark{background:none; color:var(--accent); font-weight:600;}
  .ac-option:hover, .ac-option.hi{background:var(--accent-soft);}

  /* ---------- Multi-stop route builder (transport) ---------- */
  .route-stop{display:flex; align-items:center; gap:8px; margin-bottom:7px;}
  .route-stop-label{width:38px; flex-shrink:0; font-size:0.625rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:700;}
  .route-stop .ac-wrap{flex:1; min-width:0;}
  .route-remove-btn{flex-shrink:0; width:26px; height:26px; background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:0.75rem; border-radius:6px;}
  .route-remove-btn:hover{color:var(--destructive); background:var(--bg);}
  .route-actions{display:flex; gap:8px; margin-top:2px; flex-wrap:wrap;}

  /* ---------- Amount calculator popover ---------- */
  .amt-wrap{position:relative; display:flex; align-items:stretch; gap:6px;}
  .amt-wrap input{flex:1; min-width:0;}
  .calc-btn{flex-shrink:0; width:36px; border:1px solid var(--border); border-radius:9px; background:var(--card); cursor:pointer; font-size:0.9375rem; transition:background-color .15s, border-color .15s;}
  .calc-btn:hover{background:var(--bg); border-color:var(--ink-faint);}
  .calc-panel{
    position:absolute; top:calc(100% + 5px); right:0; z-index:30; width:216px;
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow-pop); padding:10px;
  }
  .calc-screen{
    font-family:var(--mono, monospace); font-size:1rem; text-align:right; padding:8px 10px;
    background:var(--bg); border-radius:8px; margin-bottom:8px; word-break:break-all; min-height:20px;
  }
  .calc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
  .calc-key{padding:9px 0; border:1px solid var(--border); border-radius:8px; background:var(--card); font-size:0.8438rem; cursor:pointer; color:var(--ink); transition:background-color .12s;}
  .calc-key:hover{background:var(--bg);}
  .calc-key.op{color:var(--accent); font-weight:600;}
  .calc-actions{display:flex; gap:6px; margin-top:8px;}
  .calc-actions .btn{flex:1;}

  /* ---------- Flight legs builder ---------- */
  .leg-row{display:flex; align-items:center; gap:6px; margin-bottom:7px;}
  .leg-num{width:16px; flex-shrink:0; font-size:0.6562rem; font-weight:700; color:var(--ink-faint); font-family:var(--mono); text-align:center;}
  .leg-row input.leg-date{width:130px; flex-shrink:0; padding:8px 8px; font-size:0.7812rem;}
  .leg-from, .leg-to{flex:1; min-width:0;}
  .leg-arrow{flex-shrink:0; color:var(--ink-faint); font-size:0.75rem;}
  .detail-legs{grid-column:1/-1; margin-top:4px; padding-top:10px; border-top:1px solid var(--border);}
  .detail-leg-row{display:flex; justify-content:space-between; gap:12px; padding:5px 0; font-size:0.8125rem; color:var(--ink);}
  .detail-leg-row .dl-date{font-family:var(--mono); color:var(--ink-soft); flex-shrink:0;}
  .field textarea{resize:vertical; min-height:44px;}
  .fx-row{display:flex; align-items:center; gap:8px;}
  .route-row{display:flex; align-items:center; gap:8px;}
  .route-row input{flex:1; min-width:0;}
  .swap-btn{flex-shrink:0; width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--card); cursor:pointer; font-size:0.9375rem; color:var(--ink-soft); transition:transform 150ms var(--ease-out), color 120ms ease, border-color 120ms ease;}
  .swap-btn:hover{color:var(--accent); border-color:var(--accent);}
  .swap-btn:active{transform:scale(0.9) rotate(180deg);}
  .suggest-btn{
    margin-top:7px; display:inline-block; font-family:var(--mono); font-size:0.6875rem; color:var(--accent);
    background:var(--accent-soft); border:1px dashed #C9C9F3; border-radius:20px; padding:5px 11px; cursor:pointer;
    transition:border-style 120ms ease, transform 100ms var(--ease-out);
  }
  .suggest-btn:hover{border-style:solid;}
  .suggest-btn:active{transform:scale(0.97);}
  .fx-status{font-family:var(--mono); font-size:0.6562rem; white-space:nowrap;}
  .fx-status.ok{color:var(--accent);} .fx-status.pending{color:var(--ink-faint);} .fx-status.err{color:var(--warn);}
  .modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:16px;}
  .detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; font-size:0.7812rem; margin-bottom:16px;}
  .detail-grid .l{font-size:0.625rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); font-weight:600;}
  .detail-grid .v{margin-top:2px;}
  .detail-grid .v.big{font-family:var(--mono); font-size:1rem; font-weight:700; color:var(--accent);}

  /* ---------- Stats / Overview ---------- */
  .stats-grid{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
  @media(max-width:760px){ .stats-grid{grid-template-columns:1fr;} }
  .panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-card);}
  .panel h3{font-size:0.7812rem; margin:0 0 16px; font-weight:700; color:var(--ink);}
  .panel-title-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px;}
  .panel-title-row h3{margin:0;}
  .donut-row{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
  .donut-row svg{flex-shrink:0;}
  .legend-list{flex:1; min-width:170px;}
  .clickable-row{cursor:pointer;}
  .legend-row{display:flex; align-items:center; gap:9px; padding:7px 0; font-size:0.7812rem; border-radius:8px; transition:background-color .12s;}
  .clickable-row .legend-row:hover, .legend-row.clickable-row:hover{background:var(--bg);}
  .legend-row .sw{width:8px; height:8px; border-radius:2px; flex-shrink:0;}
  .legend-row .lbl{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
  .legend-row .amt{font-family:var(--mono); font-size:0.7188rem; color:var(--ink-soft); white-space:nowrap; flex-shrink:0;}
  .bar-row{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:0.75rem;}
  .bar-row .lbl{width:100px; flex-shrink:0; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .bar-track{flex:1; height:8px; border-radius:20px; background:var(--bg); overflow:hidden;}
  .bar-fill{height:100%; border-radius:20px; transition:width .8s var(--ease-out);}
  .bar-row .amt{font-family:var(--mono); font-size:0.6875rem; color:var(--ink-soft); min-width:76px; text-align:right; white-space:nowrap; flex-shrink:0;}
  .expand-detail{display:none; margin:2px 0 8px 0; padding:8px 10px; background:var(--bg); border-radius:8px; border:1px solid var(--border-soft);}
  .expand-detail.open{display:block;}
  .expand-detail .ex-row{display:flex; justify-content:space-between; font-size:0.75rem; padding:3px 0; color:var(--ink-soft);}

  /* ---------- Overview Highlights (expandable rows) ---------- */
  .hi-row{display:flex; align-items:center; justify-content:space-between; padding:11px 4px; border-radius:8px; cursor:pointer; gap:16px; flex-wrap:wrap;}
  .hi-row:hover{background:var(--bg);}
  .hi-row-main{display:flex; align-items:baseline; gap:10px; min-width:0;}
  .hi-label{font-size:0.7812rem; font-weight:600; color:var(--ink); white-space:nowrap;}
  .hi-value{font-family:var(--mono); font-size:0.875rem; font-weight:700; color:var(--accent);}
  .hi-sub{display:flex; align-items:center; gap:5px; font-size:0.6875rem; color:var(--ink-faint); white-space:nowrap;}
  .hi-sub .chev-mini{width:11px; height:11px; transition:transform 200ms var(--ease-out);}
  .hi-row.open .hi-sub .chev-mini{transform:rotate(90deg);}
  #overviewHighlights > div:not(:last-child){border-bottom:1px solid var(--border-soft);}
  #overviewHighlights .expand-detail{margin:0 4px 10px;}
  .expand-detail .ex-row b{color:var(--ink); font-weight:600;}
  .expand-detail .ex-empty{font-size:0.75rem; color:var(--ink-faint); font-style:italic;}
  .daily-chart{display:flex; align-items:flex-end; gap:3px; height:110px; overflow-x:auto; padding-top:8px;}
  .daily-bar-wrap{flex:0 0 auto; cursor:pointer;}
  .daily-bar{width:10px; background:var(--accent); border-radius:2px 2px 0 0; min-height:2px; transition:background-color .12s;}
  .daily-bar-wrap:hover .daily-bar{background:var(--accent-ink);}
  .daily-chart-empty{color:var(--ink-faint); font-size:0.8125rem; font-style:italic;}

  /* ---------- City route (Stats \u2192 Cities visited) ---------- */
  .route-track{display:flex; align-items:flex-start; overflow-x:auto; padding:8px 2px 12px;}
  .route-stop{
    display:flex; flex-direction:column; align-items:center; flex:0 0 auto; width:90px; flex-shrink:0;
    opacity:0; transform:translateY(6px) scale(.92); animation:route-stop-in 420ms var(--ease-out) forwards;
    animation-delay:calc(var(--i) * 110ms);
  }
  @keyframes route-stop-in{ to{opacity:1; transform:translateY(0) scale(1);} }
  .route-dot{
    width:26px; height:26px; border-radius:50%; background:var(--accent); color:#fff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.6875rem; font-weight:700;
    box-shadow:0 0 0 4px var(--accent-soft);
  }
  .route-city{margin-top:8px; font-size:0.75rem; font-weight:700; color:var(--ink); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:90px;}
  .route-date{font-family:var(--mono); font-size:0.625rem; color:var(--ink-faint); margin-top:2px; white-space:nowrap;}
  .route-line{flex:1 1 34px; min-width:34px; height:26px; position:relative; margin:0 -4px;}
  .route-line-fill{
    position:absolute; top:12px; left:0; right:0; height:2px; background:var(--accent); width:0%;
    animation:route-line-in 500ms var(--ease-out) forwards; animation-delay:calc(var(--i) * 110ms + 70ms);
  }
  @keyframes route-line-in{ to{width:100%;} }
  @media(prefers-reduced-motion: reduce){
    .route-stop{animation:none; opacity:1; transform:none;}
    .route-line-fill{animation:none; width:100%;}
  }
  .avg-line{font-family:var(--mono); font-size:0.6875rem; color:var(--ink-soft); margin-bottom:6px;}
  .daily-list{margin-top:14px; border-top:1px solid var(--border-soft);}
  .daily-list-row{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border-soft); font-size:0.7812rem; cursor:pointer;}
  .daily-list-row .d-date{font-family:var(--mono); color:var(--ink-soft); width:100px;}
  .daily-list-row .d-count{flex:1; color:var(--ink-faint); font-size:0.7188rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .daily-list-row .d-amt{font-family:var(--mono); font-weight:600; white-space:nowrap; flex-shrink:0;}

  /* ---------- Settings (collapsible sections) ---------- */
  .settings-section{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:11px; box-shadow:var(--shadow-card); overflow:hidden;}
  .settings-section h3{font-size:0.8438rem; font-weight:700; margin:0; flex:1;}
  .settings-head{display:flex; align-items:center; gap:10px; padding:17px 20px; cursor:pointer; user-select:none;}
  .settings-head .chev{width:13px; height:13px; color:var(--ink-faint); transition:transform 200ms var(--ease-out); flex-shrink:0;}
  .settings-section.collapsed .settings-head .chev{transform:rotate(-90deg);}
  .settings-body{display:grid; grid-template-rows:1fr; transition:grid-template-rows 280ms var(--ease-out); border-top:1px solid var(--border-soft);}
  .settings-section.collapsed .settings-body{grid-template-rows:0fr; border-top-color:transparent;}
  .settings-body-inner{overflow:hidden; min-height:0;}
  .settings-pad{padding:16px 20px 20px;}
  .settings-section .desc{font-size:0.75rem; color:var(--ink-soft); margin-bottom:14px; line-height:1.55;}
  .settings-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid var(--border);}
  .settings-row:first-of-type{border-top:none;}
  .row-actions{display:flex; align-items:center; gap:6px; flex-shrink:0;}

  /* Flat, grouped list — deliberately not another nested card (the panel
     around it already is one): a plain header row plus divided rows,
     the same visual language as .settings-row above. */
  .visit-group{margin-bottom:2px;}
  .visit-group-head{display:flex; align-items:center; justify-content:space-between; padding:11px 2px; cursor:pointer; user-select:none; border-top:1px solid var(--border);}
  .visit-group:first-child .visit-group-head{border-top:none;}
  .visit-group-head .name{font-weight:600; font-size:0.7812rem; color:var(--ink); display:flex; align-items:center; gap:8px;}
  .visit-group-head .count{font-size:0.7188rem; color:var(--ink-faint); font-family:var(--mono);}
  .visit-group-head .chev{font-size:0.625rem; color:var(--ink-faint); display:inline-block; transition:transform 200ms var(--ease-out);}
  .visit-group.collapsed .visit-group-head .chev{transform:rotate(-90deg);}
  .visit-group-body{display:grid; grid-template-rows:1fr; transition:grid-template-rows 260ms var(--ease-out);}
  .visit-group.collapsed .visit-group-body{grid-template-rows:0fr;}
  .visit-group-body-inner{overflow:hidden; min-height:0; padding-left:16px;}
  .trip-list-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid var(--border); gap:10px;}
  .trip-list-row .info{flex:1; min-width:0;}
  .drag-handle{cursor:grab; color:var(--ink-faint); font-size:0.9375rem; padding:4px 2px; flex-shrink:0; letter-spacing:-2px; line-height:1;}
  .drag-handle:active{cursor:grabbing;}
  .drag-handle.disabled{cursor:default; opacity:.35;}
  .trip-list-row.dragging{opacity:.4;}
  .trip-list-row.drag-over{border-top:2px solid var(--accent);}
  .trip-sort-actions{margin-bottom:10px;}

  /* ---------- Header trip-name quick switcher ---------- */
  .trip-name-wrap{position:relative;}
  .trip-name-btn{
    display:flex; align-items:center; gap:6px; background:none; border:none; cursor:pointer;
    font-size:0.8125rem; color:var(--ink-soft); padding-left:14px; padding-right:4px; border-left:1px solid var(--border);
    font-family:inherit; max-width:480px; transition:color 120ms ease;
  }
  .trip-name-btn span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .trip-name-btn .chev{font-size:0.5625rem; color:var(--ink-faint); flex-shrink:0; transition:transform 150ms var(--ease-out);}
  .trip-name-btn:hover{color:var(--ink);}
  .trip-name-btn.open .chev{transform:rotate(180deg);}
  .trip-switcher-panel{
    position:absolute; top:calc(100% + 8px); left:14px; z-index:25; min-width:240px; max-width:320px;
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    box-shadow:var(--shadow-pop); padding:6px; display:none; max-height:320px; overflow-y:auto;
  }
  .trip-switcher-panel.open{display:block;}
  .trip-switcher-item{display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:0.8125rem; color:var(--ink);}
  .trip-switcher-item:hover{background:var(--accent-soft);}
  .trip-switcher-item.current{background:var(--accent-soft); color:var(--accent); font-weight:600;}
  .trip-switcher-item .ts-name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .trip-switcher-item .ts-check{font-size:0.75rem; color:var(--accent); flex-shrink:0; opacity:0; width:12px;}
  .trip-switcher-item.current .ts-check{opacity:1;}
  .trip-switcher-item.current .ts-edit{color:var(--accent);}
  .ts-edit{background:none; border:none; cursor:pointer; color:var(--ink-faint); padding:4px; border-radius:6px; flex-shrink:0; opacity:0; transition:opacity 120ms ease, background-color 120ms ease, color 120ms ease;}
  .ts-edit svg{width:13px; height:13px; display:block;}
  .trip-switcher-item:hover .ts-edit{opacity:1;}
  .ts-edit:hover{background:var(--card); color:var(--ink);}
  .trip-switcher-footer{border-top:1px solid var(--border); margin-top:4px; padding-top:6px;}
  .trip-switcher-footer button{width:100%; text-align:left; background:none; border:none; padding:8px 10px; font-size:0.7812rem; color:var(--accent); cursor:pointer; border-radius:8px; font-family:var(--mono);}
  .trip-switcher-footer button:hover{background:var(--accent-soft);}
  .trip-list-row:first-of-type{border-top:none;}
  .trip-list-row .info{font-size:0.7812rem;}
  .trip-list-row .info .name{font-weight:600;}
  .trip-list-row .info .meta{color:var(--ink-faint); font-size:0.6875rem; font-family:var(--mono);}
  .tag-manager-group{margin-bottom:16px;}
  .tag-manager-group:last-child{margin-bottom:0;}
  .tag-manager-group .tg-label{font-size:0.6875rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
  .tag-pill-removable{display:inline-flex; align-items:center; gap:6px; font-size:0.7188rem; padding:5px 6px 5px 12px; border-radius:20px; background:var(--bg); border:1px solid var(--border-soft); margin:0 6px 6px 0; color:var(--ink-soft);}
  .tag-pill-removable button{background:var(--card); border:1px solid var(--border); border-radius:50%; width:16px; height:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-faint); font-size:0.5625rem; padding:0; transition:all .12s;}
  .tag-pill-removable button:hover{color:#C4472B; background:#FDF1ED; border-color:#F3C9BB;}

  /* ---------- Command palette ---------- */
  .palette-overlay{position:fixed; inset:0; background:rgba(15,15,20,.4); backdrop-filter:blur(2px); display:none; align-items:flex-start; justify-content:center; z-index:50; padding-top:14vh;}
  .palette-overlay.open{display:flex;}
  .palette{background:var(--card); width:100%; max-width:560px; border-radius:18px; margin:0 16px; box-shadow:var(--shadow-pop); overflow:hidden; animation:palette-in 220ms var(--ease-out);}
  @keyframes palette-in{from{opacity:0; transform:scale(.97) translateY(-4px);} to{opacity:1; transform:scale(1) translateY(0);}}
  @media (prefers-reduced-motion: reduce){ .palette{animation:fade-in 120ms ease;} }
  .palette-input{width:100%; border:none; border-bottom:1px solid var(--border-soft); padding:16px 18px; font-size:0.9375rem; outline:none; background:transparent; color:var(--ink);}
  .palette-body{max-height:360px; overflow-y:auto; padding:8px;}
  .palette-group-label{font-size:0.6562rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:700; padding:10px 10px 4px;}
  .palette-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; cursor:pointer; font-size:0.8438rem;}
  .palette-item .ic{width:16px; text-align:center; color:var(--ink-faint); font-size:0.75rem;}
  .palette-item .lbl{flex:1;}
  .palette-item.on-trip{background:var(--accent-soft);}
  .palette-item.on-trip .ic{color:var(--accent);}
  .palette-item:hover, .palette-item.kbd-hi{background:var(--accent-soft);}
  .palette-empty{padding:16px; text-align:center; color:var(--ink-faint); font-size:0.7812rem;}
  .palette-foot{border-top:1px solid var(--border-soft); padding:9px 14px; font-size:0.6562rem; color:var(--ink-faint); display:flex; gap:14px; justify-content:space-between;}
  .palette-foot .hint{opacity:.7;}

  /* ---------- Toast ---------- */
  .toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(10px); z-index:60; background:var(--ink); color:#fff; padding:11px 18px; border-radius:20px; font-size:0.8125rem; font-weight:500; opacity:0; pointer-events:none; transition:opacity 180ms ease, transform 180ms var(--ease-out); display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-pop);}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .toast .dot{width:6px; height:6px; border-radius:50%; background:var(--positive); flex-shrink:0;}
  .toast .dot.err{background:var(--destructive);}

  @media(max-width:640px){
    .field-grid{grid-template-columns:1fr;}
    .kpi-row{grid-template-columns:repeat(2,1fr);}
    .kpi-row.n5{grid-template-columns:repeat(2,1fr);}
    table.items{font-size:0.75rem;}
    /* Was nth-child(2,3,4,6) before, which silently hid the wrong column
       (Your share) on any table without the optional /night/pax column —
       hiding by an explicit class instead of position is correct
       regardless of which optional columns a given table has. */
    table.items .mobile-hide{display:none;}
    .detail-grid{grid-template-columns:1fr;}
    .page{padding:18px 20px 40px 20px;}
    header.top .trip-name{max-width:60vw;}
  }

  /* =====================================================================
   * Calendar tab
   * Motion budget, by design: month changes slide+fade (purpose: which way
   * time moved; 220ms), the detail drawer opens as a grid-rows transition
   * (retargets cleanly if tapped twice), and a jumped-to trip pulses a ring
   * twice so it's findable. Deliberately NOT animated: chips on render (they
   * re-render on every save elsewhere in the app, and it's data being read),
   * and today's marker (a filled circle already says "today").
   * ===================================================================== */
  .cal-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
  .cal-nav{display:flex; align-items:center; gap:4px; position:relative;}
  .cal-nav-btn{
    width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-soft); padding:0;
    transition:background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms var(--ease-out);
  }
  .cal-nav-btn svg{width:16px; height:16px;}
  .cal-nav-btn:active{transform:scale(.92);}
  .cal-month-label{
    min-width:176px; text-align:center; padding:7px 12px; border:none; border-radius:var(--radius-sm); background:none; cursor:pointer;
    font:inherit; font-size:1.0625rem; font-weight:800; letter-spacing:-0.02em; color:var(--ink);
    transition:background-color 120ms ease, transform 120ms var(--ease-out);
  }
  .cal-month-label:active{transform:scale(.97);}
  .cal-month-label::after{
    content:''; display:inline-block; width:9px; height:6px; margin-left:8px; vertical-align:2px; opacity:.55;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' stroke='%2315151A' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    transition:transform 160ms var(--ease-out);
  }
  .cal-month-label[aria-expanded="true"]::after{transform:rotate(180deg);}
  .cal-today-btn{
    height:34px; margin-left:6px; padding:0 13px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--card);
    font:inherit; font-size:0.7812rem; font-weight:600; color:var(--ink-soft); cursor:pointer;
    transition:background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms var(--ease-out);
  }
  .cal-today-btn:active{transform:scale(.95);}
  @media (hover:hover) and (pointer:fine){ .cal-today-btn:hover{background:var(--bg); color:var(--ink); border-color:var(--ink-faint);} }

  /* Month / year quick-picker (opens from the month label) */
  .cal-picker{
    position:absolute; top:calc(100% + 8px); left:0; z-index:30; width:min(272px, calc(100vw - 32px)); padding:12px;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-pop);
    transform-origin:top left; animation:cal-picker-in 160ms var(--ease-out);
  }
  .cal-picker[hidden]{display:none;}
  @keyframes cal-picker-in{from{opacity:0; transform:scale(.96) translateY(-4px);} to{opacity:1; transform:none;}}
  @media (prefers-reduced-motion: reduce){ .cal-picker{animation:none;} }
  .cal-picker-head{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:10px;}
  .cal-picker-title{
    flex:1; padding:7px 8px; border:none; border-radius:var(--radius-sm); background:none; cursor:pointer;
    font:inherit; font-size:0.875rem; font-weight:800; letter-spacing:-0.01em; color:var(--ink); text-align:center;
  }
  .cal-picker-title.static{cursor:default;}
  .cal-picker-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px;}
  .cal-picker-cell{
    padding:10px 0; border:1px solid transparent; border-radius:var(--radius-sm); background:none; cursor:pointer;
    font:inherit; font-size:0.8125rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
    transition:background-color 120ms ease, color 120ms ease, transform 120ms var(--ease-out);
  }
  .cal-picker-cell:active{transform:scale(.94);}
  .cal-picker-cell.now{border-color:var(--border); color:var(--accent);}
  .cal-picker-cell.on{background:var(--accent); border-color:var(--accent); color:#fff;}
  @media (hover:hover) and (pointer:fine){
    .cal-picker-title:not(.static):hover, .cal-picker-cell:not(.on):hover{background:var(--bg);}
  }
  .cal-picker button:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  @media (hover:hover) and (pointer:fine){
    .cal-nav-btn:hover{background:var(--bg); color:var(--ink); border-color:var(--ink-faint);}
    .cal-month-label:hover{background:var(--bg);}
  }
  #calTripJump{
    font:inherit; font-size:0.7812rem; font-weight:600; color:var(--ink-soft); background:var(--card);
    border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 12px; cursor:pointer;
    transition:border-color 120ms ease, box-shadow 120ms ease;
  }
  #calTripJump:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}

  .cal-panel{padding:16px 14px 6px;}
  .cal-weekdays{display:grid; grid-template-columns:repeat(7,1fr); padding-bottom:8px;}
  .cal-weekdays span{text-align:center; font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft);}
  .cal-grid-clip{overflow:hidden;}
  .cal-weeks{display:flex; flex-direction:column;}
  .cal-weeks.slide-next{animation:cal-slide-next 150ms var(--ease-out);}
  .cal-weeks.slide-prev{animation:cal-slide-prev 150ms var(--ease-out);}
  @keyframes cal-slide-next{from{opacity:0; transform:translateX(8px);} to{opacity:1; transform:translateX(0);}}
  @keyframes cal-slide-prev{from{opacity:0; transform:translateX(-8px);} to{opacity:1; transform:translateX(0);}}
  @media (prefers-reduced-motion: reduce){
    .cal-weeks.slide-next, .cal-weeks.slide-prev{animation:cal-fade 160ms ease;}
    @keyframes cal-fade{from{opacity:0;} to{opacity:1;}}
  }

  .cal-week{display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--border-soft);}
  .cal-day{
    position:relative; min-height:92px; padding:6px 0 8px; text-align:center; cursor:pointer;
    transition:background-color 120ms ease; -webkit-tap-highlight-color:transparent;
  }
  .cal-day:active{background:var(--accent-soft);}
  @media (hover:hover) and (pointer:fine){ .cal-day:hover{background:var(--bg);} .cal-day.selected:hover{background:var(--accent-soft);} }
  .cal-weekdays, .cal-week{grid-template-columns:repeat(7,minmax(0,1fr));}
  .cal-day{min-width:0;}
  .cal-day.out{background:color-mix(in srgb, var(--bg) 60%, transparent);}
  .cal-day.out .cal-daynum{color:#7B7B87;}
  .cal-day.out .cal-chip, .cal-day.out .cal-cust{opacity:.55;}
  .cal-day{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
  .cal-day.selected{background:var(--accent-soft);}
  /* range of the open add/edit form: a faint tint that stays after a drag */
  .cal-day.form-range{background:color-mix(in srgb, var(--accent) 9%, var(--card));}
  /* drag-to-select preview (declared after the hover rules so it wins while the pointer is over the cell) */
  .cal-day.drag-range{background:color-mix(in srgb, var(--accent) 13%, var(--card));}
  .cal-day.drag-range.drag-edge{background:color-mix(in srgb, var(--accent) 24%, var(--card));}
  .cal-day.drag-range.drag-edge .cal-daynum{color:var(--accent);}
  body.cal-dragging, body.cal-dragging *{cursor:grabbing !important; -webkit-user-select:none; user-select:none;}
  .cal-hint{margin:10px 2px 0; font-size:.75rem; color:var(--ink-soft); text-align:center;}
  .cal-hint .hint-touch{display:none;}
  @media (hover:none){ .cal-hint .hint-mouse{display:none;} .cal-hint .hint-touch{display:inline;} }
  .cal-daynum{
    display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%;
    font-size:0.7812rem; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
  }
  .cal-day.holiday .cal-daynum{color:var(--destructive);}
  .cal-day.today .cal-daynum{background:var(--accent); color:#fff; font-weight:700;}
  .cal-day.today.holiday .cal-daynum{background:var(--destructive); color:#fff;}

  /* Everything below the trip lanes. Trip chips sit in fixed lanes directly
     under the date so a trip's bar lines up from cell to cell; the variable
     stuff (city, holiday, custom items) lives underneath where it can't
     push a bar out of alignment. */
  .cal-day-info{display:flex; flex-direction:column; gap:2px; margin-top:4px; padding:0 3px;}
  .cal-city{
    font-size:.6875rem; font-weight:600; line-height:1.3; color:var(--ink-soft);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cal-city::before{
    content:''; display:inline-block; width:8px; height:9px; margin-right:3px; vertical-align:-1px; background:currentColor; opacity:.7;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22s7-6.2 7-12a7 7 0 10-14 0c0 5.8 7 12 7 12zm0-9.2a2.8 2.8 0 110-5.6 2.8 2.8 0 010 5.6z'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 22s7-6.2 7-12a7 7 0 10-14 0c0 5.8 7 12 7 12zm0-9.2a2.8 2.8 0 110-5.6 2.8 2.8 0 010 5.6z'/></svg>") center/contain no-repeat;
  }
  .cal-holiday-label{
    font-size:.6875rem; font-weight:700; line-height:1.25; color:var(--destructive);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* Custom items sit in their own lanes under the trip bars. Like a trip, a
     multi-day item is a run of per-cell chips (square where it continues,
     rounded at its true start/end) so it reads as one bar; the title is a
     single label laid across the whole run of the week. */
  .cal-cust-stack.first{margin-top:5px;}
  .cal-cust, .cal-cust-spacer{height:16px; margin-top:2px;}
  .cal-cust{
    --cc:var(--accent);
    position:relative; text-align:left;
    color:color-mix(in srgb, var(--cc) 58%, #000); background:color-mix(in srgb, var(--cc) 17%, #fff);
  }
  .cal-cust.start{margin-left:5px; border-radius:5px 0 0 5px;}
  .cal-cust.end{margin-right:5px; border-radius:0 5px 5px 0;}
  .cal-cust.start.end{border-radius:5px;}
  .cal-cust-label{
    position:absolute; left:6px; top:0; z-index:2; width:calc(var(--span,1) * 100% - 12px);
    font-size:.6875rem; font-weight:700; line-height:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none;
  }
  .cal-cust-more{font-size:.625rem; font-weight:600; color:var(--ink-faint);}

  .cal-chip-stack{margin-top:5px;}
  .cal-chip, .cal-chip-spacer{height:16px; margin-top:2px;}
  .cal-chip{
    position:relative; padding:0 6px; text-align:left; font-size:.6875rem; font-weight:700; line-height:16px;
    color:var(--cink); background:var(--cbg); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer;
  }
  .cal-chip.start{margin-left:5px; border-radius:6px 0 0 6px;}
  .cal-chip.end{margin-right:5px; border-radius:0 6px 6px 0;}
  .cal-chip.start.end{border-radius:6px;}
  .cal-chip-more{margin-top:2px; font-size:.625rem; font-weight:600; color:var(--ink-faint);}
  /* Ring overlay pulsed on a jumped-to trip — opacity only, so it composites. */
  .cal-chip.flash::after{
    content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px var(--cline);
    animation:cal-flash 700ms var(--ease-out) 2;
  }
  @keyframes cal-flash{0%{opacity:0;} 30%{opacity:1;} 100%{opacity:0;}}
  @media (prefers-reduced-motion: reduce){ .cal-chip.flash::after{animation:none; opacity:1;} }

  .cal-detail-wrap{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 240ms var(--ease-out), opacity 200ms var(--ease-out);}
  .cal-detail-wrap.open{grid-template-rows:1fr; opacity:1;}
  .cal-detail{overflow:hidden; min-height:0;}
  .cal-detail-inner{margin-top:12px; padding:16px 18px 8px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card);}
  .cal-detail-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;}
  .cal-detail-date{font-size:0.8125rem; font-weight:700; letter-spacing:-0.01em;}
  .cal-detail-row{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--border-soft);}
  .cal-detail-dot{width:8px; height:8px; border-radius:3px; flex-shrink:0;}
  .cal-detail-name{font-size:0.8125rem; font-weight:600;}
  .cal-detail-sub{margin-left:auto; font-size:0.75rem; color:var(--ink-faint);}
  .cal-detail-row.clickable{cursor:pointer; transition:opacity 120ms ease;}
  .cal-detail-row.clickable:active{opacity:.6;}
  .cal-detail-row .cal-detail-name{min-width:0; overflow-wrap:anywhere;}
  .cal-row-actions{margin-left:auto; display:flex; gap:2px; flex-shrink:0;}
  .cal-icon-btn{
    width:30px; height:30px; display:flex; align-items:center; justify-content:center; padding:0; border:none; border-radius:8px;
    background:none; color:var(--ink-faint); cursor:pointer; transition:background-color 120ms ease, color 120ms ease;
  }
  .cal-icon-btn svg{width:15px; height:15px;}
  .cal-icon-btn:active{background:var(--bg);}
  @media (hover:hover) and (pointer:fine){ .cal-icon-btn:hover{background:var(--bg); color:var(--ink);} .cal-icon-btn.danger:hover{color:var(--destructive);} }

  .cal-form{display:flex; flex-direction:column; gap:12px; padding:14px 0 14px; border-top:1px solid var(--border-soft);}
  .cal-form-label{display:block; font-size:0.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:6px;}
  .cal-form-dates{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .cal-form-dates > div{min-width:0;}
  @media (max-width:440px){ .cal-form-dates{grid-template-columns:1fr;} }
  .cal-range-sub{display:block; margin-top:1px; font-size:0.6875rem; font-weight:500; color:var(--ink-soft);}
  .cal-form input[type=text], .cal-form input[type=date]{
    width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:9px; font-size:0.8438rem; background:var(--card); color:var(--ink);
    transition:border-color .15s, box-shadow .15s;
  }
  .cal-form input[type=text]:focus, .cal-form input[type=date]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .cal-swatches{display:flex; flex-wrap:wrap; gap:9px;}
  .cal-swatch{
    width:26px; height:26px; padding:0; border-radius:50%; cursor:pointer; background:var(--sw);
    border:2px solid transparent; transition:transform 120ms var(--ease-out), border-color 120ms ease, box-shadow 120ms ease;
  }
  .cal-swatch:active{transform:scale(.9);}
  /* selected = colour ring, white gap, colour disc */
  .cal-swatch.on{border-color:var(--sw); box-shadow:inset 0 0 0 2px #fff;}
  .cal-swatch:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .cal-form-actions{display:flex; gap:8px;}

  @media (max-width:640px){
    .cal-toolbar{gap:10px;}
    .cal-month-label{min-width:0; font-size:1rem; padding:7px 8px;}
    #calTripJump{flex:1; min-width:0;}
    .cal-panel{padding:12px 4px 4px;}
    .cal-weekdays span{font-size:.625rem; letter-spacing:.03em;}
    .cal-day{min-height:70px; padding:4px 0 6px;}
    .cal-daynum{width:24px; height:24px; font-size:0.75rem;}
    .cal-day-info{padding:0 2px; gap:1px; margin-top:3px;}
    .cal-city, .cal-cust-more{font-size:.625rem;}
    .cal-city::before{display:none;}
    /* Narrow cells: let a holiday name wrap to two lines instead of
       truncating to a few letters. */
    .cal-holiday-label{font-size:.625rem; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:clip;}
    .cal-cust, .cal-cust-spacer{height:13px;}
    .cal-cust.start{margin-left:3px; border-radius:4px 0 0 4px;}
    .cal-cust.end{margin-right:3px; border-radius:0 4px 4px 0;}
    .cal-cust.start.end{border-radius:4px;}
    .cal-cust-label{left:4px; width:calc(var(--span,1) * 100% - 8px); font-size:.625rem; line-height:.8125rem;}
    .cal-today-btn{margin-left:2px; padding:0 10px;}
    #calTripJump{flex:1 1 100%;}   /* own row, so it isn't squeezed by the Today button */
    .cal-icon-btn{width:36px; height:36px;}
    .cal-swatch{width:32px; height:32px;}
    .cal-chip, .cal-chip-spacer{height:13px; margin-top:2px;}
    .cal-chip{font-size:.625rem; line-height:13px; padding:0 4px;}
    .cal-chip.start{margin-left:3px;}
    .cal-chip.end{margin-right:3px;}
    .cal-detail-inner{padding:14px 14px 6px;}
  }

  /* iOS zoom guard for the custom-item title field (see MOBILE-ONLY FIXES below) */
  @media (max-width:780px){ .cal-form input[type=text], .cal-form input[type=date]{font-size:1rem;} }

  /* =====================================================================
   * MOBILE-ONLY FIXES — isolated on purpose
   *
   * Everything below is gated behind a max-width (phones/small tablets)
   * or a touch-specific media feature. No selector's base/desktop rule is
   * edited anywhere in this file to get these — each fix lives in its own
   * @media block, so desktop rendering at ≥781px is provably unaffected.
   * Delete this section to fully revert every change in it.
   * ===================================================================== */
  @media (max-width:780px){
    /* iOS Safari auto-zooms the whole page when a focused input's computed
       font-size is under 16px. Every text-entry field is bumped to exactly
       16px here — only here — so desktop's smaller sizing (no zoom issue,
       since it's mouse/keyboard-driven) is untouched. */
    .field input, .field select, .field textarea,
    .control-bar input[type=text], .control-bar select,
    .chip-input, .leg-row input.leg-date,
    .palette-input, #gate input{
      font-size:1rem;
    }

    /* A ledger table wider than the screen — even after the column-hiding
       rule above — now scrolls horizontally inside its own card instead of
       being silently clipped (overflow:hidden) or forcing the whole page
       to scroll sideways. */
    .cat-body-inner{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;}
    table.items{min-width:360px;}

    /* Small pointer-era controls bumped toward a comfortable ~44px touch
       target (Apple/Google guidance) without changing their footprint on
       desktop, where they're sized for a mouse cursor. */
    .route-remove-btn{width:36px; height:36px; font-size:0.875rem;}
    .swap-btn{width:42px; height:42px;}
    .ts-edit{padding:9px; opacity:1;}
    .drag-handle{padding:10px 8px;}
    .chip{padding:8px 14px;}
    .panel-collapse, .globe-panel-collapse{width:32px; height:32px;}

    /* The search bar's label is the first thing to drop when space is
       tight — the icon alone is still a clear, tappable affordance, and
       the header has less risk of wrapping onto two lines. */
    .search-trigger .label-text{display:none;}
    .search-trigger{padding:9px 12px;}

    /* Bottom-anchored fixed UI, padded clear of the iOS home-indicator /
       Android gesture bar. env() resolves to 0 on devices without one, so
       this is a no-op anywhere it isn't actually needed. */
    .fab-menu{bottom:calc(26px + env(safe-area-inset-bottom, 0px));}
    .toast{bottom:calc(28px + env(safe-area-inset-bottom, 0px));}
    .modal{padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));}
    #gate{padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));}

    /* Removes the persistent grey tap-flash some Android/iOS engines
       paint on every tap, and the interaction lag some older engines add
       before a tap registers. */
    button, .btn, .chip, .tabs button, .pill, a{
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
    }

    /* Last-resort safety net: nothing on the page should ever be able to
       force it to scroll sideways. */
    html, body{overflow-x:hidden;}
  }

  @media (max-width:480px){
    /* Extra-narrow phones (iPhone SE/mini and similar, ~360-390px wide):
       four-per-row KPI/highlight tiles are too cramped even at 2 columns
       of a wider phone's sizing. */
    .kpi{padding:12px 13px;}
    header.top{padding:12px 16px; gap:10px;}
    .tabs-bar{padding:0 16px;}
    .gate-card{padding:30px 24px 26px;}
  }


/* =====================================================================
 * Calendar polish (keyboard focus, hit areas, sticky header, bottom sheet,
 * drag handles, system preferences)
 * ===================================================================== */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.cal-day:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; border-radius:8px;}
.cal-day{transition:background-color 120ms ease, transform 100ms var(--ease-out);}
.cal-day:active{transform:scale(.985);}
/* 44px hit areas, same visual size */
.cal-nav-btn, .cal-today-btn, .cal-month-label{position:relative;}
.cal-nav-btn::before, .cal-today-btn::before, .cal-month-label::before{content:''; position:absolute; inset:-5px;}
.cal-picker-grid{animation:cal-fade 120ms var(--ease-out);}
@keyframes cal-fade{from{opacity:0;} to{opacity:1;}}
/* sticky translucent month header */
.cal-toolbar{position:sticky; top:var(--hdr-h,56px); z-index:9; padding:8px 4px; margin:0 -4px 10px;
  background:color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%);}
/* range handles after a drag */
.cal-handle{position:absolute; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; z-index:3; cursor:ew-resize;
  background:var(--accent); border:2px solid var(--card); box-shadow:0 1px 3px rgba(0,0,0,.28); touch-action:none;}
.cal-handle::before{content:''; position:absolute; inset:-14px;}
.cal-handle.start{left:4px;} .cal-handle.end{right:4px;}
/* toast with an action */
.toast.has-act{pointer-events:auto;}
.toast .act{margin-left:6px; padding:4px 10px; border:0; border-radius:12px; background:rgba(255,255,255,.18); color:#fff; font:inherit; font-weight:700; cursor:pointer;}
/* phones: day detail becomes a bottom sheet */
@media (max-width:640px){
  .cal-detail-wrap{position:fixed; left:0; right:0; bottom:0; z-index:45; display:block; grid-template-rows:none; opacity:1; max-height:62vh;
    padding:0 8px calc(8px + env(safe-area-inset-bottom,0px)); transform:translateY(110%); pointer-events:none;
    transition:transform 240ms cubic-bezier(.32,.72,0,1);}
  .cal-detail-wrap.open{transform:none; pointer-events:auto;}
  .cal-detail{overflow:auto; max-height:calc(62vh - 16px); overscroll-behavior:contain;}
  .cal-detail-inner{margin-top:0; box-shadow:0 -10px 32px rgba(0,0,0,.16);}
  .cal-detail-inner::before{content:''; display:block; width:36px; height:5px; border-radius:3px; background:var(--border); margin:-4px auto 10px;}
  body.cal-sheet-open #sec-calendar{padding-bottom:58vh;}
}
@media (prefers-reduced-motion: reduce){
  .cal-day, .cal-detail-wrap{transition-duration:1ms;} .cal-day:active{transform:none;} .cal-picker-grid{animation:none;}
}
@media (prefers-reduced-transparency: reduce){ .cal-toolbar{background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none;} }
@media (prefers-contrast: more){
  .cal-weekdays span, .cal-hint, .cal-city{color:var(--ink);} .cal-day.out .cal-daynum{color:var(--ink-soft);}
  .cal-cust{box-shadow:inset 0 0 0 1px currentColor;} .cal-week{border-color:var(--ink-soft);}
}


/* =====================================================================
 * Mobile optimisation pass
 *  - scrollable tab strip (Settings was unreachable)
 *  - category filter pills no longer overlap when they wrap
 *  - hero card: no blank gap (flex-basis was being read as a HEIGHT once the
 *    card stacks into a column)
 *  - item tables become two-line cards instead of 5-line squeezed columns
 *  - Stats panels no longer blow out wider than the screen
 *  - single-row header, bigger touch targets
 * ===================================================================== */
#catFilterChips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{display:inline-flex; align-items:center; line-height:1.2;}

@media (max-width:780px){
  .tabs-bar{padding:0 12px;}
  .tabs{max-width:100%; box-sizing:border-box; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;}
  .tabs::-webkit-scrollbar{display:none;}
  .tabs button{flex:0 0 auto; white-space:nowrap; min-height:40px; scroll-snap-align:center;}
  .tabs.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);}
  .tabs.fade-l{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(270deg,#000 calc(100% - 34px),transparent);}
  .tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);}
  .search-trigger{display:none;}                       /* the floating button already does this */
  .stats-grid{grid-template-columns:minmax(0,1fr);}
  .stats-grid > *{min-width:0;}
  .page{padding-bottom:100px;}
  .btn.small, .ts-btn{min-height:36px;}
  .stats-toggle button, [data-v]{min-height:36px;}
  .fab-menu{transition:transform 220ms var(--ease-out), background-color .15s;}
  .fab-menu.away{transform:translateY(96px);}
}
@media (prefers-reduced-motion: reduce){ .fab-menu{transition-duration:1ms;} }

@media (max-width:640px){
  /* header: one compact row */
  header.top{flex-wrap:nowrap; gap:10px;}
  header.top .spacer{display:none;}
  .trip-name-wrap{flex:1 1 auto; min-width:0;}
  .trip-name-btn{max-width:100%;}
  #headerTripName{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .sync-status{margin-left:auto;}

  /* hero: remove the phantom 420px height and tidy the tag rows */
  .hero-main, .hero-stub{flex:0 0 auto; min-width:0; width:100%; box-sizing:border-box;}
  .hero-main{padding:20px 20px 14px;}
  .hero-stub{padding:16px 20px 20px;}
  .hero-tags{gap:10px;}
  .hero-tags .grp{gap:6px;}
  .hero-tags .grp-label{flex:0 0 100%; margin-bottom:1px;}

  /* control bar: search full width, then sort + add, then pills */
  .control-bar{gap:10px;}
  .control-bar input[type=text]{order:0; flex:1 1 100%; width:100%; box-sizing:border-box;}
  .control-bar select{order:1; flex:1 1 0; min-width:0; width:auto;}
  .btn-add-item{order:2; flex:0 0 auto;}
  #catFilterChips{order:3; flex:1 1 100%;}
  .chip{min-height:36px;}

  /* category cards */
  .cat-head{flex-wrap:wrap; gap:6px 12px; padding:14px 16px;}
  .cat-head .totals{align-items:flex-end; margin-left:auto; min-width:0;}
  .cat-body-inner{overflow-x:visible;}

  /* item rows: name on top (actions pinned right), the two money figures below */
  table.items, table.items tbody{display:block; width:100%; min-width:0;}
  table.items thead{display:none;}
  table.items tr.item-row{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; position:relative; padding:12px 16px 12px; border-bottom:1px solid var(--border-soft);}
  table.items tr.item-row:last-child{border-bottom:none;}
  table.items td{padding:0; border:0;}
  table.items td.name{grid-column:1 / -1; padding-right:118px; min-height:36px; display:flex; align-items:center; font-size:0.8438rem; line-height:1.3; overflow-wrap:anywhere;}
  table.items td.num{text-align:left; font-size:0.8125rem;}
  table.items td.num::before{content:attr(data-l); display:block; font-family:var(--sans); font-size:.625rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1px;}
  table.items td.actions{position:absolute; top:6px; right:8px; display:flex; padding:0;}
  table.items td.actions button{width:36px; height:36px; opacity:1; display:flex; align-items:center; justify-content:center;}
  table.items td.actions button svg{width:16px; height:16px;}
}


/* =====================================================================
 * Undo/accessibility/bookings/quick tools/budget
 * ===================================================================== */
[tabindex]:focus-visible, [role="button"]:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
tr.item-row:focus-visible{outline-offset:-2px;}
.cal-book{font-size:.625rem; font-weight:700; line-height:1.3; color:var(--accent-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.quick-add{display:flex; gap:8px; margin:0 0 10px;}
.quick-add input{flex:1; min-width:0; padding:10px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; font-size:.875rem; background:var(--card); color:var(--ink);}
.quick-add input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.bulk-btn.on, body.bulk-on .bulk-btn{background:var(--accent-soft); color:var(--accent-ink);}
tr.item-row.picked{background:var(--accent-soft);}
body.bulk-on tr.item-row{cursor:pointer;}
.bulk-bar{position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:60; display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-pop); max-width:640px; margin:0 auto;}
.bulk-bar span{flex:1; font-size:.8125rem; font-weight:600; min-width:0;}
.bulk-bar select{padding:7px 8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); font:inherit; font-size:.8125rem; max-width:120px;}
.bulk-bar .danger{color:var(--destructive);}
.budget{margin-top:14px;}
.budget-top{display:flex; justify-content:space-between; gap:8px; font-size:.75rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; flex-wrap:wrap;}
.budget-top .over{color:var(--destructive);}
.budget-bar{height:8px; border-radius:99px; background:var(--border-soft); overflow:hidden;}
.budget-bar i{display:block; height:100%; border-radius:99px; background:var(--accent); transition:width 300ms var(--ease-out);}
.budget-bar i.warn{background:var(--warn);} .budget-bar i.over{background:var(--destructive);}
.budget-edit, .budget-set{margin-top:8px; padding:6px 0; border:0; background:none; font:inherit; font-size:.75rem; font-weight:600; color:var(--accent); cursor:pointer; min-height:36px;}
@media (max-width:640px){
  .quick-add{margin-bottom:12px;}
  .bulk-btn{order:2;}
}
@media (prefers-reduced-motion: reduce){ .budget-bar i{transition:none;} }

/* Dark mode */


/* Dark mode: surfaces that used --ink as a fill or hard-coded light colours */


/* Control bar: search/sort/actions on one row, category pills on their own row */
#catFilterChips{order:3; flex:1 1 100%;}
.btn-add-item{margin-left:auto;}
@media (max-width:640px){ .btn-add-item{margin-left:0;} }
@media (max-width:640px){
}


/* Scan receipts */
.qa-attach{display:inline-flex; align-items:center; justify-content:center; min-width:40px; padding:0 10px;}
.scan-status{margin:-4px 0 10px; font-size:.8125rem; font-weight:600; color:var(--accent-ink);}
.scan-status::before{content:''; display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px; border:2px solid var(--accent); border-right-color:transparent; border-radius:50%; animation:scan-spin .7s linear infinite;}
@keyframes scan-spin{to{transform:rotate(360deg);}}
body.drop-scan::after{content:'Drop receipts, photos, PDFs or booking emails to scan'; position:fixed; inset:12px; z-index:90; display:grid; place-items:center; padding:24px; text-align:center;
  border:2px dashed var(--accent); border-radius:20px; background:color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-weight:700; font-size:1.0625rem; color:var(--accent-ink); pointer-events:none;}
.rc-list{margin-top:10px; font-size:.8125rem; color:var(--ink-soft);}
.rc-row{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border-soft);}
.rc-main{flex:1; min-width:0;} .rc-main b{display:block; color:var(--ink); font-size:.875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rc-main small{color:var(--ink-soft);}
@media (prefers-reduced-motion: reduce){ .scan-status::before{animation-duration:2s;} }


/* Dark mode: follows the system unless the user picks Light/Dark (data-theme) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){color-scheme:dark; --bg:#0E0E12; --card:#17171D; --ink:#F2F2F6; --ink-soft:#A5A5B2; --ink-faint:#8A8A98; --border:#2A2A33; --border-soft:#23232B;
    --accent:#8B85FF; --accent-ink:#C7C4FF; --accent-soft:#22223A; --positive:#3DD598; --warn:#F5A524; --destructive:#FF6B6B;
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6); --shadow-pop:0 20px 48px -12px rgba(0,0,0,.7);}
  :root:not([data-theme="light"]) .fab-menu, :root:not([data-theme="light"]) .tabs button.on, :root:not([data-theme="light"]) .chip.on, :root:not([data-theme="light"]) .btn.primary, :root:not([data-theme="light"]) .btn-add-item{background:var(--ink); color:var(--bg); border-color:var(--ink);}
  :root:not([data-theme="light"]) .btn-add-item svg{stroke:var(--bg);}
  :root:not([data-theme="light"]) .btn.accent{color:#0E0E12;}
  :root:not([data-theme="light"]) header.top{background:rgba(14,14,18,.74);}
  :root:not([data-theme="light"]) table.items th{background:#1C1C23;}
  :root:not([data-theme="light"]) table.items tr.item-row:hover{background:#1D1D25;}
  :root:not([data-theme="light"]) .pill.spot{background:#3A2C12;}
  :root:not([data-theme="light"]) .pill.solo{background:#2E2442; color:#B9A6FF;}
  :root:not([data-theme="light"]) .btn.danger{background:var(--card); color:#FF8A7A; border-color:#5A2E2A;}
  :root:not([data-theme="light"]) .btn.danger:hover{background:#2A1A18; border-color:#FF8A7A;}
  :root:not([data-theme="light"]) .toast{background:#2E2E38; color:#F2F2F6; border:1px solid var(--border);}
  :root:not([data-theme="light"]) .cal-cust{background:color-mix(in srgb, var(--cc) 30%, var(--card)); color:color-mix(in srgb, var(--cc) 45%, #fff);}
  :root:not([data-theme="light"]) .cal-day.out .cal-daynum{color:#7C7C8A;}
}
:root[data-theme="dark"]{color-scheme:dark; --bg:#0E0E12; --card:#17171D; --ink:#F2F2F6; --ink-soft:#A5A5B2; --ink-faint:#8A8A98; --border:#2A2A33; --border-soft:#23232B;
    --accent:#8B85FF; --accent-ink:#C7C4FF; --accent-soft:#22223A; --positive:#3DD598; --warn:#F5A524; --destructive:#FF6B6B;
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6); --shadow-pop:0 20px 48px -12px rgba(0,0,0,.7);}
:root[data-theme="dark"] .fab-menu, :root[data-theme="dark"] .tabs button.on, :root[data-theme="dark"] .chip.on, :root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] .btn-add-item{background:var(--ink); color:var(--bg); border-color:var(--ink);}
:root[data-theme="dark"] .btn-add-item svg{stroke:var(--bg);}
:root[data-theme="dark"] .btn.accent{color:#0E0E12;}
:root[data-theme="dark"] header.top{background:rgba(14,14,18,.74);}
:root[data-theme="dark"] table.items th{background:#1C1C23;}
:root[data-theme="dark"] table.items tr.item-row:hover{background:#1D1D25;}
:root[data-theme="dark"] .pill.spot{background:#3A2C12;}
:root[data-theme="dark"] .pill.solo{background:#2E2442; color:#B9A6FF;}
:root[data-theme="dark"] .btn.danger{background:var(--card); color:#FF8A7A; border-color:#5A2E2A;}
:root[data-theme="dark"] .btn.danger:hover{background:#2A1A18; border-color:#FF8A7A;}
:root[data-theme="dark"] .toast{background:#2E2E38; color:#F2F2F6; border:1px solid var(--border);}
:root[data-theme="dark"] .cal-cust{background:color-mix(in srgb, var(--cc) 30%, var(--card)); color:color-mix(in srgb, var(--cc) 45%, #fff);}
:root[data-theme="dark"] .cal-day.out .cal-daynum{color:#7C7C8A;}
:root[data-theme="light"]{color-scheme:light;}

/* Theme button, appearance buttons, quick add */
.theme-btn{flex:0 0 auto; width:36px; height:36px; margin-left:8px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--ink-soft); cursor:pointer; transition:background-color .15s, color .15s, transform 120ms var(--ease-out);}
.theme-btn:active{transform:scale(.94);}
@media (hover:hover) and (pointer:fine){ .theme-btn:hover{color:var(--ink); background:var(--bg);} }
.seg{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.seg button.on{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent);}
.rc-btns{display:flex; gap:6px; flex:0 0 auto;}
.quick-add{position:relative; display:block; margin:0 0 10px;}
.quick-add input#quickAdd{width:100%; box-sizing:border-box; padding-right:92px;}
.qa-actions{position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; gap:2px;}
.qa-icon{width:38px; height:38px; display:grid; place-items:center; padding:0; border:0; border-radius:10px; background:none; color:var(--ink-soft); cursor:pointer; transition:background-color .15s, color .15s;}
.qa-icon.qa-go{color:var(--accent);}
@media (hover:hover) and (pointer:fine){ .qa-icon:hover{background:var(--bg); color:var(--ink);} .qa-icon.qa-go:hover{color:var(--accent-ink);} }
.bulk-bar[hidden]{display:none;}


/* Scan jobs, review banner, in-app dialog */
.scan-jobs{display:flex; flex-direction:column; gap:8px; margin:0 0 10px;}
.scan-jobs:empty{display:none;}
.scan-card{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow-card);}
.scan-card.failed, .scan-card.empty{border-color:color-mix(in srgb, var(--destructive) 40%, var(--border));}
.sc-main{flex:1; min-width:0;}
.sc-main b{display:block; font-size:.8125rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sc-main small{display:block; margin-top:1px; font-size:.75rem; line-height:1.4; color:var(--ink-soft);}
.sc-main small.err{color:var(--destructive);}
.sc-spin{flex:0 0 auto; width:16px; height:16px; border:2px solid var(--accent); border-right-color:transparent; border-radius:50%; animation:scan-spin .7s linear infinite;}
.sc-ico{flex:0 0 auto; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:color-mix(in srgb, var(--destructive) 14%, transparent); color:var(--destructive); font-weight:800; font-size:.8125rem;}
.sc-btns{display:flex; gap:6px; flex:0 0 auto;}
@media (max-width:640px){ .scan-card{flex-wrap:wrap;} .sc-btns{width:100%; justify-content:flex-end;} }
.scan-banner{grid-column:1 / -1; display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 12px; margin-bottom:12px; border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent-ink); font-size:.8125rem; line-height:1.45;}
.scan-banner.warn{background:color-mix(in srgb, var(--warn) 14%, transparent); color:var(--ink);}
.scan-banner b{display:block; margin-bottom:1px;} .scan-banner span{color:var(--ink-soft);}
.scan-banner .btn{flex:0 0 auto;}
.dlg-msg{margin:0 0 14px; font-size:.875rem; line-height:1.5; color:var(--ink-soft);}
.dlg-msg:empty{display:none;}
#appDialogOverlay .modal{max-width:420px;}


/* Scan progress, receipts toolbar */
.sc-bar{height:6px; margin-top:7px; border-radius:99px; background:var(--border-soft); overflow:hidden;}
.sc-bar i{display:block; height:100%; width:0; border-radius:99px; background:var(--accent); transition:width 200ms linear;}
.sc-pct{font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink);}
.rc-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; min-height:1px; font-size:.75rem; font-weight:600; color:var(--ink-soft);}
.rc-bar .btn[hidden]{display:none;}
@media (max-width:640px){ .rc-row{flex-wrap:wrap;} .rc-btns{width:100%; justify-content:flex-end;} }
@media (prefers-reduced-motion: reduce){ .sc-bar i{transition:none;} }


/* =====================================================================
 * Design pass: bottom nav, mini summary, compact phone hero, swipe rows,
 * filter chips, empty states, toast ring, type, palette, receipts, settings
 * ===================================================================== */
:root{--nav-h:0px;}
/* monospace only for money; labels/dates/counts use the UI font with tabular figures */
.sync-status-text, .hero-fact .f-main, .comp-legend .pct, .leg-num, .detail-leg-row .dl-date, .fx-status, .route-date, .daily-list-row .d-date, .visit-group-head .count, .trip-list-row .info .meta{font-family:var(--sans, inherit); font-variant-numeric:tabular-nums;}
.hero-fact .f-main{font-weight:700;}
/* original currency under the home figure */
.orig{display:block; margin-top:2px; font:500 .6875rem var(--sans, inherit); font-variant-numeric:tabular-nums; color:var(--ink-soft); white-space:nowrap;}
table.items td.num .orig{text-align:right;}
/* filter chips */
#catFilterChips{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.fchip{display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 12px; border:1px solid var(--border); border-radius:99px; background:var(--card); color:var(--ink-soft); font:600 .8125rem var(--sans, inherit); cursor:pointer; transition:background-color .15s, border-color .15s, color .15s, transform 120ms var(--ease-out);}
.fchip:active{transform:scale(.96);}
.fchip.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink);}
.fchip svg{width:13px; height:13px;} .fchip em{font-style:normal; font-size:.6875rem; padding:1px 6px; border-radius:99px; background:color-mix(in srgb, currentColor 12%, transparent);}
.fclear{border:0; background:none; padding:8px 6px; font:600 .8125rem var(--sans, inherit); color:var(--accent); cursor:pointer; min-height:38px;}
/* empty states */
.empty-card{border:1.5px dashed var(--border); border-radius:var(--radius); padding:32px 20px; text-align:center; background:var(--card);}
.empty-card .e-ic{width:44px; height:44px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink);}
.empty-card h3{margin:0 0 4px; font-size:1rem;} .empty-card p{margin:0 auto 16px; max-width:36ch; font-size:.875rem; color:var(--ink-soft);}
.empty-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.empty-card.small{padding:18px 14px;} .empty-card.small p{margin-bottom:0;}
/* mini summary */
.mini-sum{position:sticky; top:var(--hdr-h,56px); z-index:8; display:flex; align-items:center; gap:12px; width:calc(100% + 8px); margin:0 -4px 8px; padding:9px 16px; border:0; border-bottom:1px solid var(--border-soft); text-align:left; cursor:pointer; font:inherit; color:var(--ink);
  background:color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); animation:ms-in 180ms var(--ease-out);}
.mini-sum[hidden]{display:none;}
@keyframes ms-in{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.ms-name{flex:1; min-width:0; font-weight:700; font-size:.875rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ms-amt{font-family:var(--mono); font-weight:700; font-size:.875rem; white-space:nowrap;}
.ms-bud{flex:0 0 64px; height:6px; border-radius:99px; background:var(--border-soft); overflow:hidden;} .ms-bud i{display:block; height:100%; background:var(--accent);} .ms-bud.over i{background:var(--destructive);}
.ms-pct{font-size:.75rem; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
@media (prefers-reduced-motion: reduce){ .mini-sum{animation:none;} }
/* toast timer ring */
.toast{bottom:calc(var(--nav-h) + 28px);}
.toast .act{display:inline-flex; align-items:center; gap:7px;}
.t-ring{width:16px; height:16px; display:block;} .t-ring svg{width:16px; height:16px; transform:rotate(-90deg);}
.t-ring circle{fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:50.3; stroke-dashoffset:0; animation:ring-run var(--ring-ms,5000ms) linear forwards;}
.toast.paused .t-ring circle{animation-play-state:paused;}
@keyframes ring-run{to{stroke-dashoffset:50.3;}}
@media (prefers-reduced-motion: reduce){ .t-ring circle{animation-duration:1ms;} }
/* receipts */
.rc-row{align-items:center;}
.rc-thumb{flex:0 0 auto; width:44px; height:56px; padding:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--bg); display:grid; place-items:center; cursor:pointer; color:var(--ink-soft); font:700 .6875rem var(--sans, inherit);}
.rc-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.rc-inline{display:flex; align-items:center; gap:12px; width:100%; margin-top:12px; padding:8px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card); text-align:left; font:inherit; color:var(--ink); cursor:pointer;}
.rc-inline .rc-thumb{width:40px; height:50px;} .rc-inline b{display:block; font-size:.8125rem;} .rc-inline small{color:var(--ink-soft); font-size:.75rem;}
.rc-viewer{max-width:640px;} .rc-view-body{max-height:62vh; overflow:auto; margin:0 0 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); text-align:center;}
.rc-view-body img{max-width:100%; height:auto; display:block; margin:0 auto;} .rc-view-body pre{text-align:left; margin:0; padding:14px; white-space:pre-wrap; font:.75rem/1.5 var(--mono);} .rc-view-body p{padding:28px 16px; color:var(--ink-soft); font-size:.875rem;}
/* palette */
.palette-item small{display:block; margin-top:1px; font-size:.6875rem; color:var(--ink-soft);}
.palette-item .amt{margin-left:auto; padding-left:10px; font-family:var(--mono); font-size:.75rem; white-space:nowrap;}
.palette-hints{padding:8px 14px 12px; font-size:.75rem; color:var(--ink-soft);}
.palette-hints button{margin:0 4px 0 0; padding:3px 9px; border:1px solid var(--border); border-radius:99px; background:var(--card); color:var(--ink); font:600 .75rem var(--mono); cursor:pointer;}
/* settings */
.s-group{margin:24px 4px 8px; font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.s-group.danger{color:#B3261E;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .s-group.danger{color:var(--destructive);} }
:root[data-theme="dark"] .s-group.danger{color:var(--destructive);}
.s-ttl{display:flex; align-items:center; gap:12px; min-width:0;} .s-ttl h3{margin:0;}
.s-ic{flex:0 0 auto; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink);}
.settings-head{min-height:56px;}
.s-danger{border-color:color-mix(in srgb, var(--destructive) 35%, var(--border));}
.s-danger .s-ic{background:color-mix(in srgb, var(--destructive) 14%, transparent); color:var(--destructive);}
@media (max-width:780px){ .settings-section .btn, .settings-section select, .settings-section input[type=text], .settings-section input[type=number]{min-height:44px;} }

/* bottom nav + compact hero + swipe rows: phones only */
@media (max-width:780px){
  :root{--nav-h:calc(62px + env(safe-area-inset-bottom, 0px));}
  .tabs-bar{display:none;}
  .bottom-nav{position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; padding:0 4px env(safe-area-inset-bottom, 0px);
    background:color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border-top:1px solid var(--border);}
  .bottom-nav button{flex:1; min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:none; color:var(--ink-soft); font:600 .6875rem var(--sans, inherit); cursor:pointer; transition:color .15s, transform 120ms var(--ease-out);}
  .bottom-nav button svg{width:22px; height:22px;} .bottom-nav button:active{transform:scale(.94);}
  .bottom-nav button.on{color:var(--accent);}
  .more-sheet{position:fixed; right:10px; bottom:calc(var(--nav-h) + 8px); z-index:55; min-width:190px; padding:6px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-pop); animation:ms-in 160ms var(--ease-out);}
  .more-sheet[hidden]{display:none;}
  .more-sheet button{display:block; width:100%; min-height:48px; padding:0 14px; border:0; border-radius:var(--radius-sm); background:none; text-align:left; font:600 .9375rem var(--sans, inherit); color:var(--ink); cursor:pointer;}
  .more-sheet button.on{background:var(--accent-soft); color:var(--accent-ink);}
  body .fab-menu{bottom:calc(var(--nav-h) + 16px);}
  .page{padding-bottom:calc(var(--nav-h) + 110px);}
  .bulk-bar{bottom:calc(var(--nav-h) + 10px);}
  .cal-detail-wrap{bottom:var(--nav-h); padding-bottom:8px;}
}
@media (min-width:781px){ .bottom-nav, .more-sheet{display:none;} }
@media (max-width:640px){
  .trip-summary-card{display:flex; flex-direction:column; padding-bottom:6px;}
  .hero-main, .hero-stub{display:contents;}
  .hero-stub-cut{display:none;}
  .hero-title{order:1; margin:0; padding:18px 20px 0;}
  .hero-stub-label{order:2; padding:12px 20px 0;} .hero-figure{order:3; padding:0 20px;}
  .budget, .budget-set{order:4; margin:12px 20px 0;} .budget-set{align-self:flex-start;}
  .hero-toggle{order:5; display:flex; align-items:center; justify-content:space-between; width:calc(100% - 40px); margin:6px 20px 8px; min-height:44px; padding:0 2px; border:0; border-top:1px solid var(--border-soft); background:none; font:600 .8125rem var(--sans, inherit); color:var(--accent); cursor:pointer;}
  .hero-toggle svg{width:16px; height:16px; transition:transform 180ms var(--ease-out);}
  .trip-summary-card:not(.hero-closed) .hero-toggle svg{transform:rotate(180deg);}
  .hero-facts, .hero-tags, .hero-sub-figure, .comp-bar-wrap{order:6; margin-left:20px; margin-right:20px;}
  .hero-sub-figure{margin-top:4px;} .comp-bar-wrap{margin-bottom:14px;}
  .trip-summary-card.hero-closed .hero-facts, .trip-summary-card.hero-closed .hero-tags, .trip-summary-card.hero-closed .hero-sub-figure, .trip-summary-card.hero-closed .comp-bar-wrap{display:none;}
  .cat-body, .cat-body-inner{overflow:hidden;}
  table.items tr.item-row{touch-action:pan-y; transition:transform 220ms var(--ease-out); background:var(--card);}
  table.items tr.item-row.dragging{transition:none;}
  table.items td.name{padding-right:0;}
  table.items td.actions{position:absolute; left:100%; top:0; bottom:0; right:auto; width:168px; display:flex; padding:0;}
  table.items td.actions button{flex:1; width:auto; height:auto; border-radius:0; opacity:1; color:#fff; display:flex; align-items:center; justify-content:center;}
  table.items td.actions button:nth-child(1){background:#6B6B76;} table.items td.actions button:nth-child(2){background:var(--accent);} table.items td.actions button:nth-child(3){background:var(--destructive);}
  table.items td.actions button svg{width:20px; height:20px; stroke:#fff;}
}
@media (min-width:641px){ .hero-toggle{display:none;} }
@media (prefers-reduced-motion: reduce){ table.items tr.item-row, .hero-toggle svg{transition:none;} }

/* `overflow-x:hidden` on html AND body makes body a scroll container, which silently breaks
   position:sticky on phones (header, calendar toolbar, mini summary). `clip` hides the same
   overflow without creating a scroll container. */
@media (max-width:780px){ html, body{overflow-x:clip;} }