:root {
    --sand: #f3f6f9;
    --warm-white: #ffffff;
    --clay: #f59b45;
    --clay-light: #ffd9b5;
    --clay-dark: #cf7221;
    --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;
  }
  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);
    padding: 12px 14px 11px;
    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: #f7fbff;
    border-bottom: 1px solid var(--mist-dark);
    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: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.7px; color: var(--clay-dark); 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: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .property-tab-address { font-size: 11px; color: #999; 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: 12px; 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: 12px; 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: 10px 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: 10px; 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: 12px; }
    .property-tab-address { font-size: 10px; }
    
    /* 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: 8px 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; }
  }