:root {
      --bg1: #fff8ef;
      --bg2: #ffe2ef;
      --text: #1f2937;
      --muted: #6b7280;
      --accent: #ff6b81;
      --accent2: #6c5ce7;
      --green1: #22c55e;
      --green2: #16a34a;
      --blue1: #38bdf8;
      --blue2: #2563eb;
      --shadow: 0 18px 45px rgba(0,0,0,0.08);
      --border: rgba(0,0,0,0.08);
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, #fff5c4 0%, transparent 25%),
        radial-gradient(circle at top right, #ffd0da 0%, transparent 30%),
        linear-gradient(135deg, var(--bg1), var(--bg2));
      min-height: 100vh;
    }
    .container { width: min(1540px, calc(100% - 32px)); margin: 24px auto 40px; }
    .hero, .card {
      background: linear-gradient(135deg, rgba(255,255,255,.93), rgba(255,255,255,.80));
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      border-radius: 30px;
      padding: 24px;
    }
    .hero { position: relative; overflow: hidden; }
    .hero::after {
      content: "💶🍕🎒🧾🛒🏠✨";
      position: absolute;
      right: 20px;
      top: 12px;
      font-size: 2rem;
      opacity: 0.42;
      letter-spacing: 10px;
    }
    h1 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 3.2rem); }
    .subtitle { margin: 0; color: var(--muted); max-width: 980px; }
    .summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-top: 18px;
      padding-right: 210px;
    }
    .summary-chip {
      display: grid;
      gap: 2px;
      min-width: 0;
      padding: 9px 11px;
      border-radius: 14px;
      background: rgba(255,255,255,.65);
      border: 1px solid rgba(101,88,211,.1);
    }
    .summary-chip span { color: var(--muted); font-size: .68rem; font-weight: 800; }
    .summary-chip strong { overflow-wrap: anywhere; font-size: .84rem; }
    .pwa-tools {
      position: absolute;
      z-index: 1;
      right: 24px;
      bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin: 0;
    }
    .connection-status {
      padding: 7px 10px;
      border-radius: 999px;
      color: #166534;
      background: #dcfce7;
      font-size: .82rem;
      font-weight: 800;
    }
    .connection-status.offline { color: #991b1b; background: #fee2e2; }
    .install-button { padding: 8px 12px; }
    .install-guidance { color: var(--muted); font-size: .8rem; }
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .voice-panel { margin-top: 22px; }
    .voice-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .voice-heading h2, .voice-confirmation h3 { margin: 0; }
    .voice-heading p, .voice-confirmation p { margin: 5px 0 0; color: var(--muted); }
    .voice-controls { display: grid; gap: 12px; justify-items: stretch; }
    .talk-button {
      min-height: 52px;
      padding-inline: 20px;
      color: white;
      background: linear-gradient(135deg, #dc2626, #ff6b81);
    }
    .talk-button.listening {
      background: linear-gradient(135deg, #15803d, #22c55e);
      box-shadow: 0 0 0 6px rgba(34,197,94,.15);
    }
    .mini-toggle {
      min-height: 38px;
      min-width: 44px;
      padding: 7px 11px;
      border-radius: 999px;
      color: #312e81;
      background: #ede9fe;
      font-size: .84rem;
      font-weight: 800;
    }
    .voice-status {
      padding: 10px 12px;
      border-radius: 14px;
      color: #3730a3;
      background: #eef2ff;
      font-weight: 800;
    }
    .voice-status.error { color: #991b1b; background: #fee2e2; }
    .voice-chat { display: grid; gap: 8px; margin-top: 12px; max-height: 180px; overflow-y: auto; }
    .voice-message {
      width: fit-content;
      max-width: 82%;
      padding: 10px 13px;
      border-radius: 15px;
      background: white;
      border: 1px solid var(--border);
    }
    .voice-message.user { justify-self: end; color: white; background: #6c5ce7; }
    .voice-entry {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      margin-top: 12px;
    }
    .voice-entry input, .voice-entry button { min-height: 52px; }
    .voice-confirmation {
      margin-top: 14px;
      padding: 16px;
      border-radius: 20px;
      border: 2px solid rgba(108,92,231,.24);
      background: rgba(255,255,255,.72);
    }
    .voice-confirm-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 13px;
    }
    .voice-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
    .voice-confirm-actions .btn-toggle { width: auto; }

    .layout {
      display: grid;
      grid-template-columns: 340px 1fr;
      gap: 20px;
      margin-top: 22px;
      align-items: start;
    }

    .side-column {
      display: grid;
      gap: 18px;
    }

    .main-row {
      display: grid;
      grid-template-columns: 1fr 350px;
      gap: 16px;
      align-items: start;
    }

    .right-stack {
      display: grid;
      gap: 16px;
      align-items: start;
    }

    .section-title { margin:0; font-size:1.18rem; display:flex; gap:8px; align-items:center; }
    .controls { display:grid; gap:12px; margin-top:14px; }
    label { display:block; font-size:.92rem; font-weight:700; margin-bottom:6px; }
    input, select, textarea, button { font: inherit; }
    input, select, textarea {
      width:100%; padding:12px 14px; border-radius:16px; border:1px solid rgba(0,0,0,0.08);
      background: rgba(255,255,255,0.96); outline:none;
    }
    textarea { min-height: 92px; resize: vertical; }
    input:focus, select:focus, textarea:focus {
      border-color: rgba(108,92,231,0.45);
      box-shadow: 0 0 0 4px rgba(108,92,231,.12);
    }
    button {
      border:0; border-radius:16px; padding:12px 16px; font-weight:800; cursor:pointer;
      transition: transform .08s ease, opacity .18s ease;
    }
    button:hover { opacity: .96; }
    button:active { transform: translateY(1px) scale(.997); }
    button:disabled {
      cursor: not-allowed;
      opacity: .48;
      transform: none;
    }

    .btn-primary { background: linear-gradient(135deg, var(--accent), #ff8fab); color:white; }
    .btn-secondary { background: linear-gradient(135deg, var(--accent2), #8c7ae6); color:white; }
    .btn-grocery { background: linear-gradient(135deg, var(--green1), var(--green2)); color:white; }
    .btn-household { background: linear-gradient(135deg, var(--blue1), var(--blue2)); color:white; }
    .btn-danger { background: linear-gradient(135deg, #ef4444, #f97316); color:white; }

    .btn-toggle {
      width: 100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
      color: var(--text);
      border: 1px solid var(--border);
    }

    .inline-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .hint { color: var(--muted); font-size: .85rem; margin-top: 4px; }

    .member-board {
      background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.24));
      border: 1px solid rgba(255,255,255,0.55);
      border-radius: 26px;
      padding: 10px;
    }

    .member-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
      overflow-x: visible;
      padding: 2px;
      align-items: flex-start;
    }

    .member-card {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(255,255,255,0.55);
      border-radius: 24px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.72));
      box-shadow: 0 10px 24px rgba(31,41,55,0.06);
      backdrop-filter: blur(4px);
      overflow: hidden;
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    .member-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 28px rgba(31,41,55,0.08);
      border-color: rgba(108,92,231,0.18);
    }

    .shared-card {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.84));
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .member-summary, .shared-summary {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 18px;
      cursor: pointer;
      text-align: left;
    }

    .member-summary {
      display: grid;
      gap: 14px;
    }

    .shared-summary {
      display:flex;
      justify-content:space-between;
      gap:14px;
      align-items:center;
    }

    .member-summary:hover,
    .shared-summary:hover {
      background: rgba(255,255,255,0.28);
    }

    .member-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
    }

    .member-name, .shared-title {
      margin: 0;
      font-size: 1.18rem;
      font-weight: 900;
      line-height: 1.2;
    }

    .member-money, .shared-money {
      margin-top: 6px;
      font-size: 1.18rem;
      font-weight: 900;
    }

    .member-budget-line {
      margin-top: 4px;
      color: var(--muted);
      font-size: .84rem;
      font-weight: 700;
    }

    .member-top-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .emoji-pill {
      min-width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      font-size: 1.65rem;
      background: transparent;
      border: 0;
      filter: drop-shadow(0 5px 7px rgba(91, 57, 42, .16));
    }

    .member-summary-main {
      display: grid;
      gap: 10px;
    }

    .progress-block {
      display: grid;
      gap: 6px;
    }

    .progress-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: .82rem;
      font-weight: 800;
      color: var(--muted);
    }

    .progress-track {
      height: 10px;
      border-radius: 999px;
      background: rgba(17,24,39,0.08);
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      border-radius: 999px;
      transition: width .25s ease;
      background: linear-gradient(135deg, #6c5ce7, #ff6b81);
    }
    .goal-fill.over { background: linear-gradient(135deg, #ef4444, #f97316); }
    .goal-list { display: grid; gap: 12px; }
    .goal-row { display: grid; gap: 6px; }
    .compact-button { width: auto; padding: 9px 13px; }

    .reward-panel {
      margin-top: 14px;
      padding: 14px;
      border-radius: 18px;
      background: linear-gradient(135deg, rgba(108,92,231,.1), rgba(255,107,129,.1));
      border: 1px solid rgba(108,92,231,.15);
    }
    .reward-heading { display: grid; gap: 3px; }
    .reward-heading strong { font-size: 1.05rem; }
    .reward-heading span { color: var(--muted); font-size: .8rem; }
    .level-track {
      height: 13px;
      margin: 10px 0 12px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(17,24,39,.09);
    }
    .level-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #f59e0b, #ff6b81, #6c5ce7);
      transition: width .7s cubic-bezier(.2,.8,.2,1);
    }
    .badge-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .badge-card {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 2px 8px;
      align-items: center;
      padding: 10px;
      border-radius: 14px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(0,0,0,.06);
    }
    .badge-card > span { grid-row: 1 / 3; font-size: 1.45rem; }
    .badge-card strong { font-size: .78rem; }
    .badge-card small { color: var(--muted); font-size: .72rem; }

    .chart-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .insight {
      display: grid;
      gap: 3px;
      min-width: 0;
      padding: 10px;
      border-radius: 14px;
      background: linear-gradient(145deg, rgba(255,250,238,.92), rgba(245,255,250,.88));
      border: 1px solid rgba(172,117,74,.12);
    }
    .insight span { color: var(--muted); font-size: .7rem; font-weight: 800; }
    .insight strong { overflow-wrap: anywhere; font-size: .82rem; }
    .chart-card {
      padding: 12px;
      border-radius: 18px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(0,0,0,.07);
    }
    .chart-card h4 { margin: 0 0 8px; font-size: .88rem; }
    .donut-layout { display: flex; align-items: center; justify-content: center; gap: 14px; }
    .donut-chart { width: 110px; height: 110px; transform: rotate(-90deg); }
    .donut-chart circle { fill: none; stroke-width: 6; }
    .donut-base { stroke: #8c7ae6; }
    .donut-food { stroke: #ff6b81; }
    .donut-chart text {
      transform: rotate(90deg);
      transform-origin: center;
      fill: var(--text);
      font-size: 5px;
      font-weight: 900;
    }
    .chart-legend { display: grid; gap: 8px; font-size: .78rem; font-weight: 700; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; }
    .legend-dot.food { background: #ff6b81; }
    .legend-dot.other { background: #8c7ae6; }
    .month-chart { width: 100%; min-height: 135px; overflow: visible; }
    .chart-axis { stroke: rgba(17,24,39,.2); stroke-width: 1; }
    .month-bar { fill: #6c5ce7; transition: height .5s ease, y .5s ease; }
    .month-chart text { fill: var(--muted); font-size: 9px; font-weight: 700; }

    .quick-stats {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .quick-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(0,0,0,0.06);
      font-size: .8rem;
      font-weight: 800;
      color: var(--text);
    }

    .chevron, .section-chevron, .chevron-mini {
      font-size:1rem;
      color:var(--muted);
      margin-left:8px;
      transition: transform .22s ease;
    }

    .shared-card.open .chevron,
    .collapsible.open .section-chevron,
    .history-card.open .chevron-mini {
      transform: rotate(180deg);
    }

    .shared-details,
    .collapsible-content,
    .history-details {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease;
    }

    .details-inner { padding: 0 18px 18px; }
    .funny {
      margin: 0 0 14px;
      color: var(--muted);
      font-size: .95rem;
      background: rgba(255,255,255,0.72);
      border:1px solid rgba(0,0,0,0.07);
      border-radius: 16px;
      padding: 12px;
    }

    .stats { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
    .stat {
      background: rgba(255,255,255,0.9);
      border:1px solid rgba(0,0,0,0.07);
      border-radius:18px;
      padding:12px;
    }
    .stat .label {
      color: var(--muted);
      font-size: .8rem;
      font-weight: 700;
    }
    .stat .value {
      margin-top:4px;
      font-size:1.02rem;
      font-weight:900;
    }

    .subhead { margin: 16px 0 10px; font-weight:900; }
    .transaction-list, .history-list, .reminder-list { display:grid; gap:10px; }

    .txn, .history-card, .reminder-item {
      background: rgba(255,255,255,0.88);
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 16px;
      padding: 12px;
    }

    .txn-top, .history-top, .reminder-top {
      display:flex;
      justify-content:space-between;
      gap:10px;
      font-weight:800;
    }

    .txn small, .history-card small, .reminder-item small {
      color: var(--muted);
      display:block;
      margin-top:5px;
    }

    .txn-actions, .reminder-actions {
      display:flex;
      justify-content:flex-end;
      margin-top:10px;
    }

    .balance-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 10px;
    }

    .history-summary {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      cursor:pointer;
      text-align:left;
    }

    .history-mini-list {
      margin-top: 10px;
      display: grid;
      gap: 8px;
    }

    .history-mini-item {
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 12px;
      padding: 10px;
    }

    .empty {
      padding: 18px;
      border-radius: 18px;
      background: rgba(255,255,255,0.72);
      border:1px dashed rgba(0,0,0,0.12);
      color: var(--muted);
      text-align:center;
    }

    .toast {
      position: fixed; right:20px; bottom:20px; background:#111827; color:white;
      padding:14px 16px; border-radius:16px; box-shadow: var(--shadow);
      opacity:0; transform: translateY(20px); pointer-events:none; transition: .25s ease;
      z-index:1000; max-width:420px; white-space:pre-wrap;
    }
    .toast.show { opacity:1; transform: translateY(0); }
    .toast { display: flex; gap: 12px; align-items: center; }
    .toast-undo {
      flex: none;
      padding: 8px 11px;
      color: #111827;
      background: white;
      border-radius: 10px;
    }

    .data-tools p { margin: 0; }
    .restore-result { color: var(--muted); font-size: .82rem; line-height: 1.4; }
    .is-offline .voice-status::after { content: " Changes cannot be saved offline."; }

    .celebration {
      position: fixed;
      inset: 0;
      z-index: 3000;
      pointer-events: none;
      display: none;
      overflow: hidden;
    }
    .celebration.show { display: block; }
    .celebration-card {
      position: absolute;
      top: 12%;
      left: 50%;
      transform: translateX(-50%);
      width: min(520px, calc(100% - 32px));
      padding: 18px 22px;
      text-align: center;
      border-radius: 20px;
      color: white;
      background: #312e81;
      box-shadow: 0 20px 60px rgba(49,46,129,.35);
      font-weight: 900;
      animation: celebration-in .55s cubic-bezier(.2,.9,.2,1);
    }
    .confetti-piece {
      position: absolute;
      top: -20px;
      width: 10px;
      height: 18px;
      border-radius: 3px;
      animation: confetti-fall 2.8s ease-in forwards;
    }
    @keyframes celebration-in {
      from { opacity: 0; transform: translate(-50%, -18px) scale(.92); }
    }
    @keyframes confetti-fall {
      to { transform: translateY(105vh) rotate(760deg); opacity: .2; }
    }

    .modal-backdrop {
      position: fixed; inset: 0; background: rgba(17,24,39,0.55); display:none;
      align-items:center; justify-content:center; padding: 20px; z-index: 2000;
    }
    .modal-backdrop.show { display:flex; }

    .modal {
      width: min(520px, 100%);
      background:white;
      border-radius: 26px;
      box-shadow: var(--shadow);
      padding: 24px;
      border:1px solid var(--border);
    }
    .modal h3 { margin: 0 0 10px; font-size: 1.5rem; }
    .modal p { color: var(--muted); line-height: 1.5; }
    .modal .actions { display:flex; justify-content:flex-end; margin-top: 16px; }
    .touch-modal { max-height: calc(100vh - 32px); overflow-y: auto; }
    .modal-actions { gap: 10px; }
    .modal-actions .btn-toggle { width: auto; }
    .touch-modal input { min-height: 52px; font-size: 1.05rem; }
    .trip-review-modal { text-align: center; }
    .trip-review-icon { font-size: 3.2rem; margin-bottom: 8px; animation: mood-bob 2s ease-in-out infinite; }
    .trip-review-summary {
      margin-top: 14px;
      padding: 14px;
      border-radius: 16px;
      color: #6f3828;
      font-weight: 800;
      line-height: 1.5;
      background: linear-gradient(135deg, #fff2dc, #ffe4d6);
      border: 1px solid rgba(188, 102, 65, .2);
    }
    .trip-review-actions { gap: 10px; flex-wrap: wrap; }

    @media (max-width: 1200px) {
      .main-row { grid-template-columns: 1fr; }
    }

    @media (max-width: 920px) {
      .layout { grid-template-columns: 1fr; }
      .voice-heading { align-items: flex-start; }
      .voice-confirm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    @media (max-width: 620px) {
      .voice-heading, .voice-controls { display: grid; grid-template-columns: 1fr; }
      .voice-controls { width: 100%; }
      .voice-confirm-grid { grid-template-columns: 1fr; }
      .voice-entry { grid-template-columns: 1fr; }
      .voice-message { max-width: 94%; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
      .confetti-piece { display: none; }
    }

    /* Voice-first tablet redesign */
    :root {
      --bg1: #f7f5ff;
      --bg2: #e8f8f1;
      --text: #17213a;
      --muted: #667085;
      --accent: #ff6b72;
      --accent2: #6558d3;
      --green1: #18a878;
      --green2: #087f5b;
      --shadow: 0 14px 42px rgba(34, 45, 78, .09);
      --border: rgba(59, 67, 101, .11);
    }

    html, body { max-width: 100%; overflow-x: hidden; }
    body {
      background:
        radial-gradient(circle at 8% 0%, rgba(255, 207, 121, .26), transparent 26rem),
        radial-gradient(circle at 100% 8%, rgba(101, 88, 211, .15), transparent 30rem),
        linear-gradient(145deg, var(--bg1), var(--bg2));
    }
    .container {
      width: min(1360px, calc(100% - 32px));
      margin: 16px auto 36px;
      /* iOS home-screen apps draw under the status bar and home indicator. */
      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);
    }
    .hero, .card { border-radius: 24px; }
    .hero {
      min-height: 128px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 22px 26px;
    }
    .hero::after { content: "🪴  💶"; top: 20px; right: 24px; font-size: 1.6rem; }
    .hero > div:first-child { position: relative; z-index: 1; }
    .eyebrow {
      margin: 0 0 4px;
      color: var(--accent2);
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; }
    .subtitle { max-width: 650px; font-size: .98rem; }
    .pwa-tools { align-self: flex-end; padding-right: 0; }
    button, input, select { min-height: 44px; }

    .voice-panel {
      position: relative;
      display: grid;
      grid-template-columns: 142px minmax(0, 1fr) auto;
      align-items: center;
      gap: 22px;
      min-height: 218px;
      margin-top: 16px;
      padding: 22px 26px;
      overflow: hidden;
      border-color: rgba(177, 104, 62, .2);
      background:
        linear-gradient(115deg, rgba(255,255,255,.97), rgba(255,246,235,.92)),
        white;
    }
    .voice-panel::before { display: none; }
    .assistant-face {
      position: relative;
      width: 128px;
      height: 128px;
      display: grid;
      place-items: center;
      cursor: grab;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      outline: none;
    }
    .assistant-face:active { cursor: grabbing; }
    .assistant-face:focus-visible { border-radius: 24px; box-shadow: 0 0 0 4px rgba(101,88,211,.24); }
    /* The face is a real emoji glyph, so every mood is instantly readable.
       .face-shell stays as the animation stage that moves the whole head. */
    .face-shell {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 108px;
      height: 108px;
      transition: transform .25s ease;
    }
    .face-emoji {
      font-size: 4.6rem;
      line-height: 1;
      transition: transform .2s ease, filter .25s ease;
      filter: drop-shadow(0 8px 12px rgba(133, 76, 44, .26));
    }
    .face-effects { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
    .effect { position: absolute; opacity: 0; font-size: 19px; line-height: 1; }
    .effect.sleep { right: 4px; top: 8px; }
    .effect.sleep.second { right: -6px; top: -4px; font-size: 13px; }
    .effect.heart { left: -2px; top: 2px; }
    .effect.star { right: -2px; top: 12px; }
    .effect.dizzy { left: 4px; top: 6px; }
    .effect.sweat { right: 6px; top: 18px; font-size: 16px; }
    .assistant-wave {
      position: absolute;
      bottom: -2px;
      display: flex;
      align-items: center;
      gap: 3px;
      height: 18px;
      opacity: 0;
    }
    .assistant-wave i { width: 4px; height: 5px; border-radius: 4px; background: var(--accent); }
    .voice-center { position: relative; min-width: 0; }
    .voice-center h2 { margin: 0; font-size: clamp(1.45rem, 2.3vw, 2rem); letter-spacing: -.025em; }
    .voice-prompt { margin: 4px 0 12px; color: var(--muted); }
    .voice-person {
      display: inline-grid;
      grid-template-columns: auto minmax(120px, 1fr);
      align-items: center;
      gap: 8px;
      max-width: 330px;
      margin: 0 0 8px;
      color: #7b4d35;
      font-size: .75rem;
      font-weight: 900;
    }
    .voice-person select {
      min-height: 38px;
      padding: 7px 32px 7px 10px;
      border-color: rgba(177,104,62,.22);
      background-color: rgba(255,255,255,.86);
    }
    .voice-status { display: inline-flex; min-height: 38px; align-items: center; padding: 8px 12px; }
    .voice-caption { margin-top: 8px; color: #35405f; font-size: .9rem; font-weight: 700; }
    .voice-chat { margin-top: 5px; max-height: 48px; }
    .voice-message { max-width: 100%; padding: 6px 10px; font-size: .82rem; }
    .voice-controls { position: relative; display: grid; justify-items: stretch; gap: 10px; width: 208px; }
    .talk-button {
      position: relative;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 5px;
      width: 100%;
      min-height: 112px;
      padding: 16px 18px;
      border-radius: 28px;
      background: linear-gradient(145deg, #ff9a6b, #e94e63 62%, #d6336c);
      box-shadow: 0 14px 28px rgba(233,78,99,.3);
      overflow: hidden;
    }
    /* The bars read as "sound" without borrowing a microphone emoji. */
    .talk-bars { display: flex; align-items: flex-end; gap: 4px; height: 22px; }
    .talk-bars i {
      width: 5px;
      height: 8px;
      border-radius: 4px;
      background: rgba(255,255,255,.92);
      transition: height .2s ease;
    }
    .talk-bars i:nth-child(2) { height: 16px; }
    .talk-bars i:nth-child(3) { height: 22px; }
    .talk-bars i:nth-child(4) { height: 14px; }
    .talk-label { font-size: 1.02rem; font-weight: 900; letter-spacing: -.01em; }
    .talk-hint { color: rgba(255,255,255,.86); font-size: .7rem; font-weight: 700; }
    .talk-button.listening {
      background: linear-gradient(145deg, #34d399, #19b984 58%, #087f5b);
      box-shadow: 0 14px 28px rgba(8,127,91,.32);
      animation: mic-pulse 1.8s ease-in-out infinite;
    }
    .talk-button.listening .talk-bars i { animation: talk-bounce .72s ease-in-out infinite alternate; }
    .talk-button.listening .talk-bars i:nth-child(2) { animation-delay: .12s; }
    .talk-button.listening .talk-bars i:nth-child(3) { animation-delay: .24s; }
    .talk-button.listening .talk-bars i:nth-child(4) { animation-delay: .36s; }
    .talk-button.listening .talk-bars i:nth-child(5) { animation-delay: .48s; }
    @keyframes talk-bounce { from { height: 6px; } to { height: 24px; } }

    .mood-pod {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      padding: 10px 12px;
      border-radius: 18px;
      border: 1px solid rgba(101, 88, 211, .16);
      background: linear-gradient(135deg, rgba(237,233,254,.95), rgba(255,255,255,.85));
    }
    .mood-pod-face { font-size: 1.45rem; line-height: 1; animation: mood-bob 2.4s ease-in-out infinite; }
    .mood-pod-text { color: #4c3f9b; font-size: .74rem; font-weight: 800; line-height: 1.25; }
    @keyframes mood-bob {
      0%, 100% { transform: translateY(0) rotate(-4deg); }
      50% { transform: translateY(-3px) rotate(4deg); }
    }

    /* Every state moves the emoji head; the glyph itself carries the emotion. */
    .assistant-state.listening .face-shell { animation: face-float 1.5s ease-in-out infinite; }
    .assistant-state.thinking .face-shell { animation: thinking-tilt 1.1s ease-in-out infinite; }
    .assistant-state.speaking .assistant-wave { opacity: 1; }
    .assistant-state.speaking .assistant-wave i { animation: wave .65s ease-in-out infinite alternate; }
    .assistant-state.speaking .assistant-wave i:nth-child(2),
    .assistant-state.speaking .assistant-wave i:nth-child(4) { animation-delay: .18s; }
    .assistant-state.speaking .face-emoji { animation: talk-bob .42s ease-in-out infinite alternate; }
    .assistant-state.happy .face-shell { animation: mitti-breathe 2.6s ease-in-out infinite; }
    .assistant-state.excited .face-shell { animation: face-float .7s ease-in-out infinite; }
    .assistant-state.excited .effect.star { opacity: 1; animation: sparkle 1s ease-in-out infinite; }
    .assistant-state.cute .face-shell { animation: pet-lean 2.4s ease-in-out infinite; }
    .assistant-state.funny .face-shell { animation: tickle-shake .5s ease-in-out infinite alternate; }
    .assistant-state.sassy .face-shell { transform: rotate(5deg); }
    .assistant-state.sad .face-shell { transform: translateY(4px); animation: sleepy-nod 3s ease-in-out infinite; }
    .assistant-state.angry .face-shell { animation: furious-shake .3s linear infinite; }
    .assistant-state.crying .face-shell { transform: translateY(5px); animation: sleepy-nod 2.4s ease-in-out infinite; }
    .assistant-state.confused .face-shell { transform: rotate(-7deg); animation: zigzag 2.4s ease-in-out infinite; }
    .assistant-state.relaxed .face-shell { animation: mitti-breathe 3.5s ease-in-out infinite; }
    .assistant-state.sleepy .face-shell { animation: sleepy-nod 2.2s ease-in-out infinite; }
    .assistant-state.snoring .face-shell { animation: sleepy-nod 2.8s ease-in-out infinite; }
    .assistant-state.sleepy .effect.sleep,
    .assistant-state.snoring .effect.sleep,
    .assistant-state.accessory-sleep .effect.sleep { opacity: 1; animation: sleep-float 1.8s ease-out infinite; }
    .assistant-state.sleepy .effect.sleep.second,
    .assistant-state.snoring .effect.sleep.second,
    .assistant-state.accessory-sleep .effect.sleep.second { animation-delay: .8s; }
    .assistant-state.ticklish .face-shell { animation: tickle-shake .28s ease-in-out infinite alternate; }
    .assistant-state.delighted .face-shell { animation: celebration-hop 1s ease-in-out infinite; }
    .assistant-state.proud .face-shell { transform: translateY(-3px); animation: mitti-breathe 2.8s ease-in-out infinite; }
    .assistant-state.proud .effect.star { opacity: 1; animation: sparkle 1.4s ease-in-out infinite; }
    .assistant-state.embarrassed .face-shell { animation: tickle-shake .8s ease-in-out infinite alternate; }
    .assistant-state.embarrassed .effect.sweat { opacity: 1; animation: sweat-drop 1.5s ease-in infinite; }
    .assistant-state.suspicious .face-shell { animation: look-around 3s ease-in-out infinite; }
    .assistant-state.shocked .face-emoji { animation: shock-pop .5s ease-out; }
    .assistant-state.dizzy .face-shell { animation: dizzy-wobble .55s ease-in-out infinite; }
    .assistant-state.dizzy .effect.dizzy,
    .assistant-state.accessory-stars .effect.star,
    .assistant-state.accessory-stars .effect.dizzy { opacity: 1; animation: orbit-star 1.2s linear infinite; }
    .assistant-state.nauseous .face-shell { animation: nauseous-sway 1.1s ease-in-out infinite; }
    .assistant-state.nauseous .face-emoji { filter: drop-shadow(0 8px 12px rgba(105, 133, 61, .4)) saturate(1.2); }
    .assistant-state.accessory-sweat .effect.sweat,
    .assistant-state.worried .effect.sweat { opacity: 1; animation: sweat-drop 1.3s ease-in infinite; }
    .assistant-state.bored .face-shell { animation: sleepy-nod 3.4s ease-in-out infinite; }
    .assistant-state.annoyed .face-shell { transform: rotate(3deg); animation: tickle-shake .6s ease-in-out infinite alternate; }
    .assistant-state.furious .face-shell { animation: furious-shake .22s linear infinite; }
    .assistant-state.furious .face-emoji { filter: drop-shadow(0 8px 14px rgba(201, 54, 80, .45)); }
    .assistant-state.zipped .face-emoji,
    .assistant-state.accessory-zip .face-emoji { animation: zip-close .45s ease-out; }
    .assistant-state.shushing .face-emoji,
    .assistant-state.gesture-shush .face-emoji { animation: finger-shush 1.5s ease-in-out infinite; }
    .assistant-state.relieved .face-shell { animation: relieved-exhale 2s ease-out; }
    .assistant-state.worried .face-shell { animation: tickle-shake 1s ease-in-out infinite alternate; }
    .assistant-state.celebrating .face-shell { animation: celebration-hop .65s ease-in-out infinite; }
    .assistant-state.celebrating .effect.star { opacity: 1; animation: sparkle 1s ease-in-out infinite; }
    .assistant-state.lovestruck .face-shell { animation: heart-pop 1.6s ease-in-out infinite; }
    .assistant-state.lovestruck .effect.heart,
    .assistant-state.accessory-heart .effect.heart { opacity: 1; animation: heart-pop 1.1s ease-in-out infinite; }
    .assistant-state.daydreaming .face-shell,
    .assistant-state.gesture-look-around .face-shell { animation: look-around 3s ease-in-out infinite; }
    .assistant-state.gesture-pet .face-shell { animation: pet-lean 1.4s ease-in-out infinite; }
    .assistant-state.gesture-swipe .face-shell { animation: swipe-wobble .55s ease-out; }
    .assistant-state.gesture-fast-swipe .face-shell { animation: dizzy-wobble .35s linear infinite; }
    .assistant-state.gesture-circle .face-shell { animation: full-spin .8s linear infinite; }
    .assistant-state.gesture-zigzag .face-shell { animation: zigzag .55s ease-in-out infinite; }
    .assistant-state.intensity-2 .face-shell { animation-duration: .65s; }
    .assistant-state.intensity-2 .face-emoji { transform: scale(1.06); }
    .assistant-state.intensity-3 .face-shell { animation-duration: .35s; }
    .assistant-state.intensity-3 .face-emoji { transform: scale(1.12); }
    @keyframes face-float { 50% { transform: translateY(-5px); } }
    @keyframes thinking-tilt { 50% { transform: rotate(6deg) translateY(-2px); } }
    @keyframes talk-bob { to { transform: translateY(-3px) scale(1.04); } }
    @keyframes shock-pop { 40% { transform: scale(1.22); } }
    @keyframes wave { to { height: 17px; } }
    @keyframes mic-pulse { 50% { box-shadow: 0 0 0 10px rgba(24,168,120,.13), 0 12px 24px rgba(8,127,91,.24); } }
    @keyframes mitti-breathe { 50% { transform: translateY(-2px) scale(1.025); } }
    @keyframes sleepy-nod { 50% { transform: translateY(5px) rotate(3deg); } }
    @keyframes sleep-float { 0% { transform: translate(0, 8px) scale(.7); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(8px, -12px) scale(1.2); opacity: 0; } }
    @keyframes tickle-shake { to { transform: translateX(3px) rotate(3deg); } }
    @keyframes dizzy-wobble { 25% { transform: rotate(8deg) translateX(3px); } 75% { transform: rotate(-8deg) translateX(-3px); } }
    @keyframes nauseous-sway { 50% { transform: translateX(5px) rotate(4deg); filter: saturate(.8); } }
    @keyframes orbit-star { to { transform: rotate(360deg) translateX(9px) rotate(-360deg); } }
    @keyframes sweat-drop { 75%,100% { transform: translate(4px, 15px) rotate(25deg); opacity: 0; } }
    @keyframes furious-shake { 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } }
    @keyframes zip-close { from { transform: scale(.72) rotate(-8deg); opacity: .5; } }
    @keyframes finger-shush { 50% { transform: translateY(-3px) rotate(-7deg); } }
    @keyframes relieved-exhale { 50% { transform: scale(1.04); } }
    @keyframes celebration-hop { 50% { transform: translateY(-8px) rotate(4deg); } }
    @keyframes sparkle { 50% { transform: scale(1.5) rotate(25deg); opacity: .5; } }
    @keyframes heart-pop { 50% { transform: translateY(-5px) scale(1.25); } }
    @keyframes look-around { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
    @keyframes pet-lean { 50% { transform: rotate(-7deg) translateY(2px); } }
    @keyframes swipe-wobble { 30% { transform: translateX(12px) rotate(7deg); } 70% { transform: translateX(-6px) rotate(-4deg); } }
    @keyframes full-spin { to { transform: rotate(360deg); } }
    @keyframes zigzag { 25% { transform: translate(-5px, -2px); } 50% { transform: translate(5px, 2px); } 75% { transform: translate(-4px, 3px); } }

    .layout, .main-row, .right-stack, .side-column, .member-board { min-width: 0; }
    .layout { grid-template-columns: minmax(270px, 310px) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
    .main-row { grid-template-columns: minmax(0, 1fr) minmax(300px, 350px); }
    .side-column, .right-stack { gap: 12px; }
    .card { padding: 18px; }
    .member-board { width: 100%; max-width: 100%; overflow: hidden; }
    .member-grid { width: 100%; max-width: 100%; }
    .member-card { min-width: 0; }

    .grocery-list-card { background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(230,250,241,.9)); }
    .grocery-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .clear-list-button { color: #576071; background: rgba(255,255,255,.8); border: 1px solid var(--border); padding: 8px 11px; }
    .grocery-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 14px 0 10px; }
    .grocery-add input { border-color: rgba(24,168,120,.2); }
    .grocery-list { display: grid; gap: 7px; max-height: 290px; overflow-y: auto; }
    .grocery-list-item {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      align-items: center;
      gap: 7px;
      min-height: 50px;
      padding: 3px 4px;
      border-radius: 14px;
      background: rgba(255,255,255,.8);
      border: 1px solid rgba(8,127,91,.1);
    }
    .grocery-list-item > span { overflow-wrap: anywhere; font-weight: 750; }
    .grocery-list-item.checked > span { color: var(--muted); text-decoration: line-through; }
    .grocery-check, .grocery-delete { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
    .grocery-check { color: white; background: #d6e1dc; font-size: 1.2rem; }
    .grocery-list-item.checked .grocery-check { background: var(--green1); }
    .grocery-delete { color: #b42318; background: transparent; font-size: 1.45rem; }
    .compact-empty { padding: 12px; font-size: .86rem; }

    .voice-settings {
      margin-top: 12px;
      border: 1px solid rgba(108,92,231,.16);
      border-radius: 16px;
      background: rgba(255,255,255,.6);
      overflow: hidden;
    }
    .voice-settings summary {
      cursor: pointer;
      padding: 10px 14px;
      font-weight: 800;
      font-size: .88rem;
      list-style: none;
    }
    .voice-settings summary::-webkit-details-marker { display: none; }
    .voice-settings[open] summary { border-bottom: 1px solid rgba(108,92,231,.14); }
    .voice-settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      padding: 12px 14px 14px;
    }
    .voice-setting { display: grid; gap: 5px; min-width: 0; }
    .voice-setting-wide { grid-column: 1 / -1; }
    .voice-setting label { font-size: .76rem; font-weight: 800; color: var(--muted); }
    .voice-setting select { width: 100%; min-height: 42px; }
    .voice-setting input[type="range"] { width: 100%; accent-color: var(--purple); }
    .voice-preview { grid-column: 1 / -1; min-height: 42px; }
    .fullscreen-button { white-space: nowrap; }

    .login-page {
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: 20px;
      background:
        radial-gradient(circle at 20% 15%, rgba(108,92,231,.22), transparent 34%),
        radial-gradient(circle at 85% 80%, rgba(0,184,148,.18), transparent 32%),
        var(--bg);
    }
    .login-shell {
      width: min(100%, 440px);
      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
    .login-card {
      padding: clamp(24px, 7vw, 42px);
      border: 1px solid rgba(108,92,231,.14);
      border-radius: 28px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 24px 70px rgba(39,33,88,.18);
      text-align: center;
      backdrop-filter: blur(18px);
    }
    .login-face {
      width: 82px;
      height: 82px;
      display: grid;
      place-items: center;
      margin: 0 auto 18px;
      border-radius: 26px;
      background: linear-gradient(145deg, #efeaff, #dffaf2);
      box-shadow: inset 0 0 0 1px rgba(108,92,231,.1);
      font-size: 2.35rem;
    }
    .login-card h1 { margin: 4px 0 10px; font-size: clamp(1.65rem, 7vw, 2.2rem); }
    .login-intro, .login-note { color: var(--muted); }
    .login-form { display: grid; gap: 12px; margin-top: 24px; text-align: left; }
    .login-form input { min-height: 54px; font-size: 1.1rem; }
    .login-submit { width: 100%; min-height: 54px; margin-top: 4px; }
    .login-error {
      margin-top: 18px;
      padding: 12px 14px;
      border-radius: 14px;
      color: #9f1b13;
      background: #fff0ee;
      border: 1px solid #ffd2cc;
      font-weight: 750;
    }
    .login-note { margin: 18px 0 0; font-size: .82rem; }
    .logout-form { margin: 0; }
    .logout-button { min-height: 38px; padding: 8px 13px; }

    @media (max-width: 1180px) {
      .main-row { grid-template-columns: minmax(0, 1fr); }
      .right-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .right-stack > :last-child { grid-column: 1 / -1; }
    }
    @media (max-width: 920px) {
      .layout { grid-template-columns: minmax(0, 1fr); }
      .side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .side-column > :last-child { grid-column: 1 / -1; }
      .voice-panel { grid-template-columns: 112px minmax(0, 1fr) auto; padding: 18px; }
      .assistant-face { width: 106px; height: 106px; transform: scale(.86); }
      .pwa-tools { right: 18px; bottom: 18px; padding-right: 0; }
      .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 190px; }
    }
    @media (max-width: 700px) {
      .container { width: min(calc(100% - 20px), 1360px); margin-top: 10px; }
      .hero { display: block; padding: 18px; }
      .hero::after { display: none; }
      .pwa-tools { position: static; margin-top: 12px; padding-right: 0; }
      .voice-panel { grid-template-columns: 86px minmax(0, 1fr); gap: 12px; }
      .assistant-face { width: 86px; height: 98px; transform: scale(.72); transform-origin: center; }
      .voice-controls { grid-column: 1 / -1; width: 100%; }
      .talk-button { min-height: 96px; }
      .side-column, .right-stack { grid-template-columns: minmax(0, 1fr); }
      .right-stack > :last-child, .side-column > :last-child { grid-column: auto; }
      .summary { padding-right: 0; }
      .quick-stats { gap: 5px; }
      .quick-chip { padding: 6px 8px; font-size: .72rem; }
    }
    @media (max-width: 560px) {
      .member-grid { grid-template-columns: minmax(0, 1fr); }
      .summary, .insight-grid { grid-template-columns: minmax(0, 1fr); }
      .voice-person { grid-template-columns: minmax(0, 1fr); width: 100%; }
    }

    /* Member detail dialog */
    body.modal-open { overflow: hidden; }

    .member-modal {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      width: min(760px, 100%);
      max-height: min(88dvh, 780px);
      padding: 0;
      overflow: hidden;
      background: linear-gradient(160deg, #fffdf8, #f6fbf8);
    }
    .member-modal-head {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
      padding: 16px 18px 14px;
      border-bottom: 1px solid rgba(59,67,101,.1);
      background: linear-gradient(120deg, rgba(255,239,222,.9), rgba(238,250,244,.85));
    }
    .member-modal-emoji {
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      font-size: 1.6rem;
      background: transparent;
      border: 0;
    }
    .member-modal-titles { min-width: 0; }
    .member-modal-titles h3 { margin: 0; font-size: 1.25rem; line-height: 1.15; }
    .member-modal-titles p { margin: 3px 0 0; color: var(--muted); font-size: .84rem; font-weight: 700; }
    .member-modal-close {
      width: 42px;
      min-height: 42px;
      padding: 0;
      border-radius: 14px;
      font-size: 1rem;
      font-weight: 900;
      color: var(--muted);
      background: rgba(255,255,255,.9);
      border: 1px solid var(--border);
    }
    .member-tabs {
      display: flex;
      gap: 6px;
      padding: 10px 14px;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 1px solid rgba(59,67,101,.08);
    }
    .member-tabs::-webkit-scrollbar { display: none; }
    .member-tab {
      flex: none;
      min-height: 38px;
      padding: 7px 13px;
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 800;
      color: var(--muted);
      white-space: nowrap;
      background: rgba(255,255,255,.85);
      border: 1px solid var(--border);
    }
    .member-tab.active {
      color: white;
      background: linear-gradient(135deg, var(--accent2), #8b7ff0);
      border-color: transparent;
    }
    .member-modal-body {
      display: grid;
      align-content: start;
      gap: 12px;
      padding: 16px 18px 20px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .member-modal-body .funny { margin: 0; }
    .member-modal-body .balance-actions { margin-top: 0; }
    .member-modal-body .chart-grid { gap: 12px; }

    .history-fold {
      border: 1px solid rgba(0,0,0,.07);
      border-radius: 16px;
      background: rgba(255,255,255,.88);
      overflow: hidden;
    }
    .history-fold summary {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      font-weight: 800;
      cursor: pointer;
      list-style: none;
    }
    .history-fold summary::-webkit-details-marker { display: none; }
    .history-fold[open] summary { border-bottom: 1px solid rgba(0,0,0,.07); }
    .history-fold-body { display: grid; gap: 10px; padding: 12px 14px 14px; }
    .insight-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .member-open-hint {
      color: var(--accent2);
      font-size: .74rem;
      font-weight: 800;
    }

    /* Compact launchers replace long inline dropdowns. */
    .dashboard-launcher {
      width: 100%;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 11px;
      color: var(--text);
      text-align: left;
      background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,248,255,.88));
    }
    .dashboard-launcher:hover { border-color: rgba(101,88,211,.2); transform: translateY(-1px); }
    .dashboard-launcher > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
    .dashboard-launcher strong { font-size: .92rem; }
    .dashboard-launcher small { color: var(--muted); font-size: .7rem; font-weight: 700; }
    .launcher-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      font-size: 1.1rem;
      background: rgba(255,255,255,.92);
      border: 1px solid var(--border);
    }

    .dashboard-modal {
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      width: min(720px, 100%);
      max-height: min(94dvh, 820px);
      padding: 0;
      overflow: hidden;
      background: linear-gradient(160deg, #fffdf8, #f6fbf8);
    }
    /* The keyboard row must never be squeezed out, so the body shrinks and scrolls instead. */
    .dashboard-modal.keyboard-open { grid-template-rows: auto auto minmax(72px, 1fr) auto; }
    .dashboard-modal-body { min-height: 0; padding: 14px 16px; }
    .dashboard-panel { display: none; }
    .dashboard-panel.active { display: block; }
    .dashboard-panel .controls { margin-top: 0; }
    .dashboard-tabs.is-hidden { display: none; }
    .modal-note {
      padding: 12px 14px;
      border: 1px solid rgba(101,88,211,.12);
      border-radius: 15px;
      color: #4f5670;
      background: rgba(241,239,255,.7);
      font-size: .82rem;
      line-height: 1.45;
    }
    .admin-action-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }
    .admin-action-grid .btn-toggle { justify-content: center; text-align: center; }
    .restore-zone {
      display: grid;
      gap: 9px;
      padding: 14px;
      border: 1px dashed rgba(239,68,68,.22);
      border-radius: 17px;
      background: rgba(255,247,247,.76);
    }
    .restore-zone label { margin: 0; }
    .shared-open { display: grid; justify-items: end; gap: 2px; }
    .shared-open small { color: var(--accent2); font-size: .67rem; font-weight: 800; }

    /* Built-in keyboard, docked at the bottom of the dialog. Keys scale with the
       available height so the bottom row is never clipped on short screens. */
    .soft-keyboard {
      --soft-key-h: clamp(32px, 5.4dvh, 44px);
      display: grid;
      gap: 5px;
      padding: 7px 8px max(8px, env(safe-area-inset-bottom));
      border-top: 1px solid rgba(59,67,101,.12);
      background: linear-gradient(180deg, rgba(238,240,251,.96), rgba(228,232,247,.98));
    }
    .soft-keyboard[hidden] { display: none; }
    /* Page-level fields (the grocery checklist) get the pad pinned to the screen bottom. */
    .soft-keyboard.floating {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1800;
      margin: 0 auto;
      max-width: 640px;
      border: 1px solid rgba(59,67,101,.14);
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -14px 40px rgba(34,45,78,.18);
    }
    body.softkeys-floating { padding-bottom: 260px; }
    .soft-keyboard-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .soft-keyboard-label { overflow: hidden; color: var(--muted); font-size: .7rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
    .soft-keyboard-done {
      flex: none;
      min-height: 30px;
      padding: 4px 13px;
      font-size: .76rem;
      color: white;
      background: linear-gradient(135deg, var(--accent2), #8b7ff0);
    }
    .soft-keyboard-keys { display: grid; gap: 5px; }
    .soft-keyboard-keys.numeric { width: 100%; max-width: 268px; margin: 0 auto; }
    .soft-keyboard-row { display: flex; gap: 5px; justify-content: center; }
    .soft-key {
      flex: 1 1 0;
      min-width: 0;
      min-height: var(--soft-key-h);
      padding: 3px 2px;
      border-radius: 9px;
      font-size: clamp(.78rem, 2.1vw, .95rem);
      font-weight: 800;
      line-height: 1;
      color: var(--text);
      background: white;
      box-shadow: 0 2px 0 rgba(59,67,101,.16);
    }
    .soft-key:active { transform: translateY(1px); box-shadow: none; }
    /* Same key height as the letter pad, which already fits; only the type is larger. */
    .soft-keyboard-keys.numeric .soft-key { font-size: clamp(.95rem, 2.4vw, 1.15rem); }
    .soft-key.key-space { flex: 4 1 0; }
    .soft-key.key-shift, .soft-key.key-backspace, .soft-key.key-symbols, .soft-key.key-letters {
      flex: 1.6 1 0;
      font-size: clamp(.66rem, 1.6vw, .78rem);
      background: #dfe3f2;
    }
    .soft-keyboard-keys.numeric .soft-key.key-backspace { flex: 1 1 0; font-size: 1.05rem; }
    .soft-key.key-done, .soft-key.key-enter {
      flex: 1.6 1 0;
      font-size: clamp(.66rem, 1.6vw, .78rem);
      color: white;
      background: var(--green1);
    }
    .soft-key.active { color: white; background: var(--accent2); }

    /* Short screens: drop the label row and tighten further. */
    @media (max-height: 620px) {
      .soft-keyboard { --soft-key-h: 30px; gap: 4px; padding: 5px 6px max(6px, env(safe-area-inset-bottom)); }
      .soft-keyboard-label { display: none; }
      .soft-keyboard-keys, .soft-keyboard-row { gap: 4px; }
    }
    .shared-overview-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 16px;
      border-radius: 18px;
      color: #443b8f;
      background: linear-gradient(135deg, rgba(237,233,254,.88), rgba(231,250,241,.9));
      border: 1px solid rgba(101,88,211,.12);
    }
    .shared-overview-total span { color: var(--muted); font-size: .82rem; font-weight: 800; }
    .shared-overview-total strong { font-size: 1.35rem; }

    @media (max-width: 620px) {
      .dashboard-modal { max-height: calc(100dvh - 20px); }
      .dashboard-modal-body { min-height: 0; padding: 14px; }
      .admin-action-grid { grid-template-columns: minmax(0, 1fr); }
      .dashboard-panel .inline-2 { grid-template-columns: minmax(0, 1fr); }
    }

    /* Tablet: keep the whole dashboard visible without vertical scrolling */
    @media (min-width: 561px) and (max-width: 1180px) {
      .container { margin: 10px auto 20px; }
      .hero { min-height: 0; padding: 14px 18px; gap: 14px; }
      .hero::after { font-size: 1.2rem; top: 14px; right: 18px; }
      h1 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
      .eyebrow { font-size: .64rem; margin-bottom: 2px; }
      .subtitle { font-size: .82rem; }
      .summary { margin-top: 10px; gap: 6px; padding-right: 170px; }
      .summary-chip { padding: 6px 9px; border-radius: 12px; }
      .summary-chip span { font-size: .62rem; }
      .summary-chip strong { font-size: .78rem; }
      .connection-status { padding: 5px 9px; font-size: .72rem; }

      .voice-panel { min-height: 0; margin-top: 10px; padding: 14px 16px; gap: 14px; }
      .card { padding: 14px 16px; }
      .layout, .main-row, .right-stack, .side-column { gap: 12px; }
      .subhead { margin: 10px 0 7px; }
      .empty { padding: 12px; font-size: .84rem; }
    }

    /* Scaled-down dashboard cards. Also applies to touch screens wider than the tablet
       breakpoint, since many tablets report a CSS width above 1180px. */
    @media (min-width: 561px) and (max-width: 1180px),
           (min-width: 561px) and (pointer: coarse) {
      /* Members overview */
      .main-row > .card:first-child { padding: 12px 14px; }
      .main-row > .card:first-child .section-title { font-size: .98rem; }
      .member-board { padding: 6px; border-radius: 18px; }
      .member-grid { gap: 8px; }
      .member-card { border-radius: 20px; }
      .member-summary { padding: 10px 11px; gap: 7px; }
      .member-top { gap: 10px; }
      .member-name { font-size: .9rem; }
      .member-money { margin-top: 2px; font-size: .95rem; }
      .member-budget-line { margin-top: 1px; font-size: .68rem; }
      .emoji-pill { min-width: 36px; height: 36px; border-radius: 12px; font-size: 1.05rem; }
      .member-summary-main { gap: 6px; }
      .progress-head { font-size: .7rem; }
      .progress-track { height: 8px; }
      .quick-stats { gap: 4px; }
      .quick-chip { padding: 4px 7px; font-size: .66rem; }
      .member-open-hint { font-size: .62rem; }
      .member-modal { max-height: 92dvh; }

      /* Live checklist */
      .grocery-list-card { padding: 12px 14px; }
      .grocery-list-card .eyebrow { font-size: .58rem; }
      .grocery-list-card .section-title { font-size: .98rem; }
      .clear-list-button { min-height: 34px; padding: 6px 9px; font-size: .78rem; }
      .grocery-add { gap: 6px; margin: 8px 0 7px; }
      .grocery-add input { min-height: 38px; padding: 8px 11px; font-size: .86rem; }
      .btn-grocery { min-height: 38px; padding: 8px 13px; font-size: .86rem; }
      .grocery-list { gap: 5px; max-height: 150px; }
      .grocery-list-item {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        gap: 5px;
        min-height: 40px;
        border-radius: 12px;
        font-size: .84rem;
      }
      .grocery-check, .grocery-delete { width: 34px; height: 34px; min-height: 34px; border-radius: 10px; }
      .grocery-check { font-size: 1rem; }
      .grocery-delete { font-size: 1.2rem; }
      .compact-empty { padding: 9px; font-size: .8rem; }

      /* Grocery and household shopping trackers */
      .shared-card { border-radius: 20px; }
      .shared-summary { padding: 10px 12px; gap: 10px; }
      .shared-title { font-size: .95rem; }
      .shared-money { margin-top: 2px; font-size: .95rem; }
      .details-inner { padding: 0 12px 12px; }
    }