:root {
    --sand: #f3f6f9;
    --warm-white: #ffffff;
    --clay: #f59b45;
    --clay-light: #ffd9b5;
    --clay-dark: #cf7221;
    /* Text-safe clay: --clay-dark is only 3.3:1 on the cream panels, which fails
       WCAG AA for small text. This passes at 4.9:1. */
    --clay-deep: #a85a10;
    --forest: #2fa090;
    --forest-light: #248172;
    --ink: #1e2d3d;
    --ink-soft: #607286;
    --mist: #e7eef5;
    --mist-dark: #d5e0ea;
    --done: #2ca579;
    --warn: #e06959;
  }

  /* Force full-bleed app layout inside WordPress/theme wrappers */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* `overflow-x: hidden` here makes html/body scroll containers, which silently
       breaks `position: sticky` for everything inside — the header was never
       actually sticking. `clip` suppresses sideways overflow WITHOUT creating a
       scroll container; older browsers fall back to the line above. */
    overflow-x: hidden;
    overflow-x: clip;
  }
  html {
    margin-top: 0 !important;
  }
  body.wp-admin-bar {
    margin-top: 0 !important;
  }
  .site,
  .site-content,
  .content-area,
  .site-main,
  .entry,
  .entry-content,
  .post,
  .page,
  .wp-site-blocks,
  .wp-block-post-content,
  .wp-block-group,
  .wp-block-group__inner-container,
  .container,
  .container-fluid,
  .row,
  .col,
  main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .et_pb_section.et_pb_section_0.et_section_regular {
    padding: 0px !important;
  }
  .et_pb_row.et_pb_row_0 {
    width: 100% !important;
    max-width: 100% !important;
  }
  #sidemenubtndropdowndiv {
    display: none !important;
  }
  #mainnavsidebar {
    display: none !important;
  }
  #BackToTopBtn {
    bottom: 70px !important;
  }
  #roomContent {
    margin-bottom: 100px !important;
  }
  @media (max-width: 980px) {
    .et_pb_column .et_pb_row_inner,
    .et_pb_row {
      padding: 0px !important;
    }
  }
  #page-container {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  @media screen and (max-width: 768px) {
    #page-container {
      padding-top: 0px !important;
      margin-top: 0px !important;
    }
  }
  @media all and (max-width: 980px) {
    #main-content .container,
    body:not(.et-tb) #main-content .container,
    body:not(.et-tb-has-header) #main-content .container,
    .et_fixed_nav.et_show_nav #page-container,
    .et_fixed_nav.et_show_nav.et_secondary_nav_enabled #page-container,
    .et_header_style_centered #page-container {
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'DM Sans', sans-serif; background: radial-gradient(circle at 15% -10%, #ffffff 0%, #f3f6f9 45%, #eef3f7 100%); color: var(--ink); min-height: 100vh; padding-bottom: 90px; }

  /* Safe area support for notched devices (iPhone X+, etc) */
  body { padding-bottom: max(90px, calc(env(safe-area-inset-bottom) + 75px)); }

  @supports (padding: max(0px)) {
    header { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
    .submit-bar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); padding-bottom: max(11px, calc(env(safe-area-inset-bottom) + 8px)); }
  }

  /* ── HEADER ── */
  header {
    background: var(--warm-white);
    border-bottom: 1px solid var(--mist-dark);
    /* No vertical padding — the header hugs its contents. Horizontal spacing comes
       from the safe-area rule above: max(14px, env(safe-area-inset-*)). */
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 10px;
  }
  .logo-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .logo-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(140deg, #39b8a7, #2f9f8f);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 17px;
    box-shadow: 0 4px 10px rgba(50, 161, 145, 0.25);
    min-width: 44px;
    min-height: 44px;
  }
  .logo { font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--ink); letter-spacing: -0.3px; line-height: 1; }
  .logo span { color: var(--forest); font-style: italic; }
  .logo-sub { font-size: 11px; color: #8a99aa; line-height: 1.2; margin-top: 2px; display: none; }
  .property-selector-wrap { flex: 1; min-width: 0; }
  .property-select {
    width: 100%;
    appearance: none; -webkit-appearance: none;
    background: #f6fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238ba0b6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;
    border: 1.5px solid var(--mist-dark); border-radius: 9px;
    color: var(--ink); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
    padding: 8px 28px 8px 10px; cursor: pointer; outline: none;
    min-height: 44px;
  }
  .property-select:focus { border-color: var(--forest); }
  .property-select option { background: #ffffff; color: var(--ink); }

  /* Progress */
  .progress-bar-wrap { background: var(--warm-white); padding: 7px 14px 11px; border-bottom: 1px solid var(--mist-dark); }
  .progress-label { font-size: 11px; color: #8a99aa; display: flex; justify-content: space-between; margin-bottom: 5px; }
  .progress-track { height: 5px; background: #e6edf3; border-radius: 4px; overflow: hidden; }
  .progress-fill { height: 100%; background: linear-gradient(90deg, #39b8a7, #f6ac61); border-radius: 4px; transition: width 0.4s ease; }
  .checkout-link-row {
    background: #fff;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #5a6f84;
  }
  .checkout-link-row[data-state="loading"] { color: #6f7f8f; }
  .checkout-link-row[data-state="linked"] { color: #2f5e87; }
  .checkout-link-row[data-state="unmatched"] { color: #7d8fa2; }
  #checkoutLinkText {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
  }
  .checkout-link-debug {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 500;
    color: #8ca0b3;
    word-break: break-word;
  }

  .save-failure-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0b8b2;
    background: #fff1ef;
    color: #8b2020;
    font-size: 12px;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 115;
  }
  .save-failure-banner-text {
    min-width: 0;
  }
  .save-failure-banner-btn {
    border: 1.5px solid #e5a7a1;
    background: #ffffff;
    color: #8b2020;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    min-height: 34px;
    white-space: nowrap;
  }
  .save-failure-banner-btn:hover {
    background: #fff7f6;
  }

  body.wp-admin-bar #wpadminbar {
    display: none !important;
  }

  .reference-images-section {
    position: relative;
  }

  .reference-advance-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding: 10px 16px 16px;
    background: rgba(255, 255, 255, 0.94);
    color: #3d4651;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    z-index: 1205;
    transition: opacity 0.28s ease;
  }

  .reference-advance-overlay.visible {
    opacity: 1;
    transition-duration: 0.07s;
  }

  @media (max-width: 767px) {
    .reference-advance-overlay {
      font-size: 13px;
      padding: 8px 12px 12px;
    }
  }

  /* Cleaning history */
  .history-wrap { padding: 12px 14px; }
  .inspection-invite-wrap {
    padding: 6px 14px 112px;
    display: flex;
    justify-content: center;
  }
  .btn-invite-access {
    width: 100%;
    border: 1.5px solid #d8e4ef;
    background: #f4f8fc;
    color: #47617b;
    border-radius: 10px;
    padding: 10px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    min-height: 44px;
  }
  .btn-invite-access:hover {
    background: #eaf2fa;
    border-color: #c8d9ea;
  }
  body.admin-only-mode .inspection-invite-wrap {
    display: none;
  }
  .history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .history-title { font-size: 11px; color: #7f90a2; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }
  .history-last-btn { border: 1.5px solid var(--mist-dark); background: white; color: var(--ink-soft); border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 600; cursor: pointer; min-height: 40px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .history-last-btn:hover { border-color: #c2d1df; color: #4f647a; }
  .history-list { display: flex; flex-direction: column; gap: 6px; }
  .history-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--warm-white); border: 1.5px solid var(--mist-dark); border-radius: 9px; padding: 7px 8px; }
  .history-item.active-cleaning {
    border-color: #3aa978;
    background: #eef9f3;
    box-shadow: 0 0 0 2px rgba(58, 169, 120, 0.12);
  }
  .history-meta { min-width: 0; }
  .history-time { font-size: 12px; font-weight: 600; color: var(--ink); }
  .history-stats { font-size: 11px; color: #7f90a2; }
  .history-attention-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
  }
  .history-attention-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid #d7e4f0;
    background: #f5f9fd;
    color: #5c728a;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
  }
  .mono-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    flex: 0 0 auto;
  }
  .mono-icon-badge svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .history-attention-glyph {
    width: 12px;
    height: 12px;
    color: #5c728a;
  }
  .history-status-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 1px 7px;
    margin-right: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
  }
  .history-status-chip.submitted {
    background: #ecf7f0;
    color: #2c7d56;
    border-color: #c8e6d5;
  }
  .history-status-chip.in_progress {
    background: #fff4e7;
    color: #9b642d;
    border-color: #f0d6b7;
  }
  .history-status-chip.active {
    background: #e8f8ef;
    color: #1f7a4f;
    border-color: #b9e6cd;
  }
  .history-rating-row { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
  .history-rating-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid #f2d9b5;
    background: #fff6ea;
    color: #8a5a20;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
  }
  .history-note-btn {
    border: 1px solid #d8e5f1;
    background: #f4f8fc;
    color: #57708a;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    cursor: pointer;
  }
  .history-note-btn:hover { background: #eaf2fa; }
  .history-actions { display: inline-flex; align-items: center; gap: 6px; }
  .history-load-btn { border: 1.5px solid var(--clay-light); background: #fff4e8; color: var(--clay-dark); border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 36px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .history-load-btn:hover { background: #ffe8cf; }
  .history-delete-btn { border: 1.5px solid #f2c2bc; background: #fff3f1; color: #bf5f54; border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; min-height: 36px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .history-delete-btn:hover { background: #fde5e1; }
  .history-empty { font-size: 12px; color: #9babbc; padding: 12px 14px; }
  .mode-toggle.manager-gate { display: none; }
  .mode-toggle.manager-gate.visible { display: flex; }

  /* Mode toggle */
  .mode-toggle { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #f7fbff; border-bottom: 1px solid var(--mist-dark); font-size: 12px; color: var(--ink-soft); }
  .toggle-switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; }
  .toggle-slider { position: absolute; inset: 0; background: var(--mist-dark); border-radius: 11px; cursor: pointer; transition: background 0.2s; }
  .toggle-slider::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; background: white; border-radius: 50%; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
  .toggle-switch input:checked + .toggle-slider { background: var(--clay); }
  .toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

  /* Admin panel */
  .admin-panel { display: none; background: #fffaf4; border-bottom: 2px solid var(--clay-light); }
  .admin-panel.visible { display: block; }
  .admin-loading-banner {
    display: none;
    margin: 10px 14px 0;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1.5px solid #d5e0ea;
    background: #f5f9fd;
    color: #4f647a;
    font-size: 12px;
    font-weight: 600;
  }
  .admin-section { padding: 13px 14px; border-bottom: 1px solid var(--mist-dark); }
  .admin-section:last-child { border-bottom: none; }
  .admin-section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--clay-deep); margin-bottom: 10px; }
  .admin-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  .title-add-btn { width: 44px; height: 44px; border: 1.5px solid var(--clay-light); background: #fff4e8; color: var(--clay-dark); border-radius: 50%; font-size: 17px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  .title-add-btn:hover { background: #ffe8cf; }
  .ics-section-title-row:hover { opacity: 0.85; }
  .ics-section-chevron { display: inline-block; width: 8px; height: 8px; border-right: 2.5px solid var(--clay-dark); border-bottom: 2.5px solid var(--clay-dark); transform: rotate(45deg); transition: transform 0.22s ease; flex-shrink: 0; margin-right: 4px; }
  .ics-section-chevron.is-collapsed { transform: rotate(-45deg); }

  .property-tabs-wrap { overflow-x: visible; margin-bottom: 10px; background: #f6ecdf; border-bottom: 1.5px solid #e7d5bf; }
  .property-tabs-wrap::-webkit-scrollbar { display: none; }
  .property-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; padding: 7px 8px 0; }
  .property-tab { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #e7d5bf; border-bottom-color: transparent; background: #fff7ed; border-radius: 12px 12px 0 0; padding: 7px 8px 7px 10px; min-width: 220px; margin-bottom: -1.5px; }
  .property-tab.active-prop { border-color: var(--clay-light); border-bottom-color: #fffaf4; background: #fffaf4; }
  .property-tab.drag-hover { border-color: #4ab4e0 !important; background: #d4f0fa !important; box-shadow: 0 0 0 2px rgba(74,180,224,0.4), 0 3px 10px rgba(74,180,224,0.3); transition: border-color 0.12s, background 0.12s, box-shadow 0.12s; }
  .property-tab-main { flex: 1; min-width: 0; background: none; border: none; text-align: left; cursor: pointer; color: var(--ink); }
  .property-tab-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .property-tab-address { font-size: 12px; color: #6b6b6b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .property-tab-actions { display: inline-flex; align-items: center; gap: 2px; }
  .section-tags-wrap { overflow-x: auto; margin-bottom: 10px; background: #f6ecdf; border-bottom: 1.5px solid #e7d5bf; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .section-tags-wrap::-webkit-scrollbar { display: none; }
  .section-tags { display: flex; align-items: flex-end; gap: 8px; min-width: max-content; padding: 7px 8px 0; }
  .section-tag { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid #e7d5bf; border-bottom-color: transparent; background: #fff7ed; border-radius: 11px 11px 0 0; padding: 5px 8px 5px 10px; margin-bottom: -1.5px; }
  .section-tag.active-tag { border-color: #8ed8ce; border-bottom-color: #fffaf4; background: #fffaf4; color: #1f7f73; }
  .section-tag.drag-hover { border-color: #4ab4e0 !important; background: #d4f0fa !important; color: #0a6b8c !important; box-shadow: 0 0 0 2px rgba(74,180,224,0.4), 0 3px 10px rgba(74,180,224,0.3); transform: translateY(-2px); transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.12s; }
  .section-tag-main { background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: inherit; white-space: nowrap; }
  .section-tag-actions { display: inline-flex; align-items: center; gap: 2px; }
  .section-tag-del { background: none; border: none; cursor: pointer; font-size: 11px; color: #bbb; padding: 0 2px; }
  .section-tag-del:hover { color: var(--warn); }
  .section-tag-del[disabled] { opacity: 0.35; cursor: not-allowed; }
  .prop-btn { background: none; border: none; cursor: pointer; font-size: 14px; padding: 3px 5px; border-radius: 5px; transition: background 0.15s; }
  .prop-btn:hover { background: var(--mist); }

  .admin-fields { display: flex; flex-direction: column; gap: 8px; }
  .admin-field { display: flex; flex-direction: column; gap: 3px; }
  .admin-field label { font-size: 11px; color: #999; font-weight: 500; }
  .admin-input { padding: 12px 11px; border: 1.5px solid var(--mist-dark); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 16px; background: white; color: var(--ink); outline: none; width: 100%; min-height: 44px; }
  .admin-input:focus { border-color: var(--clay-light); }
  .admin-row { display: flex; gap: 7px; }
  .btn-admin { padding: 11px 16px; background: var(--clay); color: white; border: none; border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .btn-admin:hover { background: var(--clay-dark); }
  .btn-admin.alt { background: #e8eef5; color: var(--ink-soft); }
  .btn-admin.alt:hover { background: #dae5f0; }
  .btn-admin.full { width: 100%; padding: 11px; border-radius: 10px; margin-top: 2px; }
  .admin-subsection {
    margin-top: 10px;
    padding: 10px;
    border: 1.5px solid #ead9c4;
    border-radius: 10px;
    background: #fff8f0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .admin-subsection-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #8a5a2b;
  }
  #accessStatusMessage {
    margin-top: 10px;
    font-size: 12px;
    min-height: 16px;
    color: #5a6f84;
  }
  #accessStatusMessage.error {
    color: #b33a2f;
  }
  #accessStatusMessage.success {
    color: #1f7f73;
  }

  body.admin-only-mode .section-tabs-wrap,
  body.admin-only-mode .tabs-wrap,
  body.admin-only-mode #roomContent,
  body.admin-only-mode .submit-bar,
  body.admin-only-mode .picker-row {
    display: none;
  }
  body.admin-only-mode { padding-bottom: 20px; }

  .admin-item-list { display: flex; flex-direction: column; gap: 7px; max-height: 260px; overflow-y: auto; }
  .admin-item-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1.5px solid var(--mist-dark); border-radius: 9px; padding: 7px 9px; }
  .admin-item-meta { min-width: 0; flex: 1; }
  .admin-item-title { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-item-sub { font-size: 11px; color: #8a99aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .admin-item-flags { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
  .admin-flag {
    font-size: 10px;
    font-weight: 600;
    color: #6f8297;
    background: #eef3f8;
    border: 1px solid #dde7f0;
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
  }
  .admin-flag.on {
    color: #1f7f73;
    background: #e8f6f3;
    border-color: #bde6de;
  }
  .admin-item-actions { display: inline-flex; align-items: center; gap: 3px; }
  .admin-item-edit { background: none; border: none; cursor: pointer; font-size: 13px; color: #8a99aa; padding: 2px 4px; border-radius: 5px; }
  .admin-item-edit:hover { color: #50657d; background: #f2f6fb; }
  .admin-item-del { background: none; border: none; cursor: pointer; font-size: 14px; color: #bbb; padding: 2px 4px; border-radius: 5px; }
  .admin-item-del:hover { color: var(--warn); background: #f8f1ea; }

  .room-tags-wrap { overflow-x: visible; margin-bottom: 10px; background: #f6ecdf; border-bottom: 1.5px solid #e7d5bf; }
  .room-tags { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; padding: 7px 8px 0; }
  .room-tag { display: inline-flex; align-items: center; gap: 4px; border: 1.5px solid #e7d5bf; border-bottom-color: transparent; background: #fff7ed; border-radius: 11px 11px 0 0; padding: 5px 8px 5px 10px; margin-bottom: -1.5px; }
  .room-tag.active-tag { border-color: #8ed8ce; border-bottom-color: #fffaf4; background: #fffaf4; color: #1f7f73; }
  .room-tag.drag-hover { border-color: #4ab4e0 !important; background: #d4f0fa !important; color: #0a6b8c !important; box-shadow: 0 0 0 2px rgba(74,180,224,0.4), 0 3px 10px rgba(74,180,224,0.3); transform: translateY(-2px); transition: border-color 0.12s, background 0.12s, box-shadow 0.12s, transform 0.12s; }
  .room-tag-main { background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: inherit; white-space: nowrap; }
  .room-tag-actions { display: inline-flex; align-items: center; gap: 2px; }
  .chip-meta { color: #8a99aa; font-size: 11px; }
  .chip-del { background: none; border: none; cursor: pointer; font-size: 11px; color: #ccc; padding: 0; margin-left: 1px; }
  .chip-del:hover { color: var(--warn); }
  .chip-del[disabled] { opacity: 0.35; cursor: not-allowed; }

  .section-tabs-wrap {
    overflow-x: auto;
    background: #eef4fa;
    border-bottom: 1.5px solid var(--mist-dark);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .section-tabs-wrap::-webkit-scrollbar { display: none; }
  .section-tabs { display: flex; align-items: flex-end; min-width: max-content; padding: 8px 10px 0; gap: 7px; }
  .section-tab {
    border: 1.5px solid var(--mist-dark);
    border-bottom-color: transparent;
    background: #f8fbff;
    border-radius: 11px 11px 0 0;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--ink-soft);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    margin-bottom: -1.5px;
  }
  .section-tab.active {
    border-color: #8ed8ce;
    border-bottom-color: var(--warm-white);
    background: var(--warm-white);
    color: #1f7f73;
  }
  .section-tab.complete { border-color: #9ddfc2; color: var(--done); }
  .section-tab.complete .tab-badge { background: #2eaa7e; color: white; }
  .section-tab.partial .tab-badge { background: #e87c2a; color: white; }
  .section-tab.none    .tab-badge { background: #d94f4f; color: white; }
  .section-tab.drag-hover { border-color: #4ab4e0 !important; background: #d4f0fa !important; color: #0a6b8c !important; box-shadow: 0 0 0 2px rgba(74,180,224,0.4); transition: border-color 0.12s, background 0.12s, box-shadow 0.12s; }

  /* Tabs */
  .tabs-wrap { overflow-x: visible; background: #f2f7fc; border-bottom: 1.5px solid var(--mist-dark); }
  .tabs-wrap::-webkit-scrollbar { display: none; }
  .tabs { display: flex; flex-wrap: wrap; align-items: flex-end; min-width: 0; padding: 6px 10px 6px; gap: 6px; }
  .tab { padding: 11px 14px; font-size: 13px; font-weight: 500; color: var(--ink-soft); border: 1.5px solid var(--mist-dark); border-radius: 12px; background: #f8fbff; cursor: pointer; transition: all 0.2s; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 0; min-height: 44px; }
  .tab-name { display: inline-block; }
  .tab-attention-icons { display: inline-flex; align-items: center; gap: 2px; }
  .tab-attention-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid #d2deea;
    background: #f6fafe;
    color: #60788f;
  }
  .tab-attention-glyph {
    width: 11px;
    height: 11px;
    color: #60788f;
  }
  .tab-badge { font-size: 10px; background: var(--mist); color: var(--ink-soft); border-radius: 10px; padding: 1px 6px; font-weight: 600; }
  .tab.active { color: var(--clay-dark); border-color: var(--clay-light); background: var(--warm-white); }
  .tab.drag-hover { border-color: #4ab4e0 !important; background: #d4f0fa !important; color: #0a6b8c !important; box-shadow: 0 0 0 2px rgba(74,180,224,0.4); transition: border-color 0.12s, background 0.12s, box-shadow 0.12s; }
  .tab.active .tab-badge { background: var(--clay); color: white; }
  .tab.complete { color: var(--done); }
  .tab.complete .tab-badge { background: #2eaa7e; color: white; }
  .tab.partial  .tab-badge { background: #e87c2a; color: white; }
  .tab.none     .tab-badge { background: #d94f4f; color: white; }
  .tabs-empty { font-size: 12px; color: #9babbc; padding: 12px 14px; }

  .picker-row {
    display: flex;
    align-items: flex-start;
    border-bottom: 1.5px solid var(--mist-dark);
    background: #f5f9fd;
    position: relative;
    overflow: visible;
  }
  .picker-settings-btn {
    border: none;
    border-left: 1.5px solid var(--mist-dark);
    background: #f5f9fd;
    color: #5e7389;
    width: 52px;
    min-width: 52px;
    min-height: 44px;
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
  }
  .picker-settings-btn:hover { background: #eaf2f9; color: #3f566f; }
  .picker-block {
    flex: 1;
    min-width: 0;
    background: #f5f9fd;
    position: static;
    display: flex;
    flex-direction: column;
  }
  .picker-block + .picker-block {
    border-left: 1.5px solid var(--mist-dark);
  }
  .picker-toggle {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--ink);
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    min-height: 44px;
    transition: box-shadow 0.18s ease, background-color 0.18s ease;
  }
  .picker-toggle.expanded {
    background: #edf5fc;
    box-shadow: inset 0 0 0 2px #74a6d2;
  }
  .picker-block.drag-hover .picker-toggle {
    background: #edf5fc;
    box-shadow: inset 0 0 0 2px #74a6d2;
  }
  .picker-toggle-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
    flex: 1;
    min-width: 0;
  }
  .picker-label {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .picker-badge.complete { background: #2eaa7e; color: white; }
  .picker-badge.partial  { background: #e87c2a; color: white; }
  .picker-badge.none     { background: #d94f4f; color: white; }
  .picker-caret {
    width: 10px;
    height: 10px;
    border-right: 2px solid #7d8da0;
    border-bottom: 2px solid #7d8da0;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  .picker-toggle.expanded .picker-caret {
    transform: rotate(-135deg);
    margin-top: 2px;
  }
  .picker-panel {
    position: static;
    z-index: auto;
    box-shadow: 0 10px 24px rgba(18, 57, 93, 0.12);
  }
  .picker-block:first-child .picker-panel {
    width: 200%;
  }
  .picker-block + .picker-block .picker-panel {
    width: 200%;
    margin-left: -100%;
  }
  .picker-panel.collapsed { display: none; }

  /* UI Tabs (Inspection vs History) */
  .ui-tabs-wrap { display: flex; gap: 2px; background: #f2f7fc; border-bottom: 1.5px solid var(--mist-dark); padding: 8px 10px; }
  .ui-tab-btn { border: 1.5px solid transparent; background: transparent; color: var(--ink-soft); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; min-height: 44px; min-width: 44px; }
  .ui-tab-btn:hover { background: #e6eef5; }
  .ui-tab-btn.active { border-color: var(--mist-dark); background: var(--warm-white); color: var(--ink); }
  .ui-calendar-btn {
    margin-left: auto;
    border: 1.5px solid var(--mist-dark);
    background: #f8fbff;
    color: #5f748b;
    border-radius: 10px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }
  .ui-calendar-btn:hover {
    background: #eaf2fa;
    color: #415b75;
  }
  .ui-calendar-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ui-settings-btn {
    border: 1.5px solid var(--mist-dark);
    background: #f8fbff;
    color: #5f748b;
    border-radius: 10px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
  }
  .ui-settings-btn:hover { background: #eaf2fa; color: #415b75; }
  .ui-tab-content { display: none; }
  .ui-tab-content.active { display: block; }

  /* Room */
  .room-header { padding: 14px 14px 10px; background: var(--warm-white); border-bottom: 1px solid var(--mist); }
  .room-name { font-family: 'DM Sans', sans-serif; font-size: 22px; color: var(--ink); margin-bottom: 2px; }
  .room-subtitle { font-size: 12px; color: #999; }
  .room-filter-wrap { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .room-filter-btn {
    border: 1.5px solid var(--mist-dark);
    background: #f8fbff;
    color: var(--ink-soft);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 40px;
  }
  .room-filter-btn.active {
    border-color: var(--clay-light);
    background: #fff4e8;
    color: var(--clay-dark);
  }
  .room-filter-count {
    background: #eaf0f6;
    color: #6f8297;
    border-radius: 999px;
    padding: 0 6px;
    font-size: 10px;
    line-height: 1.6;
  }

  /* Cards */
  .items-list { padding: 10px 0; display: flex; flex-direction: column; gap: 10px; }
  .check-card { background: var(--warm-white); border: 1.5px solid var(--mist-dark); border-radius: 14px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; box-shadow: 0 6px 20px rgba(26, 68, 109, 0.05); }
  .check-card.captured { border-color: var(--done); box-shadow: 0 0 0 2px rgba(74,124,89,0.1); }
  .card-top { padding: 12px 13px 8px; display: flex; align-items: flex-start; gap: 10px; }
  .card-icon { width: 36px; height: 36px; border-radius: 9px; background: #ecf8f6; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; margin-top: 1px; }
  .card-info { flex: 1; }
  .card-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; margin-bottom: 2px; }
  .card-note { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
  .card-status { font-size: 11px; font-weight: 500; color: #bbb; flex-shrink: 0; padding-top: 2px; }
  .card-status.done { color: var(--done); }

  .ref-image-wrap { padding: 0 13px 14px; border-bottom: 2px solid var(--mist-dark); }
  .ref-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: #bbb; margin-bottom: 5px; }
  .ref-image {
    width: auto;
    max-width: 150px;
    max-height: 100px;
    object-fit: contain;
    border-radius: 8px;
    display: block;
    border: 1px solid var(--mist-dark);
    background: #f8fbff;
    cursor: pointer;
  }

  .ref-preview-small {
    display: none;
    width: auto;
    max-width: 150px;
    max-height: 100px;
    object-fit: contain;
    border-radius: 8px;
    margin-top: 4px;
    border: 1px solid var(--mist-dark);
    background: #f8fbff;
  }

  .captured-photos { padding: 12px 13px 8px; }
  .photos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .photo-thumb-wrap { position: relative; min-width: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 7px; }
  .photo-thumb-wrap.pending-upload {
    border-radius: 7px;
    overflow: hidden;
    background: #eef4fb;
    border: 1px dashed #bfd0e2;
  }
  .photo-thumb-wrap.reorder-drop-target {
    outline: 2px dashed #4fa7c5;
    outline-offset: 2px;
    border-radius: 9px;
  }
  .ref-gallery-item.reorder-drop-target,
  .section-tab.reorder-drop-target,
  .tab.reorder-drop-target {
    outline: 2px dashed #4fa7c5;
    outline-offset: 2px;
  }
  .photo-thumb { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; display: block; cursor: pointer; transition: filter 0.16s ease, transform 0.16s ease; }
  .photo-thumb.pending {
    filter: saturate(0.85) brightness(0.9);
  }
  .photo-thumb-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #edf4fb, #dce8f4);
    border-radius: 7px;
  }
  .photo-pending-overlay {
    position: absolute;
    inset: 0;
    background: rgba(19, 40, 62, 0.58);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    z-index: 6;
    color: #fff;
  }
  .photo-association-saving-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    z-index: 7;
    color: #1f3c56;
    backdrop-filter: blur(1px);
  }
  .photo-association-saving-text {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 0 6px;
    color: #1f3c56;
  }
  .photo-pending-text {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 0 6px;
  }
  .media-save-badge {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef4fb;
    border: 1px solid #bfd0e2;
    color: #2b4a67;
    font-size: 11px;
    font-weight: 600;
  }
  .photo-thumb-wrap video.photo-thumb { background: #0f1720; }
  .photo-video-play-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .photo-video-play-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    position: relative;
  }
  .photo-video-play-icon::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 13px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 14px solid #1d2a35;
  }
  .photo-thumb-wrap:not(.completed):not(.pending-upload) .photo-thumb:not(.pending) {
    border: 2px solid #df9db9;
  }
  .photo-thumb-wrap.completed .photo-thumb,
  .photo-thumb.completed { border: 2px solid #9ddfc2; box-shadow: 0 0 0 1px rgba(46,170,126,0.18) inset; }
  .photo-completed-pill {
    position: absolute;
    left: 6px;
    bottom: 6px;
    background: rgba(44, 165, 121, 0.92);
    color: white;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
    z-index: 3;
    pointer-events: none;
  }
  .photo-thumb:active { cursor: pointer; }
  .photo-unassign { position: absolute; top: 3px; left: 3px; width: 36px; height: 36px; background: rgba(0,0,0,0.68); border: none; border-radius: 50%; color: white; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; line-height: 1; z-index: 4; transition: transform 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease; }
  .photo-move { position: absolute; right: 3px; width: 28px; height: 28px; background: rgba(0,0,0,0.55); border: none; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: transform 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease; }
  .photo-move-up { top: 3px; }
  .photo-move-down { top: 34px; }
  .photo-move[disabled] { opacity: 0.4; cursor: not-allowed; }
  .photo-remove { position: absolute; top: 3px; right: 3px; width: 36px; height: 36px; background: rgba(0,0,0,0.65); border: none; border-radius: 50%; color: white; font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; transition: transform 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease; }
  .photo-remove-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
  .photo-reference-overlay { position: absolute; bottom: 3px; right: 3px; width: 84px; height: 84px; border: 1.5px solid white; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.25); background: #f0f0f0; cursor: pointer; z-index: 2; transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease; }
  .photo-reference-overlay img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.14s ease; }
  @media (hover: hover) {
    .photo-thumb:hover { filter: brightness(1.12) saturate(0.82); }
    .photo-unassign:hover { background: rgba(52, 78, 108, 0.92); transform: translateY(-1px) scale(1.04); box-shadow: 0 4px 10px rgba(18, 40, 64, 0.34); }
    .photo-remove:hover { background: rgba(180, 54, 54, 0.92); transform: translateY(-1px) scale(1.04); box-shadow: 0 4px 10px rgba(121, 28, 28, 0.35); }
    .photo-move:hover { background: rgba(62, 91, 123, 0.92); transform: translateY(-1px) scale(1.04); box-shadow: 0 4px 10px rgba(29, 49, 79, 0.32); }
    .photo-reference-overlay:hover { border-color: #9ddfc2; transform: translateY(-1px); box-shadow: 0 6px 12px rgba(23, 84, 65, 0.28); }
    .photo-reference-overlay:hover img { filter: brightness(1.1) saturate(1.08); }
  }
  .image-tile-button {
    width: 100%;
    aspect-ratio: 1;
    padding: 10px;
    border-radius: 10px;
    justify-content: center;
    min-height: 0;
  }
  .image-tile-button .btn-photo-label {
    text-align: center;
    line-height: 1.35;
  }
  .image-tile-split {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .image-tile-split .image-tile-split-btn {
    flex: 1;
    min-height: 0;
    padding: 8px;
    border-radius: 10px;
    gap: 6px;
  }
  .image-tile-split .btn-photo-label {
    text-align: center;
    line-height: 1.25;
    font-size: 12px;
    font-weight: 600;
  }

  .card-actions { padding: 7px 13px 11px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--mist); align-items: stretch; }
  .btn { flex: 1; padding: 12px 10px; border-radius: 9px; font-size: 13px; font-weight: 500; font-family: 'DM Sans', sans-serif; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; transition: all 0.15s; min-height: 44px; }
  .btn.btn-photo,
  button.btn-photo,
  .image-tile-button.btn-photo {
    background: #fbfdff;
    color: #697a8e;
    border: 2px dashed #b9c8d8 !important;
    border-radius: 13px;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .btn-photo:hover {
    background: #ffffff;
    border-color: #b7c7d8;
    color: #50657d;
  }
  .btn-photo-svg { width: 22px; height: 22px; stroke: currentColor; }
  .btn-photo-label { font-size: 13px; font-weight: 500; letter-spacing: 0.1px; display: block; }
  .btn-icon { background: var(--sand); color: var(--ink-soft); border: 1.5px solid var(--mist-dark); flex: 0 0 auto; padding: 9px 12px; min-width: 42px; }
  .btn-icon:hover { background: var(--mist); }
  .btn-icon.active { color: var(--clay-dark); border-color: var(--clay-light); background: #fef4ec; }
  .btn-icon.danger { color: var(--warn); }

  .comment-area { padding: 0 13px 11px; display: none; }
  .comment-area.open { display: block; }
  .comment-input { width: 100%; padding: 12px 11px; border: 1.5px solid var(--mist-dark); border-radius: 9px; font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--ink); background: var(--sand); resize: none; min-height: 80px; outline: none; transition: border-color 0.2s; }
  .comment-input:focus { border-color: var(--clay-light); background: var(--warm-white); }
  .file-input { display: none; }

  /* Drag-and-drop highlight */
  .btn-photo.drag-over {
    border-color: var(--forest);
    background: #f0faf8;
    color: var(--forest);
    transform: scale(1.01);
  }
  .btn-photo.drag-over .btn-photo-svg { stroke: var(--forest); }

  /* Camera mode toggle bar - shown only on mobile via media query */
  .camera-toggle-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #f7fbff;
    border-bottom: 1px solid var(--mist-dark);
    font-size: 11px;
    color: var(--ink-soft);
  }

  .settings-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 33, 50, 0.5);
    z-index: 330;
    align-items: center;
    justify-content: center;
    padding: 14px;
  }
  .settings-modal.open { display: flex; }
  .settings-card {
    width: min(520px, 100%);
    background: var(--warm-white);
    border-radius: 16px;
    border: 1.5px solid var(--mist-dark);
    box-shadow: 0 20px 40px rgba(17, 49, 76, 0.2);
    overflow: hidden;
  }
  .settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mist-dark);
    background: #f5f9fd;
  }
  .settings-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
  }
  .settings-close {
    border: 1.5px solid var(--mist-dark);
    background: #fff;
    color: #556a81;
    border-radius: 10px;
    min-width: 40px;
    min-height: 40px;
    font-size: 16px;
    cursor: pointer;
  }
  .settings-close:hover { background: #eef4fb; }
  .settings-body {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
  }
  .settings-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 12px;
    color: var(--ink-soft);
  }
  .settings-toggle-row + .settings-toggle-row {
    border-top: 1px solid #edf3f8;
  }
  .settings-toggle-row.manager-gate { display: none; }

  .checkout-change-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 33, 50, 0.55);
    z-index: 360;
    align-items: center;
    justify-content: center;
    padding: 14px;
  }
  .checkout-change-modal.open { display: flex; }
  .invite-access-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 33, 50, 0.55);
    z-index: 365;
    align-items: center;
    justify-content: center;
    padding: 14px;
  }
  .invite-access-modal.open { display: flex; }
  .invite-access-card {
    width: min(640px, 100%);
    max-height: calc(100vh - 28px);
    background: var(--warm-white);
    border-radius: 16px;
    border: 1.5px solid var(--mist-dark);
    box-shadow: 0 20px 42px rgba(17, 49, 76, 0.24);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .invite-access-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mist-dark);
    background: #f5f9fd;
  }
  .invite-access-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
  }
  .invite-access-close {
    border: 1.5px solid var(--mist-dark);
    background: #fff;
    color: #556a81;
    border-radius: 10px;
    min-width: 40px;
    min-height: 40px;
    font-size: 16px;
    cursor: pointer;
  }
  .invite-access-close:hover { background: #eef4fb; }
  .invite-access-body {
    padding: 12px 14px 14px;
    overflow-y: auto;
  }
  .invite-access-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  .invite-access-tab {
    border: 1.5px solid #d6e4f1;
    background: #f7fbff;
    color: #4b627a;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  .invite-access-tab.active {
    background: #e9f4ff;
    border-color: #9ec9ed;
    color: #1f5f8f;
  }
  .invite-access-panel {
    display: none;
  }
  .invite-access-panel.active {
    display: block;
  }
  .invite-access-body .admin-subsection {
    background: #f9fcff;
    border-color: #dbe7f2;
  }
  .invite-property-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .invite-property-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d9e6f2;
    border-radius: 10px;
    background: #fff;
    font-size: 12px;
    color: #2d4158;
  }
  .invite-property-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #2f8fcb;
  }
  .invite-property-empty {
    padding: 10px;
    border: 1px dashed #c5d7e8;
    border-radius: 10px;
    color: #6b7f93;
    font-size: 12px;
  }
  .cleaner-access-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
  }
  .cleaner-access-empty {
    padding: 12px;
    border: 1px dashed #c8d9ea;
    border-radius: 10px;
    color: #60758a;
    font-size: 12px;
    background: #fff;
  }
  .cleaner-access-property {
    border: 1px solid #d8e6f3;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .cleaner-access-property-head {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #2c4965;
    background: #f3f9ff;
    border-bottom: 1px solid #d8e6f3;
  }
  .cleaner-access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-top: 1px solid #edf3f9;
  }
  .cleaner-access-row:first-child {
    border-top: 0;
  }
  .cleaner-access-meta {
    min-width: 0;
    flex: 1;
  }
  .cleaner-access-name {
    font-size: 12px;
    font-weight: 600;
    color: #1f3146;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cleaner-access-email {
    font-size: 11px;
    color: #60748a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cleaner-access-delete {
    border: 1px solid #ebc9c9;
    background: #fff5f5;
    color: #b13c3c;
    border-radius: 8px;
    min-width: 34px;
    min-height: 34px;
    font-size: 14px;
    cursor: pointer;
  }
  .cleaner-access-delete:hover {
    background: #ffe8e8;
  }

  @media (max-width: 640px) {
    .invite-access-body .admin-row {
      flex-direction: column;
    }
    .invite-access-body .admin-row .admin-input,
    .invite-access-body .admin-row .btn-admin {
      width: 100%;
      flex: 1 1 auto !important;
    }
    .invite-property-checklist {
      grid-template-columns: 1fr;
    }
    .cleaner-access-row {
      align-items: flex-start;
    }
  }
  .checkout-change-card {
    width: min(560px, 100%);
    background: var(--warm-white);
    border-radius: 16px;
    border: 1.5px solid var(--mist-dark);
    box-shadow: 0 20px 42px rgba(17, 49, 76, 0.24);
    overflow: hidden;
  }
  .checkout-change-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--mist-dark);
    background: #f5f9fd;
  }
  .checkout-change-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
  }
  .checkout-change-body {
    padding: 16px;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.55;
  }
  .checkout-change-body p { margin: 0 0 8px; }
  .checkout-change-body p:last-child { margin-bottom: 0; }
  .checkout-change-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 16px 16px;
    border-top: 1px solid #edf3f8;
  }
  .checkout-change-btn {
    border: 1.5px solid var(--mist-dark);
    background: #fff;
    color: var(--ink-soft);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .checkout-change-btn.primary {
    background: var(--forest);
    border-color: var(--forest);
    color: #fff;
  }
  .checkout-change-btn.ghost {
    background: #f7fbff;
  }
  .checkout-change-btn:hover {
    filter: brightness(0.98);
  }

  .stay-calendar-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 33, 50, 0.55);
    z-index: 355;
    align-items: center;
    justify-content: center;
    padding: 14px;
  }
  .stay-calendar-modal.open { display: flex; }
  .stay-calendar-card {
    width: min(760px, 100%);
    max-height: calc(100vh - 28px);
    overflow: auto;
    background: var(--warm-white);
    border-radius: 16px;
    border: 1.5px solid var(--mist-dark);
    box-shadow: 0 20px 42px rgba(17, 49, 76, 0.24);
  }
  .stay-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--mist-dark);
    background: #f5f9fd;
  }
  .stay-calendar-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
  }
  .stay-calendar-close {
    border: 1.5px solid var(--mist-dark);
    background: #fff;
    color: #556a81;
    border-radius: 10px;
    min-width: 40px;
    min-height: 40px;
    font-size: 16px;
    cursor: pointer;
  }
  .stay-calendar-close:hover { background: #eef4fb; }
  .stay-calendar-controls {
    padding: 12px 14px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .stay-calendar-scope-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .stay-calendar-scope-btn {
    border: 1.5px solid var(--mist-dark);
    background: #f8fbff;
    color: var(--ink-soft);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    min-height: 36px;
  }
  .stay-calendar-scope-btn.active {
    border-color: var(--clay-light);
    background: #fff4e8;
    color: var(--clay-dark);
  }
  .stay-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .stay-calendar-nav-btn {
    border: 1.5px solid var(--mist-dark);
    background: #f8fbff;
    color: #5f748b;
    border-radius: 10px;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .stay-calendar-month {
    min-width: 170px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
  }
  .stay-calendar-grid {
    --stay-grid-gap: 4px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--stay-grid-gap);
  }
  .stay-calendar-weekday {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #8aa0b5;
    padding: 5px 0 4px;
  }
  .stay-calendar-day {
    position: relative;
    min-height: calc(20px + (var(--lane-count, 1) * 5px));
    border: 1px solid #deebf5;
    border-radius: 8px;
    background: #fbfdff;
    color: #5f748b;
    padding: 5px 5px 4px;
    overflow: visible;
  }
  .stay-calendar-day.outside-month {
    background: #f7fafe;
    color: #a4b4c4;
  }
  .stay-calendar-day.today {
    box-shadow: inset 0 0 0 2px #79a6cf;
  }
  .stay-calendar-day.has-stay {
    border-color: #deebf5;
    background: #fbfdff;
    color: #5f748b;
  }
  .stay-calendar-day.has-cleaning {
    border-color: #d18f60;
    background: #f2e1c9;
    outline: 2px solid #d18f60;
    outline-offset: -2px;
  }
  .stay-calendar-day.has-cleaning.current-property {
    background: #f2e1c9;
  }
  .stay-calendar-day.clickable-cleaning {
    cursor: pointer;
  }
  .stay-calendar-day.clickable-cleaning:hover {
    filter: brightness(0.99);
  }
  .stay-calendar-day.current-property {
    border-color: #deebf5;
    background: #fbfdff;
  }
  .stay-calendar-day.multi-property {
    box-shadow: none;
  }
  .stay-calendar-day.today.multi-property {
    box-shadow: inset 0 0 0 2px #79a6cf;
  }
  .stay-calendar-day-number {
    position: absolute;
    right: 6px;
    bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }
  .stay-calendar-bars {
    position: absolute;
    top: 4px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    z-index: 2;
  }
  .stay-calendar-bar {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: var(--stay-color, #4e708f);
    opacity: 0.95;
  }
  .stay-calendar-bar.connect-left::before,
  .stay-calendar-bar.connect-right::after {
    content: '';
    position: absolute;
    top: 0;
    width: calc(var(--stay-grid-gap) + 3px);
    height: 100%;
    background: var(--stay-color, #4e708f);
  }
  .stay-calendar-bar.connect-left::before {
    left: calc(-1 * (var(--stay-grid-gap) + 1px));
  }
  .stay-calendar-bar.connect-right::after {
    right: calc(-1 * (var(--stay-grid-gap) + 1px));
  }
  .stay-calendar-bar.lane-empty {
    background: transparent;
    opacity: 0;
  }
  .stay-calendar-bar.lane-empty::before,
  .stay-calendar-bar.lane-empty::after {
    display: none;
  }
  .stay-calendar-bar.range-start {
    width: 33.333%;
    margin-left: auto;
    box-shadow: inset 1px 0 0 rgba(255,255,255,0.85);
  }
  .stay-calendar-bar.range-end {
    width: 33.333%;
    margin-right: auto;
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.85);
  }
  .stay-calendar-bar.range-start.range-end {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .stay-calendar-bar.back-to-back {
    background: linear-gradient(
      to right,
      var(--stay-color, #4e708f) 0 35%,
      rgba(255, 255, 255, 0.98) 35% 65%,
      var(--stay-color, #4e708f) 65% 100%
    );
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  }
  .stay-calendar-bar-overflow {
    font-size: 9px;
    font-weight: 700;
    color: #4f657d;
    line-height: 1;
  }
  .stay-calendar-legend {
    padding: 10px 14px 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    font-size: 11px;
    color: #71879e;
  }
  .stay-calendar-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d7e5f2;
    border-radius: 999px;
    background: #f8fbff;
    padding: 4px 8px;
  }
  .stay-calendar-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4e708f;
    display: inline-block;
  }
  .stay-calendar-legend-label {
    color: #5e758d;
    font-weight: 600;
  }
  .stay-calendar-legend-empty {
    color: #8aa0b5;
  }
  .stay-calendar-list {
    padding: 0 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .stay-calendar-list-title {
    font-size: 11px;
    font-weight: 700;
    color: #6f859c;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
  }
  .stay-calendar-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #deebf5;
    background: #f8fbff;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 11px;
    color: #556b82;
  }
  .stay-calendar-list-date {
    font-weight: 700;
  }
  .stay-calendar-list-prop {
    color: #6e859d;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
  }
  .stay-calendar-list-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
  }
  .stay-calendar-empty {
    border: 1px dashed #cfddeb;
    border-radius: 8px;
    background: #f8fbff;
    padding: 10px;
    font-size: 11px;
    color: #8398ac;
  }
  .stay-calendar-cleaning-row {
    align-items: flex-start;
    gap: 14px;
  }
  .stay-calendar-cleaning-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .stay-calendar-cleaning-meta {
    font-size: 10px;
    color: #6f859d;
    font-weight: 600;
  }
  .stay-calendar-cleaning-next {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
    min-width: 140px;
  }
  .stay-calendar-cleaning-next-label {
    font-size: 10px;
    color: #7f95ab;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 700;
  }
  .stay-calendar-cleaning-next-date {
    font-size: 11px;
    color: #3f5872;
    font-weight: 700;
  }
  .stay-calendar-day-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 365;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .stay-calendar-day-popup.open {
    display: flex;
  }
  .stay-calendar-day-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 27, 42, 0.48);
  }
  .stay-calendar-day-popup-card {
    position: relative;
    z-index: 1;
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border: 1.5px solid #d6e5f2;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 36px rgba(12, 37, 58, 0.3);
  }
  .stay-calendar-day-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px;
    border-bottom: 1px solid #e2edf7;
    background: #f6faff;
  }
  .stay-calendar-day-popup-title {
    font-size: 14px;
    font-weight: 700;
    color: #2d4560;
  }
  .stay-calendar-day-popup-close {
    border: 1px solid #d4e1ee;
    background: #fff;
    color: #607790;
    border-radius: 9px;
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    font-size: 16px;
    cursor: pointer;
  }
  .stay-calendar-day-popup-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .stay-calendar-day-popup-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #deebf5;
    background: #f8fbff;
    border-radius: 10px;
    padding: 8px 9px;
  }
  .stay-calendar-day-popup-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .stay-calendar-day-popup-sub {
    font-size: 10px;
    font-weight: 600;
    color: #6f859d;
  }
  .stay-calendar-day-popup-next {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
    min-width: 145px;
  }
  .stay-calendar-day-popup-next-label {
    font-size: 10px;
    font-weight: 700;
    color: #7b91a7;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .stay-calendar-day-popup-next-value {
    font-size: 12px;
    font-weight: 700;
    color: #3f5872;
  }
  .settings-toggle-row.manager-gate.visible { display: flex; }
  .settings-sync-row {
    border-top: 1px solid #edf3f8;
    padding: 10px 14px;
  }

  .empty-state { padding: 48px 20px; text-align: center; color: #bbb; }
  .empty-state .ei { font-size: 38px; margin-bottom: 10px; }
  .empty-state p { font-size: 14px; line-height: 1.6; }

  /* Submit bar */
  .submit-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--warm-white); border-top: 1px solid var(--mist-dark); padding: 11px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 -8px 30px rgba(18, 57, 93, 0.06); z-index: 150; min-height: max(56px, calc(env(safe-area-inset-bottom) + 56px)); }
  .submit-count { font-size: 12px; color: #999; flex: 1; line-height: 1.5; }
  .submit-count strong { color: var(--ink); display: block; }
  .submit-prop-tag { font-size: 10px; color: var(--clay-dark); font-weight: 600; }
  .sync-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: #7b8ea2;
    flex-wrap: wrap;
  }
  .sync-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9eb0c3;
    flex: 0 0 auto;
  }
  .sync-status[data-state="saving"] .sync-status-dot { background: #f59b45; }
  .sync-status[data-state="synced"] .sync-status-dot { background: #2ca579; }
  .sync-status[data-state="error"] .sync-status-dot { background: #e06959; }
  .sync-retry-btn {
    border: 1.5px solid #f2c2bc;
    background: #fff3f1;
    color: #bf5f54;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    min-height: 32px;
  }
  .sync-retry-btn:hover { background: #fde5e1; }
  .btn-submit { padding: 14px 20px; background: var(--forest); color: white; border: none; border-radius: 11px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; min-height: 44px; min-width: 100px; display: flex; align-items: center; justify-content: center; }
  .btn-submit:hover { background: var(--forest-light); }
  .btn-submit:disabled { background: var(--mist-dark); color: #aaa; cursor: not-allowed; }

  /* Lightbox */
  .lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 1200; align-items: center; justify-content: center; padding: 20px; }
  .lightbox.open { display: flex; }
  .lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; object-fit: contain; }
  .lightbox video { max-width: 100%; max-height: 90vh; border-radius: 8px; object-fit: contain; background: #000; }
  .lightbox-close {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 10px);
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 1210;
    touch-action: manipulation;
  }
  body.lightbox-open #BackToTopBtn {
    display: none !important;
    pointer-events: none !important;
  }

  /* Success */
  .success-overlay { display: none; position: fixed; inset: 0; background: var(--warm-white); z-index: 300; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
  .success-overlay.open { display: flex; }
  .success-icon { font-size: 58px; margin-bottom: 16px; }
  .success-title { font-family: 'DM Serif Display', serif; font-size: 28px; margin-bottom: 4px; }
  .success-prop { font-size: 13px; color: var(--clay-dark); font-weight: 600; margin-bottom: 10px; }
  .success-sub { font-size: 14px; color: var(--ink-soft); margin-bottom: 26px; max-width: 280px; line-height: 1.6; }
  .btn-new { padding: 13px 28px; background: var(--clay); color: white; border: none; border-radius: 12px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; }

  /* Loading spinner */
  .loading-overlay { display: none; position: fixed; inset: 0; background: rgba(255, 255, 255, 0.95); z-index: 250; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
  .loading-overlay.active { display: flex; }
  .spinner { width: 40px; height: 40px; border: 4px solid var(--mist); border-top-color: var(--clay); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { font-size: 14px; color: var(--ink-soft); font-weight: 500; }

  /* Photo source sheet */
  .photo-source-sheet {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 33, 50, 0.5);
    z-index: 320;
    align-items: flex-end;
    justify-content: center;
    padding: 14px;
  }
  .photo-source-sheet.open { display: flex; }
  .photo-source-card {
    width: min(460px, 100%);
    background: var(--warm-white);
    border-radius: 16px;
    border: 1.5px solid var(--mist-dark);
    box-shadow: 0 20px 40px rgba(17, 49, 76, 0.2);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .photo-source-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
  }
  .photo-source-sub {
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 6px;
  }
  .photo-source-btn {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1.5px solid var(--mist-dark);
    background: #f8fbff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .photo-source-btn:hover { background: #eef4fb; }
  .photo-source-btn.primary {
    border-color: var(--clay-light);
    background: #fff4e8;
    color: var(--clay-dark);
  }
  .photo-source-toggle {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #edf3f8;
  }

  @media (max-width: 767px) {
    /* ── MOBILE-FIRST RESPONSIVE LAYOUT ── */
    body { padding-bottom: max(100px, calc(env(safe-area-inset-bottom) + 85px)); }
    
    /* Header */
    header { padding: 0 12px; gap: 8px; }
    .logo-wrap { gap: 8px; }
    .logo { font-size: 18px; }
    .property-selector-wrap { min-width: 80px; }
    .property-select { font-size: 12px; padding: 8px 24px 8px 8px; }
    
    /* Progress bar */
    .progress-bar-wrap { padding: 6px 12px 10px; }
    .progress-label { font-size: 10px; margin-bottom: 4px; }
    .checkout-link-row { padding: 6px 12px; font-size: 10px; }
    #checkoutLinkText { font-size: 12px; }
    .checkout-link-debug { font-size: 9px; }
    
    /* Cleaning history */
    .history-wrap { padding: 10px 12px; }
    .history-head { margin-bottom: 8px; }
    .history-item { padding: 6px 7px; gap: 6px; }
    .history-time { font-size: 11px; }
    .history-stats { font-size: 10px; }
    .history-empty { font-size: 11px; padding: 10px 12px; }
    
    /* Mode toggle */
    .mode-toggle { padding: 8px 12px; font-size: 11px; }
    
    /* Admin panel */
    .admin-section { padding: 10px 12px; }
    .admin-section-title { font-size: 12px; margin-bottom: 8px; }
    .admin-input { font-size: 16px; padding: 10px 10px; }
    
    /* Property tabs (horizontal scrolling) */
    .property-tabs-wrap { margin-bottom: 8px; }
    .property-tabs { padding: 6px 6px 0; gap: 6px; }
    .property-tab { min-width: 180px; padding: 6px 6px 6px 8px; }
    .property-tab-name { font-size: 13px; }
    .property-tab-address { font-size: 11px; }
    
    /* Section tags */
    .section-tags-wrap { margin-bottom: 8px; }
    .section-tags { padding: 6px 6px 0; gap: 6px; }
    .section-tag { padding: 4px 7px 4px 8px; }
    
    /* Room header */
    .room-header { padding: 12px 12px 8px; }
    .room-name { font-size: 18px; }
    .room-subtitle { font-size: 11px; }
    .room-filter-wrap { gap: 5px; margin-top: 8px; }
    .room-filter-btn { padding: 5px 10px; min-height: 38px; font-size: 10px; }
    
    /* Section tabs */
    .section-tabs-wrap { padding: 6px 0; }
    .section-tabs { padding: 6px 8px 0; gap: 6px; }
    .section-tab { padding: 6px 10px; font-size: 11px; }
    .tab-badge { font-size: 9px; padding: 1px 5px; }
    
    /* UI tabs */
    .ui-tabs-wrap { gap: 0; padding: 6px 8px; }
    .ui-tab-btn { padding: 8px 12px; font-size: 12px; min-height: 40px; }
    .ui-calendar-btn { width: 40px; min-width: 40px; min-height: 40px; }
    .ui-settings-btn { width: 40px; min-width: 40px; min-height: 40px; font-size: 18px; }
    
    /* Room tabs */
    .tabs-wrap { padding: 5px 8px 5px; gap: 5px; }
    .tab { padding: 10px 12px; font-size: 12px; min-height: 40px; }
    
    /* Items list and cards */
    .items-list { padding: 8px 0; gap: 8px; }
    .check-card { border-radius: 12px; }
    .card-top { padding: 10px 11px 6px; gap: 8px; }
    .card-icon { width: 32px; height: 32px; font-size: 16px; }
    .card-title { font-size: 13px; }
    .card-note { font-size: 13px; }
    .ref-image-wrap { padding: 0 11px 12px; }
    .ref-label { font-size: 9px; margin-bottom: 4px; }
    
    /* Photo grid */
    .captured-photos { padding: 10px 11px 8px; }
    .photos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .photo-thumb { border-radius: 6px; }
    .photo-thumb-wrap { border-radius: 8px; }
    .photo-unassign,
    .photo-remove {
      width: 30px;
      height: 30px;
      font-size: 15px;
      top: 5px;
      touch-action: manipulation;
    }
    .photo-unassign { left: 5px; }
    .photo-remove { right: 5px; }
    .photo-remove-icon { width: 14px; height: 14px; }
    .photo-move {
      width: 30px;
      height: 30px;
      right: 5px;
      font-size: 14px;
      touch-action: manipulation;
    }
    .photo-move-up { top: 5px; }
    .photo-move-down { top: 39px; }
    .photo-reference-overlay { width: 56px; height: 56px; bottom: 5px; right: 5px; }
    .photo-completed-pill { left: 5px; bottom: 5px; padding: 3px 7px; font-size: 10px; }
    
    .btn-photo-svg { width: 20px; height: 20px; }
    .btn-photo-label { font-size: 12px; }
    
    /* Admin items */
    .admin-item-list { max-height: 220px; gap: 6px; }
    .admin-item-row { padding: 6px 8px; gap: 6px; }
    .admin-item-title { font-size: 11px; }
    .admin-item-sub { font-size: 10px; }
    .admin-flag { font-size: 9px; padding: 2px 6px; }
    .admin-item-edit { font-size: 12px; padding: 1px 3px; }
    .admin-item-del { font-size: 13px; }
    
    /* Submit bar */
    .submit-bar { padding: 10px 12px; gap: 8px; min-height: max(50px, calc(env(safe-area-inset-bottom) + 50px)); }
    .submit-count { font-size: 11px; }
    .btn-submit { padding: 12px 16px; font-size: 13px; min-height: 40px; }
    
    /* Empty state */
    .empty-state { padding: 40px 16px; }
    .empty-state .ei { font-size: 32px; margin-bottom: 8px; }
    .empty-state p { font-size: 13px; }
    
    /* Lightbox touch adjustments */
    .lightbox { padding: 12px; }
    .lightbox-close {
      top: calc(env(safe-area-inset-top) + 8px);
      right: 8px;
      font-size: 24px;
      width: 42px;
      height: 42px;
      z-index: 1210;
    }
    
    /* Success overlay */
    .success-overlay { padding: 24px; }
    .success-icon { font-size: 48px; margin-bottom: 12px; }
    .success-title { font-size: 24px; }
    .success-prop { font-size: 12px; }
    .success-sub { font-size: 13px; }
    .btn-new { padding: 11px 24px; font-size: 14px; }

    .stay-calendar-card { width: min(620px, 100%); }
    .stay-calendar-controls { padding: 10px 12px 8px; }
    .stay-calendar-grid { --stay-grid-gap: 3px; padding: 0 12px; gap: var(--stay-grid-gap); }
    .stay-calendar-day { min-height: calc(19px + (var(--lane-count, 1) * 5px)); }
    .stay-calendar-list { padding: 0 12px 12px; }
    
    /* Prevent zoom on input focus (iOS) */
    input, select, textarea { font-size: 16px !important; }
  }

  @media (max-width: 480px) {
    /* ── EXTRA SMALL DEVICES (< 480px) ── */
    header { padding: 0 10px; gap: 6px; }
    .logo { font-size: 16px; }
    .logo-wrap { gap: 6px; }
    .logo-badge { width: 32px; height: 32px; font-size: 15px; min-width: 40px; min-height: 40px; }
    .property-selector-wrap { min-width: 70px; }
    .property-select { font-size: 11px; padding: 6px 20px 6px 7px; }
    
    .progress-bar-wrap { padding: 5px 10px 8px; }
    .progress-label { font-size: 9px; }
    .checkout-link-row { padding: 5px 10px; font-size: 9px; }
    .checkout-link-debug { font-size: 8px; }
    
    .room-name { font-size: 16px; }
    .room-header { padding: 10px 10px 6px; }
    
    .card-title { font-size: 12px; }
    .card-note { font-size: 12px; }

    .captured-photos { padding: 9px 10px 8px; }
    .photos-grid { gap: 5px; }
    .photo-unassign,
    .photo-remove {
      width: 28px;
      height: 28px;
      font-size: 14px;
      top: 4px;
    }
    .photo-unassign { left: 4px; }
    .photo-remove { right: 4px; }
    .photo-move {
      width: 28px;
      height: 28px;
      right: 4px;
      font-size: 13px;
    }
    .photo-move-up { top: 4px; }
    .photo-move-down { top: 34px; }
    .photo-reference-overlay { width: 52px; height: 52px; bottom: 4px; right: 4px; }
    
    .tabs-wrap { padding: 4px 6px 4px; gap: 4px; }
    .tab { padding: 9px 10px; font-size: 11px; min-height: 38px; gap: 3px; }
    .tab-badge { font-size: 8px; padding: 1px 4px; }
    
    .ui-tabs-wrap { padding: 5px 6px; }
    .ui-tab-btn { padding: 7px 10px; font-size: 11px; min-height: 38px; }
    .ui-calendar-btn { width: 38px; min-width: 38px; min-height: 38px; }
    .ui-settings-btn { width: 38px; min-width: 38px; min-height: 38px; font-size: 17px; }

    .stay-calendar-controls {
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
    .stay-calendar-nav {
      width: 100%;
      justify-content: space-between;
    }
    .stay-calendar-month {
      min-width: 0;
      flex: 1;
    }
    .stay-calendar-grid { --stay-grid-gap: 2px; gap: var(--stay-grid-gap); }
    .stay-calendar-day {
      min-height: calc(17px + (var(--lane-count, 1) * 4px));
      padding: 4px 4px 3px;
    }
    .stay-calendar-day-number { font-size: 11px; }
    .stay-calendar-bar { height: 2px; }
    .stay-calendar-bars { gap: 1px; }
    .stay-calendar-cleaning-row {
      flex-direction: column;
      gap: 6px;
    }
    .stay-calendar-cleaning-next {
      min-width: 0;
      align-items: flex-start;
      text-align: left;
    }
    .stay-calendar-day-popup-row {
      flex-direction: column;
      gap: 6px;
    }
    .stay-calendar-day-popup-next {
      min-width: 0;
      align-items: flex-start;
      text-align: left;
    }
    
    .submit-bar { padding: 8px 10px; gap: 6px; min-height: max(48px, calc(env(safe-area-inset-bottom) + 48px)); }
    .submit-count { font-size: 10px; }
    .btn-submit { padding: 10px 12px; font-size: 12px; min-height: 38px; min-width: 80px; }
    
    .items-list { padding: 6px 0; gap: 6px; }
    .card-top { padding: 8px 9px 5px; gap: 6px; }
    .card-icon { width: 28px; height: 28px; font-size: 14px; }
    
    .admin-item-list { max-height: 200px; gap: 5px; }
    .admin-item-row { padding: 5px 7px; }
    
    .property-tab { min-width: 160px; }
    .property-tabs { padding: 5px 5px 0; }
  }

  /* Room Notes Editor */
  .room-notes-section { background: var(--warm-white); border-radius: 12px; padding: 14px; margin-bottom: 12px; border: 1.5px solid var(--mist-dark); }
  .room-notes-label { font-size: 11px; color: #8a99aa; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
  .room-notes-textarea { width: 100%; border: 1.5px solid var(--mist-dark); border-radius: 9px; padding: 10px; font-family: 'DM Sans', sans-serif; font-size: 13px; min-height: 80px; resize: vertical; }
  .room-notes-textarea:focus { outline: none; border-color: var(--forest); }
  .admin-inline-message {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #eaf7f3;
    border: 1.5px solid #bfe4d7;
    color: #1f7f73;
    font-size: 12px;
    font-weight: 600;
  }
  .debug-panel {
    margin-top: 12px;
    border: 1.5px solid #d8e4ef;
    border-radius: 10px;
    background: #f7fbff;
    overflow: hidden;
  }
  .debug-panel-head {
    padding: 9px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #58708a;
    background: #eef4fb;
    border-bottom: 1px solid #d8e4ef;
  }
  .debug-panel-body {
    max-height: 180px;
    overflow-y: auto;
    padding: 10px 12px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #35506b;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .reference-notes-section {
    background: linear-gradient(135deg, #fff9f1, #fff4e7);
    border: 1.5px solid #f3c99e;
    box-shadow: 0 10px 24px rgba(207, 114, 33, 0.08);
  }
  .reference-notes-content {
    padding: 14px 16px;
    border-radius: 10px;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 500;
  }
  
  /* Reference Images Grid */
  .ref-images-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; content-visibility: auto; contain-intrinsic-size: 1px 600px; }
  .ref-image-item { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
  .ref-image-item.reorder-enabled::before {
    content: 'REORDER';
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 3;
    background: rgba(33, 94, 124, 0.86);
    color: #ffffff;
    border-radius: 999px;
    padding: 3px 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.35px;
    pointer-events: none;
  }
  .ref-image-item.reorder-enabled.reorder-drop-target {
    outline: 2px dashed #4fa7c5;
    outline-offset: 2px;
  }
  .ref-image-item.reorder-enabled .ref-image-item-actions {
    display: none !important;
    pointer-events: none;
  }
  .ref-image-item img { width: 100%; height: 100%; object-fit: cover; }
  .ref-image-item-actions { position: absolute; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; gap: 6px; opacity: 0; transition: opacity 0.2s; }
  .ref-image-item:hover .ref-image-item-actions { display: flex; opacity: 1; }
  .ref-image-btn { background: rgba(255,255,255,0.9); border: none; border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; padding: 0; }
  .ref-image-btn:hover { background: white; }
  .ref-image-item.pending {
    border: 1.5px solid #d8e4ef;
    background: #f7fbff;
  }
  .ref-image-pending-overlay {
    position: absolute;
    inset: 0;
    background: rgba(24, 45, 61, 0.48);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    padding: 10px;
  }
  .ref-upload-placeholder {
    border: 2px dashed #cfd9e3;
    background: linear-gradient(135deg, #f7fbff, #edf4fb);
    border-radius: 10px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #6f8297;
    font-size: 11px;
    font-weight: 600;
  }
  .ref-upload-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #d8e4ef;
    border-top-color: var(--clay);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  
  /* Reference Images Display on Cleaner UI */
  .ref-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
  .ref-gallery-item { border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 1; cursor: pointer; border: 2px solid var(--mist-dark); }
  .ref-gallery-item.pending { border-color: var(--clay-light); }
  .ref-gallery-item.completed { border-color: #9ddfc2; }
  .ref-gallery-item.just-assigned { animation: refAssignedFlash 1.2s ease-out; }
  .ref-gallery-item.reorder-enabled::before {
    content: 'REORDER';
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 3;
    background: rgba(33, 94, 124, 0.86);
    color: #ffffff;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    pointer-events: none;
  }
  .ref-gallery-item.reorder-enabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(59, 142, 185, 0.12);
    pointer-events: none;
    z-index: 1;
  }
  .ref-gallery-item.reorder-enabled .ref-gallery-item-actions,
  .ref-gallery-item.reorder-enabled .ref-gallery-status,
  .ref-gallery-item.reorder-enabled .ref-gallery-undo-btn {
    display: none !important;
    pointer-events: none;
  }
  .ref-gallery-item.drag-hover { border-color: #4ab4e0 !important; box-shadow: 0 0 0 3px rgba(74,180,224,0.5), 0 3px 12px rgba(74,180,224,0.4) !important; transition: border-color 0.12s, box-shadow 0.12s; }
  .ref-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
  @keyframes refAssignedFlash {
    0%   { box-shadow: 0 0 0 0 rgba(46,170,126,0.70); }
    40%  { box-shadow: 0 0 0 6px rgba(46,170,126,0.55); }
    100% { box-shadow: 0 0 0 0 rgba(46,170,126,0.00); }
  }
  .ref-gallery-undo-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: rgba(24, 45, 61, 0.78);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
  }
  .ref-gallery-undo-btn:hover { background: rgba(24, 45, 61, 0.92); }
  .ref-gallery-status {
    position: absolute;
    left: 8px;
    bottom: 8px;
    background: rgba(44, 165, 121, 0.92);
    color: white;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2px;
  }
  .ref-gallery-item-actions {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.64);
    display: none;
    align-items: stretch;
    justify-content: stretch;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .ref-gallery-item:hover .ref-gallery-item-actions { display: flex; opacity: 1; }
  .ref-gallery-action-half {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .ref-gallery-action-half.left { border-right: 1px solid rgba(255,255,255,0.22); }
  .ref-gallery-action-half:hover { background: rgba(255,255,255,0.08); }
  .ref-gallery-action-icon {
    width: 26px;
    height: 26px;
    stroke: #ffffff;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  /* Rating Screen */
  .rating-screen { display: none; position: fixed; inset: 0; background: var(--warm-white); z-index: 350; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; }
  .rating-screen.active { display: flex; }
  .rating-title { font-family: 'DM Serif Display', serif; font-size: 26px; margin-bottom: 8px; color: var(--ink); }
  .rating-subtitle { font-size: 14px; color: var(--ink-soft); margin-bottom: 28px; }
  .rating-stars { display: flex; gap: 12px; justify-content: center; margin-bottom: 24px; }
  .rating-star-btn { background: none; border: none; font-size: 48px; cursor: pointer; opacity: 0.3; transition: opacity 0.2s; }
  .rating-star-btn:hover, .rating-star-btn.active, .rating-star-btn.hover-active { opacity: 1; }
  .rating-note { width: 100%; max-width: 300px; border: 1.5px solid var(--mist-dark); border-radius: 9px; padding: 10px; font-family: 'DM Sans', sans-serif; font-size: 13px; min-height: 80px; margin-bottom: 16px; resize: vertical; }
  .rating-note:focus { outline: none; border-color: var(--forest); }
  .rating-buttons { display: flex; gap: 8px; justify-content: center; }
  .rating-btn { padding: 12px 24px; border-radius: 9px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px; }
  .rating-btn-submit { background: var(--forest); color: white; }
  .rating-btn-submit:hover { background: var(--forest-light); }
  .rating-btn-skip { background: #f0f0f0; color: var(--ink); }
  .rating-btn-skip:hover { background: #e0e0e0; }

  .rating-note-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 33, 50, 0.55);
    z-index: 360;
    align-items: center;
    justify-content: center;
    padding: 14px;
  }
  .rating-note-modal.open { display: flex; }
  .rating-note-card {
    width: min(520px, 100%);
    background: var(--warm-white);
    border-radius: 14px;
    border: 1.5px solid var(--mist-dark);
    box-shadow: 0 20px 40px rgba(17, 49, 76, 0.2);
    overflow: hidden;
  }
  .rating-note-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    border-bottom: 1px solid var(--mist-dark);
    background: #f5f9fd;
  }
  .rating-note-title { font-size: 13px; font-weight: 700; color: var(--ink); }
  .rating-note-close {
    border: 1.5px solid var(--mist-dark);
    background: #fff;
    color: #556a81;
    border-radius: 9px;
    min-width: 36px;
    min-height: 36px;
    font-size: 14px;
    cursor: pointer;
  }
  .rating-note-body {
    padding: 12px 13px;
    font-size: 13px;
    line-height: 1.6;
    color: #3c4f63;
    white-space: pre-wrap;
  }
  
  @media (max-width: 767px) {
    .ref-gallery { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
    .ref-gallery-item-actions {
      display: flex;
      opacity: 1;
      inset: auto 0 0 0;
      height: 44%;
      background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.1));
    }
    .ref-gallery-item:hover .ref-gallery-item-actions { display: flex; opacity: 1; }
    .ref-gallery-action-half {
      align-items: flex-end;
      padding-bottom: 10px;
    }
    .ref-gallery-action-half.left { border-right: 1px solid rgba(255,255,255,0.28); }
    .ref-gallery-action-icon { width: 24px; height: 24px; }
    .room-notes-textarea { font-size: 16px; }
    .reference-notes-content { font-size: 14px; padding: 12px 14px; }
    .rating-star-btn { font-size: 40px; }
    .rating-title { font-size: 22px; }
    .rating-subtitle { font-size: 13px; }
  }


  /* ════════════════════════════════════════════════════════════════════
     GUI refresh (2026-08): floating capture button, desktop layout with
     room sidebar + side-by-side reference/capture columns, readability.
     ════════════════════════════════════════════════════════════════════ */

  /* Break out of TwentyTwentyFive's constrained content width (~645px):
     every top-level app element was being centered into a phone-width column. */
  .wp-block-post-content.is-layout-constrained > * {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Floating capture button (always reachable, no scrolling to the grid) ── */
  .capture-fab {
    position: fixed;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
    z-index: 140;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }
  .capture-fab.visible { display: flex; }
  .capture-fab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(18, 57, 93, 0.30);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .capture-fab-btn:active { transform: scale(0.96); }
  .capture-fab-btn svg {
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }
  .capture-fab-btn.photo {
    background: linear-gradient(140deg, #39b8a7, #2f9f8f);
    padding: 14px 20px;
    font-size: 15px;
  }
  .capture-fab-btn.photo svg { width: 22px; height: 22px; }
  .capture-fab-btn.video {
    background: #5f748b;
    padding: 10px 16px;
    font-size: 13px;
  }
  .capture-fab-btn.video svg { width: 18px; height: 18px; }

  /* ── Section label chips (reference progress + captured count) ── */
  .ref-progress-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff1e3;
    color: var(--clay-dark);
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    vertical-align: middle;
  }
  .ref-progress-chip.done {
    background: #e4f6ee;
    color: var(--done);
  }
  .captured-count-chip {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--mist);
    color: var(--ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: middle;
  }

  /* ── Readability: bigger, darker labels and status text ── */
  .room-notes-label { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.4px; margin-bottom: 8px; }
  .progress-label { font-size: 12px; color: var(--ink-soft); }
  .checkout-link-row { font-size: 12px; }
  .tabs-empty { font-size: 13px; color: #7c8ea1; }
  .logo-sub { color: var(--ink-soft); }
  @media (max-width: 767px) {
    .checkout-link-row { font-size: 11px; }
  }
  @media (max-width: 480px) {
    .checkout-link-row { font-size: 11px; }
  }

  /* Mobile keeps the stacked flow: column wrappers are layout-transparent. */
  .room-col { display: contents; }

  /* ── Desktop layout (≥1100px): sidebar navigation + two-column room view ── */
  @media (min-width: 1100px) {
    /* Comfortable overall width, centered */
    :root .wp-block-post-content.is-layout-constrained > header,
    :root .wp-block-post-content.is-layout-constrained > .ui-tabs-wrap,
    :root .wp-block-post-content.is-layout-constrained > .save-failure-banner,
    :root .wp-block-post-content.is-layout-constrained > .ui-tab-content,
    :root .wp-block-post-content.is-layout-constrained > .admin-panel,
    header,
    .ui-tabs-wrap,
    .save-failure-banner,
    .ui-tab-content,
    .admin-panel {
      max-width: 1440px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Inspection tab becomes a grid: full-width progress rows, then
       sidebar (sections + rooms) beside the room content. */
    #inspectionTab.active {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      grid-template-areas:
        "checkout checkout"
        "progress progress"
        "picker   room"
        "invite   invite";
      align-items: start;
    }
    #inspectionTab.active > .progress-bar-wrap { grid-area: progress; }
    #inspectionTab.active > .checkout-link-row { grid-area: checkout; }
    #inspectionTab.active > .picker-row { grid-area: picker; }
    #inspectionTab.active > #roomContent { grid-area: room; }
    #inspectionTab.active > .inspection-invite-wrap { grid-area: invite; }

    /* Pickers become an always-open sidebar */
    .picker-row {
      flex-direction: column;
      border-bottom: none;
      border-right: 1.5px solid var(--mist-dark);
      position: sticky;
      top: 60px;
      max-height: calc(100vh - 130px);
      overflow-y: auto;
      align-self: start;
    }
    .picker-block { width: 100%; flex: 0 0 auto; }
    .picker-block + .picker-block { border-left: none; border-top: 1.5px solid var(--mist-dark); }
    .picker-toggle { display: none; }
    .picker-panel,
    .picker-panel.collapsed {
      display: block;
      box-shadow: none;
      width: 100% !important;
      margin-left: 0 !important;
    }
    .section-tabs-wrap::before,
    .tabs-wrap::before {
      content: "Sections";
      display: block;
      padding: 10px 12px 0;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      color: #8a99aa;
    }
    .tabs-wrap::before { content: "Rooms"; }
    .section-tabs,
    .tabs {
      flex-direction: column;
      align-items: stretch;
      min-width: 0;
      padding: 8px 10px 10px;
      gap: 6px;
    }
    .section-tab,
    .tab {
      width: 100%;
      justify-content: flex-start;
      text-align: left;
      border-radius: 10px;
      border-bottom-color: var(--mist-dark);
      margin-bottom: 0;
    }
    .section-tab.active { border-color: #8ed8ce; }
    .tab .tab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .section-tab .tab-badge,
    .tab .tab-badge { margin-left: auto; }

    /* Room content: reference column beside capture column, references stay
       visible (independently scrollable) while reviewing/taking photos. */
    #roomContent { margin-bottom: 0 !important; }
    .items-list {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: 12px;
      padding: 12px 14px;
      align-items: start;
    }
    .room-col { display: block; min-width: 0; }
    .room-col-reference {
      position: sticky;
      top: 70px;
      max-height: calc(100vh - 140px);
      overflow-y: auto;
    }
    .room-col .room-notes-section { margin-bottom: 12px; }

    /* Use the extra width for bigger grids */
    .photos-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
    .ref-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

    /* (The capture stack's wide-screen inset was removed — it pulled the Photo/Video
       pills inward while the Rate button stayed at the window edge. Both now share
       --fab-right so they always line up. See the floating-controls block below.) */
  }

  /* ════════════════════════════════════════════════════════════════════
     Readability & hierarchy pass 2 (2026-08): bigger type, darker text,
     unmistakable active states, color-coded reference vs capture cards.
     ════════════════════════════════════════════════════════════════════ */

  /* Global contrast lift: the soft-gray body text was too light. */
  :root {
    --ink-soft: #46596d;
  }

  /* ── Type scale up ── */
  .logo-sub { font-size: 12px; }
  .progress-label { font-size: 13px; font-weight: 600; color: #3f5468; }
  .progress-track { height: 8px; border-radius: 5px; }
  .checkout-link-row { font-size: 13px; }
  #checkoutLinkText { font-size: 14px; }
  .checkout-link-row[data-state="linked"] { color: #1f4d78; }
  .ui-tab-btn { font-size: 15px; }
  .picker-toggle-text { font-size: 15px; color: var(--ink); }
  .section-tab { font-size: 14px; padding: 9px 14px; }
  .tab { font-size: 14px; font-weight: 600; }
  .tab-badge { font-size: 12px; padding: 2px 8px; }
  .tabs-empty { font-size: 14px; }
  .room-name { font-size: 26px; font-weight: 600; }
  .room-subtitle { font-size: 14px; color: var(--ink-soft); }
  .room-notes-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.3px;
    margin-bottom: 10px;
  }
  .reference-notes-content { font-size: 15px; color: #4a3a26; line-height: 1.55; }
  .btn-photo-label { font-size: 14px; font-weight: 600; }
  .photo-completed-pill { font-size: 12px; font-weight: 700; padding: 4px 10px; }
  .ref-progress-chip { font-size: 12.5px; padding: 3px 11px; }
  .captured-count-chip { font-size: 12.5px; padding: 3px 11px; }
  .sync-status { font-size: 13px; }
  .btn-submit { font-size: 15px; }
  .btn-invite-access { font-size: 14px; }
  .ref-gallery-status { font-size: 12px; font-weight: 700; }
  .history-last-btn, .history-load-btn, .history-delete-btn { font-size: 12px; }
  .admin-item-title { font-size: 13px; }
  .admin-item-sub { font-size: 12px; color: #6b7d90; }

  /* ── Unmistakable active states: the current section/room is solid teal ── */
  .section-tab.active {
    background: var(--forest);
    border-color: var(--forest);
    color: #ffffff;
  }
  .section-tab.active .tab-badge { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
  .tab.active {
    background: var(--forest);
    border-color: var(--forest);
    color: #ffffff;
    font-weight: 700;
  }
  .tab.active .tab-badge { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
  .tab.active.complete, .section-tab.active.complete { background: var(--done); border-color: var(--done); color: #ffffff; }
  .ui-tab-btn.active {
    border-color: var(--forest);
    color: var(--forest-light);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--forest);
  }

  /* ── Color-coded cards: reference material is warm, capture work is teal ── */
  .reference-images-section {
    border-color: #ecd2ae;
    background: #fffdf8;
  }
  .reference-images-section .room-notes-label { color: #8a5a1f; }
  .captured-photos-section {
    border-color: #b7ded7;
    background: #fbfffe;
  }
  .captured-photos-section .room-notes-label { color: #1f6f63; }
  .cleaner-notes-section { border-color: var(--mist-dark); }

  /* Progress bar percentage pops */
  .progress-fill { background: linear-gradient(90deg, #2fa090, #f59b45); }

  /* ── Past-cleaning editing mode: unmistakable amber signal ── */
  .past-cleaning-banner {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: #fff3e0;
    border-bottom: 2px solid #f0c891;
    color: #7a4b12;
    font-size: 14px;
    font-weight: 600;
  }
  .past-cleaning-banner-icon { font-size: 17px; flex-shrink: 0; }
  .past-cleaning-banner-text { min-width: 0; line-height: 1.4; }
  .past-cleaning-banner-text strong { color: #5f3705; }
  .past-cleaning-banner-btn {
    margin-left: auto;
    flex-shrink: 0;
    border: 1.5px solid #dfa961;
    background: #ffffff;
    color: #8a5a1f;
    border-radius: 999px;
    padding: 8px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    min-height: 40px;
  }
  .past-cleaning-banner-btn:hover { background: #fff7ec; }

  /* Inspection tab relabeled + amber while a past cleaning is loaded */
  .ui-tab-btn.editing-past.active {
    border-color: var(--clay);
    background: #fff7ed;
    color: var(--clay-dark);
    box-shadow: inset 0 -3px 0 var(--clay);
  }

  @media (min-width: 1100px) {
    #inspectionTab.active {
      grid-template-areas:
        "pastbanner pastbanner"
        "checkout   checkout"
        "progress   progress"
        "picker     room"
        "invite     invite";
    }
    #inspectionTab.active > .past-cleaning-banner { grid-area: pastbanner; }
  }

  /* ── Stay-calendar "Open this cleaning" action (was an unstyled default button) ── */
  .stay-calendar-pick-date-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(140deg, #39b8a7, #2f9f8f);
    color: #ffffff;
    padding: 10px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    min-height: 42px;
    box-shadow: 0 3px 10px rgba(47, 160, 144, 0.35);
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .stay-calendar-pick-date-btn:hover { box-shadow: 0 5px 14px rgba(47, 160, 144, 0.45); }
  .stay-calendar-pick-date-btn:active { transform: scale(0.97); }
  .stay-calendar-pick-date-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
  }

  /* ── Past Cleanings list: clearer loaded-entry highlight + room to scroll
        past the fixed footer bar ── */
  .history-wrap { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 130px); }
  .history-item.active-cleaning {
    border-color: #2fa090;
    border-width: 2px;
    background: #e9f7f3;
    box-shadow: 0 0 0 3px rgba(47, 160, 144, 0.15);
  }
  .history-status-chip.active {
    background: var(--forest);
    color: #ffffff;
    border-color: var(--forest);
  }

  /* ── In-page video recorder modal ── */
  .video-recorder-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(8, 15, 22, 0.92);
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .video-recorder-modal.open { display: flex; }
  .video-recorder-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(680px, 100%);
    max-height: 100%;
  }
  .video-recorder-card video {
    width: 100%;
    max-height: 62vh;
    border-radius: 14px;
    background: #000;
    object-fit: contain;
  }
  .video-recorder-status {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e8eff5;
    font-size: 15px;
    font-weight: 600;
    justify-content: center;
  }
  .video-recorder-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #5f748b;
    flex-shrink: 0;
  }
  .video-recorder-dot.recording {
    background: #ff4d4d;
    animation: videoRecorderPulse 1.1s ease-in-out infinite;
  }
  @keyframes videoRecorderPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
  }
  .video-recorder-timer { font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
  .video-recorder-hint { color: #b9c7d4; font-weight: 500; }
  .video-recorder-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
  }
  .video-recorder-btn {
    border: none;
    border-radius: 999px;
    padding: 14px 26px;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    min-height: 52px;
  }
  .video-recorder-btn.record {
    background: #e23b3b;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(226, 59, 59, 0.4);
  }
  .video-recorder-btn.record.recording {
    background: #ffffff;
    color: #c22525;
  }
  .video-recorder-btn.cancel {
    background: rgba(255, 255, 255, 0.14);
    color: #e8eff5;
  }

  /* ── Rotate button on captured photo tiles (below the remove button) ── */
  .photo-rotate {
    position: absolute;
    top: 42px;
    right: 3px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.65);
    border: none;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
    transition: transform 0.14s ease, background-color 0.14s ease, box-shadow 0.14s ease;
  }
  .photo-rotate-icon {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
  }
  @media (hover: hover) {
    .photo-rotate:hover { background: rgba(47, 122, 106, 0.92); transform: translateY(-1px) scale(1.04); box-shadow: 0 4px 10px rgba(18, 64, 52, 0.34); }
  }
  @media (max-width: 640px) {
    .photo-rotate { width: 30px; height: 30px; top: 38px; right: 5px; touch-action: manipulation; }
    .photo-rotate-icon { width: 14px; height: 14px; }
  }
  @media (max-width: 400px) {
    .photo-rotate { width: 28px; height: 28px; top: 35px; right: 4px; }
  }

  /* ── Past Cleanings readability: real text sizes, darker ink, roomier rows ── */
  .history-title { font-size: 14px; color: #46596d; }
  .history-item { padding: 12px 14px; gap: 12px; border-radius: 11px; }
  .history-list { gap: 10px; }
  .history-time { font-size: 15px; }
  .history-stats { font-size: 13px; color: #55677c; }
  .history-status-chip { font-size: 12px; padding: 2px 9px; }
  .history-attention-chip { font-size: 12px; padding: 2px 9px; }
  .history-attention-glyph { width: 14px; height: 14px; }
  .history-rating-chip { font-size: 13px; }
  .history-note-btn { font-size: 13px; }
  .history-load-btn, .history-delete-btn { font-size: 14px; padding: 9px 18px; }
  .history-empty { font-size: 14px; }

  @media (min-width: 1100px) {
    /* Don't let rows sprawl across the whole wide layout — keep a readable column. */
    .history-wrap { max-width: 900px; margin: 0 auto; }
  }

  /* ── Footer: progress line + live save status stacked (updateProgress used to
        overwrite the container and destroy the sync indicator entirely) ── */
  .submit-count {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }
  .submit-progress { font-size: 13px; color: #46596d; }
  .submit-progress .submit-prop-tag { font-weight: 700; margin-right: 6px; }
  .submit-progress:empty { display: none; }
  .submit-progress .submit-prop-tag { display: block; margin-right: 0; }

  /* ── Slim footer: single row + slides away while scrolling down ──
        It is a fixed overlay, so its height is permanently taken from the checklist. */
  .submit-bar {
    padding: 7px 12px;
    min-height: max(46px, calc(env(safe-area-inset-bottom) + 46px));
    transition: transform 0.22s ease;
    will-change: transform;
  }
  .submit-bar.auto-hidden {
    transform: translateY(calc(100% + 12px));
  }
  .submit-count {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    line-height: 1.3;
  }
  .submit-progress { font-size: 13px; white-space: nowrap; }
  .submit-progress strong { display: inline; }
  .sync-status { margin-top: 0; font-size: 12.5px; }
  .btn-submit { padding: 9px 18px; min-height: 40px; min-width: 88px; border-radius: 9px; }

  /* Reclaim the scroll padding that was reserved for the taller bar. */
  .inspection-invite-wrap { padding-bottom: 74px; }
  .history-wrap { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }

  @media (max-width: 640px) {
    .submit-bar { padding: 6px 10px; min-height: max(44px, calc(env(safe-area-inset-bottom) + 44px)); }
    .submit-progress { font-size: 12.5px; }
    .sync-status { font-size: 12px; }
    .btn-submit { padding: 8px 14px; min-height: 38px; min-width: 76px; font-size: 14px; }
  }

  /* ── Cookie consent UI: suppressed on the CleanCheck app screen only ──
     This stylesheet is enqueued solely for the app page (see
     vrl_cleancheck_enqueue_assets_for_request), so the consent banner and the
     floating re-consent icon still work normally everywhere else on the site.
     The app is a logged-in internal tool whose cookies are first-party and
     functional, and CookieAdmin's script blocking only targets scripts matching
     known tracker patterns — never the app's own JS — so nothing here changes
     what is or isn't blocked. */
  #cookieadmin_notice,
  #cookieadmin_preference,
  .cookieadmin_cookie_modal,
  .cookieadmin_re_consent,
  #cookieadmin-gpc-toast {
    display: none !important;
  }

  /* ── Pull the app header to the very top ──
     The site runs the block theme Twenty Twenty-Five, whose wrappers
     (.wp-site-blocks > main > .entry-content) carry their own block-gap margins and
     global padding; the older reset above only covered Divi-style containers. */
  .wp-site-blocks,
  .wp-site-blocks > main,
  main#wp--skip-link--target,
  .entry-content.wp-block-post-content,
  .wp-block-post-content {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
    padding-top: 0 !important;
  }
  .entry-content.wp-block-post-content > *:first-child,
  .wp-block-post-content > *:first-child {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
  }
  /* Empty leftovers (autop paragraphs, empty membership wrappers) that would
     otherwise hold space above the header. */
  .entry-content.wp-block-post-content > p:empty,
  .entry-content.wp-block-post-content > div:empty,
  .wp-site-blocks > p:empty,
  .wp-site-blocks > div:empty {
    display: none !important;
  }
  /* Nudge the app header up past the last of the theme's block-gap space.
     This needs a STRONGER selector than a bare `header`: the block-theme resets
     just above (`.wp-block-post-content > *:first-child`, and further down
     `:root :where(.is-layout-constrained) > *`) are themselves !important and more
     specific, so a plain `header { … !important }` was being flattened back to 0.
     Both the physical and logical property are set — the competing rules use
     margin-block-start, which is the same computed property. */
  :root .entry-content.wp-block-post-content > header,
  :root .wp-block-post-content > header,
  :root .wp-site-blocks header {
    margin-top: -29px !important;
    margin-block-start: -29px !important;
  }

  /* Extra scroll room under the last element so "Team Access & Invites" can be
     scrolled clear of the floating Photo/Video buttons (which sit ~88-190px above
     the bottom edge) instead of sitting behind them. */
  .inspection-invite-wrap {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 240px);
  }

  /* Neutralize the block theme's layout gap on this page. WordPress prints
       :root :where(.is-layout-constrained) > * { margin-block-start: 1.2rem; ... }
     into its global-styles block, so it can't be deleted — only overridden. It is
     what pushed the header down and added stray gaps between the app's sections;
     the app spaces its own elements. */
  :root :where(.is-layout-constrained) > *,
  :root :where(.is-layout-flow) > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
  }

  /* ════════════════════════════════════════════════════════════════════
     Footer bar removed (2026-08): the rooms-completed count duplicated the
     progress bar, so it is gone; the save status became a small pill at the
     bottom-left, and the Save/Update/Rate action floats under the capture
     buttons. Nothing fixed spans the width any more.
     ════════════════════════════════════════════════════════════════════ */
  .submit-bar { display: none !important; }

  /* Reclaim the space that was reserved for the bar. */
  body,
  body.wp-admin-bar {
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  }

  /* Save / Update / Rate — floats below the Video button. */
  .submit-fab {
    position: fixed;
    right: 14px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 140;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 46px;
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    background: var(--forest);
    color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(18, 57, 93, 0.30);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
  }
  .submit-fab.visible { display: inline-flex; }
  .submit-fab:hover { background: var(--forest-light); }
  .submit-fab:active { transform: scale(0.96); }
  .submit-fab:disabled {
    background: #cfdae4;
    color: #7c8ea1;
    cursor: not-allowed;
    box-shadow: 0 3px 10px rgba(18, 57, 93, 0.14);
  }

  /* Capture stack sits directly above the action button when it is showing. */
  .capture-fab { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .capture-fab.with-submit { bottom: calc(env(safe-area-inset-bottom, 0px) + 74px); }

  /* Save status — small, out of the way, bottom-left. */
  .sync-pill {
    position: fixed;
    left: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 135;
    max-width: min(58vw, 320px);
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--mist-dark);
    box-shadow: 0 3px 12px rgba(18, 57, 93, 0.12);
    backdrop-filter: blur(4px);
  }
  .sync-pill .sync-status { margin-top: 0; font-size: 12.5px; }
  .sync-pill[data-state="synced"] { opacity: 0.85; }
  body.admin-only-mode .sync-pill,
  body.admin-only-mode .submit-fab { display: none !important; }

  /* Without a footer the page needs less bottom padding, but still enough to scroll
     the invite button clear of the floating controls. */
  .inspection-invite-wrap { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 200px); }
  .history-wrap { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }

  @media (max-width: 640px) {
    .submit-fab { min-width: 92px; min-height: 44px; padding: 11px 18px; font-size: 14px; }
    .capture-fab.with-submit { bottom: calc(env(safe-area-inset-bottom, 0px) + 70px); }
    .sync-pill { max-width: 52vw; padding: 6px 11px; }
    .sync-pill .sync-status { font-size: 11.5px; }
  }

  /* Close (X) for the rating dialog — dismiss without rating. The dialog is a
     full-screen fixed overlay, so this anchors to its top-right corner. */
  .rating-close {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: calc(env(safe-area-inset-right, 0px) + 14px);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--mist-dark);
    background: #fff;
    color: #556a81;
    border-radius: 12px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
  }
  .rating-close:hover {
    background: #f4f8fc;
    border-color: #c2d1df;
    color: var(--ink);
  }
  .rating-close:active { transform: scale(0.96); }

  /* ── Save status lives in the progress row now (the floating pill is gone) ──
     Layout: "Inspection Progress  ● All changes saved        9 / 20 completed" */
  .progress-label { align-items: center; gap: 10px; }
  .progress-label-main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
  }
  .progress-label-text { flex-shrink: 0; }
  .progress-label .sync-status {
    margin-top: 0;
    font-size: 12px;
    font-weight: 500;
    color: #7b8ea2;
    min-width: 0;
  }
  .progress-label #progressText { flex-shrink: 0; }
  /* The pill wrapper no longer exists; keep this so a cached shell can't show it. */
  .sync-pill { display: none !important; }

  @media (max-width: 560px) {
    /* Tight screens: the bar itself conveys "progress", so drop the words and keep
       the save status, which is the part that changes. */
    .progress-label-text { display: none; }
    .progress-label .sync-status { font-size: 11.5px; }
  }

  /* ── Floating controls share one right offset ──
     Photo / Video / Rate are one visual column, so they must never drift apart
     horizontally (the capture stack used to carry its own wide-screen inset). */
  :root { --fab-right: 14px; }
  .capture-fab,
  .submit-fab {
    right: var(--fab-right);
  }

  /* ════════════════════════════════════════════════════════════════════
     Collapsible action dock (bottom-right). Collapsed by default: only a
     small camera tab shows. Tapping it expands Photo / Video / Rate upward;
     tapping again (the tab turns into an X) puts them away.
     ════════════════════════════════════════════════════════════════════ */
  .fab-dock {
    position: fixed;
    right: var(--fab-right);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    z-index: 140;
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none; /* only the children capture clicks */
  }
  .fab-dock.visible { display: flex; }

  .fab-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    /* Collapsed: tucked down behind the launcher and non-interactive. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1), visibility 0.22s;
  }
  .fab-dock.expanded .fab-stack {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Buttons are laid out by the dock now, not individually fixed. */
  .capture-fab,
  .submit-fab {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
  }
  .capture-fab { gap: 8px; }

  /* The launcher tab. */
  .fab-launcher {
    pointer-events: auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--forest);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(18, 57, 93, 0.32);
    transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1), background 0.15s ease, box-shadow 0.15s ease;
  }
  .fab-launcher:hover { background: var(--forest-light); box-shadow: 0 8px 22px rgba(18, 57, 93, 0.38); }
  .fab-launcher:active { transform: scale(0.94); }
  .fab-dock.expanded .fab-launcher { background: #46596d; }
  .fab-launcher-icon {
    width: 26px;
    height: 26px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    position: absolute;
    transition: opacity 0.16s ease, transform 0.2s ease;
  }
  .fab-launcher-icon.close { opacity: 0; transform: rotate(-90deg) scale(0.8); }
  .fab-dock.expanded .fab-launcher-icon.camera { opacity: 0; transform: rotate(90deg) scale(0.8); }
  .fab-dock.expanded .fab-launcher-icon.close { opacity: 1; transform: rotate(0deg) scale(1); }
  /* Keep the two stacked icons centred on each other. */
  .fab-launcher { position: relative; }

  @media (max-width: 640px) {
    .fab-launcher { width: 52px; height: 52px; }
    .fab-launcher-icon { width: 24px; height: 24px; }
  }

  /* With the actions tucked away, the page needs far less dead scroll space. */
  .inspection-invite-wrap { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); }

  /* ── The last of the top gap ──
     Two things the earlier overrides missed on this page:
     1. WordPress emits a THIRD block-gap rule, for .wp-site-blocks children:
          :where(.wp-site-blocks) > * { margin-block-start: 1.2rem }
        <main> is the second child here, so it picked up 19.2px.
     2. The page content begins with a Separator block (<hr class="wp-block-separator">)
        as the first child of .wp-site-blocks, which adds its own height and margins
        above the app. It is decoration that only shows as dead space here. */
  :root :where(.wp-site-blocks) > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
  }
  .wp-site-blocks > hr,
  .wp-site-blocks > hr.wp-block-separator {
    display: none !important;
  }

  /* ── Phones: one way to capture, not two ──
     The floating camera dock covers Photo/Video from anywhere on the screen, so the
     dashed "Take a Photo" / "Take a Video" tiles inside the grid are duplicated
     function that costs real vertical space in every room. Desktop keeps them —
     there the space is free and the inline tiles are a familiar target. */
  @media (max-width: 640px) {
    .image-tile-split,
    .image-tile-button {
      display: none !important;
    }
  }

  /* ── Completed reference section collapses to one line ──
     When every reference has its photo, the "✓ All N photographed" chip in the label
     says everything; the card no longer needs body height. */
  .reference-images-section.is-complete {
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .reference-images-section.is-complete .room-notes-label {
    margin-bottom: 0;
  }

  /* ── Sticky section/room picker (phone + tablet widths) ──
     Below 1100px the picker is a horizontal row rather than the desktop sidebar, so
     it scrolls away in a long room. Pin it just under the sticky header (height
     published as --app-header-h by syncStickyHeaderOffset). */
  @media (max-width: 1099px) {
    .picker-row {
      position: sticky;
      top: calc(var(--app-header-h, 45px) - 1px);
      z-index: 90;
      background: #f5f9fd;
      box-shadow: 0 4px 10px rgba(18, 57, 93, 0.05);
    }
  }

  /* ── Reference reorder arrows (reorder mode) ──
     Reference images could previously only be reordered by dragging, which phones
     never fire — these give the same tap affordance the captured photos already have.
     Placed top-LEFT so they never sit under the remove/undo controls on the right. */
  .ref-move {
    position: absolute;
    left: 3px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    z-index: 6;
    touch-action: manipulation;
    transition: transform 0.14s ease, background-color 0.14s ease;
  }
  .ref-move-up { top: 3px; }
  .ref-move-down { top: 37px; }
  .ref-move[disabled] { opacity: 0.35; cursor: not-allowed; }
  @media (hover: hover) {
    .ref-move:not([disabled]):hover { background: rgba(47, 122, 106, 0.94); transform: scale(1.06); }
  }
  /* The manager grid tiles are smaller — keep both arrows on the tile. */
  .ref-image-item .ref-move { width: 26px; height: 26px; font-size: 13px; }
  .ref-image-item .ref-move-down { top: 33px; }
  @media (max-width: 640px) {
    .ref-move { width: 32px; height: 32px; }
    .ref-move-down { top: 39px; }
  }

  /* Reference reorder arrows: bottom corners, pointing the way the gallery reads.
     (Supersedes the earlier top-left up/down placement.) */
  .ref-move {
    top: auto !important;
    bottom: 6px;
    left: auto;
    right: auto;
  }
  .ref-move-prev { left: 6px; }
  .ref-move-next { right: 6px; }
  /* The "✓ Completed" badge also lives bottom-left — it would sit under the arrow,
     and during reorder the tile's completed state is not what is being worked on. */
  .ref-gallery-item.reorder-enabled .ref-gallery-status { display: none; }
  /* Captured photos no longer have reorder arrows at all. */
  .photo-move { display: none !important; }

  @media (max-width: 640px) {
    .ref-move { bottom: 6px; }
    .ref-move-prev { left: 6px; }
    .ref-move-next { right: 6px; }
  }

  /* Arrows wear the reorder colour (same steel blue as the REORDER pill and the
     tile tint) so they read as part of that mode rather than as generic tile
     buttons like delete/rotate. Slightly more opaque than the pill — these sit on
     top of photos and need to stay legible. */
  .ref-move {
    background: rgba(33, 94, 124, 0.92);
    box-shadow: 0 2px 6px rgba(12, 42, 60, 0.35);
  }
  .ref-move[disabled] {
    background: rgba(33, 94, 124, 0.45);
    box-shadow: none;
  }
  @media (hover: hover) {
    .ref-move:not([disabled]):hover {
      background: rgba(25, 76, 102, 0.98);
      transform: scale(1.06);
    }
  }