:root {
      --dusty-sky: #AFC6CF;
      --sea-glass: #8FAFA6;
      --warm-sand: #E8DDC9;
      --postcard-cream: #F6F1E6;
      --faded-coral: #D48A7A;
      --ink-blue: #3A4A5A;
      --sunset-rust: #C96E4B;
      --sage-green: #8F9D82;
      --stamp-burgundy: #7C3F3F;
      --paper-white: #FBF8F1;
      --dark-ink: #2C3640;
      --light-ink: #5A6B7A;
      --border-subtle: rgba(58, 74, 90, 0.12);
      --shadow-soft: rgba(58, 74, 90, 0.08);
      --shadow-medium: rgba(58, 74, 90, 0.15);
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
      --font-accent: 'Caveat', cursive;
      --font-secondary: 'Cormorant', Georgia, serif;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }

    /* Inline SVG icons */
    .ico {
      display: inline-block;
      vertical-align: -2px;
      flex-shrink: 0;
    }
    label > input#csvInput { display: none; }
    label > span { display: none; }

    body {
      background: var(--postcard-cream);
      color: var(--ink-blue);
      min-height: 100vh;
      height: 100vh;
      display: flex;
      flex-direction: column;
      font-family: var(--font-body);
      font-size: 14px;
      line-height: 1.5;
      overflow: hidden;
    }

    /* Paper grain */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
      opacity: 0.45;
    }

    /* ===== HEADER ===== */
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 28px;
      background: var(--paper-white);
      border-bottom: 1px solid var(--border-subtle);
      position: relative;
      z-index: 100;
      flex-shrink: 0;
    }
    header::after {
      content: '';
      position: absolute;
      bottom: -3px;
      left: 0; right: 0;
      height: 3px;
      background: repeating-linear-gradient(90deg, var(--faded-coral) 0px, var(--faded-coral) 8px, transparent 8px, transparent 12px, var(--dusty-sky) 12px, var(--dusty-sky) 20px, transparent 20px, transparent 24px);
      opacity: 0.5;
    }

    .logo-title { display: flex; align-items: center; gap: 14px; }
    .header-logo-img {
      height: 38px; width: auto;
      border-radius: 3px;
    }

    /* City search bar in header */
    .city-search-wrap {
      position: relative;
      display: flex; align-items: center;
    }
    .city-search-input {
      padding: 7px 12px 7px 30px; border-radius: 4px;
      border: 1px solid var(--border-subtle); background: var(--postcard-cream);
      color: var(--ink-blue); font-size: 12px; font-family: var(--font-body);
      width: 200px; transition: all 0.25s ease;
    }
    .city-search-input:focus {
      outline: none; border-color: var(--faded-coral);
      width: 260px; box-shadow: 0 2px 12px rgba(212,138,122,0.15);
    }
    .city-search-input::placeholder { color: rgba(58,74,90,0.35); }
    .city-search-icon {
      position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
      font-size: 13px; opacity: 0.4; pointer-events: none;
    }
    .city-search-results {
      position: absolute; top: 100%; left: 0; right: 0;
      background: var(--paper-white); border: 1px solid var(--border-subtle);
      border-radius: 0 0 6px 6px; box-shadow: 0 8px 24px rgba(58,74,90,0.15);
      max-height: 260px; overflow-y: auto; z-index: 200;
      display: none;
    }
    .city-search-results.visible { display: block; }
    .city-search-item {
      padding: 8px 12px; cursor: pointer; font-size: 12px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex; justify-content: space-between; align-items: center;
      transition: background 0.15s;
    }
    .city-search-item:hover { background: rgba(175,198,207,0.12); }
    .city-search-item:last-child { border-bottom: none; }
    .city-search-item-name { font-weight: 500; color: var(--ink-blue); }
    .city-search-item-country { font-size: 11px; color: var(--light-ink); }
    .city-search-item-stamp {
      font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--sea-glass); font-weight: 600;
    }

    /* Mark visited button on postcard */
    .postcard-action-section {
      padding: 12px 0; border-top: 1px dashed var(--border-subtle);
    }
    .postcard-action-section:first-of-type { border-top: none; padding-top: 0; }
    .postcard-action-title {
      font-family: var(--font-display); font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      margin-bottom: 10px;
    }
    .postcard-action-title.stamp-color { color: var(--stamp-burgundy); }
    .postcard-action-title.bucket-color { color: var(--sage-green); }

    .stamp-form { display: flex; flex-direction: column; gap: 8px; }
    .stamp-form-row { display: flex; gap: 8px; }
    .stamp-form-field { display: flex; flex-direction: column; gap: 3px; }
    .stamp-label {
      font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--light-ink); font-weight: 500;
    }
    .stamp-select, .stamp-date-input {
      padding: 6px 8px; border-radius: 4px;
      border: 1px solid var(--border-subtle); background: var(--postcard-cream);
      color: var(--ink-blue); font-size: 11px; font-family: var(--font-body);
      width: 100%;
    }
    .stamp-select:focus, .stamp-date-input:focus {
      outline: none; border-color: var(--faded-coral);
    }
    .stamp-notes {
      width: 100%; min-height: 40px; resize: vertical;
      padding: 6px 8px; border-radius: 4px;
      border: 1px solid var(--border-subtle); background: var(--postcard-cream);
      color: var(--ink-blue); font-size: 11px; font-family: var(--font-body);
    }
    .stamp-notes::placeholder { color: rgba(58,74,90,0.3); font-family: var(--font-accent); }

    .stamp-photo-upload {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 5px 12px; border-radius: 4px;
      border: 1px dashed var(--dusty-sky); background: rgba(175,198,207,0.06);
      color: var(--ink-blue); font-size: 11px; cursor: pointer;
      transition: all 0.2s;
    }
    .stamp-photo-upload:hover { background: rgba(175,198,207,0.15); border-style: solid; }
    .stamp-photo-preview {
      display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px;
    }
    .stamp-photo-thumb {
      width: 40px; height: 40px; border-radius: 4px;
      object-fit: cover; border: 1px solid var(--border-subtle);
    }

    .btn-stamp-it {
      padding: 8px 18px; border-radius: 4px;
      border: 2px solid var(--stamp-burgundy);
      background: rgba(124,63,63,0.06);
      color: var(--stamp-burgundy);
      font-family: var(--font-display); font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.12em;
      cursor: pointer; transition: all 0.25s ease;
      width: 100%;
    }
    .btn-stamp-it:hover {
      background: var(--stamp-burgundy); color: var(--paper-white);
      box-shadow: 0 3px 12px rgba(124,63,63,0.25);
    }
    .btn-stamp-it.stamped {
      background: var(--stamp-burgundy); color: var(--paper-white);
    }

    .btn-bucket-it {
      flex: 1; padding: 7px 14px; border-radius: 4px;
      border: 2px solid var(--sage-green);
      background: rgba(143,157,130,0.06);
      color: #5A6B4A;
      font-family: var(--font-display); font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      cursor: pointer; transition: all 0.25s ease;
    }
    .btn-bucket-it:hover {
      background: var(--sage-green); color: var(--paper-white);
    }
    .btn-bucket-it:disabled { opacity: 0.35; cursor: default; }
    .btn-bucket-it.saved {
      background: var(--sage-green); color: var(--paper-white);
    }

    .btn-bucket-remove-sm {
      padding: 7px 10px; border-radius: 4px;
      border: 1px solid rgba(124,63,63,0.3); background: rgba(124,63,63,0.04);
      color: var(--stamp-burgundy); font-size: 12px;
      cursor: pointer; transition: all 0.2s;
    }
    .btn-bucket-remove-sm:disabled { opacity: 0.2; cursor: default; }

    .bucket-section-card { margin-top: 0; }

    /* Passport download button */
    .passport-download-btn {
      margin: 20px 24px; padding: 12px 18px; border-radius: 4px;
      border: 2px solid rgba(212,196,168,0.3);
      background: rgba(212,138,122,0.12);
      color: #D4C4A8;
      font-family: var(--font-display); font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.12em;
      cursor: pointer; transition: all 0.25s; width: calc(100% - 48px);
      display: block;
    }
    .passport-download-btn:hover {
      background: rgba(212,138,122,0.25);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0,0,0,0.2);
      color: #F6F1E6;
    }

    /* Passport drawer — leather cover feel */
    .passport-drawer {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: 520px; max-width: 96vw;
      background: #3C2F24;
      background-image:
        url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
      border-right: 4px solid #2A1F17;
      box-shadow: 8px 0 40px rgba(0,0,0,0.35);
      z-index: 500;
      transform: translateX(-100%);
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      overflow-y: auto;
      padding: 0;
    }
    .passport-drawer.open { transform: translateX(0); }
    .passport-drawer::-webkit-scrollbar { width: 6px; }
    .passport-drawer::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
    .passport-drawer::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

    .passport-drawer-header {
      padding: 20px 24px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; background: #3C2F24; z-index: 2;
    }
    .passport-drawer-header h2 {
      font-family: var(--font-display); font-size: 18px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: #D4C4A8;
    }
    .passport-drawer .filter-close-btn {
      border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.06);
      color: #D4C4A8;
    }
    .passport-drawer .filter-close-btn:hover {
      background: var(--faded-coral); color: white; border-color: var(--faded-coral);
    }
    .passport-drawer.open { transform: translateX(0); }
    .passport-drawer-header {
      padding: 20px 22px 14px;
      border-bottom: 1px solid var(--border-subtle);
      display: flex; align-items: center; justify-content: space-between;
      position: sticky; top: 0; background: var(--paper-white); z-index: 2;
    }
    .passport-drawer-header h2 {
      font-family: var(--font-display); font-size: 16px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .passport-stats {
      padding: 14px 24px; background: rgba(0,0,0,0.15);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      display: flex; gap: 20px; font-size: 12px;
    }
    .passport-stat {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .passport-stat-num {
      font-family: var(--font-display); font-size: 24px; font-weight: 700;
      color: #E8DDC9;
    }
    .passport-stat-label {
      font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em;
      color: rgba(212,196,168,0.6);
    }
    /* Grid view — kraft paper cards */
    .passport-stamps-grid {
      padding: 20px 24px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .passport-stamp-card {
      background: #EDE4D3;
      background-image:
        url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='k'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='0.04'/%3E%3C/svg%3E");
      border: none;
      border-radius: 2px;
      padding: 14px;
      cursor: pointer; transition: all 0.25s ease;
      position: relative; overflow: hidden;
      box-shadow: 2px 3px 8px rgba(0,0,0,0.2);
      /* Slightly random rotation for scrapbook feel */
      transform: rotate(var(--card-rot, 0deg));
    }
    .passport-stamp-card:nth-child(odd) { --card-rot: -1.2deg; }
    .passport-stamp-card:nth-child(even) { --card-rot: 0.8deg; }
    .passport-stamp-card:nth-child(3n) { --card-rot: 1.5deg; }
    .passport-stamp-card:hover {
      transform: rotate(0deg) translateY(-4px) scale(1.02);
      box-shadow: 4px 6px 16px rgba(0,0,0,0.25);
      z-index: 2;
    }
    /* Tape strip on top */
    .passport-stamp-card::before {
      content: '';
      position: absolute; top: -4px;
      left: 50%; transform: translateX(-50%) rotate(var(--tape-rot, 2deg));
      width: 60px; height: 18px;
      background: rgba(212,196,168,0.5);
      border: 1px solid rgba(212,196,168,0.3);
      z-index: 3;
    }
    .passport-stamp-card:nth-child(odd)::before { --tape-rot: -3deg; left: 40%; }
    .passport-stamp-card:nth-child(even)::before { --tape-rot: 1.5deg; left: 55%; }
    /* Rubber stamp overlay */
    .passport-stamp-card::after {
      content: 'VISITED';
      position: absolute; bottom: 10px; right: 8px;
      font-family: var(--font-display); font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.15em;
      color: rgba(124,63,63,0.4);
      border: 2px solid rgba(124,63,63,0.3);
      border-radius: 2px;
      padding: 2px 8px;
      transform: rotate(-8deg);
    }
    .passport-stamp-city {
      font-family: var(--font-display); font-size: 14px; font-weight: 700;
      color: #3A4A5A; margin-bottom: 2px; margin-top: 8px;
    }
    .passport-stamp-country {
      font-size: 10px; color: #7A6B5A;
      text-transform: uppercase; letter-spacing: 0.08em;
    }
    .passport-stamp-date {
      font-family: var(--font-accent); font-size: 13px;
      color: var(--faded-coral); margin-top: 6px;
    }
    .passport-stamp-notes {
      font-family: var(--font-accent); font-size: 12px;
      color: #5A4B3A; margin-top: 4px; line-height: 1.3;
      transform: rotate(-0.5deg);
    }
    .passport-stamp-remove {
      position: absolute; top: 16px; right: 6px;
      width: 18px; height: 18px; border-radius: 50%;
      border: 1px solid rgba(0,0,0,0.15);
      background: rgba(255,255,255,0.7); color: #7A6B5A;
      font-size: 10px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.2s; z-index: 5;
    }
    .passport-stamp-card:hover .passport-stamp-remove { opacity: 1; }
    .passport-empty {
      grid-column: 1 / -1;
      text-align: center; padding: 40px 20px;
      font-family: var(--font-accent); font-size: 17px;
      color: #D4C4A8;
    }

    /* Visited city input modal on postcard */
    .visited-city-input-row {
      display: flex; gap: 6px; margin-top: 6px;
    }
    .visited-city-input {
      flex: 1; padding: 5px 8px; border-radius: 4px;
      border: 1px solid var(--border-subtle); background: var(--postcard-cream);
      color: var(--ink-blue); font-size: 11px; font-family: var(--font-body);
    }
    .visited-city-input::placeholder {
      color: rgba(58,74,90,0.3); font-family: var(--font-accent);
    }
    .visited-notes-input {
      width: 100%; padding: 5px 8px; border-radius: 4px;
      border: 1px solid var(--border-subtle); background: var(--postcard-cream);
      color: var(--ink-blue); font-size: 11px; font-family: var(--font-body);
      margin-top: 4px; min-height: 36px; resize: vertical;
    }
    .visited-notes-input::placeholder {
      color: rgba(58,74,90,0.3); font-family: var(--font-accent);
    }

    .btn-passport {
      border-color: var(--faded-coral);
      background: rgba(212,138,122,0.08);
      color: var(--stamp-burgundy);
    }
    .btn-passport:hover {
      background: rgba(212,138,122,0.18);
      transform: translateY(-1px);
    }
    .btn-passport.active {
      background: var(--faded-coral); color: var(--paper-white);
      border-color: var(--faded-coral);
    }

    /* Passport view toggle buttons */
    .passport-view-btn {
      width: 30px; height: 30px; border-radius: 4px;
      border: 1px solid rgba(212,196,168,0.3); background: rgba(255,255,255,0.06);
      color: #D4C4A8; font-size: 14px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s;
    }
    .passport-view-btn.active {
      background: rgba(212,196,168,0.2); color: #F6F1E6;
      border-color: rgba(212,196,168,0.5);
    }
    .passport-view-btn:hover:not(.active) { background: rgba(255,255,255,0.1); }

    /* Scrapbook view — kraft pages */
    .passport-scrapbook {
      padding: 24px;
      display: flex; flex-direction: column; align-items: center; gap: 20px;
    }
    .scrapbook-card {
      width: 100%; max-width: 440px;
      background: #EDE4D3;
      background-image:
        url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
      border-radius: 2px;
      overflow: visible;
      box-shadow: 3px 4px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
      position: relative;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    }
    .scrapbook-card.slide-left { transform: translateX(-120%) rotate(-5deg); opacity: 0; }
    .scrapbook-card.slide-right { transform: translateX(120%) rotate(5deg); opacity: 0; }

    /* Washi tape strips on the page */
    .scrapbook-card::before {
      content: '';
      position: absolute; top: -8px; left: 30px;
      width: 80px; height: 22px;
      background: rgba(175,198,207,0.45);
      border: 1px solid rgba(175,198,207,0.25);
      transform: rotate(-2deg);
      z-index: 5;
    }
    .scrapbook-card::after {
      content: '';
      position: absolute; top: -6px; right: 40px;
      width: 65px; height: 22px;
      background: rgba(212,138,122,0.35);
      border: 1px solid rgba(212,138,122,0.2);
      transform: rotate(3deg);
      z-index: 5;
    }

    .scrapbook-card-inner { display: flex; flex-direction: column; }

    /* Photo area — looks taped down */
    .scrapbook-photo {
      height: 240px;
      margin: 20px 20px 0;
      background: #D5CBBA;
      position: relative;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
      transform: rotate(-0.8deg);
    }
    .scrapbook-photo img {
      width: 100%; height: 100%; object-fit: cover;
      filter: saturate(0.8) contrast(0.93) brightness(0.97);
    }
    /* Photo corner mounts */
    .scrapbook-photo::before, .scrapbook-photo::after {
      content: '';
      position: absolute; width: 20px; height: 20px;
      border: 2px solid rgba(90,75,58,0.2);
      z-index: 5;
    }
    .scrapbook-photo::before {
      top: -3px; left: -3px;
      border-right: none; border-bottom: none;
    }
    .scrapbook-photo::after {
      bottom: -3px; right: -3px;
      border-left: none; border-top: none;
    }
    .scrapbook-photo-empty {
      display: flex; align-items: center; justify-content: center;
      height: 100%;
      font-family: var(--font-accent); font-size: 16px;
      color: #8A7B6A;
    }

    /* User uploaded photos strip */
    .scrapbook-user-photos {
      display: flex; gap: 6px; padding: 8px 20px 0;
      flex-wrap: wrap;
    }
    .scrapbook-user-photo {
      width: 56px; height: 56px; object-fit: cover;
      border: 2px solid #FBF8F1;
      box-shadow: 1px 2px 4px rgba(0,0,0,0.15);
      transform: rotate(var(--photo-rot, 1deg));
    }
    .scrapbook-user-photo:nth-child(odd) { --photo-rot: -2deg; }
    .scrapbook-user-photo:nth-child(even) { --photo-rot: 2.5deg; }

    .scrapbook-info {
      padding: 16px 24px 20px;
      position: relative;
    }
    .scrapbook-city {
      font-family: var(--font-display); font-size: 24px; font-weight: 700;
      color: #3A4A5A; margin-bottom: 2px;
    }
    .scrapbook-country {
      font-size: 11px; color: #7A6B5A;
      text-transform: uppercase; letter-spacing: 0.1em;
    }
    .scrapbook-date {
      font-family: var(--font-accent); font-size: 16px;
      color: var(--faded-coral); margin-top: 8px;
    }
    .scrapbook-notes {
      font-family: var(--font-accent); font-size: 16px;
      line-height: 1.5; color: #4A3F33;
      margin-top: 10px;
      transform: rotate(-0.3deg);
      /* Lined paper effect */
      background-image: repeating-linear-gradient(
        transparent, transparent 23px, rgba(175,198,207,0.2) 23px, rgba(175,198,207,0.2) 24px
      );
      padding: 4px 0;
    }
    /* Rubber stamp — imperfect, ink-bleed look */
    .scrapbook-stamp-mark {
      position: absolute; top: 12px; right: 16px;
      transform: rotate(-14deg);
    }
    .scrapbook-stamp-circle {
      border: 3px solid var(--stamp-burgundy);
      border-radius: 50%;
      width: 64px; height: 64px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-size: 9px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.15em;
      color: var(--stamp-burgundy);
      opacity: 0.55;
      /* Ink bleed / imperfect stamp effect */
      filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r'%3E%3CfeTurbulence baseFrequency='0.04' numOctaves='4' seed='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='2'/%3E%3C/filter%3E%3C/svg%3E#r");
      position: relative;
    }
    .scrapbook-stamp-circle::after {
      content: '';
      position: absolute; inset: 4px;
      border: 1px solid var(--stamp-burgundy);
      border-radius: 50%;
      opacity: 0.4;
    }

    /* Scrapbook navigation */
    .scrapbook-nav {
      display: flex; align-items: center; gap: 20px;
      padding: 4px 0;
    }
    .scrapbook-nav-btn {
      padding: 10px 22px; border-radius: 4px;
      border: 1px solid rgba(212,196,168,0.4);
      background: rgba(255,255,255,0.06);
      color: #D4C4A8; font-family: var(--font-display);
      font-size: 13px; font-weight: 600; cursor: pointer;
      transition: all 0.2s;
      letter-spacing: 0.06em;
    }
    .scrapbook-nav-btn:hover {
      background: rgba(255,255,255,0.12);
      transform: translateY(-1px);
    }
    .scrapbook-nav-btn:disabled { opacity: 0.2; cursor: default; transform: none; }
    .scrapbook-counter {
      font-family: var(--font-accent); font-size: 16px; color: #D4C4A8;
    }
    .title-block h1 {
      font-family: var(--font-display); font-size: 22px; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-blue);
    }
    .title-block p {
      font-family: var(--font-accent); font-size: 14px; color: var(--light-ink);
    }

    .header-actions {
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .header-btn {
      padding: 8px 16px; border-radius: 4px;
      font-family: var(--font-body); font-size: 12px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.12em;
      cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
      white-space: nowrap; transition: all 0.25s ease; border: 1px solid;
    }
    .btn-spin {
      border-color: var(--faded-coral);
      background: linear-gradient(135deg, rgba(212,138,122,0.1), rgba(201,110,75,0.06));
      color: var(--stamp-burgundy);
    }
    .btn-spin:hover {
      background: linear-gradient(135deg, rgba(212,138,122,0.22), rgba(201,110,75,0.12));
      box-shadow: 0 3px 12px rgba(212,138,122,0.25);
      transform: translateY(-1px);
    }
    .btn-filter {
      border-color: var(--dusty-sky);
      background: rgba(175,198,207,0.1);
      color: var(--ink-blue);
    }
    .btn-filter:hover {
      background: rgba(175,198,207,0.22);
      transform: translateY(-1px);
    }
    .btn-filter.active {
      background: var(--ink-blue); color: var(--postcard-cream);
      border-color: var(--ink-blue);
    }
    .btn-bucket {
      border-color: var(--sea-glass);
      background: rgba(143,175,166,0.1);
      color: var(--ink-blue);
    }
    .btn-bucket:hover {
      background: rgba(143,175,166,0.22);
      transform: translateY(-1px);
    }
    .btn-bucket.active {
      background: var(--sea-glass); color: var(--paper-white);
      border-color: var(--sea-glass);
    }

    .status-strip {
      display: flex; align-items: center; gap: 12px;
      padding: 6px 28px;
      background: rgba(232,221,201,0.4);
      border-bottom: 1px solid var(--border-subtle);
      font-size: 12px; color: var(--light-ink);
      flex-shrink: 0;
    }
    .status-strip .badge {
      padding: 2px 10px; border-radius: 3px;
      background: rgba(143,175,166,0.15); border: 1px solid rgba(143,175,166,0.3);
      font-size: 11px; font-weight: 500; text-transform: uppercase;
      letter-spacing: 0.08em; color: var(--ink-blue);
    }
    .file-controls { display: none; }
    .file-controls label, .file-controls input[type="file"] { display: none; }

    /* ===== MAP — FULL BLEED GLOBE ===== */
    #chartdiv {
      flex: 1 1 0%;
      width: 100%;
      min-height: 400px;
      height: 100%;
      background: radial-gradient(ellipse at center, #E8DDC9 0%, #E2D6C3 40%, #C9BBAA 70%, #B5A796 100%);
      position: relative;
      overflow: hidden;
    }

    /* ===== FILTER DRAWER (slides from top) ===== */
    .filter-drawer {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: 380px; max-width: 92vw;
      background: var(--paper-white);
      border-left: 1px solid var(--border-subtle);
      box-shadow: -6px 0 24px rgba(58,74,90,0.1);
      z-index: 500;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      overflow-y: auto;
      padding: 0;
    }
    .filter-drawer.open { transform: translateX(0); }
    .filter-drawer::-webkit-scrollbar { width: 4px; }
    .filter-drawer::-webkit-scrollbar-thumb { background: var(--dusty-sky); border-radius: 2px; }
    .filter-drawer-inner { padding: 0; }
    .filter-drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px; border-bottom: 1px solid var(--border-subtle);
      position: sticky; top: 0; background: var(--paper-white); z-index: 2;
    }
    .filter-drawer-header h2 {
      font-family: var(--font-display); font-size: 16px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-blue);
    }
    .filter-close-btn {
      width: 32px; height: 32px; border-radius: 50%;
      border: 1px solid var(--border-subtle); background: var(--postcard-cream);
      color: var(--ink-blue); font-size: 16px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.2s ease;
    }
    .filter-close-btn:hover {
      background: var(--faded-coral); color: var(--paper-white);
      border-color: var(--faded-coral);
    }
    /* Accordion sections */
    .filter-grid { display: flex; flex-direction: column; }
    .filter-card {
      border-bottom: 1px solid var(--border-subtle);
      background: transparent; border-radius: 0; padding: 0;
    }
    .filter-card-title {
      font-family: var(--font-display); font-size: 11px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--ink-blue); margin-bottom: 0;
      padding: 14px 22px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: space-between;
      transition: background 0.15s;
      user-select: none;
    }
    .filter-card-title:hover { background: rgba(232,221,201,0.3); }
    .filter-card-title::after {
      content: '+';
      font-family: var(--font-body); font-size: 16px; font-weight: 300;
      color: var(--light-ink); transition: transform 0.2s;
    }
    .filter-card.open .filter-card-title::after {
      content: '−';
    }
    .filter-card-title .accent-dot {
      display: inline-block; width: 6px; height: 6px;
      border-radius: 50%; background: var(--faded-coral);
      margin-right: 8px;
    }
    .filter-card-body {
      padding: 0 22px 16px;
      display: none;
    }
    .filter-card.open .filter-card-body { display: block; }
    .filter-group { margin-bottom: 8px; }
    .filter-group:last-child { margin-bottom: 0; }
    .filter-label {
      font-size: 11px; margin-bottom: 3px;
      display: flex; justify-content: space-between; align-items: baseline;
      color: var(--ink-blue);
    }
    .filter-label span.value { font-size: 10px; opacity: 0.6; }
    select, input[type="range"] { width: 100%; font-size: 12px; font-family: var(--font-body); }
    select {
      padding: 5px 7px; border-radius: 4px;
      border: 1px solid var(--border-subtle);
      background: var(--paper-white); color: var(--ink-blue);
      min-height: 28px;
    }
    select[multiple] { min-height: 48px; }
    select option { background: var(--paper-white); color: var(--ink-blue); }
    input[type="range"] { -webkit-appearance: none; background: transparent; margin-top: 3px; }
    input[type="range"]::-webkit-slider-runnable-track {
      height: 3px; background: linear-gradient(90deg, var(--dusty-sky), var(--sea-glass), var(--faded-coral));
      border-radius: 999px;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
      background: var(--paper-white); border: 2px solid var(--faded-coral);
      margin-top: -5px; box-shadow: 0 1px 4px var(--shadow-medium); cursor: pointer;
    }
    input[type="range"]::-moz-range-track {
      height: 3px; background: linear-gradient(90deg, var(--dusty-sky), var(--sea-glass), var(--faded-coral));
      border-radius: 999px;
    }
    input[type="range"]::-moz-range-thumb {
      width: 13px; height: 13px; border-radius: 50%;
      background: var(--paper-white); border: 2px solid var(--faded-coral);
      box-shadow: 0 1px 4px var(--shadow-medium); cursor: pointer;
    }
    .range-row { display: flex; gap: 6px; }
    .range-half { flex: 1; }
    .filter-drawer-actions {
      display: flex; gap: 10px; margin-top: 20px;
      padding-top: 16px; border-top: 1px solid var(--border-subtle);
    }
    .airport-row { display: flex; gap: 6px; align-items: center; }
    .airport-input {
      flex: 1; padding: 5px 7px; border-radius: 4px;
      border: 1px solid var(--border-subtle); background: var(--paper-white);
      color: var(--ink-blue); font-size: 12px; font-family: var(--font-body);
    }
    .airport-input::placeholder { color: rgba(58,74,90,0.35); }
    .airport-set-btn {
      font-family: var(--font-body); font-size: 11px; padding: 5px 10px;
      border-radius: 3px; border: 1px solid var(--dusty-sky);
      background: rgba(175,198,207,0.12); color: var(--ink-blue);
      cursor: pointer; transition: all 0.2s;
    }
    .airport-set-btn:hover { background: rgba(175,198,207,0.22); }
    .small-note { font-size: 10px; opacity: 0.5; margin-top: 3px; font-family: var(--font-accent); }

    /* ===== BUCKET DRAWER (slides from right) ===== */
    .bucket-drawer {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      width: 360px; max-width: 90vw;
      background: var(--paper-white);
      border-left: 2px solid var(--sea-glass);
      box-shadow: -8px 0 30px rgba(58,74,90,0.15);
      z-index: 500;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      overflow-y: auto;
      padding: 24px 22px;
    }
    .bucket-drawer.open { transform: translateX(0); }
    .bucket-drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px; padding-bottom: 12px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .bucket-drawer-header h2 {
      font-family: var(--font-display); font-size: 16px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .bucket-list { display: flex; flex-direction: column; gap: 6px; }
    .bucket-empty {
      font-size: 13px; color: var(--light-ink);
      font-family: var(--font-accent); padding: 20px 0; text-align: center;
    }
    .bucket-item {
      width: 100%; text-align: left; padding: 10px 12px; border-radius: 6px;
      border: 1px solid rgba(143,175,166,0.25); background: rgba(143,175,166,0.05);
      color: var(--ink-blue); font-size: 12px; cursor: pointer;
      display: flex; flex-direction: column; gap: 2px; transition: all 0.15s ease;
    }
    .bucket-item:hover { background: rgba(143,175,166,0.12); transform: translateX(3px); }
    .bucket-item-name { font-weight: 500; font-size: 13px; }
    .bucket-item-notes { font-size: 11px; opacity: 0.65; }
    .bucket-export-btn {
      margin-top: 14px; padding: 8px 16px; border-radius: 4px;
      border: 1px solid var(--dusty-sky); background: rgba(175,198,207,0.1);
      color: var(--ink-blue); font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.1em;
      cursor: pointer; font-family: var(--font-body); transition: all 0.2s; width: 100%;
    }
    .bucket-export-btn:hover { background: rgba(175,198,207,0.22); }

    /* ===== OVERLAY BACKDROP ===== */
    .overlay-backdrop {
      position: fixed; inset: 0;
      background: rgba(44, 54, 64, 0.35);
      backdrop-filter: blur(3px);
      z-index: 400;
      opacity: 0; pointer-events: none;
      transition: opacity 0.35s ease;
    }
    .overlay-backdrop.visible { opacity: 1; pointer-events: auto; }

    /* ===== POSTCARD MODAL ===== */
    .postcard-overlay {
      position: fixed; inset: 0;
      display: flex; align-items: center; justify-content: center;
      z-index: 600;
      opacity: 0; pointer-events: none;
      transition: opacity 0.35s ease;
      padding: 20px;
    }
    .postcard-overlay.visible { opacity: 1; pointer-events: auto; }

    .postcard {
      width: 960px; max-width: 96vw;
      height: 620px; max-height: 88vh;
      perspective: 1600px;
      position: relative;
      cursor: default;
      margin: auto;
    }

    .postcard-flipper {
      position: relative;
      width: 100%; height: 100%;
      transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
      transform-style: preserve-3d;
    }
    .postcard.flip-1 .postcard-flipper {
      transform: rotateY(180deg);
    }

    .postcard-front, .postcard-back {
      position: absolute; inset: 0;
      backface-visibility: hidden;
      border-radius: 6px;
      overflow: hidden;
      box-shadow:
        0 25px 70px rgba(58,74,90,0.3),
        0 6px 20px rgba(58,74,90,0.14);
      outline: 2px dashed rgba(58,74,90,0.08);
      outline-offset: 4px;
    }

    /* Explore face — slides over the back as a third layer */
    .postcard-explore {
      position: absolute; inset: 0;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 25px 70px rgba(58,74,90,0.3), 0 6px 20px rgba(58,74,90,0.14);
      outline: 2px dashed rgba(58,74,90,0.08);
      outline-offset: 4px;
      background: var(--paper-white);
      display: flex; flex-direction: column;
      z-index: 10;
      transform: translateX(100%);
      opacity: 0;
      transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
      pointer-events: none;
    }
    .postcard.show-explore .postcard-explore {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    /* FRONT: full scenic image + polaroid accents */
    .postcard-front {
      background: var(--warm-sand);
      display: flex; flex-direction: column;
      position: relative;
    }
    .postcard-front-image {
      flex: 1; position: relative; overflow: hidden;
      background: var(--warm-sand);
    }
    .postcard-front-image .carousel-inner {
      display: flex; height: 100%;
      transition: transform 0.6s ease-in-out;
    }
    .postcard-front-image .carousel-slide {
      flex: 0 0 100%; height: 100%; position: relative;
    }
    .postcard-front-image .carousel-slide img {
      width: 100%; height: 100%; object-fit: cover;
      filter: saturate(0.82) contrast(0.95) brightness(0.97);
    }
    .postcard-front-image .carousel-control {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(58,74,90,0.45); border: none;
      color: var(--postcard-cream); font-size: 22px;
      padding: 6px 12px; cursor: pointer; z-index: 10;
      backdrop-filter: blur(4px); border-radius: 4px;
      transition: background 0.2s;
    }
    .postcard-front-image .carousel-control:hover { background: rgba(58,74,90,0.65); }
    .postcard-front-image .carousel-control.prev { left: 10px; }
    .postcard-front-image .carousel-control.next { right: 10px; }
    .carousel-dots {
      position: absolute; bottom: 10px; width: 100%; text-align: center; z-index: 10;
    }
    .carousel-dots span {
      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
      background: rgba(255,255,255,0.4); margin: 0 3px; cursor: pointer;
      transition: all 0.2s;
    }
    .carousel-dots span.active { background: #fff; transform: scale(1.2); }

    /* Extra polaroid photos — float over the bottom of the main image */
    .polaroid-strip {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 180px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 18px;
      padding: 0 30px 14px;
      z-index: 8;
      pointer-events: none;
      background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
    }
    .polaroid {
      background: #fff;
      padding: 6px 6px 30px 6px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 1px 4px rgba(0,0,0,0.12);
      transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
      pointer-events: auto;
      cursor: pointer;
      flex-shrink: 0;
      width: 160px; height: 150px;
      position: relative;
    }
    .polaroid:nth-child(1) { transform: rotate(-5deg) translateY(-12px); }
    .polaroid:nth-child(2) { transform: rotate(2.5deg) translateY(-20px); }
    .polaroid:nth-child(3) { transform: rotate(-3deg) translateY(-8px); }
    .polaroid:hover {
      transform: rotate(0deg) translateY(-36px) scale(1.18) !important;
      box-shadow: 0 14px 40px rgba(0,0,0,0.35);
      z-index: 12;
    }
    .polaroid img {
      width: 100%; height: calc(100% - 22px);
      object-fit: cover; display: block;
      filter: saturate(0.85) contrast(0.95);
    }
    .polaroid-caption {
      position: absolute;
      bottom: 6px; left: 6px; right: 6px;
      font-family: var(--font-accent);
      font-size: 12px;
      color: var(--light-ink);
      text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* Washi tape on polaroids */
    .polaroid::after {
      content: '';
      position: absolute;
      top: -5px; left: 50%; transform: translateX(-50%) rotate(-2deg);
      width: 36px; height: 10px;
      background: rgba(175,198,207,0.5);
      border-radius: 1px;
    }
    .polaroid:nth-child(2)::after { background: rgba(212,138,122,0.45); transform: translateX(-50%) rotate(3deg); }
    .polaroid:nth-child(3)::after { background: rgba(143,157,130,0.5); transform: translateX(-50%) rotate(-1deg); }

    /* Postmark watermark on front */
    .postcard-postmark {
      position: absolute;
      top: 12px; right: 12px;
      z-index: 6; pointer-events: none;
      opacity: 0.15;
    }
    .postcard-postmark-circle {
      width: 80px; height: 80px;
      border: 2.5px solid rgba(255,255,255,0.8);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .postcard-postmark-text {
      font-family: var(--font-display); font-size: 7px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: rgba(255,255,255,0.9);
    }
    .postcard-postmark-lines {
      position: absolute; top: 22px; right: -5px;
      width: 50px; height: 25px;
      background: repeating-linear-gradient(
        0deg, transparent, transparent 4px,
        rgba(255,255,255,0.2) 4px, rgba(255,255,255,0.2) 6px
      );
      transform: rotate(-3deg);
    }

    .postcard-front-bottom {
      padding: 18px 28px 20px;
      background: var(--paper-white);
      display: flex; align-items: center; justify-content: space-between;
      border-top: 2px solid var(--border-subtle);
      position: relative;
    }
    /* Faint ruled lines like a real postcard */
    .postcard-front-bottom::before {
      content: '';
      position: absolute; inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 22px,
        rgba(175,198,207,0.1) 22px,
        rgba(175,198,207,0.1) 23px
      );
      pointer-events: none;
    }
    .postcard-front-info {
      display: flex; align-items: center; gap: 14px;
      position: relative; z-index: 1;
    }
    .postcard-flag { font-size: 44px; line-height: 1; }
    .postcard-country-name {
      font-family: var(--font-display); font-size: 28px; font-weight: 700;
      color: var(--ink-blue); line-height: 1.1;
    }
    .postcard-continent {
      font-family: var(--font-accent); font-size: 17px; color: var(--light-ink);
    }

    /* Stamp decoration — vintage postage stamp */
    .postcard-stamp {
      width: 80px; height: 90px;
      border: 3px dashed rgba(58,74,90,0.15);
      border-radius: 2px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 3px; padding: 8px;
      background: linear-gradient(135deg, rgba(246,241,230,0.8), rgba(232,221,201,0.6));
      transform: rotate(4deg);
      position: relative; z-index: 1;
      /* Perforated stamp edge */
      outline: 1px dotted rgba(58,74,90,0.12);
      outline-offset: 3px;
    }
    .postcard-stamp-icon { font-size: 26px; }
    .postcard-stamp-text {
      font-family: var(--font-accent); font-size: 11px;
      color: var(--light-ink); text-align: center; line-height: 1.15;
    }

    .postcard-flip-hint {
      position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%);
      font-family: var(--font-accent); font-size: 15px; color: var(--postcard-cream);
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
      animation: hintBob 2s ease-in-out infinite;
      white-space: nowrap;
    }
    @keyframes hintBob {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(-4px); }
    }

    /* BACK: details/stats side */
    .postcard-back {
      background: var(--paper-white);
      transform: rotateY(180deg);
      display: flex; flex-direction: column;
      padding: 0;
    }

    /* EXPLORE face styling (content only — positioning handled above) */
    .postcard-explore::-webkit-scrollbar { width: 4px; }
    .postcard-explore::-webkit-scrollbar-thumb { background: var(--dusty-sky); border-radius: 2px; }

    .explore-face-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 26px 14px;
      border-bottom: 2px solid var(--sunset-rust);
      position: sticky; top: 0; background: var(--paper-white); z-index: 2;
    }
    .explore-face-title {
      display: flex; align-items: center; gap: 10px;
    }
    .explore-face-title h2 {
      font-family: var(--font-display); font-size: 22px; font-weight: 700;
      color: var(--ink-blue);
    }
    .explore-face-body {
      padding: 20px 26px;
      display: flex; flex-direction: column; gap: 8px;
      flex: 1;
      overflow-y: auto;
    }
    .explore-face-body::-webkit-scrollbar { width: 4px; }
    .explore-face-body::-webkit-scrollbar-thumb { background: var(--dusty-sky); border-radius: 2px; }

    .explore-city-picker {
      padding: 14px 26px;
      border-bottom: 1px solid var(--border-subtle);
      background: rgba(232,221,201,0.15);
    }
    .explore-city-label {
      font-family: var(--font-body); font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--light-ink); margin-bottom: 8px;
    }
    .explore-city-buttons {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .explore-city-btn {
      padding: 6px 14px; border-radius: 20px;
      border: 1px solid var(--border-subtle);
      background: var(--paper-white);
      font-family: var(--font-body); font-size: 11px; font-weight: 500;
      color: var(--ink-blue); cursor: pointer;
      transition: all 0.2s ease;
    }
    .explore-city-btn:hover {
      border-color: var(--sunset-rust); color: var(--sunset-rust);
      background: rgba(201,110,75,0.06);
    }
    .explore-city-btn.active {
      background: var(--sunset-rust); color: var(--paper-white);
      border-color: var(--sunset-rust);
    }
    .explore-prompt {
      display: flex; align-items: center; justify-content: center;
      height: 120px;
      font-family: var(--font-accent); font-size: 15px;
      color: var(--light-ink); text-align: center;
    }
    /* Faint ruled lines on back */
    .postcard-back::before {
      content: '';
      position: absolute; inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 26px,
        rgba(175,198,207,0.07) 26px,
        rgba(175,198,207,0.07) 27px
      );
      pointer-events: none; z-index: 0;
    }
    .postcard-back-top {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 26px 14px;
      border-bottom: 2px solid var(--faded-coral);
      position: relative; z-index: 1;
    }
    .postcard-back-title {
      display: flex; align-items: center; gap: 12px;
    }
    .postcard-back-title h2 {
      font-family: var(--font-display); font-size: 24px; font-weight: 700;
      color: var(--ink-blue);
    }
    .postcard-back-flag { font-size: 32px; }

    /* Divider line like a real postcard */
    .postcard-back-body {
      flex: 1; display: flex; overflow: hidden;
      position: relative; z-index: 1;
    }
    .postcard-back-left {
      flex: 1; padding: 18px 22px;
      overflow-y: auto;
      border-right: 2px solid var(--faded-coral);
    }
    .postcard-back-left::-webkit-scrollbar { width: 4px; }
    .postcard-back-left::-webkit-scrollbar-thumb { background: var(--dusty-sky); border-radius: 2px; }

    .postcard-back-right {
      flex: 1; padding: 16px 20px;
      overflow-y: auto;
      display: flex; flex-direction: column; gap: 10px;
    }
    .postcard-back-right::-webkit-scrollbar { width: 4px; }
    .postcard-back-right::-webkit-scrollbar-thumb { background: var(--dusty-sky); border-radius: 2px; }

    /* Address lines on right side */
    .postcard-address-lines {
      padding: 8px 0;
    }
    .address-line {
      border-bottom: 1px solid rgba(58,74,90,0.1);
      padding: 4px 0; margin-bottom: 6px;
      font-family: var(--font-accent); font-size: 13px; color: var(--light-ink);
    }

    .pill {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 9px; border-radius: 3px; font-size: 11px;
      background: rgba(175,198,207,0.15); border: 1px solid rgba(175,198,207,0.3);
      margin: 2px 3px 2px 0; color: var(--ink-blue); font-weight: 500;
    }
    .pill .key {
      font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55;
    }
    .detail-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 5px 10px; font-size: 12px;
    }
    .detail-row {
      border-bottom: 1px dashed rgba(58,74,90,0.08); padding-bottom: 3px;
    }
    .detail-row:last-child { border-bottom: none; }
    .detail-label {
      font-size: 9px; opacity: 0.5; text-transform: uppercase;
      letter-spacing: 0.07em; font-weight: 500; color: var(--light-ink);
    }
    .detail-value { font-size: 12px; color: var(--ink-blue); }
    .detail-range-row {
      border-bottom: 1px dashed rgba(58,74,90,0.08); padding-bottom: 4px;
    }
    .detail-range { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
    .detail-range-bar {
      flex: 1; height: 5px; border-radius: 3px;
      background: rgba(58,74,90,0.10); overflow: hidden;
    }
    .detail-range-fill { display: block; height: 100%; border-radius: 3px; }
    .detail-range-val {
      font-size: 10px; color: var(--ink-blue); white-space: nowrap;
      font-variant-numeric: tabular-nums; min-width: 46px; text-align: right;
    }

    /* Bucket list section on back of postcard */
    .postcard-bucket-section {
      padding-top: 8px; border-top: 1px dashed var(--border-subtle);
      display: flex; flex-direction: column; gap: 6px;
    }
    .postcard-bucket-title {
      font-family: var(--font-display); font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.1em; color: var(--faded-coral);
    }
    .bucket-notes {
      width: 100%; min-height: 44px; resize: vertical;
      padding: 6px 8px; border-radius: 4px;
      border: 1px solid var(--border-subtle); background: var(--postcard-cream);
      color: var(--ink-blue); font-size: 11px; font-family: var(--font-body);
    }
    .bucket-notes::placeholder { color: rgba(58,74,90,0.3); font-family: var(--font-accent); }
    .postcard-bucket-actions { display: flex; gap: 6px; flex-wrap: wrap; }
    .postcard-bucket-actions button {
      padding: 5px 12px; border-radius: 3px; font-size: 10px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.08em;
      cursor: pointer; font-family: var(--font-body); transition: all 0.2s;
    }
    .btn-bucket-save {
      border: 1px solid var(--faded-coral);
      background: linear-gradient(135deg, rgba(212,138,122,0.1), rgba(201,110,75,0.05));
      color: var(--stamp-burgundy);
    }
    .btn-bucket-save:hover { background: rgba(212,138,122,0.2); }
    .btn-bucket-save:disabled { opacity: 0.35; cursor: default; }
    .btn-bucket-remove {
      border: 1px solid rgba(124,63,63,0.3); background: rgba(124,63,63,0.05);
      color: var(--stamp-burgundy);
    }
    .btn-bucket-remove:disabled { opacity: 0.25; cursor: default; }
    .bucket-status-text {
      font-family: var(--font-accent); font-size: 12px; color: var(--sea-glass);
    }

    /* AI summary and compare on back */
    .postcard-ai-section {
      padding-top: 8px; border-top: 1px dashed var(--border-subtle);
    }
    .postcard-ai-btn {
      padding: 5px 12px; border-radius: 3px;
      border: 1px solid var(--sea-glass); background: rgba(143,175,166,0.1);
      color: var(--ink-blue); font-size: 10px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.08em;
      cursor: pointer; font-family: var(--font-body); transition: all 0.2s;
    }
    .postcard-ai-btn:disabled { opacity: 0.3; cursor: default; }
    .postcard-ai-btn:hover:not(:disabled) { background: rgba(143,175,166,0.2); }
    .ai-summary-text {
      font-family: var(--font-secondary); font-size: 12px;
      line-height: 1.55; color: var(--ink-blue); margin-top: 6px;
    }

    /* Trip planner on back */
    .postcard-trip-section {
      padding-top: 8px; border-top: 1px dashed var(--border-subtle);
    }
    .postcard-trip-title {
      font-family: var(--font-display); font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.1em; color: var(--faded-coral);
      margin-bottom: 6px;
    }
    .trip-cities-row { display: flex; flex-wrap: wrap; gap: 4px; }
    .trip-city-pill {
      padding: 3px 9px; border-radius: 3px;
      border: 1px solid var(--dusty-sky); background: rgba(175,198,207,0.06);
      color: var(--ink-blue); font-size: 10px; cursor: pointer;
      font-family: var(--font-body); transition: all 0.15s;
    }
    .trip-city-pill:hover { background: rgba(175,198,207,0.18); }

    /* Compare section on back */
    /* ===== EXPLORE: Hotels, Activities, Landmarks ===== */
    .postcard-explore-section {
      padding-top: 10px; border-top: 1px dashed var(--border-subtle);
    }
    .explore-title {
      font-family: var(--font-display); font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--sunset-rust); margin-bottom: 10px;
      display: flex; align-items: center; gap: 5px;
    }
    .explore-results {
      display: flex; flex-direction: column; gap: 6px;
    }
    .explore-loading {
      font-family: var(--font-accent); font-size: 12px;
      color: var(--light-ink); padding: 8px 0;
    }
    .explore-category-label {
      font-family: var(--font-body); font-size: 9px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--light-ink); margin-top: 6px; margin-bottom: 3px;
      padding-bottom: 3px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .explore-card {
      display: flex; gap: 10px; padding: 8px;
      border-radius: 5px; background: rgba(232,221,201,0.2);
      border: 1px solid var(--border-subtle);
      transition: all 0.2s ease;
      text-decoration: none; color: inherit;
    }
    .explore-card:hover {
      background: rgba(232,221,201,0.4);
      transform: translateX(2px);
      border-color: var(--dusty-sky);
    }
    .explore-card-photo {
      width: 72px; height: 56px; flex-shrink: 0;
      border-radius: 4px; object-fit: cover;
      border: 1px solid var(--border-subtle);
      filter: saturate(0.85) contrast(0.95);
    }
    .explore-card-icon {
      width: 32px; height: 32px; flex-shrink: 0;
      border-radius: 4px;
      background: var(--postcard-cream);
      border: 1px solid var(--border-subtle);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      color: var(--ink-blue);
    }
    .explore-card-icon.hotel { background: rgba(175,198,207,0.2); color: var(--ink-blue); }
    .explore-card-icon.food { background: rgba(212,138,122,0.15); color: var(--sunset-rust); }
    .explore-card-icon.sight { background: rgba(143,157,130,0.2); color: #5A6B4A; }
    .explore-card-icon.activity { background: rgba(201,110,75,0.12); color: var(--sunset-rust); }
    .explore-card-body {
      flex: 1; min-width: 0;
    }
    .explore-card-name {
      font-family: var(--font-body); font-size: 11px; font-weight: 600;
      color: var(--ink-blue);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .explore-card-meta {
      font-size: 9px; color: var(--light-ink);
      margin-top: 1px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .explore-card-rating {
      font-size: 9px; color: var(--faded-coral); font-weight: 600;
      margin-top: 1px;
    }
    .explore-card-tip {
      font-family: var(--font-secondary); font-size: 10px;
      color: var(--light-ink); font-style: italic;
      margin-top: 3px; line-height: 1.35;
    }
    .explore-empty {
      font-family: var(--font-accent); font-size: 12px;
      color: var(--light-ink); padding: 6px 0;
    }

    .postcard-compare-section {
      padding-top: 8px; border-top: 1px dashed var(--border-subtle);
    }
    .postcard-compare-title {
      font-family: var(--font-display); font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.1em; color: var(--faded-coral);
      margin-bottom: 6px;
    }
    .compare-select-row { display: flex; gap: 6px; margin-bottom: 6px; }
    .compare-select-row select { flex: 1; font-size: 11px; }
    .compare-btn {
      padding: 5px 12px; border-radius: 3px;
      border: 1px solid var(--dusty-sky); background: rgba(175,198,207,0.1);
      color: var(--ink-blue); font-size: 10px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.08em;
      cursor: pointer; font-family: var(--font-body); transition: all 0.2s;
    }
    .compare-btn:hover { background: rgba(175,198,207,0.2); }
    .compare-table {
      width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 10px;
    }
    .compare-table th, .compare-table td {
      border-bottom: 1px dashed var(--border-subtle); padding: 2px 3px; text-align: left;
    }
    .compare-table th {
      text-transform: uppercase; letter-spacing: 0.05em;
      font-weight: 600; color: var(--faded-coral); font-size: 9px;
    }

    /* Close button for postcard */
    .postcard-close {
      position: absolute; top: -16px; right: -16px;
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--paper-white); border: 1px solid var(--border-subtle);
      color: var(--ink-blue); font-size: 18px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 12px rgba(58,74,90,0.15);
      z-index: 10; transition: all 0.2s;
    }
    .postcard-close:hover {
      background: var(--faded-coral); color: white; border-color: var(--faded-coral);
      transform: rotate(90deg);
    }

    /* Flip button */
    .postcard-flip-btn {
      padding: 5px 14px; border-radius: 3px;
      border: 1px solid var(--dusty-sky); background: rgba(175,198,207,0.12);
      color: var(--ink-blue); font-size: 11px; font-weight: 500;
      cursor: pointer; font-family: var(--font-body);
      display: inline-flex; align-items: center; gap: 5px;
      transition: all 0.2s;
    }
    .postcard-flip-btn:hover {
      background: rgba(175,198,207,0.25); transform: translateY(-1px);
    }

    /* Visited stamp animation */
    @keyframes stampSlam {
      0% { transform: translate(-50%,-50%) rotate(-12deg) scale(3); opacity: 0; }
      40% { transform: translate(-50%,-50%) rotate(-12deg) scale(0.95); opacity: 0.85; }
      55% { transform: translate(-50%,-50%) rotate(-12deg) scale(1.05); opacity: 0.8; }
      100% { transform: translate(-50%,-50%) rotate(-12deg) scale(1); opacity: 0.65; }
    }
    .visited-stamp-overlay {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%,-50%) rotate(-12deg);
      border: 4px solid var(--stamp-burgundy); border-radius: 4px;
      padding: 6px 20px;
      font-family: var(--font-display); font-size: 18px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.25em;
      color: var(--stamp-burgundy);
      opacity: 0; pointer-events: none;
      animation: stampSlam 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* Postcard entrance animation */
    @keyframes postcardEnter {
      0% { transform: translateY(60px) rotate(-2deg) scale(0.85); opacity: 0; }
      100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
    }
    .postcard-overlay.visible .postcard {
      animation: postcardEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* Spin globe button animation */
    @keyframes spinPulse {
      0% { box-shadow: 0 0 0 0 rgba(212,138,122,0.3); }
      70% { box-shadow: 0 0 0 12px rgba(212,138,122,0); }
      100% { box-shadow: 0 0 0 0 rgba(212,138,122,0); }
    }
    .btn-spin { animation: spinPulse 3s ease-in-out infinite; }
    .btn-spin:hover { animation: none; }

    /* Trip itinerary list in bucket drawer */
    .trip-itinerary-list { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
    .trip-itinerary-item {
      display: flex; align-items: center; justify-content: space-between;
      gap: 6px; padding: 6px 8px; border-radius: 5px;
      background: rgba(232,221,201,0.4); border: 1px solid var(--border-subtle);
      font-size: 11px;
    }
    .trip-itinerary-main { display: flex; flex-direction: column; gap: 1px; }
    .trip-itinerary-label { font-weight: 500; color: var(--ink-blue); }
    .trip-itinerary-meta { opacity: 0.55; color: var(--light-ink); font-size: 10px; }
    .trip-itinerary-controls { display: flex; gap: 3px; }
    .trip-itinerary-btn {
      border-radius: 3px; border: 1px solid var(--border-subtle);
      background: transparent; color: var(--ink-blue);
      font-size: 10px; padding: 2px 6px; cursor: pointer;
      font-family: var(--font-body); transition: background 0.15s;
    }
    .trip-itinerary-btn:hover { background: rgba(175,198,207,0.15); }
    .trip-planner-footer {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: 6px; font-size: 11px;
    }
    .trip-clear-btn {
      border-radius: 3px; border: 1px solid rgba(124,63,63,0.3);
      background: rgba(124,63,63,0.05); color: var(--stamp-burgundy);
      font-size: 10px; padding: 3px 8px; cursor: pointer;
      font-family: var(--font-body); transition: all 0.15s;
    }
    .trip-clear-btn:hover { background: rgba(124,63,63,0.12); }

    /* ===== MAP COMPASS ROSE ===== */
    .map-compass {
      position: absolute;
      bottom: 20px; left: 20px;
      width: 80px; height: 80px;
      z-index: 10;
      pointer-events: none;
      opacity: 0;
      animation: fadeSlideIn 0.8s ease 2.5s forwards;
    }

    /* ===== AMBIENT "POSTAL ATLAS" LAYER (behind the globe) ===== */
    .map-ambient {
      position: absolute; inset: 0; overflow: hidden;
      pointer-events: none; z-index: 0;
      opacity: 0; animation: fadeSlideIn 1.4s ease 1.2s forwards;
    }
    /* faint rotated atlas grid */
    .ma-grid {
      position: absolute; inset: -12%;
      background-image:
        linear-gradient(rgba(58,74,90,0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58,74,90,0.13) 1px, transparent 1px);
      background-size: 88px 88px;
      transform: rotate(-3deg);
      mask-image: radial-gradient(ellipse 60% 70% at center, transparent 0 40%, #000 74%);
      -webkit-mask-image: radial-gradient(ellipse 60% 70% at center, transparent 0 40%, #000 74%);
    }
    /* soft edge vignette + warm/cool glows */
    .ma-vignette {
      position: absolute; inset: 0;
      background:
        radial-gradient(circle at 13% 16%, rgba(175,198,207,0.20), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(212,138,122,0.14), transparent 28%),
        linear-gradient(90deg, rgba(246,241,230,0.30), transparent 14%, transparent 86%, rgba(246,241,230,0.30)),
        linear-gradient(0deg, rgba(246,241,230,0.30), transparent 16%, transparent 88%, rgba(246,241,230,0.22));
      mix-blend-mode: soft-light;
    }
    /* postmark stamps */
    .ma-postmark {
      position: absolute; border-radius: 50%;
      border: 3px double rgba(124,63,63,0.28);
      display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
      font-family: var(--font-display); color: rgba(124,63,63,0.30);
      font-weight: 700; text-transform: uppercase; line-height: 1.25;
    }
    .ma-pm-lg { right: 6%; bottom: 9%; width: 168px; height: 168px; transform: rotate(-12deg); }
    .ma-pm-lg .ma-pm-top { font-size: 15px; letter-spacing: 0.14em; }
    .ma-pm-lg .ma-pm-mid { font-family: var(--font-accent); font-size: 19px; letter-spacing: 0; margin: 2px 0; text-transform: none; }
    .ma-pm-lg .ma-pm-bot { font-size: 8px; letter-spacing: 0.22em; }
    .ma-pm-sm { left: 5.5%; top: 9%; width: 104px; height: 104px; transform: rotate(9deg); }
    .ma-pm-sm .ma-pm-mid { font-size: 11px; letter-spacing: 0.16em; }
    /* dashed route arcs */
    .ma-route {
      position: absolute; border-top: 2px dashed rgba(124,63,63,0.30);
      border-radius: 50%; width: 320px; height: 110px;
    }
    .ma-r1 { left: 10%; bottom: 22%; transform: rotate(-12deg); }
    .ma-r2 { right: 12%; top: 30%; width: 250px; transform: rotate(17deg); }
    /* drifting planes */
    .ma-plane { position: absolute; font-size: 20px; color: rgba(124,63,63,0.36); animation: maFloat 8s ease-in-out infinite; }
    .ma-p1 { left: 27%; bottom: 26%; transform: rotate(20deg); }
    .ma-p2 { right: 24%; top: 33%; transform: rotate(-18deg); animation-delay: 2.4s; }
    @keyframes maFloat { 0%,100% { translate: 0 0; opacity: 0.26; } 50% { translate: 16px -8px; opacity: 0.44; } }
    /* tiny editorial caption */
    .ma-coord {
      position: absolute; right: 6%; top: 10%; max-width: 200px; text-align: right;
      font-family: var(--font-accent); font-size: 16px; color: rgba(58,74,90,0.34); line-height: 1.2;
    }
    @media (max-width: 720px) { .ma-pm-sm, .ma-coord, .ma-r2, .ma-p2 { display: none; } .ma-pm-lg { width: 120px; height: 120px; } }

    /* ===== MAP LEGEND ===== */
    .map-legend {
      position: absolute;
      bottom: 20px; right: 20px;
      z-index: 10;
      pointer-events: none;
      opacity: 0;
      animation: fadeSlideIn 0.8s ease 2.8s forwards;
    }
    .map-legend-title {
      font-family: var(--font-display); font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--ink-blue); margin-bottom: 4px; opacity: 0.7;
    }
    .map-legend-bar {
      display: flex; align-items: center; gap: 6px;
    }
    .map-legend-low, .map-legend-high {
      font-size: 9px; font-family: var(--font-body);
      color: var(--light-ink); text-transform: uppercase; letter-spacing: 0.08em;
    }
    .map-legend-gradient {
      width: 80px; height: 8px; border-radius: 4px;
      background: linear-gradient(90deg, #D48A7A, #B8A893, #8FAFA6);
      border: 1px solid var(--border-subtle);
    }

    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ===== ONBOARDING OVERLAY ===== */
    .onboarding-overlay {
      position: fixed; inset: 0;
      background: var(--postcard-cream);
      z-index: 10000;
      display: flex; align-items: center; justify-content: center;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }
    .onboarding-overlay.hidden {
      opacity: 0; visibility: hidden; pointer-events: none;
    }
    .onboarding-content {
      text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 16px;
    }
    .onboarding-logo {
      opacity: 0;
      animation: onbLogoIn 0.6s ease 0.2s forwards;
    }
    @keyframes onbLogoIn {
      from { opacity: 0; transform: scale(0.7) rotate(-10deg); }
      to { opacity: 1; transform: scale(1) rotate(0deg); }
    }
    .onboarding-title {
      font-family: var(--font-display);
      font-size: 42px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--ink-blue);
      min-height: 52px;
      border-right: 2px solid var(--faded-coral);
      white-space: nowrap; overflow: hidden;
      animation: onbBlink 0.7s step-end infinite;
    }
    @keyframes onbBlink {
      50% { border-color: transparent; }
    }
    .onboarding-sub {
      font-family: var(--font-accent);
      font-size: 20px; color: var(--light-ink);
      opacity: 0;
      animation: onbFade 0.6s ease 1.6s forwards;
    }
    .onboarding-hint {
      font-family: var(--font-body);
      font-size: 12px; color: var(--light-ink);
      text-transform: uppercase; letter-spacing: 0.14em;
      opacity: 0;
      animation: onbFade 0.5s ease 2s forwards;
    }
    @keyframes onbFade {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 0.7; transform: translateY(0); }
    }

    /* Onboarding logo image */
    .onboarding-logo-img {
      max-width: 320px; width: 80vw; height: auto;
      opacity: 0;
      animation: onbLogoIn 0.6s ease 0.2s forwards;
    }

    /* Onboarding home base input */
    .onboarding-home {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      opacity: 0; transform: translateY(10px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      margin-top: 4px;
    }
    .onboarding-home.visible {
      opacity: 1; transform: translateY(0);
    }
    .onboarding-home-label {
      font-family: var(--font-display); font-size: 16px; font-weight: 600;
      color: var(--ink-blue); letter-spacing: 0.04em;
    }
    .onboarding-home-row {
      display: flex; gap: 8px; align-items: center;
    }
    .onboarding-airport-input {
      padding: 10px 16px; border-radius: 6px;
      border: 2px solid var(--dusty-sky); background: var(--paper-white);
      color: var(--ink-blue); font-size: 16px; font-family: var(--font-body);
      text-transform: uppercase; letter-spacing: 0.15em;
      width: 280px; text-align: center;
      transition: border-color 0.2s;
    }
    .onboarding-airport-input:focus {
      outline: none; border-color: var(--faded-coral);
    }
    .onboarding-airport-input::placeholder {
      text-transform: none; letter-spacing: 0; font-size: 13px;
      color: rgba(58,74,90,0.35);
    }
    .onboarding-go-btn {
      padding: 10px 22px; border-radius: 6px;
      border: 2px solid var(--faded-coral);
      background: linear-gradient(135deg, rgba(212,138,122,0.15), rgba(201,110,75,0.08));
      color: var(--stamp-burgundy); font-family: var(--font-display);
      font-size: 14px; font-weight: 600; letter-spacing: 0.08em;
      cursor: pointer; transition: all 0.25s ease;
    }
    .onboarding-go-btn:hover {
      background: linear-gradient(135deg, rgba(212,138,122,0.3), rgba(201,110,75,0.15));
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(212,138,122,0.3);
    }
    .onboarding-home-hint {
      font-family: var(--font-accent); font-size: 13px; color: var(--light-ink);
    }
    .onboarding-skip-btn {
      background: none; border: none; padding: 6px 12px;
      font-family: var(--font-body); font-size: 12px;
      color: var(--light-ink); cursor: pointer;
      text-decoration: underline; text-underline-offset: 3px;
      opacity: 0.7; transition: opacity 0.2s;
    }
    .onboarding-skip-btn:hover { opacity: 1; }

    /* Travelers say section */
    .postcard-travelers-section {
      padding-top: 8px; border-top: 1px dashed var(--border-subtle);
    }
    .postcard-flights-section {
      padding-top: 8px; border-top: 1px dashed var(--border-subtle);
    }
    .flights-section-title {
      font-family: var(--font-display, var(--font-body));
      font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--faded-coral); margin-bottom: 6px;
    }
    .flights-loading, .flights-empty {
      font-size: 11px; color: var(--light-ink); padding: 4px 0;
    }
    /* City intelligence (RFC-003 M2) */
    .city-intel { margin: 4px 0 10px; }
    .city-intel-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
    .city-intel-chip {
      font-size: 10.5px; font-weight: 400; letter-spacing: 0;
      color: var(--light-ink); background: transparent;
      border: 1px solid var(--border-subtle); border-radius: 999px; padding: 2px 9px;
      line-height: 1.5;
    }
    .city-intel-summary {
      font-family: var(--font-secondary, var(--font-body)); font-size: 13px;
      line-height: 1.5; color: var(--ink-blue); margin-bottom: 10px;
    }
    .city-intel-scores { display: flex; flex-direction: column; gap: 4px; }
    .city-score-row { display: grid; grid-template-columns: 78px 1fr 26px; align-items: center; gap: 6px; }
    .city-score-label { font-size: 10px; color: var(--light-ink); }
    .city-score-bar { height: 6px; border-radius: 3px; background: rgba(58,74,90,0.10); overflow: hidden; }
    .city-score-fill { display: block; height: 100%; background: var(--sea-glass); border-radius: 3px; }
    .city-score-val { font-size: 10px; color: var(--ink-blue); text-align: right; font-variant-numeric: tabular-nums; }
    .city-intel-warn { font-size: 10px; color: var(--stamp-burgundy); margin-top: 6px; }
    .city-flight-meta { font-size: 11px; color: var(--ink-blue); margin-top: 8px; font-weight: 600; }

    /* M3 city actions */
    .city-actions { display: flex; gap: 8px; margin: 10px 0 4px; }
    .city-action-btn {
      flex: 1; padding: 9px 10px; border-radius: 6px; cursor: pointer;
      font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
      border: 1px solid var(--faded-coral);
    }
    .city-plan-btn { background: var(--faded-coral); color: var(--paper-white); }
    .city-plan-btn:hover { background: var(--sunset-rust); border-color: var(--sunset-rust); }
    .city-save-btn { background: none; color: var(--faded-coral); }
    .city-save-btn:hover { background: rgba(212,138,122,0.10); }
    .city-save-btn.saved { background: var(--faded-coral); color: var(--paper-white); }

    /* M4 recommendation tabs */
    .rec-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .rec-tab {
      padding: 5px 11px; border-radius: 14px; cursor: pointer;
      font-family: var(--font-body); font-size: 11px; font-weight: 600;
      border: 1px solid var(--border-subtle); background: none; color: var(--light-ink);
    }
    .rec-tab.active { background: var(--ink-blue); color: var(--postcard-cream); border-color: var(--ink-blue); }
    .rec-list { display: flex; flex-direction: column; gap: 6px; }
    .rec-card {
      padding: 8px 10px; border-radius: 6px;
      background: rgba(232,221,201,0.30); border-left: 3px solid var(--sea-glass);
    }
    .rec-card-name { font-size: 12px; font-weight: 600; color: var(--ink-blue); }
    .rec-card-meta { font-size: 10px; color: var(--light-ink); margin-top: 2px; }
    .rec-link { text-decoration: none; color: var(--faded-coral); font-size: 11px; }

    /* M3 trip picker + toast */
    .trip-picker-overlay {
      position: fixed; inset: 0; background: rgba(44,54,64,0.45);
      display: flex; align-items: center; justify-content: center; z-index: 16000;
    }
    .trip-picker {
      background: var(--paper-white); border-radius: 10px; padding: 16px;
      width: min(340px, 90vw); max-height: 70vh; overflow-y: auto;
      display: flex; flex-direction: column; gap: 6px;
      box-shadow: 0 16px 48px rgba(44,54,64,0.3);
    }
    .trip-picker-title {
      font-family: var(--font-display, var(--font-body)); font-size: 12px;
      text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-blue); margin-bottom: 4px;
    }
    .trip-picker-item {
      display: flex; justify-content: space-between; align-items: center; gap: 8px;
      padding: 10px 12px; border-radius: 6px; cursor: pointer; text-align: left;
      border: 1px solid var(--border-subtle); background: none;
      font-family: var(--font-body); font-size: 13px; color: var(--ink-blue);
    }
    .trip-picker-item:hover { background: var(--warm-sand); }
    .trip-picker-meta { font-size: 10px; color: var(--light-ink); }
    .trip-picker-new { color: var(--faded-coral); font-weight: 600; justify-content: center; }
    .trip-picker-close { background: none; border: none; color: var(--light-ink); font-size: 12px; cursor: pointer; padding: 6px; }
    .trip-toast {
      position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
      background: var(--ink-blue); color: var(--postcard-cream); padding: 10px 18px;
      border-radius: 20px; font-family: var(--font-body); font-size: 13px; z-index: 16001;
      opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
    }
    .trip-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    .flights-controls {
      display: flex; align-items: center; gap: 6px; margin: 2px 0 8px;
    }
    .flights-date {
      font-family: var(--font-body); font-size: 11px; color: var(--ink-blue);
      padding: 3px 6px; border: 1px solid var(--border-subtle); border-radius: 4px;
      background: var(--paper-white);
    }
    .flights-date-clear {
      font-family: var(--font-body); font-size: 10px; color: var(--ink-blue);
      padding: 3px 8px; border: 1px solid var(--border-subtle); border-radius: 4px;
      background: none; cursor: pointer;
    }
    .flights-date-clear:hover { background: var(--warm-sand); }
    .flights-route {
      font-size: 11px; font-weight: 600; color: var(--ink-blue); margin-bottom: 6px;
    }
    .flights-stale { color: var(--light-ink); font-weight: 400; font-size: 10px; }
    .flights-list { display: flex; flex-direction: column; gap: 5px; }
    .flight-row {
      display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
      padding: 6px 8px; border-radius: 5px;
      background: rgba(175,198,207,0.18);
      border-left: 3px solid var(--sea-glass);
    }
    .flight-airline { font-size: 12px; font-weight: 600; color: var(--ink-blue); }
    .flight-meta { font-size: 10px; color: var(--light-ink); text-align: right; }
    .flights-book {
      display: inline-block; margin-top: 8px; font-size: 11px; font-weight: 600;
      color: var(--faded-coral); text-decoration: none;
    }
    .flights-book:hover { text-decoration: underline; }
    .travelers-say-content {
      margin-top: 6px; display: flex; flex-direction: column; gap: 8px;
    }
    .traveler-quote {
      padding: 8px 10px; border-radius: 5px;
      background: rgba(232,221,201,0.35);
      border-left: 3px solid var(--dusty-sky);
      font-size: 11px; line-height: 1.45;
    }
    .traveler-quote-text {
      font-family: var(--font-secondary); font-size: 12px;
      color: var(--ink-blue); font-style: italic;
    }
    .traveler-quote-source {
      font-family: var(--font-body); font-size: 9px;
      color: var(--light-ink); margin-top: 3px;
      text-transform: uppercase; letter-spacing: 0.06em;
    }
    .travelers-loading {
      font-family: var(--font-accent); font-size: 12px;
      color: var(--light-ink); padding: 6px 0;
    }
    .travelers-synthesis {
      font-family: var(--font-secondary); font-size: 12px;
      line-height: 1.5; color: var(--ink-blue);
      padding: 6px 0; border-top: 1px dashed var(--border-subtle);
      margin-top: 4px;
    }

    /* Plane flight animation line */
    .plane-flight-active .amcharts-MapLineSeries { transition: opacity 0.3s; }

    /* ===== SPIN ANIMATION ===== */
    .spin-active #chartdiv {
      transition: filter 0.3s ease;
      filter: blur(1px);
    }
    .spin-vignette {
      position: fixed; inset: 0;
      background: radial-gradient(ellipse at center, transparent 40%, rgba(58,74,90,0.15) 100%);
      z-index: 50; pointer-events: none;
      opacity: 0; transition: opacity 0.4s ease;
    }
    .spin-vignette.active { opacity: 1; }
    .spin-label {
      position: fixed;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-display);
      font-size: 28px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.2em;
      color: var(--ink-blue);
      text-shadow: 0 2px 12px rgba(246,241,230,0.8);
      z-index: 55; pointer-events: none;
      opacity: 0;
    }
    .spin-label.active {
      animation: spinLabelPulse 0.6s ease forwards;
    }
    @keyframes spinLabelPulse {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
    }



    /* ===== CITY TICKET STUBS on postcard back ===== */
    .postcard-cities-section {
      margin-top: 10px; padding-top: 10px;
      border-top: 1px dashed var(--border-subtle);
    }
    .cities-section-title {
      font-family: var(--font-display); font-size: 10px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--light-ink); margin-bottom: 8px;
    }
    .city-stubs {
      display: flex; flex-wrap: wrap; gap: 6px;
    }
    .city-stub {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 12px 6px 10px;
      background: var(--postcard-cream);
      border: 1px solid var(--border-subtle);
      border-left: 3px solid var(--sunset-rust);
      border-radius: 2px;
      font-family: var(--font-body); font-size: 11px; font-weight: 600;
      color: var(--ink-blue);
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }
    .city-stub:hover {
      background: rgba(201,110,75,0.08);
      border-color: var(--sunset-rust);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(201,110,75,0.15);
    }
    .city-stub-tag {
      font-family: var(--font-accent); font-size: 9px;
      color: var(--light-ink); font-weight: 400;
    }
    /* Perforated edge on right side */
    .city-stub::after {
      content: '';
      position: absolute; right: -1px; top: 2px; bottom: 2px;
      width: 3px;
      background: repeating-linear-gradient(to bottom,
        var(--postcard-cream) 0px, var(--postcard-cream) 2px,
        transparent 2px, transparent 4px
      );
    }

    /* ===== CITY CARD MODAL ===== */
    .city-card-overlay {
      position: fixed; inset: 0; z-index: 620;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.35s ease;
    }
    .city-card-overlay.visible { opacity: 1; pointer-events: auto; }

    .city-card {
      width: 420px; max-width: 94vw;
      max-height: 85vh;
      background: var(--paper-white);
      border-radius: 8px;
      box-shadow: 0 25px 70px rgba(58,74,90,0.35), 0 6px 20px rgba(58,74,90,0.15);
      overflow: hidden;
      display: flex; flex-direction: column;
      animation: cityCardIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes cityCardIn {
      from { transform: translateY(40px) scale(0.92); opacity: 0; }
      to { transform: translateY(0) scale(1); opacity: 1; }
    }

    .city-card-hero {
      position: relative;
      height: 180px; overflow: hidden; flex-shrink: 0;
    }
    .city-card-hero img {
      width: 100%; height: 100%; object-fit: cover;
      filter: saturate(0.85) contrast(0.95) brightness(0.95);
    }
    .city-card-hero-overlay {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 16px 20px 12px;
      background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    }
    .city-card-name {
      font-family: var(--font-display); font-size: 24px; font-weight: 700;
      color: #fff; letter-spacing: 0.03em;
    }
    .city-card-country {
      font-family: var(--font-accent); font-size: 13px;
      color: rgba(255,255,255,0.8);
    }
    .city-card-close {
      position: absolute; top: 10px; right: 10px;
      width: 30px; height: 30px; border-radius: 50%;
      border: none; background: rgba(0,0,0,0.4);
      color: white; font-size: 16px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(4px);
    }
    .city-card-close:hover { background: rgba(0,0,0,0.6); }

    .city-card-body {
      flex: 1; overflow-y: auto; padding: 18px 20px;
    }
    .city-card-body::-webkit-scrollbar { width: 4px; }
    .city-card-body::-webkit-scrollbar-thumb { background: var(--dusty-sky); border-radius: 2px; }

    .city-card-vibe {
      font-family: var(--font-accent); font-size: 14px;
      color: var(--sunset-rust); margin-bottom: 10px;
      font-style: italic;
    }
    .city-card-snapshot {
      display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
    }
    .city-card-chip {
      padding: 4px 10px; border-radius: 12px;
      font-size: 10px; font-family: var(--font-body); font-weight: 500;
      background: rgba(175,198,207,0.2); color: var(--ink-blue);
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .city-card-section-title {
      font-family: var(--font-display); font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--sunset-rust); margin: 14px 0 8px;
      padding-bottom: 4px; border-bottom: 1px solid var(--border-subtle);
    }
    .city-card-narrative {
      font-family: var(--font-secondary); font-size: 13px;
      color: var(--ink-blue); line-height: 1.55;
    }
    .city-card-recs {
      display: flex; flex-direction: column; gap: 6px;
    }
    .city-card-actions {
      display: flex; gap: 8px; padding: 12px 20px;
      border-top: 1px solid var(--border-subtle);
      flex-shrink: 0;
    }
    .city-card-action {
      flex: 1; padding: 8px; border-radius: 20px;
      font-family: var(--font-body); font-size: 11px; font-weight: 600;
      text-align: center; cursor: pointer; transition: all 0.2s;
      border: 1px solid var(--border-subtle);
      background: var(--paper-white); color: var(--ink-blue);
    }
    .city-card-action:hover { border-color: var(--sunset-rust); color: var(--sunset-rust); }
    .city-card-action.primary {
      background: var(--sunset-rust); color: var(--postcard-cream);
      border-color: var(--sunset-rust);
    }
    .city-card-action.primary:hover { background: #A85A3A; }

    .city-card-perspective {
      font-family: var(--font-accent); font-size: 14px;
      color: var(--sunset-rust);
      margin: 12px 0 4px;
      padding: 10px 14px;
      border-left: 3px solid var(--sunset-rust);
      background: rgba(201,110,75,0.04);
      font-style: italic;
      line-height: 1.4;
    }
    .city-card-perspective::before {
      content: 'Postmarked Perspective';
      display: block;
      font-family: var(--font-display); font-size: 8px;
      text-transform: uppercase; letter-spacing: 0.15em;
      color: var(--light-ink); font-style: normal;
      margin-bottom: 4px;
    }

    .city-card-loading {
      text-align: center; padding: 12px;
      font-family: var(--font-accent); font-size: 12px; color: var(--light-ink);
    }

    /* ===== PLAN MY TRIP: Button =====*/
    .btn-trip {
      background: var(--sunset-rust); color: var(--postcard-cream);
      border-color: var(--sunset-rust);
    }
    .btn-trip:hover { background: #A85A3A; border-color: #A85A3A; }

    /* ===== TRIP QUESTIONNAIRE OVERLAY ===== */
    .trip-quiz-overlay {
      position: fixed; inset: 0; z-index: 700;
      background: radial-gradient(ellipse at 50% 40%, #E8DDC9 0%, #C9BBAA 100%);
      display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s ease;
    }
    .trip-quiz-overlay.visible { opacity: 1; pointer-events: auto; }
    .trip-quiz-container {
      width: 580px; max-width: 92vw; text-align: center;
      padding: 40px; position: relative;
    }
    .trip-quiz-close {
      position: absolute; top: -20px; right: -10px;
      width: 36px; height: 36px; border-radius: 50%;
      border: 1px solid var(--border-subtle); background: var(--paper-white);
      color: var(--ink-blue); font-size: 18px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .trip-quiz-close:hover { background: var(--faded-coral); color: white; }
    .trip-quiz-progress {
      display: flex; gap: 6px; justify-content: center; margin-bottom: 28px;
    }
    .trip-quiz-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--border-subtle); transition: all 0.3s;
    }
    .trip-quiz-dot.active { background: var(--sunset-rust); transform: scale(1.3); }
    .trip-quiz-dot.done { background: var(--sea-glass); }
    .trip-quiz-question {
      font-family: var(--font-display); font-size: 22px; font-weight: 700;
      color: var(--ink-blue); margin-bottom: 8px; letter-spacing: 0.02em;
    }
    .trip-quiz-sub {
      font-family: var(--font-accent); font-size: 14px;
      color: var(--light-ink); margin-bottom: 24px;
    }
    .trip-quiz-options {
      display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
      margin-bottom: 28px;
    }
    .trip-quiz-opt {
      padding: 12px 22px; border-radius: 24px;
      border: 2px solid var(--border-subtle);
      background: var(--paper-white);
      font-family: var(--font-body); font-size: 13px; font-weight: 500;
      color: var(--ink-blue); cursor: pointer;
      transition: all 0.2s ease;
    }
    .trip-quiz-opt:hover {
      border-color: var(--sunset-rust); color: var(--sunset-rust);
      transform: translateY(-2px); box-shadow: 0 4px 12px rgba(201,110,75,0.15);
    }
    .trip-quiz-opt.selected {
      background: var(--sunset-rust); color: var(--postcard-cream);
      border-color: var(--sunset-rust);
    }
    .trip-quiz-opt.multi.selected {
      background: var(--sea-glass); color: var(--postcard-cream);
      border-color: var(--sea-glass);
    }
    .trip-quiz-nav {
      display: flex; justify-content: center; gap: 12px;
    }
    .trip-quiz-nav button {
      padding: 10px 28px; border-radius: 24px;
      font-family: var(--font-body); font-size: 13px; font-weight: 600;
      cursor: pointer; transition: all 0.2s;
    }
    .trip-quiz-back {
      border: 1px solid var(--border-subtle); background: var(--paper-white); color: var(--ink-blue);
    }
    .trip-quiz-next {
      border: none; background: var(--sunset-rust); color: var(--postcard-cream);
    }
    .trip-quiz-next:hover { background: #A85A3A; }
    .trip-quiz-next:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ===== TRIP RESULTS PANEL ===== */
    .trip-panel-overlay {
      position: fixed; inset: 0; z-index: 650;
      display: flex; align-items: center; justify-content: center;
      background: rgba(58,74,90,0.5);
      opacity: 0; pointer-events: none;
      transition: opacity 0.35s ease;
    }
    .trip-panel-overlay.visible { opacity: 1; pointer-events: auto; }
    .trip-panel {
      width: 680px; max-width: 94vw;
      max-height: 88vh;
      background: var(--paper-white);
      border-radius: 8px;
      box-shadow: 0 25px 70px rgba(58,74,90,0.3);
      overflow: hidden; display: flex; flex-direction: column;
    }
    .trip-panel-header {
      padding: 20px 26px; border-bottom: 2px solid var(--sunset-rust);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .trip-panel-header h2 {
      font-family: var(--font-display); font-size: 18px; font-weight: 700;
      color: var(--ink-blue); letter-spacing: 0.06em;
    }
    .trip-panel-summary {
      font-family: var(--font-accent); font-size: 13px; color: var(--light-ink);
    }
    .trip-panel-body {
      flex: 1; overflow-y: auto; padding: 20px 26px;
    }
    .trip-panel-body::-webkit-scrollbar { width: 4px; }
    .trip-panel-body::-webkit-scrollbar-thumb { background: var(--dusty-sky); border-radius: 2px; }

    /* Day-by-day timeline */
    .trip-timeline { position: relative; padding-left: 28px; }
    .trip-timeline::before {
      content: ''; position: absolute; left: 8px; top: 0; bottom: 0;
      width: 2px; background: linear-gradient(to bottom, var(--sunset-rust), var(--sea-glass));
    }
    .trip-stop {
      position: relative; margin-bottom: 24px;
      padding: 16px; background: rgba(232,221,201,0.15);
      border: 1px solid var(--border-subtle); border-radius: 6px;
    }
    .trip-stop::before {
      content: ''; position: absolute;
      left: -24px; top: 20px;
      width: 12px; height: 12px; border-radius: 50%;
      background: var(--sunset-rust); border: 2px solid var(--paper-white);
      box-shadow: 0 0 0 2px var(--sunset-rust);
    }
    .trip-stop-header {
      display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
    }
    .trip-stop-photo {
      width: 64px; height: 48px; border-radius: 4px;
      object-fit: cover; border: 1px solid var(--border-subtle);
      flex-shrink: 0;
    }
    .trip-stop-city {
      font-family: var(--font-display); font-size: 16px; font-weight: 700;
      color: var(--ink-blue);
    }
    .trip-stop-country {
      font-family: var(--font-body); font-size: 11px; color: var(--light-ink);
    }
    .trip-stop-days {
      font-family: var(--font-accent); font-size: 12px;
      color: var(--sunset-rust); font-weight: 600;
    }
    .trip-stop-narrative {
      font-family: var(--font-secondary); font-size: 13px;
      color: var(--ink-blue); line-height: 1.5; margin-top: 8px;
    }
    .trip-stop-tags {
      display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
    }
    .trip-stop-tag {
      font-size: 9px; padding: 2px 8px; border-radius: 10px;
      background: rgba(175,198,207,0.2); color: var(--ink-blue);
      font-family: var(--font-body); font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .trip-generating {
      text-align: center; padding: 40px;
      font-family: var(--font-accent); font-size: 16px;
      color: var(--light-ink);
    }
    .trip-generating-spinner {
      width: 32px; height: 32px; border: 3px solid var(--border-subtle);
      border-top-color: var(--sunset-rust); border-radius: 50%;
      animation: spin 0.8s linear infinite; margin: 0 auto 16px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    @media (max-width: 720px) {
      header { flex-direction: column; align-items: flex-start; padding: 10px 16px; }
      .header-actions { justify-content: flex-start; }
      .postcard { width: 96vw; height: 80vh; max-height: 88vh; }
      .postcard-back-body { flex-direction: column; }
      .postcard-back-left { border-right: none; border-bottom: 1px dashed var(--border-subtle); }
      .filter-grid { grid-template-columns: 1fr; }
      .bucket-drawer { width: 100%; }
    }

/* ===== RFC-005 TRAVEL INSPIRATION ===== */
.insp-overlay {
  position: fixed; inset: 0; z-index: 13000; display: none;
  flex-direction: column;
  background: linear-gradient(180deg, var(--paper-white), var(--postcard-cream));
}
.insp-overlay.visible { display: flex; }
.insp-topbar {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: 22px 32px 14px; border-bottom: 1px solid var(--border-subtle);
  background: rgba(246,241,230,0.92); backdrop-filter: blur(6px);
}
.insp-brand { flex: 0 0 auto; }
.insp-eyebrow {
  font-family: var(--font-body); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--faded-coral);
}
.insp-title { font-family: var(--font-display); font-size: 30px; color: var(--ink-blue); margin: 2px 0 0; line-height: 1; }
.insp-sub { font-family: var(--font-secondary); font-style: italic; font-size: 15px; color: var(--light-ink); margin: 4px 0 0; }
.insp-cats { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; }
.insp-cat-chip {
  font-family: var(--font-body); font-size: 11px; font-weight: 600; cursor: pointer;
  padding: 5px 12px; border-radius: 99px; border: 1px solid var(--border-subtle);
  background: none; color: var(--light-ink);
}
.insp-cat-chip:hover { background: var(--warm-sand); color: var(--ink-blue); }
.insp-close {
  flex: 0 0 auto; background: none; border: none; font-size: 30px; line-height: 1;
  color: var(--ink-blue); cursor: pointer; padding: 0 4px;
}
.insp-feed { flex: 1; overflow-y: auto; padding: 24px 32px 60px; }
.insp-loading { font-family: var(--font-secondary); font-style: italic; color: var(--light-ink); padding: 40px; text-align: center; }

/* hero */
.insp-hero {
  position: relative; border-radius: 18px; overflow: hidden; cursor: pointer;
  min-height: 360px; display: flex; align-items: flex-end; margin-bottom: 36px;
  box-shadow: 0 28px 78px rgba(44,54,64,.24); background: linear-gradient(135deg, var(--warm-sand), var(--dusty-sky));
}
/* 3-slide rotating banner */
.insp-banner { position: relative; min-height: 360px; margin-bottom: 36px; }
.insp-slide { position: absolute; inset: 0; margin-bottom: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.insp-slide.active { opacity: 1; pointer-events: auto; }
.insp-banner-dots { position: absolute; bottom: 16px; right: 22px; z-index: 6; display: flex; gap: 8px; }
.insp-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.insp-dot.on { background: #fff; transform: scale(1.3); }
.insp-dot:hover { background: rgba(255,255,255,.8); }
.insp-hero-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .6s; }
.insp-hero-img.loaded { opacity: 1; }
.insp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(44,54,64,.82), rgba(44,54,64,.12) 60%, rgba(44,54,64,.02)); }
.insp-hero-content { position: relative; z-index: 2; padding: 30px 34px; max-width: 640px; }
.insp-hero-title { font-family: var(--font-display); font-size: 34px; color: #fff; margin: 10px 0 6px; line-height: 1.08; }
.insp-hero-tag { font-family: var(--font-secondary); font-style: italic; font-size: 17px; color: rgba(255,255,255,.92); margin: 0 0 10px; }

/* category sections + rails */
.insp-section { margin-bottom: 30px; }
.insp-sec-head { margin-bottom: 12px; }
.insp-sec-eyebrow { font-family: var(--font-accent); font-size: 17px; color: var(--faded-coral); }
.insp-sec-title { font-family: var(--font-display); font-size: 22px; color: var(--ink-blue); margin: -2px 0 0; }
.insp-rail { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; }
.insp-rail::-webkit-scrollbar { height: 6px; }
.insp-rail::-webkit-scrollbar-thumb { background: var(--border-subtle); border-radius: 3px; }

/* experience card */
.insp-card {
  flex: 0 0 264px; width: 264px; scroll-snap-align: start; cursor: pointer;
  background: var(--paper-white); border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 34px rgba(58,74,90,.10); transition: transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.insp-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(58,74,90,.18); }
.insp-card-img {
  position: relative; height: 168px; background-size: cover; background-position: center;
  background-color: var(--warm-sand); background-image: linear-gradient(135deg, var(--dusty-sky), var(--sea-glass));
}
.insp-card-img.loaded { background-image: none; }
.insp-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.insp-card-title { font-family: var(--font-display); font-size: 15px; color: var(--ink-blue); line-height: 1.2; }
.insp-card-tag { font-family: var(--font-secondary); font-style: italic; font-size: 13px; color: var(--light-ink); }
.insp-card-why { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 4px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .25s, opacity .25s; }
.insp-card:hover .insp-card-why { max-height: 60px; opacity: 1; }

/* category stamp */
.exp-stamp {
  display: inline-block; position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--paper-white); background: var(--faded-coral);
  padding: 3px 8px; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.insp-hero .exp-stamp, .exp-hero .exp-stamp { position: relative; top: 0; left: 0; }
.exp-save-heart {
  position: absolute; top: 9px; right: 9px; z-index: 2; width: 28px; height: 28px;
  border-radius: 50%; border: none; cursor: pointer; font-size: 14px; line-height: 1;
  background: rgba(246,241,230,.9); color: var(--faded-coral);
}
.exp-save-heart.saved { background: var(--faded-coral); color: #fff; }
.exp-chip { display: inline-block; font-family: var(--font-body); font-size: 10px; font-weight: 600; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); padding: 3px 9px; border-radius: 99px; }

/* experience detail overlay */
.exp-overlay { position: fixed; inset: 0; z-index: 14000; display: none; align-items: center; justify-content: center; background: rgba(44,54,64,.55); padding: 24px; }
.exp-overlay.visible { display: flex; }
.exp-card:not(.insp-card):not(.insp-hero) { /* detail container guard */ }
.exp-overlay .exp-card {
  background: var(--paper-white); border-radius: 16px; overflow: hidden;
  width: min(560px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 36px 90px rgba(44,54,64,.36);
}
.exp-hero { position: relative; height: 240px; flex: 0 0 auto; background: linear-gradient(135deg, var(--warm-sand), var(--dusty-sky)); }
.exp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp-hero-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 22px; background: linear-gradient(to top, rgba(44,54,64,.85), rgba(44,54,64,.05)); }
.exp-title { font-family: var(--font-display); font-size: 24px; color: #fff; margin: 8px 0 4px; line-height: 1.12; }
.exp-tagline { font-family: var(--font-secondary); font-style: italic; font-size: 15px; color: rgba(255,255,255,.92); }
.exp-close { position: absolute; top: 10px; right: 12px; z-index: 3; background: rgba(246,241,230,.85); border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 20px; cursor: pointer; color: var(--ink-blue); }
.exp-actions { display: flex; gap: 8px; padding: 14px 22px 4px; }
.exp-action { flex: 1; padding: 10px; border-radius: 6px; cursor: pointer; font-family: var(--font-body); font-size: 12px; font-weight: 600; border: 1px solid var(--faded-coral); }
.exp-action-trip { background: var(--faded-coral); color: #fff; }
.exp-action-trip:hover { background: var(--sunset-rust); border-color: var(--sunset-rust); }
.exp-action-save { background: none; color: var(--faded-coral); }
.exp-action-save.saved { background: var(--faded-coral); color: #fff; }
.exp-body { overflow-y: auto; padding: 14px 22px 24px; }
.exp-section { margin-bottom: 16px; }
.exp-sec-title { font-family: var(--font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faded-coral); margin-bottom: 6px; }
.exp-why { font-family: var(--font-secondary); font-size: 15px; line-height: 1.55; color: var(--ink-blue); margin: 0; }
.exp-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.exp-meta { background: rgba(232,221,201,.35); border-radius: 6px; padding: 8px 10px; }
.exp-meta span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--light-ink); }
.exp-meta b { font-family: var(--font-secondary); font-size: 14px; color: var(--ink-blue); font-weight: 600; }
.exp-dots { color: var(--faded-coral); letter-spacing: 2px; }
.exp-dots-off { color: var(--border-subtle); }
.exp-where { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-where-chip { font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 99px; border: 1px solid var(--sea-glass); background: rgba(143,175,166,.14); color: var(--ink-blue); cursor: pointer; }
.exp-where-chip.country { cursor: default; border-color: var(--border-subtle); background: var(--warm-sand); color: var(--light-ink); }
.exp-notes { margin: 0; padding-left: 18px; }
.exp-notes li { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); line-height: 1.5; margin-bottom: 3px; }

/* postcard country rail */
.postcard-exp-section { padding-top: 8px; border-top: 1px dashed var(--border-subtle); margin-top: 10px; }
.postcard-exp-rail { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 8px; }
.postcard-exp-rail .insp-card { flex: 0 0 180px; width: 180px; }
.postcard-exp-rail .insp-card-img { height: 110px; }
.postcard-exp-rail .insp-card-title { font-size: 13px; }

/* experience location + clickable country chip (overrides) */
.exp-where-chip.country { cursor: pointer; border-color: var(--faded-coral); background: rgba(212,138,122,.10); color: var(--ink-blue); }
.exp-where-chip:hover { filter: brightness(0.97); }
.exp-where-ico { color: var(--sea-glass); margin-right: 3px; }
.insp-card-loc { font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faded-coral); margin-bottom: 1px; }

/* ===== RFC-004 TRIPS DASHBOARD + WORKSPACE ===== */
.city-card-overlay { z-index: 14500; } /* layer city drawer above inspiration/workspace */

.trips-overlay {
  position: fixed; inset: 0; z-index: 13000; display: none; flex-direction: column;
  background: linear-gradient(180deg, var(--paper-white), var(--postcard-cream));
}
.trips-overlay.visible { display: flex; }
.trips-new-btn {
  font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 99px; border: none; background: var(--faded-coral); color: #fff;
}
.trips-new-btn:hover { background: var(--sunset-rust); }
.trips-body { flex: 1; overflow-y: auto; padding: 28px 32px 60px; }
.trips-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.trip-card { background: var(--paper-white); border-radius: 14px; overflow: hidden; cursor: pointer; box-shadow: 0 10px 34px rgba(58,74,90,.10); transition: transform .2s, box-shadow .2s; }
.trip-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(58,74,90,.18); }
.trip-card-cover { height: 120px; background: linear-gradient(135deg, var(--dusty-sky), var(--sea-glass)); position: relative; }
.trip-card-status { position: absolute; top: 10px; left: 10px; font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(44,54,64,.55); padding: 3px 9px; border-radius: 3px; }
.trip-card-body { padding: 12px 14px 16px; }
.trip-card-title { font-family: var(--font-display); font-size: 17px; color: var(--ink-blue); }
.trip-card-meta { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 3px; }
.trips-empty { text-align: center; padding: 70px 20px; max-width: 460px; margin: 0 auto; }
.trips-empty-art { font-size: 40px; color: var(--faded-coral); }
.trips-empty h2 { font-family: var(--font-display); font-size: 24px; color: var(--ink-blue); margin: 10px 0 6px; }
.trips-empty p { font-family: var(--font-secondary); font-style: italic; font-size: 15px; color: var(--light-ink); margin-bottom: 18px; }

.tw-overlay { position: fixed; inset: 0; z-index: 13200; display: none; align-items: center; justify-content: center; background: rgba(44,54,64,.5); padding: 24px; }
.tw-overlay.visible { display: flex; }
.tw-panel { position: relative; background: var(--paper-white); border-radius: 16px; width: min(640px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 36px 90px rgba(44,54,64,.36); }
.tw-close { position: absolute; top: 12px; right: 14px; z-index: 3; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--ink-blue); }
.tw-header { padding: 20px 24px 12px; background: linear-gradient(135deg, var(--postcard-cream), var(--warm-sand)); }
.tw-status { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faded-coral); }
.tw-title { font-family: var(--font-display); font-size: 26px; color: var(--ink-blue); margin: 4px 0 4px; }
.tw-counts { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); }
.tw-tabs { display: flex; gap: 4px; padding: 8px 18px 0; border-bottom: 1px solid var(--border-subtle); }
.tw-tab { font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; background: none; border: none; padding: 10px 12px; color: var(--light-ink); border-bottom: 2px solid transparent; }
.tw-tab.active { color: var(--ink-blue); border-bottom-color: var(--faded-coral); }
.tw-content { padding: 18px 22px 24px; overflow-y: auto; }
.tw-empty, .tw-hint { font-family: var(--font-secondary); font-style: italic; font-size: 14px; color: var(--light-ink); padding: 16px 4px; }

.tw-readiness { background: rgba(232,221,201,.35); border-radius: 10px; padding: 16px; }
.tw-readiness-head { font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); text-transform: uppercase; letter-spacing: 0.06em; }
.tw-readiness-head b { float: right; color: var(--faded-coral); }
.tw-readiness-bar { height: 8px; border-radius: 4px; background: rgba(58,74,90,.12); overflow: hidden; margin: 8px 0; }
.tw-readiness-bar span { display: block; height: 100%; background: var(--sea-glass); }
.tw-readiness-sub { font-family: var(--font-secondary); font-style: italic; font-size: 13px; color: var(--light-ink); margin-bottom: 8px; }
.tw-signals { list-style: none; margin: 0; padding: 0; }
.tw-signals li { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); padding: 4px 0; }
.tw-signals li.done { color: var(--ink-blue); }
.tw-sig-mark { display: inline-block; width: 18px; color: var(--sea-glass); font-weight: 700; }

.tw-city-list, .tw-exp-list { display: flex; flex-direction: column; gap: 8px; }
.tw-city-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(175,198,207,.14); }
.tw-city-order { font-family: var(--font-display); font-size: 15px; color: var(--faded-coral); width: 18px; }
.tw-city-main { flex: 1; cursor: pointer; }
.tw-city-name { font-family: var(--font-display); font-size: 15px; color: var(--ink-blue); }
.tw-city-country { font-size: 11px; color: var(--light-ink); }
.tw-city-ctrls { display: flex; gap: 4px; }
.tw-mini { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-subtle); background: var(--paper-white); cursor: pointer; color: var(--ink-blue); font-size: 12px; }
.tw-mini:disabled { opacity: 0.3; cursor: default; }
.tw-mini.tw-remove { color: var(--stamp-burgundy); }
.tw-exp-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(232,221,201,.35); }
.tw-exp-main { flex: 1; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.tw-exp-title { font-family: var(--font-display); font-size: 14px; color: var(--ink-blue); }
.tw-exp-tag { font-family: var(--font-secondary); font-style: italic; font-size: 12px; color: var(--light-ink); }
.tw-notes { display: flex; flex-direction: column; gap: 12px; }
.tw-note-add { display: flex; flex-direction: column; gap: 8px; }
.tw-note-input { width: 100%; min-height: 64px; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px; font-family: var(--font-body); font-size: 13px; resize: vertical; box-sizing: border-box; }
.tw-note-btn { align-self: flex-end; padding: 8px 16px; border-radius: 99px; border: none; background: var(--faded-coral); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; }
.tw-note-list { display: flex; flex-direction: column; gap: 6px; }
.tw-note { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); background: rgba(143,175,166,.12); border-left: 3px solid var(--sea-glass); padding: 8px 10px; border-radius: 6px; white-space: pre-wrap; }

/* saved experiences/cities in the Bucket List drawer + experience source link */
.bucket-typed { padding: 0 14px 12px; }
.bucket-section-title { font-family: var(--font-display); font-size: 13px; color: var(--ink-blue); margin: 14px 0 6px; padding-top: 10px; border-top: 1px dashed var(--border-subtle); }
.bucket-typed-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: rgba(246,241,230,.7); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 9px 11px; margin-bottom: 6px; }
.bucket-typed-item:hover { background: var(--warm-sand); }
.bucket-typed-name { flex: 1; font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); font-weight: 600; }
.bucket-typed-cat { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--faded-coral); font-weight: 700; }
.bucket-typed-x { color: var(--stamp-burgundy); font-size: 12px; padding: 0 2px; }
/* Saved-place items show status + tags */
.bucket-typed-item.bucket-place { align-items: flex-start; }
.bucket-place-main { flex: 1; min-width: 0; }
.bucket-place-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bucket-place-status { font-size: 8.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 2px 7px; border-radius: 999px; flex: 0 0 auto; }
.bucket-place-status.st-want { background: rgba(175,198,207,.35); color: var(--ink-blue); }
.bucket-place-status.st-saved { background: var(--warm-sand); color: var(--ink-blue); }
.bucket-place-status.st-visited { background: rgba(143,157,130,.3); color: var(--sage-green); }
.bucket-place-status.st-favorite { background: rgba(212,138,122,.25); color: var(--stamp-burgundy); }
.bucket-place-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.bucket-place-tag { font-size: 9px; background: var(--warm-sand); color: var(--ink-blue); padding: 2px 7px; border-radius: 4px; }
.bucket-place-note { font-family: var(--font-secondary, var(--font-body)); font-style: italic; font-size: 11px; color: var(--light-ink); margin-top: 4px; }

/* ── Bucket-list folders ── */
.bucket-folder-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 4px; }
.bucket-folder-bar:empty { display: none; }
.bfchip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  color: var(--ink-blue); background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 999px;
  padding: 4px 10px; cursor: pointer; transition: background .15s, border-color .15s; }
.bfchip:hover { background: var(--warm-sand); }
.bfchip.active { background: var(--ink-blue); color: var(--paper-white); border-color: var(--ink-blue); }
.bfchip.active .bfcount { background: rgba(255,255,255,.25); color: var(--paper-white); }
.bfchip .bfcount { font-size: 9px; font-weight: 700; background: var(--warm-sand); color: var(--light-ink); border-radius: 999px; padding: 1px 6px; min-width: 14px; text-align: center; }
.bfchip .bfemoji { font-size: 12px; }
.bfchip .bflock { font-size: 9px; opacity: .8; }
.bfchip .bfedit { margin-left: 2px; opacity: .55; font-weight: 700; padding: 0 2px; }
.bfchip .bfedit:hover { opacity: 1; }
.bfchip.bfnew { color: var(--faded-coral); border-style: dashed; background: transparent; }
.bfchip.bfnew:hover { background: rgba(212,138,122,.12); }

.bucket-typed-main { flex: 1; min-width: 0; }
.bucket-folderbtn { font-size: 13px; padding: 0 4px; cursor: pointer; opacity: .55; transition: opacity .15s; }
.bucket-folderbtn:hover { opacity: 1; }
.bucket-folder-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.bucket-folder-tag { font-size: 9px; font-weight: 600; background: rgba(58,74,90,.08); color: var(--ink-blue); padding: 2px 7px; border-radius: 999px; }

.bucket-popover { z-index: 4000; width: 230px; max-height: 60vh; overflow-y: auto; background: var(--paper-white);
  border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: 0 10px 30px rgba(58,74,90,.22); padding: 10px; }
.bpop-title { font-family: var(--font-display); font-size: 12px; color: var(--ink-blue); margin-bottom: 7px; }
.bpop-empty { font-size: 11px; color: var(--light-ink); padding: 4px 2px 8px; }
.bpop-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-blue); padding: 5px 2px; cursor: pointer; }
/* Override the global `label > span { display:none }` (CSV-upload helper) so the
   folder-name and "Private" label text inside popover rows stays visible. */
.bpop-row > span { display: inline-block; color: var(--ink-blue); }
.bpop-row input { accent-color: var(--faded-coral); flex: 0 0 auto; }
.bpop-new { display: flex; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-subtle); }
.bpop-newinput { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 11px; color: var(--ink-blue); background: #fff;
  border: 1px solid var(--border-subtle); border-radius: 7px; padding: 5px 8px; }
.bpop-newbtn { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--paper-white); background: var(--faded-coral);
  border: none; border-radius: 7px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.bpop-newbtn:hover { background: var(--stamp-burgundy); }
.bpop-create { width: 100%; margin-top: 8px; padding: 7px; }
.bpop-actions { display: flex; gap: 6px; margin-top: 9px; }
.bpop-actions .bpop-save { flex: 1; }
.bpop-del { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--stamp-burgundy); background: transparent;
  border: 1px solid rgba(124,63,63,.3); border-radius: 7px; padding: 6px 10px; cursor: pointer; }
.bpop-del:hover { background: rgba(124,63,63,.08); }

/* Profile bucket-list place chips: colored status kicker + tags */
.tv-bl-k.st-want { color: var(--dusty-sky); }
.tv-bl-k.st-saved { color: var(--light-ink); }
.tv-bl-k.st-visited { color: var(--sage-green); }
.tv-bl-k.st-favorite { color: var(--stamp-burgundy); }
.tv-bl-tags { font-size: 9px; color: var(--light-ink); margin-left: 4px; opacity: .85; }
.exp-source { display: inline-block; margin: 2px 0 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--faded-coral); text-decoration: none; }
.exp-source:hover { text-decoration: underline; }
.country-modal-overlay { display: none; }  /* country redesign paused — not yet wired */

/* ===== Redesigned country detail modal ===== */
.country-modal-overlay { position:fixed; inset:0; z-index:13600; display:none; align-items:center; justify-content:center; background:rgba(44,54,64,.55); padding:20px; }
.country-modal-overlay.visible { display:flex; }
.country-modal { width:min(1180px,100%); max-height:92vh; border-radius:22px; overflow:hidden; background:var(--paper-white); border:1px solid var(--border-subtle); box-shadow:0 38px 100px rgba(44,54,64,.4); display:flex; flex-direction:column; }
.country-modal .modal-top { height:46px; flex:none; background:rgba(232,221,201,.45); border-bottom:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:space-between; padding:0 14px 0 20px; }
.country-modal .modal-dots { display:flex; gap:7px; }
.country-modal .cmdot { width:10px; height:10px; border-radius:50%; background:var(--faded-coral); opacity:.8; }
.country-modal .cmdot:nth-child(2){ background:var(--dusty-sky); } .country-modal .cmdot:nth-child(3){ background:var(--sea-glass); }
.country-modal .cm-close { width:32px; height:32px; border-radius:50%; background:var(--paper-white); border:1px solid var(--border-subtle); color:var(--ink-blue); font-size:18px; cursor:pointer; }
.country-modal .new-detail { display:grid; grid-template-columns:1.05fr .95fr; flex:1; min-height:0; }
.country-modal .new-hero { position:relative; padding:30px; display:flex; flex-direction:column; justify-content:flex-end; background-size:cover; background-position:center; background-color:#6e8089; background-image:linear-gradient(135deg,var(--dusty-sky),var(--sea-glass)); }
.country-modal .new-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(44,54,64,.9),rgba(44,54,64,.34),rgba(44,54,64,.06)); z-index:0; }
.country-modal .new-hero > * { position:relative; z-index:1; }
.country-modal .hero-nav { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:auto; }
.country-modal .cm-pill { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; border:1px solid rgba(246,241,230,.3); background:rgba(246,241,230,.14); color:rgba(251,248,241,.95); font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; backdrop-filter:blur(8px); }
.country-modal .cm-script { font-family:var(--font-accent); color:var(--warm-sand); font-size:26px; margin-bottom:2px; }
.country-modal .hero-copy h2 { font-family:var(--font-display); color:#fff; font-size:clamp(40px,5vw,64px); line-height:.95; margin:0 0 8px; }
.country-modal .hero-copy p { color:rgba(246,241,230,.86); font-size:14px; line-height:1.5; max-width:520px; margin:0; }
.country-modal .gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:16px 0 0; max-width:440px; }
.country-modal .gallery div { height:74px; border-radius:11px; background-size:cover; background-position:center; background-color:rgba(251,248,241,.2); border:1px solid rgba(251,248,241,.3); }
.country-modal .quick-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.country-modal .cm-btn { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:11px 16px; border:1px solid rgba(246,241,230,.36); background:rgba(246,241,230,.14); color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; backdrop-filter:blur(10px); cursor:pointer; }
.country-modal .cm-btn.primary { background:var(--sunset-rust); border-color:var(--sunset-rust); }
.country-modal .cm-btn.saved { background:var(--sea-glass); border-color:var(--sea-glass); }
.country-modal .side-panel { display:flex; flex-direction:column; min-height:0; padding:24px 24px 0; }
.country-modal .country-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px dashed var(--border-subtle); flex:none; }
.country-modal .country-title h2 { font-family:var(--font-display); font-size:36px; line-height:1; color:var(--ink-blue); margin:0; }
.country-modal .country-title p { margin:4px 0 0; font-family:var(--font-accent); font-size:20px; color:var(--light-ink); }
.country-modal .alert-chip { background:rgba(124,63,63,.08); color:var(--stamp-burgundy); border:1px solid rgba(124,63,63,.2); padding:7px 10px; border-radius:999px; font-size:9px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; white-space:nowrap; }
.country-modal .alert-chip.high { background:rgba(124,63,63,.14); }
.country-modal .cm-tabs { display:flex; gap:6px; padding:14px 0; border-bottom:1px solid var(--border-subtle); flex:none; overflow-x:auto; }
.country-modal .cm-tab { border:1px solid var(--border-subtle); padding:7px 12px; border-radius:999px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; color:var(--light-ink); background:none; cursor:pointer; white-space:nowrap; }
.country-modal .cm-tab.active { background:var(--ink-blue); color:var(--paper-white); border-color:var(--ink-blue); }
.country-modal .panel-scroll { overflow:auto; padding:20px 4px 24px 0; flex:1; min-height:0; }
.country-modal .why-go { border-left:4px solid var(--faded-coral); padding-left:16px; margin-bottom:20px; }
.country-modal .why-go h3 { font-family:var(--font-body); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--faded-coral); margin:0 0 6px; }
.country-modal .why-go p { font-family:var(--font-secondary); font-size:19px; line-height:1.34; color:var(--ink-blue); margin:0; }
.country-modal .cm-h3 { font-family:var(--font-display); font-size:20px; color:var(--ink-blue); margin:0 0 10px; }
.country-modal .stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:0 0 20px; }
.country-modal .score-card { border:1px solid var(--border-subtle); background:rgba(246,241,230,.72); border-radius:14px; padding:12px; }
.country-modal .score-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:7px; }
.country-modal .score-label { font-size:9px; text-transform:uppercase; letter-spacing:.1em; color:var(--light-ink); font-weight:800; }
.country-modal .score-value { font-family:var(--font-display); font-size:18px; color:var(--ink-blue); }
.country-modal .score-bar { height:6px; background:rgba(58,74,90,.09); border-radius:999px; overflow:hidden; }
.country-modal .score-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--sea-glass),var(--faded-coral)); width:var(--w); }
.country-modal .score-fill.warn { background:linear-gradient(90deg,var(--faded-coral),var(--stamp-burgundy)); }
.country-modal .insight-box { padding:13px; border-radius:13px; background:rgba(175,198,207,.14); border:1px solid rgba(175,198,207,.3); }
.country-modal .insight-box p { margin:0; font-size:13px; color:var(--light-ink); line-height:1.5; }
.country-modal .cm-place-list { display:grid; gap:11px; }
.country-modal .cm-place-card { display:grid; grid-template-columns:88px 1fr; gap:13px; align-items:center; padding:11px; border-radius:15px; background:rgba(246,241,230,.72); border:1px solid var(--border-subtle); }
.country-modal .cm-place-img { height:78px; border-radius:11px; background-size:cover; background-position:center; background-color:var(--warm-sand); background-image:linear-gradient(135deg,var(--dusty-sky),var(--sea-glass)); }
.country-modal .cm-place-card h4 { font-family:var(--font-display); font-size:18px; color:var(--ink-blue); margin:0; }
.country-modal .cm-place-card p { font-size:12px; margin:2px 0 0; color:var(--light-ink); }
.country-modal .cm-card-actions { display:flex; gap:7px; margin-top:7px; flex-wrap:wrap; }
.country-modal .cm-mini { border:1px solid var(--border-subtle); background:var(--paper-white); color:var(--ink-blue); border-radius:999px; padding:5px 10px; font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; cursor:pointer; }
.country-modal .cm-exp-list { display:flex; flex-wrap:wrap; gap:12px; }
.country-modal .cm-exp-list .insp-card { flex:0 0 calc(50% - 6px); width:auto; }
.country-modal .bottom-bar { margin-top:auto; padding:14px 0 18px; display:flex; gap:9px; border-top:1px solid var(--border-subtle); background:var(--paper-white); flex:none; }
.country-modal .bottom-bar .cm-btn { color:var(--ink-blue); border-color:var(--border-subtle); background:rgba(232,221,201,.35); }
.country-modal .bottom-bar .cm-btn.primary { color:#fff; background:var(--sunset-rust); border-color:var(--sunset-rust); }
@media (max-width:900px){ .country-modal .new-detail { grid-template-columns:1fr; } .country-modal .new-hero { min-height:320px; } }

/* ===== Postmarked loaders (from loading-animation brief) ===== */
.pm-loader { position:fixed; inset:0; z-index:17000; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(circle at 20% 20%,rgba(175,198,207,.25),transparent 28%),radial-gradient(circle at 82% 78%,rgba(212,138,122,.20),transparent 30%),linear-gradient(135deg,var(--postcard-cream),var(--warm-sand));
  transition:opacity .55s ease, visibility .55s; }
.pm-loader.pm-hide { opacity:0; visibility:hidden; pointer-events:none; }
.pm-mapgrid { position:absolute; inset:-20%; opacity:.22; transform:rotate(-8deg);
  background-image:linear-gradient(rgba(58,74,90,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(58,74,90,.10) 1px,transparent 1px); background-size:72px 72px; }
.pm-welcome { position:absolute; left:50%; bottom:8%; transform:translateX(-50%); text-align:center; width:min(780px,92%); z-index:20; }
.pm-welcome .pm-small { font-size:10px; text-transform:uppercase; letter-spacing:.22em; color:var(--sunset-rust); font-weight:800; margin-bottom:10px; }
.pm-welcome h3 { font-family:var(--font-display); color:var(--ink-blue); font-size:clamp(30px,4vw,52px); margin:0; }
.pm-welcome p { font-family:var(--font-secondary); font-size:22px; color:var(--light-ink); margin:8px auto 0; }
@keyframes pmOrbit { to { transform:rotate(360deg); } }
@keyframes pmFloat { 0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(-2deg) translateY(-10px)} }
@keyframes pmStampIn { 0%,45%{transform:rotate(-12deg) scale(1.4); opacity:0} 56%{transform:rotate(-12deg) scale(.9); opacity:.7} 72%,100%{transform:rotate(-12deg) scale(1); opacity:.55} }

/* Hybrid: globe + postcard + stamp */
.pm-hybrid { position:relative; width:520px; height:380px; transform:translateY(-30px); }
.pm-hyglobe { position:absolute; right:0; top:18px; width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle at 35% 28%,rgba(251,248,241,.9),rgba(175,198,207,.62) 35%,rgba(143,175,166,.55) 66%,rgba(58,74,90,.28)); box-shadow:inset -16px -18px 30px rgba(44,54,64,.12),0 22px 66px rgba(44,54,64,.16); }
.pm-hyorbit { position:absolute; inset:-26px; border-radius:50%; border:2px dashed rgba(201,110,75,.42); animation:pmOrbit 5s linear infinite; }
.pm-hyplane { position:absolute; right:80px; top:0; color:var(--sunset-rust); font-size:26px; animation:pmOrbit 5s linear infinite; transform-origin:25px 135px; }
.pm-hypostcard { position:absolute; left:0; bottom:0; width:330px; height:225px; border-radius:14px; background:var(--paper-white); border:1px solid var(--border-subtle); box-shadow:0 28px 80px rgba(58,74,90,.20); padding:16px; transform:rotate(-4deg); animation:pmFloat 3s ease-in-out infinite; }
.pm-hyimg { height:120px; border-radius:9px; background-size:cover; background-position:center; background-image:linear-gradient(135deg,var(--dusty-sky),var(--sea-glass)); }
.pm-line { height:9px; background:rgba(58,74,90,.10); border-radius:999px; margin-top:14px; }
.pm-line.short { width:60%; }
.pm-hystamp { position:absolute; right:20px; bottom:18px; width:78px; height:78px; border:3px solid var(--stamp-burgundy); border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; color:var(--stamp-burgundy); font-size:10px; transform:rotate(-12deg); opacity:.5; animation:pmStampIn 3s ease-in-out infinite; }

/* Inline loaders (compact) */
.pm-inline { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:48px 16px; text-align:center; }
.pm-inline-cap { font-family:var(--font-secondary); font-style:italic; font-size:16px; color:var(--light-ink); }

/* Dream Carousel */
.pm-carousel { position:relative; width:240px; height:170px; }
.pm-photo { position:absolute; inset:0; border-radius:18px; background-size:cover; background-position:center; box-shadow:0 24px 60px rgba(44,54,64,.22); opacity:0; animation:pmPhoto 8s infinite; }
.pm-photo::after { content:''; position:absolute; inset:0; border-radius:18px; background:linear-gradient(to top,rgba(44,54,64,.45),transparent); }
.pm-photo:nth-child(1){ background-image:url('https://images.unsplash.com/photo-1522383225653-ed111181a951?q=80&w=600&auto=format&fit=crop'); animation-delay:0s; }
.pm-photo:nth-child(2){ background-image:url('https://images.unsplash.com/photo-1483347756197-71ef80e95f73?q=80&w=600&auto=format&fit=crop'); animation-delay:2s; }
.pm-photo:nth-child(3){ background-image:url('https://images.unsplash.com/photo-1516426122078-c23e76319801?q=80&w=600&auto=format&fit=crop'); animation-delay:4s; }
.pm-photo:nth-child(4){ background-image:url('https://images.unsplash.com/photo-1483729558449-99ef09a8c325?q=80&w=600&auto=format&fit=crop'); animation-delay:6s; }
@keyframes pmPhoto { 0%{opacity:0; transform:scale(.92) rotate(-2deg)} 8%,23%{opacity:1; transform:scale(1) rotate(1deg)} 31%,100%{opacity:0; transform:scale(1.04) rotate(2deg)} }

/* Route Drawing */
.pm-route { position:relative; width:300px; height:150px; border-radius:18px; background:rgba(251,248,241,.7); border:1px solid var(--border-subtle); overflow:hidden; }
.pm-route::before { content:''; position:absolute; inset:-20%; background-image:linear-gradient(rgba(58,74,90,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(58,74,90,.09) 1px,transparent 1px); background-size:42px 42px; transform:rotate(-9deg); }
.pm-routeline { position:absolute; left:40px; top:78px; width:220px; height:80px; border-top:3px dashed var(--sunset-rust); border-radius:50%; transform:rotate(-16deg); }
.pm-citydot { position:absolute; width:14px; height:14px; border-radius:50%; background:var(--stamp-burgundy); box-shadow:0 0 0 6px rgba(124,63,63,.12); z-index:2; }
.pm-citydot.a { left:36px; top:96px; } .pm-citydot.b { right:40px; top:48px; }
.pm-routeplane { position:absolute; left:42px; top:84px; font-size:22px; color:var(--sunset-rust); z-index:3; animation:pmFly 2.6s ease-in-out infinite; }
@keyframes pmFly { 0%{transform:translate(0,0) rotate(-22deg); opacity:0} 18%{opacity:1} 72%{opacity:1} 100%{transform:translate(214px,-58px) rotate(20deg); opacity:0} }

/* Passport Stamp */
.pm-passport { position:relative; width:230px; height:175px; perspective:800px; }
.pm-pbook { position:absolute; inset:0; border-radius:14px; background:linear-gradient(135deg,#334556,#22303d); box-shadow:0 26px 70px rgba(44,54,64,.3); transform:rotateZ(-2deg); overflow:hidden; }
.pm-ppage { position:absolute; inset:18px; border-radius:9px; background:var(--paper-white); padding:16px; transform-origin:left; animation:pmFlutter 3s ease-in-out infinite; }
@keyframes pmFlutter { 0%,100%{transform:rotateY(0)} 50%{transform:rotateY(-8deg)} }
.pm-bigstamp { position:absolute; left:50%; top:50%; width:110px; height:110px; border:4px solid var(--stamp-burgundy); border-radius:50%; transform:translate(-50%,-50%) rotate(-12deg); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-display); font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--stamp-burgundy); opacity:0; animation:pmStampIn 3s ease-in-out infinite; }

/* Inspiration filter bar */
.insp-filterbar { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:10px 32px; border-bottom:1px solid var(--border-subtle); background:rgba(246,241,230,.6); }
.insp-fgroup { display:flex; align-items:center; gap:6px; }
.insp-flabel { font-family:var(--font-body); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--light-ink); font-weight:700; }
.insp-fchip { font-family:var(--font-body); font-size:11px; font-weight:600; cursor:pointer; padding:5px 11px; border-radius:99px; border:1px solid var(--border-subtle); background:none; color:var(--light-ink); }
.insp-fchip.active { background:var(--faded-coral); color:#fff; border-color:var(--faded-coral); }
.insp-fselect { font-family:var(--font-body); font-size:12px; color:var(--ink-blue); padding:5px 8px; border-radius:8px; border:1px solid var(--border-subtle); background:var(--paper-white); }
.insp-fclear { font-family:var(--font-body); font-size:11px; font-weight:600; cursor:pointer; padding:5px 11px; border-radius:99px; border:1px solid var(--border-subtle); background:none; color:var(--faded-coral); }

/* postcard image on the Hybrid loader */
.pm-hyimg { background-image:linear-gradient(135deg,rgba(44,54,64,.10),rgba(44,54,64,.03)),url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=900&auto=format&fit=crop'); }
.pm-account-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; margin-right:6px; vertical-align:middle; }
.po-row { display:flex; gap:10px; }
.po-row .po-input { flex:1; }
.po-avatar-wrap { display:flex; align-items:center; gap:12px; margin:6px 0 12px; }
.po-avatar-preview { width:60px; height:60px; border-radius:50%; object-fit:cover; background:var(--warm-sand); border:1px solid var(--border-subtle); display:flex; align-items:center; justify-content:center; color:var(--light-ink); font-size:22px; }
.po-avatar-btn { font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--faded-coral); background:none; border:1px solid var(--border-subtle); border-radius:99px; padding:7px 12px; cursor:pointer; }
.po-select { width:100%; padding:11px 12px; border:1px solid var(--border-subtle); border-radius:8px; font-family:var(--font-body); font-size:14px; color:var(--ink-blue); background:var(--paper-white); margin-bottom:10px; }

/* ── RFC-006 Workspace 2.0 — Phase 1: image-led cards, cover header, Edit Trip drawer ── */
.trip-card-cover { background-size: cover; background-position: center; }
.trip-card-cover-empty { display: flex; align-items: center; justify-content: center; }
.trip-card-addcover { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: rgba(255,255,255,.92); background: rgba(44,54,64,.28); padding: 6px 12px; border-radius: 20px; backdrop-filter: blur(2px); }
.trip-card-bar { height: 5px; background: var(--warm-sand); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.trip-card-bar span { display: block; height: 100%; background: var(--sea-glass); border-radius: 99px; }

/* Workspace header with optional cover hero */
.tw-header { padding: 0; }
.tw-header-inner { padding: 22px 24px 16px; position: relative; background: linear-gradient(135deg, var(--postcard-cream), var(--warm-sand)); }
.tw-header-cover .tw-header-inner { background-size: cover; background-position: center; min-height: 188px; display: flex; flex-direction: column; justify-content: flex-end; }
.tw-header-cover .tw-title, .tw-header-cover .tw-counts, .tw-header-cover .tw-desc, .tw-header-cover .tw-status { color: #fff; text-shadow: 0 1px 8px rgba(20,28,38,.45); }
.tw-desc { font-family: var(--font-secondary); font-style: italic; font-size: 15px; color: var(--ink-blue); margin: 2px 0 6px; max-width: 640px; }
.tw-edit-btn { position: absolute; top: 16px; right: 16px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-blue); background: rgba(255,255,255,.86); border: 1px solid var(--border-subtle); border-radius: 20px; padding: 6px 14px; cursor: pointer; }
.tw-edit-btn:hover { background: #fff; }

/* Edit Trip drawer (slides in from the right) */
.tw-drawer-overlay { display: none; position: fixed; inset: 0; z-index: 16001; background: rgba(58,74,90,.45); justify-content: flex-end; }
.tw-drawer-overlay.visible { display: flex; }
.tw-drawer { width: 100%; max-width: 440px; height: 100%; background: var(--postcard-cream); display: flex; flex-direction: column; box-shadow: -16px 0 50px rgba(58,74,90,.3); animation: twDrawerIn .22s ease; }
@keyframes twDrawerIn { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.tw-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--warm-sand); }
.tw-drawer-head h3 { font-family: var(--font-display); font-size: 22px; color: var(--ink-blue); margin: 0; }
.tw-drawer-close { background: none; border: none; font-size: 24px; color: var(--light-ink); cursor: pointer; line-height: 1; }
.tw-drawer-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.tw-fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 15px; }
.tw-fld > span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--light-ink); }
.tw-fld-row { display: flex; gap: 12px; }
.tw-fld-row .tw-fld { flex: 1; }
.tw-check { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); margin-bottom: 15px; cursor: pointer; }
.ed-cover { height: 130px; border-radius: 12px; background: var(--warm-sand); background-size: cover; background-position: center; border: 1px dashed var(--border-subtle); margin-bottom: 10px; }
.ed-cover.has { border-style: solid; }
.ed-cover-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.ed-pick { height: 56px; border-radius: 9px; background: var(--warm-sand); background-size: cover; background-position: center; border: 2px solid transparent; cursor: pointer; }
.ed-pick.selected { border-color: var(--sunset-rust); }
.ed-cover-actions { display: flex; gap: 8px; }
.ed-count { font-size: 10px; color: var(--light-ink); text-align: right; }
.tw-drawer-foot { padding: 16px 22px; border-top: 1px solid var(--warm-sand); }
.tw-save-btn { width: 100%; background: var(--sunset-rust); color: #fff; border: none; border-radius: 7px; padding: 12px; font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; }
.tw-save-btn:hover { background: var(--stamp-burgundy); }
.ed-status { text-align: center; font-size: 12px; color: var(--sea-glass); min-height: 16px; margin-top: 8px; }
.ed-danger { display: flex; justify-content: space-between; margin-top: 6px; }
.ed-link { background: none; border: none; font-family: var(--font-body); font-size: 12px; color: var(--light-ink); cursor: pointer; text-decoration: underline; }
.ed-link.ed-del { color: var(--stamp-burgundy); }

/* Toast (archive undo, deletes) */
.pm-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); z-index: 17000; background: var(--ink-blue); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 16px 40px rgba(58,74,90,.35); display: flex; align-items: center; gap: 14px; font-family: var(--font-body); font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.pm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.pm-toast-action { background: none; border: none; color: var(--faded-coral); font-weight: 700; font-size: 13px; cursor: pointer; }

/* ── RFC-006 Phase 2: weighted readiness overview ── */
.tw-cat-list { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.tw-cat { background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 14px 16px; }
.tw-cat-top { display: flex; justify-content: space-between; align-items: baseline; }
.tw-cat-label { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-blue); }
.tw-cat-label em { font-style: normal; font-weight: 400; color: var(--light-ink); font-size: 11px; }
.tw-cat-pct { font-family: var(--font-display); font-size: 15px; color: var(--sea-glass); }
.tw-cat-bar { height: 6px; background: var(--warm-sand); border-radius: 99px; overflow: hidden; margin: 8px 0 6px; }
.tw-cat-bar span { display: block; height: 100%; background: var(--sea-glass); border-radius: 99px; transition: width .3s; }
.tw-cat-gaps { margin: 6px 0 0; padding-left: 0; list-style: none; }
.tw-cat-gaps li { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); padding: 2px 0 2px 18px; position: relative; }
.tw-cat-gaps li:before { content: "○"; position: absolute; left: 2px; color: var(--faded-coral); }
.tw-cat-clear { font-family: var(--font-body); font-size: 12px; color: var(--sea-glass); font-weight: 600; }
.tw-nba-title { font-family: var(--font-display); font-size: 18px; color: var(--ink-blue); margin: 22px 0 10px; }
.tw-nba { display: flex; flex-direction: column; gap: 10px; }
.tw-nba-row { display: flex; align-items: center; gap: 14px; background: var(--postcard-cream); border: 1px solid var(--warm-sand); border-radius: 12px; padding: 14px 16px; }
.tw-nba-num { font-family: var(--font-display); font-size: 20px; color: var(--sunset-rust); flex: 0 0 auto; }
.tw-nba-label { flex: 1; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.tw-nba-go { background: var(--sunset-rust); color: #fff; border: none; border-radius: 20px; padding: 7px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.tw-nba-go:hover { background: var(--stamp-burgundy); }

/* ── RFC-006 Phase 3: destinations depth ── */
.tw-dest-head { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-bottom: 12px; }
.tw-city-list { display: flex; flex-direction: column; gap: 14px; }
.tw-city-card { background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px 16px; }
.tw-city-hd { display: flex; align-items: center; gap: 12px; }
.tw-city-id { flex: 1; cursor: pointer; }
.tw-city-id:hover .tw-city-name { color: var(--sunset-rust); }
.tw-city-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 12px 0 10px; }
.tw-city-nlabel { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); display: inline-flex; align-items: center; gap: 6px; }
.tw-city-nights { width: 56px; padding: 5px 7px; border: 1px solid var(--border-subtle); border-radius: 6px; font-family: var(--font-body); font-size: 13px; }
.tw-city-dates { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); display: inline-flex; align-items: center; gap: 6px; }
.tw-city-start, .tw-city-end { padding: 5px 7px; border: 1px solid var(--border-subtle); border-radius: 6px; font-family: var(--font-body); font-size: 12px; }
.tw-city-note { width: 100%; min-height: 46px; resize: vertical; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); background: var(--postcard-cream); }
.tw-city-why { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.tw-why-btn { flex: 0 0 auto; background: none; border: 1px solid var(--sea-glass); color: var(--teal-dark, var(--sea-glass)); border-radius: 18px; padding: 5px 12px; font-family: var(--font-body); font-size: 12px; cursor: pointer; }
.tw-why-btn:hover { background: var(--sea-glass); color: #fff; }
.tw-why-btn:disabled { opacity: .6; cursor: default; }
.tw-city-reason { font-family: var(--font-secondary); font-style: italic; font-size: 14px; color: var(--ink-blue); line-height: 1.4; }
.tw-city-reason.empty { display: none; }

/* ── RFC-006 Phase 4: saved board ── */
.tw-saved-add { display: flex; gap: 8px; margin-bottom: 16px; }
.tw-saved-type { padding: 9px 8px; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-body); font-size: 12px; background: var(--paper-white); color: var(--ink-blue); }
.tw-saved-input { flex: 1; padding: 9px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-body); font-size: 13px; }
.tw-saved-addbtn { background: var(--ink-blue); color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; }
.tw-saved-addbtn:hover { background: var(--sunset-rust); }
.tw-saved-sec { font-family: var(--font-body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--light-ink); margin: 18px 0 8px; }
.tw-saved-list { display: flex; flex-direction: column; gap: 10px; }
.tw-saved-card { display: flex; align-items: center; gap: 12px; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; border-left: 4px solid var(--warm-sand); }
.tw-saved-main { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; cursor: default; }
.tw-saved-main[data-open-exp] { cursor: pointer; }
.tw-saved-title { font-family: var(--font-display); font-size: 16px; color: var(--ink-blue); }
.tw-saved-title a { color: var(--ink-blue); text-decoration: none; border-bottom: 1px solid var(--sea-glass); }
.tw-saved-title a:hover { color: var(--sunset-rust); }
.tw-saved-sub { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 2px; }
.tw-saved-type-chip { font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-blue); background: var(--warm-sand); padding: 4px 8px; border-radius: 4px; flex: 0 0 auto; }
.tw-saved-ctrls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tw-status-sel { padding: 6px 8px; border: 1px solid var(--border-subtle); border-radius: 7px; font-family: var(--font-body); font-size: 11px; background: var(--postcard-cream); color: var(--ink-blue); cursor: pointer; }
.tw-saved-card.tw-status-mustdo { border-left-color: var(--sunset-rust); }
.tw-saved-card.tw-status-booked { border-left-color: var(--sea-glass); }
.tw-saved-card.tw-status-maybe { border-left-color: var(--dusty-sky); }
.tw-saved-card.tw-status-research { border-left-color: var(--faded-coral); }
.tw-saved-card.tw-status-skip { opacity: .55; border-left-color: var(--border-subtle); }

/* ── RFC-006 Phase 5: notes CRUD + tasks ── */
.tw-note-add { margin-bottom: 16px; }
.tw-note-add-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.tw-note-task-toggle { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12px; color: var(--light-ink); cursor: pointer; }
.tw-note-list { display: flex; flex-direction: column; gap: 10px; }
.tw-note { display: flex; align-items: flex-start; gap: 12px; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 13px 14px; }
.tw-note.pinned { border-color: var(--faded-coral); background: #fff8f4; }
.tw-note-lead { flex: 0 0 auto; padding-top: 1px; }
.tw-note-pin { color: var(--faded-coral); font-size: 14px; }
.tw-note-dot { color: var(--warm-sand); font-size: 18px; line-height: 1; }
.tw-note-check { background: none; border: none; font-size: 17px; cursor: pointer; color: var(--sea-glass); padding: 0; line-height: 1; }
.tw-note-main { flex: 1; min-width: 0; }
.tw-note-body { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.tw-note.complete .tw-note-body { text-decoration: line-through; color: var(--light-ink); }
.tw-note-meta { font-family: var(--font-body); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--light-ink); margin-top: 5px; }
.tw-note-actions { display: flex; gap: 4px; flex: 0 0 auto; }
.tw-note-act { background: none; border: none; font-size: 13px; cursor: pointer; color: var(--light-ink); padding: 3px 5px; border-radius: 6px; line-height: 1; }
.tw-note-act:hover { background: var(--warm-sand); }
.tw-note-act.on { color: var(--sunset-rust); }
.tw-note-del.armed { background: var(--stamp-burgundy); color: #fff; font-size: 11px; font-weight: 700; }
.tw-note-edit { width: 100%; min-height: 54px; resize: vertical; padding: 8px 10px; border: 1px solid var(--sea-glass); border-radius: 8px; font-family: var(--font-body); font-size: 13px; }
.tw-note-edit-row { display: flex; gap: 8px; margin-top: 6px; }
.tw-note-save { background: var(--sunset-rust); color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.tw-note-cancel { background: none; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 5px 12px; font-size: 12px; cursor: pointer; color: var(--light-ink); }

/* ── RFC-006 Phase 6: new tabs (itinerary, budget, docs, ai) ── */
.tw-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
.tw-tabs::-webkit-scrollbar { height: 4px; }
.tw-tab { white-space: nowrap; }
/* Itinerary */
.tw-itin { display: flex; flex-direction: column; gap: 10px; }
.tw-itin-day { background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; }
.tw-itin-dayhd { display: flex; align-items: baseline; justify-content: space-between; }
.tw-itin-daynum { font-family: var(--font-display); font-size: 15px; color: var(--ink-blue); }
.tw-itin-city { font-family: var(--font-body); font-size: 12px; color: var(--sunset-rust); font-weight: 600; }
.tw-itin-items { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tw-itin-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--postcard-cream); border-radius: 8px; padding: 7px 10px; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.tw-itin-empty { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 6px; font-style: italic; }
.tw-itin-move { padding: 4px 6px; border: 1px solid var(--border-subtle); border-radius: 6px; font-size: 11px; background: var(--paper-white); color: var(--ink-blue); }
.tw-itin-pool { margin-top: 16px; }
/* Budget */
.tw-budget-target { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); margin-bottom: 14px; }
.tw-budget-hint { color: var(--light-ink); font-size: 11px; }
.tw-budget-rows { display: flex; flex-direction: column; gap: 8px; }
.tw-budget-row { display: flex; align-items: center; justify-content: space-between; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 14px; }
.tw-budget-row > span:first-child { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.tw-budget-in { font-family: var(--font-body); color: var(--light-ink); }
.tw-budget-input { width: 110px; padding: 6px 8px; border: 1px solid var(--border-subtle); border-radius: 6px; font-family: var(--font-body); font-size: 13px; text-align: right; }
.tw-budget-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border-subtle); font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); }
.tw-budget-total b { font-family: var(--font-display); font-size: 22px; color: var(--sunset-rust); }
/* Docs */
.tw-docs-note { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-bottom: 14px; }
/* AI */
.tw-ai { display: flex; flex-direction: column; gap: 14px; }
.tw-ai-card { background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px 20px; }
.tw-ai-card h3 { font-family: var(--font-display); font-size: 18px; color: var(--ink-blue); margin: 0 0 4px; }
.tw-ai-card p { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin: 0 0 12px; }
.tw-ai-btn { background: var(--sea-glass); color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-family: var(--font-body); font-size: 13px; cursor: pointer; }
.tw-ai-btn:hover { background: var(--teal-dark, var(--sea-glass)); }
.tw-ai-btn:disabled { opacity: .6; cursor: default; }
.tw-ai-out { margin-top: 12px; }
.tw-ai-text { font-family: var(--font-secondary); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--ink-blue); margin: 0 0 10px; }
.tw-ai-save { background: var(--sunset-rust); color: #fff; border: none; border-radius: 7px; padding: 7px 14px; font-family: var(--font-body); font-size: 12px; cursor: pointer; }

/* ── RFC-006 Phase 7: activity log ── */
.tw-activity { display: flex; flex-direction: column; gap: 4px; }
.tw-act-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 2px; border-bottom: 1px dotted var(--border-subtle); }
.tw-act-row:last-child { border-bottom: none; }
.tw-act-dot { color: var(--sea-glass); }
.tw-act-sum { flex: 1; font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); }
.tw-act-time { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); flex: 0 0 auto; }

/* ── RFC-006 fix: bigger, wrapping, persistent workspace tab bar ──
   (overrides the earlier horizontal-scroll strip that hid the later tabs) */
.tw-panel { width: min(780px, 96vw); }
.tw-content { flex: 1 1 auto; min-height: 0; }
.tw-tabs {
  flex-wrap: wrap;
  overflow: visible;
  gap: 2px 6px;
  padding: 10px 16px 0;
  background: var(--paper-white);
  position: sticky;
  top: 0;
  z-index: 2;
}
.tw-tab {
  font-size: 13px;
  padding: 11px 15px;
  border-radius: 8px 8px 0 0;
}
.tw-tab:hover { color: var(--ink-blue); background: var(--postcard-cream); }
.tw-tab.active { border-bottom-width: 3px; }

/* ── RFC-006: add-city search in the Destinations tab ── */
.tw-citysearch { position: relative; margin-bottom: 14px; }
.tw-citysearch-input { width: 100%; padding: 11px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; font-family: var(--font-body); font-size: 14px; background: var(--paper-white); color: var(--ink-blue); }
.tw-citysearch-input:focus { outline: none; border-color: var(--sea-glass); }
.tw-citysearch-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 10px; box-shadow: 0 14px 40px rgba(58,74,90,.18); z-index: 6; max-height: 290px; overflow-y: auto; display: none; }
.tw-citysearch-results.open { display: block; }
.tw-citysearch-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border-subtle); }
.tw-citysearch-item:last-child { border-bottom: none; }
.tw-citysearch-item:hover { background: var(--postcard-cream); }
.tw-citysearch-item > span:first-child { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.tw-citysearch-item em { font-style: normal; color: var(--light-ink); margin-left: 8px; font-size: 12px; }
.tw-citysearch-item.added { opacity: .6; cursor: default; }
.tw-cs-plus { color: var(--sunset-rust); font-size: 18px; font-weight: 700; line-height: 1; }
.tw-cs-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--sea-glass); }
.tw-citysearch-empty { padding: 12px 14px; font-family: var(--font-body); font-size: 13px; color: var(--light-ink); }

/* ── RFC-006: Explore tab (discover experiences) + itinerary hint ── */
.tw-explore-recs { margin-top: 6px; }
.tw-exp-disc { display: flex; align-items: center; gap: 12px; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.tw-exp-disc-img { width: 78px; height: 60px; border-radius: 8px; background: var(--warm-sand); background-size: cover; background-position: center; flex: 0 0 auto; cursor: pointer; }
.tw-exp-disc-body { flex: 1; min-width: 0; cursor: pointer; }
.tw-exp-disc-cat { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--faded-coral); font-weight: 700; }
.tw-exp-disc-title { font-family: var(--font-display); font-size: 16px; color: var(--ink-blue); }
.tw-exp-disc-tag { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-exp-add { flex: 0 0 auto; background: var(--sunset-rust); color: #fff; border: none; border-radius: 18px; padding: 7px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; }
.tw-exp-add:hover { background: var(--stamp-burgundy); }
.tw-exp-add.added { background: var(--sea-glass); cursor: default; }
.tw-itin-hint { background: var(--postcard-cream); border: 1px solid var(--warm-sand); border-radius: 10px; padding: 10px 14px; font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-bottom: 14px; }
.tw-itin-hint b { color: var(--ink-blue); }

/* ── RFC-006: Budget tracker (per-person target, line items, paid status) ── */
.tw-bgt-target { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.tw-bgt-fld { display: flex; flex-direction: column; gap: 5px; }
.tw-bgt-fld > span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--light-ink); }
.tw-bgt-fld input { width: 120px; padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-body); font-size: 14px; }
.tw-bgt-money { display: inline-flex; align-items: center; gap: 2px; color: var(--light-ink); }
.tw-bgt-money input { width: 100px; }
.tw-bgt-totalcalc { margin-left: auto; text-align: right; }
.tw-bgt-totalcalc span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--light-ink); }
.tw-bgt-totalcalc b { font-family: var(--font-display); font-size: 24px; color: var(--ink-blue); }
.tw-bgt-summary { background: var(--postcard-cream); border: 1px solid var(--warm-sand); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.tw-bgt-bar { height: 8px; background: var(--warm-sand); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.tw-bgt-bar span { display: block; height: 100%; background: var(--sea-glass); border-radius: 99px; transition: width .3s; }
.tw-bgt-bar span.over { background: var(--stamp-burgundy); }
.tw-bgt-stats { display: flex; gap: 18px; }
.tw-bgt-stat { flex: 1; }
.tw-bgt-stat span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--light-ink); }
.tw-bgt-stat b { font-family: var(--font-display); font-size: 20px; color: var(--ink-blue); }
.tw-bgt-stat.over b { color: var(--stamp-burgundy); }
.tw-bgt-stat.under b { color: var(--sea-glass); }
.tw-bgt-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.tw-bgt-add .tw-saved-input { flex: 1; min-width: 140px; }
.tw-bgt-amt { display: inline-flex; align-items: center; gap: 2px; color: var(--light-ink); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0 8px; background: var(--paper-white); }
.tw-bgt-amt input { width: 80px; padding: 9px 4px; border: none; font-family: var(--font-body); font-size: 13px; background: transparent; }
.tw-bgt-pp { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 12px; color: var(--light-ink); white-space: nowrap; }
.tw-bgt-list { display: flex; flex-direction: column; gap: 8px; }
.tw-bgt-item { display: flex; align-items: center; gap: 12px; background: var(--paper-white); border: 1px solid var(--border-subtle); border-left: 4px solid var(--warm-sand); border-radius: 10px; padding: 10px 12px; }
.tw-bgt-item.tw-status-booked { border-left-color: var(--dusty-sky); }
.tw-bgt-item.tw-status-paid { border-left-color: var(--sea-glass); }
.tw-bgt-item-main { flex: 1; min-width: 0; }
.tw-bgt-item-label { font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); font-weight: 600; }
.tw-bgt-item-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.tw-bgt-pp-badge { font-size: 11px; color: var(--light-ink); }
.tw-bgt-item-amt { display: inline-flex; align-items: center; gap: 2px; color: var(--light-ink); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0 6px; background: var(--postcard-cream); flex: 0 0 auto; }
.tw-bgt-item-amt input { width: 74px; padding: 7px 2px; border: none; background: transparent; font-family: var(--font-body); font-size: 13px; text-align: right; }
.tw-bgt-status { padding: 6px 8px; border: 1px solid var(--border-subtle); border-radius: 7px; font-family: var(--font-body); font-size: 11px; background: var(--postcard-cream); color: var(--ink-blue); cursor: pointer; flex: 0 0 auto; }

/* ── RFC-006: Export PDF — header buttons, drawer, print stylesheet ── */
.tw-header-actions { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; }
.tw-header-actions .tw-edit-btn { position: static; top: auto; right: auto; }
.xp-intro { font-size: 12px; color: var(--light-ink); margin: 0 0 14px; line-height: 1.5; }
.xp-toggle { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); padding: 9px 0; border-bottom: 1px solid var(--warm-sand); cursor: pointer; }
.xp-toggle em { margin-left: auto; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--faded-coral); }
.xp-friend { margin-top: 10px; border-bottom: none; }
.xp-friend em { color: var(--light-ink); text-transform: none; letter-spacing: 0; margin-left: 6px; }
.xp-missing { margin-top: 14px; font-size: 12px; color: var(--light-ink); background: var(--postcard-cream); border: 1px solid var(--warm-sand); border-radius: 8px; padding: 10px 12px; }
.xp-missing:empty { display: none; }
.xp-missing ul { margin: 6px 0 0; padding-left: 18px; }

/* Print document (hidden on screen, shown only when printing) */
#pmPrintRoot { display: none; }
.pm-print-section { background: var(--paper-white); color: var(--ink-blue); break-before: page; position: relative; }
.pm-print-section:first-child { break-before: avoid; }
.pm-kicker { font-family: var(--font-body); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faded-coral); font-weight: 700; }
.pm-cover { padding: 0; min-height: 297mm; }
.pm-cover-img { display: block; width: 100%; height: 150mm; object-fit: cover; }
.pm-cover-grad { background: linear-gradient(135deg, var(--dusty-sky), var(--sea-glass)); }
.pm-cover-pad { padding: 16mm; }
.pm-cover-title { font-family: var(--font-display); font-size: 52px; line-height: .95; margin: 8px 0 10px; color: var(--ink-blue); }
.pm-cover-sub { font-family: var(--font-secondary); font-style: italic; font-size: 20px; color: var(--light-ink); max-width: 160mm; }
.pm-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14mm; }
.pm-meta-box { border-top: 2px solid var(--faded-coral); padding-top: 8px; }
.pm-meta-box b { display: block; font-family: var(--font-display); font-size: 24px; }
.pm-meta-box span { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--light-ink); }
.pm-cover-dates { margin-top: 10mm; font-family: var(--font-body); color: var(--light-ink); }
.pm-stamp { position: absolute; right: 18mm; bottom: 28mm; width: 34mm; height: 34mm; border: 3px solid var(--stamp-burgundy); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-display); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--stamp-burgundy); opacity: .4; transform: rotate(-12deg); font-size: 13px; line-height: 1.1; }
.pm-foot { position: absolute; bottom: 10mm; left: 16mm; right: 16mm; border-top: 1px solid var(--border-subtle); padding-top: 6px; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--light-ink); display: flex; justify-content: space-between; }
.pm-pad { padding: 16mm; }
.pm-h2 { font-family: var(--font-display); font-size: 40px; margin: 6px 0 14px; color: var(--ink-blue); }
.pm-route { font-family: var(--font-display); font-size: 22px; color: var(--ink-blue); margin-bottom: 14px; }
.pm-arrow { color: var(--faded-coral); }
.pm-toc-row { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); break-inside: avoid; }
.pm-toc-num { font-family: var(--font-display); font-size: 26px; color: var(--faded-coral); }
.pm-toc-main h4 { font-family: var(--font-display); font-size: 20px; margin: 0; }
.pm-toc-country { color: var(--light-ink); font-size: 14px; font-weight: 400; }
.pm-toc-main p { margin: 3px 0 0; color: var(--light-ink); font-size: 13px; }
.pm-handnote { margin-top: 12px; border-radius: 12px; background: var(--postcard-cream); border: 1px solid var(--warm-sand); padding: 14px 16px; font-family: var(--font-accent); font-size: 18px; color: var(--faded-coral); line-height: 1.3; break-inside: avoid; }
.pm-handnote-lg { margin-top: 18px; }
.pm-handnote-h { font-family: var(--font-body); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--light-ink); margin-bottom: 4px; }
.pm-day { margin-bottom: 20px; break-inside: avoid; }
.pm-day-hd { display: flex; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--warm-sand); padding-bottom: 6px; }
.pm-day-num { font-family: var(--font-display); font-size: 24px; color: var(--ink-blue); }
.pm-day-date { font-size: 12px; color: var(--light-ink); }
.pm-day-city { margin-left: auto; font-family: var(--font-body); font-weight: 600; color: var(--sunset-rust); font-size: 13px; }
.pm-timeline { margin-top: 10px; }
.pm-event { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--border-subtle); break-inside: avoid; }
.pm-event-kind { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--sunset-rust); font-weight: 700; }
.pm-event-title { font-family: var(--font-display); font-size: 18px; }
.pm-event-body p { margin: 4px 0 0; color: var(--light-ink); font-size: 13px; }
.pm-day-open { margin-top: 8px; color: var(--light-ink); font-style: italic; font-family: var(--font-secondary); font-size: 16px; }
.pm-place-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 10px; }
.pm-place { border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; break-inside: avoid; }
.pm-place-img { width: 100%; height: 92px; object-fit: cover; display: block; }
.pm-place-body { padding: 12px; }
.pm-place-kind { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--faded-coral); font-weight: 700; }
.pm-place-body h4 { font-family: var(--font-display); font-size: 18px; margin: 2px 0 4px; }
.pm-place-body p { margin: 0; font-size: 12px; color: var(--light-ink); }
.pm-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.pm-table td { padding: 10px 8px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; color: var(--light-ink); vertical-align: top; }
.pm-table td:first-child { font-family: var(--font-display); font-size: 16px; color: var(--ink-blue); }
.pm-table tr { break-inside: avoid; }
.pm-url { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--light-ink); }
.pm-budget-tot { margin-top: 12px; font-family: var(--font-body); font-weight: 600; color: var(--ink-blue); }
.pm-notes { margin-top: 8px; }
.pm-note { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--border-subtle); font-size: 13px; color: var(--ink-blue); break-inside: avoid; }
.pm-note-box, .pm-note-pin { color: var(--faded-coral); }
.pm-empty { color: var(--light-ink); }

@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; }
  body > *:not(#pmPrintRoot) { display: none !important; }
  #pmPrintRoot { display: block !important; }
  #pmPrintRoot, #pmPrintRoot * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ── Bucket list: remove a country (✕), matching cities/experiences ── */
.bucket-item { position: relative; padding-right: 28px; }
.bucket-item-x { position: absolute; top: 8px; right: 8px; color: var(--stamp-burgundy); font-size: 12px; opacity: .55; padding: 2px 4px; border-radius: 4px; line-height: 1; }
.bucket-item-x:hover { opacity: 1; background: rgba(124, 63, 63, .12); }

/* ── Filters 2.0: presets, live count, active chips, section summaries ── */
.filter-sub { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 3px; }
.filter-presets { display: flex; gap: 8px; overflow-x: auto; padding: 12px 22px; border-bottom: 1px solid var(--border-subtle); scrollbar-width: thin; }
.filter-presets::-webkit-scrollbar { height: 4px; }
.filter-preset { white-space: nowrap; border: 1px solid var(--border-subtle); background: var(--paper-white); border-radius: 999px; padding: 8px 13px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .03em; color: var(--ink-blue); cursor: pointer; flex: 0 0 auto; }
.filter-preset:hover { background: var(--warm-sand); }
.filter-preset.active { background: var(--ink-blue); color: #fff; border-color: var(--ink-blue); }
.filter-active-chips { display: none; flex-wrap: wrap; gap: 6px; padding: 12px 22px; border-bottom: 1px solid var(--border-subtle); align-items: center; }
.fchip { display: inline-flex; align-items: center; gap: 5px; background: rgba(143,175,166,.14); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 9px; font-family: var(--font-body); font-size: 11px; color: var(--ink-blue); }
.fchip-x { background: none; border: none; color: var(--stamp-burgundy); font-size: 14px; cursor: pointer; padding: 0; line-height: 1; }
.fchip-clear { background: none; border: none; color: var(--light-ink); text-decoration: underline; cursor: pointer; font-size: 11px; font-family: var(--font-body); margin-left: 2px; }
.filter-card-summary { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); padding: 0 22px 12px 36px; margin-top: -2px; }
.filter-card.open .filter-card-summary { color: var(--faded-coral); }

/* ── Passport: Stamp modal + new CTAs/states ── */
.stamp-modal-overlay { display: none; position: fixed; inset: 0; z-index: 16500; background: rgba(44,54,64,.5); align-items: center; justify-content: center; padding: 20px; }
.stamp-modal-overlay.open { display: flex; }
.stamp-modal { background: var(--postcard-cream); border: 1px solid var(--warm-sand); border-radius: 12px; box-shadow: 0 26px 70px rgba(44,54,64,.34); width: 100%; max-width: 480px; max-height: 92vh; display: flex; flex-direction: column; position: relative; }
.stamp-modal .pe-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; color: var(--light-ink); cursor: pointer; z-index: 2; }
.stamp-modal-head { padding: 22px 24px 8px; }
.sm-stamp-badge { font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stamp-burgundy); border: 1.5px solid rgba(124,63,63,.4); border-radius: 4px; padding: 3px 8px; display: inline-block; transform: rotate(-3deg); }
.stamp-modal-head h2 { font-family: var(--font-display); font-size: 24px; color: var(--ink-blue); margin: 10px 0 0; }
.stamp-modal-body { padding: 14px 24px; overflow-y: auto; flex: 1; }
.sm-row { display: flex; gap: 12px; }
.sm-row .sm-fld { flex: 1; }
.sm-fld { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.sm-fld > span { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--light-ink); }
.sm-fld > span em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--light-ink); opacity: .7; }
.sm-fld input[type=text], .sm-fld input[type=month], .sm-fld select, .sm-fld textarea { padding: 9px 11px; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-body); font-size: 14px; background: var(--paper-white); color: var(--ink-blue); }
.sm-fld textarea { min-height: 64px; resize: vertical; }
.sm-rating { display: flex; gap: 8px; }
.sm-rating button { flex: 1; padding: 9px 6px; border: 1px solid var(--border-subtle); border-radius: 9px; background: var(--paper-white); font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); cursor: pointer; }
.sm-rating button.on { border-color: var(--sunset-rust); background: rgba(201,110,75,.12); color: var(--stamp-burgundy); font-weight: 600; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-chip { border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 11px; background: var(--paper-white); font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); cursor: pointer; }
.sm-chip.on { background: var(--sea-glass); color: #fff; border-color: var(--sea-glass); }
.sm-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sm-photo { width: 70px; height: 70px; border-radius: 8px; background-size: cover; background-position: center; position: relative; }
.sm-photo button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--ink-blue); color: #fff; font-size: 13px; cursor: pointer; line-height: 1; }
.stamp-modal-foot { padding: 16px 24px; border-top: 1px solid var(--warm-sand); }
.stamp-modal-foot .ed-del { display: block; margin: 10px auto 0; }

/* City panel + country modal "Stamp Visited" */
.city-stamp-btn.stamped, .cm-btn.saved { background: var(--sea-glass); color: #fff; border-color: var(--sea-glass); }

/* Passport grid: edit affordance, rating, empty CTA */
.passport-stamp-card { position: relative; }
.passport-stamp-edit { position: absolute; top: 8px; right: 30px; background: none; border: none; color: var(--light-ink); font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.passport-stamp-edit:hover { background: var(--warm-sand); color: var(--ink-blue); }
.passport-stamp-rating { font-size: 14px; }
.passport-empty { text-align: center; padding: 30px 18px; }
.passport-empty-art { font-family: var(--font-display); font-size: 38px; color: var(--faded-coral); margin-bottom: 10px; }
.passport-empty p { color: var(--warm-sand); font-family: var(--font-secondary); font-size: 16px; line-height: 1.5; margin: 0 0 16px; }
.passport-empty-cta { background: var(--sunset-rust); color: #fff; border: none; border-radius: 999px; padding: 10px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; }
.passport-empty-cta:hover { background: var(--stamp-burgundy); }

/* ── Filters 2.0 (round 2): chip pickers replace multi-selects, intent, saved views ── */
.filter-drawer select[multiple] { display: none !important; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.filter-chip { border: 1px solid var(--border-subtle); border-radius: 999px; padding: 7px 12px; background: var(--paper-white); font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); cursor: pointer; transition: background .12s; }
.filter-chip:hover { background: var(--warm-sand); }
.filter-chip.on { background: var(--sea-glass); color: #fff; border-color: var(--sea-glass); }
.filter-intent { margin-bottom: 14px; }
.filter-intent .label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--light-ink); font-weight: 600; margin-bottom: 7px; }
.filter-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.filter-seg button { border: 1px solid var(--border-subtle); border-radius: 9px; padding: 9px 6px; background: var(--paper-white); font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-blue); cursor: pointer; }
.filter-seg button.on { background: rgba(201,110,75,.14); border-color: var(--sunset-rust); color: var(--stamp-burgundy); }
.filter-saved-views { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 22px; border-bottom: 1px solid var(--border-subtle); }
.filter-savedview { display: inline-flex; align-items: center; background: rgba(143,175,166,.14); border: 1px solid var(--border-subtle); border-radius: 999px; overflow: hidden; }
.filter-savedview-go { background: none; border: none; padding: 6px 4px 6px 11px; font-family: var(--font-body); font-size: 11px; color: var(--ink-blue); cursor: pointer; }
.filter-savedview-x { background: none; border: none; color: var(--stamp-burgundy); font-size: 13px; cursor: pointer; padding: 0 8px 0 4px; }
.filter-savedview-add { background: none; border: 1px dashed var(--border-subtle); border-radius: 999px; padding: 6px 11px; font-family: var(--font-body); font-size: 11px; color: var(--light-ink); cursor: pointer; }
.filter-savedview-add:hover { background: var(--warm-sand); color: var(--ink-blue); }
.filter-zero { color: var(--stamp-burgundy); }

/* ── Flight prices (Aviasales): cheapest highlight + offer rows ── */
.flights-cheapest { background: var(--paper-white); border: 1px solid var(--border-subtle); border-left: 4px solid var(--sunset-rust); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.flights-cheapest-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.flights-cheapest-price { font-family: var(--font-display); font-size: 30px; color: var(--ink-blue); line-height: 1; }
.flights-cheapest-meta { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.flights-cheapest-sub { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 4px; }
.flights-book-btn { display: inline-block; margin-top: 10px; background: var(--sunset-rust); color: #fff; text-decoration: none; border-radius: 8px; padding: 8px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600; }
.flights-book-btn:hover { background: var(--stamp-burgundy); }
.flights-list { display: flex; flex-direction: column; gap: 6px; }
.flight-offer { display: flex; align-items: center; gap: 12px; background: var(--postcard-cream); border: 1px solid var(--border-subtle); border-radius: 9px; padding: 9px 12px; text-decoration: none; }
.flight-offer:hover { background: var(--warm-sand); }
.flight-offer-price { font-family: var(--font-display); font-size: 17px; color: var(--ink-blue); flex: 0 0 auto; min-width: 56px; }
.flight-offer-meta { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); }
.flights-book { display: inline-block; margin-top: 10px; font-family: var(--font-body); font-size: 12px; color: var(--sea-glass); text-decoration: none; border-bottom: 1px solid var(--sea-glass); }

/* ── Curated Collections ── */
/* Featured collection hero */
.coll-featured { display: flex; width: 100%; text-align: left; background: var(--ink-blue); border: none; border-radius: 18px; overflow: hidden; cursor: pointer; margin-bottom: 22px; min-height: 240px; box-shadow: 0 18px 50px rgba(58,74,90,.22); transition: transform .2s, box-shadow .2s; padding: 0; }
.coll-featured:hover { transform: translateY(-3px); box-shadow: 0 28px 70px rgba(58,74,90,.3); }
.coll-featured-img { flex: 1 1 55%; background: var(--warm-sand) center/cover no-repeat; min-height: 240px; }
.coll-featured-body { flex: 1 1 45%; padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; color: #fff; background: linear-gradient(135deg, rgba(58,74,90,.0), rgba(58,74,90,.0)); }
.coll-featured-eyebrow { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--faded-coral); font-weight: 700; }
.coll-featured-title { font-family: var(--font-display); font-size: 36px; line-height: 1.04; margin: 10px 0 0; color: #fff; }
.coll-featured-sum { font-family: var(--font-secondary); font-style: italic; font-size: 17px; color: rgba(255,255,255,.9); margin-top: 12px; line-height: 1.4; }
.coll-featured-cta { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #fff; margin-top: 18px; }
@media (max-width: 720px) { .coll-featured { flex-direction: column; } .coll-featured-img { min-height: 180px; } }
/* Filter chips */
.coll-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; padding: 0 4px; }
.coll-fchip { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: background .15s, color .15s; }
.coll-fchip.on { background: var(--ink-blue); color: #fff; border-color: var(--ink-blue); }
.coll-fchip:hover:not(.on) { border-color: var(--sunset-rust); }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 4px; }
.coll-card { text-align: left; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 12px 34px rgba(58,74,90,.1); transition: transform .2s, box-shadow .2s; padding: 0; }
.coll-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(58,74,90,.18); }
.coll-card-img { height: 168px; background: var(--warm-sand); background-size: cover; background-position: center; position: relative; }
.coll-card-tag { position: absolute; top: 10px; left: 10px; font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(44,54,64,.55); padding: 4px 9px; border-radius: 4px; }
.coll-card-body { padding: 14px 16px 16px; }
.coll-card-title { font-family: var(--font-display); font-size: 21px; color: var(--ink-blue); line-height: 1.05; }
.coll-card-sum { font-family: var(--font-secondary); font-style: italic; font-size: 15px; color: var(--light-ink); margin-top: 6px; line-height: 1.35; }
.coll-card-meta { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 8px; }
/* Detail */
.coll-back { background: none; border: none; color: var(--sunset-rust); font-family: var(--font-body); font-size: 13px; cursor: pointer; padding: 0 0 14px; }
.coll-overview { max-width: 760px; margin-bottom: 22px; }
.coll-hero-sum { font-family: var(--font-secondary); font-style: italic; font-size: 22px; line-height: 1.3; color: var(--ink-blue); margin: 0 0 16px; }
.coll-fit { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
.coll-fit > div { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); flex: 1; min-width: 220px; }
.coll-fit span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sunset-rust); font-weight: 700; margin-bottom: 3px; }
.coll-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.coll-chip { font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); background: rgba(143,175,166,.14); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 12px; }
.coll-chip b { color: var(--sunset-rust); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; }
.coll-pairings { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); }
.coll-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.coll-item { display: flex; gap: 14px; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; }
.coll-item[role="button"] { cursor: pointer; }
.coll-item[role="button"]:hover { box-shadow: 0 14px 36px rgba(58,74,90,.14); }
.coll-item-img { width: 110px; flex: 0 0 110px; background: var(--warm-sand); background-size: cover; background-position: center; position: relative; }
.coll-item-type { position: absolute; bottom: 6px; left: 6px; font-family: var(--font-body); font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(44,54,64,.6); padding: 3px 6px; border-radius: 3px; }
.coll-item-body { padding: 12px 14px 12px 0; flex: 1; min-width: 0; }
.coll-item-name { font-family: var(--font-display); font-size: 17px; color: var(--ink-blue); }
.coll-item-loc { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); font-weight: 400; }
.coll-item-why { font-family: var(--font-body); font-size: 12.5px; color: var(--light-ink); line-height: 1.5; margin-top: 5px; }
.coll-item-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.coll-item-tag { font-family: var(--font-body); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-blue); background: var(--warm-sand); padding: 3px 7px; border-radius: 4px; }

/* ── Flights tab ── */
.ft-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.ft-mode { background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 7px 13px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-blue); cursor: pointer; }
.ft-mode.active { background: var(--ink-blue); color: #fff; border-color: var(--ink-blue); }
.ft-searchbar { padding: 14px 28px; border-bottom: 1px solid var(--border-subtle); background: var(--paper-white); }
.ft-search-grid { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.ft-field { display: flex; flex-direction: column; gap: 5px; }
.ft-field > span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--light-ink); font-weight: 700; }
.ft-field .po-input, .ft-field .po-select { min-width: 130px; }
.ft-field input[maxlength="3"] { min-width: 80px; text-transform: uppercase; }
.ft-go { width: auto !important; padding: 11px 20px; }
.ft-need-home { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ft-content { padding: 22px 28px; overflow-y: auto; }
.ft-empty-hero { font-family: var(--font-secondary); font-style: italic; font-size: 20px; color: var(--light-ink); padding: 30px 0; max-width: 640px; }
.ft-link { background: none; border: none; color: var(--sunset-rust); font-family: var(--font-body); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }
.ft-search-layout { display: grid; grid-template-columns: 250px 1fr; gap: 22px; }
.ft-sidebar { align-self: start; position: sticky; top: 0; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 16px; }
.ft-fgroup { padding: 12px 0; border-bottom: 1px dashed var(--border-subtle); }
.ft-fgroup:last-of-type { border-bottom: none; }
.ft-ftitle { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--sunset-rust); margin-bottom: 10px; }
.ft-stop { display: block; width: 100%; text-align: left; background: var(--postcard-cream); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); cursor: pointer; }
.ft-stop.on { background: rgba(143,175,166,.18); border-color: var(--sea-glass); }
.ft-sidebar input[type=range] { width: 100%; }
.ft-airchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-airchip { background: var(--postcard-cream); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 9px; font-family: var(--font-body); font-size: 11px; color: var(--ink-blue); cursor: pointer; }
.ft-airchip.on { background: var(--sea-glass); color: #fff; border-color: var(--sea-glass); }
.ft-results-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.ft-route-title { font-family: var(--font-display); font-size: 30px; color: var(--ink-blue); margin: 0; }
.ft-route-meta { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin: 4px 0 0; }
.ft-offers { display: flex; flex-direction: column; gap: 10px; }
.ft-offer { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px 16px; }
.ft-offer-main { display: flex; align-items: center; gap: 12px; }
.ft-air-badge { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--dusty-sky), var(--faded-coral)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 11px; font-weight: 800; flex: 0 0 auto; }
.ft-offer-route { font-family: var(--font-body); font-weight: 700; color: var(--ink-blue); font-size: 15px; }
.ft-offer-sub { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 3px; }
.ft-offer-price { text-align: right; }
.ft-offer-price .price { font-family: var(--font-display); font-size: 30px; color: var(--sunset-rust); line-height: 1; }
.ft-offer-price .price-sub { font-size: 11px; color: var(--light-ink); margin: 3px 0 8px; }
.ft-result-foot { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
/* Calendar */
.ft-cal-head h3 { font-family: var(--font-display); font-size: 30px; color: var(--ink-blue); margin: 0; }
.ft-cal-head p { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin: 4px 0 16px; }
.ft-cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ft-cal-cell { border: 1px solid var(--border-subtle); background: var(--paper-white); border-radius: 12px; padding: 10px; text-align: center; cursor: pointer; }
.ft-cal-cell.hot { background: rgba(143,175,166,.16); border-color: rgba(143,175,166,.38); }
.ft-cal-cell.best { background: rgba(212,138,122,.16); border-color: rgba(212,138,122,.4); }
.ft-cal-date { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--light-ink); }
.ft-cal-price { font-family: var(--font-display); font-size: 21px; color: var(--sunset-rust); margin-top: 5px; }
.ft-cal-sub { font-size: 10px; color: var(--light-ink); margin-top: 2px; }
/* Explore */
.ft-explore-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); }
.ft-explore-bar label { display: inline-flex; gap: 5px; align-items: center; }
.ft-explore-bar input[type=number] { border: 1px solid var(--border-subtle); border-radius: 6px; padding: 6px 8px; }
.ft-deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ft-deal { background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; }
.ft-deal-img { height: 120px; background: var(--warm-sand); background-size: cover; background-position: center; }
.ft-deal-body { padding: 12px 14px 14px; }
.ft-deal-top { display: flex; align-items: baseline; justify-content: space-between; }
.ft-deal-city { font-family: var(--font-display); font-size: 19px; color: var(--ink-blue); }
.ft-deal-price { font-family: var(--font-display); font-size: 22px; color: var(--sunset-rust); }
.ft-deal-sub { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 3px; }
.ft-deal-acts { display: flex; gap: 12px; margin-top: 8px; }
.ft-deal-acts .ft-link { text-decoration: none; }
/* Tracked */
.ft-tracked { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.ft-track-row { display: flex; align-items: center; justify-content: space-between; background: var(--paper-white); border: 1px solid var(--border-subtle); border-left: 4px solid var(--warm-sand); border-radius: 12px; padding: 14px 16px; }
.ft-track-row.hit { border-left-color: var(--sea-glass); background: #f3f7f4; }
.ft-track-route { font-family: var(--font-display); font-size: 18px; color: var(--ink-blue); }
.ft-track-name { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); }
.ft-track-sub { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 3px; }

.ft-content { flex: 1 1 auto; min-height: 0; }

.ft-note { background: var(--postcard-cream); border: 1px solid var(--warm-sand); border-radius: 10px; padding: 10px 14px; font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-bottom: 12px; }
.ft-note b { color: var(--ink-blue); }

/* ── Collections: actions + featured-in ── */
.coll-actions { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.coll-save, .coll-addall { border-radius: 999px; padding: 9px 16px; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-subtle); background: var(--paper-white); color: var(--ink-blue); }
.coll-save.on { background: var(--faded-coral); color: #fff; border-color: var(--faded-coral); }
.coll-addall { background: var(--sunset-rust); color: #fff; border-color: var(--sunset-rust); }
.coll-addall:hover { background: var(--stamp-burgundy); }
.coll-item-acts { display: flex; gap: 8px; margin-top: 8px; }
.coll-mini { background: var(--postcard-cream); border: 1px solid var(--border-subtle); border-radius: 7px; padding: 5px 10px; font-family: var(--font-body); font-size: 11px; color: var(--ink-blue); cursor: pointer; }
.coll-mini:hover { background: var(--warm-sand); }
.coll-mini.on { background: var(--faded-coral); color: #fff; border-color: var(--faded-coral); }
.featured-in-wrap:empty { display: none; }
.featured-in { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0; }
.featured-in-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sunset-rust); font-weight: 700; }
.featured-chip { background: rgba(201,110,75,.1); border: 1px solid rgba(201,110,75,.28); border-radius: 999px; padding: 6px 11px; font-family: var(--font-body); font-size: 11px; color: var(--stamp-burgundy); cursor: pointer; }
.featured-chip:hover { background: rgba(201,110,75,.2); }

/* ── Saveable places: rec save button + place modal + bucket section ── */
.rec-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rec-save { background: none; border: 1px solid rgba(246,241,230,.3); border-radius: 999px; padding: 4px 10px; font-family: var(--font-body); font-size: 10px; font-weight: 600; color: var(--paper-white); cursor: pointer; flex: 0 0 auto; }
.rec-save:hover { background: rgba(246,241,230,.16); }
.ps-loc { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 4px; }
.bucket-place { cursor: pointer; }
.bucket-typed-sub { color: var(--light-ink); font-weight: 400; font-size: 11px; }

/* ── Curated city Travel Objects (Gemini) — light city card ── */
.rec-save, .obj-save { background: var(--postcard-cream); border: 1px solid var(--border-subtle); color: var(--ink-blue); }
.rec-save:hover, .obj-save:hover { background: var(--warm-sand); }
.obj-card { display: flex; gap: 12px; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--paper-white); }
.obj-thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 9px; background: var(--warm-sand) center/cover no-repeat; }
.obj-card-main { flex: 1; min-width: 0; }
.obj-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.obj-card-h { min-width: 0; }
.obj-card-name { font-family: var(--font-display); font-size: 18px; color: var(--ink-blue); line-height: 1.1; }
.obj-card-area { font-family: var(--font-body); font-size: 10px; color: var(--light-ink); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }
.obj-card-sum { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); line-height: 1.5; margin-top: 7px; }
.obj-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; }
.obj-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.obj-tag { font-family: var(--font-body); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-blue); background: var(--warm-sand); padding: 3px 7px; border-radius: 4px; }
.obj-map { font-family: var(--font-body); font-size: 11px; color: var(--sea-glass); text-decoration: none; flex: 0 0 auto; }
.obj-card[role="button"] { cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; }
.obj-card[role="button"]:hover { border-color: var(--sunset-rust); box-shadow: 0 4px 14px rgba(44,54,64,.08); }

/* Universal Travel Object detail overlay (hotels, restaurants, routes, places…) */
.obj-detail-overlay { display: none; position: fixed; inset: 0; z-index: 16400; background: rgba(44,54,64,.55); align-items: center; justify-content: center; padding: 20px; }
.obj-detail-overlay.open { display: flex; }
.obj-detail-card { position: relative; background: var(--paper-white); border-radius: 14px; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; box-shadow: 0 18px 50px rgba(44,54,64,.3); }
.obj-detail-card .pe-close { position: absolute; top: 10px; right: 12px; background: rgba(255,255,255,.85); border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 20px; color: var(--ink-blue); cursor: pointer; z-index: 2; line-height: 1; }
.obj-detail-hero { position: relative; height: 220px; background: var(--warm-sand) center/cover no-repeat; border-radius: 14px 14px 0 0; display: flex; align-items: flex-end; }
.obj-detail-hero.loading { background-image: linear-gradient(110deg, var(--warm-sand) 30%, #f3ece0 50%, var(--warm-sand) 70%); }
.obj-detail-hero-overlay { width: 100%; padding: 18px; background: linear-gradient(to top, rgba(44,54,64,.78), rgba(44,54,64,0)); border-radius: 0 0 0 0; color: #fff; }
.obj-detail-type { display: inline-block; font-family: var(--font-body); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; background: var(--sunset-rust); color: #fff; padding: 3px 8px; border-radius: 4px; margin-bottom: 8px; }
.obj-detail-hero-overlay h2 { font-family: var(--font-display); font-size: 26px; line-height: 1.05; margin: 0; color: #fff; }
.obj-detail-loc { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,.85); margin-top: 5px; }
.obj-detail-body { padding: 18px; }
.obj-detail-sum { font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); line-height: 1.6; margin: 0; }
.obj-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.obj-detail-actions { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.obj-detail-actions .tw-save-btn { width: auto; flex: 1; }

/* Trip workspace → Explore tab → curated Travel Objects */
.tw-explore-places { margin-bottom: 26px; }
.tw-obj-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 14px; }
.tw-obj-tab { font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.tw-obj-tab.active { background: var(--ink-blue); color: #fff; border-color: var(--ink-blue); }
.tw-obj-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border-subtle); border-radius: 12px; padding: 10px; margin-bottom: 9px; background: var(--paper-white); }
.tw-obj-img { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 9px; background: var(--warm-sand) center/cover no-repeat; cursor: pointer; }
.tw-obj-body { flex: 1; min-width: 0; cursor: pointer; }
.tw-obj-name { font-family: var(--font-display); font-size: 16px; color: var(--ink-blue); line-height: 1.15; }
.tw-obj-meta { font-family: var(--font-body); font-size: 10px; color: var(--light-ink); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.tw-obj-sum { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); line-height: 1.45; margin-top: 5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tw-obj-card .tw-exp-add { flex: 0 0 auto; align-self: center; }

/* ===== HEADER BAR — unified, quiet nav (overrides earlier per-button color) ===== */
.header-actions { gap: 6px; row-gap: 8px; }
.header-divider { width: 1px; height: 20px; background: var(--border-subtle); margin: 0 3px; flex: 0 0 auto; }
.header-btn {
  padding: 7px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--border-subtle); background: transparent; color: var(--light-ink);
  gap: 6px; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.header-btn .ico { opacity: 0.7; }
/* neutralize all the old per-button colored resting states */
.btn-spin, .btn-filter, .btn-bucket, .btn-passport, .btn-collections, .btn-flights, .btn-inspiration, .btn-account {
  background: transparent; color: var(--light-ink); border-color: var(--border-subtle);
}
.btn-spin { animation: none; }
.btn-spin .ico { color: var(--sunset-rust); opacity: 0.85; }   /* one playful accent */
.header-btn:hover,
.btn-spin:hover, .btn-filter:hover, .btn-bucket:hover, .btn-passport:hover {
  background: var(--warm-sand); color: var(--ink-blue);
  border-color: rgba(58,74,90,0.18); transform: none; box-shadow: none;
}
.btn-spin:hover .ico { color: var(--sunset-rust); }
/* one consistent active/toggle state */
.header-btn.active,
.btn-filter.active, .btn-bucket.active, .btn-passport.active {
  background: var(--ink-blue); color: var(--paper-white); border-color: var(--ink-blue);
}
.header-btn.active .ico { opacity: 1; color: inherit; }
/* the single filled primary: Trips */
.btn-trip { background: var(--sunset-rust); color: #fff; border-color: var(--sunset-rust); }
.btn-trip .ico { opacity: 0.95; color: #fff; }
.btn-trip:hover { background: #A85A3A; border-color: #A85A3A; color: #fff; transform: none; box-shadow: none; }
.btn-account .account-initials { margin-right: -2px; }
@media (max-width: 860px) { .header-divider { display: none; } }

/* ===== TRAVELERS NETWORK ===== */
.tv-wrap { max-width: 1080px; margin: 0 auto; }
.tv-yours { display: flex; align-items: center; gap: 16px; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 16px 18px; margin-bottom: 22px; }
.tv-yours-face, .tv-card-face, .tv-hero-face { flex: 0 0 auto; border-radius: 50%; background: var(--warm-sand); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.tv-yours-face { width: 56px; height: 56px; font-size: 26px; }
.tv-yours-face img, .tv-card-face img, .tv-hero-face img { width: 100%; height: 100%; object-fit: cover; }
.tv-yours-main { flex: 1; min-width: 0; }
.tv-yours-name { font-family: var(--font-display); font-size: 20px; color: var(--ink-blue); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-yours-dna { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); margin-top: 3px; }
.tv-yours-stats { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 5px; }
.tv-yours-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.tv-priv-badge { font-family: var(--font-body); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; font-weight: 600; }
.tv-priv-private { background: rgba(124,63,63,.12); color: var(--stamp-burgundy); }
.tv-priv-hybrid { background: rgba(175,198,207,.25); color: var(--ink-blue); }
.tv-priv-public { background: rgba(143,175,166,.22); color: var(--sage-green); }
.tv-btn { background: var(--sunset-rust); color: #fff; border: none; border-radius: 999px; padding: 8px 16px; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tv-btn:hover { background: var(--stamp-burgundy); }
.tv-btn.following { background: var(--sage-green); }
.tv-btn-ghost { background: transparent; color: var(--ink-blue); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 16px; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tv-btn-ghost:hover { background: var(--warm-sand); }
.tv-subtabs { display: inline-flex; gap: 2px; background: var(--warm-sand); border-radius: 999px; padding: 3px; margin-bottom: 22px; }
.tv-subtab { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--light-ink); background: transparent; border: none; border-radius: 999px; padding: 8px 22px; cursor: pointer; transition: background .15s, color .15s; }
.tv-subtab.on { background: var(--paper-white); color: var(--ink-blue); box-shadow: 0 1px 4px rgba(44,54,64,.1); }
.tv-search { position: relative; display: flex; align-items: center; margin-bottom: 22px; }
.tv-search .ico { position: absolute; left: 14px; color: var(--light-ink); opacity: .55; }
.tv-search input { width: 100%; padding: 12px 14px 12px 38px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--paper-white); font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); }
.tv-search input:focus { outline: none; border-color: var(--sunset-rust); }
.tv-section-title { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--light-ink); font-weight: 600; margin: 0 0 12px; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.tv-card { text-align: center; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 20px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; font-family: var(--font-body); }
.tv-card:hover { border-color: var(--sunset-rust); box-shadow: 0 6px 18px rgba(44,54,64,.08); transform: translateY(-2px); }
.tv-card-face { width: 62px; height: 62px; font-size: 30px; margin: 0 auto 10px; }
.tv-card-name { font-family: var(--font-display); font-size: 17px; color: var(--ink-blue); }
.tv-card-loc { font-size: 11px; color: var(--light-ink); margin-top: 3px; }
.tv-card-dna { font-size: 12px; color: var(--sunset-rust); margin-top: 6px; font-weight: 600; }
.tv-card-tags { font-size: 11px; color: var(--light-ink); margin-top: 5px; }
.tv-card-stats { font-size: 11px; color: var(--light-ink); margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-subtle); }
.tv-card-follow { margin-top: 10px; width: 100%; background: var(--sunset-rust); color: #fff; border: none; border-radius: 999px; padding: 7px 0; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; }
.tv-card-follow:hover { background: var(--stamp-burgundy); }
.tv-card-follow.following { background: var(--sage-green); }
.tv-empty { grid-column: 1 / -1; text-align: center; color: var(--light-ink); font-family: var(--font-body); font-size: 14px; padding: 40px 0; }
.tv-back { background: none; border: none; font-family: var(--font-body); font-size: 13px; color: var(--light-ink); cursor: pointer; margin-bottom: 16px; }
.tv-back:hover { color: var(--ink-blue); }
/* Profile view */
.tv-profile { max-width: 720px; margin: 0 auto; }
.tv-hero { text-align: center; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 30px 24px; margin-bottom: 18px; }
.tv-hero-face { width: 84px; height: 84px; font-size: 40px; margin: 0 auto 14px; }
.tv-hero-name { font-family: var(--font-display); font-size: 28px; color: var(--ink-blue); margin: 0; }
.tv-hero-loc { font-size: 13px; color: var(--light-ink); margin-top: 5px; }
.tv-hero-archetype { font-family: var(--font-body); font-size: 14px; color: var(--sunset-rust); font-weight: 600; margin-top: 10px; }
.tv-hero-tagline { font-family: var(--font-accent); font-size: 17px; color: var(--light-ink); margin-top: 6px; }
.tv-hero-bio { font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); line-height: 1.55; margin: 12px auto 0; max-width: 520px; }
.tv-hero-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 14px; }
.tv-tag { font-family: var(--font-body); font-size: 11px; background: var(--warm-sand); color: var(--ink-blue); padding: 4px 11px; border-radius: 999px; }
.tv-hero-actions { margin-top: 18px; }
.tv-followcounts { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 12px; }
.tv-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; }
.tv-stat { background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 8px; text-align: center; }
.tv-stat-n { font-family: var(--font-display); font-size: 24px; color: var(--ink-blue); }
.tv-stat-l { font-family: var(--font-body); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--light-ink); margin-top: 3px; }
.tv-block { background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.tv-dna-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tv-dna-row:last-child { margin-bottom: 0; }
.tv-dna-label { flex: 0 0 110px; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.tv-dna-bar { flex: 1; height: 8px; background: var(--warm-sand); border-radius: 999px; overflow: hidden; }
.tv-dna-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sage-green), var(--sunset-rust)); border-radius: 999px; }
.tv-dna-pct { flex: 0 0 40px; text-align: right; font-family: var(--font-body); font-size: 12px; color: var(--light-ink); }
.tv-coll-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tv-coll-chip { font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); background: var(--postcard-cream); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.tv-coll-chip:hover { border-color: var(--sunset-rust); color: var(--sunset-rust); }
.tv-passport { display: flex; flex-wrap: wrap; gap: 7px; }
.tv-country { font-family: var(--font-body); font-size: 12px; background: var(--warm-sand); color: var(--ink-blue); padding: 4px 11px; border-radius: 6px; }
/* Edit form */
.tv-edit { max-width: 560px; margin: 0 auto; }
.tv-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.tv-field span { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--light-ink); }
.tv-field input, .tv-field textarea { padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; background: var(--paper-white); font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); resize: vertical; }
.tv-field input:focus, .tv-field textarea:focus { outline: none; border-color: var(--sunset-rust); }
.tv-priv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.tv-priv-card { display: block; border: 1.5px solid var(--border-subtle); border-radius: 12px; padding: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.tv-priv-card.on { border-color: var(--sunset-rust); background: rgba(201,110,75,.05); }
.tv-priv-card input { position: absolute; opacity: 0; pointer-events: none; }
.tv-priv-h { font-family: var(--font-display); font-size: 16px; color: var(--ink-blue); }
.tv-priv-d { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 5px; line-height: 1.4; }
.tv-edit-actions { display: flex; align-items: center; gap: 14px; }
.tv-save-msg { font-family: var(--font-body); font-size: 12px; color: var(--sage-green); }
@media (max-width: 640px) { .tv-stats-row { grid-template-columns: repeat(2, 1fr); } .tv-priv-cards { grid-template-columns: 1fr; } .tv-yours { flex-wrap: wrap; } }
/* Discovery feed */
.tv-feed-sec { margin-bottom: 26px; }
.tv-feed-row { display: flex; align-items: center; gap: 12px; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 11px 14px; margin-bottom: 8px; cursor: pointer; transition: border-color .15s; }
.tv-feed-row:hover { border-color: var(--sunset-rust); }
.tv-feed-face { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--warm-sand); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 19px; }
.tv-feed-face img { width: 100%; height: 100%; object-fit: cover; }
.tv-feed-body { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 13px; color: var(--light-ink); line-height: 1.4; }
.tv-feed-body b { color: var(--ink-blue); font-weight: 600; }
.tv-feed-what { color: var(--sunset-rust); font-weight: 600; }
.tv-feed-time { font-size: 11px; color: var(--light-ink); opacity: .7; margin-top: 2px; }
.tv-feed-empty { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); padding: 18px; text-align: center; background: var(--paper-white); border: 1px dashed var(--border-subtle); border-radius: 12px; }
/* Collection "saved by travelers" */
.coll-saved-by { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; flex-wrap: wrap; }
.coll-savedby-label { font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--light-ink); font-weight: 600; }
.coll-savedby-faces { display: flex; }
.coll-savedby-face { width: 34px; height: 34px; border-radius: 50%; background: var(--warm-sand); border: 2px solid var(--paper-white); margin-left: -8px; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: transform .12s; }
.coll-savedby-face:first-child { margin-left: 0; }
.coll-savedby-face:hover { transform: translateY(-2px) scale(1.08); z-index: 1; }
.coll-savedby-face img { width: 100%; height: 100%; object-fit: cover; }

/* ===== PHASE 3 — COLLABORATION ===== */
/* Workspace header: collaborators + role/template badges */
.tw-collab-faces { display: inline-flex; margin-right: 8px; vertical-align: middle; }
.tw-collab-face { width: 26px; height: 26px; border-radius: 50%; background: var(--warm-sand); border: 2px solid var(--paper-white); margin-left: -7px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; overflow: hidden; }
.tw-collab-face:first-child { margin-left: 0; }
.tw-collab-face img { width: 100%; height: 100%; object-fit: cover; }
.tw-rolebadge { display: inline-block; margin-left: 8px; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.25); color: inherit; padding: 2px 7px; border-radius: 999px; font-weight: 600; vertical-align: middle; }
.tw-templatebadge { background: var(--sage-green); color: #fff; }
/* Shared-with-me on dashboard */
.trips-shared-head { font-family: var(--font-display); font-size: 20px; color: var(--ink-blue); margin: 30px 0 14px; }
.trip-shared-role { position: absolute; top: 12px; right: 12px; font-family: var(--font-body); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; background: rgba(58,74,90,.7); color: #fff; padding: 3px 8px; border-radius: 999px; }
/* Share modal */
.tv-share-modal { max-width: 480px; width: 100%; text-align: left; }
.ts-collabs { margin-bottom: 18px; }
.ts-collab { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.ts-face { width: 32px; height: 32px; border-radius: 50%; background: var(--warm-sand); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; overflow: hidden; flex: 0 0 auto; }
.ts-face img { width: 100%; height: 100%; object-fit: cover; }
.ts-name { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); }
.ts-role-label { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--light-ink); }
.ts-role { font-family: var(--font-body); font-size: 12px; padding: 4px 6px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--paper-white); }
.ts-remove { background: none; border: none; color: var(--stamp-burgundy); cursor: pointer; font-size: 13px; padding: 4px; }
.ts-invite input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); }
.ts-invite input:focus { outline: none; border-color: var(--sunset-rust); }
.ts-results { margin-top: 8px; }
.ts-result { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px; cursor: pointer; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.ts-result:hover { border-color: var(--sunset-rust); }
.ts-add { margin-left: auto; font-size: 11px; color: var(--sunset-rust); font-weight: 600; }
.ts-noresult { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); padding: 6px; }
.ts-publish { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.ts-toggle { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); cursor: pointer; }
.ts-publish-note { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 6px; }
/* Voting */
.tw-votebar { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-subtle); }
.tw-vote { font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--paper-white); color: var(--light-ink); cursor: pointer; transition: all .12s; }
.tw-vote:hover { border-color: var(--ink-blue); color: var(--ink-blue); }
.tw-vote.on.tw-vote-yes { background: var(--sage-green); color: #fff; border-color: var(--sage-green); }
.tw-vote.on.tw-vote-maybe { background: var(--dusty-sky); color: var(--ink-blue); border-color: var(--dusty-sky); }
.tw-vote.on.tw-vote-no { background: var(--stamp-burgundy); color: #fff; border-color: var(--stamp-burgundy); }
/* Published trips on profile */
.tv-tmpls { display: flex; flex-direction: column; gap: 8px; }
.tv-tmpl { display: flex; align-items: center; gap: 12px; background: var(--postcard-cream); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 11px 14px; }
.tv-tmpl-info { flex: 1; min-width: 0; cursor: pointer; }
.tv-tmpl-info:hover .tv-tmpl-title { color: var(--sunset-rust); }
.tv-bl { display: flex; flex-wrap: wrap; gap: 7px; }
.tv-bl-chip { font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); background: var(--postcard-cream); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tv-bl-chip:hover:not(:disabled) { border-color: var(--sunset-rust); color: var(--sunset-rust); }
.tv-bl-chip:disabled { cursor: default; color: var(--light-ink); }
.tv-bl-k { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--sea-glass); font-weight: 600; }
.tv-bl-folder { margin-bottom: 12px; }
.tv-bl-folder-h { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-blue); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
.tv-bl-folder-h--muted { color: var(--light-ink); font-weight: 600; }
.tv-bl-lock { font-size: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--light-ink); }
.tv-tmpl-title { font-family: var(--font-display); font-size: 15px; color: var(--ink-blue); }
.tv-tmpl-meta { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 2px; }
.tv-tmpl-dup { flex: 0 0 auto; background: var(--sunset-rust); color: #fff; border: none; border-radius: 999px; padding: 7px 14px; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; }
.tv-tmpl-dup:hover { background: var(--stamp-burgundy); }
.tv-tmpl-dup:disabled { opacity: .7; cursor: default; }
.tv-story-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--postcard-cream); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 12px; margin-bottom: 7px; cursor: pointer; }
.tv-story-row:hover { border-color: var(--sunset-rust); }
.tv-story-title { font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); }

/* ===== TRAVEL STORIES ===== */
.st-wrap { max-width: 720px; margin: 0 auto; }
.st-feedhead { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.st-compose-btn { background: var(--sunset-rust); color: #fff; border: none; border-radius: 999px; padding: 10px 20px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; }
.st-compose-btn:hover { background: var(--stamp-burgundy); }
.st-typebar { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.st-typechip { font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 13px; cursor: pointer; }
.st-typechip.on { background: var(--ink-blue); color: #fff; border-color: var(--ink-blue); }
.st-feed { display: flex; flex-direction: column; gap: 16px; }
.st-empty { text-align: center; color: var(--light-ink); font-family: var(--font-body); padding: 50px 0; }
.st-card { display: flex; gap: 0; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.st-card:hover { box-shadow: 0 8px 24px rgba(44,54,64,.1); transform: translateY(-2px); }
.st-card-img { flex: 0 0 150px; background: var(--warm-sand) center/cover no-repeat; position: relative; min-height: 150px; }
.st-type-chip { position: absolute; top: 10px; left: 10px; font-family: var(--font-body); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; background: rgba(44,54,64,.78); color: #fff; padding: 3px 8px; border-radius: 4px; }
.st-card-body { flex: 1; min-width: 0; padding: 16px 18px; }
.st-card-title { font-family: var(--font-display); font-size: 20px; color: var(--ink-blue); line-height: 1.15; }
.st-card-sub { font-family: var(--font-body); font-size: 12px; color: var(--sunset-rust); margin-top: 3px; }
.st-card-excerpt { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); line-height: 1.5; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-card-author { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-family: var(--font-body); font-size: 12px; color: var(--light-ink); }
.st-author-face { width: 24px; height: 24px; border-radius: 50%; background: var(--warm-sand); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; overflow: hidden; flex: 0 0 auto; }
.st-author-face img { width: 100%; height: 100%; object-fit: cover; }
.st-author-name { color: var(--ink-blue); font-weight: 600; }
.st-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.st-react { font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--paper-white); color: var(--light-ink); cursor: pointer; }
.st-react.on { background: var(--faded-coral); color: #fff; border-color: var(--faded-coral); }
.st-react:hover { border-color: var(--faded-coral); }
.st-card-meta { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-left: auto; }
/* Detail */
.st-detail { max-width: 680px; margin: 0 auto; }
.st-detail-hero { height: 280px; border-radius: 14px; background: var(--warm-sand) center/cover no-repeat; position: relative; margin-bottom: 20px; }
.st-detail-title { font-family: var(--font-display); font-size: 34px; color: var(--ink-blue); line-height: 1.1; margin: 0; }
.st-detail-sub { font-family: var(--font-body); font-size: 15px; color: var(--sunset-rust); margin: 8px 0 0; }
.st-detail-dates { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); margin-top: 8px; }
.st-dates { display: flex; align-items: center; gap: 8px; }
.st-dates input { padding: 8px 10px; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.st-dates span { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); }
.st-detail-author { display: flex; align-items: center; gap: 8px; margin: 16px 0; font-family: var(--font-body); font-size: 13px; color: var(--light-ink); }
.st-author-link { background: none; border: none; color: var(--ink-blue); font-weight: 600; cursor: pointer; font-family: var(--font-body); font-size: 13px; padding: 0; }
.st-author-link:hover { text-decoration: underline; }
.st-react-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.st-dreact { font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--paper-white); color: var(--ink-blue); cursor: pointer; }
.st-dreact.on { background: var(--faded-coral); color: #fff; border-color: var(--faded-coral); }
.st-del { margin-left: auto; color: var(--stamp-burgundy); border-color: transparent; }
.st-actions { margin: 16px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.st-action { background: var(--ink-blue); color: #fff; border: none; border-radius: 999px; padding: 10px 18px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; }
.st-action:hover { background: var(--dark-ink); }
.st-detail-body { font-family: var(--font-secondary); font-size: 18px; line-height: 1.7; color: var(--dark-ink); margin: 22px 0; }
.st-detail-body p { margin: 0 0 16px; }
.st-detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.st-refs { background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px; margin-bottom: 22px; }
.st-ref { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-subtle); }
.st-ref:last-child { border-bottom: none; }
.st-ref-info { flex: 1; min-width: 0; }
.st-ref-name { font-family: var(--font-display); font-size: 16px; color: var(--ink-blue); }
.st-ref-meta { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.st-ref-save { background: none; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 13px; font-family: var(--font-body); font-size: 12px; color: var(--sunset-rust); cursor: pointer; }
.st-ref-save:hover { border-color: var(--sunset-rust); }
.st-comments { margin-top: 8px; }
.st-comment { display: flex; gap: 9px; padding: 9px 0; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); line-height: 1.5; }
.st-comment b { color: var(--ink-blue); }
.st-nocomment { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); padding: 6px 0; }
.st-comment-add { display: flex; gap: 8px; margin-top: 12px; }
.st-comment-add input { flex: 1; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 999px; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.st-comment-add input:focus { outline: none; border-color: var(--sunset-rust); }
.st-comment-add button { background: var(--ink-blue); color: #fff; border: none; border-radius: 999px; padding: 8px 18px; font-family: var(--font-body); font-size: 13px; cursor: pointer; }
/* Composer */
.st-composer { max-width: 620px; margin: 0 auto; }
.st-comp-h { font-family: var(--font-display); font-size: 26px; color: var(--ink-blue); margin: 0 0 20px; }
.st-typegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.st-typecard { text-align: left; background: var(--paper-white); border: 1.5px solid var(--border-subtle); border-radius: 12px; padding: 18px; cursor: pointer; transition: border-color .15s; }
.st-typecard:hover { border-color: var(--sunset-rust); }
.st-typecard-h { font-family: var(--font-display); font-size: 19px; color: var(--ink-blue); }
.st-typecard-d { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 5px; line-height: 1.4; }
.st-comp-typebadge { display: inline-block; font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--warm-sand); color: var(--ink-blue); padding: 4px 12px; border-radius: 999px; margin-bottom: 18px; font-weight: 600; }
.st-refsedit { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.st-refchip { font-family: var(--font-body); font-size: 12px; background: var(--warm-sand); color: var(--ink-blue); padding: 4px 6px 4px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.st-refchip button { background: none; border: none; color: var(--stamp-burgundy); cursor: pointer; font-size: 14px; line-height: 1; }
.st-refhint { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); }
.st-addref-btn { background: none; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 12px; font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); cursor: pointer; }
.st-addref-btn:hover { border-color: var(--sunset-rust); }
.st-comp-actions { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
@media (max-width: 640px) { .st-card { flex-direction: column; } .st-card-img { flex-basis: 160px; } .st-typegrid { grid-template-columns: 1fr; } }
/* Object picker */
.st-pick { max-width: 440px; width: 100%; text-align: left; }
.sm-title { font-family: var(--font-display); font-size: 22px; color: var(--ink-blue); margin: 0 0 16px; }
.st-pick-tabs { display: flex; gap: 7px; margin-bottom: 12px; }
.st-pick-tab { font-family: var(--font-body); font-size: 12px; color: var(--ink-blue); background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.st-pick-tab.on { background: var(--ink-blue); color: #fff; border-color: var(--ink-blue); }
.st-pick-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); margin-bottom: 10px; }
.st-pick-input:focus { outline: none; border-color: var(--sunset-rust); }
.st-pick-results { max-height: 340px; overflow-y: auto; }
.st-pick-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 9px 12px; margin-bottom: 6px; cursor: pointer; }
.st-pick-row:hover { border-color: var(--sunset-rust); }
.st-pick-name { font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); font-weight: 600; }
.st-pick-sub { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); }
.st-pick-add { margin-left: auto; font-family: var(--font-body); font-size: 11px; color: var(--sunset-rust); font-weight: 600; white-space: nowrap; }
.st-pick-empty { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); padding: 16px 4px; text-align: center; }
.st-pick-cityhead { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); padding: 4px 2px 10px; }
.st-pick-changecity { background: none; border: none; color: var(--light-ink); cursor: pointer; font-family: var(--font-body); font-size: 12px; }
.st-pick-changecity:hover { color: var(--ink-blue); }
/* Story cover upload */
.st-cover-up { display: flex; align-items: center; gap: 12px; }
.st-cover-prev { width: 96px; height: 64px; border-radius: 8px; background: var(--warm-sand) center/cover no-repeat; border: 1px dashed var(--border-subtle); flex: 0 0 auto; }
.st-cover-prev.has { border-style: solid; }
.st-cover-pick { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 9px 14px; cursor: pointer; }
.st-cover-pick:hover { border-color: var(--sunset-rust); }
.st-cover-rm { font-family: var(--font-body); font-size: 12px; color: var(--stamp-burgundy); background: none; border: none; cursor: pointer; }
/* Story gallery — composer thumbs */
.st-gallery-edit { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.st-gthumb { position: relative; width: 84px; height: 60px; border-radius: 7px; background: var(--warm-sand) center/cover no-repeat; border: 1px solid var(--border-subtle); }
.st-gthumb button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--stamp-burgundy); color: #fff; border: 2px solid var(--paper-white); font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
/* Story gallery — detail grid */
.st-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 0 0 24px; }
.st-gimg { height: 130px; border-radius: 10px; background: var(--warm-sand) center/cover no-repeat; border: none; cursor: pointer; transition: transform .12s; }
.st-gimg:hover { transform: scale(1.02); }
.st-lightbox { display: none; position: fixed; inset: 0; z-index: 17000; background: rgba(20,26,32,.9); align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.st-lightbox.open { display: flex; }
.st-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* ===== EXPLORE BY INTEREST ===== */
.int-wrap { max-width: 960px; margin: 0 auto; }
.int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.int-card { display: flex; flex-direction: column; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; cursor: pointer; padding: 0; text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
.int-card:hover { border-color: var(--sunset-rust); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(44,54,64,.1); }
.int-card-img { height: 116px; background: var(--warm-sand) center/cover no-repeat; }
.int-card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 4px; }
.int-label { font-family: var(--font-display); font-size: 19px; color: var(--ink-blue); line-height: 1.12; }
.int-blurb { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); line-height: 1.4; }
.int-count { font-family: var(--font-body); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--light-ink); margin-top: 2px; }
.int-detail { max-width: 960px; margin: 0 auto; }
.int-hero { position: relative; min-height: 260px; border-radius: 16px; overflow: hidden; background: var(--ink-blue) center/cover no-repeat; display: flex; align-items: flex-end; margin-bottom: 26px; }
.int-hero-overlay { padding: 28px 28px 26px; color: #fff; width: 100%; }
.int-hero-eyebrow { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.85); }
.int-hero-title { font-family: var(--font-display); font-size: 40px; color: #fff; margin: 6px 0 0; line-height: 1.05; }
.int-hero-blurb { font-family: var(--font-secondary, var(--font-body)); font-size: 17px; color: rgba(255,255,255,.92); margin: 8px 0 0; max-width: 560px; line-height: 1.45; }
.int-hero-meta { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,.8); margin-top: 12px; text-transform: uppercase; letter-spacing: .05em; }
.int-citygrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin-bottom: 26px; }
.int-citycard { text-align: left; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; cursor: pointer; padding: 0; transition: box-shadow .15s, transform .15s; }
.int-citycard:hover { box-shadow: 0 6px 18px rgba(44,54,64,.1); transform: translateY(-2px); }
.int-cityimg { height: 104px; background: var(--warm-sand) center/cover no-repeat; }
.int-cityname { font-family: var(--font-display); font-size: 16px; color: var(--ink-blue); padding: 9px 12px 0; }
.int-citysub { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); padding: 2px 12px 11px; }
.int-exprail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 26px; }
.int-expcard { flex: 0 0 180px; text-align: left; background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; cursor: pointer; padding: 0; }
.int-expcard:hover { border-color: var(--sunset-rust); }
.int-expimg { height: 110px; background: var(--warm-sand) center/cover no-repeat; }
.int-expname { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink-blue); padding: 9px 11px; line-height: 1.3; }
.int-collchips { display: flex; flex-wrap: wrap; gap: 8px; }
.int-collchip { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); background: var(--postcard-cream); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 7px 15px; cursor: pointer; }
.int-collchip:hover { border-color: var(--sunset-rust); color: var(--sunset-rust); }
.int-empty { text-align: center; color: var(--light-ink); font-family: var(--font-body); padding: 50px 0; }
/* Clickable city interest chips */
button.city-intel-chip.ci-interest { cursor: pointer; color: var(--ink-blue); }
button.city-intel-chip.ci-interest:hover { border-color: var(--sunset-rust); color: var(--sunset-rust); background: rgba(201,110,75,0.05); }

/* ── Guided product tour ── */
.tour-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 5000;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--paper-white); background: var(--sunset-rust, #C96E4B);
  border: none; border-radius: 999px; padding: 11px 18px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(124,63,63,.32);
  transition: transform .15s, box-shadow .15s, background .15s;
  animation: tourFabPulse 2.8s ease-in-out 1.5s 3;
}
.tour-fab:hover { transform: translateY(-2px); box-shadow: 0 9px 26px rgba(124,63,63,.42); background: var(--stamp-burgundy, #7C3F3F); }
.tour-fab .ico { flex: 0 0 auto; }
@keyframes tourFabPulse { 0%,100% { box-shadow: 0 6px 20px rgba(124,63,63,.32); } 50% { box-shadow: 0 6px 20px rgba(124,63,63,.32), 0 0 0 9px rgba(201,110,75,.18); } }
@media (max-width: 640px) { .tour-fab span { display: none; } .tour-fab { padding: 13px; right: 16px; bottom: 16px; } }

.tour-overlay { position: fixed; inset: 0; z-index: 6000; pointer-events: none; display: none; }
.tour-overlay.active { pointer-events: auto; display: block; }
/* The spotlight is a transparent box whose huge box-shadow dims everything else. */
.tour-spotlight {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(28,38,48,.62); outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 3px; transition: all .32s cubic-bezier(.22,.61,.36,1);
}
.tour-spotlight.center { box-shadow: 0 0 0 9999px rgba(28,38,48,.72); outline: none; }
.tour-tip {
  position: fixed; z-index: 6001; width: 308px; max-width: calc(100vw - 28px);
  background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(28,38,48,.3); padding: 18px 18px 14px;
  transition: top .32s cubic-bezier(.22,.61,.36,1), left .32s cubic-bezier(.22,.61,.36,1);
}
.tour-tip-kicker { font-family: var(--font-accent, cursive); font-size: 15px; color: var(--sunset-rust, #C96E4B); margin-bottom: 2px; }
.tour-tip-title { font-family: var(--font-display); font-size: 17px; color: var(--ink-blue); margin: 0 0 6px; line-height: 1.2; }
.tour-tip-body { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--light-ink); margin: 0 0 14px; }
.tour-tip-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-dots { display: flex; gap: 5px; flex-wrap: wrap; max-width: 130px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-subtle); }
.tour-dot.on { background: var(--sunset-rust, #C96E4B); }
.tour-tip-btns { display: flex; align-items: center; gap: 8px; }
.tour-btn { font-family: var(--font-body); font-size: 12px; font-weight: 700; border-radius: 8px; padding: 7px 14px; cursor: pointer; border: none; }
.tour-btn-next { color: var(--paper-white); background: var(--sunset-rust, #C96E4B); }
.tour-btn-next:hover { background: var(--stamp-burgundy, #7C3F3F); }
.tour-btn-back { color: var(--light-ink); background: transparent; border: 1px solid var(--border-subtle); }
.tour-btn-back:hover { color: var(--ink-blue); border-color: var(--ink-blue); }
.tour-skip { position: absolute; top: 12px; right: 14px; font-family: var(--font-body); font-size: 11px; color: var(--light-ink); background: none; border: none; cursor: pointer; }
.tour-skip:hover { color: var(--stamp-burgundy, #7C3F3F); }

/* ── World Sites (RFC-007) ── */
.header-btn.btn-worldsites.active { color: var(--stamp-burgundy); border-color: rgba(124,63,63,.34); background: rgba(124,63,63,.10); }

.ws-chipbar {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%); z-index: 110;
  display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto; max-width: calc(100vw - 32px);
  padding: 8px 10px; border-radius: 999px; background: var(--paper-white);
  border: 1px solid rgba(58,74,90,.2); box-shadow: 0 8px 26px rgba(44,54,64,.24); scrollbar-width: none;
}
.ws-chipbar::-webkit-scrollbar { display: none; }
.ws-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--ink-blue);
  background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 11px;
}
.ws-chip:hover { background: var(--warm-sand); }
.ws-chip.active { background: var(--ink-blue); color: var(--paper-white); border-color: var(--ink-blue); }
.ws-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ws-chip-n { font-size: 9px; font-weight: 800; opacity: .7; }
.ws-chip.active .ws-chip-n { opacity: .85; }
@media (max-width: 720px) { .ws-chipbar { top: auto; bottom: 84px; } }

.ws-overlay { position: fixed; inset: 0; z-index: 14000; display: flex; align-items: center; justify-content: center;
  background: rgba(28,38,48,.55); backdrop-filter: blur(4px); padding: 24px; }
.ws-modal { position: relative; width: min(880px, 100%); max-height: 90vh; overflow-y: auto; border-radius: 24px;
  background: var(--paper-white); box-shadow: 0 30px 90px rgba(28,38,48,.4); }
.ws-close { position: absolute; top: 14px; right: 16px; z-index: 20; width: 38px; height: 38px; border-radius: 50%;
  border: none; background: rgba(251,248,241,.94); color: var(--ink-blue); font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(58,74,90,.28); display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.ws-close:hover { background: var(--paper-white); color: var(--stamp-burgundy); }
.ws-modal-loading { padding: 80px 24px; text-align: center; color: var(--light-ink); font-family: var(--font-body); }
.ws-hero { position: relative; min-height: 320px; background-size: cover; background-position: center;
  background-color: var(--warm-sand); border-radius: 24px 24px 0 0; display: flex; align-items: flex-end; padding: 30px; }
.ws-hero-overlay { position: absolute; inset: 0; border-radius: 24px 24px 0 0; background: linear-gradient(to top, rgba(28,38,48,.84), rgba(28,38,48,.05) 64%); }
.ws-hero-copy { position: relative; z-index: 2; color: var(--paper-white); }
.ws-kicker { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.ws-title { font-family: var(--font-display); font-size: clamp(34px, 5vw, 54px); line-height: .95; color: var(--paper-white); margin: 0; }
.ws-loc { font-family: var(--font-body); font-size: 13px; color: rgba(246,241,230,.86); margin-top: 8px; text-transform: capitalize; }
.ws-detail-body { padding: 24px 30px 30px; }
.ws-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.ws-act { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .03em; cursor: pointer;
  border-radius: 999px; padding: 10px 16px; border: 1px solid rgba(201,110,75,.34); background: rgba(201,110,75,.08); color: var(--stamp-burgundy); }
.ws-act:hover { background: rgba(201,110,75,.16); }
.ws-act.ws-act-save { background: var(--sunset-rust, #C96E4B); color: var(--paper-white); border-color: var(--sunset-rust, #C96E4B); }
.ws-act.on { background: var(--sage-green); border-color: var(--sage-green); color: var(--paper-white); }
.ws-why h3 { font-family: var(--font-display); font-size: 22px; color: var(--ink-blue); margin: 0 0 8px; }
.ws-why p { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--light-ink); margin: 0 0 22px; }
.ws-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ws-fact { border-radius: 14px; background: var(--warm-sand); border: 1px solid var(--border-subtle); padding: 14px 16px; }
.ws-fact b { display: block; color: var(--sunset-rust, #C96E4B); font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.ws-fact span { font-family: var(--font-body); font-size: 14px; color: var(--ink-blue); line-height: 1.4; text-transform: capitalize; }
.trip-picker-empty { font-family: var(--font-body); font-size: 13px; color: var(--light-ink); padding: 10px 4px; text-align: center; }
@media (max-width: 600px) { .ws-facts { grid-template-columns: 1fr; } .ws-hero { min-height: 240px; padding: 20px; } .ws-detail-body { padding: 20px; } }

/* World Sites — legend, interest chips, clickable country */
.ws-legend {
  position: fixed; left: 20px; bottom: 24px; z-index: 90; width: 208px;
  background: var(--paper-white); border: 1px solid rgba(58,74,90,.18);
  border-radius: 18px; padding: 14px 14px 10px; box-shadow: 0 12px 34px rgba(44,54,64,.2);
}
.ws-legend-title { font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--light-ink); margin-bottom: 8px; }
.ws-legend-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-blue); background: none; border: none;
  padding: 5px 6px; border-radius: 8px; }
.ws-legend-row:hover { background: rgba(58,74,90,.06); }
.ws-legend-row.active { background: var(--ink-blue); color: var(--paper-white); }
.ws-legend-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
@media (max-width: 720px) { .ws-legend { display: none !important; } }

.ws-loc-country { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(246,241,230,.5); }
.ws-loc-country:hover { text-decoration-color: var(--paper-white); }
.ws-loc-sub { text-transform: capitalize; }
.ws-link { font: inherit; color: var(--stamp-burgundy); background: none; border: none; padding: 0; cursor: pointer; text-align: left; text-transform: capitalize; }
.ws-link:hover { text-decoration: underline; }
.ws-interests-block { margin: 0 0 22px; }
.ws-interests-label { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sunset-rust, #C96E4B); margin-bottom: 9px; }
.ws-interests { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-interest-chip { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-blue);
  background: var(--warm-sand); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 13px; cursor: pointer; text-transform: capitalize; }
.ws-interest-chip:hover { border-color: var(--sunset-rust, #C96E4B); color: var(--sunset-rust, #C96E4B); }
.ws-interest-chip.static { cursor: default; opacity: .85; }
.ws-interest-chip.static:hover { border-color: var(--border-subtle); color: var(--ink-blue); }
.cm-site-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.ws-legend-all { font-weight: 800; }
.ws-legend-alldot { background: conic-gradient(#8F9D82, #3A4A5A, #C96E4B, #7C3F3F, #D48A7A, #AFC6CF, #8F9D82); }

/* ── World Sites browse page ── */
.wsb-globe-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 12px; font-weight: 700;
  color: var(--paper-white); background: var(--sunset-rust, #C96E4B); border: none; border-radius: 999px; padding: 9px 15px; cursor: pointer; white-space: nowrap; }
.wsb-globe-btn:hover { background: var(--stamp-burgundy, #7C3F3F); }
.wsb-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 28px 14px; }
.wsb-chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: var(--font-body); font-size: 11px;
  font-weight: 700; letter-spacing: .03em; color: var(--ink-blue); background: var(--paper-white); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 7px 12px; }
.wsb-chip:hover { background: var(--warm-sand); }
.wsb-chip.active { background: var(--ink-blue); color: var(--paper-white); border-color: var(--ink-blue); }
.wsb-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.wsb-chip-n { font-size: 9px; font-weight: 800; opacity: .7; }
.wsb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 20px; padding: 0 28px 40px; }
.wsb-card { text-align: left; cursor: pointer; border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden;
  background: var(--paper-white); box-shadow: 0 10px 30px rgba(58,74,90,.08); transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; }
.wsb-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(58,74,90,.16); }
.wsb-card-img { height: 158px; background: var(--warm-sand) center/cover no-repeat; }
.wsb-card-body { padding: 15px 16px 18px; }
.wsb-card-type { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px; }
.wsb-card-name { font-family: var(--font-display); font-size: 19px; line-height: 1.1; color: var(--ink-blue); margin-bottom: 3px; }
.wsb-card-loc { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-bottom: 8px; }
.wsb-card-sum { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--light-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .wsb-chips { padding: 4px 16px 12px; } .wsb-grid { padding: 0 16px 32px; grid-template-columns: 1fr 1fr; gap: 12px; } }
.ws-legend-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ws-legend-head .ws-legend-title { margin-bottom: 0; }
.ws-legend-exit { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-subtle); background: var(--warm-sand);
  color: var(--ink-blue); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ws-legend-exit:hover { background: var(--stamp-burgundy); color: var(--paper-white); border-color: var(--stamp-burgundy); }

/* ── Travel Signature ── */
.account-item.account-signature { color: var(--stamp-burgundy); font-weight: 700; }
.sig-wrap { max-width: 1080px; margin: 0 auto; padding: 8px 28px 48px; }
.sig-head { margin-bottom: 26px; }
.sig-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sunset-rust, #C96E4B); margin-bottom: 8px; }
.sig-headline { font-family: var(--font-display); font-size: clamp(26px, 4vw, 44px); line-height: 1.04; color: var(--ink-blue); margin: 0 0 14px; max-width: 760px; }
.sig-descs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sig-desc { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-blue); background: var(--warm-sand); border-radius: 999px; padding: 6px 12px; }
.sig-refresh { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--ink-blue); background: var(--paper-white); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.sig-refresh:hover { border-color: var(--ink-blue); }
.sig-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 34px; margin-bottom: 38px; }
.sig-row.has-why { cursor: pointer; }
.sig-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sig-label { font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-blue); }
.sig-pct { font-family: var(--font-display); font-size: 15px; color: var(--light-ink); }
.sig-bar { height: 11px; border-radius: 999px; background: rgba(58,74,90,.10); overflow: hidden; }
.sig-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--faded-coral, #D48A7A), var(--sage-green, #8F9D82)); transition: width .6s cubic-bezier(.22,.61,.36,1); }
.sig-why { display: none; font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 5px; font-style: italic; }
.sig-row.open .sig-why { display: block; }
.sig-rec-section { border-top: 1px dashed var(--border-subtle); padding-top: 24px; }
.sig-needs { font-family: var(--font-body); font-size: 14px; color: var(--light-ink); line-height: 1.6; max-width: 560px; }
.sig-rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 18px; margin-top: 16px; }
.sig-rec-card { text-align: left; cursor: pointer; border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden; background: var(--paper-white); box-shadow: 0 10px 28px rgba(58,74,90,.08); transition: transform .18s, box-shadow .18s; }
.sig-rec-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(58,74,90,.16); }
.sig-rec-img { position: relative; height: 144px; background: var(--warm-sand) center/cover no-repeat; }
.sig-rec-fit { position: absolute; top: 10px; left: 10px; font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--paper-white); background: rgba(44,54,64,.82); border-radius: 999px; padding: 4px 9px; }
.sig-rec-body { padding: 13px 15px 16px; }
.sig-rec-kind { font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sunset-rust, #C96E4B); margin-bottom: 5px; }
.sig-rec-name { font-family: var(--font-display); font-size: 18px; line-height: 1.1; color: var(--ink-blue); }
.sig-rec-sub { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin-top: 2px; }
.sig-rec-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.sig-rec-pill { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .03em; color: var(--ink-blue); background: rgba(143,157,130,.16); border: 1px solid rgba(143,157,130,.3); border-radius: 999px; padding: 3px 8px; }
@media (max-width: 640px) { .sig-wrap { padding: 8px 16px 40px; } .sig-bars { grid-template-columns: 1fr; gap: 12px; } .sig-rec-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }
.sig-foryou-cta { font-family: var(--font-body); font-size: 14px; font-weight: 800; color: var(--paper-white); background: var(--sunset-rust, #C96E4B); border: none; border-radius: 999px; padding: 13px 22px; cursor: pointer; }
.sig-foryou-cta:hover { background: var(--stamp-burgundy, #7C3F3F); }
.fy-section { margin-bottom: 30px; }
.fy-because { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 8px; line-height: 1.4; }
.fy-because b { color: var(--ink-blue); font-weight: 700; }
.sig-empty-copy { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--light-ink); max-width: 600px; margin: 4px 0 18px; }

/* ── Travel Match ── */
.tv-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tv-match-card { border: 1px solid var(--border-subtle); border-radius: 18px; background: var(--paper-white); padding: 18px; box-shadow: 0 10px 28px rgba(58,74,90,.08); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tv-match-card:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(58,74,90,.15); }
.tv-match-head { display: flex; align-items: center; gap: 12px; }
.tv-match-head .tv-feed-face { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--warm-sand); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.tv-match-head .tv-feed-face img { width: 100%; height: 100%; object-fit: cover; }
.tv-match-id { flex: 1; min-width: 0; }
.tv-match-name { font-family: var(--font-display); font-size: 19px; color: var(--ink-blue); line-height: 1.1; }
.tv-match-dna { font-family: var(--font-body); font-size: 11px; color: var(--sunset-rust, #C96E4B); font-weight: 700; margin-top: 2px; }
.tv-match-loc { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); margin-top: 2px; }
.tv-match-score { flex: 0 0 auto; text-align: center; font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--sage-green, #8F9D82); font-weight: 700; }
.tv-match-score span { display: block; font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--light-ink); margin-top: 2px; }
.tv-match-sum { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--light-ink); margin: 12px 0 0; }
.tv-match-shared { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.tv-match-shared-lbl { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--light-ink); margin-right: 2px; }
.tv-match-pill { font-family: var(--font-body); font-size: 10px; font-weight: 700; color: var(--ink-blue); background: rgba(143,157,130,.16); border: 1px solid rgba(143,157,130,.3); border-radius: 999px; padding: 4px 9px; }
.tv-match-actions { margin-top: 14px; }
.tv-match-view { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--paper-white); background: var(--ink-blue); border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.tv-match-view:hover { background: var(--stamp-burgundy, #7C3F3F); }
.tv-hero-match { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--paper-white); background: var(--sage-green, #8F9D82); border-radius: 999px; padding: 6px 14px; margin: 8px 0 2px; }
.tv-hero-match-sh { font-weight: 600; opacity: .92; }
.insp-card-fit { position: absolute; top: 10px; right: 44px; font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .03em; color: var(--paper-white); background: var(--sage-green, #8F9D82); border-radius: 999px; padding: 3px 8px; box-shadow: 0 2px 8px rgba(44,54,64,.25); }
.insp-card-match { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--sage-green, #8F9D82); margin: 2px 0 6px; }

/* ── Notifications + Sharing ── */
.btn-notif { position: relative; }
.notif-badge { position: absolute; top: -4px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--sunset-rust, #C96E4B); color: var(--paper-white); font-family: var(--font-body); font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(124,63,63,.4); }
.notif-wrap { max-width: 760px; margin: 0 auto; padding: 6px 24px 40px; }
.notif-row { display: flex; gap: 13px; padding: 16px; border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--paper-white);
  margin-bottom: 12px; cursor: pointer; transition: box-shadow .15s; }
.notif-row:hover { box-shadow: 0 10px 26px rgba(58,74,90,.12); }
.notif-row.unread { background: rgba(201,110,75,.06); border-color: rgba(201,110,75,.25); }
.notif-face { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; overflow: hidden; background: var(--warm-sand); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.notif-face img { width: 100%; height: 100%; object-fit: cover; }
.notif-main { flex: 1; min-width: 0; }
.notif-text { font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); }
.notif-obj { font-family: var(--font-display); font-size: 17px; color: var(--ink-blue); margin-top: 3px; }
.notif-sub { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); font-weight: 400; }
.notif-note { font-family: var(--font-secondary, var(--font-body)); font-style: italic; font-size: 13px; color: var(--light-ink); margin-top: 6px; }
.notif-actions { margin-top: 10px; }
.notif-open { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--paper-white); background: var(--sunset-rust, #C96E4B); border: none; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.notif-open:hover { background: var(--stamp-burgundy, #7C3F3F); }

.share-modal-overlay { display: none; position: fixed; inset: 0; z-index: 16800; background: rgba(28,38,48,.55); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 22px; }
.share-modal-overlay.open { display: flex; }
.share-modal { position: relative; width: min(440px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: var(--paper-white); border-radius: 20px; box-shadow: 0 30px 90px rgba(28,38,48,.4); padding: 24px; }
.share-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--warm-sand); color: var(--ink-blue); font-size: 20px; line-height: 1; cursor: pointer; }
.share-eyebrow { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sunset-rust, #C96E4B); }
.share-head h3 { font-family: var(--font-display); font-size: 22px; color: var(--ink-blue); margin: 4px 0 0; }
.share-objsub { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); margin: 2px 0 0; }
.share-note { width: 100%; margin: 14px 0 10px; min-height: 56px; resize: vertical; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 12px; }
.share-search { width: 100%; font-family: var(--font-body); font-size: 13px; color: var(--ink-blue); background: #fff; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 10px 12px; }
.share-list { margin-top: 10px; overflow-y: auto; flex: 1; }
.share-loading { font-family: var(--font-body); font-size: 12px; color: var(--light-ink); padding: 14px 4px; text-align: center; }
.share-rec { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-bottom: 1px solid var(--border-subtle); }
.share-rec-face { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--warm-sand); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.share-rec-face img { width: 100%; height: 100%; object-fit: cover; }
.share-rec-id { flex: 1; min-width: 0; }
.share-rec-name { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink-blue); }
.share-rec-loc { font-family: var(--font-body); font-size: 11px; color: var(--light-ink); }
.share-rec-send { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--paper-white); background: var(--ink-blue); border: none; border-radius: 999px; padding: 7px 15px; cursor: pointer; flex: 0 0 auto; }
.share-rec-send:hover { background: var(--stamp-burgundy, #7C3F3F); }
.share-rec-send.sent { background: var(--sage-green, #8F9D82); }
.share-flabel { font-family: var(--font-body); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-blue); margin: 14px 0 6px; }
.share-flabel span { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--light-ink); }
.coll-sortchip.on { background: var(--sage-green, #8F9D82); color: var(--paper-white); border-color: var(--sage-green, #8F9D82); }
.coll-fsep { display: inline-block; width: 1px; height: 18px; background: var(--border-subtle); margin: 0 4px; vertical-align: middle; }
.coll-card-fit { position: absolute; top: 10px; right: 10px; font-family: var(--font-body); font-size: 10px; font-weight: 800; color: var(--paper-white); background: var(--sage-green, #8F9D82); border-radius: 999px; padding: 3px 8px; box-shadow: 0 2px 8px rgba(44,54,64,.25); }
.coll-card-match { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--sage-green, #8F9D82); margin: 4px 0 0; }
.passport-globe-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 28px); margin: 4px 14px 10px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--ink-blue); background: var(--paper-white);
  border: 1px solid var(--border-subtle); border-radius: 999px; padding: 10px 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.passport-globe-toggle:hover { background: var(--warm-sand); }
.passport-globe-toggle.on { background: var(--stamp-burgundy, #7C3F3F); color: var(--paper-white); border-color: var(--stamp-burgundy, #7C3F3F); }

/* ════════════ MOBILE BOTTOM NAV (≤720px) ════════════ */
.mobile-tabbar { display: none; }
.mobile-more-sheet { display: none; position: fixed; inset: 0; z-index: 15900; background: rgba(28,38,48,.45); align-items: flex-end; }
.mobile-more-sheet.open { display: flex; }
.mms-panel { width: 100%; background: var(--paper-white); border-radius: 22px 22px 0 0; padding: 8px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 44px rgba(28,38,48,.32); }
.mms-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--border-subtle); margin: 4px auto 12px; }
.mms-title { font-family: var(--font-display); font-size: 19px; color: var(--ink-blue); margin-bottom: 12px; }
.mms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mms-item { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--ink-blue); background: var(--warm-sand); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 18px 8px; cursor: pointer; text-align: center; line-height: 1.25; }
.mms-item:active { background: var(--sunset-rust, #C96E4B); color: var(--paper-white); border-color: var(--sunset-rust, #C96E4B); }

@media (max-width: 720px) {
  .mobile-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15800;
    background: var(--paper-white); border-top: 1px solid var(--border-subtle); box-shadow: 0 -4px 22px rgba(44,54,64,.12);
    padding: 6px 2px calc(5px + env(safe-area-inset-bottom)); justify-content: space-around;
  }
  .mtab { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 0; background: none; border: none;
    color: var(--light-ink); font-family: var(--font-body); font-size: 9.5px; font-weight: 700; letter-spacing: .01em; cursor: pointer; padding: 3px 2px; }
  .mtab svg { color: var(--light-ink); }
  .mtab:active, .mtab:active svg { color: var(--sunset-rust, #C96E4B); }

  /* Slim header: just logo + search (everything else lives in the tab bar / More) */
  header { flex-direction: row !important; align-items: center !important; padding: 9px 14px !important; }
  .header-actions { flex: 1; justify-content: flex-end !important; gap: 6px; flex-wrap: nowrap; row-gap: 0; }
  .header-actions .header-btn,
  .header-actions .header-divider,
  .header-actions .file-controls,
  .header-actions .account-wrap { display: none !important; }
  .header-actions .city-search-wrap { display: flex; flex: 1; min-width: 0; max-width: none; }

  /* Keep content clear of the tab bar */
  .insp-feed { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  .city-card-body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ws-modal { max-height: calc(90vh - 74px); }
  .ws-legend { bottom: calc(78px + env(safe-area-inset-bottom)); }
  .tour-fab { bottom: calc(78px + env(safe-area-inset-bottom)); right: 14px; }
}

/* ════════════ MOBILE PHASE 2 — sheets & full-screen details (≤720px) ════════════ */
@media (max-width: 720px) {
  /* Action modals → bottom sheets (these sit above the tab bar) */
  .share-modal-overlay, .stamp-modal-overlay, .obj-detail-overlay { align-items: flex-end; padding: 0; }
  .share-modal, .stamp-modal, .obj-detail-card {
    width: 100% !important; max-width: none !important; max-height: 92vh; border-radius: 20px 20px 0 0;
    animation: pmSheetUp .26s cubic-bezier(.22,.61,.36,1);
  }
  .obj-detail-card { overflow-y: auto; }
  .share-modal { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  @keyframes pmSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* Primary detail views → full-screen, raised above the bottom tab bar */
  .city-card-overlay, .ws-overlay { z-index: 15850; padding: 0; align-items: stretch; }
  .city-card, .ws-modal {
    width: 100% !important; max-width: none !important; height: 100vh; max-height: 100vh; border-radius: 0;
  }
  .city-card-body, .ws-detail-body { padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important; }

  /* Tighten grids for phone widths */
  .coll-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .sig-bars { grid-template-columns: 1fr; }
  .ws-facts, .fact-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobile nav robustness + slim header */
.mtab, .mms-item { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (max-width: 720px) {
  header { position: relative; z-index: 200; }
  header .title-block { display: none !important; }   /* logo + search are enough on phones */
  .header-logo-img { width: 26px; height: auto; }
  .logo-title { flex: 0 0 auto; }
}

/* ── Invite friends ── */
.btn-invite { background: var(--sunset-rust, #C96E4B); color: var(--paper-white); border-color: var(--sunset-rust, #C96E4B); font-weight: 800; }
.btn-invite:hover { background: var(--stamp-burgundy, #7C3F3F); border-color: var(--stamp-burgundy, #7C3F3F); }
.btn-invite .ico { color: var(--paper-white); }
.invite-native { width: 100%; font-family: var(--font-body); font-size: 14px; font-weight: 800; color: var(--paper-white); background: var(--ink-blue); border: none; border-radius: 12px; padding: 13px; cursor: pointer; margin: 14px 0 6px; }
.invite-native:hover { background: var(--stamp-burgundy, #7C3F3F); }
.invite-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.invite-item { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--ink-blue); background: var(--warm-sand); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 16px 8px; cursor: pointer; text-align: center; }
.invite-item:hover, .invite-item:active { background: var(--sunset-rust, #C96E4B); color: var(--paper-white); border-color: var(--sunset-rust, #C96E4B); }
.invite-linkrow { display: flex; gap: 8px; margin-top: 8px; }
.invite-linkrow .share-search { flex: 1; min-width: 0; }
.invite-copy { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: var(--paper-white); background: var(--sage-green, #8F9D82); border: none; border-radius: 10px; padding: 0 16px; cursor: pointer; white-space: nowrap; }
.invite-copy:hover { background: var(--ink-blue); }
@media (max-width: 720px) { .header-actions .btn-invite { display: inline-flex !important; flex: 0 0 auto; padding: 8px 12px; } }