:root {
      /* Brand — lighter mint teal */
      --color-primary: #5DBDB6;
      --color-primary-hover: #4AA9A2;
      --color-primary-light: #E0F7F4;
      --color-primary-bg: #F4FBFA;
      --color-primary-ink: #1F6B66;

      /* Neutrals */
      --color-bg: #faf9f6;
      --color-surface: #ffffff;
      --color-surface-alt: #fafaf8;
      --color-text: #0f172a;
      --color-text-secondary: #64748b;
      --color-text-muted: #94a3b8;

      /* Borders — softer */
      --border-default: #e6eaef;
      --border-subtle: #f1f3f5;

      /* Shadows — softer, more diffuse */
      --shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
      --shadow-md: 0 6px 18px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.04);
      --shadow-lg: 0 18px 50px rgba(15,23,42,0.12), 0 6px 16px rgba(15,23,42,0.06);

      /* Radii — bumped */
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;

      /* Focus */
      --focus-ring: 0 0 0 3px rgba(93,189,182,0.20);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--color-bg);
      color: var(--color-text);
      min-height: 100vh;
      font-size: 14px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    header {
      background: var(--color-surface);
      padding: 20px 28px;
      border-bottom: 1px solid var(--border-default);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    header h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }

    .header-actions { display: flex; gap: 8px; }

    .btn {
      padding: 7px 14px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      background: var(--color-surface);
      color: #333;
      transition: all 0.15s ease;
    }

    .btn:hover { background: #f0f0f0; }
    .btn:active { transform: scale(0.97); }
    .btn-primary { background: var(--color-primary); color: white; border-color: var(--color-primary); }
    .btn-primary:hover { background: var(--color-primary-hover); box-shadow: 0 2px 8px rgba(93,189,182,0.3); }
    .btn-primary:active { transform: scale(0.97); }

    .btn-sm { padding: 4px 10px; font-size: 12px; }
    .filter-quick { font-size: 11px !important; padding: 3px 8px !important; color: #555; }
    .filter-quick.active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
    tr.overlap-row > td { background: #fef9c3 !important; }

    /* ─── Temporal hierarchy on confirmed (go) rows ─────────────────────
       Past trips fade back so the eye lands on what's coming up.
       Current trip gets a mint accent + "Now" pill prepended via JS.
       Trips starting in the next 30 days get a subtle highlight strip. */
    tr.past-row > td {
      color: var(--color-text-muted);
      background: #fafaf8;
    }
    tr.past-row .trip-name-input { color: var(--color-text-muted); }
    tr.past-row .lane-pill, tr.past-row .calc-cell, tr.past-row .booking-icons { opacity: 0.7; }
    tr.current-row {
      box-shadow: inset 4px 0 0 var(--color-primary);
    }
    tr.current-row > td:first-child {
      position: relative;
    }
    tr.current-row .trip-name-input {
      font-weight: 700;
    }
    tr.soon-row > td:first-child {
      box-shadow: inset 3px 0 0 var(--color-primary-light);
    }
    .now-pill {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--color-primary);
      color: #fff;
      text-transform: uppercase;
    }
    .past-pill {
      display: inline-block;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 999px;
      background: #94a3b8;
      color: #fff;
      text-transform: uppercase;
    }

    /* Idea lane styles.
       overlap-row used to set background here too, which overrode the
       lane bg (Path A blue / Path B orange / A+B purple) any time a
       same-lane conflict existed. The lane is the primary visual
       grouping cue, so the lane bg now wins; overlap is signalled by
       a yellow inset border on the row instead (see .overlap-row rule
       below). */
    tr.idea-row > td { background: #f8f9fc !important; }
    tr.idea-row-a > td { background: #dbeafe !important; }
    tr.idea-row-b > td { background: #ffedd5 !important; }
    /* 'Both' rows: a uniform muted lavender — sits between blue and orange
       in the spectrum so it reads as "neither lane, but related to both".
       The striped left border and A+B pill carry the actual "both" signal. */
    tr.idea-row-both > td { background: #ede8f3 !important; }
    /* Overlap warning — yellow top + bottom inset stripes layered ON TOP
       of the lane bg so both signals coexist. */
    tr.idea-row.overlap-row > td {
      box-shadow: inset 0 2px 0 #f59e0b, inset 0 -2px 0 #f59e0b;
    }
    tr.idea-row .trip-name-input { font-style: italic; color: #4b5563; }
    .idea-lane-border-1 { border-left: 6px solid #3b82f6 !important; }
    .idea-lane-border-2 { border-left: 6px solid #f97316 !important; }
    /* Striped left border for Both rows — half blue, half orange.
       border-image on a tr doesn't render in border-collapse: collapse
       tables, so paint the stripe as an absolutely-positioned overlay
       on the first cell instead. Reserve 6px of layout space with a
       transparent border-left so the row aligns with Path A / Path B
       siblings, then drop a ::before bar into that border space. */
    tr.idea-lane-border-both {
      border-left: 6px solid transparent !important;
    }
    tr.idea-lane-border-both > td:first-child {
      position: relative;
    }
    tr.idea-lane-border-both > td:first-child::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 0;
      bottom: 0;
      width: 6px;
      background: linear-gradient(to bottom, #3b82f6 0 50%, #f97316 50% 100%);
      pointer-events: none;
      z-index: 1;
    }
    .lane-pill { display:inline-block; font-size:10px; font-weight:700; padding:1px 5px; border-radius:4px; color:#fff; line-height:1.4; letter-spacing:0.5px; }
    .lane-pill-a { background:#3b82f6; }
    .lane-pill-b { background:#f97316; }
    .lane-pill-both { background: linear-gradient(to right, #3b82f6 0%, #3b82f6 50%, #f97316 50%, #f97316 100%); }

    .lane-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 10px;
      white-space: nowrap;
    }
    .lane-badge-1 { background: #dbeafe; color: #1d4ed8; }
    .lane-badge-2 { background: #ffedd5; color: #6d28d9; }

    .lane-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: inline-block;
    }
    .lane-dot-1 { background: #3b82f6; }
    .lane-dot-2 { background: #f97316; }

    .lane-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 12px;
      font-weight: 500;
    }
    .lane-tag-1 { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
    .lane-tag-2 { background: #ffedd5; color: #5b21b6; border: 1px solid #c4b5fd; }
    .lane-tag .lane-remove {
      background: none; border: none; cursor: pointer;
      font-size: 14px; color: inherit; opacity: 0.6;
      padding: 0; line-height: 1;
    }
    .lane-tag .lane-remove:hover { opacity: 1; }

    .status-cell { min-width: 64px; width: 64px; position: relative; }
    .status-trigger {
      font-size: 18px; padding: 2px 4px; border-radius: 4px; cursor: pointer;
      border: 1px solid #d0d0d0; background: #fff; width: 100%; text-align: center;
      display: inline-flex; align-items: center; justify-content: center;
      gap: 3px; line-height: 1; min-height: 28px;
      transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
    }
    .status-trigger::after {
      content: '▾';
      font-size: 9px;
      color: var(--color-text-muted);
      line-height: 1;
      flex-shrink: 0;
      margin-left: 1px;
    }
    .status-trigger:hover {
      background: var(--color-primary-light);
      border-color: var(--color-primary);
      box-shadow: var(--shadow-sm);
    }
    .status-trigger:hover::after { color: var(--color-primary-ink); }
    .status-trigger.status-go { border-color: #86efac; }
    .status-trigger.status-lane-1 { border-color: #3b82f6; border-style: dashed; }
    .status-trigger.status-lane-2 { border-color: #f97316; border-style: dashed; }
    /* 'Both' status pill: dashed border that's half blue, half orange */
    .status-trigger.status-lane-both {
      border-color: transparent;
      border-style: dashed;
      border-image: linear-gradient(to right, #3b82f6 0%, #3b82f6 50%, #f97316 50%, #f97316 100%) 1;
    }
    .status-dropdown {
      display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
      background: var(--color-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
      box-shadow: var(--shadow-md); z-index: 100; padding: 4px;
      min-width: 44px;
    }
    .status-dropdown.open { display: flex; flex-direction: column; gap: 2px; }
    .status-option {
      font-size: 18px; padding: 4px 8px; border-radius: 4px; cursor: pointer;
      border: none; background: none; text-align: center; line-height: 1;
    }
    .status-option:hover { background: #f3f4f6; }
    .status-idea-btn {
      background: none; border: 1px dashed #d0d0d0; border-radius: 4px;
      padding: 2px 6px; font-size: 11px; color: #888; cursor: pointer;
    }
    .status-idea-btn:hover { border-color: #5DBDB6; color: #5DBDB6; }
    .confirm-btn {
      background: none; border: 1px solid #86efac; border-radius: 4px;
      padding: 2px 6px; font-size: 11px; color: #16a34a; cursor: pointer;
    }
    .confirm-btn:hover { background: #f0fdf4; }

    /* Two-lane Schengen / FEIE cells render the A and B day counts as
       small inline pills colored by their lane (blue / orange) — the
       day number lives INSIDE the lane pill so we don't need a separate
       "A 27" letter prefix. Side-by-side, very compact. */
    .calc-split {
      display: flex;
      gap: 2px;
      justify-content: center;
      align-items: center;
    }
    .calc-split .calc-cell {
      font-size: 11px;
      padding: 0;
      background: transparent;
    }

    .overlap-banner {
      background: #fef9c3;
      color: #92400e;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 6px;
      margin-bottom: 8px;
      border: 1px solid #fde68a;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .btn-danger { color: #dc2626; border-color: #fca5a5; }
    .btn-danger:hover { background: #fef2f2; }
    .btn-icon {
      width: 30px; height: 30px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm); font-size: 16px; border: none; cursor: pointer;
      background: transparent;
      transition: all 0.15s ease;
    }
    .btn-icon:hover { background: #e5e7eb; }
    .btn-icon:active { transform: scale(0.9); }
    .btn-icon.active { background: #fed7aa; }
    .btn-icon.active:hover { background: #fdba74; }
    .btn-icon.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
    .btn-icon.delete-active { color: #dc2626; }
    .btn-icon.delete-active:hover { background: #fee2e2; }

    main { padding: 16px 20px; }

    .table-wrapper {
      background: var(--color-surface);
      border-radius: var(--radius-md);
      border: 1px solid var(--border-default);
      box-shadow: var(--shadow-sm);
      overflow-x: auto;
    }

    table { width: 100%; border-collapse: collapse; min-width: 1400px; }

    thead th {
      background: var(--color-surface-alt);
      padding: 10px 12px;
      text-align: left;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: var(--color-text-secondary);
      border-bottom: 1px solid var(--border-default);
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 5;
    }

    tbody td {
      padding: 0;
      border-bottom: 1px solid var(--border-subtle);
      font-size: 13px;
      vertical-align: middle;
    }

    tbody tr:hover { background: #f8faf8; }
    tbody tr.gap-row:hover { background: #fffbeb; }

    .cell { padding: 8px 10px; white-space: nowrap; }
    .cell-center { text-align: center; }

    .cell input, .cell select {
      border: none;
      background: transparent;
      font-size: 13px;
      font-family: inherit;
      color: #1a1a1a;
      padding: 2px 4px;
      border-radius: 4px;
      width: 100%;
    }

    .cell input:focus, .cell select:focus {
      outline: none;
      background: #F4FBFA;
      box-shadow: 0 0 0 2px #5DBDB6;
    }

    .cell input[type="date"] { cursor: pointer; width: 130px; }
    .cell select { cursor: pointer; }

    .trip-name-input { width: 100%; font-weight: 500; }

    .calc-cell {
      padding: 4px 10px;
      text-align: center;
      font-weight: 700;
      font-size: 13px;
      border-radius: 6px;
      min-width: 40px;
      color: var(--color-text);
      background: transparent;
    }

    /* Schengen: quiet by default — only highlight when remaining days are low. */
    .schengen-green  { background: transparent; color: var(--color-text); }
    .schengen-yellow { background: transparent; color: var(--color-text); }
    .schengen-red    { background: #fef2f2; color: #b91c1c; }
    /* Warning only at < 10 days remaining (.schengen-orange tier removed). */
    .schengen-red::before { content: '⚠ '; font-size: 11px; }

    /* Passport Control view */
    .pc-launch-btn { background:none; border:none; cursor:pointer; font-size:13px; padding:0 2px; vertical-align:middle; }
    .pc-launch-btn:hover { transform:scale(1.15); }
    .pc-header { text-align:center; margin-bottom:14px; }
    .pc-header-label { font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--color-text-secondary); }
    .pc-header-date { font-size:20px; font-weight:800; color:var(--color-text); margin-top:2px; letter-spacing:-0.3px; }
    .pc-summary-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
    .pc-card { background:var(--color-primary-light); border:1px solid transparent; border-radius:var(--radius-lg); padding:16px 18px; }
    .pc-card-label { font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--color-primary-ink); }
    .pc-card-value { font-size:16px; font-weight:700; color:var(--color-primary-ink); margin-top:6px; }
    .pc-card-bignum { font-size:44px; font-weight:800; line-height:1; letter-spacing:-0.5px; }
    .pc-card-sep { font-weight:400; color:var(--color-text-secondary); font-size:13px; }
    .pc-section-title { font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--color-text-secondary); margin:12px 0 8px; }
    .pc-trips { display:flex; flex-direction:column; gap:10px; }
    .pc-trip-card { background:var(--color-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
    .pc-trip-row { display:grid; grid-template-columns:auto 1fr 1fr auto; gap:14px; align-items:center; padding:12px 14px; }
    .pc-trip-col { min-width:0; }
    .pc-trip-label { font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:var(--color-text-secondary); }
    .pc-trip-country { font-size:14px; font-weight:700; color:var(--color-text); margin-top:2px; }
    .pc-trip-date { font-size:12px; color:var(--color-text-secondary); margin-top:1px; }
    .pc-trip-days { font-size:13px; color:var(--color-text-secondary); white-space:nowrap; }
    .pc-trip-days b { font-size:20px; font-weight:800; color:var(--color-text); }
    .pc-trip-partial { display:flex; justify-content:space-between; align-items:center; gap:12px;
      background:var(--color-primary-light); border-top:1px solid transparent; padding:8px 14px; font-size:12px; color:var(--color-primary-ink); }
    .pc-trip-partial b { font-size:14px; font-weight:800; }
    @media (max-width: 600px) {
      .pc-summary-row { grid-template-columns:1fr; }
      .pc-trip-row { grid-template-columns:auto 1fr auto; row-gap:8px; }
      .pc-trip-row .pc-trip-col + .pc-trip-col { grid-column:2 / 3; }
      .pc-trip-days { grid-column:3; grid-row:1 / span 2; }
    }

    /* FEIE: 330+ qualifies — show as positive (subtle teal text, no bg).
       Below 330 is normal, no warning. */
    .feie-good   { background: transparent; color: var(--color-text); }
    .feie-warn   { background: transparent; color: #15803d; }
    .feie-warn::after { content: ' ✓'; font-size: 11px; opacity: 0.8; }

    .booking-icons { display: flex; gap: 2px; align-items: center; justify-content: center; }
    .booking-icons span { font-size: 14px; }

    .share-icons { display: inline-flex; gap: 4px; align-items: center; justify-content: center; }
    .share-icons > span { display: inline-flex; align-items: center; font-size: 14px; }
    .share-icons .share-x { opacity: 0.45; filter: grayscale(0.2); }

    .date-hidden { position:absolute;width:0;height:0;opacity:0;pointer-events:none;overflow:hidden; }
    .trip-dates-grid { display:grid;grid-template-columns:auto auto auto auto;align-items:center;gap:0 3px;font-size:12px;font-family:'Courier New',monospace;justify-content:center; }
    .date-display { cursor:pointer;padding:2px 4px;border-radius:3px;color:#1e293b;font-weight:700;white-space:nowrap;text-align:center;min-width:68px; }
    .date-display:hover { background:#e2e8f0; }
    .date-arrow { color:#94a3b8;text-align:center; }
    .total-days-badge { background:#f1f5f9;color:#475569;font-weight:700;font-size:11px;padding:1px 5px;border-radius:8px;white-space:nowrap;text-align:center;font-family:inherit; }
    .trip-name-cell { white-space:normal !important; min-width:120px; max-width:180px; }
    .trip-name-cell .trip-name-input { width:100%;font-size:12px;resize:none;overflow:hidden;border:none;background:transparent;font-family:inherit;padding:2px 4px;line-height:1.4; }
    .todo-status { font-size: 16px; text-align: center; }
    .todo-status:hover, .booking-icons:hover { background: #e2e8f0; border-radius: 4px; }

    .decision-bar-row td { padding: 0 !important; border: none !important; background: #f0fdf4 !important; border-bottom: 1px solid #dbeafe !important; }
    .decision-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 10px; }
    .lane-confirm-btn { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
    .lane-confirm-1 { border-color: #3b82f6; color: #3b82f6; }
    .lane-confirm-1:hover { background: #3b82f6; color: #fff; }
    .lane-confirm-2 { border-color: #f97316; color: #f97316; }
    .lane-confirm-2:hover { background: #f97316; color: #fff; }

    /* Walkthrough overlay */
    .wt-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.55); z-index: 9998;
      pointer-events: auto;
    }
    .wt-spotlight {
      position: fixed; border-radius: 8px;
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
      z-index: 9999; pointer-events: none;
      transition: all 0.3s ease;
    }
    .wt-tooltip {
      position: fixed; z-index: 10000;
      background: var(--color-surface); border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: 18px 20px; max-width: 340px; min-width: 260px;
      font-size: 13px; line-height: 1.5;
    }
    .wt-tooltip h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: #5DBDB6; }
    .wt-tooltip p { color: #555; margin-bottom: 14px; }
    .wt-tooltip .wt-nav {
      display: flex; justify-content: space-between; align-items: center; gap: 8px;
    }
    .wt-tooltip .wt-nav button {
      padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600;
      cursor: pointer; border: 1px solid #d0d0d0; background: white; color: #333;
    }
    .wt-tooltip .wt-nav button:hover { background: #f0f0f0; }
    .wt-tooltip .wt-nav .wt-next {
      background: #5DBDB6; color: white; border-color: #5DBDB6;
    }
    .wt-tooltip .wt-nav .wt-next:hover { background: #4AA9A2; }
    .wt-tooltip .wt-nav .wt-skip { font-size: 11px; color: #999; border: none; background: none; }
    .wt-tooltip .wt-nav .wt-skip:hover { color: #333; }
    .wt-step-counter { font-size: 11px; color: #999; text-align: center; }

    /* Header notification badges */
    .header-badge {
      position: absolute; top: -6px; right: -8px;
      background: #dc2626; color: #fff; font-size: 10px; font-weight: 700;
      min-width: 16px; height: 16px; line-height: 16px;
      border-radius: 8px; text-align: center; padding: 0 4px;
      pointer-events: none;
    }

    /* Help tip tooltips */
    .help-tip {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; border-radius: 50%;
      background: #e5e7eb; color: #6b7280; font-size: 10px; font-weight: 700;
      cursor: help; position: relative; vertical-align: middle; margin-left: 4px;
      line-height: 1;
    }
    .help-tip:hover { background: #d1d5db; color: #374151; }
    .help-tip-popup {
      display: none; position: fixed; background: #1a1a1a; color: #fff;
      padding: 8px 12px; border-radius: 6px; font-size: 11px; font-weight: 400;
      line-height: 1.4; white-space: normal; width: 260px; z-index: 9999;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3); text-align: left;
      pointer-events: none;
    }
    .help-tip-popup::after {
      content: ''; position: absolute; bottom: 100%; left: var(--arrow-left, 50%); transform: translateX(-50%);
      border: 6px solid transparent; border-bottom-color: #1a1a1a;
    }

    /* Sample data banner */
    .sample-banner {
      background: linear-gradient(90deg, #F4FBFA, #e0f2fe);
      border: 1px solid #5eead4;
      border-radius: 8px; padding: 10px 16px;
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px; font-size: 13px; color: #5DBDB6; font-weight: 600;
    }
    .sample-banner button {
      padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600;
      cursor: pointer; border: 1px solid;
    }
    .sample-banner .sample-clear { background: #5DBDB6; color: white; border-color: #5DBDB6; }
    .sample-banner .sample-clear:hover { background: #4AA9A2; }
    .sample-banner .sample-keep { background: white; color: #5DBDB6; border-color: #5eead4; }
    .sample-banner .sample-keep:hover { background: #F4FBFA; }

    /* Help menu */
    .help-menu {
      position: absolute; top: 100%; right: 0; background: var(--color-surface);
      border: 1px solid var(--border-default); border-radius: var(--radius-md);
      box-shadow: var(--shadow-md); z-index: 100;
      min-width: 200px; padding: 4px; display: none;
    }
    .help-menu.open { display: block; }
    .help-menu button {
      display: block; width: 100%; text-align: left;
      padding: 8px 12px; border: none; background: none;
      font-size: 13px; cursor: pointer; border-radius: 4px; color: #333;
    }
    .help-menu button:hover { background: #f3f4f6; }

    .gap-row td {
      padding: 0;
      background: #fffbeb;
      border-bottom: 1px solid #fde68a;
    }
    .gap-row .gap-content {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 4px 10px;
      gap: 8px;
      font-size: 12px;
      color: #92400e;
    }

    /* Country Picker */
    .country-picker {
      position: relative;
      display: inline-block;
    }

    .country-picker-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border: 1px solid transparent;
      border-radius: 6px;
      background: transparent;
      cursor: pointer;
      font-size: 13px;
      font-family: inherit;
      color: #1a1a1a;
      white-space: nowrap;
      min-width: 150px;
      transition: all 0.1s;
    }

    .country-picker-btn:hover, .city-picker-btn:hover { background: #f0fdf4; border-color: #c7d2fe; }
    .country-picker-btn.open, .city-picker-btn.open { background: #F4FBFA; border-color: #5DBDB6; box-shadow: 0 0 0 2px rgba(93,189,182,0.2); }
    .country-picker-btn .picker-arrow, .city-picker-btn .picker-arrow { font-size: 10px; color: #888; margin-left: auto; }
    .country-picker-btn .picker-placeholder, .city-picker-btn .picker-placeholder { color: #999; }
    .city-picker { position: relative; display: inline-block; }
    .city-picker-btn { display:flex; align-items:center; gap:4px; padding:4px 8px; border:1px solid transparent; border-radius:6px; background:transparent; cursor:pointer; font-size:13px; font-family:inherit; color:#1a1a1a; white-space:nowrap; min-width:110px; transition:all 0.1s; }
    .city-picker-dropdown { display:none; position:absolute; top:100%; left:0; z-index:50; background:var(--color-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); width:240px; max-height:320px; overflow:hidden; flex-direction:column; }
    .city-picker-dropdown.open { display:flex; }
    .city-picker-list .picker-option { display:flex; align-items:center; padding:6px 10px; font-size:13px; cursor:pointer; gap:4px; }
    .city-picker-list .picker-option:hover { background:#f8f7f5; }
    .city-picker-list .picker-option.picker-option-selected { background:#e0f2fe; color:#0369a1; }
    .city-picker-list .picker-option-label { flex:1; }
    .city-option-actions { display:none; gap:2px; flex-shrink:0; }
    .city-picker-list .picker-option:hover .city-option-actions { display:flex; }
    .city-option-btn { background:none; border:none; cursor:pointer; padding:1px 4px; font-size:11px; color:#94a3b8; border-radius:3px; line-height:1; }
    .city-option-btn:hover { background:#e2e8f0; color:#374151; }
    .city-picker-footer { border-top:1px solid var(--border-default); padding:4px 0; flex-shrink:0; }
    .city-picker-add-btn { width:100%; padding:6px 12px; background:none; border:none; cursor:pointer; font-size:12px; color:#0891b2; text-align:left; font-family:inherit; }
    .city-picker-add-btn:hover { background:#f0f9ff; }
    .city-picker-add-row { display:none; align-items:center; gap:4px; padding:6px 10px; }
    .city-picker-add-row.visible { display:flex; }
    .city-add-input { flex:1; padding:4px 7px; border:1px solid var(--border-default); border-radius:5px; font-size:12px; font-family:inherit; outline:none; }
    .city-add-input:focus { border-color:#5DBDB6; }
    .city-add-confirm, .city-add-cancel { background:none; border:none; cursor:pointer; padding:2px 5px; border-radius:4px; font-size:13px; }
    .city-add-confirm:hover { background:#dcfce7; }
    .city-add-cancel:hover { background:#fee2e2; }

    .country-picker-dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 50;
      background: var(--color-surface);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      width: 280px;
      max-height: 350px;
      overflow: hidden;
      flex-direction: column;
    }

    .country-picker-dropdown.open { display: flex; }

    .picker-search {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border-default);
    }

    .picker-search input {
      width: 100%;
      padding: 6px 8px;
      border: 1px solid #d0d0d0;
      border-radius: 6px;
      font-size: 12px;
      font-family: inherit;
      outline: none;
    }

    .picker-search input:focus { border-color: #5DBDB6; }

    .picker-list {
      overflow-y: auto;
      flex: 1;
      max-height: 300px;
    }

    .picker-continent {
      cursor: pointer;
      user-select: none;
    }

    .picker-continent-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
      color: #555;
      background: #fafaf8;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      position: sticky;
      top: 0;
      z-index: 2;
    }

    .picker-continent-header:hover { background: #f0f0f0; }
    .picker-continent-header .cont-arrow { font-size: 9px; transition: transform 0.15s; }
    .picker-continent-header .cont-arrow.expanded { transform: rotate(90deg); }
    .picker-continent-header .cont-count { color: #999; font-weight: 400; margin-left: auto; }

    .picker-country-list { display: none; }
    .picker-country-list.expanded { display: block; }

    .picker-country-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px 6px 24px;
      font-size: 13px;
      cursor: pointer;
      border-bottom: 1px solid #f8f8f8;
    }

    .picker-country-item:hover { background: #F4FBFA; }
    .picker-country-item.selected { background: #dbeafe; font-weight: 600; }
    .picker-country-item .schengen-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #059669; margin-left: auto; flex-shrink: 0;
    }

    /* Searching mode: hide continent headers, show flat list */
    .picker-list.searching .picker-continent-header { display: none; }
    .picker-list.searching .picker-country-list { display: block !important; }
    .picker-list.searching .picker-country-item.search-hidden { display: none; }

    /* Modal */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.4);
      z-index: 100;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    .modal-overlay.open { display: flex; opacity: 1; }

    .modal {
      background: var(--color-surface);
      border-radius: var(--radius-lg);
      width: 560px;
      max-width: 92vw;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadow-lg);
    }

    .modal-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--border-default);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .modal-header h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.3px; }

    .modal-close {
      width: 28px; height: 28px; border: none;
      background: transparent; font-size: 18px;
      cursor: pointer; border-radius: 6px; color: #666;
    }
    .modal-close:hover { background: #f0f0f0; }

    /* Back arrow shown in chained modals — visible when setModalBack() has
       registered a handler. Sits left of the title; the X stays at the right. */
    .modal-back {
      width: 32px; height: 32px; border: none;
      background: transparent; font-size: 26px; line-height: 1;
      cursor: pointer; border-radius: 6px; color: #475569;
      margin-right: 4px; padding: 0;
    }
    .modal-back:hover { background: #f0f0f0; }

    /* Lock background scroll while any modal is open. overscroll-behavior
       prevents iOS Safari from rubber-banding the page underneath, and
       position:fixed pins the body so the page can't scroll behind the modal.
       JS captures the current scrollY into --modal-scroll-y so that when the
       modal closes the page lands back where it was. */
    body.modal-open {
      position: fixed;
      top: calc(-1 * var(--modal-scroll-y, 0px));
      left: 0;
      right: 0;
      width: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }
    /* Keep the modal itself scrollable when its content overflows. */
    .modal-overlay.open .modal-body { overscroll-behavior: contain; }

    .modal-body {
      padding: 16px 20px;
      overflow-y: auto;
      flex: 1;
    }

    .modal-footer {
      padding: 12px 20px;
      border-top: 1px solid var(--border-default);
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    /* Wide modal variant (e.g. Bulk Share) */
    .modal.modal-wide { width: 1040px; max-width: 95vw; }
    .modal.modal-wide .modal-body { overflow-x: hidden; }

    /* ─── Mobile plan-details popup ─── */
    .tdp-edit-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }
    .tdp-field { display: flex; flex-direction: column; min-width: 0; }
    .tdp-field-wide { grid-column: 1 / -1; }
    .tdp-field-label {
      font-size: 11px; font-weight: 600; color: #64748b;
      margin-bottom: 4px; letter-spacing: 0.02em;
    }
    .tdp-input {
      width: 100%;
      padding: 8px 10px;
      font-size: 14px;
      border: 1px solid var(--border-default);
      border-radius: 8px;
      background: #fff;
      box-sizing: border-box;
    }
    .tdp-input:focus { outline: none; border-color: var(--color-primary, #0d9488); }
    .tdp-meta-line { font-size: 13px; color: #475569; padding: 4px 2px 0; }
    /* The country/city pickers we drop in here use absolute-positioned
       dropdowns. Make sure the modal-body doesn't clip them — fall back to
       overflow:visible only when the popup is showing edit fields. */
    .modal-body .country-picker, .modal-body .city-picker { position: relative; width: 100%; }
    .modal-body .country-picker-btn, .modal-body .city-picker-btn {
      width: 100%;
      padding: 8px 10px;
      font-size: 14px;
      border: 1px solid var(--border-default);
      border-radius: 8px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      box-sizing: border-box;
      min-height: 38px;
    }
    .tdp-section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #64748b;
      margin: 0 0 8px;
    }
    .trip-detail-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 16px;
    }
    .tdp-action {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      background: #fff;
      border: 1px solid var(--border-default);
      border-radius: 10px;
      padding: 10px 12px;
      cursor: pointer;
      text-align: left;
      transition: background 0.12s ease, border-color 0.12s ease;
    }
    .tdp-action:hover { background: #f8fafc; border-color: #cbd5e1; }
    .tdp-action:active { transform: translateY(1px); }
    .tdp-action.tdp-action-wide { grid-column: 1 / -1; }
    .tdp-emoji { font-size: 18px; line-height: 1; }
    .tdp-label { font-size: 13px; font-weight: 700; color: var(--color-text); margin-top: 4px; }
    .tdp-meta { font-size: 11px; color: #64748b; line-height: 1.3;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .trip-detail-calcs { display: flex; flex-direction: column; gap: 6px; }
    .tdp-calc {
      display: flex; justify-content: space-between; align-items: center;
      padding: 10px 12px; background: #f8fafc;
      border: 1px solid var(--border-default); border-radius: 8px;
      cursor: pointer; font-size: 13px;
    }
    .tdp-calc:hover { background: #f1f5f9; }
    .tdp-calc-label { font-weight: 600; color: var(--color-text); }
    .tdp-calc-value { color: #94a3b8; font-size: 16px; }
    /* AI review modal: subtle amber border on heuristic-flagged fields. */
    .ai-field-warn input, .ai-field-warn select, .ai-field-warn textarea { border-color: #fcd34d !important; background: #fffbeb; }
    .bulk-share-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }
    .bulk-share-col {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .bulk-share-col h4 {
      font-size: 13px;
      margin: 0 0 8px;
      position: sticky;
      top: 0;
      background: var(--color-surface);
      padding-bottom: 4px;
      z-index: 1;
    }
    .bulk-share-list {
      flex: 1;
      max-height: 50vh;
      overflow-y: auto;
      border: 1px solid #e5e0d8;
      border-radius: 8px;
      padding: 4px 8px;
    }
    .bulk-share-list-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 0;
      border-bottom: 1px solid #f0ede8;
      font-size: 13px;
    }
    .bulk-share-list-item:last-child { border-bottom: none; }

    /* ─── TRAVEL STATS TAB ─── */
    .stats-top-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin: 20px 0;
    }
    .stats-top-grid > * { min-width: 0; }

    .stats-card {
      background: var(--color-surface);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      padding: 20px;
      overflow: hidden;
    }
    .stats-map-card {
      position: relative;
      min-height: 380px;
      display: flex;
      flex-direction: column;
    }
    .stats-map-card svg {
      width: 100%;
      height: auto;
      flex: 1;
      display: block;
    }
    .stats-map-card svg path {
      fill: #eef2f5;
      stroke: #ffffff;
      stroke-width: 0.4;
      transition: fill 0.15s;
      cursor: pointer;
    }
    .stats-map-card svg path.visited { fill: var(--color-primary); }
    .stats-map-card svg path:hover { fill: #d8e0e6; }
    .stats-map-card svg path.visited:hover { fill: var(--color-primary-hover); }
    .stats-map-tooltip {
      position: absolute;
      pointer-events: none;
      background: #1e293b;
      color: #fff;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 11px;
      white-space: nowrap;
      z-index: 10;
      display: none;
    }
    .stats-map-legend {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: #64748b;
      margin-top: 8px;
    }
    .stats-map-legend-swatch {
      width: 12px;
      height: 12px;
      border-radius: 3px;
      display: inline-block;
    }
    .stats-map-credit {
      font-size: 10px;
      color: var(--color-text-muted);
      margin-top: 6px;
      text-align: right;
    }
    .stats-map-credit a { color: var(--color-text-secondary); text-decoration: none; }
    .stats-map-credit a:hover { text-decoration: underline; }
    .stats-map-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      color: #94a3b8;
      font-size: 13px;
    }

    /* ─── NomadPlan card system (shared) ─── */
    .np-card {
      background: var(--color-surface);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      padding: 18px 20px;
      box-shadow: var(--shadow-sm);
    }
    .np-card.np-card-tint {
      background: var(--color-primary-light);
      border-color: transparent;
    }
    .np-card.np-card-clickable {
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .np-card.np-card-clickable:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }

    .np-eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
      text-transform: uppercase; color: var(--color-text-secondary);
    }
    .np-bignum {
      font-size: 40px; font-weight: 800; line-height: 1.05;
      letter-spacing: -0.5px; color: var(--color-text);
    }
    .np-bignum .np-bignum-suffix {
      font-size: 16px; font-weight: 600; color: var(--color-text-muted); margin-left: 2px;
    }
    .np-subtle { font-size: 12px; color: var(--color-text-secondary); }

    /* Circular flag avatar */
    .np-flag-avatar {
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--color-primary-light);
      font-size: 22px; line-height: 1; flex: none;
    }
    .np-flag-avatar.np-flag-avatar-sm { width: 28px; height: 28px; font-size: 16px; }
    .np-flag-avatar.np-flag-avatar-lg { width: 56px; height: 56px; font-size: 30px; }

    /* Dashboard tile grid */
    .np-tile-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
    }
    @media (max-width: 600px) { .np-tile-grid { gap: 10px; } }

    /* Stats tile sizing — keep tiles roomy and consistent */
    .np-stat-tile { display: flex; flex-direction: column; gap: 4px; }
    .np-stat-tile .np-bignum { margin-top: 4px; }
    .stats-tile-grid-top { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .stats-tile-grid-bottom { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .stats-card h3 {
      margin: 0 0 14px;
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .stats-kv-grid {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 6px 16px;
      align-items: baseline;
    }
    .stats-kv-label {
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
      white-space: nowrap;
    }
    .stats-kv-value {
      font-size: 16px;
      font-weight: 800;
      color: var(--color-text);
      letter-spacing: -0.2px;
    }
    .stats-kv-sub {
      font-size: 12px;
      color: #64748b;
      font-weight: 400;
    }
    .stats-drill-trips {
      margin-top: 10px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
      max-height: 240px;
      overflow-y: auto;
    }
    .stats-drill-trip {
      padding: 8px 12px;
      border-top: 1px solid #f0ede8;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .stats-drill-trip:first-child { border-top: 0; }
    .stats-drill-trip-name {
      font-weight: 600;
      color: #1e293b;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .stats-drill-trip-meta {
      font-size: 11px;
      color: #64748b;
      font-variant-numeric: tabular-nums;
    }
    .stats-drill-trip-days { color: var(--color-primary-ink); font-weight: 600; }
    .stats-drill-trip:hover { background: #faf9f7; }
    .stats-world-tracker {
      margin-top: 24px;
    }
    .stats-world-tracker h3 {
      font-size: 15px;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 12px;
    }
    .stats-continent-group {
      border: 1px solid var(--border-default);
      border-radius: 10px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .stats-continent-summary {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      background: #f8f7f5;
      cursor: pointer;
      user-select: none;
      font-weight: 600;
      font-size: 13px;
      color: #1e293b;
    }
    .stats-continent-summary:hover { background: #f0ede8; }
    .stats-continent-count {
      margin-left: auto;
      font-size: 12px;
      color: #64748b;
      font-weight: 500;
    }
    .stats-continent-body {
      overflow-x: auto;
    }
    .stats-countries-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      min-width: 700px;
    }
    .stats-countries-table th {
      padding: 7px 10px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-align: left;
      border-bottom: 1px solid var(--border-default);
      white-space: nowrap;
      background: #fdfdfc;
    }
    .stats-countries-table td {
      padding: 5px 10px;
      border-top: 1px solid #f0ede8;
      vertical-align: middle;
    }
    .stats-countries-table tr:hover td { background: #faf9f7; }
    .stats-visited-icon { font-size: 14px; }
    .stats-flag-name { display: flex; align-items: center; gap: 6px; }
    .stats-country-notes {
      border: none;
      background: transparent;
      font-size: 12px;
      width: 100%;
      min-width: 80px;
      color: #475569;
      padding: 2px 4px;
    }
    .stats-country-notes:focus {
      outline: 1px solid var(--color-primary);
      border-radius: 4px;
      background: #fff;
    }
    .stats-first-visit-cell { white-space: nowrap; }
    .stats-first-visit-date {
      color: #475569;
      font-size: 12px;
      cursor: pointer;
      text-decoration: underline dotted;
    }
    .stats-first-visit-input {
      font-size: 11px;
      padding: 2px 4px;
      border: 1px solid var(--border-default);
      border-radius: 4px;
    }
    .stats-manual-days-input {
      font-size: 11px;
      padding: 2px 4px;
      border: 1px solid var(--border-default);
      border-radius: 4px;
      width: 52px;
    }
    .stats-bucket-section {
      margin: 16px 0;
      border: 1px solid #f0e6c8;
      border-radius: 10px;
      overflow: hidden;
      background: #fffdf7;
    }
    .stats-bucket-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: #fef9ec;
      cursor: pointer;
      user-select: none;
      font-weight: 600;
      font-size: 13px;
      color: #92400e;
    }
    .stats-bucket-header:hover { background: #fef3c7; }
    .stats-bucket-count {
      margin-left: auto;
      font-size: 12px;
      color: #b45309;
      font-weight: 500;
    }
    .stats-bucket-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      padding: 12px 14px;
    }
    .stats-bucket-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: #fff;
      border: 1px solid #f0e6c8;
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 12px;
      color: #374151;
    }
    @media (max-width: 768px) {
      .stats-top-grid { grid-template-columns: 1fr; }
    }

    .form-group { margin-bottom: 14px; }
    .form-group label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #555;
      margin-bottom: 4px;
    }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-family: inherit;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
      outline: none;
      border-color: var(--color-primary);
      box-shadow: var(--focus-ring);
    }
    .form-group textarea { resize: vertical; min-height: 80px; }

    .form-row { display: flex; gap: 12px; }
    .form-row .form-group { flex: 1; }
    /* Stack form rows on phones so labels/inputs aren't squeezed into
       sub-150px columns inside booking/event/task modals. */
    @media (max-width: 600px) {
      .form-row { flex-direction: column; gap: 8px; }
    }

    .task-list, .booking-list { list-style: none; }

    .task-item, .booking-item {
      padding: 10px 12px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-md);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: var(--shadow-sm);
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .task-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

    .task-item .task-text { flex: 1; font-size: 13px; }
    .task-item .task-text.completed { text-decoration: line-through; color: #999; }
    .task-item .task-due { font-size: 11px; color: #888; white-space: nowrap; }
    .task-item .task-due.overdue { color: #dc2626; font-weight: 600; }

    .booking-item { justify-content: space-between; }
    .booking-info { flex: 1; }
    .booking-type { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #666; }
    .booking-desc { font-size: 13px; margin-top: 2px; }
    .booking-dates { font-size: 11px; color: #888; margin-top: 2px; }

    /* Plan modal toolbar (Tasks/Events/Bookings on a specific plan) */
    .plan-toolbar { background:#f8fafc; border:1px solid var(--border-default); border-radius:10px; padding:10px 12px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
    .plan-toolbar-summary { display:flex; gap:10px; flex-wrap:wrap; align-items:center; font-size:12px; color:#475569; }
    .plan-toolbar-summary strong { color:#0f172a; font-weight:600; }
    .plan-toolbar-summary .pt-sep { color:#cbd5e1; }
    .plan-toolbar-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .plan-toolbar-search { flex:1; min-width:140px; padding:6px 10px; border:1px solid #d1d5db; border-radius:8px; font-size:12px; background:#fff; }
    .plan-toolbar-search:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(93,189,182,0.15); }
    .plan-chip-row { display:flex; gap:6px; flex-wrap:wrap; }
    .plan-chip { font-size:11px; padding:3px 9px; border:1px solid #d1d5db; border-radius:999px; background:#fff; color:#475569; cursor:pointer; user-select:none; white-space:nowrap; transition:all 0.12s; }
    .plan-chip:hover { border-color:#94a3b8; }
    .plan-chip.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
    .plan-section-header { font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.4px; margin:14px 0 6px; padding:0 4px; display:flex; align-items:center; gap:6px; }
    .plan-section-header.clickable { cursor:pointer; user-select:none; }
    .plan-section-header.clickable:hover { color:#0f172a; }
    .plan-section-header .pt-count { font-weight:500; color:#94a3b8; }
    details.plan-section-wrap > summary { list-style:none; }
    details.plan-section-wrap > summary::-webkit-details-marker { display:none; }
    details.plan-section-wrap > summary::before { content:'▶'; font-size:9px; color:#94a3b8; }
    details.plan-section-wrap[open] > summary::before { content:'▼'; }
    details.form-collapsible > summary { list-style:none; }
    details.form-collapsible > summary::-webkit-details-marker { display:none; }
    details.form-collapsible > summary::before { content:'▶ '; font-size:9px; color:#94a3b8; }
    details.form-collapsible[open] > summary::before { content:'▼ '; }
    .plan-add-toggle { background:#fff; border:1px dashed #94a3b8; border-radius:10px; padding:10px 14px; font-size:13px; font-weight:600; color:var(--color-primary); cursor:pointer; width:100%; text-align:center; transition:all 0.15s; margin:14px 0 0; }
    .plan-add-toggle:hover { background:var(--color-primary); color:#fff; border-style:solid; border-color:var(--color-primary); }
    .plan-add-toggle.open { background:#f0fdfa; color:#0f766e; border-style:solid; border-color:#5eead4; }
    .plan-add-form { padding:14px 0 4px; border-top:1px solid var(--border-default); margin-top:10px; }
    .plan-no-results { text-align:center; padding:20px 12px; color:#94a3b8; font-size:13px; }
    .plan-toolbar-clear { font-size:11px; color:#94a3b8; cursor:pointer; padding:3px 6px; text-decoration:underline; background:none; border:none; }
    .plan-toolbar-clear:hover { color:#475569; }

    .attachment-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 4px;
      font-size: 12px;
    }
    .attachment-link {
      color: #5DBDB6;
      text-decoration: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .attachment-link:hover { text-decoration: underline; }
    .attachment-size { color: #999; font-size: 11px; }
    .attachment-remove {
      background: none;
      border: none;
      color: #dc2626;
      cursor: pointer;
      font-size: 13px;
      padding: 0 2px;
    }
    .attachment-remove:hover { color: #b91c1c; }
    .attach-btn {
      background: none;
      border: 1px dashed #ccc;
      border-radius: 4px;
      padding: 2px 8px;
      font-size: 11px;
      color: #666;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .attach-btn:hover { border-color: #5DBDB6; color: #5DBDB6; }

    .mobile-label { display: none; }

    .empty-msg {
      text-align: center;
      padding: 32px 20px;
      color: var(--color-text-muted);
      font-size: 13px;
      line-height: 1.6;
      background: var(--color-surface-alt);
      border: 1px dashed var(--border-default);
      border-radius: var(--radius-md);
      margin: 8px 0;
    }
    .empty-msg b { color: var(--color-text-secondary); }

    /* Hero empty-state — used when a whole pane is empty. Bigger, more
       inviting; pairs with a primary CTA. */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 56px 24px;
      background: var(--color-surface);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      margin: 16px 0;
    }
    .empty-state-icon {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--color-primary-light);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 36px;
      margin-bottom: 16px;
    }
    .empty-state h3 {
      margin: 0 0 6px;
      font-size: 17px;
      font-weight: 800;
      color: var(--color-text);
      letter-spacing: -0.2px;
    }
    .empty-state p {
      margin: 0 0 18px;
      max-width: 380px;
      font-size: 13px;
      line-height: 1.55;
      color: var(--color-text-secondary);
    }
    .empty-state .empty-state-actions {
      display: inline-flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #1a1a1a;
      color: white;
      padding: 10px 18px;
      border-radius: var(--radius-md);
      font-size: 13px;
      font-weight: 600;
      z-index: 200;
      animation: fadeIn 0.2s;
      box-shadow: var(--shadow-lg);
    }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes slideUp { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .modal-overlay.open .modal { animation: slideUp 0.25s ease-out; }

    .add-row-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border-top: 1px solid var(--border-default);
    }

    .manage-bar {
      display: flex;
      gap: 8px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border-default);
      background: var(--color-surface-alt);
      align-items: center;
      flex-wrap: wrap;
    }

    .manage-bar .spacer { flex: 1; }

    .loading {
      text-align: center;
      padding: 40px;
      color: #999;
      font-size: 14px;
    }
    .loading::before {
      content: '';
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-right: 8px;
      vertical-align: middle;
      border: 2px solid #cbd5e1;
      border-top-color: #5DBDB6;
      border-radius: 50%;
      animation: np-spin 0.8s linear infinite;
    }
    @keyframes np-spin {
      to { transform: rotate(360deg); }
    }

    .db-badge {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 600;
    }
    .db-badge.connected { background: #d1fae5; color: #059669; }
    .db-badge.disconnected { background: #fee2e2; color: #dc2626; }
    .save-indicator {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 600;
      transition: opacity 0.3s;
    }
    .save-indicator.saving { background: #fef3c7; color: #92400e; }
    .save-indicator.saved { background: #d1fae5; color: #059669; }
    .save-indicator.fading { opacity: 0; }

    /* ─── Cmd-K search palette ─────────────────────────── */
    .cmdk-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.45);
      backdrop-filter: blur(2px);
      z-index: 200;
      align-items: flex-start;
      justify-content: center;
      padding-top: 12vh;
    }
    .cmdk-overlay.open { display: flex; }
    .cmdk-panel {
      width: min(640px, calc(100vw - 32px));
      background: var(--color-surface);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      max-height: 70vh;
      display: flex;
      flex-direction: column;
    }
    .cmdk-input-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border-default);
    }
    .cmdk-input-icon { font-size: 18px; line-height: 1; }
    .cmdk-input {
      flex: 1;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: 15px;
      color: var(--color-text);
      padding: 0;
    }
    .cmdk-input::placeholder { color: var(--color-text-muted); }
    .cmdk-kbd {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 3px 7px;
      border-radius: 4px;
      background: var(--color-surface-alt);
      color: var(--color-text-muted);
      border: 1px solid var(--border-default);
      text-transform: uppercase;
    }
    .cmdk-results {
      overflow-y: auto;
      padding: 6px 0;
      flex: 1;
    }
    .cmdk-section-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: var(--color-text-muted);
      padding: 8px 18px 4px;
    }
    .cmdk-result {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 18px;
      cursor: pointer;
      border: 0;
      background: transparent;
      width: 100%;
      text-align: left;
    }
    .cmdk-result:hover, .cmdk-result.selected {
      background: var(--color-primary-light);
    }
    .cmdk-result-icon {
      width: 32px; height: 32px;
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background: var(--color-surface-alt);
      font-size: 16px;
    }
    .cmdk-result-body { flex: 1; min-width: 0; }
    .cmdk-result-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cmdk-result-subtitle {
      font-size: 11px;
      color: var(--color-text-secondary);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .cmdk-empty {
      padding: 32px 18px;
      text-align: center;
      color: var(--color-text-muted);
      font-size: 13px;
    }
    .cmdk-empty .cmdk-hint {
      font-size: 11px;
      margin-top: 6px;
      opacity: 0.7;
    }

    /* Auth views */
    .auth-view {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #faf9f6 0%, #e0f2fe 50%, #E0F7F4 100%);
    }
    .auth-card {
      background: var(--color-surface);
      border-radius: var(--radius-lg);
      padding: 32px;
      width: 360px;
      max-width: 90vw;
      box-shadow: var(--shadow-lg);
    }
    /* Profile-specific desktop layout — wider card, 2-column grid for personal info + email prefs.
       Login/signup stay 360px because rules are scoped to #profileView. */
    @media (min-width: 1024px) {
      #profileView .auth-card { width: 880px; max-width: 92vw; padding: 40px 48px; }
      #profileView .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
      #profileView .profile-actions { display: flex; gap: 10px; flex-wrap: wrap; }
      #profileView .profile-actions .btn-auth { flex: 1; min-width: 180px; }
    }
    .auth-card h2 {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 4px;
    }
    .auth-card .auth-subtitle {
      font-size: 13px;
      color: #64748b;
      margin-bottom: 20px;
    }
    .auth-card .form-group {
      margin-bottom: 14px;
    }
    .auth-card label {
      display: block;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      margin-bottom: 4px;
    }
    .auth-card input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 14px;
      outline: none;
    }
    .auth-card input[type="checkbox"] {
      width: auto;
      padding: 0;
      border: none;
      border-radius: 0;
    }
    .auth-card input:focus {
      border-color: #5DBDB6;
      box-shadow: 0 0 0 3px rgba(93,189,182,0.1);
    }
    .auth-card .btn-auth {
      width: 100%;
      padding: 10px;
      background: var(--color-primary);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 6px;
      transition: all 0.15s ease;
    }
    .auth-card .btn-auth:hover { background: var(--color-primary-hover); box-shadow: 0 2px 8px rgba(93,189,182,0.3); }
    .auth-card .btn-auth:active { transform: scale(0.98); }
    .auth-card .auth-error {
      color: #dc2626;
      font-size: 12px;
      margin-top: 8px;
      display: none;
    }
    .header-user {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #64748b;
    }
    .btn-header {
      padding: 4px 10px;
      font-size: 12px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      background: white;
      cursor: pointer;
      color: #475569;
    }
    .btn-header:hover { background: #f1f5f9; }

    /* Sign-up toggle */
    .auth-toggle { text-align:center; margin-top:12px; font-size:13px; color:#64748b; }
    .auth-toggle a { color:#5DBDB6; cursor:pointer; font-weight:600; text-decoration:none; }
    .auth-toggle a:hover { text-decoration:underline; }

    /* Group detail view */
    .group-tabs {
      display:flex; gap:0; border-bottom:2px solid var(--border-default);
      padding:0 16px; background:var(--color-surface);
    }
    .group-tab {
      padding:10px 20px; border:none; background:none;
      font-size:14px; font-weight:600; color:var(--color-text-muted);
      cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px;
      transition: color 0.15s;
    }
    .group-tab:hover { color:var(--color-text-secondary); }
    .group-tab.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }

    /* Sub-nav (used inside Plans for List/Tasks/Events/Bookings and inside Social for Connections/Groups) */
    .sub-nav {
      display: flex;
      gap: 4px;
      padding: 12px 0 4px;
      flex-wrap: wrap;
    }
    .sub-nav-btn {
      padding: 9px 18px;
      border: 1px solid var(--border-default);
      background: var(--color-surface);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text-secondary);
      cursor: pointer;
      transition: all 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .sub-nav-btn:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }
    .sub-nav-btn.active {
      background: var(--color-primary);
      color: #fff;
      border-color: var(--color-primary);
    }
    .sub-nav-btn .tab-icon { font-size: 14px; }

    /* Inline group detail bar (inside Groups main tab) */
    .group-detail-bar {
      display:flex; align-items:center; gap:10px; padding:12px 0;
      margin-bottom:8px; border-bottom:1px solid var(--border-default);
    }
    .group-detail-bar .spacer { flex:1; }
    .group-detail-bar select {
      font-size:16px; font-weight:700; border:1px solid var(--border-default);
      background:var(--color-surface); cursor:pointer; color:inherit;
      max-width:300px; padding:4px 10px; border-radius:6px;
    }

    /* Shared content card chrome (event cards, accom cards, group trip cards). */
    .content-card {
      background:var(--color-surface); border:1px solid var(--border-default); border-radius:var(--radius-md);
      padding:14px 16px; margin-bottom:10px; box-shadow:var(--shadow-sm);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .content-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md); }

    /* Dashed-border button variant (replaces inline border-style:dashed). */
    .btn-dashed { border-style: dashed !important; }

    /* Status chips for plan status / accommodation status. Emoji is aria-hidden in markup. */
    .status-chip { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:4px; line-height:1.4; }
    .status-chip.status-go { background:#dcfce7; color:#166534; }
    .status-chip.status-idea { background:#fef3c7; color:#92400e; }
    .status-chip.status-booked { background:#dcfce7; color:#166534; }
    .status-chip.status-shopping { background:#fef3c7; color:#92400e; }
    .status-chip.status-looking { background:#dbeafe; color:#1d4ed8; }
    .status-chip.status-mutual  { background:#f0f4f8; color:#475569; }
    .status-chip.status-pending { background:#fef3c7; color:#92400e; }

    /* Calendar day-cell indicator chip (linked plans + accom searches) */
    .cal-day { position: relative; }

    .week-day-header { display: flex; align-items: center; gap: 6px; }

    /* ─── 💬 WhatsApp tab ─── */
    .wa-tab-section { margin-bottom: 24px; }
    .wa-tab-section:last-child { margin-bottom: 0; }
    .wa-tab-section-label {
      font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
      text-transform: uppercase; color: #64748b; margin: 0 0 8px;
    }
    .wa-row { display: flex; align-items: stretch; gap: 6px; margin-bottom: 8px; }
    .wa-row:last-child { margin-bottom: 0; }
    .wa-btn {
      flex: 1; display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; border-radius: 10px;
      font-size: 14px; font-weight: 600; line-height: 1.3;
      text-decoration: none; cursor: pointer; min-width: 0;
    }
    .wa-btn-active { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
    .wa-btn-active:hover { background: #bbf7d0; }
    .wa-btn-empty { background: #f0fdf4; color: #166534; border: 1px dashed #86efac; }
    .wa-btn-empty:hover { background: #dcfce7; }
    .wa-btn-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .wa-btn-label {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .wa-btn-sub {
      font-size: 11px; font-weight: 500; color: #475569;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .wa-edit-btn {
      background: none; border: 1px solid var(--border-default);
      border-radius: 8px; cursor: pointer; font-size: 14px;
      padding: 6px 10px; color: #64748b; flex: 0 0 auto;
    }
    .wa-edit-btn:hover { background: #f1f5f9; }
    .wa-empty {
      font-size: 13px; color: #94a3b8; padding: 14px;
      background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 8px;
      text-align: center;
    }

    .group-trip-card { padding:12px 16px; }
    .group-trip-card.is-me { box-shadow: inset 4px 0 0 var(--color-primary), var(--shadow-sm); }
    .group-trip-card .gtc-row1 { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .group-trip-card .gtc-name { font-size:14px; font-weight:600; min-width:0; }
    .group-trip-card .gtc-name .me-badge { font-size:10px; color:var(--color-primary); margin-left:6px; }
    .group-trip-card .gtc-meta { font-size:12px; color:var(--color-text-secondary); margin-top:4px; }
    .group-trip-card .gtc-dates { font-size:12px; color:var(--color-text-secondary); margin-top:2px; }
    .group-trip-card .gtc-notes { font-size:12px; color:#475569; margin-top:6px; display:flex; align-items:flex-start; gap:10px; }
    .group-trip-card .gtc-notes-text { flex:1; min-width:0; }
    .group-trip-card .gtc-notes-text.empty { color:#cbd5e1; }
    .group-trip-card .gtc-edit { border:none; background:#5DBDB6; color:#fff; border-radius:6px; padding:3px 10px; font-size:11px; cursor:pointer; white-space:nowrap; flex:0 0 auto; }

    /* Accom interest toggle caret */
    .accom-interest-toggle { background:transparent; border:none; padding:0; color:#5DBDB6; font-size:11px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
    .accom-interest-toggle .caret { display:inline-block; transition: transform 0.15s ease; font-size:10px; }
    .accom-interest-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }

    /* Notifications form: capped on desktop, full-width on mobile */
    .group-notifs-form { max-width: 480px; }
    .group-notifs-form fieldset { border:0; padding:0; margin:0; }
    .group-notifs-form legend { font-size:14px; font-weight:600; margin-bottom:6px; padding:0; }
    .group-notifs-form .help { font-size:12px; color:var(--color-text-muted); margin:0 0 12px; }

    .event-card {
      background:var(--color-surface); border:1px solid var(--border-default); border-radius:var(--radius-md);
      padding:14px 16px; margin-bottom:10px; box-shadow:var(--shadow-sm);
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .event-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md); }
    .event-card-header {
      display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:6px;
    }
    .event-card-title { font-size:14px; font-weight:600; letter-spacing:-0.1px; }
    .event-card-title a { color:#5DBDB6; text-decoration:none; }
    .event-card-title a:hover { text-decoration:underline; }
    .event-card-meta { font-size:12px; color:#64748b; display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
    .event-card-notes { font-size:12px; color:#475569; margin-bottom:8px; }
    .event-card-actions { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

    .vote-btn {
      padding:4px 10px; font-size:11px; font-weight:600;
      border:1px solid var(--border-default); border-radius:14px;
      background:var(--color-surface); cursor:pointer; display:inline-flex; align-items:center; gap:4px;
      transition: all 0.15s ease;
    }
    .vote-btn:hover { border-color:var(--color-primary); }
    .vote-btn:active { transform:scale(0.95); }
    .vote-btn.voted-in { background:#E0F7F4; border-color:#5DBDB6; color:#5DBDB6; }
    .vote-btn.voted-interested { background:#fef9c3; border-color:#eab308; color:#a16207; }
    .vote-btn.voted-out { background:#fee2e2; border-color:#dc2626; color:#dc2626; }
    .vote-expand-btn { padding:4px 10px; font-size:11px; font-weight:600; background:none; border:1px solid #d0d0d0; border-radius:14px; cursor:pointer; color:#64748b; }
    .vote-expand-btn:hover { background:#f8f6f3; border-color:#5DBDB6; color:#5DBDB6; }
    .vote-details { margin-top:8px; padding:8px 10px; background:var(--color-surface-alt); border-radius:var(--radius-md); border:1px solid var(--border-default); }
    .vote-detail-group { font-size:12px; margin-bottom:4px; }
    .vote-detail-group:last-child { margin-bottom:0; }
    .vote-detail-label { font-weight:600; }
    .vote-detail-label.voted-in-label { color:#5DBDB6; }
    .vote-detail-label.voted-interested-label { color:#a16207; }
    .vote-detail-label.voted-out-label { color:#dc2626; }
    .export-btn { padding:4px 10px; font-size:11px; font-weight:500; background:none; border:1px solid var(--border-default); border-radius:var(--radius-sm); cursor:pointer; color:var(--color-text-secondary); transition:all 0.15s ease; }
    .export-btn:hover { background:var(--color-surface-alt); border-color:var(--color-primary); color:var(--color-primary); }

    .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border-default); border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
    .cal-header { background:#f8f6f3; padding:6px; text-align:center; font-size:11px; font-weight:600; color:#64748b; }
    .cal-day { background:var(--color-surface); min-height:44px; padding:3px 4px; font-size:11px; position:relative; }
    .cal-day.other-month { background:var(--color-surface-alt); color:var(--color-text-muted); }
    .cal-day.today { background:var(--color-primary-bg); }
    .cal-day-num { font-weight:600; margin-bottom:1px; line-height:1.1; }

    /* Week view */
    .week-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border-default); border:1px solid var(--border-default); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); }
    .week-day { background:var(--color-surface); min-height:50px; }
    .week-day.today { background:var(--color-primary-bg); }
    .week-day-header { padding:4px 6px; text-align:center; font-size:12px; color:var(--color-text-secondary); background:var(--color-surface-alt); border-bottom:1px solid var(--border-default); }
    .week-day-events { padding:3px 4px; }

    /* Day view */
    .day-events { display:flex; flex-direction:column; gap:8px; }
    .day-event-card { display:flex; gap:16px; padding:14px 16px; background:var(--color-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color 0.15s, box-shadow 0.15s; }
    .day-event-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md); }
    .day-event-time { min-width:90px; font-size:13px; font-weight:600; color:#5DBDB6; padding-top:2px; }
    .day-event-info { flex:1; }
    .day-event-info a { color:#5DBDB6; text-decoration:none; }
    .day-event-info a:hover { text-decoration:underline; }

    /* Day cell — emoji+count chips */
    .cal-cell-chips { display:flex; flex-wrap:wrap; gap:2px; margin-top:2px; }
    .cal-cell-chip { display:inline-flex; align-items:center; gap:2px; font-size:10px; padding:0 5px; border-radius:10px; line-height:1.3; white-space:nowrap; font-weight:500; cursor:pointer; transition:filter 0.12s; }
    .cal-cell-chip:hover { filter:brightness(0.92); }
    .cal-cell-chip-task    { background:#fef3c7; color:#92400e; }
    .cal-cell-chip-event   { background:#dbeafe; color:#1e40af; }
    .cal-cell-chip-booking { background:#E0F7F4; color:#115e59; }
    .cal-cell-chip-trip    { background:#d1fae5; color:#065f46; }
    .cal-cell-chip-shared  { background:rgba(167,139,250,0.18); color:#5b21b6; border:1px dashed #a78bfa; }

    /* Per-type collapsible timeline sections (Month + Week) */
    :root { --cal-tl-gutter: 260px; }
    .cal-tl-section { border:1px solid var(--border-default); border-radius:var(--radius-md); margin-top:12px; background:var(--color-surface); overflow:hidden; }
    .cal-tl-header { list-style:none; cursor:pointer; padding:10px 14px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#334155; background:var(--color-surface-alt); border-bottom:1px solid transparent; transition:background 0.12s, border-color 0.12s; }
    .cal-tl-header::-webkit-details-marker { display:none; }
    .cal-tl-section[open] .cal-tl-header { border-bottom-color:var(--border-default); }
    .cal-tl-header:hover { background:#eef2f6; }
    .cal-tl-caret { display:inline-block; transition:transform 0.15s; font-size:11px; color:#64748b; transform:rotate(-90deg); }
    .cal-tl-section[open] .cal-tl-caret { transform:rotate(0deg); }
    .cal-tl-icon { font-size:14px; }
    .cal-tl-title { flex:1; }
    .cal-tl-count { font-size:11px; padding:2px 8px; border-radius:10px; background:#e2e8f0; color:#475569; font-weight:500; }
    .cal-tl-body { padding:8px 12px 12px; }
    .cal-tl-axis { display:grid; gap:0; padding-bottom:6px; border-bottom:1px solid #e2e8f0; margin-bottom:6px; }
    .cal-tl-day-label { font-size:9px; color:#64748b; padding:2px 0; border-left:1px solid #f1f5f9; text-align:center; line-height:1.2; }
    .cal-tl-day-label:first-of-type { border-left:none; }
    .cal-tl-dow { color:#94a3b8; }
    .cal-tl-row { display:grid; grid-template-columns: var(--cal-tl-gutter) 1fr; align-items:center; min-height:24px; padding:2px 0; cursor:pointer; gap:8px; }
    .cal-tl-row:hover .cal-tl-bar { filter:brightness(0.95); }
    .cal-tl-label { font-size:11px; color:#334155; padding-right:8px; line-height:1.35; word-break:break-word; }
    .cal-tl-sub { color:#94a3b8; }
    .cal-tl-track {
      display:grid; gap:0; min-height:18px; position:relative;
      /* Vertical day-divider lines that run across every row so it's easier
         to see which day a bar lands on. The number of days is passed in via
         --cal-tl-days on the inline style (week=7, month=~30). */
      background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(100% / var(--cal-tl-days, 7) - 1px),
        #e2e8f0 calc(100% / var(--cal-tl-days, 7) - 1px),
        #e2e8f0 calc(100% / var(--cal-tl-days, 7))
      );
    }
    .cal-tl-bar { border-radius:4px; height:8px; padding:0 6px; font-size:8px; line-height:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:center; color:#fff; box-sizing:border-box; }
    .cal-tl-bar-task    { background:#f59e0b; }
    .cal-tl-bar-event   { background:#3b82f6; }
    .cal-tl-bar-booking { background:#5DBDB6; }
    .cal-tl-bar-shared  { background:rgba(167,139,250,0.28); color:#5b21b6; border:1px dashed #a78bfa; }
    .cal-tl-bar-shared-idea { background:rgba(167,139,250,0.14); color:#5b21b6; border:1px dotted #a78bfa; }
    .cal-tl-bar-trip    { background:rgba(16,185,129,0.30); color:#065f46; border:1px solid #10b981; }
    .cal-tl-bar-trip-idea { background:rgba(16,185,129,0.14); color:#065f46; border:1px dashed #10b981; }
    .cal-tl-bar-group   { background:#0ea5e9; }
    /* Inline status chip on shared-plan rows (✅ confirmed / 💡 idea) */
    .cal-tl-status { display:inline-block; font-size:10px; line-height:1; padding:1px 4px; border-radius:8px; margin-left:4px; vertical-align:middle; }
    .cal-tl-status-go   { background:#dcfce7; }
    .cal-tl-status-idea { background:#fef3c7; }
    /* Inline tag chip — used on Events timeline rows to flag group events. */
    .cal-tl-tag { display:inline-block; font-size:10px; line-height:1; padding:2px 6px; border-radius:8px; margin-right:6px; vertical-align:middle; font-weight:600; }
    .cal-tl-tag-group { background:#e0f2fe; color:#075985; border:1px solid #7dd3fc; }
    .cal-tl-bar.overflow-left  { border-top-left-radius:0;  border-bottom-left-radius:0; }
    .cal-tl-bar.overflow-left::before  { content:'…'; margin-right:3px; opacity:0.7; }
    .cal-tl-bar.overflow-right { border-top-right-radius:0; border-bottom-right-radius:0; }
    .cal-tl-bar.overflow-right::after  { content:'…'; margin-left:3px; opacity:0.7; }
    /* Groups multi-select chip + popover */
    .dash-cal-groups-wrap { position:relative; display:inline-block; }
    .dash-cal-groups-menu { position:absolute; top:calc(100% + 4px); left:0; min-width:200px; max-width:280px; max-height:240px; overflow-y:auto; background:var(--color-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-md); padding:6px; z-index:50; }
    .dash-cal-groups-item { display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:12px; color:#334155; cursor:pointer; border-radius:4px; }
    .dash-cal-groups-item:hover { background:#f1f5f9; }
    .dash-cal-groups-item input { cursor:pointer; }
    .dash-cal-groups-divider { border-top:1px solid var(--border-default); margin:4px 0; }
    /* Title-bar chip variant — slimmer than the type chips, matches nav buttons. */
    .dash-cal-title-chip { background:white; border:1px solid #d1d5db; border-radius:8px; padding:5px 10px; cursor:pointer; font-size:12px; color:#334155; display:inline-flex; align-items:center; gap:6px; transition:background 0.12s, border-color 0.12s; }
    .dash-cal-title-chip:hover { background:#f8fafc; }
    .dash-cal-title-chip.active { background:#e0f2fe; border-color:#7dd3fc; color:#075985; }
    @media (max-width:600px) {
      :root { --cal-tl-gutter: 140px; }
      .cal-cell-chip { font-size:9px; padding:0 4px; }
      .cal-cell-chips { gap:2px; }
      .dash-cal-groups-menu { left:auto; right:0; min-width:180px; }
    }
    /* Day view collapsible groups */
    .day-group { border:1px solid var(--border-default); border-radius:var(--radius-md); margin-bottom:8px; background:var(--color-surface); overflow:hidden; }
    .day-group-header { list-style:none; cursor:pointer; padding:10px 14px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#334155; background:var(--color-surface-alt); border-bottom:1px solid transparent; transition:background 0.12s, border-color 0.12s; }
    .day-group-header::-webkit-details-marker { display:none; }
    .day-group[open] .day-group-header { border-bottom-color:var(--border-default); }
    .day-group-header:hover { background:#eef2f6; }
    .day-group-caret { display:inline-block; transition:transform 0.15s; font-size:11px; color:#64748b; transform:rotate(-90deg); }
    .day-group[open] .day-group-caret { transform:rotate(0deg); }
    .day-group-icon { font-size:14px; }
    .day-group-label { flex:1; }
    .day-group-count { font-size:11px; padding:2px 8px; border-radius:10px; background:#e2e8f0; color:#475569; font-weight:500; }
    .day-group-body { padding:10px 12px; }
    .day-group-body .day-event-card { margin-bottom:8px; }
    .day-group-body .day-event-card:last-child { margin-bottom:0; }

    .dash-list-card { display:flex; gap:12px; padding:10px 14px; background:var(--color-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); margin-bottom:6px; align-items:center; box-shadow:var(--shadow-sm); transition:border-color 0.15s, box-shadow 0.15s; }
    .dash-list-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md); }
    .dash-list-card.past-item { opacity:0.5; }
    .dash-trip-badge { font-size:10px; background:#f1f5f9; color:#475569; padding:2px 8px; border-radius:10px; white-space:nowrap; }
    .dash-type-icon { font-size:18px; min-width:28px; text-align:center; }
    .dash-section-header { font-size:14px; font-weight:600; color:#334155; margin:20px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--border-default); }
    .dash-section-header:first-child { margin-top:0; }
    .dash-overdue { color:#dc2626; font-weight:600; }
    .dash-completed { text-decoration:line-through; opacity:0.5; }
    .dash-legend { display:flex; gap:16px; align-items:center; font-size:11px; color:#64748b; }
    .dash-legend-dot { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:middle; }

    /* Dashboard calendar toolbar */
    .dash-cal-toolbar { background:#f8fafc; border:1px solid var(--border-default); border-radius:10px; padding:10px 12px; margin-bottom:12px; display:flex; flex-direction:column; gap:8px; }
    .dash-cal-toolbar-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .dash-cal-views { display:flex; gap:4px; padding:2px; background:#fff; border:1px solid #d1d5db; border-radius:8px; }
    .dash-cal-views button { background:none; border:none; font-size:12px; padding:5px 12px; border-radius:6px; cursor:pointer; color:#475569; font-weight:500; transition:all 0.12s; }
    .dash-cal-views button:hover { background:#f1f5f9; }
    .dash-cal-views button.active { background:var(--color-primary); color:#fff; }
    .dash-cal-today-btn { background:#fff; border:1px solid #d1d5db; border-radius:8px; padding:5px 12px; font-size:12px; font-weight:600; color:#0f172a; cursor:pointer; transition:all 0.12s; }
    .dash-cal-today-btn:hover { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
    .dash-cal-jump { padding:5px 8px; border:1px solid #d1d5db; border-radius:8px; font-size:12px; background:#fff; cursor:pointer; }
    .dash-cal-period { font-size:14px; font-weight:600; color:#0f172a; flex:1; text-align:center; min-width:140px; }
    .dash-cal-period button { background:none; border:none; font-size:16px; cursor:pointer; padding:0 8px; color:#475569; }
    .dash-cal-period button:hover { color:var(--color-primary); }
    .dash-cal-search { flex:1; min-width:140px; padding:6px 10px; border:1px solid #d1d5db; border-radius:8px; font-size:12px; background:#fff; }
    .dash-cal-search:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(93,189,182,0.15); }

    .dash-cal-type-chips { display:flex; gap:6px; flex-wrap:wrap; }
    .dash-cal-type-chip { font-size:11px; padding:3px 9px; border:1px solid #d1d5db; border-radius:999px; background:#fff; color:#475569; cursor:pointer; user-select:none; white-space:nowrap; transition:all 0.12s; display:inline-flex; align-items:center; gap:4px; }
    .dash-cal-type-chip:hover { border-color:#94a3b8; }
    .dash-cal-type-chip.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
    .dash-cal-type-chip.active .dash-legend-dot { box-shadow:0 0 0 2px #fff; }
    .cal-day { cursor:pointer; transition:background 0.12s; }
    .cal-day:hover { background:#f8fafc; }
    .cal-day.other-month { cursor:default; }
    .cal-day.other-month:hover { background:transparent; }

    /* Dashboard list filter toolbar */
    .dash-filter-bar { position:sticky; top:0; z-index:5; background:var(--color-surface); padding:10px 0 8px; margin:0 0 8px; border-bottom:1px solid var(--border-default); display:flex; flex-direction:column; gap:8px; }
    .dash-filter-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
    .dash-filter-search { flex:1; min-width:160px; padding:7px 10px; border:1px solid #d1d5db; border-radius:8px; font-size:13px; background:#fff; }
    .dash-filter-search:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(93,189,182,0.15); }
    .dash-filter-select { padding:7px 8px; border:1px solid #d1d5db; border-radius:8px; font-size:13px; background:#fff; max-width:200px; }
    .dash-chip-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
    .dash-chip { font-size:12px; padding:4px 10px; border:1px solid #d1d5db; border-radius:999px; background:#fff; color:#475569; cursor:pointer; user-select:none; white-space:nowrap; transition:all 0.12s; }
    .dash-chip:hover { border-color:#94a3b8; }
    .dash-chip.active { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }
    .dash-chip-clear { font-size:11px; color:#94a3b8; cursor:pointer; padding:4px 8px; text-decoration:underline; background:none; border:none; }
    .dash-chip-clear:hover { color:#475569; }
    .dash-result-count { font-size:11px; color:#64748b; margin-left:auto; }
    .dash-month-header { font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; margin:14px 0 6px; padding:0; }
    .dash-month-header:first-of-type { margin-top:8px; }
    .dash-no-results { text-align:center; padding:32px 16px; color:#94a3b8; font-size:13px; }
    @media (max-width: 768px) {
      .dash-filter-select { flex:1; max-width:none; min-width:120px; }
      .dash-result-count { width:100%; margin-left:0; }
    }

    /* People tab */
    .people-section { margin-bottom:20px; }
    .invite-friends-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; margin-bottom:16px; }
    .invite-friends-label { font-size:13px; font-weight:600; color:#166534; }
    .invite-friends-btns { display:flex; gap:8px; flex-shrink:0; }
    .invite-btn { border:none; border-radius:20px; padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer; transition:background 0.15s; }
    .invite-btn-wa { background:#25d366; color:#fff; }
    .invite-btn-wa:hover { background:#1daf55; }
    .invite-btn-email { background:#0891b2; color:#fff; }
    .invite-btn-email:hover { background:#0e7490; }
    .people-section-title { font-size:14px; font-weight:600; margin-bottom:8px; color:#334155; }
    .people-card { display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--color-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); margin-bottom:6px; box-shadow:var(--shadow-sm); transition:border-color 0.15s, box-shadow 0.15s; }
    .people-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md); }
    .people-status { font-size:10px; padding:2px 8px; border-radius:10px; font-weight:600; }
    .people-status.status-accepted { background:#E0F7F4; color:#5DBDB6; }
    .people-status.status-pending { background:#fef3c7; color:#92400e; }
    .people-status.status-cantgo { background:#fef9c3; color:#a16207; }
    .people-status.status-declined { background:#fee2e2; color:#dc2626; }

    /* Accommodation cards */
    .accom-card { background:var(--color-surface); border:1px solid var(--border-default); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:10px; box-shadow:var(--shadow-sm); transition:border-color 0.15s, box-shadow 0.15s; }
    .accom-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md); }
    .accom-card-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }

    .invite-banner {
      background:#F4FBFA; border:1px solid #bfdbfe; border-radius:8px;
      padding:10px 16px; margin-bottom:8px; display:flex; align-items:center;
      gap:10px; font-size:13px; color:#1e40af;
    }
    .invite-banner button { font-size:12px; }

    /* Group section */
    .group-section { margin-top:16px; }
    .group-section-header {
      display:flex; align-items:center; gap:8px; padding:10px 16px;
      background:#f8fafc; border:1px solid var(--border-default); border-radius:var(--radius-md) var(--radius-md) 0 0;
      cursor:pointer; font-size:14px; font-weight:600; color:#334155;
      transition: background 0.15s;
    }
    .group-section-header:hover { background:#f1f5f9; }
    .group-section-header .arrow { font-size:10px; transition:transform 0.15s; }
    .group-section-header .arrow.expanded { transform:rotate(90deg); }
    .group-section-body {
      display:none; border:1px solid var(--border-default); border-top:none;
      border-radius:0 0 var(--radius-md) var(--radius-md); overflow:hidden;
    }
    .group-section-body.expanded { display:block; }
    .group-member-table { width:100%; border-collapse:collapse; font-size:12px; }
    .group-member-table th {
      background:#fafaf8; padding:6px 10px; text-align:left;
      font-size:11px; font-weight:700; color:#666; border-bottom:1px solid var(--border-default);
    }
    .group-member-table td {
      padding:6px 10px; border-bottom:1px solid #f0f0f0; vertical-align:middle;
    }

    .group-link-list { list-style:none; padding:0; margin:0; }
    .group-link-list li { display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-bottom:1px solid #f1f5f9; font-size:13px; }
    .group-link-list li:last-child { border-bottom:none; }
    .group-link-check { display:flex; align-items:center; gap:8px; }
    .group-link-check input[type="checkbox"] { width:16px; height:16px; }
    /* Group modal list */
    .group-list-item {
      display:flex; align-items:center; justify-content:space-between;
      padding:10px 12px; border:1px solid var(--border-default); border-radius:var(--radius-md);
      margin-bottom:6px; cursor:pointer; transition:all 0.15s ease; box-shadow:var(--shadow-sm);
    }
    .group-list-item:hover { background:#f8fafc; border-color:var(--color-primary); box-shadow:var(--shadow-md); }
    .group-list-item .group-name { font-weight:600; font-size:13px; }
    .group-list-item .group-count { font-size:11px; color:#94a3b8; }
    .member-item {
      display:flex; align-items:center; justify-content:space-between;
      padding:8px 10px; border-bottom:1px solid #f0f0f0; font-size:13px;
    }
    .member-item:last-child { border-bottom:none; }
    .role-badge {
      font-size:10px; font-weight:600; padding:1px 6px;
      border-radius:8px; text-transform:uppercase;
    }
    .role-badge.owner { background:#fef3c7; color:#92400e; }
    .role-badge.member { background:#E0F7F4; color:#115e59; }
    .status-badge-invite {
      font-size:10px; font-weight:600; padding:1px 6px;
      border-radius:8px;
    }
    .status-badge-invite.pending { background:#fef9c3; color:#854d0e; }
    .status-badge-invite.accepted { background:#d1fae5; color:#065f46; }
    .status-badge-invite.declined { background:#fee2e2; color:#991b1b; }

    /* Assigned to badge */
    .assigned-badge {
      font-size:10px; padding:1px 6px; border-radius:8px;
      background:#f0fdf4; color:#0f766e; font-weight:500; white-space:nowrap;
    }

    /* Mobile-only / mobile-hide helpers — used to swap toolbar controls
       between the desktop layout and the compact mobile layout. */
    .mobile-only { display: none !important; }

    /* ─── MOBILE RESPONSIVE ─────────────────────────────── */

    @media (max-width: 768px) {

      /* ── Header ── */
      header {
        flex-wrap: wrap;
        padding: 12px 14px;
        gap: 8px;
      }
      header h1 { font-size: 18px; }
      .header-actions.header-user {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
      }
      .header-actions.header-user > span#userEmail {
        display: none;
      }
      .btn-header { padding: 5px 8px; font-size: 11px; }
      .db-badge { font-size: 9px; padding: 1px 6px; }

      /* ── Main ── */
      main { padding: 8px 8px; }

      /* ── Tab navigation — horizontal scroll ── */
      .group-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 8px;
        gap: 0;
        flex-wrap: nowrap;
      }
      .group-tabs::-webkit-scrollbar { display: none; }
      .group-tab {
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
        flex-shrink: 0;
      }
      /* Mobile: collapse group sub-tabs to icons only so all five fit
         comfortably across the viewport. Hover/title still surfaces the
         label for discovery. */
      .group-tab .tab-label { display: none; }
      .group-tab .tab-icon { font-size: 18px; }
      .group-tab { padding: 8px 14px; }

      /* Main app tabs: icons only, evenly distributed across screen */
      #mainAppTabs {
        margin: 0 8px !important;
        overflow-x: visible;
        padding: 0;
        justify-content: space-around;
      }
      #mainAppTabs .group-tab {
        flex: 1 1 0;
        padding: 8px 4px;
        font-size: 18px;
        text-align: center;
      }
      #mainAppTabs .tab-label { display: none; }
      #mainAppTabs .tab-icon { font-size: 20px; }

      /* ── Filter/manage bar ── */
      .manage-bar {
        padding: 8px 10px;
        gap: 6px;
        flex-wrap: wrap;
      }
      .manage-bar .spacer { display: none; }
      .manage-bar > div { width: 100%; flex-wrap: wrap; }
      .filter-quick { font-size: 10px !important; padding: 3px 6px !important; }
      .add-row-bar { flex-wrap: wrap; gap: 6px; padding: 0 10px; }

      /* Reveal mobile-only controls and hide their desktop counterparts. */
      .mobile-only { display: inline-flex !important; }
      .mobile-hide { display: none !important; }

      /* The plans-filter section (date inputs + quick presets) is hidden by
         default on phones. Tapping the 🔍 Filter pill toggles .open which
         reveals a compact two-row sheet: date inputs side-by-side, then
         quick presets in a 4-up grid. */
      .plans-filter-section { display: none !important; }
      .plans-filter-section.open {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        background: #fafaf8;
        border: 1px solid var(--border-default);
        border-radius: 8px;
        padding: 10px;
        gap: 6px 8px !important;
      }
      .plans-filter-section.open label {
        font-size: 12px; font-weight: 600; color: #666;
        flex: 0 0 auto; margin: 0;
      }
      .plans-filter-section.open input[type="date"] {
        flex: 1 1 calc(50% - 60px);
        min-width: 0;
        font-size: 13px; padding: 6px 8px;
      }
      /* Hide the divider span between dates and quick filters. */
      .plans-filter-section.open > span { display: none !important; }
      /* Quick filters + Clear: four across, tap-friendly. */
      .plans-filter-section.open .filter-quick, .plans-filter-section.open > button {
        flex: 1 1 calc(25% - 6px);
        min-width: 0;
        font-size: 12px !important;
        padding: 7px 4px !important;
        text-align: center;
        white-space: nowrap;
      }
      .mobile-filter-toggle.active {
        background: var(--color-primary, #0d9488) !important;
        color: #fff !important;
        border-color: var(--color-primary, #0d9488) !important;
      }

      /* ── Plans table → compact mobile cards ── */
      #mainPlansPane .table-wrapper { overflow-x: visible; border: none; background: transparent; box-shadow: none; }

      #mainPlansPane table { min-width: unset; width: 100%; }
      #mainPlansPane table thead { display: none; }
      #mainPlansPane table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 4px;
        background: var(--color-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        margin-bottom: 6px;
        padding: 8px 110px 8px 10px;
        position: relative;
        box-shadow: var(--shadow-sm);
        min-height: 100px;
      }
      /* Idea lane card backgrounds — base first, then lane variants override */
      #mainPlansPane table tbody tr.idea-row { background: #f8f9fc !important; }
      #mainPlansPane table tbody tr.idea-row-a { background: #dbeafe !important; border-color: #93c5fd; }
      #mainPlansPane table tbody tr.idea-row-b { background: #ffedd5 !important; border-color: #fdba74; }

      #mainPlansPane table tbody tr.gap-row {
        display: flex;
        background: #fffbeb !important;
        border: 1px solid #fde68a;
        border-radius: var(--radius-sm);
        padding: 6px 10px;
        cursor: default;
        min-height: 0;
        margin-bottom: 4px;
        box-shadow: none;
      }
      #mainPlansPane table tbody tr.gap-row td { display: block !important; }
      #mainPlansPane table tbody tr.decision-bar-row {
        display: flex;
        border: none;
        padding: 0;
        background: transparent !important;
        cursor: default;
        min-height: 0;
        margin-bottom: 4px;
        box-shadow: none;
      }
      #mainPlansPane table tbody tr.decision-bar-row td { display: block !important; }
      #mainPlansPane table tbody td {
        display: none;
        border: none;
        padding: 0;
        font-size: 13px;
      }

      /* Unify card background: neutralize per-TD tints so the TR color shows through */
      #mainPlansPane table tbody tr > td, #mainPlansPane table tbody tr.idea-row > td, #mainPlansPane table tbody tr.idea-row-a > td, #mainPlansPane table tbody tr.idea-row-b > td, #mainPlansPane table tbody tr.overlap-row > td {
        background: transparent !important;
      }
      #mainPlansPane table tbody tr .total-days-badge {
        background: transparent !important;
        padding-left: 0;
        padding-right: 0;
      }

      /* ── Compact card: text rows flow left; pills+delete absolutely on right ── */
      /* Row 1: Plan name (full-width flex item) */
      #mainPlansPane table tbody td.trip-name-cell {
        display: block;
        order: 1;
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        overflow: visible;
      }
      .trip-name-cell { min-width: unset; max-width: unset; }
      #mainPlansPane table tbody td.trip-name-cell .trip-name-input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        display: block;
        font-size: 13px;
        line-height: 1.25;
        font-weight: 600;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
      }

      /* Row 2: country · city (inline) */
      #mainPlansPane table tbody td:nth-child(3) /* country */ {
        display: inline-flex;
        order: 2;
        flex: 0 0 auto;
        font-size: 12px;
        color: var(--color-text-secondary);
        max-width: 100%;
      }
      #mainPlansPane table tbody td:nth-child(4) /* city */ {
        display: inline-flex;
        order: 3;
        flex: 0 1 auto;
        font-size: 12px;
        color: var(--color-text-secondary);
        min-width: 0;
        overflow: hidden;
      }
      #mainPlansPane table tbody td:nth-child(3) .country-picker-btn { font-size: 12px; padding: 0; min-width: unset; }
      #mainPlansPane table tbody td .city-picker-btn { font-size: 12px; padding: 0; min-width: unset; }
      #mainPlansPane table tbody td:nth-child(4) select { font-size: 12px; }

      /* Row 3: dates (full-width flex item) */
      #mainPlansPane table tbody td.trip-dates-cell {
        display: block;
        order: 4;
        flex: 1 1 100%;
        width: 100%;
      }

      /* Row 4: bottom icons (notes, tasks, events, bookings) */
      #mainPlansPane table tbody td:nth-child(8) /* notes */ {
        display: inline-flex;
        order: 6;
        align-items: center;
        font-size: 11px;
      }
      #mainPlansPane table tbody td:nth-child(8) .btn-icon {
        font-size: 14px;
        padding: 2px 4px;
        min-height: 24px;
      }
      #mainPlansPane table tbody td:nth-child(9) /* tasks */ {
        display: inline-flex;
        order: 7;
        align-items: center;
        font-size: 11px;
      }
      #mainPlansPane table tbody td:nth-child(10) /* events */ {
        display: inline-flex;
        order: 8;
        align-items: center;
        font-size: 11px;
      }
      #mainPlansPane table tbody td:nth-child(11) /* bookings */ {
        display: inline-flex;
        order: 9;
        align-items: center;
        font-size: 11px;
      }

      /* Force a wrap so bottom-row icons start a new line under dates */
      #mainPlansPane table tbody tr::before {
        content: '';
        flex-basis: 100%;
        height: 0;
        order: 5;
      }

      /* RIGHT COLUMN — absolutely positioned pills + delete */
      #mainPlansPane table tbody td.status-cell {
        position: absolute;
        top: 8px;
        right: 10px;
        display: inline-flex;
        padding: 0;
        min-width: unset;
        width: auto;
      }
      #mainPlansPane table tbody td.status-cell .status-trigger { min-height: 24px; width: 44px; font-size: 16px; }

      #mainPlansPane table tbody td:nth-child(6) /* Schengen */ {
        position: absolute;
        top: 36px;
        right: 10px;
        display: inline-flex;
        align-items: center;
        padding: 0;
      }
      #mainPlansPane table tbody td:nth-child(7) /* FEIE */ {
        position: absolute;
        top: 56px;
        right: 10px;
        display: inline-flex;
        align-items: center;
        padding: 0;
      }
      #mainPlansPane table tbody td:nth-child(6) .calc-cell, #mainPlansPane table tbody td:nth-child(7) .calc-cell {
        font-size: 9px;
        padding: 1px 4px;
        min-width: unset;
        border-radius: 4px;
      }
      #mainPlansPane table tbody td:nth-child(6) .calc-split, #mainPlansPane table tbody td:nth-child(7) .calc-split { gap: 2px; }
      #mainPlansPane table tbody td:nth-child(6) .lane-pill, #mainPlansPane table tbody td:nth-child(7) .lane-pill {
        font-size: 9px;
        padding: 0 3px;
      }
      #mainPlansPane table tbody td:nth-child(13) /* delete */ {
        position: absolute;
        bottom: 8px;
        right: 10px;
        display: inline-flex;
        align-items: center;
      }

      /* ─── Compact mobile redesign: card is a tappable summary ─── */
      /* Hide schengen, FEIE, notes, tasks, events, bookings, shared, delete on
         mobile — all those actions live in the popup. The card shows only
         name / country · city / dates / status. */
      #mainPlansPane table tbody td:nth-child(6), /* schengen */
      #mainPlansPane table tbody td:nth-child(7), /* FEIE */
      #mainPlansPane table tbody td:nth-child(8), /* notes */
      #mainPlansPane table tbody td:nth-child(9), /* tasks */
      #mainPlansPane table tbody td:nth-child(10), /* events */
      #mainPlansPane table tbody td:nth-child(11), /* bookings */
      #mainPlansPane table tbody td:nth-child(12), /* shared */
      #mainPlansPane table tbody td:nth-child(13)  /* delete */ {
        display: none !important;
      }
      /* Tighter right gutter — only the status pill lives on the right edge now,
         plus a chevron disclosure indicator at the bottom-right. */
      #mainPlansPane table tbody tr {
        padding: 8px 70px 8px 10px;
        cursor: pointer;
        min-height: 88px;
      }
      /* Disclosure chevron in the bottom-right corner — hints that the card
         opens a detail view when tapped. */
      #mainPlansPane table tbody tr::after {
        content: '›';
        position: absolute;
        bottom: 6px;
        right: 14px;
        font-size: 22px;
        line-height: 1;
        color: #94a3b8;
        font-weight: 400;
        pointer-events: none;
      }
      /* Editing on the card is disabled — all edits happen in the popup.
         Keep the status pill interactive so users can flip status quickly. */
      #mainPlansPane table tbody td.trip-name-cell .trip-name-input, #mainPlansPane table tbody td .country-picker, #mainPlansPane table tbody td .city-picker, #mainPlansPane table tbody td.trip-dates-cell .trip-dates-grid {
        pointer-events: none;
      }
      /* Visually flatten the textarea so it reads as a label, not an input. */
      #mainPlansPane table tbody td.trip-name-cell .trip-name-input {
        border: none;
        background: transparent;
        padding: 0;
        resize: none;
      }
      /* Strip the picker buttons of their button affordance on mobile. */
      #mainPlansPane table tbody td .country-picker-btn, #mainPlansPane table tbody td .city-picker-btn {
        background: transparent;
        border: none;
        padding: 0;
      }
      #mainPlansPane table tbody td .country-picker-btn .picker-arrow, #mainPlansPane table tbody td .city-picker-btn .picker-arrow {
        display: none;
      }

      /* Data labels never shown in compact cards */
      #mainPlansPane table tbody td::before { content: none; }

      .trip-dates-grid {
        grid-template-columns: auto auto auto auto;
        font-size: 11px;
        justify-content: start;
      }
      .date-display { min-width: unset; font-size: 11px; }

      .booking-icons { justify-content: flex-start; }
      .booking-icons span { font-size: 12px; }

      .calc-cell { font-size: 11px; padding: 4px 6px; min-width: 30px; }
      .calc-split { justify-content: flex-start; }

      /* Mobile labels next to emojis */
      .mobile-label { display: inline; font-size: 10px; color: var(--color-text-muted); font-weight: 500; }

      /* Gap rows — show content on mobile */
      .gap-row .gap-content { font-size: 11px; padding: 4px 8px; }

      /* ── Calendar (monthly) ── */
      .cal-grid { grid-template-columns: repeat(7, 1fr); overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
      .cal-day { min-height: 56px; min-width: 44px; padding: 2px; }
      .cal-day-num { font-size: 10px; }

      .cal-header { font-size: 9px; padding: 4px 2px; min-width: 44px; }

      /* ── Week grid — keep 7 horizontal days; stack emoji chips vertically inside each narrow cell ── */
      .week-grid { grid-template-columns: repeat(7, 1fr); }
      .week-day { min-height: 80px; }
      .week-day-header { padding: 3px 2px; font-size: 10px; line-height: 1.2; }
      .week-day-events { padding: 2px; }
      .week-day-events .cal-cell-chips { flex-direction: column; align-items: stretch; gap: 2px; flex-wrap: nowrap; }
      .week-day-events .cal-cell-chip { justify-content: center; padding: 1px 2px; font-size: 10px; }

      /* ── Modals ── */
      .modal { width: 100vw; max-width: 100vw; border-radius: 0; max-height: 100vh; }
      .modal.modal-wide { width: 100vw; max-width: 100vw; }
      .modal-header { padding: 12px 14px; }
      .modal-body { padding: 12px 14px; }
      .modal-footer { padding: 10px 14px; }
      .bulk-share-grid { grid-template-columns: 1fr; }
      .bulk-share-list { max-height: 200px; }

      /* ── Walkthrough tooltips ── */
      .wt-tooltip { max-width: 280px; min-width: 220px; }

      /* ── Auth card ── */
      .auth-card { margin: 16px; padding: 24px; width: calc(100vw - 32px); }

      /* ── People sections (Connections, etc.) ── */
      .people-section { margin-bottom: 14px; }
      .member-item { padding: 6px 8px; font-size: 12px; }

      /* ── Group / Connection / Linked Plan detail header (inline) ── */
      #groupDetailInline .group-detail-bar, #connectionsDetailInline .group-detail-bar, #mainLinkedPlansPane .group-detail-bar {
        flex-wrap: wrap;
        gap: 8px;
      }
      .group-detail-bar select {
        max-width: 200px;
        font-size: 14px;
      }
      /* (Group trips table CSS removed — merged into People tab.) */

      /* ── Group tabs ── */
      #groupDetailInline .group-tabs { overflow-x: auto; }

      /* ── Event cards ── */
      .event-card { padding: 10px 12px; }
      .event-card-header { flex-direction: column; gap: 4px; }
      .event-card-meta { font-size: 11px; gap: 8px; }
      .event-card-actions { flex-wrap: wrap; }

      .group-trip-card { padding: 10px 12px; }

      /* People card: stack action buttons under the row */
      .people-card { flex-wrap: wrap; gap: 6px 10px; }
      .people-card .people-actions { flex-basis: 100%; display:flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
      .people-card .role-badge, .people-card .people-status { font-size: 10px; padding: 1px 6px; }

      /* Notifications form: full-width on phones */
      .group-notifs-form { max-width: 100%; }

      /* ── Day view ── */
      .day-event-card { flex-direction: column; gap: 6px; padding: 10px 12px; }
      .day-event-time { min-width: unset; font-size: 12px; }

      /* ── Dashboard list cards — stack on mobile ── */
      .dash-list-card { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
      .dash-list-card > div:nth-child(2) { flex-basis: calc(100% - 40px); }
      .dash-trip-badge { font-size: 9px; margin-left: auto; }

      /* ── Country picker dropdown ── */
      .country-picker-dropdown {
        max-width: calc(100vw - 40px);
        left: 0 !important;
        right: auto;
      }

      /* ── Buttons ── */
      .btn { padding: 6px 10px; font-size: 12px; }
      .btn-sm { padding: 4px 8px; font-size: 11px; }

      /* ── Overlap banner ── */
      .overlap-banner { font-size: 12px; padding: 6px 12px; }

      /* ── Sample banner ── */
      .sample-banner { flex-direction: column; gap: 8px; text-align: center; font-size: 12px; padding: 8px 12px; }

      /* ── Lane badges ── */
      .lane-badge { font-size: 10px; }

      /* ── Help tip popups — position better on mobile ── */
      .help-tip-popup { width: 200px; }

      /* ── Accommodation & voting ── */
      .vote-btn { font-size: 10px; padding: 3px 8px; }
      .vote-expand-btn { font-size: 10px; }
    }

    /* Extra small screens (phones in portrait) */
    @media (max-width: 420px) {
      header { padding: 10px 10px; }
      header h1 { font-size: 16px; }

      /* Show only icons in header buttons */
      .btn-header { padding: 4px 6px; font-size: 10px; }

      /* Plans cards — single column */
      #mainPlansPane table tbody tr {
        grid-template-columns: 1fr;
      }

      /* Tab text smaller */
      .group-tab { padding: 6px 10px; font-size: 11px; }

      /* Calendar cells even tighter */
      .cal-day { min-height: 48px; }

      /* Modal full screen */
      .modal { border-radius: 0; }

      /* Date filter as 2-row grid */
      .manage-bar > div { width: 100%; }

      /* Dates grid more compact */
      .trip-dates-grid { font-size: 10px; gap: 0 2px; }
    }

/* ─── Bed booking night picker ───────────────────────────────
   Clickable grid of every night in a bed's range. Sits inline
   below a bed card when the user toggles "Pick specific nights".
   Cells flex-wrap so the picker fits in narrow containers (Bookings
   popup, Shared Accom modal). Booked / mine cells are non-interactive. */
.night-picker {
  margin-top: 4px;
  padding: 8px 10px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}
.night-picker .np-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.night-picker .np-tally {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
}
.night-picker .np-hint {
  font-size: 10px;
  color: #94a3b8;
}
.night-picker .np-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.night-picker .np-cell {
  width: 36px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background 0.1s, border-color 0.1s, transform 0.1s;
}
.night-picker .np-cell:hover { background: #f0f9ff; border-color: #93c5fd; }
.night-picker .np-cell .np-mo {
  font-size: 8px;
  font-weight: 600;
  color: #5DBDB6;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  height: 9px;
  line-height: 9px;
}
.night-picker .np-cell .np-wd {
  font-size: 8px;
  color: #94a3b8;
  text-transform: uppercase;
  margin-top: 1px;
}
.night-picker .np-cell .np-day {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}
.night-picker .np-cell.np-selected {
  background: #5DBDB6;
  border-color: #16a34a;
}
.night-picker .np-cell.np-selected:hover { background: #4cb0a8; }
.night-picker .np-cell.np-selected .np-day,
.night-picker .np-cell.np-selected .np-wd,
.night-picker .np-cell.np-selected .np-mo { color: #fff; }
.night-picker .np-cell.np-booked {
  background: #f1f5f9;
  border-color: #e2e8f0;
  cursor: not-allowed;
  opacity: 0.55;
}
.night-picker .np-cell.np-booked:hover { background: #f1f5f9; border-color: #e2e8f0; }
.night-picker .np-cell.np-mine {
  background: #dbeafe;
  border-color: #93c5fd;
  cursor: default;
}
.night-picker .np-cell.np-mine:hover { background: #dbeafe; border-color: #93c5fd; }
.night-picker .np-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10px;
  color: #64748b;
  margin-top: 6px;
}
.night-picker .np-legend .np-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid #d1d5db;
  vertical-align: middle;
  margin-right: 3px;
}
.night-picker .np-legend .np-swatch.np-available { background: #fff; }
.night-picker .np-legend .np-swatch.np-selected { background: #5DBDB6; border-color: #16a34a; }
.night-picker .np-legend .np-swatch.np-mine { background: #dbeafe; border-color: #93c5fd; }
.night-picker .np-legend .np-swatch.np-booked { background: #f1f5f9; border-color: #e2e8f0; }


/* ─── Budget tab: responsive plan + category rows ──────────────────────
   Rows are flex with fixed-width metric cells on desktop. On phones the
   fixed widths overflow, so the metric cells collapse into self-labeled
   wrapping chips and the column header hides. */
.bdg-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid #f0ede8; cursor:pointer; }
.bdg-row-name { flex:1; min-width:0; }
.bdg-cells { display:contents; }
.bdg-cell { text-align:right; font-size:13px; white-space:nowrap; }
.bdg-cell--night { width:72px; font-size:12px; }
.bdg-cell--spend { width:80px; font-weight:500; }
.bdg-cell--budget { width:108px; }
.bdg-cell--remaining { width:88px; font-weight:500; }
.bdg-cell--rolling { width:108px; }
.bdg-head { display:flex; align-items:center; gap:8px; padding:4px 10px; font-size:10px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.3px; border-bottom:1px solid #f0ede8; }
.bdg-head .bdg-row-name { font-size:10px; }

/* Category rows: wrap the target/value off to its own line on mobile. */
.bdg-cat-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 4px; border-bottom:1px solid #f0ede8; cursor:pointer; }
.bdg-cat-emoji { width:24px; text-align:center; }
.bdg-cat-label { flex:1 1 auto; min-width:0; font-size:13px; font-weight:600; color:#1f2937; }
.bdg-cat-monthly { display:flex; align-items:center; gap:3px; }
.bdg-cat-target { width:170px; text-align:right; font-size:12px; color:#475569; }
.bdg-cat-status { width:24px; text-align:center; font-size:14px; }

@media (max-width:600px) {
  .bdg-row { flex-direction:column; align-items:stretch; gap:6px; }
  .bdg-cells { display:flex; flex-wrap:wrap; gap:4px 14px; }
  .bdg-cell { width:auto !important; text-align:left; font-size:12px; display:inline-flex; gap:4px; align-items:baseline; }
  .bdg-cell::before { content:attr(data-label); color:#94a3b8; font-weight:400; font-size:11px; }
  .bdg-cell--empty { display:none; }
  .bdg-head { display:none; }
  .bdg-cat-target { flex:1 1 100%; width:auto; text-align:left; }
}