/* ============================================================
   WeddingTablePlannerOnline.com — MOBILE LAYER
   ------------------------------------------------------------
   Self-contained mobile redesign matching the mobile wireframes
   (see screenshot: Tables seating canvas).

   EVERYTHING here lives inside @media (max-width: 768px), so this
   file is completely inert on desktop and cannot alter the
   desktop layout. Loaded after style.css.
   ============================================================ */

@media (max-width: 768px) {

  /* ---- Layout shell -------------------------------------- */
  html, body { overflow: hidden; height: 100%; overscroll-behavior: none; }
  .app-shell { height: 100%; height: 100dvh; display: flex; flex-direction: column; }

  /* ---- Header (labelled tool buttons) ------------------- */
  /* A clean, uniform toolbar: small logo on the left, then equal-sized
     icon-over-label tools — Undo · Colours · Save · Settings · account. */
  .app-header {
    padding: 0 10px;
    gap: 6px;
    min-height: 64px;
    flex: 0 0 auto;
    background: var(--white);
    border-bottom: 1px solid var(--mid-rose);
    overflow: hidden;
  }
  /* Logo hidden on mobile for now; remaining buttons centred in the header. */
  .header-left { display: none; }

  .app-header { justify-content: center; }
  .header-actions { flex: 0 0 auto; gap: 2px; align-items: center; margin-left: 0; }
  .header-account { flex: 0 0 auto; gap: 2px; align-items: center; }

  /* Every header button: a uniform 54px-tall column with the icon vertically
     centred in a fixed box and the caption beneath on a shared baseline. */
  .header-actions .btn-icon,
  .header-account .btn-icon,
  .btn-save {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 4px;
    width: 50px; height: 50px; padding: 7px 2px 0;
    border-radius: 14px;
    font-size: 10px; font-weight: 600; line-height: 1.1;
    letter-spacing: .1px;
    color: var(--pink); white-space: nowrap;
  }
  /* Fixed-height icon box so every glyph sits on the same line regardless of
     its intrinsic height (palette/cloud are taller than the undo arrow). */
  .header-actions .btn-icon i,
  .header-account .btn-icon i,
  .btn-save i {
    display: flex; align-items: center; justify-content: center;
    height: 22px; font-size: 18px; line-height: 1;
  }
  .header-actions .btn-icon span,
  .header-account .btn-icon span,
  #save-btn-label { display: block; }

  .header-actions .btn-icon:active,
  .header-account .btn-icon:active { background: var(--blush); }
  .header-actions .btn-icon:disabled { opacity: 1; cursor: default; }

  /* Save: a flat tool like the others (no heavy filled box on mobile) — just
     tinted pink so it still reads as the primary action. Override the desktop
     gradient/shadow state classes so no odd background box shows. */
  .btn-save,
  .btn-save--idle,
  .btn-save--saving,
  .btn-save--saved,
  .btn-save--error {
    background: none !important;
    box-shadow: none !important;
    color: var(--pink) !important;
    transform: none !important;
  }
  #save-btn-icon { font-size: 18px; color: var(--pink); }
  #save-btn-label { color: var(--pink); }
  .btn-save:active { background: var(--blush) !important; }
  /* Keep the saved/error states legible via colour only. */
  .btn-save--saved #save-btn-icon, .btn-save--saved #save-btn-label { color: #27AE60 !important; }
  .btn-save--error #save-btn-icon, .btn-save--error #save-btn-label { color: var(--danger) !important; }

  /* The gear has no text label in the HTML — supply one on mobile so the row
     stays uniform. */
  .header-account [title="Settings"]::after {
    content: "Settings"; display: block;
    font-size: 10px; font-weight: 600; color: var(--pink); line-height: 1.1;
  }

  /* Account/sign-in sit apart on the right with a subtle divider. Make them
     flat tools like the rest (no gradient pill) so the row stays uniform. */
  .header-account { margin-left: 2px; padding-left: 6px; border-left: 1px solid var(--mid-rose); }
  .btn-account, .btn-signin {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 4px; width: 50px; height: 50px; padding: 7px 2px 0;
    border-radius: 14px; font-size: 10px; font-weight: 600;
    background: none !important; border: none !important;
    box-shadow: none !important; color: var(--pink) !important;
    max-width: none;
  }
  .btn-signin { color: var(--pink) !important; }
  .btn-signin span { display: block; }
  .btn-account i:first-child, .btn-signin i { height: 22px; display: flex; align-items: center; font-size: 18px; }
  .btn-account .fa-circle-user { color: var(--pink); }
  .btn-account .account-chevron, .btn-account .account-email { display: none; }
  /* Give the bare account icon a caption so it lines up with the others. */
  .btn-account::after { content: "Account"; display: block; font-size: 10px; font-weight: 600; color: var(--pink); line-height: 1.1; }

  .guest-progress { display: none; }
  .hamburger { display: none; }   /* replaced by the bottom tab bar */

  /* Declutter: Export is a tab; Print/Delete-all/Guide aren't essential here.
     Keep Undo, Colours, Save, Settings (gear), account. */
  #delete-all-btn,
  .header-actions [title="Print (diagram + guest list)"],
  .header-actions [title="Export"],
  .header-account [title="Guide"] { display: none; }

  /* ---- Bottom tab bar (Guests / Tables / Export) -------- */
  .mobile-tabs {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: var(--white);
    border-top: 1px solid var(--mid-rose); border-bottom: none;
    box-shadow: 0 -2px 14px rgba(107,45,62,.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab-btn {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    min-height: 56px;
    font-size: 12px; font-weight: 500;
    color: #9a7d87;
    background: none; border: none;
    border-top: 2.5px solid transparent;
  }
  .tab-btn::before {
    font-family: "Font Awesome 6 Free"; font-weight: 400;
    font-size: 19px; line-height: 1;
  }
  .tab-btn[data-tab="guests"]::before  { content: "\f0c0"; font-weight: 900; } /* users */
  .tab-btn[data-tab="tables"]::before  { content: "\f111"; }                    /* circle (table) */
  .tab-btn[data-tab="export"]::before  { content: "\f56e"; font-weight: 900; }  /* file-export */
  .tab-btn.active { color: var(--pink); border-top-color: var(--pink); }

  /* App body fills the space between header and tab bar.
     Force block (not the desktop flex-row) so absolute children size to the
     full viewport width — otherwise leftover flex sizing inflates the canvas. */
  .app-body {
    display: block;
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* ====================================================== *
   *  TABLES TAB — full-height dotted canvas (matches shot)  *
   * ====================================================== */
  .canvas-wrap {
    display: none;
    flex-direction: column;
    position: absolute; inset: 0;
    padding: 0; min-height: 0;
  }
  body.mtab-tables .canvas-wrap { display: flex; }

  /* Seat hover tooltip (the dark "First Last" pill) is a desktop affordance.
     On touch it lingers over the Edit Guest modal and gets in the way, so
     suppress it entirely on mobile. */
  .seat-tooltip { display: none !important; }

  /* Event name: Playfair italic on a soft blush band (Christina & Tom) */
  /* Hidden on mobile for now. */
  .canvas-title {
    display: none;
    flex: 0 0 auto;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic; font-weight: 500;
    font-size: 21px; text-align: center;
    padding: 12px 14px;
    color: var(--dark-rose);
    background: var(--blush);
    border-bottom: 1px solid var(--mid-rose);
  }

  /* Pill toolbar: + Add Table | Fit all | hint */
  .canvas-toolbar {
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto;
    padding: 12px 14px 6px;
  }
  .canvas-toolbar .btn-ghost {
    padding: 9px 16px; font-size: 14px; font-weight: 500;
    border: 1.5px solid var(--mid-rose); border-radius: 999px;
    background: var(--white); color: var(--dark-rose);
  }
  .canvas-hint {
    display: block; flex: 1;
    font-size: 12px; line-height: 1.3; color: #b09aa2;
    text-align: right;
  }
  .table-cards { display: none; }
  .table-sheet { display: none !important; }   /* no bottom sheet on Tables tab */

  /* Single-table view: no overall map controls on mobile. Hide the toolbar's
     "Fit all" + seating hint and the table-list button — navigation is the
     Back/Add/Next bar below the table. "+ Add Table" stays available. */
  .canvas-toolbar { display: none; }
  #m-list-btn { display: none !important; }

  /* Dotted-grid canvas (matches the wireframe background) */
  .canvas-scroll {
    flex: 1; min-height: 0;
    overflow: hidden;                 /* fit-to-screen, no scroll */
    touch-action: none;
    -webkit-overflow-scrolling: touch;
    background-color: var(--white);
    background-image: radial-gradient(circle, #e7d5dc 1px, transparent 1.2px);
    background-size: 22px 22px;
    background-position: 6px 6px;
  }
  .main-canvas {
    display: block; touch-action: none;
    width: 100%; height: 100%;        /* override desktop 1200×900 */
    cursor: default;
  }

  /* Zoom +/- control — not used in the single-table view (no overall map). */
  .mobile-zoom { display: none !important; }
  .mobile-zoom button {
    width: 44px; height: 44px;
    background: var(--white); color: var(--dark-rose);
    font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .mobile-zoom button + button { border-top: 1px solid var(--mid-rose); }
  /* Only +/- on this control (hide the "fit" button — it's in the toolbar) */
  .mobile-zoom button[title="Fit all"] { display: none; }
  /* Hide the zoom control when the table-list overlay is open. */
  body.mtab-tables:has(.m-tablelist.show) .mobile-zoom { display: none; }

  /* ====================================================== *
   *  SINGLE-TABLE NAV (now lives inside the detail panel)  *
   * ====================================================== */
  /* The Back · Add · Next controls moved into the detail panel — hide the old
     floating bar on mobile (kept in the DOM for any non-mobile fallback). */
  .m-table-nav { display: none !important; }

  body.mtab-tables .canvas-scroll { flex: 1 1 auto; }

  /* ====================================================== *
   *  "PICK A GUEST" SHEET (tap an empty seat)              *
   * ====================================================== */
  /* Same height + position as the pinned table panel — it REPLACES it (one
     panel at a time), so the bottom band never changes height or stacks.
     Matches .m-pinned exactly: 46dvh tall, sitting on the tab bar. */
  .m-pick-sheet {
    display: none;
    position: fixed; left: 0; right: 0;
    top: auto;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    height: 46dvh; max-height: 46dvh; z-index: 84;
    background: var(--white);
    border-top: 1px solid var(--mid-rose);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(107,45,62,.20);
    flex-direction: column;
    overflow: hidden;
  }
  .m-pick-sheet.show { display: flex; }
  /* Hide the table panel while another bottom panel is showing. */
  body.mtab-tables .panel-right.m-hidden { display: none !important; }
  .m-pick-head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 16px 10px; flex: 0 0 auto;
  }
  .m-pick-head h2 {
    flex: 1; margin: 0;
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 20px; font-weight: 500; color: var(--dark-rose);
  }
  .m-pick-head .m-back { font-size: 18px; color: var(--dark-rose); background: none; padding: 4px 6px; }
  .m-pick-body {
    flex: 1; overflow-y: auto;
    padding: 0 12px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .m-pick-new {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 12px; margin-bottom: 8px;
    font-size: 15px; font-weight: 600; color: var(--pink);
    background: var(--blush); border-radius: 12px;
  }

  /* ====================================================== *
   *  TABLE LIST SCREEN (wireframe A2) — toggled from canvas *
   * ====================================================== */
  .m-tablelist {
    display: none;
    position: absolute; inset: 0; z-index: 50;
    background: var(--blush);
    flex-direction: column;
  }
  .m-tablelist.show { display: flex; }
  .m-tablelist-head {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 14px 8px;
  }
  .m-tablelist-head h2 {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 20px; color: var(--dark-rose); margin: 0; flex: 1;
  }
  .m-tablelist-summary { padding: 0 16px 8px; font-size: 13px; color: #998; }
  .m-tablelist-body {
    flex: 1; overflow-y: auto; padding: 0 12px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
  /* iOS-style segmented control: tinted track, raised white pill for the
     active segment so the current view clearly stands out. */
  .m-toggle {
    display: flex; gap: 4px; margin: 0 14px 10px;
    padding: 4px; border-radius: 12px;
    background: var(--blush);
  }
  .m-toggle button {
    flex: 1; padding: 9px; font-size: 13px; font-weight: 600;
    color: #a9818e; background: transparent;
    border-radius: 9px; transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .m-toggle button.active {
    background: var(--white); color: var(--dark-rose);
    box-shadow: 0 1px 4px rgba(107,45,62,.18);
  }

  .sheet-row {
    display: flex; align-items: center; gap: 11px;
    padding: 15px 14px; margin-bottom: 8px;
    background: var(--white); border-radius: 12px;
    box-shadow: 0 1px 4px rgba(107,45,62,.06);
    font-size: 15px;
  }
  .sheet-row-dot {
    width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.10);
  }
  .sheet-row-name {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-weight: 500; color: var(--dark-rose); font-size: 16px;
  }
  .sheet-row-type { font-size: 12px; color: #b0a0a8; margin-left: 6px; font-weight: 400; font-style: normal; }
  .sheet-row-cap  { margin-left: auto; font-size: 13px; color: #999; font-weight: 500; }
  .table-sheet.seating .sheet-row.has-space,
  .m-tablelist.seating .sheet-row.has-space { background: var(--available-bg); }
  .m-tablelist.seating .sheet-row.has-space .sheet-row-cap { color: #2e7d32; font-weight: 700; }
  .m-tablelist.seating .sheet-row.is-full { opacity: .45; }

  /* Seating-mode hint banner (green) shown on canvas + list */
  .m-seat-banner {
    display: none;
    flex: 0 0 auto;
    padding: 10px 16px; font-size: 13px; font-weight: 600;
    color: #2e7d32; background: var(--available-bg);
    text-align: center;
  }
  body.m-seating .m-seat-banner { display: block; }

  /* "Table N/Total" pill, pinned to the canvas top-right. */
  .m-table-count {
    position: absolute; top: 0; right: 0; z-index: 6;
    padding: 4px 9px; font-size: 10px; font-weight: 700; letter-spacing: .2px;
    color: var(--dark-rose); background: rgba(255,255,255,.92);
    border: 1px solid var(--mid-rose);
    border-width: 0 0 1px 1px;
    border-radius: 0 0 0 10px;
    box-shadow: 0 2px 8px rgba(107,45,62,.10);
    pointer-events: none;
  }
  .m-table-count.hidden { display: none; }

  /* Always-visible "+ Add Table" pill. Sits at the bottom-right of the canvas
     (which is raised above the pinned detail panel), so it's reachable from
     first load without needing a table selected. */
  .m-add-fab { display: none; }
  body.mtab-tables .m-add-fab {
    display: inline-flex; align-items: center; gap: 7px;
    position: absolute; right: 12px; bottom: 12px; z-index: 8;
    padding: 10px 16px;
    font-size: 13px; font-weight: 600; line-height: 1;
    color: #fff; background: var(--pink);
    border: none; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(107,45,62,.28);
    cursor: pointer;
  }
  body.mtab-tables .m-add-fab:active { background: var(--dark-rose); }
  body.mtab-tables .m-add-fab i { font-size: 13px; }
  /* Hide it while the full-screen table-list overlay is open. */
  body.mtab-tables:has(.m-tablelist.show) .m-add-fab { display: none; }

  /* ====================================================== *
   *  GUESTS TAB                                            *
   * ====================================================== */
  .panel-left,
  .panel-right { display: none; }

  body.mtab-guests .panel-left {
    display: flex; flex-direction: column;
    position: absolute; inset: 0; width: 100%;
    background: var(--blush); z-index: 40;
  }
  .panel-left .panel-header {
    padding: 14px 14px 8px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .panel-left .panel-title {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 22px; font-weight: 500; color: var(--dark-rose);
  }
  .panel-left .panel-actions { display: flex; gap: 6px; }
  .panel-left .panel-actions .small {
    padding: 8px 13px; font-size: 13px; border-radius: 999px;
  }

  .guest-search { padding: 4px 14px 8px; }
  .guest-search input {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--mid-rose); border-radius: 12px;
    background: var(--white); font-size: 16px;
  }

  .guest-filters {
    display: flex; gap: 7px; overflow-x: auto;
    padding: 2px 14px 10px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .guest-filters::-webkit-scrollbar { display: none; }
  .filter-chip {
    flex: 0 0 auto;
    padding: 8px 14px; font-size: 13px; border-radius: 999px;
    border: 1.5px solid var(--mid-rose); background: var(--white);
    color: var(--dark-rose); white-space: nowrap;
  }
  .filter-chip.active { background: var(--pink); color: #fff; border-color: var(--pink); }

  .guest-list {
    flex: 1; overflow-y: auto; padding: 0 12px;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  .guest-item {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 12px; margin-bottom: 8px;
    background: var(--white); border-radius: 12px;
    border-left: 4px solid var(--mid-rose);
    box-shadow: 0 1px 4px rgba(107,45,62,.06);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .guest-item:active {
    transform: scale(1.04);
    box-shadow: 0 4px 10px rgba(107,45,62,.14);
  }
  .guest-item.selected { background: var(--available-bg); border-left-color: var(--available) !important; }
  .guest-item .guest-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
  .guest-item .guest-star { flex-shrink: 0; }
  .guest-item .guest-name {
    flex: 1; font-size: 15px; font-weight: 500; color: var(--dark-rose);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .guest-item .guest-badges { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
  .guest-item .badge-rsvp-pending,
  .guest-item .badge-rsvp-declined,
  .guest-item .badge-role { display: none; }
  .guest-item .guest-delete { display: none; }

  /* Grouped-by-table sections (injected by mobile.js) */
  .m-group { margin: 2px 2px 12px; }
  .m-group-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 8px; cursor: pointer;
  }
  .m-group-head .m-group-dot { width: 12px; height: 12px; border-radius: 50%; }
  .m-group-head .m-group-name {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-weight: 500; color: var(--dark-rose); font-size: 16px;
  }
  .m-group-head .m-group-count { margin-left: auto; font-size: 13px; color: #999; }
  .m-group-head .m-group-chev { color: #c0a8b2; transition: transform .2s; }
  .m-group.collapsed .m-group-chev { transform: rotate(-90deg); }
  .m-group.collapsed .guest-item { display: none; }

  .panel-footer { display: none; }

  /* ====================================================== *
   *  GUEST / TABLE DETAIL SHEETS                            *
   * ====================================================== */
  body.mtab-tables .panel-right.mobile-active {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    max-height: 66%; width: 100%; z-index: 82;
    background: var(--white);
    border-top: 1px solid var(--mid-rose);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(107,45,62,.20);
    animation: m-sheet-up .24s ease;
    overflow: hidden;          /* the guest list scrolls, not the whole panel */
  }
  /* Inside the panel: header (name + toolbar + capacity) stays fixed, only the
     guest list scrolls — so the panel can never overflow its band. */
  body.mtab-tables .panel-right.mobile-active #right-table-detail {
    display: flex; flex-direction: column;
    flex: 1 1 auto; min-height: 0; height: 100%;
  }
  body.mtab-tables .panel-right.mobile-active .table-detail-header,
  body.mtab-tables .panel-right.mobile-active .capacity-bar-wrap { flex: 0 0 auto; }
  /* Dietary summary is desktop-only — hide it on mobile so the guest list gets
     the full sheet height and scrolls on its own. */
  body.mtab-tables .panel-right.mobile-active .dietary-summary { display: none; }
  body.mtab-tables .panel-right.mobile-active .right-guest-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;                         /* Firefox */
    scrollbar-color: var(--mid-rose) transparent;
  }
  /* Slim rose scrollbar (WebKit/Chromium) */
  body.mtab-tables .panel-right.mobile-active .right-guest-list::-webkit-scrollbar {
    width: 6px;
  }
  body.mtab-tables .panel-right.mobile-active .right-guest-list::-webkit-scrollbar-thumb {
    background: var(--mid-rose); border-radius: 3px;
  }
  body.mtab-tables .panel-right.mobile-active .right-guest-list::-webkit-scrollbar-track {
    background: transparent;
  }
  /* When pinned under the single-table view it's a permanent panel (not a
     transient sheet): locked to exactly the bottom half of the screen on all
     devices. Its top edge sits at the vertical midpoint (50dvh) and it runs
     down to just above the 56px tab bar — so panel + tab bar fill the lower
     half no matter the content or screen size. No re-animation. */
  body.mtab-tables .panel-right.m-pinned {
    animation: none;
    top: auto;                 /* size from the tab bar UP by a fixed height */
    height: 46dvh; max-height: 46dvh;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  /* Reserve the panel's band so the canvas sits above it. The tab bar is a
     fixed overlay, so app-body (and the canvas) extends to the viewport bottom
     — behind both the tab bar and the panel. The panel sits 56px+safe above
     the viewport bottom and is 46dvh tall, so the canvas must clear that whole
     band: 46dvh + 56px + safe-area. */
  body.mtab-tables:has(.panel-right.m-pinned) .canvas-wrap {
    bottom: calc(46dvh + 56px + env(safe-area-inset-bottom, 0px));
  }
  /* ── App-like header + action toolbar ─────────────────── */
  .panel-right .table-detail-header {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 14px 12px 12px;
  }
  .panel-right .table-detail-name {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 20px; font-weight: 500; text-align: center;
  }
  /* Position now shown in the top-right canvas badge instead of here. */
  .panel-right .m-pager-pos { display: none; }

  /* Toolbar row: ‹ prev | four icon actions | next › */
  .m-table-toolbar {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%; margin-top: 6px;
  }
  .panel-right .panel-actions {
    display: flex; align-items: stretch; justify-content: center;
    gap: 9px; flex: 1 1 auto;
    background: none; border-radius: 0;
    padding: 0; box-shadow: none;
  }
  /* Each action = a bordered white card, icon on top, small label underneath. */
  .panel-right .panel-actions .small {
    flex: 1 1 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    padding: 11px 3px 9px; min-width: 0;
    font-size: 10.5px; font-weight: 500; line-height: 1;
    color: #9B3B54;
    background: var(--white); border: 1px solid #F1DEE4;
    border-radius: 16px;
    transition: background .15s, transform .15s;
  }
  .panel-right .panel-actions .small i { font-size: 18px; line-height: 1; }
  .panel-right .panel-actions .small .m-btn-label {
    display: block; white-space: nowrap;
  }
  .panel-right .panel-actions .small:active {
    background: #FCF4F6; transform: translateY(-2px);
  }
  .panel-right .panel-actions .small.danger { color: #B15A72; }

  /* Re-show the mobile-only Add button (hidden by default in style.css). */
  .panel-right .panel-actions #m-detail-add { display: flex; }

  /* Prev / Next arrows: tall rounded chips flanking the bar. */
  .m-pager-btn {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 52px; font-size: 16px;
    color: #B15A72; background: var(--white);
    border: 1px solid #F1DEE4; border-radius: 16px;
    box-shadow: none;
    transition: background .15s;
  }
  .m-pager-btn:active { background: #FCF4F6; }
  .m-pager-btn:disabled { opacity: .35; box-shadow: none; }

  .capacity-bar-wrap { padding: 0 16px 8px; }
  .right-guest-list { padding: 0 8px; }
  .dietary-summary { padding: 8px 16px 22px; }

  /* Guest detail sheet (built by mobile.js) */
  .m-guest-sheet {
    display: none;
    position: fixed; left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    max-height: 78%; z-index: 95;
    background: var(--white);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(107,45,62,.24);
    flex-direction: column;
    animation: m-sheet-up .24s ease;
    overflow-y: auto;
  }
  .m-guest-sheet.show { display: flex; }
  .m-guest-sheet-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; }
  .m-guest-sheet-head .m-back { font-size: 18px; color: var(--dark-rose); background: none; padding: 4px 6px; }
  .m-guest-sheet-head h2 {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 21px; font-weight: 500; color: var(--dark-rose); margin: 0; flex: 1;
  }
  .m-guest-sheet-body { padding: 0 16px 8px; }
  .m-detail-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 0; border-bottom: 1px solid var(--blush); font-size: 15px;
  }
  .m-detail-row .m-detail-label { color: #998; }
  .m-detail-row .m-detail-val { color: var(--dark-rose); font-weight: 600; text-align: right; }
  .m-detail-actions {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .m-detail-actions button { width: 100%; padding: 14px; font-size: 15px; font-weight: 600; border-radius: 12px; }
  .m-btn-primary { background: var(--pink); color: #fff; }
  .m-btn-ghost   { background: var(--blush); color: var(--dark-rose); border: 1.5px solid var(--mid-rose); }
  .m-btn-danger  { background: #fff; color: var(--danger); border: 1.5px solid #f0c0c0; }

  .m-backdrop { display: none; position: fixed; inset: 0; z-index: 81; background: rgba(60,20,30,.34); }
  .m-backdrop.show { display: block; }

  /* ====================================================== *
   *  EXPORT TAB                                            *
   * ====================================================== */
  .export-panel { display: none; }
  body.mtab-export .export-panel {
    display: flex; flex-direction: column;
    position: absolute; inset: 0; width: 100%; height: auto;
    background: var(--blush); z-index: 40; overflow-y: auto;
  }
  body.mtab-export .export-panel .panel-header { padding: 16px; }
  body.mtab-export .export-panel .panel-title {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 22px; color: var(--dark-rose);
  }
  body.mtab-export .export-panel .panel-header .modal-close { display: none; }
  .export-options {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 6px 14px calc(80px + env(safe-area-inset-bottom, 0px));
  }
  .export-card {
    background: var(--white); border-radius: 14px; padding: 22px 12px;
    text-align: center; box-shadow: 0 1px 6px rgba(107,45,62,.08);
    display: flex; flex-direction: column; align-items: center; gap: 7px;
  }
  .export-card .export-icon { font-size: 26px; color: var(--pink); }
  .export-card strong { font-size: 14px; color: var(--dark-rose); }
  .export-card span { font-size: 11px; color: #998; }

  /* ====================================================== *
   *  MODALS AS BOTTOM SHEETS (Add/Edit Guest & Table)      *
   * ====================================================== */
  .modal-overlay { align-items: flex-end; }
  .modal-box {
    width: 100%; max-width: 100%; max-height: 92vh;
    border-radius: 18px 18px 0 0;
    animation: m-sheet-up .24s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .modal-box.modal-sm { max-width: 100%; }

  /* Table editor: fill the whole screen, no gap at the top */
  #table-modal.modal-overlay { align-items: stretch; }
  #table-modal .modal-box {
    max-height: 100vh; height: 100vh;
    max-height: 100dvh; height: 100dvh;
    border-radius: 0;
    animation: m-sheet-up .24s ease;
    display: flex; flex-direction: column;
  }
  #table-modal .modal-body { flex: 1; overflow-y: auto; }

  .modal-header { padding: 16px 16px 10px; }
  .modal-header h2 {
    font-family: 'Playfair Display', Georgia, serif; font-style: italic;
    font-size: 20px; color: var(--dark-rose);
  }
  .modal-body { padding: 4px 16px 8px; }
  .modal-footer {
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    position: sticky; bottom: 0; background: var(--white);
  }
  .modal-footer .btn-primary,
  .modal-footer .btn-ghost { padding: 13px 18px; font-size: 15px; }
  .form-row { flex-direction: column; gap: 12px; }
  .form-row label { width: 100%; }
  .modal-body label input,
  .modal-body label select,
  .modal-body label textarea,
  .modal-body .gm-autocomplete input { padding: 12px; font-size: 16px; } /* 16px avoids iOS zoom */
  .modal-body .gm-autocomplete input { padding-right: 38px; } /* room for the arrow */

  /* Stack the label above the search on narrow screens, like other fields */
  .gm-existing-row { flex-direction: column; align-items: stretch; gap: 4px; }

  @keyframes m-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

  .auth-gate-box, .paywall-box { margin: 0; border-radius: 18px 18px 0 0; }

  /* Toast above the tab bar */
  .toast {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 50%; transform: translateX(-50%);
    width: max-content; max-width: 90vw; text-align: center;
  }

  /* ====================================================== *
   *  WIZARD / SETTINGS (no mobile styling existed before)  *
   * ====================================================== */
  /* Full-bleed on mobile: the card fills the screen instead of floating in a
     small window with wide margins. */
  .wizard-overlay { padding: 0; align-items: stretch; overflow-y: auto; }
  .wizard-box {
    padding: 28px 22px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    box-shadow: none;
  }
  /* Push the nav (Back / Next) to the bottom so the card fills top-to-bottom. */
  .wizard-box .wizard-steps { flex: 1 1 auto; }
  .wizard-logo img { max-width: 120px; }
  .wizard-title {
    font-size: 22px; line-height: 1.25;
    /* Long brand name wraps between words, never mid-word. */
    overflow-wrap: break-word;
  }
  .wizard-sub { margin-bottom: 22px; font-size: 13px; }
  .wizard-couple-row { gap: 10px; }
  .wizard-nav { margin-top: 24px; }
  /* Stack the two side pickers so 20 swatches per side have room to wrap. */
  .colour-pair { flex-direction: column; gap: 22px; }
  /* Close button (Settings mode only — shown/hidden from wizard.js). */
  .wizard-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
  }

  /* ---- Trash bin drop target (dragging a seated guest off a table) ---- */
  /* Only ever created/shown by canvas.js while a seat drag is in progress,
     so it never appears otherwise. */
  .seat-drag-bin {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
    z-index: 1400;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--dark-rose, #6b2d3e);
    color: #fff; border-radius: 50%; font-size: 20px;
    border: 2px solid #fff;
    box-shadow: 0 6px 14px rgba(107,45,62,.35);
    transition: transform .12s ease, background .12s ease;
  }
  .seat-drag-bin--hover {
    background: #a3283f;
    transform: scale(1.15);
  }

  /* ---- Settings: full-screen panel on mobile ---- */
  .settings-overlay { padding: 0; align-items: stretch; }
  .settings-box {
    max-width: none; width: 100%;
    max-height: none; min-height: 100dvh; border-radius: 0;
  }
  .settings-head {
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 12px;
  }
  .settings-tabs { padding: 0 8px; }
  .settings-tab { padding: 14px 4px; font-size: 13px; }
  .settings-body { padding: 20px 18px; }
  /* Colour tab: side pickers stack so all swatches have room to wrap. */
  .settings-pane .colour-pair { flex-direction: column; gap: 22px; }
  .settings-foot {
    padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 14px);
  }
  .settings-foot .btn-primary { flex: 1; }
}