@font-face {
    font-family: 'NumOverride';
    src: local('Helvetica Neue'), local('HelveticaNeue'),
         local('Helvetica'), local('Arial');
    font-weight: 100 500;
    font-style: normal;
    /* digits, period, comma, colon, semicolon, hyphen, slash, parens,
       plus, equals, percent, no-break space, currency (£ ¤ ¥ €),
       middle dot ·, en/em dash – —, ellipsis … */
    unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+003B,
                   U+002D, U+002F, U+0028-0029, U+002B, U+003D,
                   U+0025, U+00A0, U+00A3-00A5, U+20AC,
                   U+00B7, U+2013-2014, U+2026;
  }
  @font-face {
    font-family: 'NumOverride';
    src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'),
         local('Helvetica Bold'), local('Helvetica-Bold'),
         local('Arial Bold'), local('Arial-BoldMT');
    font-weight: 600 900;
    font-style: normal;
    unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+003B,
                   U+002D, U+002F, U+0028-0029, U+002B, U+003D,
                   U+0025, U+00A0, U+00A3-00A5, U+20AC,
                   U+00B7, U+2013-2014, U+2026;
  }
  @font-face {
    font-family: 'NumOverride';
    src: local('Helvetica Neue Italic'), local('HelveticaNeue-Italic'),
         local('Helvetica Oblique'), local('Helvetica-Oblique'),
         local('Arial Italic'), local('Arial-ItalicMT');
    font-weight: 100 500;
    font-style: italic;
    unicode-range: U+0030-0039, U+002E, U+002C, U+003A, U+003B,
                   U+002D, U+002F, U+0028-0029, U+002B, U+003D,
                   U+0025, U+00A0, U+00A3-00A5, U+20AC,
                   U+00B7, U+2013-2014, U+2026;
  }
  :root {
    /* Topnav height (incl. safe-area on iOS PWA) — used by sticky elements below */
    --topnav-h: calc(52px + env(safe-area-inset-top, 0px));
    --paper:      #f7f1e8;
    --paper-2:    #f1e9da;
    --cream:      #fdfaf3;
    --sand:       #ebe1cd;
    --ink:        #2a2520;
    --ink-2:      #4a4339;
    --mute:       #8a7f70;
    --mute-2:     #a99e8c;
    --line:       #e3d9c5;
    --line-soft:  #f0e8d8;
    --terra:      #b56b4a;
    --terra-deep: #964e34;
    --sage:       #7a8870;
    --sage-deep:  #5e6b56;
    --sage-soft:  #c2cdb8;
    --ink-3:      #6a6253;
    --deep:       #3a4f5e;
    --deep-2:     #2c3d49;
    --gold:       #b08d5b;
    --rust:       #964a3e;
    --shadow:     0 1px 3px rgba(42, 37, 32, 0.04), 0 1px 2px rgba(42, 37, 32, 0.06);
    --shadow-lg:  0 4px 16px rgba(42, 37, 32, 0.08);
    --radius:     6px;
    --radius-lg:  10px;
    --serif:      'NumOverride', 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans:       'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;

    /* Aliases for legacy class names — mapped to refined palette */
    --sunset:     var(--terra);
    --ocean:      var(--deep);
    --turquoise:  var(--sage);
    --leaf:       var(--sage);
    --warn:       var(--rust);
    --ink-soft:   var(--ink-2);

    /* ===== MOTION SYSTEM ===== */
    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);   /* smooth deceleration */
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot */
    --ease-snap:    cubic-bezier(0.4, 0, 0.2, 1);     /* material standard */
    --ease-emph:    cubic-bezier(0.2, 0, 0, 1);       /* emphasized in */
    --dur-tap:      120ms;
    --dur-fast:     180ms;
    --dur-base:     260ms;
    --dur-slow:     420ms;
  }

  /* Reduced motion — respect user preference */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ===================== DARK MODE ===================== */
  [data-theme="dark"] {
    --paper:      #181613;
    --paper-2:    #221f1a;
    --cream:      #25221c;
    --surface:    #25221c;
    --sand:       #322d25;
    --ink:        #f0e8d8;
    --ink-2:      #d4cab8;
    --mute:       #968b78;
    --mute-2:     #7a7062;
    --line:       #322d25;
    --line-soft:  #2a2620;
    --terra:      #d18260;
    --terra-deep: #b56b4a;
    --sage:       #8fa087;
    --sage-deep:  #748168;
    --sage-soft:  #3d4a39;
    --ink-3:      #8a8175;
    --deep:       #6d92a8;
    --deep-2:     #4a7588;
    --gold:       #c4a472;
    --rust:       #b65c4d;
    --shadow:     0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.5);
  }
  [data-theme="dark"] body {
    -webkit-tap-highlight-color: rgba(209, 130, 96, 0.18);
  }
  /* Hero — darker gradient */
  [data-theme="dark"] header.hero {
    background:
      radial-gradient(ellipse at 30% 0%, rgba(180, 130, 90, 0.22) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 100%, rgba(40, 60, 75, 0.4) 0%, transparent 60%),
      linear-gradient(170deg, #2a2520 0%, #1d1a16 50%, #14110e 100%);
    color: #f0e8d8;
  }
  [data-theme="dark"] header.hero h1 { color: #fdfaf3; }
  [data-theme="dark"] header.hero .meta-item .num { color: #fdfaf3; }
  /* Nav backdrop */
  [data-theme="dark"] nav.topnav {
    background: rgba(24, 22, 19, 0.88);
    border-bottom-color: var(--line);
  }
  [data-theme="dark"] nav.topnav .links a {
    color: var(--ink-2);
  }
  [data-theme="dark"] nav.topnav .links a:hover,
  [data-theme="dark"] nav.topnav .links a:active {
    color: var(--terra);
  }
  /* Trip banner inside-header overlay */
  [data-theme="dark"] .leaflet-container,
  [data-theme="dark"] .leaflet-popup-content-wrapper,
  [data-theme="dark"] .leaflet-popup-tip {
    background: var(--cream);
    color: var(--ink);
  }
  [data-theme="dark"] .leaflet-popup-content-wrapper {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  }
  /* Alert backgrounds — boost the tint so they read on dark surfaces */
  [data-theme="dark"] .alert.warn { background: rgba(182, 92, 77, 0.10); }
  [data-theme="dark"] .alert.tip,
  [data-theme="dark"] .alert.info { background: rgba(109, 146, 168, 0.10); }
  /* Inputs / selects */
  [data-theme="dark"] input,
  [data-theme="dark"] select,
  [data-theme="dark"] textarea {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--line);
  }
  [data-theme="dark"] input::placeholder,
  [data-theme="dark"] textarea::placeholder { color: var(--mute-2); }
  /* Day-nav pills, FAB and other surfaces that hardcode cream/paper */
  [data-theme="dark"] .day-nav .dn-pill { background: var(--cream); border-color: var(--line); }
  [data-theme="dark"] .day-nav .dn-pill.is-today {
    background: var(--terra); border-color: var(--terra-deep); color: #fff;
  }
  [data-theme="dark"] .day-nav .dn-pill.is-today .dn-day,
  [data-theme="dark"] .day-nav .dn-pill.is-today .dn-mon { color: #fff; }
  /* Identity / welcome modal cards */
  [data-theme="dark"] .modal-card { background: var(--cream); color: var(--ink); }
  [data-theme="dark"] .identity-modal { background: rgba(0, 0, 0, 0.7); }
  /* Cost summary cells and other gradients that hardcoded #f5e3d4 */
  [data-theme="dark"] .balance-card { background: linear-gradient(165deg, var(--cream) 0%, var(--paper-2) 100%); }
  /* Cash-status cards: hardcoded light gradients break in dark mode → restate */
  [data-theme="dark"] .cash-status .cs-cell.thorsten {
    background: linear-gradient(165deg, var(--cream) 0%, rgba(209, 130, 96, 0.18) 100%);
    border-color: var(--terra);
  }
  [data-theme="dark"] .cash-status .cs-cell.patricia {
    background: linear-gradient(165deg, var(--cream) 0%, rgba(143, 160, 135, 0.20) 100%);
    border-color: var(--sage-deep);
  }
  [data-theme="dark"] .cash-status .cs-cell.total {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  [data-theme="dark"] .cash-status .cs-cell.total .lbl,
  [data-theme="dark"] .cash-status .cs-cell.total .sub { color: rgba(40, 35, 30, 0.65); }
  [data-theme="dark"] .cash-status .cs-cell.total .val { color: var(--paper); }
  /* Sync-cards: also have hard-coded light gradients */
  [data-theme="dark"] .sync-card[style*="linear-gradient"] {
    background: linear-gradient(165deg, var(--cream) 0%, var(--paper-2) 100%) !important;
  }
  /* Cost-summary total cell — paper-2 adapts but ensure terra readable */
  [data-theme="dark"] .cost-summary .cs-cell.total .label { color: var(--ink); }
  [data-theme="dark"] .cost-summary .cs-cell.total .amt { color: var(--terra); }
  /* Cost-list subtotal — paper-2 background, ensure text readable */
  [data-theme="dark"] .cost-list .cl-row.subtotal { background: var(--paper-2); }
  [data-theme="dark"] .cost-list .cl-row.subtotal .cl-amt { color: var(--terra); }
  [data-theme="dark"] .gallery-section .item .gi-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.4) 70%, transparent);
  }
  /* Lock overlay over locked sections */
  [data-theme="dark"] .lock-overlay { background: rgba(0, 0, 0, 0.6); }
  /* Toast */
  [data-theme="dark"] .toast { background: var(--cream); color: var(--ink); border-color: var(--line); }

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

  html { scroll-behavior: smooth; }
  html { color-scheme: light dark; }

  body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink-2);
    line-height: 1.65;
    font-size: 16px;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(181, 107, 74, 0.12);
    overflow-x: hidden;
    font-feature-settings: "ss01", "cv11";
  }
  /* Tabular numerals for all numeric display elements */
  .num-display, .meta-item .num, .bc-amount, .cl-amt, .cs-cell .amt,
  .card.lodging .price, .leaflet-tooltip.price-label, .ti-date,
  .cat-chip .count, .progress-label .pct, .rate-cell, .dn-day,
  .st-value, .stat-num, .booking-count, .balance-amount {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
  h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  /* ================ NAVIGATION ================ */
  nav.topnav {
    position: sticky; top: 0; z-index: 1080;
    background: rgba(247, 241, 232, 0.92);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
    padding: 12px 0 10px;
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  nav.topnav .brand {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 0.2px;
    color: var(--ink);
    display: flex; align-items: center; gap: 10px;
    padding: 0 18px 10px;
  }
  nav.topnav .brand::before {
    content: ""; width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--terra);
    flex-shrink: 0;
  }
  nav.topnav .links {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 0 14px;
    scrollbar-width: none;
  }
  nav.topnav .links::-webkit-scrollbar { display: none; }
  /* Icon-cluster on the right (theme · search · help · burger) */
  nav.topnav .nav-icons {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 14px;
    flex-shrink: 0;
  }
  nav.topnav .nav-icons > * {
    margin-left: 0 !important;
  }
  nav.topnav .nav-icons button,
  nav.topnav .nav-icons a {
    width: 40px !important;
    height: 40px !important;
  }
  nav.topnav .nav-icons svg {
    width: 18px;
    height: 18px;
  }
  /* Pill spacing — slightly more breathing room */
  nav.topnav .links .heute-pill {
    margin-right: 8px;
  }
  nav.topnav .links .heute-pill:first-of-type { margin-left: 0; }
  nav.topnav .links a {
    text-decoration: none;
    color: var(--mute);
    font-weight: 500;
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    transition: color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    border: none;
    background: transparent;
  }
  nav.topnav .links a:active,
  nav.topnav .links a:hover {
    color: var(--terra);
    background: transparent;
  }
  /* SOS pill — pinned right of nav.topnav, always visible regardless of nav-links scroll.
     Works in BOTH layouts: stacked block (mobile) and flex-row (≥768px) — see media query below. */
  nav.topnav > .nav-sos {
    background: #b94a3a;
    color: #fff;
    border: 1px solid #b94a3a;
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    box-shadow: 0 1px 4px rgba(185,74,58,.35);
    flex-shrink: 0;
    align-self: center;
    z-index: 5;
    /* Mobile stacked layout (default): pin top-right via absolute */
    position: absolute;
    top: calc(12px + env(safe-area-inset-top));
    right: 14px;
  }
  nav.topnav { position: sticky; }  /* already sticky, but ensure position context for absolute SOS */
  nav.topnav > .nav-sos:hover {
    background: #a13e30;
    border-color: #a13e30;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(185,74,58,.5);
  }
  @media (min-width: 768px) {
    nav.topnav {
      padding: 18px 90px 18px 40px;  /* extra right padding reserves space for absolute-positioned SOS pill */
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    nav.topnav .brand { padding: 0; font-size: 19px; }
    nav.topnav .links { padding: 0; overflow-x: auto; scrollbar-width: none; gap: 4px; }
    nav.topnav .links a { padding: 6px 12px; font-size: 11px; }
    nav.topnav > .nav-sos {
      top: 50%;
      right: 28px;
      transform: translateY(-50%);
    }
    nav.topnav > .nav-sos:hover {
      transform: translateY(-50%) translateY(-1px);
    }
  }

  /* ================ HERO ================ */
  header.hero {
    position: relative;
    padding: 18px 16px 16px;
    background:
      radial-gradient(ellipse at 30% 0%, rgba(214, 178, 138, 0.4) 0%, transparent 55%),
      radial-gradient(ellipse at 80% 100%, rgba(58, 79, 94, 0.35) 0%, transparent 60%),
      linear-gradient(170deg, #2a251f 0%, #3a2f24 40%, #4a3a2a 100%);
    color: #f5e6c9;
    text-align: center;
    overflow: hidden;
  }

  /* === SLIM HERO (compact band, replaces big hero) === */
  header.hero.hero-slim {
    padding: 12px 18px;
    text-align: left;
  }
  header.hero.hero-slim .hs-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
  }
  header.hero.hero-slim .hs-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.4rem;
    color: #f5e6c9;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.1;
  }
  header.hero.hero-slim .hs-title .amp {
    color: #f5d6a8;
    margin: 0 2px;
  }
  header.hero.hero-slim .hs-sep {
    color: rgba(245, 230, 201, 0.4);
    margin: 0 2px;
  }
  header.hero.hero-slim .hs-dates {
    font-family: var(--sans);
    font-size: 11.5px;
    color: rgba(245, 230, 201, 0.7);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
  }
  header.hero.hero-slim .hs-countdown {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(245, 214, 168, 0.14);
    border: 1px solid rgba(245, 214, 168, 0.28);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    color: #f5d6a8;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    white-space: nowrap;
  }
  header.hero.hero-slim .hs-countdown .hc-dot {
    width: 6px; height: 6px;
    background: #f5d6a8;
    border-radius: 50%;
    animation: pulseDot 2s ease-in-out infinite;
  }
  @keyframes pulseDot {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
  header.hero.hero-slim .hc-num {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
  }
  @media (max-width: 480px) {
    header.hero.hero-slim { padding: 10px 14px; }
    header.hero.hero-slim .hs-title { font-size: 1.15rem; }
    header.hero.hero-slim .hs-dates { display: none; }
    header.hero.hero-slim .hs-sep { display: none; }
  }
  /* Hero countdown pill — integrated, replaces standalone trip-banner */
  header.hero .hero-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(245, 214, 168, 0.14);
    border: 1px solid rgba(245, 214, 168, 0.25);
    color: #f5d6a8;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 auto 10px;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
  }
  header.hero .hero-countdown .hc-num {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    text-transform: none;
    margin-right: 2px;
    color: #f5d6a8;
  }
  header.hero .hero-countdown .hc-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #f5d6a8;
    box-shadow: 0 0 8px #f5d6a8;
    animation: heroPulse 2s ease-in-out infinite;
  }
  @keyframes heroPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
  /* Hide the standalone trip-banner since we embed in hero */
  .trip-banner { display: none !important; }
  header.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 3px);
    pointer-events: none;
  }
  header.hero > * { position: relative; z-index: 1; }
  header.hero .label {
    display: block;
    width: fit-content;
    padding: 0 0 8px;
    border-bottom: 1px solid rgba(250, 246, 236, 0.4);
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0 auto 12px;
    opacity: 0.85;
    white-space: nowrap;
  }
  header.hero h1 {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 7.5vw, 4rem);
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.6px;
    line-height: 0.95;
    margin-bottom: 8px;
    color: #f5e6c9;
  }
  header.hero h1 .amp {
    font-style: italic;
    font-weight: 400;
    color: #f5d6a8;
    margin: 0 0.05em;
  }
  header.hero .subtitle {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(0.78rem, 2.6vw, 0.95rem);
    font-weight: 400;
    color: rgba(245, 230, 201, 0.7);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.4;
    letter-spacing: 0.1px;
  }
  header.hero .meta-row {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 12px;
    border-top: 1px solid rgba(245, 230, 201, 0.16);
    padding-top: 10px;
    flex-wrap: nowrap;
  }
  header.hero .meta-item {
    text-align: center;
    padding: 2px 8px;
    border-right: 1px solid rgba(250, 246, 236, 0.14);
    min-width: 0;
  }
  header.hero .meta-item:last-child { border-right: none; }
  header.hero .meta-item .num {
    font-family: var(--sans);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-style: italic;
    display: block;
    line-height: 1.05;
    white-space: nowrap;
  }
  header.hero .meta-item .lbl {
    font-family: var(--sans);
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    opacity: 0.65;
    margin-top: 3px;
    display: block;
    font-weight: 500;
    white-space: nowrap;
  }
  @media (min-width: 768px) {
    header.hero { padding: 40px 32px 32px; }
    header.hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin-bottom: 12px; letter-spacing: -1px; }
    header.hero .label { font-size: 11px; letter-spacing: 4px; margin-bottom: 16px; }
    header.hero .subtitle { font-size: 1.02rem; max-width: 600px; }
    header.hero .hero-countdown { margin-bottom: 14px; padding: 6px 16px; font-size: 11.5px; }
    header.hero .meta-row { margin-top: 18px; padding-top: 14px; }
    header.hero .meta-item .num { font-size: 1.1rem; }
    header.hero .meta-row {
      display: flex;
      gap: 0;
      justify-content: center;
      margin-top: 50px;
      padding-top: 28px;
    }
    header.hero .meta-item { padding: 0 36px; }
    header.hero .meta-item .num { font-size: 1.85rem; }
    header.hero .meta-item .lbl { font-size: 10.5px; letter-spacing: 2.5px; opacity: 0.7; }
  }

  /* ================ MAIN CONTAINER ================ */
  main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 14px;
  }
  @media (min-width: 768px) {
    main { padding: 0 24px; }
  }

  /* ================ SECTIONS ================ */
  section.page {
    padding: 56px 0 32px;
    border-bottom: 1px solid var(--line);
  }
  section.page:last-child { border-bottom: none; }

  /* ---- collapsible sections + days ---- */
  section.page > h2 {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 32px;
  }
  section.page > h2::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 10px; height: 10px;
    border-right: 2px solid var(--mute);
    border-bottom: 2px solid var(--mute);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  section.page.collapsed > h2::after {
    transform: translateY(-30%) rotate(-45deg);
  }
  section.page.collapsed > *:not(h2) {
    display: none !important;
  }
  section.page.collapsed {
    padding-bottom: 16px;
  }

  .day-block .day-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 32px;
  }
  .day-block .day-header::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 9px; height: 9px;
    border-right: 2px solid var(--mute);
    border-bottom: 2px solid var(--mute);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
    pointer-events: none;
  }
  .day-block.collapsed .day-header::after {
    transform: translateY(-30%) rotate(-45deg);
  }
  .day-block.collapsed > *:not(.day-header) {
    display: none !important;
  }
  section.page > h2 {
    font-family: var(--serif);
    font-size: 1.9rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 10px;
    letter-spacing: -0.3px;
    line-height: 1.1;
    position: relative;
  }
  section.page > h2::before {
    content: attr(data-num);
    display: block;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--terra);
    margin-bottom: 14px;
  }
  section.page > .lead {
    color: var(--mute);
    font-size: 14.5px;
    margin-bottom: 32px;
    max-width: 620px;
    line-height: 1.65;
    font-style: italic;
    font-family: var(--sans);
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  /* Inline section subheadings */
  section.page h3 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.2px;
  }
  section.page > h3.subhead,
  h3.subhead {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 500;
    font-style: italic;
    color: var(--ink);
    letter-spacing: -0.3px;
    margin: 44px 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    line-height: 1.2;
  }
  h3.subhead::before {
    content: "—  ";
    color: var(--terra);
    font-style: normal;
    margin-right: 4px;
  }
  @media (min-width: 768px) {
    h3.subhead { font-size: 1.6rem; margin: 56px 0 22px; }
  }
  @media (min-width: 768px) {
    section.page { padding: 88px 0 44px; }
    section.page > h2 { font-size: 2.6rem; }
    section.page > .lead { font-size: 16px; margin-bottom: 40px; }
  }

  /* ================ CARDS ================ */
  .grid { display: grid; gap: 14px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  @media (min-width: 600px) {
    .grid { gap: 16px; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 900px) {
    .grid { gap: 18px; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
  }

  .card {
    background: var(--cream);
    border-radius: var(--radius);
    padding: 22px 22px 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
  }
  @media (min-width: 768px) {
    .card { padding: 26px 26px 28px; }
    .card:hover {
      border-color: var(--mute-2);
      box-shadow: var(--shadow-lg);
    }
  }
  .card .card-label {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: 10px;
  }
  .card h3 {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.2px;
  }
  .card p {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.6;
  }
  .card.accent-sunset,
  .card.accent-ocean,
  .card.accent-leaf,
  .card.accent-gold,
  .card.accent-warn { border-top: 1px solid var(--line); }
  .card.accent-warn .card-label { color: var(--rust); }
  .card.accent-leaf .card-label { color: var(--sage-deep); }
  .card.accent-ocean .card-label { color: var(--deep); }
  .card.accent-gold .card-label { color: var(--gold); }

  /* Lodging cards */
  .card.lodging .addr {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    margin-top: 4px;
    line-height: 1.4;
    letter-spacing: 0.1px;
  }
  .card.lodging .dates {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    color: var(--ink-2);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
  }
  .card.lodging .price {
    font-family: var(--sans);
    font-size: 1.3rem;
    color: var(--terra);
    margin-top: 4px;
    margin-bottom: 12px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  .card.lodging > p:last-child {
    font-size: 13px;
    color: var(--mute);
    line-height: 1.5;
  }
  .card.lodging.totals {
    background: var(--paper-2);
    border-color: var(--line);
  }
  .card.lodging.totals .price { color: var(--ink); }
  .lodging-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 600px) {
    .lodging-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  }
  @media (min-width: 1000px) {
    .lodging-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  }

  .card.accent-sunset { border-top: 3px solid var(--sunset); }
  .card.accent-ocean  { border-top: 3px solid var(--ocean); }
  .card.accent-leaf   { border-top: 3px solid var(--leaf); }
  .card.accent-gold   { border-top: 3px solid var(--gold); }
  .card.accent-warn   { border-top: 3px solid var(--warn); }

  /* ================ INFO STRIP ================ */
  .info-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 28px;
  }
  @media (min-width: 600px) {
    .info-strip { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 900px) {
    .info-strip { grid-template-columns: repeat(6, 1fr); }
  }
  .info-strip .cell {
    background: var(--cream);
    padding: 18px 16px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  .info-strip .cell:nth-child(2n) { border-right: none; }
  @media (min-width: 600px) {
    .info-strip .cell { border-right: 1px solid var(--line-soft); }
    .info-strip .cell:nth-child(2n) { border-right: 1px solid var(--line-soft); }
    .info-strip .cell:nth-child(3n) { border-right: none; }
  }
  @media (min-width: 900px) {
    .info-strip .cell { border-bottom: none; }
    .info-strip .cell:nth-child(3n) { border-right: 1px solid var(--line-soft); }
    .info-strip .cell:last-child { border-right: none; }
  }
  .info-strip .cell .key {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--mute);
    font-weight: 600;
  }
  .info-strip .cell .val {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink);
    font-weight: 500;
    margin-top: 8px;
    line-height: 1.15;
    letter-spacing: -0.2px;
  }
  .info-strip .cell .sub {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    margin-top: 4px;
    line-height: 1.4;
  }
  @media (min-width: 768px) {
    .info-strip .cell { padding: 22px 20px; }
    .info-strip .cell .val { font-size: 1.25rem; }
  }

  /* ================ FLIGHT BLOCK ================ */
  .flight {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    background: var(--cream);
    color: var(--ink);
    padding: 24px 20px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
  }
  .flight.return-flight { background: var(--paper-2); }
  .flight .airport .code {
    font-family: var(--sans);
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    color: var(--ink);
  }
  .flight .airport .name {
    font-family: var(--sans);
    font-size: 9.5px;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 6px;
    font-weight: 600;
  }
  .flight .airport .time {
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--ink-2);
    font-weight: 400;
    margin-top: 6px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
  }
  .flight .arrow {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--terra);
    padding: 8px 0;
    text-align: center;
    min-width: 60px;
    position: relative;
  }
  .flight .arrow::before,
  .flight .arrow::after {
    content: "";
    display: block;
    height: 1px;
    background: var(--line);
    margin: 6px auto;
    width: 80%;
  }
  .flight .arrow .duration {
    font-family: var(--sans);
    font-style: normal;
    font-size: 9px;
    color: var(--mute);
    display: block;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  .flight .airport.right { text-align: right; }
  @media (min-width: 768px) {
    .flight { gap: 32px; padding: 32px 28px; }
    .flight .airport .code { font-size: 2.5rem; }
    .flight .airport .name { font-size: 10.5px; }
    .flight .airport .time { font-size: 1.1rem; }
    .flight .arrow { min-width: 90px; }
  }

  /* ================ DAY BLOCKS ================ */
  .day-block {
    background: var(--cream);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    margin-bottom: 22px;
    overflow: hidden;
  }
  .day-block.pretrip-day {
    margin-bottom: 8px;
    border-style: dashed;
    border-color: var(--line-soft, var(--line));
  }
  .day-block.pretrip-day .day-header {
    background: linear-gradient(180deg, var(--paper-2) 0%, var(--cream) 100%);
    padding: 12px 16px;
  }
  .day-block.pretrip-day .day-header .date {
    font-size: 1.1rem;
  }
  .day-block.pretrip-day .day-header .badge.prep {
    background: rgba(176, 141, 91, 0.18);
    color: #8a6d40;
    border: 1px solid var(--gold);
    font-size: 9.5px;
    padding: 3px 9px;
  }
  .day-block.pretrip-day.is-today {
    border-style: solid;
    border-color: var(--terra);
    box-shadow: 0 0 0 2px rgba(193, 116, 76, 0.12), var(--shadow);
  }
  .day-block.pretrip-day.is-today .day-header {
    background: linear-gradient(180deg, rgba(193, 116, 76, 0.07) 0%, var(--cream) 100%);
  }
  .ptd-today-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    padding: 3px 10px;
    background: var(--terra);
    color: var(--cream);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    vertical-align: middle;
    line-height: 1.4;
  }
  .ptj-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 12px;
  }
  .ptj-hint {
    background: rgba(193, 116, 76, 0.06);
    border: 1px dashed var(--terra);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
  }
  .ptj-hint strong { color: var(--terra); }
  .day-block .day-header {
    background: var(--paper-2);
    padding: 18px 18px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--line);
  }
  .day-block .day-header .date {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.3px;
    line-height: 1.05;
    flex: 1 1 auto;
  }
  .day-block .day-header .date .weekday {
    font-family: var(--sans);
    font-size: 9.5px;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    display: block;
    font-weight: 600;
    margin-top: 6px;
  }
  .day-block .day-header .location {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    font-weight: 400;
    color: var(--terra);
    background: transparent;
    padding: 4px 0 0;
    border-radius: 0;
    border: none;
    flex-basis: 100%;
    text-align: left;
    order: 3;
  }
  .day-block .day-header .badge {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    flex-shrink: 0;
    border: 1px solid currentColor;
    background: transparent;
  }
  .day-block .day-header .badge.transfer { color: var(--gold); }
  .day-block .day-header .badge.chill    { color: var(--sage-deep); }
  .day-block .day-header .badge.travel   { color: var(--terra); }
  .day-block .day-header .badge.exit     { color: var(--rust); }

  @media (min-width: 768px) {
    .day-block { margin-bottom: 28px; }
    .day-block .day-header { padding: 24px 28px 22px; align-items: flex-end; gap: 16px; }
    .day-block .day-header .date { font-size: 1.85rem; }
    .day-block .day-header .date .weekday { font-size: 10.5px; letter-spacing: 3px; }
    .day-block .day-header .location { font-size: 15px; flex-basis: auto; order: 0; padding: 0; text-align: right; }
    .day-block .day-header .badge { font-size: 9.5px; padding: 4px 10px; letter-spacing: 1.8px; }
  }

  .day-block .slots {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  @media (min-width: 850px) {
    .day-block .slots { grid-template-columns: repeat(3, 1fr); }
    .day-block .slots .slot + .slot { border-left: 1px solid var(--line-soft); }
  }
  .slot {
    background: var(--cream);
    padding: 18px 18px 22px;
    border-top: 1px solid var(--line-soft);
  }
  .day-block .slots .slot:first-child { border-top: none; }
  @media (min-width: 850px) {
    .slot { border-top: none; padding: 26px 24px 30px; }
  }
  .slot .slot-title {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
    display: inline-block;
    color: var(--mute);
    position: relative;
  }
  .slot .slot-title::after {
    content: "";
    display: block;
    width: 24px;
    height: 1px;
    background: currentColor;
    margin-top: 8px;
    opacity: 0.4;
  }
  .slot.morning   .slot-title { color: var(--gold); }
  .slot.afternoon .slot-title { color: var(--terra); }
  .slot.evening   .slot-title { color: var(--deep); }

  .slot ul { list-style: none; }
  .slot li {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-2);
    padding: 9px 0;
    position: relative;
    line-height: 1.55;
    border-bottom: 1px dashed var(--line-soft);
  }
  .slot li:last-child { border-bottom: none; }
  .slot li::before { display: none; }
  .slot li strong {
    color: var(--ink);
    font-weight: 600;
    display: inline;
  }
  .slot li .why {
    display: block;
    font-family: var(--serif);
    font-size: 13.5px;
    color: var(--mute);
    font-style: italic;
    margin-top: 6px;
    padding-left: 12px;
    border-left: 1px solid var(--sage-soft);
    line-height: 1.5;
  }
  .slot li .why::before {
    content: "";
    display: none;
  }

  /* ================ TRANSPORT VECTOR ================ */
  .transport-vector {
    margin: 0;
    padding: 14px 18px;
    background: var(--paper);
    border: none;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--mute);
    line-height: 1.55;
  }
  .transport-vector strong {
    font-family: var(--sans);
    font-style: normal;
    color: var(--terra);
    text-transform: uppercase;
    font-size: 9.5px;
    letter-spacing: 2.5px;
    font-weight: 600;
    margin-right: 10px;
    display: inline-block;
  }
  .transport-vector strong::after { content: " ·"; }
  @media (min-width: 768px) {
    .transport-vector { padding: 16px 28px; font-size: 14.5px; }
  }

  /* ================ MAP ================ */
  .map-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--cream);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
  }
  #leafletMap {
    width: 100%;
    height: 480px;
    background: var(--paper-2);
  }
  @media (min-width: 768px) {
    #leafletMap { height: 620px; }
  }
  .leaflet-container {
    font-family: var(--sans);
    background: #f3ecdf;
  }
  .leaflet-popup-content-wrapper {
    border-radius: var(--radius);
    background: var(--cream);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 0;
  }
  .leaflet-popup-content {
    margin: 14px 18px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
  }
  .leaflet-popup-content .pop-eyebrow {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .leaflet-popup-content .pop-title {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
  }
  .leaflet-popup-content .pop-meta {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--mute);
    margin-top: 2px;
  }
  .leaflet-popup-content .pop-price {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--terra);
    margin-top: 6px;
    font-weight: 500;
  }
  .leaflet-popup-tip { background: var(--cream); }
  .leaflet-popup-close-button { color: var(--mute) !important; padding: 8px 10px 0 0 !important; }
  .leaflet-control-attribution {
    background: rgba(247, 241, 232, 0.85) !important;
    font-family: var(--sans);
    font-size: 9.5px;
    color: var(--mute);
    padding: 2px 8px !important;
  }
  .leaflet-control-attribution a { color: var(--terra); text-decoration: none; }
  .leaflet-bar a {
    background: var(--cream) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    font-family: var(--serif) !important;
    font-weight: 500 !important;
  }
  .leaflet-bar a:hover { background: var(--paper-2) !important; }

  /* Map controls (above map) */
  .map-controls {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
  }
  .map-controls .mc-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }
  .map-controls .mc-row + .mc-row {
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
  }
  .map-controls .mc-eyebrow {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--mute);
    font-weight: 600;
    flex: 0 0 100%;
    margin-bottom: -2px;
  }
  .map-controls .cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    font-weight: 500;
  }
  .map-controls .cat-chip:hover { border-color: var(--mute-2); color: var(--ink-2); }
  .map-controls .cat-chip .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--mute-2);
    flex-shrink: 0;
    opacity: 0.4;
    transition: all 0.15s ease;
  }
  .map-controls .cat-chip.on {
    border-color: var(--ink);
    background: var(--cream);
    color: var(--ink);
  }
  .map-controls .cat-chip.on .dot { opacity: 1; }
  .map-controls .cat-chip.lodging .dot { background: var(--terra); }
  .map-controls .cat-chip.port .dot    { background: var(--ink-2); }
  .map-controls .cat-chip.sight .dot   { background: var(--sage); }
  .map-controls .cat-chip.beach .dot   { background: var(--deep); }
  .map-controls .cat-chip.food .dot    { background: var(--gold); }
  .map-controls .cat-chip.peak .dot    { background: var(--rust); }
  .map-controls .cat-chip .count {
    font-family: var(--sans);
    color: var(--mute);
    font-size: 11px;
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
  }
  .map-controls .ck {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-2);
    user-select: none;
  }
  .map-controls .ck input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1px solid var(--mute-2);
    border-radius: 3px;
    background: var(--cream);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
  }
  .map-controls .ck input[type="checkbox"]:hover { border-color: var(--terra); }
  .map-controls .ck input[type="checkbox"]:checked {
    background: var(--terra);
    border-color: var(--terra);
  }
  .map-controls .ck input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 2px;
    width: 5px; height: 9px;
    border-right: 2px solid var(--cream);
    border-bottom: 2px solid var(--cream);
    transform: rotate(45deg);
  }
  .map-controls .ck-label {
    font-weight: 500;
  }

  /* GPS · Live-Standort */
  .gps-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .gps-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cream);
    border: 1px solid var(--line);
    color: var(--ink-2);
    padding: 7px 14px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .gps-toggle:hover {
    border-color: var(--deep);
    color: var(--deep);
  }
  .gps-toggle.on {
    background: var(--deep);
    border-color: var(--deep);
    color: var(--cream);
  }
  .gps-toggle.on .gps-dot {
    background: #6dd17a;
    box-shadow: 0 0 0 0 rgba(109, 209, 122, 0.7);
    animation: gpsPulseDot 1.6s ease-out infinite;
  }
  .gps-toggle .gps-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--mute-2);
    flex-shrink: 0;
    transition: background 0.15s ease;
  }
  .gps-status {
    font-family: var(--sans);
    font-style: italic;
    color: var(--mute);
    font-size: 13px;
  }
  .gps-status.near {
    color: var(--terra);
  }
  @keyframes gpsPulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(109, 209, 122, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(109, 209, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(109, 209, 122, 0); }
  }

  /* GPS · Live-Marker auf der Karte */
  .gps-marker {
    background: transparent !important;
    border: none !important;
  }
  .gps-marker .gps-pulse-ring {
    position: absolute;
    left: 50%; top: 50%;
    width: 40px; height: 40px;
    margin-left: -20px; margin-top: -20px;
    border-radius: 50%;
    background: rgba(58, 79, 94, 0.18);
    animation: gpsPulseRing 2s ease-out infinite;
  }
  .gps-marker .gps-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 16px; height: 16px;
    margin-left: -8px; margin-top: -8px;
    border-radius: 50%;
    background: var(--deep);
    border: 2.5px solid var(--cream);
    box-shadow: 0 1px 4px rgba(42, 37, 32, 0.4);
  }
  @keyframes gpsPulseRing {
    0%   { transform: scale(0.4); opacity: 0.85; }
    100% { transform: scale(1.7); opacity: 0; }
  }

  /* Permanent price tooltip on map markers */
  .leaflet-tooltip.price-label {
    background: var(--cream);
    border: 1px solid var(--terra);
    color: var(--terra);
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 500;
    padding: 4px 9px;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(42, 37, 32, 0.18);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .leaflet-tooltip.price-label.leaflet-tooltip-top::before { border-top-color: var(--terra); }
  .leaflet-tooltip.price-label.leaflet-tooltip-bottom::before { border-bottom-color: var(--terra); }
  .leaflet-tooltip.price-label.leaflet-tooltip-left::before { border-left-color: var(--terra); }
  .leaflet-tooltip.price-label.leaflet-tooltip-right::before { border-right-color: var(--terra); }

  /* Route Editor */
  .route-editor {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-top: 18px;
    overflow: hidden;
  }
  .route-editor .re-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 22px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
  }
  .route-editor .re-header h4 {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
    letter-spacing: -0.2px;
    margin: 0;
  }
  .route-editor .re-header .re-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .route-editor .re-header button {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    padding: 8px 14px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
  }
  .route-editor .re-header button.primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
  }
  .route-editor .re-header button.primary:hover {
    background: var(--terra);
    border-color: var(--terra);
  }
  .route-editor .re-header button:hover {
    color: var(--terra);
    border-color: var(--terra);
  }
  .route-editor .re-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .route-editor .re-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
  }
  @media (min-width: 600px) {
    .route-editor .re-item { grid-template-columns: 40px 1fr auto; padding: 14px 22px; gap: 14px; }
  }
  .route-editor .re-item:last-child { border-bottom: none; }
  .route-editor .re-item .re-step {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--terra);
    text-align: center;
    line-height: 1;
    font-weight: 500;
  }
  .route-editor .re-item .re-info { min-width: 0; }
  .route-editor .re-item .re-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.25;
  }
  .route-editor .re-item .re-meta {
    font-family: var(--sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--mute);
    font-weight: 600;
    margin-top: 4px;
  }
  .route-editor .re-item .re-meta .seg-tag {
    display: inline-block;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: 9.5px;
    margin-left: 4px;
  }
  .route-editor .re-item .re-meta .seg-tag.ferry { color: var(--deep); }
  .route-editor .re-item .re-meta .seg-tag.drive { color: var(--mute); }
  .route-editor .re-item .re-controls {
    display: flex;
    gap: 4px;
  }
  .route-editor .re-item .re-controls button {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    width: 32px; height: 32px;
    border-radius: 3px;
    font-size: 13px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
    padding: 0;
  }
  .route-editor .re-item .re-controls button:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  .route-editor .re-item .re-controls button.del:hover {
    border-color: var(--rust);
    color: var(--rust);
  }
  .route-editor .re-item .re-controls button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  .route-editor .re-add {
    padding: 14px 16px 18px;
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
  }
  @media (min-width: 600px) {
    .route-editor .re-add { padding: 16px 22px 20px; }
  }
  .route-editor .re-add label {
    display: block;
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .route-editor .re-add select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    background: var(--cream) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238a7f70' d='M5 6L0 0h10z'/></svg>") no-repeat right 14px center;
    padding-right: 36px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
  }
  .route-editor .re-add select:focus {
    outline: none;
    border-color: var(--terra);
  }

  /* Custom map markers */
  .map-pin {
    background: transparent;
    border: none;
  }
  .map-pin .pin-circle {
    width: 100%; height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--cream);
    font-size: 14px;
    border: 2px solid var(--cream);
    box-shadow: 0 2px 6px rgba(42, 37, 32, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  .map-pin:hover .pin-circle { transform: scale(1.1); }
  .map-pin.lodging .pin-circle { background: var(--terra); }
  .map-pin.sight .pin-circle   { background: var(--sage); font-size: 11px; font-weight: 600; }
  .map-pin.beach .pin-circle   { background: var(--deep); font-size: 11px; }
  .map-pin.food .pin-circle    { background: var(--gold); font-size: 11px; }
  .map-pin.port .pin-circle    { background: var(--ink-2); font-size: 11px; }
  .map-pin.peak .pin-circle    { background: var(--rust); font-size: 11px; }

  .map-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
    padding: 18px 22px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-top: 0;
  }
  @media (min-width: 600px) {
    .map-legend { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 900px) {
    .map-legend { grid-template-columns: repeat(6, 1fr); }
  }
  .map-legend .li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
  }
  .map-legend .li::before {
    content: "";
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--cream);
    box-shadow: 0 1px 3px rgba(42, 37, 32, 0.2);
    flex-shrink: 0;
  }
  .map-legend .li.lodging::before { background: var(--terra); }
  .map-legend .li.sight::before   { background: var(--sage); }
  .map-legend .li.beach::before   { background: var(--deep); }
  .map-legend .li.food::before    { background: var(--gold); }
  .map-legend .li.port::before    { background: var(--ink-2); }
  .map-legend .li.peak::before    { background: var(--rust); }

  /* ================ TIMELINE ================ */
  .timeline {
    position: relative;
    padding-left: 22px;
    margin-bottom: 28px;
  }
  @media (min-width: 768px) {
    .timeline { padding-left: 28px; margin-bottom: 36px; }
  }
  .timeline::before {
    content: "";
    position: absolute;
    left: 4px; top: 12px; bottom: 12px;
    width: 1px;
    background: var(--line);
  }
  .timeline-item {
    position: relative;
    padding: 14px 0;
  }
  .timeline-item::before {
    content: "";
    position: absolute;
    left: -22px; top: 22px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--terra);
  }
  .timeline-item .ti-date {
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink);
    font-size: 14px;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }
  .timeline-item .ti-text {
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--mute);
    margin-top: 4px;
    line-height: 1.55;
  }

  /* ================ ALERT BOX ================ */
  .alert {
    padding: 18px 22px;
    border-radius: var(--radius);
    margin-bottom: 18px;
    border: 1px solid;
    border-left-width: 2px;
    font-size: 13.5px;
    font-family: var(--sans);
    font-style: italic;
    line-height: 1.6;
  }
  .alert.warn {
    background: rgba(150, 74, 62, 0.04);
    border-color: var(--rust);
    color: var(--ink-2);
  }
  .alert.info {
    background: rgba(58, 79, 94, 0.04);
    border-color: var(--deep);
    color: var(--ink-2);
  }
  .alert.tip {
    background: rgba(122, 136, 112, 0.05);
    border-color: var(--sage);
    color: var(--ink-2);
  }
  .alert strong {
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    font-family: var(--sans);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: 2.5px;
    font-weight: 600;
    color: var(--ink);
  }
  .alert.warn strong { color: var(--rust); }
  .alert.info strong { color: var(--deep); }
  .alert.tip strong  { color: var(--sage-deep); }

  /* ================ TABLES (mobile = horizontally scrollable) ================ */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--cream);
    margin: 0;
  }
  table.data {
    width: 100%;
    border-collapse: collapse;
    background: var(--cream);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 13.5px;
    min-width: 480px;
  }
  table.data th, table.data td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    line-height: 1.5;
  }
  table.data th {
    background: var(--paper-2);
    color: var(--mute);
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--line);
  }
  table.data td {
    color: var(--ink-2);
  }
  table.data td b { color: var(--ink); font-weight: 600; }
  table.data tr:last-child td { border-bottom: none; }
  table.data tr:nth-child(even) td { background: var(--paper); }
  @media (min-width: 768px) {
    table.data { font-size: 14px; }
    table.data th, table.data td { padding: 16px 20px; }
  }

  /* ================ FOOD CARDS ================ */
  .food-card {
    background: var(--cream);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
  }
  .food-card .head {
    background: var(--paper-2);
    color: var(--ink);
    padding: 20px 22px 18px;
    border-bottom: 1px solid var(--line);
  }
  .food-card .head .region {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--terra);
    font-weight: 600;
  }
  .food-card .head h4 {
    font-family: var(--serif);
    font-size: 1.35rem;
    margin-top: 6px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.2px;
    line-height: 1.15;
  }
  .food-card .body { padding: 8px 22px 18px; }
  .food-card .body .row {
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13.5px;
  }
  .food-card .body .row:last-child { border-bottom: none; }
  .food-card .body .row b {
    font-family: var(--serif);
    color: var(--ink);
    display: block;
    font-size: 1rem;
    font-weight: 500;
    font-style: italic;
  }
  .food-card .body .row .desc {
    font-family: var(--sans);
    color: var(--mute);
    font-size: 12.5px;
    margin-top: 4px;
    line-height: 1.5;
  }

  /* ================ CHECKLIST (interactive, packing/pharmacy) ================ */
  .checklist {
    list-style: none;
    columns: 1;
    column-gap: 40px;
    border-top: 1px solid var(--line-soft);
  }
  @media (min-width: 700px) { .checklist { columns: 2; } }
  .checklist li {
    padding: 12px 0 12px 30px;
    position: relative;
    font-size: 14px;
    color: var(--ink-2);
    break-inside: avoid;
    line-height: 1.55;
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .checklist li:hover { background: var(--paper); }
  .checklist li::before {
    content: "";
    position: absolute;
    left: 0; top: 16px;
    width: 16px; height: 16px;
    border: 1.5px solid var(--mute-2);
    border-radius: 3px;
    background: var(--cream);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .checklist li.checked::before {
    background: var(--sage);
    border-color: var(--sage);
  }
  .checklist li.checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 18px;
    width: 5px; height: 9px;
    border-right: 2px solid var(--cream);
    border-bottom: 2px solid var(--cream);
    transform: rotate(45deg);
  }
  .checklist li.checked {
    color: var(--mute);
    text-decoration: line-through;
    text-decoration-color: var(--mute-2);
  }
  .checklist li.checked strong { color: var(--mute); }

  /* --- Custom user-added items (PB-synced, shared between users) --- */
  .checklist li.custom-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 8px;
  }
  .checklist li.custom-item .ci-text {
    flex: 1;
    color: var(--ink-2);
    font-size: 14px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .checklist li.custom-item.checked .ci-text {
    text-decoration: line-through;
    color: var(--mute);
  }
  .checklist li.custom-item::before {
    border-color: var(--gold);
  }
  .checklist li.custom-item .ci-other {
    flex-shrink: 0;
    padding: 2px 7px 2px 5px;
    border-radius: 999px;
    background: var(--sage);
    color: var(--cream);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.5px;
  }
  .checklist li.custom-item .ci-author {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--cream);
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    margin-left: 4px;
  }
  .checklist li.custom-item .ci-author.author-thorsten { background: var(--terra); }
  .checklist li.custom-item .ci-author.author-patricia { background: var(--sage-deep, #5e6b56); }
  .checklist li.custom-item .ci-author.author-unknown  { background: var(--mute-2); }
  .checklist li.custom-item .ci-del {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--mute-2);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .checklist li.custom-item .ci-del:hover {
    background: var(--paper);
    color: var(--rust);
  }

  .custom-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 14px;
    background: transparent;
    color: var(--terra);
    border: 1px dashed var(--terra);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .custom-add-btn:hover {
    background: var(--terra);
    color: var(--cream);
  }
  .custom-add-btn span {
    font-size: 16px;
    line-height: 1;
  }

  .custom-add-row {
    display: none;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px;
    background: var(--paper);
    border-radius: 8px;
    border: 1px solid var(--line);
  }
  .custom-add-row.open { display: flex; }
  .custom-add-row .ci-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--cream);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
  }
  .custom-add-row .ci-input:focus {
    outline: none;
    border-color: var(--terra);
  }
  .custom-add-row .ci-save {
    padding: 8px 14px;
    background: var(--terra);
    color: var(--cream);
    border: none;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
  }
  .custom-add-row .ci-cancel {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--mute);
    font-size: 18px;
    cursor: pointer;
  }
  .custom-add-row .ci-cancel:hover { color: var(--rust); background: var(--cream); }
  .checklist li strong {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink);
    font-weight: 500;
    font-size: 1rem;
  }

  /* ================ TRACKER ================ */
  .tracker-toolbar {
    position: sticky;
    top: 92px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
  }
  @media (min-width: 768px) {
    .tracker-toolbar {
      top: 78px;
      padding: 20px 26px;
      margin-bottom: 32px;
      gap: 20px;
    }
  }
  .tracker-toolbar .progress-wrap {
    flex: 1;
    min-width: 200px;
  }
  .tracker-toolbar .progress-label {
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
  }
  .tracker-toolbar .progress-label .pct {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--terra);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
  }
  .tracker-toolbar .bar {
    width: 100%;
    height: 4px;
    background: var(--sand);
    border-radius: 999px;
    overflow: hidden;
  }
  .tracker-toolbar .bar > span {
    display: block;
    height: 100%;
    background: var(--terra);
    border-radius: 999px;
    transition: width 0.4s ease;
    width: 0%;
  }
  .tracker-toolbar button {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    padding: 10px 18px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 40px;
    width: 100%;
  }
  @media (min-width: 600px) {
    .tracker-toolbar button { width: auto; }
  }
  .tracker-toolbar button:active,
  .tracker-toolbar button:hover {
    background: transparent;
    color: var(--rust);
    border-color: var(--rust);
  }

  .tracker-group {
    background: var(--cream);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    margin-bottom: 14px;
    overflow: hidden;
  }
  .tracker-group .tg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    background: var(--cream);
    border-bottom: 1px solid var(--line-soft);
    cursor: pointer;
    user-select: none;
    min-height: 60px;
  }
  .tracker-group.collapsed .tg-header { border-bottom: none; }
  .tracker-group .tg-header h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.2;
    flex: 1;
    letter-spacing: -0.2px;
  }
  @media (min-width: 768px) {
    .tracker-group .tg-header { padding: 20px 26px; }
    .tracker-group .tg-header h3 { font-size: 1.35rem; }
  }
  .tracker-group .tg-header .tg-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    font-weight: 500;
  }
  .tracker-group .tg-header .tg-pill {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--terra);
    font-weight: 500;
    letter-spacing: 0;
  }
  .tracker-group .tg-header .tg-toggle {
    color: var(--mute-2);
    font-size: 12px;
    transition: transform 0.2s ease;
  }
  .tracker-group.collapsed .tg-toggle { transform: rotate(-90deg); }
  .tracker-group.collapsed .tg-body { display: none; }

  .tracker-group .tg-body {
    padding: 8px 16px 16px;
  }
  @media (min-width: 768px) {
    .tracker-group .tg-body { padding: 8px 22px 18px; }
  }
  .tracker-group .tg-subhead {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--terra);
    font-weight: 600;
    margin: 22px 0 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
  }
  .tracker-group .tg-subhead:first-child { border-top: none; padding-top: 8px; margin-top: 4px; }
  @media (min-width: 768px) {
    .tracker-group .tg-subhead { font-size: 10px; letter-spacing: 3.5px; margin: 26px 0 10px; }
  }

  .check-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 8px;
    margin: 0 -8px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
    min-height: 50px;
    border-bottom: 1px solid var(--line-soft);
  }
  .check-row:last-child { border-bottom: none; }
  .check-row:active,
  .check-row:hover { background: var(--paper); }
  @media (min-width: 768px) {
    .check-row { padding: 12px 8px; gap: 14px; min-height: auto; }
  }
  .check-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border: 1px solid var(--mute-2);
    border-radius: 3px;
    background: var(--cream);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    position: relative;
    transition: all 0.15s ease;
  }
  .check-row input[type="checkbox"]:hover { border-color: var(--terra); }
  .check-row input[type="checkbox"]:checked {
    background: var(--sage);
    border-color: var(--sage);
  }
  .check-row input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 6px; height: 12px;
    border-right: 2px solid var(--cream);
    border-bottom: 2px solid var(--cream);
    transform: rotate(45deg);
  }
  .check-row .check-text {
    flex: 1;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
    transition: all 0.2s ease;
  }
  .check-row .check-text strong {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--ink);
  }
  .check-row .check-text small {
    display: block;
    font-family: var(--sans);
    color: var(--mute);
    font-size: 12.5px;
    margin-top: 4px;
    line-height: 1.45;
    font-style: normal;
  }
  .check-row input[type="checkbox"]:checked + .check-text strong {
    color: var(--mute);
  }
  @media (min-width: 768px) {
    .check-row input[type="checkbox"] { width: 20px; height: 20px; }
    .check-row input[type="checkbox"]:checked::after {
      left: 5px; top: 2px; width: 5px; height: 10px;
    }
    .check-row .check-text { font-size: 13.5px; }
    .check-row .check-text strong { font-size: 1rem; }
    .check-row .check-text small { font-size: 12px; }
  }
  .check-row input[type="checkbox"]:checked + .check-text {
    color: var(--mute-2);
    text-decoration: line-through;
    text-decoration-color: var(--mute-2);
    text-decoration-thickness: 1px;
  }
  .check-row input[type="checkbox"]:checked + .check-text small {
    text-decoration: line-through;
    color: var(--mute-2);
  }
  .check-row.urgent input[type="checkbox"]:not(:checked) {
    border-color: var(--rust);
    border-width: 1.5px;
    box-shadow: none;
  }
  .check-row.urgent .check-text strong { color: var(--rust); }

  .check-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px 24px;
  }
  @media (min-width: 700px) {
    .check-grid { grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
  }

  /* ================ COST OVERVIEW ================ */
  .cost-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 28px;
  }
  @media (min-width: 700px) {
    .cost-summary { grid-template-columns: repeat(3, 1fr); }
  }
  .cost-summary .cs-cell {
    padding: 22px 24px;
    border-bottom: 1px solid var(--line-soft);
    border-right: none;
  }
  @media (min-width: 700px) {
    .cost-summary .cs-cell {
      border-bottom: none;
      border-right: 1px solid var(--line-soft);
    }
    .cost-summary .cs-cell:last-child { border-right: none; }
  }
  .cost-summary .cs-cell:last-child { border-bottom: none; }
  .cost-summary .cs-cell.total { background: var(--paper-2); }
  .cost-summary .cs-cell .label {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.8px;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .cost-summary .cs-cell.total .label { color: var(--ink); }
  .cost-summary .cs-cell .amt {
    font-family: var(--sans);
    font-size: 1.6rem;
    color: var(--ink);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.05;
    letter-spacing: -0.5px;
  }
  .cost-summary .cs-cell.total .amt { color: var(--terra); font-size: 2.2rem; }
  .cost-summary .cs-cell .sub {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    margin-top: 8px;
    line-height: 1.5;
  }

  /* Fixed cost line items */
  .cost-list {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 28px;
  }
  .cost-list .cl-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line-soft);
    align-items: baseline;
  }
  .cost-list .cl-row:last-child { border-bottom: none; }
  .cost-list .cl-row.subtotal {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
  }
  .cost-list .cl-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
  }
  .cost-list .cl-meta {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
    margin-top: 2px;
  }
  .cost-list .cl-amt {
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--ink);
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }
  .cost-list .cl-row.subtotal .cl-amt {
    font-size: 1.2rem;
    color: var(--terra);
  }

  /* ================ EXPENSE TRACKER ================ */
  .expense-tracker {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .expense-tracker .et-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 22px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
  }
  .expense-tracker .et-toolbar .et-totals {
    font-family: var(--serif);
    color: var(--ink);
  }
  .expense-tracker .et-toolbar .et-totals .label {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--mute);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
  }
  .expense-tracker .et-toolbar .et-totals .sum {
    font-style: italic;
    font-size: 1.6rem;
    color: var(--terra);
    line-height: 1;
    font-weight: 500;
  }
  .expense-tracker .et-toolbar button {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--cream);
    padding: 11px 20px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .expense-tracker .et-toolbar button:hover {
    background: var(--terra);
    border-color: var(--terra);
  }
  .expense-tracker .et-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .expense-tracker table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
  }
  .expense-tracker th {
    background: var(--paper);
    text-align: left;
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mute);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .expense-tracker th.amt, .expense-tracker td.amt { text-align: right; }
  .expense-tracker th.act, .expense-tracker td.act { text-align: center; width: 44px; }
  .expense-tracker td {
    padding: 4px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
  }
  .expense-tracker tr:last-child td { border-bottom: none; }
  .expense-tracker input,
  .expense-tracker select {
    width: 100%;
    padding: 10px 10px;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    border-radius: 3px;
    transition: all 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .expense-tracker select {
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238a7f70' d='M5 6L0 0h10z'/></svg>") no-repeat right 10px center;
    padding-right: 28px;
  }
  .expense-tracker input:hover,
  .expense-tracker select:hover {
    background-color: var(--paper);
  }
  .expense-tracker input:focus,
  .expense-tracker select:focus {
    outline: none;
    background-color: var(--cream);
    border-color: var(--terra);
  }
  .expense-tracker .col-date  { width: 110px; }
  .expense-tracker .col-cat   { width: 130px; }
  .expense-tracker .col-amt   { width: 110px; }
  .expense-tracker .col-cur   { width: 70px; }
  .expense-tracker td.amt input { text-align: right; font-variant-numeric: tabular-nums; }
  .expense-tracker .del-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    width: 32px; height: 32px;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
    margin: 0 auto;
    display: block;
  }
  .expense-tracker .del-btn:hover {
    border-color: var(--rust);
    color: var(--rust);
    background: var(--cream);
  }
  .expense-tracker tfoot td {
    background: var(--paper-2);
    border-top: 1px solid var(--line);
    padding: 14px;
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink);
    font-weight: 500;
  }
  .expense-tracker tfoot .total-amt {
    font-size: 1.2rem;
    color: var(--terra);
    text-align: right;
  }
  .expense-tracker .empty-state {
    padding: 36px 20px;
    text-align: center;
    font-family: var(--sans);
    font-style: italic;
    color: var(--mute);
    font-size: 13.5px;
  }

  /* ===== BALANCE CARD (Tricount-Style) ===== */
  .balance-card {
    background: linear-gradient(165deg, var(--cream) 0%, var(--paper-2) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px 22px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    text-align: center;
  }
  .balance-card .bc-eyebrow {
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3.5px;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: 16px;
  }
  .balance-card .bc-status {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--mute);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
  }
  .balance-card .bc-amount {
    font-family: var(--sans);
    font-size: 2rem;
    color: var(--ink);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .balance-card .bc-amount.settled { color: var(--sage-deep); font-size: 1.8rem; }
  .balance-card .bc-amount.thorsten-owes { color: var(--rust); }
  .balance-card .bc-amount.patricia-owes { color: var(--sage-deep); }
  .balance-card .bc-divider {
    width: 50px;
    height: 1px;
    background: var(--line);
    margin: 22px auto 0;
  }
  .balance-card .bc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 20px;
    padding-top: 8px;
  }
  @media (min-width: 600px) {
    .balance-card .bc-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .balance-card .bc-cell {
    padding: 14px 8px;
    border-bottom: 1px solid var(--line-soft);
  }
  .balance-card .bc-cell:last-child { border-bottom: none; }
  @media (min-width: 600px) {
    .balance-card .bc-cell {
      border-bottom: none;
      border-right: 1px solid var(--line-soft);
    }
    .balance-card .bc-cell:last-child { border-right: none; }
  }
  .balance-card .bc-name {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .balance-card .bc-paid {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--ink);
    line-height: 1;
    font-weight: 500;
  }
  .balance-card .bc-sub {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    margin-top: 6px;
    letter-spacing: 0.2px;
  }

  /* Person tags inside table */
  .person-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border: 1px solid currentColor;
  }
  .person-tag.thorsten { color: var(--terra); }
  .person-tag.patricia { color: var(--sage-deep); }
  .person-tag.both     { color: var(--mute); }

  /* Sticky payer column on mobile */
  .expense-tracker .col-paid { width: 110px; }
  .expense-tracker .col-for  { width: 110px; }
  .expense-tracker table { min-width: 920px; }

  /* ===== ATM TRACKER ===== */
  .atm-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 18px;
  }
  @media (min-width: 700px) {
    .atm-summary { grid-template-columns: repeat(4, 1fr); }
  }
  .atm-summary .as-cell {
    padding: 18px 18px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  .atm-summary .as-cell:nth-child(2n) { border-right: none; }
  @media (min-width: 700px) {
    .atm-summary .as-cell { border-bottom: none; }
    .atm-summary .as-cell:nth-child(2n) { border-right: 1px solid var(--line-soft); }
    .atm-summary .as-cell:last-child { border-right: none; }
  }
  .atm-summary .as-cell .lbl {
    font-family: var(--sans);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .atm-summary .as-cell .val {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.35rem;
    color: var(--ink);
    line-height: 1;
    font-weight: 500;
  }
  .atm-summary .as-cell .sub {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    margin-top: 4px;
  }

  .atm-tracker {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .atm-tracker .at-toolbar {
    padding: 16px 22px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
  }
  .atm-tracker .at-toolbar button {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--cream);
    padding: 11px 20px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .atm-tracker .at-toolbar button:hover {
    background: var(--terra);
    border-color: var(--terra);
  }
  .atm-tracker .at-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .atm-tracker table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
  }
  .atm-tracker th {
    background: var(--paper);
    text-align: left;
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mute);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .atm-tracker th.amt, .atm-tracker td.amt { text-align: right; }
  .atm-tracker th.act, .atm-tracker td.act { text-align: center; width: 44px; }
  .atm-tracker td {
    padding: 4px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
  }
  .atm-tracker tr:last-child td { border-bottom: none; }
  .atm-tracker input,
  .atm-tracker select {
    width: 100%;
    padding: 10px 10px;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    border-radius: 3px;
    transition: all 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .atm-tracker select {
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238a7f70' d='M5 6L0 0h10z'/></svg>") no-repeat right 10px center;
    padding-right: 28px;
  }
  .atm-tracker input:hover,
  .atm-tracker select:hover { background-color: var(--paper); }
  .atm-tracker input:focus,
  .atm-tracker select:focus {
    outline: none;
    background-color: var(--cream);
    border-color: var(--terra);
  }
  .atm-tracker td.amt input { text-align: right; font-variant-numeric: tabular-nums; }
  .atm-tracker .rate-cell {
    font-family: var(--sans);
    color: var(--mute);
    text-align: right;
    padding-right: 14px;
    font-size: 12.5px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .atm-tracker .empty-state {
    padding: 36px 20px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--mute);
    font-size: 14px;
  }
  .atm-tracker .col-date { width: 110px; }
  .atm-tracker .col-pers { width: 130px; }
  .atm-tracker .col-feeunit { width: 70px; }

  /* Category breakdown */
  .cat-breakdown {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 24px;
  }
  @media (min-width: 600px) {
    .cat-breakdown { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 900px) {
    .cat-breakdown { grid-template-columns: repeat(6, 1fr); }
  }
  .cat-breakdown .cb-cell {
    background: var(--cream);
    padding: 16px 18px;
  }
  .cat-breakdown .cb-cell .lbl {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mute);
    font-weight: 600;
  }
  .cat-breakdown .cb-cell .val {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink);
    margin-top: 6px;
    line-height: 1;
  }

  /* ================ LINKS LIST ================ */
  .link-list {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .link-list a.link-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line-soft);
    text-decoration: none;
    transition: background 0.15s ease;
  }
  .link-list a.link-row:last-child { border-bottom: none; }
  .link-list a.link-row:hover { background: var(--paper); }
  .link-list .lr-text .name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.3;
  }
  .link-list .lr-text .desc {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--mute);
    margin-top: 4px;
    line-height: 1.5;
  }
  .link-list .lr-arrow {
    font-family: var(--serif);
    font-style: italic;
    color: var(--terra);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
    transition: transform 0.15s ease;
  }
  .link-list a.link-row:hover .lr-arrow { transform: translateX(4px); }

  /* ================ DAY NAVIGATION (Pillen am Tagebuch-Anfang) ================ */
  .day-nav {
    position: sticky;
    top: 92px;
    z-index: 50;
    background: var(--paper);
    margin: 0 -14px 24px;
    padding: 14px 14px 12px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  @media (min-width: 768px) {
    .day-nav { top: 76px; margin: 0 -24px 32px; padding: 16px 24px 14px; border-radius: 0; }
  }
  .day-nav .dn-label {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 10px;
  }
  .day-nav .dn-pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .day-nav .dn-pills::-webkit-scrollbar { display: none; }
  .day-nav .dn-pill {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background: var(--cream);
    border-radius: 4px;
    text-decoration: none;
    color: var(--ink-2);
    font-family: var(--sans);
    transition: all 0.15s ease;
    min-width: 56px;
  }
  .day-nav .dn-pill .dn-day {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 1rem;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .day-nav .dn-pill .dn-mon {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--mute);
  }
  .day-nav .dn-pill:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  .day-nav .dn-pill.is-today {
    background: var(--ink);
    border-color: var(--ink);
  }
  .day-nav .dn-pill.is-today .dn-day,
  .day-nav .dn-pill.is-today .dn-mon { color: var(--cream); }

  /* ================ TODAY HIGHLIGHT for day-block ================ */
  .day-block.is-today {
    border: 1px solid var(--terra);
    box-shadow: 0 0 0 3px rgba(181, 107, 74, 0.15);
  }
  .day-block.is-today .day-header {
    background: linear-gradient(135deg, #f5e3d4 0%, #ecd2bc 100%);
  }
  [data-theme="dark"] .day-block.is-today .day-header {
    background: linear-gradient(135deg, rgba(209, 130, 96, 0.20) 0%, rgba(209, 130, 96, 0.32) 100%);
    color: var(--ink);
  }
  .day-block.is-today .day-header::before {
    content: "Heute";
    display: inline-block;
    font-family: var(--sans);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    color: var(--cream);
    background: var(--terra);
    padding: 4px 10px;
    border-radius: 2px;
    margin-bottom: 10px;
    flex-basis: 100%;
    text-align: left;
    width: max-content;
    order: -1;
  }

  /* ================ FLOATING ACTION BUTTON (Mobile-first) ================ */
  .fab {
    position: fixed;
    right: 16px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 1085;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
  }
  .fab .fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--cream);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(42, 37, 32, 0.28);
    font-size: 26px;
    line-height: 1;
    font-weight: 300;
    transition: transform 0.25s ease, background 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    padding: 0;
  }
  .fab .fab-main:hover { background: var(--terra); }
  .fab.open .fab-main {
    transform: rotate(45deg);
    background: var(--terra);
  }
  .fab .fab-actions {
    display: none;
    flex-direction: column-reverse;
    gap: 10px;
    align-items: flex-end;
  }
  .fab.open .fab-actions { display: flex; }
  .fab .fab-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(42, 37, 32, 0.15);
    transition: all 0.15s ease;
    white-space: nowrap;
  }
  .fab .fab-action:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  .fab .fab-action .fa-icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--terra);
    color: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
  }
  @media print {
    .fab { display: none !important; }
  }

  /* ================ NAV GROUPS ================ */
  nav.topnav .links .nav-divider {
    flex-shrink: 0;
    width: 1px;
    align-self: stretch;
    background: var(--line);
    margin: 4px 4px;
  }
  nav.topnav .links .nav-group-label {
    flex-shrink: 0;
    align-self: center;
    font-family: var(--sans);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--mute-2);
    font-weight: 600;
    padding: 0 8px 0 4px;
    pointer-events: none;
  }
  nav.topnav .links a.heute-pill {
    background: var(--terra);
    color: var(--cream) !important;
    border-radius: 4px;
    padding: 10px 14px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
  }
  nav.topnav .links a.heute-pill:hover { background: var(--terra-deep); color: var(--cream) !important; }

  /* ================ TRIP COUNTDOWN BANNER ================ */
  .trip-banner {
    background: linear-gradient(90deg, var(--terra) 0%, var(--terra-deep) 100%);
    color: var(--cream);
    padding: 11px 44px 11px 18px;
    text-align: center;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    position: relative;
    flex-wrap: wrap;
  }
  .trip-banner .tb-count {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
  }
  .trip-banner .tb-close {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.45);
    color: var(--cream);
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    font-size: 13px;
    line-height: 1;
    padding: 0;
  }
  .trip-banner .tb-close:hover { background: rgba(255,255,255,0.1); }
  .trip-banner.dismissible .tb-close { display: flex; align-items: center; justify-content: center; }
  .trip-banner[hidden] { display: none; }
  .trip-banner.day-zero { background: linear-gradient(90deg, var(--gold) 0%, var(--terra) 100%); }
  .trip-banner.during    { background: linear-gradient(90deg, var(--sage-deep) 0%, var(--sage) 100%); }
  .trip-banner.ended     { background: linear-gradient(90deg, var(--mute) 0%, var(--ink-2) 100%); }

  /* ================ LOCK / COUNTDOWN (Patricia Mode) ================ */
  .lock-overlay { display: none; }
  body.lock-active .locked-pretrip > .lock-overlay { display: block; }
  body.lock-active .locked-pretrip > *:not(h2):not(.lock-overlay) { display: none !important; }
  body.mode-patricia .patricia-hide { display: none !important; }
  /* Mode badge in nav */
  body.mode-patricia nav.topnav::after,
  body.mode-thorsten nav.topnav::after {
    content: attr(data-mode);
    position: absolute;
    top: 4px;
    right: 12px;
    font-family: var(--sans);
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    pointer-events: none;
  }
  body.mode-patricia nav.topnav::after { color: var(--sage-deep); border: 1px solid var(--sage-deep); content: 'Patricia'; }
  body.mode-thorsten nav.topnav::after { color: var(--terra); border: 1px solid var(--terra); content: 'Thorsten'; }
  /* On mobile the SOS pill occupies the same area — hide the mode-badge to avoid overlap.
     Identity is still visible in the Werkstatt-Tab and inside the identity-block section. */
  @media (max-width: 720px) {
    body.mode-patricia nav.topnav::after,
    body.mode-thorsten nav.topnav::after { display: none; }
  }

  .lock-overlay {
    background: linear-gradient(165deg, var(--cream) 0%, var(--paper-2) 100%);
    border: 1px dashed var(--terra);
    border-radius: var(--radius);
    padding: 48px 28px;
    text-align: center;
    margin-top: 24px;
    box-shadow: var(--shadow);
  }
  .lock-overlay .lock-icon {
    font-family: var(--serif);
    font-style: italic;
    font-size: 2.2rem;
    color: var(--terra);
    margin-bottom: 14px;
    opacity: 0.7;
  }
  .lock-overlay .lock-title {
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 10px;
  }
  .lock-overlay .lock-meta {
    font-family: var(--serif);
    font-style: italic;
    color: var(--ink-2);
    font-size: 1.05rem;
    margin-bottom: 6px;
  }
  .lock-overlay .lock-meta strong {
    color: var(--ink);
    font-weight: 500;
  }
  .lock-overlay .lock-countdown {
    font-family: var(--serif);
    font-style: italic;
    font-size: 2.4rem;
    color: var(--terra);
    line-height: 1.1;
    font-weight: 500;
    margin: 14px 0 8px;
    letter-spacing: -1px;
  }
  .lock-overlay .lock-hint {
    font-family: var(--sans);
    font-style: italic;
    color: var(--mute);
    font-size: 13px;
    line-height: 1.55;
    max-width: 400px;
    margin: 0 auto 18px;
  }
  .lock-overlay .lock-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    padding: 9px 18px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .lock-overlay .lock-btn:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  body.test-unlocked .lock-overlay { border-color: var(--gold); }
  body.test-unlocked .lock-overlay::before {
    content: 'Test-Modus aktiv · Inhalt sichtbar';
    display: block;
    font-family: var(--sans);
    font-size: 9.5px;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  /* ================ CURRENCY CALCULATOR (Widget) ================ */
  .currency-widget {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
  }
  .currency-widget .cw-eyebrow {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .currency-widget h3 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 14px;
  }
  .currency-widget .cw-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }
  @media (min-width: 600px) {
    .currency-widget .cw-row { grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 12px; }
  }
  .currency-widget .cw-input-wrap {
    position: relative;
  }
  .currency-widget .cw-input-wrap label {
    position: absolute;
    top: 8px; left: 14px;
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mute);
    font-weight: 600;
    pointer-events: none;
  }
  .currency-widget input[type="number"] {
    width: 100%;
    padding: 28px 14px 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--ink);
    border-radius: 3px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    -webkit-appearance: none;
    appearance: none;
  }
  .currency-widget input[type="number"]:focus {
    outline: none;
    border-color: var(--terra);
    background: var(--cream);
  }
  .currency-widget .cw-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--terra);
    font-size: 1.5rem;
  }
  .currency-widget .cw-rate {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    margin-top: 8px;
    text-align: right;
  }

  /* ================ MOOD / DAY RATING ================ */
  .day-extras .dx-mood {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 8px;
  }
  .day-extras .mood-stars {
    display: inline-flex;
    gap: 4px;
  }
  .day-extras .mood-stars .star {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--mute-2);
    line-height: 1;
    padding: 0;
    transition: all 0.15s ease;
  }
  .day-extras .mood-stars .star.active {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
  }
  .day-extras .mood-stars .star:hover {
    border-color: var(--terra);
  }
  .day-extras .mood-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 200px;
  }
  .day-extras .mood-meta input {
    flex: 1;
    min-width: 100px;
    padding: 7px 12px;
    border: 1px solid var(--line);
    background: var(--cream);
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--ink);
    border-radius: 3px;
  }
  .day-extras .mood-meta input:focus { outline: none; border-color: var(--terra); }
  .day-extras .mood-meta input::placeholder { color: var(--mute-2); font-style: italic; }

  /* ================ PHOTO CAPTIONS ================ */
  .day-extras .dx-photo .dx-caption-edit {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(42,37,32,0.85), rgba(42,37,32,0.4) 70%, transparent);
    padding: 18px 10px 8px;
    color: var(--cream);
    font-family: var(--serif);
    font-style: italic;
    font-size: 11px;
    text-align: center;
    line-height: 1.3;
    pointer-events: none;
  }
  .day-extras .dx-photo .dx-caption-edit:empty { display: none; }

  /* ================ EXPENSE FILTERS ================ */
  .expense-filters {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .expense-filters label {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--mute);
    font-weight: 600;
  }
  .expense-filters select,
  .expense-filters input[type="text"] {
    padding: 7px 12px;
    border: 1px solid var(--line);
    background: var(--cream);
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--ink-2);
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
  }
  .expense-filters select {
    background: var(--cream) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238a7f70' d='M5 6L0 0h10z'/></svg>") no-repeat right 8px center;
    padding-right: 24px;
  }
  .expense-filters select:focus,
  .expense-filters input:focus { outline: none; border-color: var(--terra); }
  .expense-filters .ef-clear {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    padding: 7px 12px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    font-weight: 600;
  }
  .expense-filters .ef-clear:hover { border-color: var(--rust); color: var(--rust); }

  /* ================ TRIP STATISTICS ================ */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 24px;
  }
  @media (min-width: 600px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 900px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .stats-grid .st-cell {
    background: var(--cream);
    padding: 22px 20px 20px;
    text-align: center;
  }
  .stats-grid .st-label {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 10px;
  }
  .stats-grid .st-value {
    font-family: var(--sans);
    font-size: 1.7rem;
    color: var(--ink);
    line-height: 1.05;
    font-weight: 400;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .stats-grid .st-value.terra { color: var(--terra); }
  .stats-grid .st-value.sage  { color: var(--sage-deep); }
  .stats-grid .st-value.deep  { color: var(--deep); }
  .stats-grid .st-sub {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    margin-top: 6px;
    line-height: 1.4;
  }

  /* ================ REISEDOKUMENTE ================ */
  .doc-section {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .doc-section .ds-toolbar {
    padding: 14px 22px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
  }
  .doc-section .ds-toolbar .meta {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
  }
  .doc-section .ds-toolbar .meta b { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: 13px; }
  .doc-section .ds-toolbar label.btn,
  .doc-section .ds-toolbar button {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--cream);
    padding: 10px 18px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
  }
  .doc-section .ds-toolbar label.btn:hover,
  .doc-section .ds-toolbar button:hover { background: var(--terra); border-color: var(--terra); }
  .doc-section input[type="file"] { display: none; }
  .doc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line-soft);
  }
  @media (min-width: 600px) {
    .doc-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 900px) {
    .doc-grid { grid-template-columns: repeat(4, 1fr); }
  }
  .doc-card {
    background: var(--cream);
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .doc-card:hover { background: var(--paper); }
  .doc-card .doc-icon {
    width: 48px; height: 60px;
    margin: 0 auto 8px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 3px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--rust);
    box-shadow: 0 2px 5px rgba(42, 37, 32, 0.06);
  }
  .doc-card .doc-icon::before {
    content: "";
    position: absolute;
    top: -1px; right: -1px;
    width: 14px; height: 14px;
    background: linear-gradient(225deg, var(--paper-2) 50%, transparent 50%);
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .doc-card .doc-icon.pdf { color: var(--rust); }
  .doc-card .doc-icon.img {
    background-size: cover;
    background-position: center;
    color: transparent;
  }
  .doc-card .doc-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--ink);
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
  }
  .doc-card .doc-cat {
    font-family: var(--sans);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--terra);
    text-align: center;
    font-weight: 600;
  }
  .doc-card .doc-size {
    font-family: var(--sans);
    font-size: 10.5px;
    color: var(--mute);
    text-align: center;
  }
  .doc-card .doc-del {
    position: absolute;
    top: 6px; right: 6px;
    width: 24px; height: 24px;
    background: rgba(42, 37, 32, 0.7);
    color: var(--cream);
    border: none;
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .doc-card:hover .doc-del { opacity: 1; }
  @media (max-width: 768px) { .doc-card .doc-del { opacity: 1; } }
  .doc-section .empty-state {
    padding: 36px 20px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--mute);
    font-size: 14px;
  }

  /* ================ WELCOME MODAL (Onboarding) ================ */
  .welcome-modal .modal-card {
    max-width: 540px;
  }
  .welcome-modal h3 {
    font-size: 1.7rem;
    margin-bottom: 10px;
  }
  .welcome-modal .wm-step {
    padding: 12px 0;
    border-bottom: 1px dashed var(--line-soft);
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: start;
  }
  .welcome-modal .wm-step:last-of-type { border-bottom: none; }
  .welcome-modal .wm-step .wm-num {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--terra);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
    flex-shrink: 0;
  }
  .welcome-modal .wm-step .wm-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .welcome-modal .wm-step .wm-text {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.5;
  }

  /* ================ LOGIN MODAL ================ */
  .identity-modal {
    z-index: 1100;
    background: rgba(42, 37, 32, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* Hard gatekeeping — when not logged in, only the login modal is interactive */
  body.auth-required > *:not(#identityModal) {
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.auth-required #identityModal {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.auth-required {
    overflow: hidden !important;
  }
  .identity-modal .modal-card {
    max-width: 420px;
    text-align: left;
  }
  .identity-modal h3 {
    font-size: 1.8rem;
    font-style: italic;
    font-weight: 500;
    margin: 6px 0 12px;
    text-align: center;
  }
  .identity-modal .im-intro {
    font-family: var(--sans);
    font-style: italic;
    color: var(--mute);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 26px;
    text-align: center;
  }
  .login-field {
    margin-bottom: 16px;
  }
  .login-field label {
    display: block;
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--mute);
    margin-bottom: 8px;
  }
  .login-field input {
    width: 100%;
    padding: 13px 15px;
    font-family: var(--sans);
    font-size: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    outline: none;
    transition: border-color 0.18s;
    -webkit-appearance: none;
  }
  .login-field input:focus {
    border-color: var(--terra);
  }
  .login-error {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--rust);
    margin-bottom: 14px;
    min-height: 16px;
    display: none;
  }
  .login-submit {
    width: 100%;
    padding: 14px 20px;
    background: var(--terra);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s;
    margin-top: 4px;
  }
  .login-submit:hover { background: var(--terra-deep); }
  .login-submit:disabled { opacity: 0.55; cursor: not-allowed; }

  /* ================ CASH STATUS (Bargeld vor Ort) ================ */
  .cash-status {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 16px 0 28px;
  }
  @media (min-width: 720px) {
    .cash-status { grid-template-columns: repeat(3, 1fr); }
  }
  .cash-status .cs-cell {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
  }
  .cash-status .cs-cell.thorsten { border-color: var(--terra); background: linear-gradient(165deg, var(--cream) 0%, #f5e3d4 100%); }
  .cash-status .cs-cell.patricia { border-color: var(--sage-deep, #7a8b78); background: linear-gradient(165deg, var(--cream) 0%, #e8eee8 100%); }
  .cash-status .cs-cell.total { grid-column: 1 / -1; background: var(--ink); color: var(--cream); border-color: var(--ink); }
  @media (min-width: 720px) {
    .cash-status .cs-cell.total { grid-column: auto; }
  }
  .cash-status .lbl {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--mute);
    margin-bottom: 4px;
  }
  .cash-status .cs-cell.total .lbl { color: rgba(245, 235, 220, 0.65); }
  .cash-status .val {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
  }
  .cash-status .cs-cell.total .val { color: var(--cream); font-size: 1.5rem; }
  .cash-status .sub {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    margin-top: 3px;
  }
  .cash-status .cs-cell.total .sub { color: rgba(245, 235, 220, 0.6); }

  /* ================ VIEW TABS (sticky below topnav) ================ */
  .view-tabs-wrap {
    position: sticky;
    top: var(--topnav-h, 52px);
    z-index: 1075;
    background: rgba(247, 241, 232, 0.94);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
    margin: 0 -16px 0;
    transition: background 0.3s ease;
  }
  [data-theme="dark"] .view-tabs-wrap { background: rgba(26, 22, 18, 0.94); }
  .view-tabs-wrap::before,
  .view-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0; bottom: 1px;
    width: 24px;
    pointer-events: none;
    z-index: 2;
  }
  .view-tabs-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--cream), transparent);
  }
  .view-tabs-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--cream), transparent);
  }
  .view-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tab {
    flex-shrink: 0;
    /* Touch-target: min 44px for premium-feel (Apple HIG / Material) */
    min-height: 44px;
    padding: 11px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
  }
  .view-tab:hover { border-color: var(--terra); color: var(--terra); }
  .view-tab.active {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }
  @media (max-width: 480px) {
    .view-tab { padding: 10px 14px; font-size: 12.5px; min-height: 42px; }
  }
  /* Hide non-matching sections per current view */
  body.view-dashboard section.page:not([data-view~="dashboard"]) { display: none; }
  body.view-prep      section.page:not([data-view~="prep"])      { display: none; }
  body.view-trip      section.page:not([data-view~="trip"])      { display: none; }
  body.view-tools     section.page:not([data-view~="tools"])     { display: none; }
  body.view-costs     section.page:not([data-view~="costs"])     { display: none; }
  /* On dashboard view, hide global hero — dashboard has its own */
  body.view-dashboard header.hero { display: none; }
  /* view-all: no rule, show everything */

  /* FAB section labels */
  .fab .fab-section-label {
    font-family: var(--sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--mute);
    padding: 4px 14px 0;
    margin-top: 4px;
  }
  .fab .fab-section-label:first-child { margin-top: 0; }
  .fab .fab-action.fab-view-active {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }
  .fab .fab-action.fab-view-active .fa-icon {
    background: var(--cream);
    color: var(--ink);
  }
  .fab .fab-action svg.fa-svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* ================ DASHBOARD ================ */
  #dashboard h2 { margin-bottom: 8px; }
  .dash-hero {
    background: linear-gradient(135deg, #2a251f 0%, #3a2f24 50%, #4a3a2a 100%);
    border-radius: 18px;
    padding: 32px 24px;
    margin: 16px 0 28px;
    text-align: center;
    color: var(--cream);
  }
  .dash-hero.compact {
    padding: 18px 22px;
    margin: 12px 0 18px;
    border-radius: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    align-items: center;
    text-align: left;
  }
  .dash-hero.compact .dh-greet {
    font-size: 10.5px;
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 1;
  }
  .dash-hero.compact .dh-name {
    font-size: 1.15rem;
    margin-bottom: 0;
    grid-column: 1;
    grid-row: 2;
    line-height: 1.2;
  }
  .dash-hero.compact .dh-countdown {
    font-size: 2.2rem;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    line-height: 1;
  }
  .dash-hero.compact .dh-countdown-label {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 11px;
    margin-top: 4px;
    color: rgba(245, 235, 220, 0.6);
  }
  [data-theme="dark"] .dash-hero {
    background: linear-gradient(135deg, #1a1612 0%, #2a221b 50%, #3a2d22 100%);
  }

  /* ================ DASH NAV GRID (compact section list) ================ */
  .dash-nav-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
  }
  .dash-nav-grid .dn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dash-nav-grid .dn-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 4px 4px;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 4px;
  }
  .dash-nav-grid .dn-group-title {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--mute);
    font-weight: 700;
  }
  .dash-nav-grid .dn-group-count {
    font-family: var(--sans);
    font-size: 10.5px;
    color: var(--mute-2);
  }
  .dash-nav-grid .dn-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  @media (min-width: 640px) {
    .dash-nav-grid .dn-tiles { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 880px) {
    .dash-nav-grid .dn-tiles { grid-template-columns: repeat(4, 1fr); }
  }
  .dash-nav-grid .dn-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-out);
    min-height: 60px;
  }
  .dash-nav-grid .dn-tile:hover {
    border-color: var(--terra);
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.06);
  }
  .dash-nav-grid .dn-tile:active { transform: scale(0.97); }
  .dash-nav-grid .dn-tile-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(193, 116, 76, 0.10);
    color: var(--terra);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dash-nav-grid .dn-tile-icon svg { width: 16px; height: 16px; }
  .dash-nav-grid .dn-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
  }
  .dash-nav-grid .dn-tile-name {
    font-family: var(--serif);
    font-size: 0.98rem;
    line-height: 1.2;
    color: var(--ink);
    font-weight: 500;
  }
  .dash-nav-grid .dn-tile-preview {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    letter-spacing: 0.02em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dash-hero .dh-greet {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: rgba(245, 235, 220, 0.55);
    margin-bottom: 4px;
  }
  .dash-hero .dh-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.5rem;
    color: rgba(245, 235, 220, 0.85);
    margin-bottom: 22px;
  }
  .dash-hero .dh-countdown {
    font-family: var(--serif);
    font-size: 4rem;
    font-weight: 700;
    color: #f5d6a8;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  }
  .dash-hero .dh-countdown-label {
    font-family: var(--sans);
    font-size: 13px;
    color: rgba(245, 235, 220, 0.7);
    margin-top: 6px;
    letter-spacing: 0.3px;
  }
  .dash-hero .dh-icon {
    width: 56px; height: 56px; margin: 0 auto;
    color: #f5d6a8;
  }
  .dash-hero .dh-icon svg { width: 100%; height: 100%; }

  .dash-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 28px;
  }
  @media (min-width: 720px) {
    .dash-tiles { grid-template-columns: repeat(4, 1fr); }
  }
  .dash-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 18px 22px;
    border-radius: 16px;
    border: 1px solid var(--line);
    background: var(--cream);
    text-decoration: none;
    color: var(--ink);
    transition: all 0.18s ease;
    min-height: 150px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .dash-tile::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 90px; height: 90px;
    background: radial-gradient(circle, rgba(193, 116, 76, 0.12) 0%, transparent 65%);
    pointer-events: none;
    transition: transform 0.25s ease;
  }
  .dash-tile::after {
    content: '→';
    position: absolute;
    bottom: 16px;
    right: 16px;
    color: var(--terra);
    font-size: 18px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s, transform 0.18s;
    font-family: var(--sans);
  }
  .dash-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-color: var(--terra);
  }
  .dash-tile:hover::before {
    transform: scale(1.4);
  }
  .dash-tile:hover::after {
    opacity: 1;
    transform: translateX(0);
  }
  .dash-tile .dt-icon {
    width: 32px; height: 32px;
    color: var(--terra);
    stroke-width: 1.6;
  }
  .dash-tile .dt-icon svg { width: 100%; height: 100%; }
  .dash-tile:hover .dt-icon { color: var(--rust); }
  .dash-tile .dt-label {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--mute);
  }
  .dash-tile .dt-title {
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--ink);
  }
  .dash-tile .dt-desc {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    line-height: 1.45;
    margin-top: auto;
  }

  .dash-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 28px;
  }
  @media (min-width: 720px) {
    .dash-stats { grid-template-columns: repeat(4, 1fr); }
  }
  .dash-stat {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s;
  }
  .dash-stat:hover { border-color: var(--terra); }
  .dash-stat .ds-label {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .dash-stat .ds-value {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.1;
  }
  .dash-stat .ds-sub {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
  }

  .dash-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }
  @media (min-width: 720px) {
    .dash-row { grid-template-columns: 1fr 1fr; }
  }
  .dash-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
  }
  .dash-card h3 {
    font-family: var(--serif);
    font-size: 1.15rem;
    margin: 0 0 10px;
  }
  .dash-card .dc-link {
    color: var(--terra);
    text-decoration: none;
    font-size: 13px;
    font-family: var(--sans);
    float: right;
  }
  .dash-card .dc-link:hover { text-decoration: underline; }
  .dash-weather-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .dash-weather-row .dwx {
    background: rgba(0,0,0,0.03);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dash-weather-row .dwx-name {
    font-family: var(--sans);
    font-size: 12.5px;
    flex: 1;
  }
  .dash-weather-row .dwx-temp {
    font-weight: 600;
    color: var(--ink);
  }
  .dash-weather-row .dwx-icon { width: 18px; height: 18px; color: var(--terra); display: inline-flex; }
  .dash-weather-row .dwx-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .dash-next {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .dash-next li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 13px;
  }
  .dash-next li:last-child { border-bottom: none; }
  .dash-next .dn-when {
    font-family: var(--sans);
    color: var(--terra);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-right: 8px;
  }
  .dash-next .dn-empty {
    color: var(--mute);
    font-style: italic;
  }

  /* ================ WEATHER FOOTER + PAGE ================ */
  .weather-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--cream);
    border-top: 1px solid var(--line);
    padding: 7px calc(env(safe-area-inset-right, 0) + 12px) calc(env(safe-area-inset-bottom, 0) + 7px) calc(env(safe-area-inset-left, 0) + 12px);
    display: flex;
    gap: 10px;
    overflow-x: auto;
    z-index: 1085;
    font-size: 12px;
    font-family: var(--sans);
    color: var(--ink-2);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
  }
  .weather-footer::-webkit-scrollbar { display: none; }
  .weather-footer::after {
    content: '';
    position: sticky;
    right: 0;
    flex-shrink: 0;
    width: 24px;
    margin-left: -24px;
    background: linear-gradient(to left, var(--cream), transparent);
    pointer-events: none;
  }
  @media (max-width: 480px) {
    .weather-footer { padding-left: 8px; padding-right: 8px; gap: 8px; font-size: 11.5px; }
    .weather-footer a { padding: 3px 6px; gap: 4px; }
  }
  .weather-footer a {
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 12px;
    transition: background 0.15s;
    white-space: nowrap;
  }
  .weather-footer a:hover { background: rgba(0,0,0,0.04); }
  .weather-footer .wf-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; }
  .weather-footer .wf-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .weather-footer .wf-name { font-style: italic; }
  .weather-footer .wf-temp { font-weight: 600; color: var(--ink); }
  .weather-footer .wf-clocks {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-right: 4px;
  }
  .weather-footer .wf-clock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(193, 116, 76, 0.1);
    border-radius: 12px;
    white-space: nowrap;
  }
  .weather-footer .wf-clock-tz {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--terra);
    font-weight: 700;
  }
  .weather-footer .wf-clock-time {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .weather-footer .wf-sep {
    flex-shrink: 0;
    width: 1px;
    height: 18px;
    background: var(--line);
    margin: 0 2px;
  }
  @media (max-width: 480px) {
    .weather-footer .wf-clock { padding: 2px 6px; }
    .weather-footer .wf-clock-tz { font-size: 9px; letter-spacing: 0.6px; }
  }
  body.auth-required .weather-footer { display: none; }
  body { padding-bottom: 50px; }
  [data-theme="dark"] .weather-footer {
    background: var(--cream);
    border-top-color: var(--line);
  }

  .weather-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
  }
  .weather-card .wc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }
  .weather-card h3 {
    font-family: var(--serif);
    font-size: 1.4rem;
    margin: 0;
  }
  .weather-card .wc-sub {
    font-size: 0.7em;
    color: var(--mute);
    font-style: italic;
    margin-left: 6px;
  }
  .weather-card .wc-now {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .weather-card .wc-icon { width: 36px; height: 36px; color: var(--terra); }
  .weather-card .wc-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .weather-card .wc-temp {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ink);
  }
  .weather-card .wc-meta {
    color: var(--mute);
    font-size: 12.5px;
    margin-bottom: 12px;
  }
  .weather-card .wc-forecast {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
  @media (max-width: 600px) {
    .weather-card .wc-forecast { grid-template-columns: repeat(4, 1fr); }
  }
  .wd-day {
    text-align: center;
    padding: 8px 4px;
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
    font-size: 11.5px;
  }
  .wd-date { color: var(--mute); margin-bottom: 4px; font-size: 10.5px; }
  .wd-icon { width: 24px; height: 24px; margin: 4px auto; color: var(--terra); }
  .wd-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .wd-temps { font-weight: 600; color: var(--ink); }
  .wd-rain { color: var(--terra); font-size: 10.5px; margin-top: 2px; }

  /* ================ PULL-TO-REFRESH ================ */
  .ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60px);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px solid var(--line);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1095;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
    opacity: 0;
  }
  .ptr-indicator svg {
    width: 18px; height: 18px;
    stroke: var(--terra); fill: none;
    stroke-width: 2; stroke-linecap: round;
  }
  .ptr-indicator.spinning svg {
    animation: ptrSpin 0.8s linear infinite;
  }
  @keyframes ptrSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  /* ================ QUICK-FIND SEARCH ================ */
  .qf-trigger {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    margin-left: 4px;
    padding: 0;
  }
  .qf-trigger:hover { border-color: var(--terra); color: var(--terra); }
  .qf-trigger svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .qf-modal {
    position: fixed;
    inset: 0;
    z-index: 1099;
    display: none;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: flex-start;
    justify-content: center;
    padding: 80px 16px 16px;
  }
  .qf-modal.open { display: flex; }
  .qf-card {
    width: 100%;
    max-width: 580px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
    overflow: hidden;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
  }
  .qf-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
  }
  .qf-input-wrap svg {
    width: 16px; height: 16px;
    stroke: var(--mute); fill: none; stroke-width: 1.8; stroke-linecap: round;
    flex-shrink: 0;
  }
  .qf-input {
    flex: 1;
    background: transparent;
    border: none;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    outline: none;
    padding: 0;
  }
  .qf-input::placeholder { color: var(--mute); }
  .qf-kbd {
    font-family: var(--sans);
    font-size: 10.5px;
    color: var(--mute);
    background: rgba(0,0,0,0.05);
    padding: 3px 6px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .qf-results {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0;
  }
  .qf-empty {
    padding: 24px;
    text-align: center;
    color: var(--mute);
    font-family: var(--sans);
    font-size: 13px;
  }
  .qf-result {
    display: block;
    padding: 10px 18px;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    border-left: 2px solid transparent;
  }
  .qf-result:hover, .qf-result.active {
    background: rgba(193, 116, 76, 0.08);
    border-left-color: var(--terra);
  }
  .qf-result .qfr-title {
    font-family: var(--serif);
    font-size: 14.5px;
    color: var(--ink);
  }
  .qf-result .qfr-meta {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
  }
  [data-theme="dark"] .qf-card { background: var(--paper); }
  [data-theme="dark"] .qf-kbd { background: rgba(255,255,255,0.08); }

  /* ================ BURGER NAV DRAWER ================ */
  .nav-burger {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    margin-left: 4px;
    padding: 0;
  }
  .nav-burger:hover { border-color: var(--terra); color: var(--terra); }
  .nav-burger svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
  @media (max-width: 880px) {
    .nav-burger { display: inline-flex; }
    nav.topnav .links > a:not(.heute-pill),
    nav.topnav .nav-group-label,
    nav.topnav .nav-divider,
    nav.topnav .nav-weather { display: none !important; }
  }
  .nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    z-index: 1094;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .nav-drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
  }
  .nav-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 340px;
    max-width: 88vw;
    background: var(--cream);
    z-index: 1095;
    /* Push off-screen by 105% — translateX(100%) leaves a sliver visible on some
       browsers due to sub-pixel rounding, causing a "PA…" peek of the drawer header. */
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    box-shadow: -4px 0 24px rgba(0,0,0,0.22);
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
  }
  .nav-drawer.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
  }
  .nav-drawer .nd-head {
    position: sticky;
    top: 0;
    background: var(--cream);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(env(safe-area-inset-top, 0) + 16px) 22px 14px 22px;
    border-bottom: 1px solid var(--line);
    z-index: 2;
  }
  .nav-drawer .nd-head h3 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.35rem;
    margin: 0;
    color: var(--ink);
  }
  .nav-drawer .nd-close {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    width: 34px; height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
  }
  .nav-drawer .nd-close:hover { border-color: var(--rust); color: var(--rust); }
  .nav-drawer .nd-body {
    padding: 12px 22px calc(22px + env(safe-area-inset-bottom, 0)) 22px;
  }
  .nav-drawer .nd-section {
    margin-bottom: 22px;
  }
  .nav-drawer .nd-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 8px;
  }
  .nav-drawer .nd-section-head .nd-icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--terra);
    color: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .nav-drawer .nd-section-head .nd-icon svg {
    width: 13px; height: 13px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .nav-drawer .nd-section-head h4 {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--ink);
    margin: 0;
    font-weight: 700;
  }
  .nav-drawer a.nd-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    color: var(--ink);
    text-decoration: none;
    background: transparent;
    border-radius: 8px;
    font-family: var(--serif);
    font-size: 1.05rem;
    transition: background 0.12s, color 0.12s;
  }
  .nav-drawer a.nd-link:hover {
    background: rgba(193, 116, 76, 0.08);
    color: var(--terra);
  }
  .nav-drawer a.nd-link::after {
    content: '›';
    font-family: var(--sans);
    color: var(--mute);
    font-size: 1.3rem;
    line-height: 1;
    margin-left: 8px;
  }
  [data-theme="dark"] .nav-drawer { background: var(--paper); }
  [data-theme="dark"] .nav-drawer .nd-head { background: var(--paper); }
  [data-theme="dark"] .nav-drawer-backdrop { background: rgba(0,0,0,0.7); }

  /* Fixed logout button in top-right corner — always accessible */
  .floating-logout {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 12px);
    right: calc(env(safe-area-inset-right, 0) + 12px);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--cream);
    color: var(--mute);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1050;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.15s ease;
  }
  .floating-logout:hover {
    border-color: var(--rust);
    color: var(--rust);
    transform: scale(1.05);
  }
  .floating-logout svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.auth-required .floating-logout {
    display: none;
  }

  nav.topnav .nav-help,
  nav.topnav .nav-weather,
  nav.topnav .nav-theme {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    width: 28px; height: 28px;
    border-radius: 50%;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1;
  }
  nav.topnav .nav-help:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  nav.topnav .nav-weather:hover {
    border-color: var(--deep);
    color: var(--deep);
  }
  nav.topnav .nav-theme:hover {
    border-color: var(--gold);
    color: var(--gold);
  }
  nav.topnav .nav-weather svg,
  nav.topnav .nav-theme svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  /* Show sun icon in dark mode, moon in light mode (the inactive one is hidden) */
  nav.topnav .nav-theme .icon-sun  { display: none; }
  nav.topnav .nav-theme .icon-moon { display: inline-block; }
  [data-theme="dark"] nav.topnav .nav-theme .icon-sun  { display: inline-block; }
  [data-theme="dark"] nav.topnav .nav-theme .icon-moon { display: none; }

  /* ================ DRIVER BOOKINGS ================ */
  .booking-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
  }
  @media (min-width: 700px) {
    .booking-summary { grid-template-columns: repeat(5, 1fr); }
  }
  .booking-summary .bs-cell {
    background: var(--cream);
    padding: 14px 16px;
    text-align: center;
  }
  .booking-summary .bs-label {
    font-family: var(--sans);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .booking-summary .bs-count {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
  }
  .booking-summary .bs-cell.offen      .bs-count { color: var(--mute); }
  .booking-summary .bs-cell.angefragt  .bs-count { color: var(--gold); }
  .booking-summary .bs-cell.gebucht    .bs-count { color: var(--sage-deep); }
  .booking-summary .bs-cell.bezahlt    .bs-count { color: var(--terra); }
  .booking-summary .bs-cell.storniert  .bs-count { color: var(--rust); }

  .driver-bookings {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .driver-bookings .db-toolbar {
    padding: 14px 22px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }
  .driver-bookings .db-toolbar button {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--cream);
    padding: 10px 18px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .driver-bookings .db-toolbar button:hover { background: var(--terra); border-color: var(--terra); }
  .driver-bookings .db-toolbar button.secondary {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line);
  }
  .driver-bookings .db-toolbar button.secondary:hover {
    background: transparent;
    color: var(--terra);
    border-color: var(--terra);
  }
  .driver-bookings .db-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .driver-bookings table {
    width: 100%;
    border-collapse: collapse;
    min-width: 820px;
  }
  .driver-bookings th {
    background: var(--paper);
    text-align: left;
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mute);
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .driver-bookings th.amt, .driver-bookings td.amt { text-align: right; }
  .driver-bookings th.act, .driver-bookings td.act { text-align: center; width: 44px; }
  .driver-bookings td {
    padding: 4px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: middle;
  }
  .driver-bookings tr:last-child td { border-bottom: none; }
  .driver-bookings input,
  .driver-bookings select {
    width: 100%;
    padding: 10px 10px;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    border-radius: 3px;
    transition: all 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
  }
  .driver-bookings select {
    background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238a7f70' d='M5 6L0 0h10z'/></svg>") no-repeat right 10px center;
    padding-right: 28px;
  }
  .driver-bookings input:hover, .driver-bookings select:hover { background-color: var(--paper); }
  .driver-bookings input:focus, .driver-bookings select:focus {
    outline: none;
    background-color: var(--cream);
    border-color: var(--terra);
  }
  .driver-bookings .col-etappe { min-width: 220px; }
  .driver-bookings .col-date   { width: 130px; }
  .driver-bookings .col-name   { width: 150px; }
  .driver-bookings .col-tel    { width: 140px; }
  .driver-bookings .col-price  { width: 100px; }
  .driver-bookings .col-status { width: 130px; }
  .driver-bookings td.col-status select {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
  }
  .driver-bookings tr.status-offen     td.col-status select { color: var(--mute); }
  .driver-bookings tr.status-angefragt td.col-status select { color: var(--gold); background-color: rgba(176, 141, 91, 0.08); }
  .driver-bookings tr.status-gebucht   td.col-status select { color: var(--sage-deep); background-color: rgba(94, 107, 86, 0.08); }
  .driver-bookings tr.status-bezahlt   td.col-status select { color: var(--terra); background-color: rgba(181, 107, 74, 0.08); }
  .driver-bookings tr.status-storniert td.col-status select { color: var(--rust); background-color: rgba(150, 74, 62, 0.08); }
  .driver-bookings .empty-state {
    padding: 36px 20px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--mute);
    font-size: 14px;
  }
  .driver-bookings .del-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    width: 32px; height: 32px;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s ease;
    margin: 0 auto;
    display: block;
  }
  .driver-bookings .del-btn:hover {
    border-color: var(--rust);
    color: var(--rust);
    background: var(--cream);
  }

  /* ================ CUSTOM POI MODAL ================ */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 12, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .modal-backdrop.show { display: flex; }
  .modal-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 24px 22px;
    max-width: 460px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
  }
  .modal-card .mc-eyebrow {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.8px;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .modal-card h3 {
    font-family: var(--serif);
    font-size: 1.4rem;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.2;
  }
  .modal-card p.help {
    font-family: var(--sans);
    font-style: italic;
    color: var(--mute);
    font-size: 13px;
    margin-bottom: 18px;
    line-height: 1.55;
  }
  .modal-card label {
    display: block;
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 6px;
    margin-top: 14px;
  }
  .modal-card input,
  .modal-card select,
  .modal-card textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--line);
    background: var(--cream);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
  }
  .modal-card select {
    background: var(--cream) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%238a7f70' d='M5 6L0 0h10z'/></svg>") no-repeat right 14px center;
    padding-right: 36px;
  }
  .modal-card textarea {
    min-height: 64px;
    font-family: var(--serif);
    font-style: italic;
    resize: vertical;
  }
  .modal-card input:focus, .modal-card select:focus, .modal-card textarea:focus {
    outline: none;
    border-color: var(--terra);
  }
  .modal-card .mc-actions {
    display: flex;
    gap: 8px;
    margin-top: 22px;
    flex-wrap: wrap;
  }
  .modal-card button {
    background: var(--ink);
    color: var(--cream);
    border: 1px solid var(--ink);
    padding: 11px 18px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex: 1;
  }
  .modal-card button.secondary {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line);
  }
  .modal-card button:hover { background: var(--terra); border-color: var(--terra); color: var(--cream); }
  .modal-card .mc-actions .danger {
    background: transparent;
    color: var(--rust);
    border-color: var(--line);
  }
  .modal-card .mc-actions .danger:hover {
    background: transparent;
    color: var(--cream);
    background-color: var(--rust);
    border-color: var(--rust);
  }

  /* Custom POI marker (slightly differentiated from defaults) */
  .map-pin.custom .pin-circle {
    background: var(--ink-2);
    border: 2px solid var(--gold);
  }

  /* Unverified POIs (Vorschlag, nicht von Hand verifiziert) */
  .map-pin.unverified .pin-circle {
    border: 2px dashed var(--cream);
    opacity: 0.85;
    box-shadow: 0 1px 3px rgba(42, 37, 32, 0.15);
  }
  .map-pin.unverified.lodging .pin-circle,
  .map-pin.unverified.sight   .pin-circle,
  .map-pin.unverified.beach   .pin-circle,
  .map-pin.unverified.food    .pin-circle,
  .map-pin.unverified.port    .pin-circle,
  .map-pin.unverified.peak    .pin-circle {
    background-color: transparent;
  }
  .map-pin.unverified.lodging .pin-circle { background-color: rgba(181, 107, 74, 0.55); }
  .map-pin.unverified.sight   .pin-circle { background-color: rgba(122, 136, 112, 0.55); }
  .map-pin.unverified.beach   .pin-circle { background-color: rgba(58, 79, 94, 0.55); }
  .map-pin.unverified.food    .pin-circle { background-color: rgba(176, 141, 91, 0.55); }
  .map-pin.unverified.port    .pin-circle { background-color: rgba(74, 67, 57, 0.55); }
  .map-pin.unverified.peak    .pin-circle { background-color: rgba(150, 74, 62, 0.55); }

  /* Popup warning for unverified */
  .leaflet-popup-content .pop-warn {
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(176, 141, 91, 0.12);
    border-left: 2px solid var(--gold);
    font-family: var(--serif);
    font-style: italic;
    font-size: 12px;
    color: var(--mute);
    line-height: 1.4;
  }

  /* Legend extension for unverified */
  .map-legend .li.unverified {
    color: var(--mute);
  }
  .map-legend .li.unverified::before {
    background: var(--cream);
    border: 1.5px dashed var(--mute);
    box-shadow: none;
  }
  .map-legend .li.custom { color: var(--terra); }
  .map-legend .li.custom::before {
    background: var(--ink-2);
    border: 2px solid var(--gold);
  }

  /* ================ ATM per-person breakdown ================ */
  .atm-person-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 18px;
  }
  .atm-person-breakdown .pb-cell {
    padding: 18px 20px;
    border-right: 1px solid var(--line-soft);
  }
  .atm-person-breakdown .pb-cell:last-child { border-right: none; }
  .atm-person-breakdown .pb-name {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .atm-person-breakdown .pb-eur {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--ink);
    line-height: 1;
    font-weight: 500;
  }
  .atm-person-breakdown .pb-extra {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
    margin-top: 6px;
  }
  .atm-person-breakdown .pb-cell.thorsten { border-top: 2px solid var(--terra); }
  .atm-person-breakdown .pb-cell.patricia { border-top: 2px solid var(--sage); }

  /* ================ DAY NOTES + JOURNAL ENTRIES (auto-injected) ================ */
  .day-extras {
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .day-extras .dx-meta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  @media (max-width: 480px) {
    .day-extras .dx-meta-row { grid-template-columns: 1fr; }
  }
  .day-extras .dx-meta-row input {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    width: 100%;
  }
  .day-extras .dx-meta-row input:focus {
    outline: none;
    border-color: var(--terra);
  }
  .day-extras .dx-add-entry {
    margin-left: auto;
    padding: 5px 12px;
    background: var(--terra);
    color: var(--cream);
    border: none;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    text-transform: none;
    letter-spacing: 0.2px;
  }
  .day-extras .dx-add-entry:hover { background: var(--rust); }
  .day-extras .dx-label { display: flex; align-items: center; gap: 8px; }
  .day-extras .dx-entries-empty {
    padding: 14px 16px;
    background: var(--cream);
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--mute);
    font-family: var(--sans);
    font-size: 12.5px;
    text-align: center;
  }
  .day-extras .dx-entry {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border-left-width: 3px;
  }
  .day-extras .dx-entry:last-child { margin-bottom: 0; }
  .day-extras .dx-entry.author-thorsten { border-left-color: var(--terra); }
  .day-extras .dx-entry.author-patricia { border-left-color: var(--sage-deep, #7a8b78); }
  .day-extras .dxe-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
  }
  .day-extras .dxe-author {
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
  }
  .day-extras .dxe-author.author-thorsten {
    background: var(--terra);
    color: var(--cream);
  }
  .day-extras .dxe-author.author-patricia {
    background: var(--sage-deep, #7a8b78);
    color: var(--cream);
  }
  .day-extras .dxe-mood { display: inline-flex; gap: 2px; flex-shrink: 0; }
  .day-extras .je-star {
    background: transparent;
    border: none;
    color: var(--line);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 1px;
    line-height: 1;
    transition: color 0.1s;
  }
  .day-extras .je-star.active { color: var(--terra); }
  .day-extras .je-star:hover { color: var(--rust); }
  .day-extras .dxe-saved {
    margin-left: auto;
    font-family: var(--sans);
    font-size: 10.5px;
    color: var(--terra);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .day-extras .dxe-saved.show { opacity: 1; }
  .day-extras .dxe-del {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
  }
  .day-extras .dxe-del:hover { border-color: var(--rust); color: var(--rust); }
  .day-extras .dxe-content {
    width: 100%;
    min-height: 170px;
    background: var(--surface, #fff);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 14px 14px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    overflow: hidden;
  }
  .day-extras .dxe-content:focus {
    outline: none;
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(181, 107, 74, 0.10);
  }
  .day-extras .dxe-content::placeholder { color: var(--mute); font-style: italic; }
  /* Publish-Button + foot */
  .day-extras .dxe-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
  }
  .day-extras .dxe-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    min-height: 42px;
    border-radius: 999px;
    border: 1.5px solid var(--terra);
    background: var(--terra);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
  }
  .day-extras .dxe-publish-btn:hover {
    background: var(--ink);
    border-color: var(--ink);
    transform: translateY(-1px);
  }
  .day-extras .dxe-publish-btn svg { flex-shrink: 0; }
  .day-extras .dxe-publish-btn.is-public {
    background: transparent;
    color: var(--terra);
  }
  .day-extras .dxe-publish-btn.is-public:hover {
    background: var(--terra);
    color: var(--cream);
  }
  .day-extras .dxe-publish-btn.is-pending {
    background: var(--gold, #c89a4a);
    border-color: var(--gold, #c89a4a);
    color: var(--ink);
  }
  .day-extras .dxe-foot-hint {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
    line-height: 1.3;
  }
  .day-extras .dx-section {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
  }
  .day-extras .dx-section:last-child { border-bottom: none; }
  @media (min-width: 768px) {
    .day-extras .dx-section { padding: 20px 28px; }
  }
  .day-extras .dx-label {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .day-extras .dx-label .saved {
    font-family: var(--serif);
    font-style: italic;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--sage-deep);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .day-extras .dx-label .saved.show { opacity: 1; }
  .day-extras textarea.dx-note {
    width: 100%;
    min-height: 70px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    background: var(--cream);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    border-radius: 4px;
    resize: vertical;
    line-height: 1.6;
    transition: border-color 0.15s ease;
  }
  .day-extras textarea.dx-note:focus {
    outline: none;
    border-color: var(--terra);
  }
  .day-extras .dx-photo-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .day-extras .dx-photo-upload:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  .day-extras input[type="file"] { display: none; }
  .day-extras .dx-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-top: 12px;
  }
  @media (min-width: 600px) {
    .day-extras .dx-gallery { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 900px) {
    .day-extras .dx-gallery { grid-template-columns: repeat(4, 1fr); }
  }
  .day-extras .dx-photo {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 4px;
    overflow: hidden;
    background: var(--paper-2);
    cursor: pointer;
    border: 1px solid var(--line);
  }
  .day-extras .dx-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
  }
  .day-extras .dx-photo:hover img { transform: scale(1.04); }
  .day-extras .dx-photo .dx-photo-del {
    position: absolute;
    top: 6px; right: 6px;
    width: 26px; height: 26px;
    background: rgba(42, 37, 32, 0.78);
    color: var(--cream);
    border: none;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .day-extras .dx-photo:hover .dx-photo-del,
  .day-extras .dx-photo:active .dx-photo-del { opacity: 1; }
  @media (max-width: 768px) {
    .day-extras .dx-photo .dx-photo-del { opacity: 1; }
  }

  /* Lightbox for photos */
  .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(20, 16, 12, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .lightbox.show { display: flex; }
  .lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
  }
  .lightbox .close {
    position: absolute;
    top: calc(20px + env(safe-area-inset-top));
    right: 20px;
    background: var(--cream);
    color: var(--ink);
    border: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
  }

  /* ================ PHRASEBOOK ================ */
  .phrase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 700px) {
    .phrase-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1000px) {
    .phrase-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .phrase-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .phrase-card .pc-head {
    background: var(--paper-2);
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
  }
  .phrase-card .pc-head .pc-eyebrow {
    font-family: var(--sans);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--terra);
    font-weight: 600;
  }
  .phrase-card .pc-head h4 {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    margin-top: 4px;
    line-height: 1.2;
  }
  .phrase-card .pc-list {
    padding: 6px 18px 14px;
  }
  .phrase-card .pc-row {
    padding: 10px 0;
    border-bottom: 1px dashed var(--line-soft);
  }
  .phrase-card .pc-row:last-child { border-bottom: none; }
  .phrase-card .pc-de {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    margin-bottom: 2px;
  }
  .phrase-card .pc-id {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.3;
  }
  .phrase-card .pc-pron {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute-2);
    margin-top: 2px;
  }

  /* ================ DRIVER / CONTACT LOG ================ */
  .contact-log {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .contact-log .cl-toolbar {
    padding: 14px 22px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
  }
  .contact-log .cl-toolbar button {
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--cream);
    padding: 10px 18px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .contact-log .cl-toolbar button:hover {
    background: var(--terra);
    border-color: var(--terra);
  }
  .contact-log .cl-list {
    list-style: none;
  }
  .contact-log .cl-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
  }
  @media (min-width: 700px) {
    .contact-log .cl-item {
      grid-template-columns: 1.4fr 1.6fr 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 14px 22px;
    }
  }
  .contact-log .cl-item:last-child { border-bottom: none; }
  .contact-log .cl-item input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    background: transparent;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    border-radius: 3px;
    transition: all 0.15s ease;
  }
  .contact-log .cl-item input.cl-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    font-weight: 500;
  }
  .contact-log .cl-item input:hover { background: var(--paper); }
  .contact-log .cl-item input:focus {
    outline: none;
    background: var(--cream);
    border-color: var(--terra);
  }
  .contact-log .cl-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .contact-log .cl-actions a, .contact-log .cl-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 3px;
    border: 1px solid var(--line);
    background: var(--cream);
    color: var(--mute);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
  }
  .contact-log .cl-actions a:hover { border-color: var(--sage-deep); color: var(--sage-deep); }
  .contact-log .cl-actions button.del:hover { border-color: var(--rust); color: var(--rust); }
  .contact-log .empty-state {
    padding: 36px 20px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--mute);
    font-size: 14px;
  }

  /* ================ WHATSAPP TEMPLATES ================ */
  .wa-template {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .wa-template .wa-head {
    padding: 12px 18px;
    background: var(--paper-2);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .wa-template .wa-head h4 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0;
  }
  .wa-template .wa-head button {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    padding: 6px 12px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .wa-template .wa-head button:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  .wa-template pre {
    margin: 0;
    padding: 14px 18px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-2);
    white-space: pre-wrap;
    line-height: 1.6;
  }

  /* ================ BACKUP & SYNC ================ */
  .sync-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 700px) {
    .sync-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .sync-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px 24px;
  }
  .sync-card .sc-eyebrow {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.8px;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .sync-card h3 {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.2;
  }
  .sync-card p {
    color: var(--ink-2);
    font-size: 13.5px;
    margin-bottom: 16px;
    line-height: 1.55;
  }
  .sync-card .sc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .sync-card button, .sync-card label.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    border: 1px solid var(--ink);
    color: var(--cream);
    padding: 11px 18px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .sync-card button.secondary, .sync-card label.btn.secondary {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line);
  }
  .sync-card button:hover, .sync-card label.btn:hover {
    background: var(--terra);
    border-color: var(--terra);
    color: var(--cream);
  }
  .sync-card input[type="file"] { display: none; }
  .sync-card .sc-meta {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
  }

  /* ================ IDENTITY SELECTOR ================ */
  .identity-block {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 24px;
  }
  .identity-block .ib-eyebrow {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 2.8px;
    color: var(--terra);
    font-weight: 600;
    margin-bottom: 8px;
  }
  .identity-block h3 {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 6px;
    line-height: 1.2;
  }
  .identity-block p {
    color: var(--ink-2);
    font-size: 13.5px;
    margin-bottom: 16px;
    line-height: 1.55;
  }
  .identity-block .id-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .identity-btn {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    padding: 11px 20px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .identity-btn:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  .identity-btn.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--cream);
  }
  .identity-btn.active.thorsten { background: var(--terra); border-color: var(--terra); }
  .identity-btn.active.patricia { background: var(--sage-deep); border-color: var(--sage-deep); }

  /* Identity badge in nav */
  nav.topnav .identity-tag {
    flex-shrink: 0;
    align-self: center;
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    margin-right: 6px;
    border: 1px solid currentColor;
  }
  nav.topnav .identity-tag.thorsten { color: var(--terra); }
  nav.topnav .identity-tag.patricia { color: var(--sage-deep); }
  nav.topnav .identity-tag.none { color: var(--mute-2); }

  /* ================ NOTFALL CHEATSHEET (print-friendly) ================ */
  .cheatsheet {
    background: var(--cream);
    border: 1px solid var(--rust);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 18px;
  }
  .cheatsheet h4 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--rust);
    margin-bottom: 4px;
    font-weight: 500;
  }
  .cheatsheet .cs-sub {
    font-family: var(--sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 18px;
  }
  .cheatsheet .cs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 24px;
  }
  @media (min-width: 600px) {
    .cheatsheet .cs-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .cheatsheet .cs-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .cheatsheet .cs-row:last-child { border-bottom: none; }
  .cheatsheet .cs-row .cs-label {
    font-family: var(--sans);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 3px;
  }
  .cheatsheet .cs-row .cs-val {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
  }
  .cheatsheet .cs-row a {
    color: var(--rust);
    text-decoration: none;
  }
  @media print {
    body * { visibility: hidden; }
    .cheatsheet, .cheatsheet * { visibility: visible; }
    .cheatsheet {
      position: absolute;
      left: 0; top: 0;
      width: 100%;
      box-shadow: none;
      border: 1px solid #000;
    }
  }

  /* ================ GALLERY ================ */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  @media (min-width: 600px) {
    .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (min-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(5, 1fr); }
  }
  .gallery-grid .gp {
    position: relative;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: var(--paper-2);
  }
  .gallery-grid .gp img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .gallery-grid .gp .gp-date {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(42,37,32,0.8), transparent);
    color: var(--cream);
    padding: 18px 8px 6px;
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
  }
  .gallery-section .empty-state {
    padding: 36px 20px;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    color: var(--mute);
    font-size: 14px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  /* Toast notifications */
  .toast {
    position: fixed;
    bottom: calc(70px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: var(--cream);
    padding: 12px 20px;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 13px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    z-index: 100060; /* above all modals (entry-modal 1100, doc-modal 10010) so feedback is always visible */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s;
    max-width: 90%;
    text-align: center;
  }
  .toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s;
  }

  /* Reference table for sunrise/tips */
  .ref-table {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .ref-table .rt-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-soft);
    align-items: baseline;
  }
  .ref-table .rt-row:last-child { border-bottom: none; }
  .ref-table .rt-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
  }
  .ref-table .rt-meta {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
    margin-top: 2px;
  }
  .ref-table .rt-val {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--terra);
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
  }
  .ref-table .rt-val .rt-idr {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .ref-table .rt-val .rt-eur {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--mute);
    font-weight: 400;
    margin-top: 2px;
  }

  /* ================ FOOTER ================ */
  footer {
    text-align: center;
    padding: 56px 24px calc(64px + env(safe-area-inset-bottom));
    color: var(--mute);
    font-family: var(--sans);
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-top: 1px solid var(--line);
    margin-top: 48px;
    line-height: 1.7;
  }
  footer .signature {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.4rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--terra);
    margin-bottom: 18px;
    line-height: 1.3;
  }
  footer .ornament {
    display: block;
    width: 40px;
    height: 1px;
    background: var(--line);
    margin: 16px auto;
  }
  @media (min-width: 768px) {
    footer { padding: 72px 24px 88px; margin-top: 64px; }
    footer .signature { font-size: 1.7rem; }
  }

  /* ================ PRINT ================ */
  @media print {
    nav.topnav { display: none; }
    header.hero { padding: 30px 20px; }
    .day-block { page-break-inside: avoid; }
    section.page { page-break-before: auto; padding: 24px 0; }
    body { font-size: 11px; }
  }

  /* ================ MOBILE SAFETY NET (iPhone) ================ */
  @media (max-width: 720px) {
    /* Prevent horizontal scrolls from rogue wide content */
    html, body { overflow-x: hidden; max-width: 100%; }
    body { width: 100%; position: relative; }

    /* Kill min-width on big tables (was forcing 480/720/820px → mobile overflow).
       Tables shrink to fit; horizontal-scroll fallback handles edge cases. */
    table.data, .expense-tracker, .atm-tracker, .driver-bookings,
    table.tracker-table {
      min-width: 0 !important;
      width: 100% !important;
      font-size: 12.5px;
    }
    table.data th, table.data td,
    .expense-tracker th, .expense-tracker td,
    .atm-tracker th, .atm-tracker td,
    .driver-bookings th, .driver-bookings td {
      padding: 8px 6px;
      word-break: break-word;
    }
    /* Table wrapper allows scroll if still doesn't fit */
    .table-wrap, .scroll-x {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* Long URLs / words break to new line instead of overflowing — broad selector */
    .card, .day-block, .lead, p, h1, h2, h3, h4, h5,
    .entry-card, .booking-card, .activity-card, .contact-card, .pkg-card, .ti-card,
    .dxe-content, .dxe-text, .em-help, .bs-item-body, .bs-card-body, .bs-card-title,
    .pop-title, .pop-meta, .lr-text, .stats-cat-row, .stats-cat-row *,
    .ec-title, .ec-meta, .ec-body,
    .cc-name, .dn-tile-name, .check-text, .check-row,
    .em-field, .em-field *, .nl-text, .toast {
      overflow-wrap: anywhere;
      word-break: break-word;
      min-width: 0;
    }

    /* Code/URLs inline */
    code, kbd, .nowrap { word-break: break-all; }

    /* All grid/flex children must allow shrinking to 0 (else content forces overflow) */
    .day-block *, section.page * {
      min-width: 0;
    }

    /* Standalone tables (no .table-wrap parent) get horizontal scroll fallback */
    table:not(.table-wrap table) { display: block; max-width: 100%; overflow-x: auto; }

    /* Modals stay within viewport — use safe-area + dvh for iOS */
    .modal, .entry-modal, .em-modal, .qf-modal {
      max-width: 100%;
      max-height: 100dvh;
      padding-bottom: env(safe-area-inset-bottom);
    }
    .modal .em-card, .entry-modal .em-card, .qf-card {
      max-width: calc(100% - 16px);
      margin: 8px;
    }
    .em-body, .modal-body, .qf-modal-body {
      max-width: 100%;
      overflow-x: hidden;
    }

    /* Pre-trip day-block list: tighter on mobile */
    .day-block.pretrip-day .day-header { padding: 10px 14px; gap: 6px; flex-wrap: wrap; }
    .day-block.pretrip-day .day-header .date { font-size: 1rem; }
    .day-block.pretrip-day .day-header .badge.prep { font-size: 9px; padding: 2px 7px; }
    .ptd-today-pill { font-size: 9px; padding: 2px 8px; margin-left: 8px; }

    /* Day-block normal trip days: ensure header wraps gracefully */
    .day-block .day-header { flex-wrap: wrap; gap: 8px; }
    .day-block .day-header .location { font-size: 12px; }

    /* Slots in day-blocks: full width stack */
    .slots { display: block !important; }
    .slot { width: 100%; }

    /* Cost-cards & cat-breakdown */
    .cat-breakdown { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .cat-breakdown .cb-cell { padding: 10px; min-width: 0; }
    .cat-breakdown .cb-cell .val { font-size: 14px; }
    .cat-breakdown .cb-cell .lbl { font-size: 9.5px; }

    /* Entry-card lists */
    .entry-list { gap: 8px; }
    .entry-card { padding: 12px 14px; min-width: 0; }
    .entry-card .ec-title { font-size: 14px; }

    /* Booking/Activity/Contact cards: tight padding */
    .booking-card, .activity-card, .contact-card { padding: 14px; }
    .activity-card .ac-photo { width: 64px; height: 64px; flex-shrink: 0; }

    /* Stats grid */
    .sc-grid { grid-template-columns: 1fr !important; }
    .stats-cat-row { grid-template-columns: 1fr; gap: 6px; padding: 12px; }
    .stats-cat-row .scr-bar { width: 100%; }

    /* Dashboard nav grid */
    .dn-tile { padding: 14px 12px; min-width: 0; }
    .dn-tile-name { font-size: 12px; line-height: 1.3; }

    /* Long days nav (Tagebuch pills) */
    .dn-pills { padding-bottom: 4px; }
    .dn-pills > * { flex-shrink: 0; }

    /* Category-grid cards */
    .category-card { padding: 14px; gap: 12px; }
    .category-card .cc-name { font-size: 14px; line-height: 1.3; }

    /* Currency widget */
    .currency-widget { padding: 14px; }
    .currency-widget .cw-row { grid-template-columns: 1fr !important; gap: 8px; }

    /* Tracker checklist on narrow screens */
    .check-grid { grid-template-columns: 1fr !important; }
    .check-row { padding: 10px 6px; gap: 10px; }
    .check-text strong { font-size: 13px; }
    .check-text small { font-size: 11px; }

    /* Checklist (Packliste/Reiseapotheke) — single column */
    .checklist { columns: 1 !important; }

    /* Lodging-grid */
    .lodging-grid { grid-template-columns: 1fr !important; }

    /* Flight cards */
    .flight { flex-direction: column; align-items: stretch; gap: 8px; }
    .flight .arrow { transform: rotate(90deg); align-self: center; min-width: 0; }

    /* Route editor items */
    .route-editor .re-item { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 10px 12px; }

    /* Map */
    #leafletMap { height: 360px; }

    /* Top-nav view tabs — let them scroll horizontally */
    .view-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .view-tabs::-webkit-scrollbar { display: none; }
    .view-tab { flex-shrink: 0; }

    /* Section H2 wraps cleanly */
    section.page > h2 { font-size: 1.55rem; line-height: 1.15; }
    section.page > h2[data-num]::before { font-size: 9px; }

    /* Main padding tighter */
    main { padding: 0 12px; }
  }

  /* === MOBILE BOTTOM NAV (4 quick actions, ≤720px only) === */
  .bottom-nav { display: none; }
  @media (max-width: 720px) {
    .bottom-nav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(253, 250, 243, 0.94);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-top: 1px solid var(--line);
      padding: 6px calc(env(safe-area-inset-right, 0)) calc(6px + env(safe-area-inset-bottom, 0)) calc(env(safe-area-inset-left, 0));
      z-index: 1080;
      box-shadow: 0 -2px 12px rgba(42, 37, 32, 0.06);
    }
    [data-theme="dark"] .bottom-nav {
      background: rgba(26, 22, 18, 0.94);
      border-top-color: rgba(255, 255, 255, 0.08);
    }
    .bn-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 8px 4px;
      background: transparent;
      border: none;
      color: var(--mute);
      font-family: var(--sans);
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: color 0.18s ease, transform 0.18s ease;
    }
    .bn-tab svg { stroke-width: 1.8; }
    .bn-tab:hover, .bn-tab.active { color: var(--terra); }
    .bn-tab:active { transform: scale(0.94); }
    .bn-tab.active svg { stroke-width: 2.2; }
    /* Push body content above bottom-nav + weather-footer stack */
    body { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
    /* Lift FAB above the whole bottom stack (nav + weather) */
    .fab {
      bottom: calc(120px + env(safe-area-inset-bottom));
    }
    /* Lift offline-badge above bottom stack */
    #offlineBadge {
      bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    }
    /* Toasts stack above bottom-nav */
    .toast, #toast {
      bottom: calc(120px + env(safe-area-inset-bottom)) !important;
    }
    /* Weather-footer sits ABOVE bottom-nav (was overlapping) */
    .weather-footer {
      bottom: calc(60px + env(safe-area-inset-bottom)) !important;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line-soft);
      box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
      padding-bottom: 7px !important;
    }
  }

  /* Ultra-small screens (older iPhones / Galaxy S small) */
  @media (max-width: 380px) {
    main { padding: 0 10px; }
    .cat-breakdown { grid-template-columns: 1fr 1fr !important; }
    .dn-tile { padding: 12px 10px; }
    .dn-tile-name { font-size: 11.5px; }
    .category-card { padding: 12px; gap: 10px; }
    .ec-title { font-size: 13px !important; }
  }

  /* ================ RESPONSIVE STATIC TABLE (.table-wrap table.data) ================ */
  /* On mobile, transform table into stacked cards. data-label added by JS from thead. */
  @media (max-width: 720px) {
    .table-wrap { overflow-x: visible !important; }
    .table-wrap table.data { display: block; width: 100%; border: none; }
    .table-wrap table.data thead { display: none; }
    .table-wrap table.data tbody { display: block; }
    .table-wrap table.data tr {
      display: block;
      background: var(--cream);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 14px;
      margin-bottom: 10px;
    }
    .table-wrap table.data td {
      display: block;
      padding: 5px 0;
      border: none;
      font-family: var(--sans);
      font-size: 13.5px;
      color: var(--ink-2);
      line-height: 1.45;
      white-space: normal;
    }
    .table-wrap table.data td::before {
      content: attr(data-label);
      display: block;
      font-family: var(--sans);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--mute);
      font-weight: 700;
      margin-bottom: 2px;
    }
    .table-wrap table.data td:first-child::before { display: none; }
    .table-wrap table.data td:first-child {
      font-family: var(--serif);
      font-style: italic;
      font-size: 1.1rem;
      color: var(--ink);
      font-weight: 500;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line-soft);
      margin-bottom: 6px;
    }
  }

  /* ================ CURRENCY WIDGET RATE PICKER ================ */
  .currency-widget .cw-rate-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 14px;
    flex-wrap: wrap;
  }
  .currency-widget .cw-rate-picker label {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--mute);
    font-weight: 600;
    flex-shrink: 0;
  }
  .currency-widget .cw-rate-picker select {
    flex: 1;
    min-width: 200px;
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238a7f70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }
  [data-theme="dark"] .currency-widget .cw-rate-picker select {
    background-color: var(--paper-2);
  }

  /* ================ CATEGORY GRID (sub-page picker) ================ */
  .category-grid-wrap {
    display: none;
    padding: 24px 16px 8px;
    max-width: 880px;
    margin: 0 auto;
  }
  /* Show category-grid in non-dashboard, non-all views when no section focused */
  body.view-prep:not([data-focused-section]) .category-grid-wrap,
  body.view-trip:not([data-focused-section]) .category-grid-wrap,
  body.view-tools:not([data-focused-section]) .category-grid-wrap,
  body.view-costs:not([data-focused-section]) .category-grid-wrap {
    display: block;
  }
  .category-grid-wrap .cg-title {
    font-family: var(--serif);
    font-size: 1.9rem;
    font-style: italic;
    color: var(--ink);
    margin: 0 0 4px;
    font-weight: 500;
  }
  .category-grid-wrap .cg-sub {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    margin: 0 0 22px;
  }
  .category-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  @media (min-width: 540px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .category-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
    text-decoration: none;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-out);
    position: relative;
    overflow: hidden;
  }
  .category-card:hover {
    border-color: var(--terra);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  }
  .category-card:active { transform: scale(0.985); }
  .category-card .cc-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(193, 116, 76, 0.12);
    color: var(--terra);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .category-card .cc-icon svg { width: 22px; height: 22px; }
  .category-card .cc-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .category-card .cc-num {
    display: block;
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--mute);
    font-weight: 600;
    line-height: 1;
  }
  .category-card .cc-name {
    display: block;
    font-family: var(--serif);
    font-size: 1.2rem;
    font-style: italic;
    color: var(--ink);
    line-height: 1.15;
    font-weight: 500;
  }
  .category-card .cc-arrow {
    flex-shrink: 0;
    color: var(--mute);
    font-size: 22px;
    line-height: 1;
    transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .category-card:hover .cc-arrow { color: var(--terra); transform: translateX(4px); }

  /* Back-Pill — visible only when a section is focused */
  .category-back { display: none; }
  body[data-focused-section] .category-back {
    display: block;
    position: sticky;
    top: 56px;
    z-index: 1074;
    padding: 12px 16px 8px;
    background: var(--paper);
    max-width: 880px;
    margin: 0 auto;
  }
  .category-back .cb-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .category-back .cb-pill:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  .category-back .cb-pill:active { transform: scale(0.96); }

  /* In non-dashboard views without focus → hide ALL sections */
  body.view-prep:not([data-focused-section]) section.page,
  body.view-trip:not([data-focused-section]) section.page,
  body.view-tools:not([data-focused-section]) section.page,
  body.view-costs:not([data-focused-section]) section.page {
    display: none !important;
  }
  /* Focus-Mode: only show the focused section (still respecting view filter) */
  body[data-focused-section] section.page {
    display: none !important;
  }
  body[data-focused-section] section.page.subview-visible {
    display: block !important;
  }
  /* In all-view, focus is also possible (override) */
  body.view-all[data-focused-section] section.page:not(.subview-visible) {
    display: none !important;
  }

  /* ================ ENTRY MODAL (popover für Ausgaben/Abhebungen/Aktivitäten) ================ */
  .entry-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
  }
  @media (min-width: 720px) {
    .entry-modal {
      align-items: center;
      padding: 24px;
    }
  }
  .entry-modal.open {
    display: flex;
    animation: revealUp var(--dur-base) var(--ease-out);
  }
  .entry-modal .em-card {
    width: 100%;
    max-width: 540px;
    max-height: 92vh;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 18px 18px 8px 8px;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalCardIn var(--dur-base) var(--ease-spring) both;
  }
  @media (min-width: 720px) {
    .entry-modal .em-card {
      border-radius: 16px;
    }
  }
  [data-theme="dark"] .entry-modal .em-card { background: var(--paper); }
  .entry-modal .em-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--line);
  }
  .entry-modal .em-head h3 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--ink);
    margin: 0;
  }
  .entry-modal .em-close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--mute);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .entry-modal .em-close:hover {
    border-color: var(--rust);
    color: var(--rust);
  }
  .entry-modal .em-body {
    padding: 18px 22px 8px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }
  .entry-modal .em-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0));
    border-top: 1px solid var(--line);
    background: var(--cream);
  }
  [data-theme="dark"] .entry-modal .em-foot { background: var(--paper); }
  .entry-modal .em-spacer { flex: 1; }
  .entry-modal .em-del {
    background: transparent;
    border: 1px solid var(--rust);
    color: var(--rust);
    padding: 8px 14px;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
  }
  .entry-modal .em-del:hover { background: var(--rust); color: var(--cream); }
  .entry-modal .primary {
    background: var(--terra);
    color: var(--cream);
    border: 1px solid var(--terra);
    padding: 10px 22px;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .entry-modal .primary:hover { background: var(--terra-deep); }

  /* Form fields inside entry modal */
  .em-body .em-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
  }
  .em-body .em-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .em-body .em-field-row .em-field { margin-bottom: 0; }
  .em-body label {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mute);
    font-weight: 600;
  }
  .em-body input[type="text"],
  .em-body input[type="date"],
  .em-body input[type="number"],
  .em-body input[type="tel"],
  .em-body input[type="url"],
  .em-body select,
  .em-body textarea {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    background: var(--cream);
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }
  [data-theme="dark"] .em-body input,
  [data-theme="dark"] .em-body select,
  [data-theme="dark"] .em-body textarea { background: var(--paper-2); border-color: var(--line); color: var(--ink); }
  .em-body select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238a7f70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
  }
  .em-body input:focus,
  .em-body select:focus,
  .em-body textarea:focus {
    outline: none;
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(193, 116, 76, 0.15);
  }
  .em-body .em-help {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
    margin-top: 4px;
    line-height: 1.4;
  }
  .em-body .em-photo-preview {
    margin-top: 8px;
    width: 100%;
    height: 140px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mute);
    font-family: var(--sans);
    font-size: 12px;
  }

  /* ================ ENTRY CARDS LIST (Tables-Replacement) ================ */
  .entry-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  .entry-card {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    text-decoration: none;
    color: var(--ink);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-tap) var(--ease-out);
    font-family: inherit;
    font-size: inherit;
  }
  .entry-card:hover {
    border-color: var(--terra);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
  .entry-card:active { transform: scale(0.985); }
  .entry-card .ec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
  }
  .entry-card .ec-cat {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
    background: var(--paper-2);
    color: var(--ink-2);
  }
  .entry-card .ec-cat.transport  { background: rgba(109, 146, 168, 0.12); color: var(--deep); }
  .entry-card .ec-cat.food       { background: rgba(176, 141, 91, 0.15); color: var(--gold); }
  .entry-card .ec-cat.activity   { background: rgba(193, 116, 76, 0.15); color: var(--terra); }
  .entry-card .ec-cat.wellness   { background: rgba(122, 136, 112, 0.18); color: var(--sage-deep); }
  .entry-card .ec-cat.souvenir   { background: rgba(176, 91, 91, 0.15); color: var(--rust); }
  .entry-card .ec-cat.other      { background: var(--paper-2); color: var(--mute); }
  .entry-card .ec-amt {
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .entry-card .ec-amt.idr {
    color: var(--terra);
  }
  .entry-card .ec-desc {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--ink);
    margin: 4px 0;
    line-height: 1.3;
  }
  .entry-card .ec-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
    margin-top: 4px;
    flex-wrap: wrap;
  }
  .entry-card .ec-foot .ec-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .entry-card .ec-status {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .entry-card .ec-status.offen     { background: rgba(150, 78, 62, 0.12); color: var(--rust); }
  .entry-card .ec-status.angefragt { background: rgba(176, 141, 91, 0.18); color: var(--gold); }
  .entry-card .ec-status.gebucht   { background: rgba(122, 136, 112, 0.18); color: var(--sage-deep); }
  .entry-card .ec-status.bezahlt,
  .entry-card .ec-status.bestaetigt,
  .entry-card .ec-status.erlebt    { background: rgba(122, 136, 112, 0.30); color: var(--sage-deep); }
  .entry-card .ec-status.storniert,
  .entry-card .ec-status.abgesagt  { background: var(--paper-2); color: var(--mute); text-decoration: line-through; }
  .entry-card .ec-photo-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-2);
    border: 1px solid var(--line);
  }
  .entry-card.with-photo {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: start;
  }
  .entry-card.with-photo .ec-content {
    min-width: 0; /* allows truncation */
  }

  /* New-button styling for the toolbar above lists */
  .entry-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .entry-toolbar .et-spacer { flex: 1; }

  /* Hide old tables (kept in HTML for fallback but not displayed) */
  .table-replaced { display: none !important; }

  /* ================ STATS PAGE ================ */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 16px 0 8px;
  }
  @media (min-width: 720px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .stats-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .stats-card .sc-eyebrow {
    font-family: var(--sans);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--mute);
    font-weight: 600;
  }
  .stats-card h3 {
    font-family: var(--serif);
    font-size: 1.7rem;
    color: var(--ink);
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .stats-card p {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    margin: 0;
    line-height: 1.4;
  }
  .stats-cat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .stats-cat-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 10px;
  }
  .stats-cat-row .scr-name {
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    text-transform: capitalize;
  }
  .stats-cat-row .scr-bar {
    height: 6px;
    background: var(--paper-2);
    border-radius: 3px;
    overflow: hidden;
  }
  .stats-cat-row .scr-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--terra), var(--terra-deep));
    border-radius: 3px;
    transition: width var(--dur-slow) var(--ease-out);
  }
  .stats-cat-row .scr-amt {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .stats-top-day, .stats-person-split {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 20px;
  }
  .stats-person-split .sps-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .stats-person-split .sps-row:last-child { border-bottom: none; }
  .stats-person-split .sps-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ink);
  }
  .stats-person-split .sps-amt {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .stats-person-split .sps-count {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ================ TODAY-CARD (Dashboard) ================ */
  .today-card {
    background: linear-gradient(165deg, var(--cream) 0%, #fff5e8 100%);
    border: 1px solid var(--terra);
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(193, 116, 76, 0.10);
    position: relative;
    overflow: hidden;
  }
  [data-theme="dark"] .today-card {
    background: linear-gradient(165deg, var(--cream) 0%, var(--paper-2) 100%);
    border-color: var(--terra-deep);
  }
  .today-card .tc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .today-card .tc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    color: var(--terra);
  }
  .today-card .tc-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--terra);
    animation: heroPulse 2s ease-in-out infinite;
  }
  .today-card .tc-date {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
  }
  .today-card .tc-title {
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--ink);
    margin: 4px 0 2px;
    font-weight: 600;
  }
  .today-card .tc-meta {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--mute);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }
  .today-card .tc-weather {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: rgba(193, 116, 76, 0.06);
    border-radius: 10px;
  }
  .today-card .tc-weather:empty { display: none; }
  .today-card .tc-weather .twx {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-2);
  }
  .today-card .tc-weather .twx-icon {
    width: 18px; height: 18px;
    color: var(--terra);
  }
  .today-card .tc-section {
    margin-bottom: 12px;
  }
  .today-card .tc-section-label {
    font-family: var(--sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--mute);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .today-card .tc-acts {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .today-card .tc-acts li {
    padding: 6px 0;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
  }
  .today-card .tc-acts li:last-child { border-bottom: none; }
  .today-card .tc-acts li.tc-empty {
    color: var(--mute);
    font-style: italic;
    border-bottom: none;
  }
  .today-card .tc-acts li .ta-status {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .today-card .tc-acts li .ta-status.gebucht { background: rgba(122, 136, 112, 0.15); color: var(--sage-deep); }
  .today-card .tc-acts li .ta-status.bezahlt { background: rgba(176, 141, 91, 0.15); color: var(--gold); }
  .today-card .tc-acts li .ta-status.offen   { background: rgba(150, 78, 62, 0.12); color: var(--rust); }
  .today-card .tc-journal {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
    padding: 10px 14px;
    background: var(--cream);
    border-radius: 8px;
    border-left: 3px solid var(--terra);
  }
  .today-card .tc-journal .tc-empty {
    color: var(--mute);
    font-style: italic;
  }
  .today-card .tc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(193, 116, 76, 0.18);
  }
  .today-card .tc-btn {
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--line);
    background: var(--cream);
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .today-card .tc-btn.primary {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
  }
  .today-card .tc-btn:hover {
    border-color: var(--terra);
    transform: translateY(-1px);
  }
  .today-card .tc-btn:active {
    transform: scale(0.96);
  }

  /* ================ SETTINGS GRID ================ */
  .settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 720px) {
    .settings-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .settings-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .settings-card .sc-eyebrow {
    font-family: var(--sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--mute);
    font-weight: 600;
  }
  .settings-card h3 {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--ink);
    margin: 0;
  }
  .settings-card p {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-2);
    margin: 0;
    line-height: 1.5;
  }
  .settings-card .sc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    align-items: center;
  }
  .theme-pick.active {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
  }

  /* ================ INSPIRATION STRIP ================ */
  .inspiration-wrap {
    margin: 0 0 24px;
    padding: 18px 0 14px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .inspiration-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 0 0 12px;
  }
  .inspiration-head h4 {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--ink);
    margin: 0;
  }
  .inspiration-head .ih-meta {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .inspiration-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 0 8px;
    scroll-snap-type: x mandatory;
  }
  .inspiration-strip::-webkit-scrollbar { display: none; }
  .inspiration-strip .ins-card {
    position: relative;
    flex: 0 0 220px;
    height: 140px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: var(--line);
    overflow: hidden;
    text-decoration: none;
    color: var(--cream);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    scroll-snap-align: start;
  }
  .inspiration-strip .ins-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  }
  .inspiration-strip .ins-card:active {
    transform: scale(0.97);
  }
  .inspiration-strip .ins-card-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 22px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  }
  .inspiration-strip .ins-card-name {
    font-family: var(--serif);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .inspiration-strip .ins-card-meta {
    font-family: var(--sans);
    font-size: 10.5px;
    color: rgba(253, 250, 243, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }

  /* ================ ACTIVITY PHOTO CELL ================ */
  .col-photo { width: 52px; padding: 8px 4px 8px 8px !important; }
  .act-photo {
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background-size: cover;
    background-position: center;
    background-color: var(--paper-2);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mute);
    transition: border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-tap) var(--ease-out);
  }
  .act-photo.has-photo { border-color: var(--terra); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
  .act-photo.no-photo:hover { border-color: var(--terra); color: var(--terra); }
  .act-photo:active { transform: scale(0.92); }

  /* ================ PHOTO LIGHTBOX ================ */
  .photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    z-index: 1110;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
  }
  .photo-lightbox.open {
    display: flex;
    animation: revealUp var(--dur-base) var(--ease-out) both;
  }
  .photo-lightbox .pl-card {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .photo-lightbox img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  }
  .photo-lightbox .pl-cap {
    color: var(--cream);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  }

  /* ===================================================================
     MOTION SYSTEM — View transitions, micro-interactions, polish
     =================================================================== */

  /* ----- View transition: stagger sections fading in on view change ----- */
  @keyframes pageEnter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.is-view-changing section.page {
    animation: pageEnter var(--dur-slow) var(--ease-out) both;
  }
  /* Stagger: section index used as delay multiplier (set by JS) */
  body.is-view-changing section.page { animation-delay: 0ms; }
  body.is-view-changing section.page:nth-of-type(2) { animation-delay: 50ms; }
  body.is-view-changing section.page:nth-of-type(3) { animation-delay: 100ms; }
  body.is-view-changing section.page:nth-of-type(4) { animation-delay: 150ms; }
  body.is-view-changing section.page:nth-of-type(5) { animation-delay: 200ms; }

  /* Dashboard tiles cascade in on dashboard view change */
  body.is-view-changing .dash-tiles .dash-tile,
  body.is-view-changing .dash-stats .dash-stat {
    animation: pageEnter var(--dur-base) var(--ease-out) both;
  }
  body.is-view-changing .dash-tiles .dash-tile:nth-child(1) { animation-delay: 80ms; }
  body.is-view-changing .dash-tiles .dash-tile:nth-child(2) { animation-delay: 120ms; }
  body.is-view-changing .dash-tiles .dash-tile:nth-child(3) { animation-delay: 160ms; }
  body.is-view-changing .dash-tiles .dash-tile:nth-child(4) { animation-delay: 200ms; }
  body.is-view-changing .dash-stats .dash-stat:nth-child(1) { animation-delay: 240ms; }
  body.is-view-changing .dash-stats .dash-stat:nth-child(2) { animation-delay: 280ms; }
  body.is-view-changing .dash-stats .dash-stat:nth-child(3) { animation-delay: 320ms; }
  body.is-view-changing .dash-stats .dash-stat:nth-child(4) { animation-delay: 360ms; }

  /* ----- IntersectionObserver-based reveal — animation only, never hides content ----- */
  .reveal-on-scroll.in-view {
    animation: revealUp var(--dur-slow) var(--ease-out) both;
  }
  @keyframes revealUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ----- Tile / stat press feedback ----- */
  .dash-tile,
  .dash-stat {
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }
  .dash-tile:active {
    transform: translateY(-1px) scale(0.985);
    transition-duration: var(--dur-tap);
  }
  .dash-stat:active {
    transform: scale(0.97);
    transition-duration: var(--dur-tap);
  }
  /* Override existing hover transition with token */
  .dash-tile:hover {
    transition-timing-function: var(--ease-out);
  }

  /* ----- View tabs: smooth active indicator ----- */
  .view-tab {
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                transform var(--dur-tap) var(--ease-out);
  }
  .view-tab:active {
    transform: scale(0.94);
    transition-duration: var(--dur-tap);
  }
  .view-tab.active {
    animation: tabActivate var(--dur-base) var(--ease-spring) both;
  }
  @keyframes tabActivate {
    0%   { transform: scale(0.92); }
    60%  { transform: scale(1.04); }
    100% { transform: scale(1); }
  }

  /* ----- Drawer: smoother slide ----- */
  .nav-drawer {
    transition: transform var(--dur-slow) var(--ease-out);
  }
  .nav-drawer-backdrop {
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .nav-drawer-backdrop.open {
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
  }
  /* Drawer link cascade when opened */
  .nav-drawer.open .nd-section {
    animation: drawerSectionIn var(--dur-base) var(--ease-out) both;
  }
  .nav-drawer.open .nd-section:nth-child(1) { animation-delay: 100ms; }
  .nav-drawer.open .nd-section:nth-child(2) { animation-delay: 150ms; }
  .nav-drawer.open .nd-section:nth-child(3) { animation-delay: 200ms; }
  .nav-drawer.open .nd-section:nth-child(4) { animation-delay: 250ms; }
  .nav-drawer.open .nd-section:nth-child(5) { animation-delay: 300ms; }
  @keyframes drawerSectionIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .nav-drawer a.nd-link {
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-tap) var(--ease-out);
  }
  .nav-drawer a.nd-link:active {
    transform: scale(0.98);
    background: rgba(193, 116, 76, 0.14);
  }

  /* ----- Quick-Find Modal: scale-in entrance ----- */
  .qf-modal {
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .qf-modal.open .qf-card {
    animation: modalCardIn var(--dur-base) var(--ease-spring) both;
  }
  @keyframes modalCardIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .qf-result {
    transition: background var(--dur-fast) var(--ease-out),
                border-left-color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-fast) var(--ease-out);
  }
  .qf-result.active,
  .qf-result:hover {
    padding-left: 22px;
  }

  /* ----- Login & welcome modal entrance ----- */
  .welcome-modal[style*="display: flex"] .modal-card,
  .identity-modal[style*="display: flex"] .modal-card {
    animation: modalCardIn var(--dur-slow) var(--ease-spring) both;
  }

  /* ----- Toast: slide-up with subtle bounce ----- */
  .toast {
    transition: transform var(--dur-base) var(--ease-spring),
                opacity var(--dur-base) var(--ease-out),
                visibility 0s linear var(--dur-base);
  }
  .toast.show {
    transition: transform var(--dur-base) var(--ease-spring),
                opacity var(--dur-base) var(--ease-out),
                visibility 0s;
  }

  /* ----- FAB micro-interactions ----- */
  .fab .fab-main {
    transition: transform var(--dur-base) var(--ease-spring),
                background var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
  }
  .fab .fab-main:active {
    transform: scale(0.92);
    transition-duration: var(--dur-tap);
  }
  .fab.open .fab-main {
    transform: rotate(135deg);
    box-shadow: 0 6px 20px rgba(193, 116, 76, 0.45);
  }
  .fab.open .fab-actions { display: flex; }
  .fab.open .fab-action {
    animation: fabActionIn var(--dur-base) var(--ease-out) both;
  }
  .fab.open .fab-action:nth-child(1) { animation-delay: 0ms; }
  .fab.open .fab-action:nth-child(2) { animation-delay: 30ms; }
  .fab.open .fab-action:nth-child(3) { animation-delay: 60ms; }
  .fab.open .fab-action:nth-child(4) { animation-delay: 90ms; }
  .fab.open .fab-action:nth-child(5) { animation-delay: 120ms; }
  .fab.open .fab-action:nth-child(6) { animation-delay: 150ms; }
  .fab.open .fab-action:nth-child(7) { animation-delay: 180ms; }
  .fab.open .fab-action:nth-child(8) { animation-delay: 210ms; }
  @keyframes fabActionIn {
    from { opacity: 0; transform: translateY(8px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .fab .fab-action {
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-tap) var(--ease-out);
  }
  .fab .fab-action:active {
    transform: scale(0.95);
  }

  /* ----- Burger button feedback ----- */
  .nav-burger,
  .nav-theme,
  .nav-help,
  .qf-trigger {
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                transform var(--dur-tap) var(--ease-out);
  }
  .nav-burger:active,
  .nav-theme:active,
  .nav-help:active,
  .qf-trigger:active {
    transform: scale(0.9);
  }

  /* ----- Section heads expand/collapse arrow rotate ----- */
  .section-head[data-collapsed] svg.chev,
  .day-block .day-head[data-collapsed] svg.chev {
    transition: transform var(--dur-base) var(--ease-out);
  }
  .section-head[data-collapsed="true"] svg.chev,
  .day-block .day-head[data-collapsed="true"] svg.chev {
    transform: rotate(-90deg);
  }

  /* ----- Collapse expand animation (only fires on click expand, not initial render) ----- */
  section.page.was-just-expanded > *:not(h2) {
    animation: collapseExpand var(--dur-slow) var(--ease-out) both;
  }
  .day-block.was-just-expanded > *:not(.day-header) {
    animation: collapseExpand var(--dur-base) var(--ease-out) both;
  }
  @keyframes collapseExpand {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  /* Stagger first few children for richer feel */
  section.page.was-just-expanded > *:nth-child(2)  { animation-delay: 0ms; }
  section.page.was-just-expanded > *:nth-child(3)  { animation-delay: 40ms; }
  section.page.was-just-expanded > *:nth-child(4)  { animation-delay: 80ms; }
  section.page.was-just-expanded > *:nth-child(5)  { animation-delay: 120ms; }
  section.page.was-just-expanded > *:nth-child(6)  { animation-delay: 160ms; }
  section.page.was-just-expanded > *:nth-child(7)  { animation-delay: 200ms; }
  /* Section h2 chevron rotates smoothly */
  section.page > h2::after {
    transition: transform var(--dur-base) var(--ease-spring);
  }
  .day-block .day-header::after {
    transition: transform var(--dur-base) var(--ease-spring);
  }

  /* ----- Pull-to-refresh: smoother spinner curve ----- */
  .ptr-indicator {
    transition: transform var(--dur-base) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
  }

  /* ----- Buttons: tactile feedback ----- */
  button:not(:disabled):active,
  .btn:not(:disabled):active,
  a.btn:active {
    transform: scale(0.97);
    transition: transform var(--dur-tap) var(--ease-out);
  }

  /* ----- Heute pill subtle pulse ----- */
  @keyframes heutePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(181, 107, 74, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(181, 107, 74, 0.08); }
  }
  nav.topnav .heute-pill {
    animation: heutePulse 2.4s var(--ease-snap) infinite;
  }

  /* ----- Skeleton loading shimmer ----- */
  @keyframes skelShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--line-soft) 0%,
      var(--line) 50%,
      var(--line-soft) 100%
    );
    background-size: 200% 100%;
    animation: skelShimmer 1.4s linear infinite;
    border-radius: 4px;
    color: transparent;
    pointer-events: none;
    user-select: none;
  }

  /* ----- Card hover-lift smoother ----- */
  .card,
  .booking-card {
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }

  /* ----- Mobile-only: enhanced tap states ----- */
  @media (hover: none) and (pointer: coarse) {
    .dash-tile:active {
      transform: scale(0.97);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
    .view-tab:active {
      background: rgba(193, 116, 76, 0.12);
    }
  }

  /* ================ BLOG STUDIO ================ */
  .bs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 14px;
  }
  /* New-entry block (top of Blog-Studio) */
  .bs-new-block {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 22px;
  }
  .bs-new-head {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--terra);
    margin-bottom: 14px;
  }
  .bs-new-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }
  .bs-new-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 16px 18px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--surface, #fff);
    cursor: pointer;
    text-align: left;
    transition: all 0.18s ease;
    min-height: 84px;
  }
  .bs-new-choice:hover {
    border-color: var(--terra);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.07);
  }
  .bs-nc-icon { font-size: 24px; line-height: 1; margin-bottom: 4px; }
  .bs-nc-label {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    font-weight: 500;
    color: var(--ink);
  }
  .bs-nc-sub {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute, #8a8377);
  }
  .bs-new-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
  }
  .bs-new-tools .bs-stats { margin-right: auto; }
  .bs-manage-head {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--ink-2, var(--mute));
    margin: 0 0 12px 2px;
  }
  [data-theme="dark"] .bs-new-block { background: rgba(255,255,255,0.04); }
  [data-theme="dark"] .bs-new-choice { background: rgba(255,255,255,0.05); }
  @media (max-width: 560px) {
    .bs-new-choices { grid-template-columns: 1fr; }
  }
  .bs-stats {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .bss-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(193, 116, 76, 0.10);
    color: var(--terra);
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
  }
  .bss-num {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .bs-preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--terra);
    color: var(--cream);
    border-radius: 999px;
    text-decoration: none;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 6px rgba(181, 107, 74, 0.35);
  }
  .bs-preview-btn:hover { background: var(--deep); box-shadow: 0 3px 8px rgba(181, 107, 74, 0.5); }
  /* Topnav Live-Blog pill — external link, terra-colored for visibility */
  nav.topnav .nav-live-blog {
    background: var(--terra);
    color: var(--cream) !important;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.8px;
    margin: 0 4px;
  }
  nav.topnav .nav-live-blog:hover { background: var(--deep); color: var(--cream); }
  .bs-resync-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: var(--terra);
    border: 1px solid var(--terra);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-right: 6px;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .bs-resync-btn:hover { background: var(--terra); color: var(--cream); }
  .bs-resync-btn:active { transform: scale(0.97); }

  .bs-compose-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--terra);
    color: var(--cream);
    border: 1px solid var(--terra);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-right: 6px;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .bs-compose-btn:hover { background: var(--terra-deep, #8a4a32); border-color: var(--terra-deep, #8a4a32); }
  .bs-compose-btn:active { transform: scale(0.97); }

  @keyframes cwPulse {
    0%   { box-shadow: 0 0 0 0 rgba(193, 116, 76, 0.45); }
    100% { box-shadow: 0 0 0 16px rgba(193, 116, 76, 0); }
  }
  .currency-widget.cw-highlight {
    animation: cwPulse 1.4s ease-out;
    border-color: var(--terra) !important;
  }

  .bs-btn-edit {
    background: transparent;
    color: var(--mute);
    border: 1px solid var(--line);
  }
  .bs-btn-edit:hover { color: var(--terra); border-color: var(--terra); }

  /* === COMPOSER MODAL (studioModal) === */
  #studioModal .em-card {
    max-width: 720px;
  }
  #studioModal .em-field textarea.sm-content {
    width: 100%;
    min-height: 200px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.6;
    resize: vertical;
    overflow: hidden;
    box-sizing: border-box;
  }
  #studioModal .em-field textarea.sm-content:focus {
    outline: none;
    border-color: var(--terra);
  }
  .sm-mood {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .sm-star {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--line);
    transition: color 0.15s ease, transform 0.1s ease;
    padding: 0 2px;
    line-height: 1;
  }
  .sm-star:hover { transform: scale(1.15); }
  .sm-star.active { color: var(--gold, #b08d5b); }
  .sm-star-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mute);
    font-size: 18px;
    padding: 0 6px;
    margin-left: 6px;
    line-height: 1;
  }
  .sm-star-clear:hover { color: var(--rust); }

  .sm-photo-add {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: var(--paper-2);
    border: 1.5px dashed var(--line);
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 500;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .sm-photo-add:hover { border-color: var(--terra); background: var(--paper); }
  .sm-photo-add input[type="file"] { display: none; }

  .sm-photo-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 12px;
  }
  .sm-photo-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--paper-2);
    border: 1px solid var(--line-soft);
  }
  .sm-photo-tile img,
  .sm-photo-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sm-photo-tile .sm-photo-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    pointer-events: none;
    padding-left: 2px;
  }
  .sm-photo-tile.is-video .sm-photo-meta { background: var(--ink); }

  /* ==================== KI-TEXTVERBESSERUNG (Composer) ==================== */
  .sm-ai-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }
  .sm-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--terra);
    background: transparent;
    color: var(--terra);
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    min-height: 40px;
  }
  .sm-ai-btn:hover { background: var(--terra); color: var(--cream); transform: translateY(-1px); }
  .sm-ai-btn-tags { border-color: var(--ink-2, #6b6357); color: var(--ink-2, #6b6357); }
  .sm-ai-btn-tags:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
  .sm-ai-spark { font-size: 14px; }

  .sm-ai-panel {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper-2, rgba(0,0,0,0.02));
  }
  .sm-ai-panel[hidden] { display: none; }
  .sm-ai-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
  }
  .sm-ai-style {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface, #fff);
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .sm-ai-style:hover { border-color: var(--terra); color: var(--terra); }
  .sm-ai-style.active { background: var(--terra) !important; border-color: var(--terra) !important; color: #fff !important; font-weight: 600; }
  .sm-ai-custom {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 12px;
  }
  .sm-ai-custom:focus { outline: none; border-color: var(--terra); }
  .sm-ai-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-2);
    margin-bottom: 12px;
    cursor: pointer;
  }
  .sm-ai-check input { width: 18px; height: 18px; accent-color: var(--terra); cursor: pointer; }
  .sm-ai-hint {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute, #8a8377);
    margin-bottom: 12px;
    line-height: 1.4;
  }
  .sm-ai-status {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
  }
  .sm-ai-status[hidden] { display: none; }
  .sm-ai-status-load { background: rgba(181,107,74,0.12); color: var(--terra); }
  .sm-ai-status-err  { background: rgba(176,74,58,0.14); color: var(--rust, #b04a3a); font-weight: 600; }
  .sm-ai-status-ok   { background: rgba(122,139,120,0.16); color: var(--sage-deep, #5f7259); font-weight: 600; }
  .sm-ai-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .sm-ai-run {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    background: var(--terra);
    color: var(--cream);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 42px;
  }
  .sm-ai-run:disabled { opacity: 0.6; cursor: wait; }
  .sm-ai-close {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    cursor: pointer;
    min-height: 42px;
  }
  .sm-ai-result {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .sm-ai-result[hidden] { display: none; }
  .sm-ai-result-label {
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--terra);
    font-weight: 700;
    margin-bottom: 8px;
  }
  .sm-ai-result-text {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--surface, #fff);
    border: 1.5px solid var(--terra);
    border-radius: 8px;
    padding: 14px;
    min-height: 120px;
    resize: vertical;
    overflow: hidden;
    margin-bottom: 12px;
  }
  .sm-ai-result-text:focus { outline: none; box-shadow: 0 0 0 3px rgba(181,107,74,0.12); }
  .sm-ai-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .sm-ai-apply {
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    background: var(--sage-deep, #5f7259);
    color: #fff;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 42px;
  }
  .sm-ai-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1.5px solid var(--terra);
    background: transparent;
    color: var(--terra);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-height: 42px;
  }
  .sm-ai-copy:hover { background: var(--terra); color: var(--cream); }
  .sm-ai-copy svg { flex-shrink: 0; }
  .sm-ai-discard {
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    cursor: pointer;
    min-height: 42px;
  }

  /* ==================== KI-OVERLAY (Loading + Ergebnis) ==================== */
  .sm-ai-overlay {
    position: fixed;
    inset: 0;
    z-index: 100050; /* above composer modal (1100), below toast (100060) */
    background: rgba(20, 16, 12, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    animation: domFadeIn 180ms ease-out;
  }
  .sm-ai-overlay[hidden] { display: none; }
  /* explicit display:flex/block on inner states overrides the [hidden] UA rule — force it */
  .sm-ai-ov-loading[hidden],
  .sm-ai-ov-body[hidden],
  .sm-ai-ov-error[hidden] { display: none !important; }
  .sm-ai-ov-card {
    background: var(--surface, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 540px;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0,0,0,0.4);
    border: 1px solid var(--line);
    padding: 0;
    -webkit-overflow-scrolling: touch;
  }
  .sm-ai-ov-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    background: var(--surface, #fff);
    border-radius: 16px 16px 0 0;
    z-index: 1;
  }
  .sm-ai-ov-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 20px;
    color: var(--ink);
  }
  .sm-ai-ov-x {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .sm-ai-ov-x:hover { border-color: var(--rust); color: var(--rust); }
  .sm-ai-ov-loading {
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }
  .sm-ai-ov-loadtext {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--ink);
    line-height: 1.5;
  }
  .sm-ai-ov-loadtext small { color: var(--mute); font-size: 12.5px; }
  .sm-ai-spinner {
    width: 44px; height: 44px;
    border: 4px solid var(--line);
    border-top-color: var(--terra);
    border-radius: 50%;
    animation: smAiSpin 0.9s linear infinite;
  }
  @keyframes smAiSpin { to { transform: rotate(360deg); } }
  .sm-ai-ov-body { padding: 18px; }
  .sm-ai-ov-label {
    font-family: var(--sans);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--terra);
    font-weight: 700;
    margin-bottom: 10px;
  }
  .sm-ai-ov-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 200px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
    border: 1.5px solid var(--terra);
    border-radius: 10px;
    padding: 14px;
    resize: vertical;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .sm-ai-ov-text:focus { outline: none; box-shadow: 0 0 0 3px rgba(181,107,74,0.12); }
  .sm-ai-ov-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .sm-ai-ov-error { padding: 28px 24px; }
  .sm-ai-ov-errmsg {
    background: rgba(176,74,58,0.14);
    color: var(--rust, #b04a3a);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    line-height: 1.5;
  }
  [data-theme="dark"] .sm-ai-ov-card,
  [data-theme="dark"] .sm-ai-ov-head { background: #1c1814; }
  [data-theme="dark"] .sm-ai-ov-text { background: rgba(255,255,255,0.05); }

  /* ==================== SETTINGS · KI-CARD ==================== */
  .ki-card .ki-field { margin-bottom: 12px; }
  .ki-card .ki-field label {
    display: block;
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-2, var(--mute));
    margin-bottom: 5px;
    font-weight: 600;
  }
  .ki-card .ki-field input {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 14px;
    background: var(--surface, #fff);
    color: var(--ink);
    box-sizing: border-box;
  }
  .ki-card .ki-field input:focus { outline: none; border-color: var(--terra); }
  .ki-card .ki-status { font-size: 13px; margin-top: 10px; }

  /* ==================== KI-CHAT-ASSISTENT ==================== */
  .kc-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
  }
  .kc-messages {
    min-height: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .kc-welcome {
    margin: auto;
    text-align: center;
    color: var(--ink-2, var(--mute));
    max-width: 440px;
    padding: 24px 12px;
  }
  .kc-welcome-icon {
    font-size: 30px;
    color: var(--terra);
    margin-bottom: 12px;
  }
  .kc-welcome-text {
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 18px;
    color: var(--ink);
  }
  .kc-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .kc-chip {
    padding: 8px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface, #fff);
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .kc-chip:hover { border-color: var(--terra); color: var(--terra); }
  .kc-msg { display: flex; }
  .kc-msg.kc-user { justify-content: flex-end; }
  .kc-msg.kc-ai { justify-content: flex-start; }
  .kc-bubble {
    max-width: 84%;
    padding: 11px 15px;
    border-radius: 16px;
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.6;
    word-wrap: break-word;
  }
  .kc-user .kc-bubble {
    background: var(--terra);
    color: var(--cream);
    border-bottom-right-radius: 5px;
  }
  .kc-ai .kc-bubble {
    background: var(--surface, #fff);
    color: var(--ink);
    border: 1px solid var(--line-soft);
    border-bottom-left-radius: 5px;
  }
  .kc-ai .kc-bubble strong { color: var(--terra); }
  .kc-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }
  .kc-typing span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--terra);
    opacity: 0.5;
    animation: kcBlink 1.2s infinite both;
  }
  .kc-typing span:nth-child(2) { animation-delay: 0.2s; }
  .kc-typing span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes kcBlink { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 1; } }
  .kc-input-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }
  .kc-input {
    flex: 1;
    resize: none;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.4;
    background: var(--surface, #fff);
    color: var(--ink);
    max-height: 120px;
    box-sizing: border-box;
  }
  .kc-input:focus { outline: none; border-color: var(--terra); }
  .kc-send {
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 12px;
    border: none;
    background: var(--terra);
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.1s ease;
  }
  .kc-send:hover { background: var(--ink); }
  .kc-send:active { transform: scale(0.94); }
  .kc-send:disabled { opacity: 0.5; cursor: wait; }
  .kc-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .kc-clear {
    padding: 7px 13px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 12.5px;
    cursor: pointer;
  }
  .kc-clear:hover { border-color: var(--rust); color: var(--rust); }
  .kc-foot { font-family: var(--sans); font-size: 11.5px; color: var(--mute); }
  [data-theme="dark"] .kc-messages { background: rgba(255,255,255,0.03); }
  [data-theme="dark"] .kc-ai .kc-bubble,
  [data-theme="dark"] .kc-input,
  [data-theme="dark"] .kc-chip { background: rgba(255,255,255,0.05); }
  [data-theme="dark"] .sm-ai-panel { background: rgba(255,255,255,0.03); }
  [data-theme="dark"] .sm-ai-style,
  [data-theme="dark"] .sm-ai-custom,
  [data-theme="dark"] .sm-ai-result-text,
  [data-theme="dark"] .ki-card .ki-field input { background: rgba(255,255,255,0.05); }
  .sm-photo-tile .sm-photo-meta {
    position: absolute;
    bottom: 4px;
    left: 4px;
    padding: 2px 7px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
  }
  .sm-photo-tile.new .sm-photo-meta { background: var(--terra); }
  .sm-photo-tile.existing .sm-photo-meta { background: rgba(0,0,0,0.55); }

  .bs-filter {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bs-filter::-webkit-scrollbar { display: none; }
  .bs-filter-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    white-space: nowrap;
  }
  .bs-filter-btn:hover { border-color: var(--terra); color: var(--terra); }
  .bs-filter-btn.active {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }

  .bs-day-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .bs-day {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
  }
  .bs-day-head {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
  }
  .bs-group {
    margin-top: 12px;
  }
  .bs-group:first-of-type { margin-top: 0; }
  .bs-group-label {
    font-family: var(--sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--mute);
    font-weight: 700;
    margin-bottom: 8px;
  }
  .bs-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  @media (min-width: 540px) { .bs-photos { grid-template-columns: repeat(5, 1fr); } }
  @media (min-width: 880px) { .bs-photos { grid-template-columns: repeat(8, 1fr); } }
  .bs-photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--paper-2);
    cursor: pointer;
    padding: 0;
  }
  .bs-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bs-photo.is-pub {
    border-color: var(--terra);
    box-shadow: 0 0 0 1px rgba(193, 116, 76, 0.4);
  }
  .bs-photo .bs-author {
    position: absolute;
    top: 4px; left: 4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    color: var(--cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .bs-photo .bs-author.author-thorsten { background: var(--terra); }
  .bs-photo .bs-author.author-patricia { background: var(--sage-deep); }
  .bs-photo .bs-pub-badge {
    position: absolute;
    top: 4px; right: 4px;
    width: 14px; height: 14px;
    color: var(--terra);
    background: var(--cream);
    border-radius: 50%;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
  }

  .bs-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--paper);
    border-radius: 8px;
    border-left: 3px solid var(--line);
    margin-bottom: 6px;
  }
  .bs-item.is-pub { border-left-color: var(--terra); }
  .bs-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .bs-author-pill {
    padding: 2px 9px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cream);
  }
  .bs-author-pill.author-thorsten { background: var(--terra); }
  .bs-author-pill.author-patricia { background: var(--sage-deep); }
  .bs-mood {
    color: var(--gold);
    font-size: 12px;
  }
  .bs-toggle {
    margin-left: auto;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--cream);
    color: var(--mute);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur-fast) var(--ease-out);
  }
  .bs-toggle.active {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
  }
  .bs-toggle:hover { border-color: var(--terra); }
  .bs-toggle:active { transform: scale(0.96); }
  .bs-item-body {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.4;
  }
  .bs-act-thumb {
    width: 36px; height: 36px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-2);
    flex-shrink: 0;
  }
  .bs-act-thumb.empty { background-color: var(--paper-2); }
  .bs-act-name {
    flex: 1;
    min-width: 0;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
  }
  .bs-act-meta {
    font-size: 10.5px;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 2px;
  }

  /* ================ BLOG STUDIO · NEW (Tabs + Card workflow) ================ */
  .bss-pill.bss-pub { background: rgba(122, 136, 112, 0.15); color: var(--sage-deep); }
  .bss-pill.bss-pub .bss-num { color: var(--sage-deep); }

  .bs-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 0;
  }
  .bs-tabs::-webkit-scrollbar { display: none; }
  .bs-tab {
    flex-shrink: 0;
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--mute);
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -1px;
  }
  .bs-tab:hover { color: var(--terra); }
  .bs-tab.active {
    color: var(--ink);
    border-bottom-color: var(--terra);
  }
  .bs-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--mute);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .bs-tab.active .bs-tab-count {
    background: var(--terra);
    color: var(--cream);
  }

  .bs-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
  }
  @media (min-width: 768px) {
    .bs-cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1200px) {
    .bs-cards { grid-template-columns: repeat(3, 1fr); }
  }

  .bs-card {
    background: var(--surface, var(--cream));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .bs-card.state-pending {
    border-color: var(--gold);
    background: linear-gradient(180deg, rgba(176, 141, 91, 0.06), transparent 60%);
  }
  .bs-card.state-published {
    border-color: var(--sage-deep);
    background: linear-gradient(180deg, rgba(122, 136, 112, 0.06), transparent 60%);
  }
  .bs-card.state-private {
    border-color: var(--line);
    opacity: 0.78;
  }
  .bs-card-top {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: center;
  }
  .bs-card-thumb {
    width: 64px; height: 64px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mute);
    font-size: 18px;
  }
  .bs-card-thumb.empty {
    border: 1px dashed var(--line);
    background-color: transparent;
  }
  .bs-card-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .bs-card-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .bs-card-title {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .bs-state {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4;
  }
  .bs-state.pending { background: rgba(176, 141, 91, 0.18); color: #8a6d40; }
  .bs-state.pub { background: rgba(122, 136, 112, 0.20); color: var(--sage-deep); }
  .bs-state.priv { background: var(--paper-2); color: var(--mute); }

  .bs-card-preview {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-2);
    line-height: 1.45;
    padding: 8px 10px;
    background: var(--paper);
    border-radius: 8px;
  }

  /* ---- Blog-Studio: collapsible post-group (entry + its media, one frame) ---- */
  .bs-groups {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
  }
  .bs-group {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface, var(--cream));
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .bs-group.state-published { border-color: var(--sage-deep); }
  .bs-group.state-pending   { border-color: var(--gold); }
  .bs-group.state-private   { opacity: 0.82; }
  .bs-group-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--ink);
  }
  .bs-group-head:hover { background: var(--paper); }
  .bs-group-chev {
    flex-shrink: 0;
    color: var(--mute);
    font-size: 12px;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .bs-group:not(.collapsed) .bs-group-chev { transform: rotate(90deg); }
  .bs-group-headline {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .bs-group-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .bs-group-title {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bs-group-stop, .bs-group-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--mute);
    background: var(--paper-2);
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
  }
  .bs-group-thumb {
    width: 42px; height: 42px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-2);
    flex-shrink: 0;
    margin-left: auto;
  }
  .bs-group-body {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .bs-group.collapsed .bs-group-body { display: none; }
  .bs-group-media-lbl {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--mute);
    margin-top: 2px;
  }
  /* headless card (the entry inside a post-group — header lives in group head) */
  .bs-card.headless {
    border: none;
    background: transparent;
    padding: 0;
  }
  .bs-card.headless.state-private { opacity: 1; }
  /* media-strip — thumbnail preview row */
  .bs-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .bs-strip-thumb {
    width: 54px; height: 54px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-color: var(--paper-2);
    position: relative;
    flex-shrink: 0;
  }
  .bs-strip-thumb.empty { border: 1px dashed var(--line); }
  .bs-strip-thumb .bs-strip-play,
  .bs-card-thumb .bs-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.18);
    border-radius: inherit;
  }
  .bs-card-thumb { position: relative; }

  /* Discard-post modal (remove post → optionally remove attached media) */
  .bs-discard-ov {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 100070;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .bs-dc-box {
    background: var(--surface, var(--cream)); color: var(--ink);
    border: 1px solid var(--line); border-radius: 16px;
    max-width: 440px; width: 100%; max-height: 80vh; overflow-y: auto;
    padding: 20px; box-shadow: var(--shadow-lg);
  }
  .bs-dc-head { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
  .bs-dc-sub { font-family: var(--sans); font-size: 13px; color: var(--mute); line-height: 1.5; margin-bottom: 14px; }
  .bs-dc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .bs-dc-item { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px; border-radius: 10px; }
  .bs-dc-item:hover { background: var(--paper); }
  .bs-dc-item input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--terra); }
  .bs-dc-thumb {
    width: 44px; height: 44px; border-radius: 8px;
    background-size: cover; background-position: center;
    background-color: var(--paper-2); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px;
  }
  .bs-dc-cap { font-family: var(--sans); font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bs-dc-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
  .bs-card-caption {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--ink);
    background: var(--cream);
    resize: vertical;
    min-height: 64px;
    line-height: 1.45;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .bs-card-caption:focus {
    outline: none;
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(193, 116, 76, 0.12);
  }
  .bs-card-caption::placeholder { color: var(--mute-2); font-style: italic; }
  .bs-card-stop {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
  }
  .bs-card-stop-lbl {
    font-family: var(--sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ink-2, var(--mute));
  }
  .bs-card-stop-sel {
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13.5px;
    cursor: pointer;
    min-height: 38px;
  }
  .bs-card-stop-sel:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(193,116,76,0.12); }
  [data-theme="dark"] .bs-card-stop-sel { background: rgba(255,255,255,0.06); }
  .bs-card-note {
    font-family: var(--sans);
    font-size: 11.5px;
    color: var(--mute);
    background: rgba(176, 141, 91, 0.10);
    border-left: 2px solid var(--gold);
    padding: 6px 10px;
    border-radius: 6px;
  }

  .bs-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
  }
  .bs-btn {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
    white-space: nowrap;
  }
  .bs-btn:active { transform: scale(0.96); }
  .bs-btn-primary {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
  }
  .bs-btn-primary:hover { background: var(--terra-deep, #8a4a32); border-color: var(--terra-deep, #8a4a32); }
  .bs-btn-ghost {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line);
  }
  .bs-btn-ghost:hover { border-color: var(--terra); color: var(--terra); }
  .bs-btn-danger {
    background: transparent;
    color: var(--rust, #964a3e);
    border-color: var(--line);
  }
  .bs-btn-danger:hover { background: var(--rust, #964a3e); color: var(--cream); border-color: var(--rust, #964a3e); }

  /* ================ ACTIVITY MODAL · Photo Upload + Blog Toggle ================ */
  .em-photo-field { padding-top: 4px; }
  .em-photo-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .em-photo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px dashed var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    background: var(--cream);
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .em-photo-upload-btn:hover {
    border-color: var(--terra);
    background: rgba(193, 116, 76, 0.06);
    border-style: solid;
  }
  .em-photo-upload-btn svg { color: var(--terra); }
  .em-photo-or {
    color: var(--mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
  }
  .em-photo-controls input[type="url"] {
    flex: 1;
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--ink);
    background: var(--cream);
  }
  .em-photo-preview {
    margin-top: 10px;
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    background-color: var(--paper-2);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mute);
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
  }
  .em-photo-preview.empty {
    border-style: dashed;
    background-color: transparent;
  }

  .em-blog-toggle {
    background: var(--paper);
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .em-blog-toggle.is-on {
    border-color: var(--gold);
    background: rgba(176, 141, 91, 0.08);
  }
  .em-blog-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--ink) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600 !important;
  }
  .em-blog-label input[type="checkbox"] {
    width: 18px; height: 18px;
    cursor: pointer;
    accent-color: var(--terra);
  }
  .em-blog-text { user-select: none; }

  /* ================ AUTHOR BADGES + PUBLISH TOGGLES ================ */
  .dx-photo {
    position: relative;
  }
  .dx-photo.is-public {
    box-shadow: 0 0 0 2px var(--terra), 0 2px 8px rgba(193, 116, 76, 0.3);
  }
  .dx-photo .dx-author-badge {
    position: absolute;
    top: 6px; left: 6px;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--cream);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
  .dx-photo .dx-author-badge.author-thorsten { background: var(--terra); }
  .dx-photo .dx-author-badge.author-patricia { background: var(--sage-deep); }
  .dx-photo .dx-pub-toggle {
    position: absolute;
    bottom: 6px; left: 6px;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.65);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    backdrop-filter: blur(2px);
    transition: all var(--dur-fast) var(--ease-out);
  }
  .dx-photo .dx-pub-toggle.active {
    background: var(--terra);
    color: var(--cream);
    box-shadow: 0 0 12px rgba(193, 116, 76, 0.5);
  }
  .dx-photo .dx-pub-toggle:hover { transform: scale(1.1); }
  .dx-photo .dx-pub-toggle:active { transform: scale(0.95); }

  /* Journal-entry publish toggle */
  .dx-entry .dxe-pub {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease-out);
    flex-shrink: 0;
  }
  .dx-entry .dxe-pub.active {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(193, 116, 76, 0.18);
  }
  .dx-entry .dxe-pub:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  .dx-entry .dxe-pub.active:hover { color: var(--cream); }
  .dx-entry .dxe-pub.pending {
    background: rgba(176, 141, 91, 0.18);
    color: #8a6d40;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(176, 141, 91, 0.15);
  }
  .dx-entry .dxe-pub.pending:hover { color: #8a6d40; border-color: var(--gold); }
  .dx-entry.is-public {
    border-left: 3px solid var(--terra);
  }
  .dx-entry.is-pending {
    border-left: 3px solid var(--gold);
  }

  /* ================ DAY-BLOCK ACTIVITY CARDS ================ */
  .day-extras .dx-acts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
  }
  .day-extras .dx-acts-empty {
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
    font-style: italic;
    padding: 6px 0;
  }
  .day-extras .dxa-card {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
    font-family: inherit;
    transition: border-color var(--dur-fast) var(--ease-out),
                transform var(--dur-tap) var(--ease-out);
  }
  .day-extras .dxa-card:hover { border-color: var(--terra); }
  .day-extras .dxa-card:active { transform: scale(0.98); }
  .day-extras .dxa-thumb {
    width: 40px; height: 40px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }
  .day-extras .dxa-thumb-empty {
    background: var(--paper-2);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a7f70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
  }
  .day-extras .dxa-body {
    min-width: 0;
  }
  .day-extras .dxa-name {
    font-family: var(--serif);
    font-size: 0.95rem;
    color: var(--ink);
    line-height: 1.2;
  }
  .day-extras .dxa-meta {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    margin-top: 2px;
  }

  /* ================ OFFLINE BADGE ================ */
  .offline-badge {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0) + 56px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1095;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    max-width: 90vw;
    animation: revealUp var(--dur-base) var(--ease-spring) both;
  }
  .offline-badge[hidden] { display: none !important; }
  .offline-badge.offline {
    background: var(--rust);
    color: var(--cream);
  }
  .offline-badge.syncing {
    background: var(--terra);
    color: var(--cream);
  }
  .offline-badge .ob-icon {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
  }
  .offline-badge.syncing .ob-icon {
    animation: ptrSpin 1.2s linear infinite;
  }

  /* ----- Theme toggle button rotate on click ----- */
  .nav-theme.theme-flipping svg {
    animation: themeFlip var(--dur-slow) var(--ease-spring);
  }
  @keyframes themeFlip {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(0.6); }
    100% { transform: rotate(360deg) scale(1); }
  }

  /* ----- Accessibility: visible focus indicator (keyboard only) ----- */
  *:focus-visible {
    outline: 2px solid var(--terra);
    outline-offset: 2px;
    border-radius: 4px;
  }
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: 2px solid var(--terra);
    outline-offset: 2px;
  }
  /* Skip-to-content link (keyboard only) */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    background: var(--ink);
    color: var(--cream);
    padding: 10px 16px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 14px;
    z-index: 9999;
    text-decoration: none;
    transition: top var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    top: 8px;
  }

  /* ================ WERKSTATT — Diagnostic / Recovery ================ */
  .werkstatt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 20px;
  }
  .werk-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .werk-card .wk-eyebrow {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--terra);
    margin-bottom: 2px;
  }
  .werk-card h3 {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: var(--ink);
  }
  .werk-card p {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
    margin: 0;
  }
  .wk-stats {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0;
    font-family: var(--sans);
    font-size: 12.5px;
  }
  .wk-stats dt {
    color: var(--mute);
    font-weight: 500;
  }
  .wk-stats dd {
    margin: 0;
    color: var(--ink);
    font-weight: 600;
    font-feature-settings: 'tnum';
    word-break: break-word;
  }
  .wk-btn {
    background: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
    padding: 10px 18px;
    border-radius: 3px;
    font-family: var(--sans);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    align-self: flex-start;
  }
  .wk-btn:hover {
    background: var(--ink);
    color: var(--cream);
  }
  .wk-btn.primary {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
  }
  .wk-btn.primary:hover {
    background: var(--deep);
    border-color: var(--deep);
  }
  .wk-btn:disabled {
    opacity: 0.6;
    cursor: wait;
  }
  .wk-progress {
    margin-top: 8px;
  }
  .wk-progress-bar {
    height: 6px;
    background: var(--sand);
    border-radius: 3px;
    overflow: hidden;
  }
  .wk-progress-fill {
    height: 100%;
    background: var(--terra);
    width: 0%;
    transition: width 0.2s ease;
  }
  .wk-progress-text {
    margin-top: 6px;
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    letter-spacing: 0.5px;
  }

  /* ================ LIVE TRANSLATOR ================ */
  .tr-card {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
  }
  .tr-row { display: flex; align-items: center; gap: 12px; }
  .tr-label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--mute);
  }
  .tr-select {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    min-height: 44px;
  }
  .tr-input-wrap { position: relative; }
  .tr-input {
    width: 100%;
    padding: 14px 60px 14px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.4;
    color: var(--ink);
    resize: vertical;
    min-height: 80px;
  }
  .tr-input:focus { outline: 2px solid var(--terra); outline-offset: -1px; border-color: var(--terra); }
  .tr-mic-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--terra);
    color: var(--cream);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }
  .tr-mic-btn:hover { background: var(--deep); transform: scale(1.05); }
  .tr-mic-btn.listening {
    background: #b94a3a;
    animation: micPulse 1s infinite;
  }
  @keyframes micPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(185, 74, 58, 0.4); }
    50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(185, 74, 58, 0); }
  }
  .tr-actions { display: flex; gap: 10px; }
  .tr-go-btn {
    flex: 1;
    background: var(--ink);
    color: var(--cream);
    border: none;
    padding: 14px 20px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    min-height: 48px;
    transition: background 0.15s;
  }
  .tr-go-btn:hover { background: var(--terra); }
  .tr-clear-btn {
    background: transparent;
    color: var(--mute);
    border: 1px solid var(--line);
    padding: 12px 18px;
    border-radius: 6px;
    font-family: var(--sans);
    font-size: 12px;
    cursor: pointer;
    min-height: 48px;
  }
  .tr-clear-btn:hover { color: var(--ink); border-color: var(--ink); }
  .tr-result {
    background: linear-gradient(165deg, var(--paper) 0%, #f0ece4 100%);
    border: 1px solid var(--sand);
    border-radius: 8px;
    padding: 18px;
  }
  .tr-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .tr-result-label {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--terra);
  }
  .tr-speak-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cream);
    color: var(--terra);
    border: 1px solid var(--terra);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  .tr-speak-btn:hover { background: var(--terra); color: var(--cream); }
  .tr-result-text {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 8px;
    word-wrap: break-word;
  }
  .tr-result-meta {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    letter-spacing: 0.5px;
  }
  .tr-phrases {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .tr-phrase-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .tr-phrase-group-title {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--terra);
    margin: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .tr-phrase-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tr-phrase {
    background: var(--cream);
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 12.5px;
    cursor: pointer;
    min-height: 40px;
    transition: all 0.15s;
    text-align: left;
  }
  .tr-phrase:hover { background: var(--terra); color: var(--cream); border-color: var(--terra); }

  /* Dark-mode overrides — only patch the LIGHT-gradient result card.
     Note: --cream/--ink swap in dark mode, so plain `color: var(--ink)` already
     renders light-on-dark correctly. Only override hardcoded light backgrounds. */
  [data-theme="dark"] .tr-result {
    background: linear-gradient(165deg, rgba(181, 107, 74, 0.22) 0%, rgba(181, 107, 74, 0.08) 100%);
    border: 1px solid rgba(181, 107, 74, 0.5);
  }
  [data-theme="dark"] .tr-speak-btn {
    background: rgba(0, 0, 0, 0.3);
    color: var(--terra);
    border-color: var(--terra);
  }
  [data-theme="dark"] .tr-speak-btn:hover {
    background: var(--terra);
    color: #fff;
  }

  /* ================ FACEBOOK POSTS ================ */
  .fbp-cat {
    margin-top: 32px;
    margin-bottom: 14px;
  }
  .fbp-cat:first-child { margin-top: 18px; }
  .fb-post {
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .fbp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .fbp-title {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    font-size: 16px;
    color: var(--ink);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
  }
  .fbp-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .fbp-copy {
    background: var(--terra);
    color: var(--cream);
    border: none;
    padding: 9px 14px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    min-height: 38px;
    transition: all 0.15s;
  }
  .fbp-copy:hover { background: var(--deep); }
  .fbp-copy.copied {
    background: var(--sage-deep);
    transform: scale(1.05);
  }
  .fbp-reset {
    background: transparent;
    color: var(--mute);
    border: 1px solid var(--line);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.15s;
  }
  .fbp-reset:hover { color: var(--rust); border-color: var(--rust); }
  .fbp-body {
    width: 100%;
    min-height: 180px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    font-family: var(--sans);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink);
    resize: vertical;
    -webkit-overflow-scrolling: touch;
  }
  .fbp-body:focus {
    outline: 2px solid var(--terra);
    outline-offset: -1px;
    border-color: var(--terra);
  }
  /* Dark mode */
  [data-theme="dark"] .fb-post {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
  }
  [data-theme="dark"] .fbp-body {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.15);
  }

  /* ================ DOKUMENTE / BUCHUNGEN ================ */
  .dx-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
  }
  .dx-stats { display: flex; gap: 8px; flex-wrap: wrap; }
  .dx-pill {
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--mute);
  }
  .dx-pill b {
    color: var(--terra);
    font-weight: 700;
    margin-right: 4px;
  }
  .dx-upload-btn {
    background: var(--terra);
    color: var(--cream);
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .dx-upload-btn:hover {
    background: var(--deep);
    transform: translateY(-1px);
  }
  .dx-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
  }
  .dx-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-2);
    cursor: pointer;
    transition: all 0.15s;
    min-height: 38px;
  }
  .dx-chip:hover {
    border-color: var(--terra);
    color: var(--terra);
  }
  .dx-chip.active {
    background: var(--ink);
    color: var(--cream);
    border-color: var(--ink);
  }
  .dx-chip-icon { font-size: 13px; }
  .dx-chip-count {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
  }
  .dx-chip.active .dx-chip-count { background: rgba(255, 255, 255, 0.18); }
  .dx-chip-count.zero { opacity: 0.4; }
  .dx-search-wrap { margin-bottom: 20px; }
  .dx-search {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    min-height: 44px;
  }
  .dx-search:focus {
    outline: 2px solid var(--terra);
    outline-offset: -1px;
    border-color: var(--terra);
  }
  .dx-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .dx-group-title {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--terra);
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dx-group-count {
    margin-left: auto;
    background: var(--sand);
    color: var(--ink-2);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
  }
  .dx-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  @media (min-width: 600px) {
    .dx-cards { grid-template-columns: 1fr 1fr; }
  }
  .dx-card {
    display: flex;
    gap: 12px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.15s;
    align-items: center;
    position: relative;
  }
  .dx-card:hover {
    border-color: var(--terra);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(181, 107, 74, 0.12);
  }
  .dx-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sand);
    color: var(--terra);
  }
  .dx-thumb-img {
    background-size: cover;
    background-position: center;
  }
  .dx-card-body {
    flex: 1;
    min-width: 0;
  }
  .dx-card-name {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dx-card-meta {
    font-family: var(--sans);
    font-size: 11px;
    color: var(--mute);
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
  }
  .dx-card-cat {
    color: var(--terra);
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .dx-card-sep { opacity: 0.5; }
  .dx-card-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .dx-card-edit,
  .dx-card-del {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mute);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
  }
  .dx-card-edit:hover { color: var(--terra); border-color: var(--terra); }
  .dx-card-del:hover { color: var(--rust); border-color: var(--rust); }
  .dx-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--mute);
    font-family: var(--sans);
  }
  .dx-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
  }
  .dx-empty p { margin: 6px 0; }

  /* Dark theme */
  [data-theme="dark"] .dx-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
  }
  [data-theme="dark"] .dx-pill { background: rgba(255, 255, 255, 0.04); }
  [data-theme="dark"] .dx-search { background: rgba(0, 0, 0, 0.3); }
  [data-theme="dark"] .dx-thumb { background: rgba(255, 255, 255, 0.08); }

  /* ==================== PROFILE PIC (Settings Card) ==================== */
  .profile-pic-card .pp-wrap {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
  }
  .profile-pic-card .pp-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--terra);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Identity-colored ring around the photo */
    border: 3px solid var(--terra);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  body.mode-patricia .profile-pic-card .pp-preview {
    border-color: var(--sage-deep);
    background-color: var(--sage-deep);
  }
  .profile-pic-card .pp-fallback {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 38px;
    color: white;
    font-weight: 500;
    user-select: none;
  }
  .profile-pic-card .pp-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
  }
  [data-theme="dark"] .profile-pic-card .pp-preview {
    border-color: rgba(255, 255, 255, 0.18);
  }

  /* ==================== DOC OWNER BADGE ==================== */
  .dx-card { position: relative; }
  .dx-own {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 14px;
    color: white;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    user-select: none;
    letter-spacing: 0.02em;
  }
  .dx-own-thorsten { background: var(--terra); }
  .dx-own-patricia { background: var(--sage-deep); }
  .dx-own-both     { background: linear-gradient(135deg, var(--terra) 50%, var(--sage-deep) 50%); font-size: 11px; padding: 0 8px; }
  .dx-own-unknown  { background: var(--ink-3, #888); }

  /* ==================== DOC OWNER MODAL ==================== */
  .doc-owner-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 13, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    padding: 24px;
    animation: domFadeIn 180ms ease-out;
  }
  @keyframes domFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .dom-card {
    background: var(--surface);
    border-radius: 16px;
    max-width: 420px;
    width: 100%;
    padding: 28px 26px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    border: 1px solid var(--line);
  }
  .dom-eyebrow {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--terra);
    margin-bottom: 8px;
  }
  .dom-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.7rem;
    margin: 0 0 10px;
    color: var(--ink);
    line-height: 1.15;
  }
  .dom-hint {
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink-2);
    margin: 0 0 22px;
    line-height: 1.5;
  }
  .dom-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  .dom-actions.dom-actions-2col {
    grid-template-columns: 1fr 1fr;
  }
  .dom-btn .dom-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    margin-top: 4px;
    opacity: 0.8;
    letter-spacing: 0.04em;
  }
  .dom-btn {
    padding: 14px 10px;
    border: 1.5px solid var(--line);
    background: var(--cream);
    color: var(--ink);
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 160ms ease;
    min-height: 48px;
  }
  .dom-btn:hover {
    border-color: var(--terra);
    color: var(--terra);
    transform: translateY(-1px);
  }
  .dom-btn.primary {
    background: var(--terra);
    color: white;
    border-color: var(--terra);
  }
  .dom-btn.primary:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: white;
  }
  .dom-cancel {
    background: transparent;
    border: none;
    color: var(--ink-2);
    font-family: var(--sans);
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    padding: 10px;
    text-align: center;
  }
  .dom-cancel:hover { color: var(--ink); text-decoration: underline; }

  /* ==================== DOC PREVIEW MODAL (PDF inline) ==================== */
  .doc-preview-modal {
    position: fixed;
    inset: 0;
    background: rgba(20, 17, 13, 0.95);
    z-index: 10009;
    display: flex;
    flex-direction: column;
    /* Respect notch + home-bar so head + close button stay tappable */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    box-sizing: border-box;
    overflow: hidden;
    animation: domFadeIn 180ms ease-out;
  }
  .dpm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
    min-height: 56px;
  }
  .dpm-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 17px;
    color: var(--ink);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .dpm-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .dpm-open,
  .dpm-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: all 160ms ease;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  .dpm-close {
    background: var(--terra);
    color: white;
    border-color: var(--terra);
    font-size: 26px;
  }
  .dpm-open:active,
  .dpm-close:active { transform: scale(0.94); }
  .dpm-open:hover {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
  }
  .dpm-close:hover {
    background: var(--ink);
    color: white;
    border-color: var(--ink);
  }
  .dpm-frame {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0; /* allow flex shrink */
    border: none;
    background: white;
    -webkit-overflow-scrolling: touch;
    /* iOS Safari iframe sizing fix */
    display: block;
  }
  [data-theme="dark"] .dom-card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }
  [data-theme="dark"] .dom-btn { background: rgba(255, 255, 255, 0.06); }
  [data-theme="dark"] .dom-btn.primary { background: var(--terra); }
  [data-theme="dark"] .dpm-head { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); }