/* GatePass styles — extracted in original cascade order. */

/* ===== inline-style-1 ===== */
:root {
      --bg: #eef2f7;
      --card: #ffffff;
      --text: #111827;
      --muted: #6b7280;
      --blue: #2563eb;
      --blue-dark: #1d4ed8;
      --green: #16a34a;
      --green-soft: #ecfdf3;
      --amber: #92400e;
      --amber-soft: #fffbeb;
      --red-soft: #fef2f2;
      --border: #e5e7eb;
      --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    }

    * {
      box-sizing: border-box;
      font-family: Arial, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      margin: 0;
      background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);
      color: var(--text);
    }

    .app {
      max-width: 900px;
      margin: 0 auto;
      padding: 18px;
    }

    .header {
      background: linear-gradient(135deg, #0f172a, #1e3a8a);
      color: white;
      padding: 22px;
      border-radius: 22px;
      box-shadow: var(--shadow);
      margin-bottom: 16px;
    }

    .header h1 {
      margin: 0 0 8px;
      font-size: 28px;
      line-height: 1.15;
    }

    .header p {
      margin: 0;
      color: #dbeafe;
      line-height: 1.45;
    }

    .panel {
      background: var(--card);
      padding: 18px;
      border-radius: 22px;
      box-shadow: var(--shadow);
      margin-bottom: 16px;
      border: 1px solid rgba(255,255,255,0.7);
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .stat-card {
      background: #f8fafc;
      border: 1px solid var(--border);
      padding: 16px 10px;
      border-radius: 18px;
      text-align: center;
    }

    .stat-number {
      font-size: 32px;
      font-weight: 800;
      margin-bottom: 4px;
      letter-spacing: -0.5px;
    }

    #attendedTickets { color: var(--green); }

    .search-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
    }

    input, button {
      font-size: 16px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid #d1d5db;
    }

    input {
      width: 100%;
      background: #fff;
      outline: none;
    }

    input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    button {
      cursor: pointer;
      border: none;
      background: var(--blue);
      color: white;
      font-weight: 800;
      transition: transform 0.08s ease, background 0.15s ease, opacity 0.15s ease;
    }

    button:active { transform: scale(0.98); }
    button:hover { background: var(--blue-dark); }

    button.secondary {
      background: #111827;
      width: 100%;
      margin-bottom: 12px;
      font-size: 17px;
      padding: 16px;
    }

    button.secondary:hover { background: #000000; }

    button:disabled {
      background: #9ca3af;
      cursor: not-allowed;
      opacity: 0.9;
    }

    .message {
      padding: 14px 16px;
      border-radius: 16px;
      margin-bottom: 16px;
      display: none;
      font-weight: 800;
      box-shadow: var(--shadow);
    }

    .message.success {
      background: var(--green-soft);
      color: #166534;
      display: block;
      border: 1px solid #bbf7d0;
    }

    .message.warning {
      background: var(--amber-soft);
      color: var(--amber);
      display: block;
      border: 1px solid #fde68a;
    }

    .message.error {
      background: var(--red-soft);
      color: #991b1b;
      display: block;
      border: 1px solid #fecaca;
    }

    .small-text {
      font-size: 13px;
      color: var(--muted);
      font-weight: 600;
    }

    #loggedInVolunteer {
      font-size: 15px;
    }

    #qrReader {
      overflow: hidden;
      border-radius: 18px;
      border: 2px solid #111827;
      background: #000;
      width: 100%;
      display: none;
      margin-bottom: 14px;
    }

    .result-card {
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 16px;
      margin-bottom: 14px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    }

    .result-card.attended {
      border-color: #86efac;
      background: var(--green-soft);
    }

    .result-card.not-attended {
      border-color: #bfdbfe;
      background: #ffffff;
    }

    .result-top {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
    }

    .ticket {
      font-size: 22px;
      font-weight: 900;
      letter-spacing: -0.4px;
    }

    .badge {
      padding: 7px 11px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .badge.green {
      background: var(--green);
      color: white;
    }

    .badge.grey {
      background: #dbeafe;
      color: #1e40af;
    }

    .details {
      color: #374151;
      line-height: 1.58;
      margin-bottom: 14px;
      font-size: 15px;
    }

    .details strong {
      display: inline-block;
      font-size: 17px;
      margin-bottom: 4px;
      color: #111827;
    }

    .result-card button {
      width: 100%;
      font-size: 18px;
      padding: 16px;
      border-radius: 16px;
    }

    h2 {
      font-size: 22px;
      letter-spacing: -0.3px;
    }

    .user-strip {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: #f8fafc;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 12px;
      margin-bottom: 12px;
    }

    .user-strip-name {
      font-weight: 800;
      color: #1e3a8a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .switch-small {
      background: #6b7280;
      padding: 8px 10px;
      font-size: 13px;
      border-radius: 10px;
      white-space: nowrap;
    }

    @media (max-width: 600px) {
      .app { padding: 10px; }
      .header, .panel { border-radius: 18px; padding: 14px; margin-bottom: 12px; }
      .header h1 { font-size: 24px; }
      .header p { font-size: 15px; }

      .stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
      }

      .stat-card {
        padding: 10px 6px;
        border-radius: 14px;
      }

      .stat-number {
        font-size: 24px;
        margin-bottom: 2px;
      }

      .stat-card div:last-child {
        font-size: 12px;
      }

      .search-row {
        grid-template-columns: 1fr;
      }

      button.secondary {
        padding: 14px;
        margin-bottom: 10px;
      }

      .result-top { align-items: flex-start; flex-direction: column; }
      .ticket { font-size: 21px; }
    }

    body {
      padding-bottom: 24px;
    }

    .bottom-bar {
      position: fixed;
      right: 14px;
      bottom: 14px;
      left: auto;
      width: auto;
      background: transparent;
      border: 0;
      box-shadow: none;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      z-index: 9999;
    }

    .bottom-user-name,
    .bottom-label,
    .bottom-name {
      display: none;
    }

    .result-card {
      animation: cardIn 0.18s ease-out;
    }

    .message.success,
    .message.warning,
    .message.error {
      animation: messagePop 0.18s ease-out;
    }

    .pulse-success {
      animation: pulseSuccess 0.45s ease-out;
    }

    .shake-warning {
      animation: shakeWarning 0.28s ease-in-out;
    }

    @keyframes cardIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes messagePop {
      from { opacity: 0; transform: scale(0.98); }
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes pulseSuccess {
      0% { transform: scale(1); }
      45% { transform: scale(1.018); }
      100% { transform: scale(1); }
    }

    @keyframes shakeWarning {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-4px); }
      75% { transform: translateX(4px); }
    }

    @media (max-width: 600px) {
      body {
        padding-bottom: 20px;
      }

      .bottom-bar {
        right: 12px;
        bottom: 12px;
        padding: 0;
      }
    }


    .bulk-action-bar {
      position: fixed;
      left: 50%;
      bottom: 74px;
      transform: translateX(-50%);
      width: min(864px, calc(100% - 24px));
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: center;
      background: rgba(248, 250, 252, 0.98);
      backdrop-filter: blur(10px);
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 10px;
      box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
      z-index: 9998;
    }

    .bulk-summary {
      font-weight: 800;
      color: #1e3a8a;
    }

    .bulk-clear {
      background: #6b7280;
      padding: 10px 12px;
      font-size: 14px;
    }

    .bulk-submit {
      background: var(--green);
      padding: 10px 12px;
      font-size: 14px;
    }

    .select-row {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      margin-bottom: 12px;
      font-weight: 800;
      color: #1e3a8a;
    }

    .select-row input {
      width: 22px;
      height: 22px;
      padding: 0;
      margin: 0;
    }

    .bottom-user-menu-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.28);
      backdrop-filter: blur(4px);
      z-index: 9998;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }

    .bottom-user-menu-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    .bottom-user-menu {
      position: fixed;
      left: 50%;
      bottom: 14px;
      transform: translateX(-50%) translateY(120%);
      width: min(420px, calc(100% - 24px));
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(226, 232, 240, 0.95);
      border-radius: 28px;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
      padding: 12px;
      z-index: 10000;
      opacity: 0;
      pointer-events: none;
      transition: transform 0.22s ease, opacity 0.18s ease;
    }

    .bottom-user-menu.open {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .bottom-sheet-handle {
      width: 42px;
      height: 5px;
      border-radius: 999px;
      background: #cbd5e1;
      margin: 4px auto 14px;
    }

    .bottom-sheet-user-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border-radius: 22px;
      background: linear-gradient(135deg, #eff6ff, #ffffff);
      border: 1px solid #dbeafe;
      margin-bottom: 10px;
    }

    .bottom-sheet-avatar {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1e40af;
      color: white;
      font-size: 21px;
      flex-shrink: 0;
    }

    .bottom-sheet-label {
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #64748b;
      margin-bottom: 3px;
    }

    .bottom-sheet-name {
      font-size: 19px;
      font-weight: 950;
      color: #0f172a;
      line-height: 1.15;
      word-break: break-word;
    }

    .bottom-sheet-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .bottom-user-menu button {
      width: 100%;
      padding: 14px;
      font-size: 15px;
      border-radius: 18px;
    }

    .sheet-switch-button {
      background: #111827;
    }

    .sheet-close-button {
      background: #64748b;
    }

    .sheet-report-button {
      background: #16a34a;
    }

    .sheet-report-button:hover {
      background: #15803d;
    }

    .user-dot-button {
      background: #111827;
      width: 50px;
      height: 50px;
      padding: 0;
      border-radius: 999px;
      font-size: 23px;
      flex-shrink: 0;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
      border: 1px solid rgba(255,255,255,0.35);
    }

    @media (max-width: 600px) {
      .bulk-action-bar {
        grid-template-columns: 1fr;
        bottom: 72px;
        width: calc(100% - 20px);
      }

      .bulk-clear,
      .bulk-submit {
        width: 100%;
      }
    }


    .result-card {
      border-radius: 22px;
      padding: 16px;
      margin-bottom: 16px;
      background: #ffffff;
      border: 1px solid #dbeafe;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
      overflow: hidden;
    }

    .result-card.attended {
      background: linear-gradient(180deg, #ecfdf3 0%, #ffffff 100%);
      border-color: #86efac;
    }

    .result-card.not-attended {
      background: #ffffff;
      border-color: #bfdbfe;
    }

    .select-row {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1e40af;
      border-radius: 16px;
      padding: 11px 12px;
      margin-bottom: 14px;
      font-weight: 900;
    }

    .select-row input {
      width: 22px;
      height: 22px;
      margin: 0;
      accent-color: #2563eb;
    }

    .card-topline {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
    }

    .attendee-no, .ticket-card-title {
      font-size: 22px;
      font-weight: 950;
      letter-spacing: -0.4px;
      color: #0f172a;
      line-height: 1.15;
    }

    .status-pill {
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 950;
      white-space: nowrap;
    }

    .status-pill.ready {
      background: #dbeafe;
      color: #1e40af;
    }

    .status-pill.collected {
      background: #16a34a;
      color: white;
    }

    .ticket-name-pill {
      display: inline-flex;
      align-items: center;
      background: #f1f5f9;
      color: #334155;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 900;
      font-size: 14px;
      margin-bottom: 14px;
    }

    .person-card {
      background: #f8fafc;
      border: 1px solid #e5e7eb;
      border-radius: 18px;
      padding: 14px;
      margin-bottom: 14px;
    }

    .person-main-name {
      font-size: 21px;
      font-weight: 950;
      color: #111827;
      margin-bottom: 12px;
      line-height: 1.2;
    }

    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 10px;
    }

    .mini-info {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 11px;
      min-width: 0;
    }

    .mini-label {
      font-size: 11px;
      font-weight: 950;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 5px;
    }

    .mini-value {
      font-size: 16px;
      font-weight: 900;
      color: #111827;
      word-break: break-word;
    }

    .email-card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 11px;
    }

    .email-card .mini-value {
      font-size: 14px;
      font-weight: 800;
    }

    .checkin-card {
      background: #ecfdf3;
      border: 1px solid #86efac;
      border-radius: 18px;
      padding: 14px;
      margin-bottom: 14px;
    }

    .checkin-title {
      font-weight: 950;
      color: #166534;
      margin-bottom: 10px;
      font-size: 15px;
    }

    .checkin-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .action-button {
      width: 100%;
      font-size: 18px;
      padding: 16px;
      border-radius: 18px;
      font-weight: 950;
    }

    .action-button.ready {
      background: #2563eb;
    }

    .action-button.collected {
      background: #9ca3af;
    }

    @media (max-width: 600px) {
      .result-card {
        padding: 14px;
        border-radius: 20px;
      }

      .card-topline {
        align-items: center;
      }

      .attendee-no {
        font-size: 21px;
      }

      .person-main-name {
        font-size: 20px;
      }

      .info-grid,
      .checkin-grid {
        grid-template-columns: 1fr;
      }

      .mini-value {
        font-size: 15px;
      }
    }


    .group-card {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 22px;
      padding: 14px;
      margin-bottom: 18px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .group-header {
      background: linear-gradient(135deg, #eff6ff, #f8fafc);
      border: 1px solid #bfdbfe;
      border-radius: 18px;
      padding: 14px;
      margin-bottom: 14px;
    }

    .group-name {
      font-size: 19px;
      font-weight: 950;
      color: #111827;
      margin-bottom: 6px;
      line-height: 1.2;
    }

    .group-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      font-size: 13px;
      color: #475569;
      font-weight: 800;
    }

    .group-pill {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      padding: 6px 9px;
    }

    .group-count {
      background: #1e40af;
      color: white;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 950;
      display: inline-block;
      margin-top: 8px;
    }

    .result-count {
      font-weight: 950;
      color: #1e3a8a;
      margin-bottom: 12px;
      font-size: 15px;
    }

    .group-card .result-card {
      margin-bottom: 12px;
    }

    .group-card .result-card:last-child {
      margin-bottom: 0;
    }


    .group-ticket-summary {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .ticket-type-count {
      background: #334155;
      color: white;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 950;
    }

    .group-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 12px;
    }

    .group-select-button {
      background: #2563eb;
      padding: 10px 12px;
      font-size: 14px;
      border-radius: 12px;
    }

    .group-clear-button {
      background: #6b7280;
      padding: 10px 12px;
      font-size: 14px;
      border-radius: 12px;
    }

    .search-bulk-tools {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 12px;
    }

    .search-bulk-tools button {
      padding: 12px;
      font-size: 14px;
      border-radius: 14px;
    }

    .search-select-all {
      background: #2563eb;
    }

    .search-clear-all {
      background: #6b7280;
    }

    @media (max-width: 600px) {
      .group-actions,
      .search-bulk-tools {
        grid-template-columns: 1fr;
      }
    }


    .family-card {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 24px;
      margin-bottom: 16px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
      overflow: hidden;
      animation: cardIn 0.18s ease-out;
    }

    .family-card.expanded {
      border-color: #93c5fd;
    }

    .family-main {
      padding: 16px;
      cursor: pointer;
      background: linear-gradient(135deg, #eff6ff, #ffffff);
    }

    .family-top-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 12px;
    }

    .family-name {
      font-size: 21px;
      font-weight: 950;
      color: #111827;
      line-height: 1.2;
    }

    .family-subline {
      margin-top: 5px;
      font-size: 13px;
      font-weight: 900;
      color: #475569;
    }

    .family-expand {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      background: #1e40af;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 950;
      flex-shrink: 0;
    }

    .family-contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 12px;
    }

    .family-info-pill {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 9px 10px;
      font-size: 13px;
      font-weight: 850;
      color: #334155;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .family-email {
      grid-column: 1 / -1;
    }

    .family-progress-wrap {
      background: white;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px;
      margin-bottom: 12px;
    }

    .family-progress-label {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: 12px;
      font-weight: 950;
      color: #334155;
      margin-bottom: 8px;
    }

    .family-progress-bar {
      width: 100%;
      height: 9px;
      background: #e5e7eb;
      border-radius: 999px;
      overflow: hidden;
    }

    .family-progress-fill {
      height: 100%;
      background: #16a34a;
      border-radius: 999px;
      transition: width 0.2s ease;
    }

    .family-actions {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      padding: 12px 14px;
      border-top: 1px solid #e5e7eb;
      background: #f8fafc;
    }

    .family-view-button {
      background: #111827;
      padding: 10px 12px;
      font-size: 14px;
      border-radius: 12px;
    }

    .family-ticket-list {
      padding: 14px;
      border-top: 1px solid #e5e7eb;
      background: #ffffff;
    }

    .family-ticket-list .result-card {
      margin-bottom: 12px;
    }

    .family-ticket-list .result-card:last-child {
      margin-bottom: 0;
    }

    @media (max-width: 600px) {
      .family-main {
        padding: 14px;
      }

      .family-name {
        font-size: 20px;
      }

      .family-contact-grid,
      .family-actions {
        grid-template-columns: 1fr;
      }

      .family-progress-label {
        flex-direction: column;
        gap: 4px;
      }
    }

    .family-status-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
    .family-primary-meta { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; }
    .family-main-pill { background:rgba(255,255,255,0.92); border:1px solid #dbeafe; border-radius:999px; padding:7px 10px; font-size:12px; font-weight:900; color:#334155; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .ticket-type-count { display:inline-flex; align-items:center; background:#f8fafc; border:1px solid #e2e8f0; color:#334155; border-radius:999px; padding:7px 10px; font-size:12px; font-weight:900; margin:0 6px 6px 0; }
    .family-actions button { min-height:42px; }
    .family-selected-chip { background:#111827; color:white; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:950; white-space:nowrap; }
    @media (max-width:600px) { .family-contact-grid { display:none; } .family-actions { grid-template-columns:1fr 1fr; } .family-view-button { grid-column:1 / -1; } }


    /* Family summary card only version */
    .family-summary-card {
      border: 1px solid #dbeafe;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    }

    .family-summary-main {
      padding: 16px;
      background: #ffffff;
    }

    .family-summary-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 10px;
    }

    .family-summary-text {
      min-width: 0;
    }

    .family-clean-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 10px;
    }

    .family-clean-meta span {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 900;
      color: #334155;
    }

    .clean-ticket-summary {
      margin-bottom: 10px;
    }

    .clean-ticket-summary .ticket-type-count {
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1e3a8a;
      margin-bottom: 6px;
    }

    .family-clean-progress {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
    }

    .family-clean-progress .family-progress-bar {
      height: 8px;
      background: #e5e7eb;
    }

    .family-clean-progress-text {
      font-size: 12px;
      font-weight: 950;
      color: #475569;
      white-space: nowrap;
    }

    .family-summary-actions {
      grid-template-columns: repeat(2, 1fr);
      padding: 10px 14px;
      background: #f8fafc;
    }

    .family-summary-actions:has(.group-clear-button) {
      grid-template-columns: repeat(3, 1fr);
    }

    .family-summary-actions button {
      min-height: 44px;
      border-radius: 14px;
      font-size: 14px;
    }

    @media (max-width: 600px) {
      .family-summary-main {
        padding: 14px;
      }

      .family-clean-progress {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .family-clean-progress-text {
        white-space: normal;
      }

      .family-summary-actions,
      .family-summary-actions:has(.group-clear-button) {
        grid-template-columns: 1fr;
      }
    }


    /* Polished family card design system */
    .family-summary-card { border: 1px solid #dbeafe; border-radius: 24px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07); }
    .family-summary-card.expanded { border-color: #93c5fd; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.09); }
    .family-summary-main { padding: 16px; cursor: pointer; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
    .family-summary-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .family-summary-text { min-width: 0; flex: 1; }
    .family-name-row { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
    .family-name-icon, .chip-icon { width: 20px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 16px; }
    .family-name-block { min-width: 0; flex: 1; }
    .family-name { font-size: 19px; line-height: 1.2; font-weight: 950; letter-spacing: -0.2px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .family-other-label { margin-top: 2px; font-size: 13px; font-weight: 800; color: #64748b; }
    .family-subline { margin-top: 6px; font-size: 13px; font-weight: 850; color: #475569; }
    .family-quantity-summary { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
    .family-quantity-summary span { display: inline-flex; align-items: baseline; gap: 4px; padding: 7px 10px; border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0; color: #475569; font-size: 12px; font-weight: 900; }
    .family-quantity-summary strong { color: #0f172a; font-size: 16px; font-weight: 950; line-height: 1; }
    .family-expand { width: 36px; height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; font-size: 20px; font-weight: 950; line-height: 1; }
    .family-clean-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .family-clean-meta span, .family-chip, .ticket-type-count, .family-expanded-names, .family-selected-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 7px 10px; border-radius: 999px; font-size: 13px; font-weight: 850; line-height: 1; max-width: 100%; }
    .family-chip { background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .family-chip-wide { max-width: 100%; }
    .clean-ticket-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px 0; }
    .clean-ticket-summary .ticket-type-count, .ticket-type-count { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; margin: 0; }
    .family-clean-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: 2px; }
    .family-progress-bar { height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
    .family-progress-fill { height: 100%; background: #16a34a; border-radius: 999px; transition: width 0.2s ease; }
    .family-clean-progress-text { min-width: 34px; text-align: right; font-size: 12px; font-weight: 950; color: #475569; line-height: 1; }
    .family-summary-actions { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; padding: 12px 14px; background: #f8fafc; border-top: 1px solid #e5e7eb; }
    .family-btn, .family-summary-actions button, .group-select-button, .group-clear-button, .family-view-button { min-height: 44px; padding: 11px 14px; border-radius: 14px; font-size: 14px; font-weight: 900; line-height: 1; display: inline-flex; align-items: center; justify-content: center; text-align: center; margin: 0; }
    .family-btn.primary, .group-select-button { background: #2563eb; color: #ffffff; }
    .family-btn.secondary, .family-view-button { background: #111827; color: #ffffff; }
    .family-btn.ghost, .group-clear-button { background: #64748b; color: #ffffff; }
    .family-selected-chip { min-height: 32px; justify-content: center; background: #0f172a; color: #ffffff; white-space: nowrap; font-size: 12px; padding: 7px 10px; }
    .family-ticket-list { padding: 12px 14px 14px; background: #ffffff; border-top: 1px solid #e5e7eb; }
    .family-expanded-names { width: 100%; border-radius: 16px; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; justify-content: flex-start; line-height: 1.35; margin-bottom: 12px; }
    .family-ticket-list .result-card { border-radius: 18px; box-shadow: none; border-color: #e5e7eb; }
    @media (max-width: 600px) {
      .family-summary-main { padding: 14px; }
      .family-name { font-size: 18px; white-space: normal; }
      .family-clean-meta { gap: 7px; }
      .family-chip-wide { max-width: 100%; }
      .family-summary-actions { grid-template-columns: 1fr 1fr; }
      .family-summary-actions .family-selected-chip { grid-column: 1 / -1; }
      .family-summary-actions:has(.group-clear-button) { grid-template-columns: 1fr 1fr; }
      .group-clear-button { grid-column: 1 / -1; }
      .family-ticket-list { padding: 10px; }
    }


    /* Single family selection highlight */
    .family-summary-card.selected-family {
      border-color: #2563eb;
      box-shadow: 0 16px 36px rgba(37, 99, 235, 0.22);
      background: #eff6ff;
    }

    .family-summary-card.selected-family .family-summary-main {
      background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%);
    }

    .family-summary-card.selected-family .family-summary-actions {
      background: #dbeafe;
      border-top-color: #93c5fd;
    }

    .family-summary-card.selected-family .family-expand {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    .family-summary-card.selected-family .family-selected-chip {
      background: #1d4ed8;
      color: #ffffff;
    }


    /* Cleaner family action buttons */
    .family-summary-actions.clean-family-actions {
      grid-template-columns: 1fr 1fr;
    }

    .family-summary-actions.clean-family-actions.has-selection {
      grid-template-columns: 1fr 1fr auto;
    }

    .family-btn.disabled-family {
      background: #e5e7eb !important;
      color: #64748b !important;
      cursor: not-allowed;
      border: 1px solid #cbd5e1;
    }

    .family-summary-card.all-collected-family {
      border-color: #e2e8f0;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    }

    .family-summary-card.all-collected-family .family-summary-main {
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    }

    .family-summary-card.all-collected-family .family-expand {
      background: #f8fafc;
      color: #334155;
      border-color: #cbd5e1;
    }

    @media (max-width: 600px) {
      .family-summary-actions.clean-family-actions,
      .family-summary-actions.clean-family-actions.has-selection {
        grid-template-columns: 1fr;
      }

      .family-summary-actions.clean-family-actions .family-selected-chip {
        grid-column: auto;
      }
    }



    /* Premium iCloud inspired login screen */
    .login-shell {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 20% 15%, rgba(96, 165, 250, 0.28), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(45, 212, 191, 0.22), transparent 26%),
        radial-gradient(circle at 50% 88%, rgba(191, 219, 254, 0.55), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, #eef5ff 50%, #eaf1fb 100%);
    }

    .login-orb {
      position: absolute;
      border-radius: 999px;
      filter: blur(1px);
      opacity: 0.78;
      animation: floatOrb 7s ease-in-out infinite;
      pointer-events: none;
    }

    .login-orb.one {
      width: 160px;
      height: 160px;
      left: -50px;
      top: 80px;
      background: rgba(96, 165, 250, 0.18);
    }

    .login-orb.two {
      width: 210px;
      height: 210px;
      right: -85px;
      bottom: 115px;
      background: rgba(34, 197, 94, 0.13);
      animation-delay: 1.2s;
    }

    .login-card-premium {
      width: 100%;
      max-width: 430px;
      position: relative;
      z-index: 2;
      border-radius: 34px;
      padding: 22px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
      backdrop-filter: blur(22px);
    }

    .login-hero {
      text-align: center;
      padding: 10px 8px 18px;
    }

    .wotter-hello {
      width: 150px;
      height: 150px;
      margin: 0 auto 10px;
      display: block;
      filter: drop-shadow(0 14px 22px rgba(15, 23, 42, 0.16));
    }

    .wotter-arm {
      transform-origin: 108px 68px;
      animation: wotterWave 1.15s ease-in-out infinite;
    }

    .login-title-premium {
      font-size: 30px;
      line-height: 1.08;
      font-weight: 950;
      color: #0f172a;
      margin: 0 0 8px;
      letter-spacing: -0.8px;
    }

    .login-subtitle-premium {
      margin: 0 auto;
      max-width: 300px;
      color: #475569;
      font-size: 15px;
      line-height: 1.45;
      font-weight: 700;
    }

    .login-form-premium {
      background: rgba(255, 255, 255, 0.74);
      border: 1px solid rgba(203, 213, 225, 0.8);
      border-radius: 26px;
      padding: 16px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
    }

    .premium-field {
      margin-bottom: 12px;
    }

    .premium-label {
      display: block;
      font-size: 12px;
      color: #64748b;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 0 0 7px 2px;
    }

    .premium-input-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(248, 250, 252, 0.9);
      border: 1px solid #dbeafe;
      border-radius: 18px;
      padding: 0 12px;
      transition: 0.16s ease;
    }

    .premium-input-wrap:focus-within {
      border-color: #2563eb;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
      background: #ffffff;
    }

    .premium-input-icon {
      font-size: 18px;
      width: 24px;
      text-align: center;
      opacity: 0.9;
    }

    .premium-input-wrap input {
      border: 0;
      background: transparent;
      padding: 15px 0;
      box-shadow: none;
      font-weight: 800;
    }

    .premium-input-wrap input:focus {
      box-shadow: none;
      border-color: transparent;
    }

    .premium-helper {
      font-size: 13px;
      color: #64748b;
      font-weight: 750;
      margin: 4px 2px 14px;
      line-height: 1.35;
    }

    .premium-login-button {
      width: 100%;
      min-height: 56px;
      border-radius: 18px;
      font-size: 17px;
      font-weight: 950;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28);
    }

    .premium-login-button:hover {
      background: linear-gradient(135deg, #1d4ed8, #1e40af);
    }

    .login-footer-note {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px 12px;
      text-align: center;
      margin-top: 14px;
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
    }
    .flowlab-signature {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 28px;
      padding: 5px 10px;
      border: 1px solid var(--org-primary-border, #bfdbfe);
      border-radius: 999px;
      background: rgba(255,255,255,.82);
      color: #475569;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: .02em;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 6px 18px rgba(15,23,42,.07);
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .flowlab-signature:hover {
      transform: translateY(-1px);
      border-color: var(--blue, #2563eb);
      box-shadow: 0 10px 24px rgba(15,23,42,.12);
    }
    .flowlab-signature::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--blue, #2563eb), var(--blue-dark, #1d4ed8));
      box-shadow: 0 0 0 3px rgba(var(--org-primary-rgb, 37,99,235),.12);
    }
    .flowlab-signature strong {
      color: #0f172a;
      font-weight: 950;
    }
    .bottom-menu-flowlab {
      margin: 14px auto 2px;
      width: max-content;
      max-width: 100%;
    }
    #mainApp .main-header-flowlab {
      position: absolute;
      right: 14px;
      bottom: 12px;
      z-index: 3;
      min-height: 26px;
      padding: 4px 9px;
      border-color: rgba(255,255,255,.48);
      background: rgba(255,255,255,.94);
      box-shadow: 0 8px 20px rgba(0,0,0,.16);
    }
    @media (min-width: 980px) {
      #mainApp .header {
        padding-right: 132px !important;
      }
      #mainApp .main-header-flowlab {
        right: 12px;
        bottom: 10px;
        font-size: 10px;
      }
    }
    @media (max-width: 600px) {
      #mainApp .main-header-flowlab {
        right: 12px;
        top: 12px;
        bottom: auto;
        font-size: 10px;
      }
    }

    @keyframes wotterWave {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-13deg); }
      55% { transform: rotate(10deg); }
      75% { transform: rotate(-7deg); }
    }

    @keyframes floatOrb {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-18px); }
    }

    @media (max-width: 600px) {
      .login-shell {
        padding: 12px;
        align-items: flex-start;
        padding-top: 34px;
      }

      .login-card-premium {
        border-radius: 30px;
        padding: 18px;
      }

      .wotter-hello {
        width: 132px;
        height: 132px;
      }

      .login-title-premium {
        font-size: 27px;
      }
    }


    /* Desktop responsive premium login layout */
    @media (min-width: 760px) {
      .login-shell {
        padding: 48px;
        align-items: center;
      }

      .login-card-premium {
        max-width: 980px;
        min-height: 560px;
        display: grid;
        grid-template-columns: 1.08fr 0.92fr;
        align-items: center;
        gap: 24px;
        padding: 34px;
        border-radius: 38px;
      }

      .login-hero {
        text-align: left;
        padding: 34px 28px;
        min-height: 488px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 30px;
        background:
          radial-gradient(circle at 28% 18%, rgba(96,165,250,0.22), transparent 30%),
          linear-gradient(145deg, rgba(255,255,255,0.72), rgba(239,246,255,0.58));
        border: 1px solid rgba(219, 234, 254, 0.9);
      }

      .wotter-hello {
        width: 210px;
        height: 210px;
        margin: 0 0 18px;
      }

      .login-title-premium {
        font-size: 46px;
        max-width: 420px;
      }

      .login-subtitle-premium {
        margin: 0;
        max-width: 380px;
        font-size: 17px;
      }

      .login-form-premium {
        padding: 24px;
        border-radius: 30px;
        background: rgba(255,255,255,0.82);
        box-shadow:
          inset 0 1px 0 rgba(255,255,255,0.95),
          0 16px 42px rgba(15, 23, 42, 0.08);
      }

      .premium-field {
        margin-bottom: 16px;
      }

      .premium-input-wrap {
        border-radius: 20px;
      }

      .premium-input-wrap input {
        padding: 17px 0;
        font-size: 17px;
      }

      .premium-login-button {
        min-height: 60px;
        font-size: 18px;
        border-radius: 20px;
      }

      .login-footer-note {
        grid-column: 1 / -1;
        margin-top: 0;
        padding-top: 2px;
      }
    }

    @media (min-width: 1180px) {
      .login-card-premium {
        max-width: 1080px;
      }

      .login-title-premium {
        font-size: 50px;
      }
    }


    /* Actual Wotter photo with premium wave animation */
    .wotter-photo-stage {
      position: relative;
      width: 168px;
      height: 168px;
      margin: 0 auto 14px;
      border-radius: 38px;
      padding: 7px;
      background: rgba(255,255,255,0.78);
      border: 1px solid rgba(255,255,255,0.92);
      box-shadow: 0 18px 38px rgba(15,23,42,0.16);
      overflow: visible;
      animation: wotterFloatPhoto 4.2s ease-in-out infinite;
    }

    .wotter-photo {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center 26%;
      border-radius: 31px;
    }

    .wotter-wave-hand {
      position: absolute;
      right: -10px;
      top: -12px;
      width: 48px;
      height: 48px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(219,234,254,0.95);
      box-shadow: 0 12px 28px rgba(15,23,42,0.14);
      transform-origin: 70% 75%;
      animation: wotterWaveHand 1.35s ease-in-out infinite;
      z-index: 2;
    }

    .wotter-speech {
      position: absolute;
      left: -8px;
      bottom: -12px;
      background: rgba(15,23,42,0.92);
      color: white;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 950;
      box-shadow: 0 12px 26px rgba(15,23,42,0.16);
      animation: speechPop 2.4s ease-in-out infinite;
      white-space: nowrap;
      z-index: 2;
    }

    @keyframes wotterWaveHand {
      0%, 100% { transform: rotate(0deg) scale(1); }
      15% { transform: rotate(18deg) scale(1.04); }
      30% { transform: rotate(-12deg) scale(1.04); }
      45% { transform: rotate(16deg) scale(1.04); }
      60% { transform: rotate(-7deg) scale(1.02); }
      75% { transform: rotate(5deg) scale(1.01); }
    }

    @keyframes wotterFloatPhoto {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-7px); }
    }

    @keyframes speechPop {
      0%, 100% { transform: translateY(0); opacity: 0.94; }
      50% { transform: translateY(-3px); opacity: 1; }
    }

    @media (min-width: 760px) {
      .wotter-photo-stage {
        width: 290px;
        height: 290px;
        margin: 0 0 22px;
        border-radius: 44px;
        padding: 8px;
      }

      .wotter-photo {
        border-radius: 36px;
      }

      .wotter-wave-hand {
        width: 62px;
        height: 62px;
        font-size: 36px;
        right: -16px;
        top: -16px;
      }

      .wotter-speech {
        font-size: 14px;
        padding: 10px 14px;
        left: 12px;
        bottom: -14px;
      }
    }



    /* Apple iCloud inspired floating depth upgrade */
    .login-shell {
      isolation: isolate;
      background:
        radial-gradient(circle at 18% 18%, rgba(147, 197, 253, 0.45), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(186, 230, 253, 0.50), transparent 30%),
        radial-gradient(circle at 50% 92%, rgba(219, 234, 254, 0.70), transparent 34%),
        linear-gradient(135deg, #f8fbff 0%, #eef6ff 48%, #e9f1fb 100%);
    }

    .login-shell::before,
    .login-shell::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 0;
      border-radius: 999px;
      filter: blur(2px);
    }

    .login-shell::before {
      width: 520px;
      height: 520px;
      left: 8%;
      top: 9%;
      background: radial-gradient(circle, rgba(255,255,255,0.72), rgba(191,219,254,0.22), transparent 68%);
      animation: softDriftOne 10s ease-in-out infinite;
    }

    .login-shell::after {
      width: 620px;
      height: 620px;
      right: 6%;
      bottom: 4%;
      background: radial-gradient(circle, rgba(224,242,254,0.66), rgba(37,99,235,0.10), transparent 70%);
      animation: softDriftTwo 12s ease-in-out infinite;
    }

    .login-card-premium {
      overflow: visible;
      background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.58));
      border: 1px solid rgba(255,255,255,0.92);
      box-shadow:
        0 34px 90px rgba(15, 23, 42, 0.16),
        0 14px 38px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.92);
    }

    .login-card-premium::before,
    .login-card-premium::after {
      content: "";
      position: absolute;
      pointer-events: none;
      border-radius: 32px;
      z-index: -1;
    }

    .login-card-premium::before {
      inset: 18px -18px -18px 18px;
      background: rgba(255,255,255,0.36);
      border: 1px solid rgba(255,255,255,0.58);
      filter: blur(0.2px);
    }

    .login-card-premium::after {
      inset: 36px -36px -36px 36px;
      background: rgba(219,234,254,0.28);
      border: 1px solid rgba(255,255,255,0.40);
    }

    .login-hero {
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.88),
        0 18px 46px rgba(15,23,42,0.08);
    }

    .login-hero::before,
    .login-hero::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      pointer-events: none;
    }

    .login-hero::before {
      width: 190px;
      height: 190px;
      right: -60px;
      top: -70px;
      background: rgba(96,165,250,0.16);
    }

    .login-hero::after {
      width: 150px;
      height: 150px;
      left: -55px;
      bottom: -55px;
      background: rgba(255,255,255,0.55);
    }

    .wotter-photo-stage {
      z-index: 1;
      box-shadow:
        0 22px 52px rgba(15,23,42,0.18),
        0 8px 18px rgba(37,99,235,0.10),
        inset 0 1px 0 rgba(255,255,255,0.90);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .wotter-photo-stage:hover {
      transform: translateY(-5px) scale(1.01);
      box-shadow:
        0 30px 70px rgba(15,23,42,0.20),
        0 12px 24px rgba(37,99,235,0.12),
        inset 0 1px 0 rgba(255,255,255,0.95);
    }

    .login-form-premium {
      position: relative;
      z-index: 1;
      box-shadow:
        0 20px 55px rgba(15,23,42,0.09),
        inset 0 1px 0 rgba(255,255,255,0.96);
    }

    .premium-input-wrap {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
    }

    .premium-login-button {
      position: relative;
      overflow: hidden;
    }

    .premium-login-button::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.28) 36%, transparent 62%);
      transform: translateX(-120%);
      animation: buttonSheen 4.5s ease-in-out infinite;
    }

    @keyframes softDriftOne {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
      50% { transform: translate3d(18px, -12px, 0) scale(1.03); }
    }

    @keyframes softDriftTwo {
      0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
      50% { transform: translate3d(-22px, 14px, 0) scale(1.04); }
    }

    @keyframes buttonSheen {
      0%, 65% { transform: translateX(-120%); }
      100% { transform: translateX(120%); }
    }

    @media (min-width: 760px) {
      .login-shell {
        min-height: 100vh;
      }

      .login-card-premium {
        transform: perspective(1200px) rotateX(0deg) rotateY(0deg);
      }
    }

    @media (max-width: 759px) {
      .login-card-premium::before,
      .login-card-premium::after {
        display: none;
      }

      .login-shell::before,
      .login-shell::after {
        opacity: 0.6;
      }
    }


    /* Final login centre and Face ID unlock */
    html, body {
      min-height: 100%;
    }

    body.login-mode {
      overflow: hidden;
    }

    #loginScreen.login-shell {
      position: fixed;
      inset: 0;
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      overflow: hidden;
      z-index: 100;
    }

    #loginScreen.login-shell.unlocking .login-card-premium {
      animation: loginCardUnlock 0.72s ease forwards;
    }

    .login-card-premium {
      margin: 0 auto;
      animation: loginCardArrive 0.42s ease both;
    }

    .face-unlock-overlay {
      position: fixed;
      inset: 0;
      z-index: 20000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(248, 251, 255, 0.62);
      backdrop-filter: blur(18px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.18s ease;
    }

    .face-unlock-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .face-unlock-card {
      width: 148px;
      height: 148px;
      border-radius: 38px;
      background: rgba(255,255,255,0.88);
      border: 1px solid rgba(255,255,255,0.95);
      box-shadow: 0 28px 80px rgba(15, 23, 42, 0.20);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      transform: scale(0.94);
      transition: transform 0.22s ease;
    }

    .face-unlock-overlay.show .face-unlock-card {
      transform: scale(1);
    }

    .face-frame {
      width: 72px;
      height: 72px;
      border-radius: 24px;
      border: 3px solid #2563eb;
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #eff6ff, #ffffff);
    }

    .face-frame::before {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      top: 13px;
      height: 3px;
      border-radius: 999px;
      background: #1d4ed8;
      box-shadow: 0 24px 0 #1d4ed8;
      opacity: 0.85;
    }

    .face-frame::after {
      content: "";
      position: absolute;
      left: 15px;
      right: 15px;
      bottom: 13px;
      height: 12px;
      border-bottom: 3px solid #1d4ed8;
      border-radius: 0 0 999px 999px;
      transform: scaleX(0.4);
      opacity: 0.9;
      transition: transform 0.25s ease;
    }

    .scan-line {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 8px;
      height: 4px;
      border-radius: 999px;
      background: #16a34a;
      box-shadow: 0 0 18px rgba(22, 163, 74, 0.55);
      animation: faceScan 0.76s ease forwards;
    }

    .face-unlock-overlay.success .face-frame {
      border-color: #16a34a;
    }

    .face-unlock-overlay.success .face-frame::after {
      transform: scaleX(1);
      border-bottom-color: #16a34a;
    }

    .face-unlock-text {
      font-size: 13px;
      font-weight: 950;
      color: #0f172a;
      letter-spacing: 0.01em;
    }

    .premium-login-button.unlocking {
      opacity: 0.88;
      pointer-events: none;
    }

    @keyframes loginCardArrive {
      from { opacity: 0; transform: translateY(18px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes loginCardUnlock {
      0% { opacity: 1; transform: scale(1); }
      100% { opacity: 0; transform: scale(0.985); }
    }

    @keyframes faceScan {
      0% { transform: translateY(0); opacity: 0; }
      12% { opacity: 1; }
      100% { transform: translateY(52px); opacity: 1; }
    }

    @media (max-width: 600px) {
      #loginScreen.login-shell {
        padding: 14px;
      }

      .face-unlock-card {
        width: 138px;
        height: 138px;
      }
    }

    /* Stronger ticket type colours */
    .ticket-type-count, .ticket-name-pill {
      border-width: 1px;
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
    }

    .ticket-type-blue { background: #dbeafe !important; border-color: #60a5fa !important; color: #1e3a8a !important; }
    .ticket-type-green { background: #dcfce7 !important; border-color: #4ade80 !important; color: #166534 !important; }
    .ticket-type-purple { background: #f3e8ff !important; border-color: #c084fc !important; color: #6b21a8 !important; }
    .ticket-type-orange { background: #ffedd5 !important; border-color: #fb923c !important; color: #9a3412 !important; }
    .ticket-type-pink { background: #fce7f3 !important; border-color: #f472b6 !important; color: #9d174d !important; }
    .ticket-type-teal { background: #ccfbf1 !important; border-color: #2dd4bf !important; color: #115e59 !important; }


    /* Clean expandable ticket type progress under main stats */
    .stat-card {
      cursor: pointer;
      user-select: none;
    }

    .stat-card.active-stat {
      background: #eff6ff;
      border-color: #93c5fd;
      box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
    }

    .overall-ticket-type-summary {
      margin-top: 12px;
      display: none;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
    }

    .overall-ticket-type-summary.open {
      display: block;
    }

    .ticket-breakdown-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 13px 14px;
      background: #f8fafc;
      border-bottom: 1px solid #e2e8f0;
      font-size: 13px;
      font-weight: 950;
      color: #334155;
    }

    .ticket-breakdown-title {
      color: #0f172a;
    }

    .ticket-breakdown-close {
      width: 28px;
      height: 28px;
      min-width: 28px;
      min-height: 28px;
      padding: 0;
      border-radius: 999px;
      background: #e2e8f0 !important;
      color: #334155 !important;
      box-shadow: none !important;
      font-size: 16px;
      line-height: 1;
    }

    .ticket-breakdown-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      padding: 12px 14px;
      border-bottom: 1px solid #f1f5f9;
      align-items: center;
    }

    .ticket-breakdown-row:last-child {
      border-bottom: 0;
    }

    .ticket-breakdown-row-compact {
      padding: 14px 0;
      border-bottom: 1px solid #eef2f7;
    }

    .ticket-breakdown-row-compact:last-child {
      border-bottom: 0;
    }

    .ticket-breakdown-main {
      min-width: 0;
    }

    .ticket-breakdown-name {
      font-size: 15px;
      font-weight: 950;
      color: #0f172a;
      line-height: 1.25;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .ticket-breakdown-sub {
      margin-top: 5px;
      font-size: 12px;
      font-weight: 900;
      color: #64748b;
      line-height: 1.25;
    }

    .ticket-breakdown-meta {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-width: 78px;
      padding: 9px 12px;
      border-radius: 18px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1e3a8a;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.10);
      white-space: nowrap;
    }

    .ticket-breakdown-count {
      font-size: 22px;
      font-weight: 950;
      line-height: 1;
      letter-spacing: -0.4px;
    }

    .ticket-breakdown-count-label {
      margin-top: 4px;
      font-size: 11px;
      font-weight: 950;
      color: #475569;
      line-height: 1;
    }

    .ticket-breakdown-bar {
      grid-column: 1 / -1;
      height: 10px;
      background: #e5e7eb;
      border-radius: 999px;
      overflow: hidden;
    }

    .ticket-breakdown-fill {
      height: 100%;
      background: #16a34a;
      border-radius: 999px;
      transition: width 0.2s ease;
    }

    .ticket-breakdown-row-compact .ticket-breakdown-bar {
      height: 12px;
      background: #e2e8f0;
    }

    .ticket-breakdown-row-compact .ticket-breakdown-fill {
      background: #2563eb;
    }

    @media (max-width: 600px) {
      .overall-ticket-type-summary {
        margin-top: 10px;
        border-radius: 16px;
      }

      .ticket-breakdown-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
      }

      .ticket-breakdown-row-compact {
        padding: 16px 0;
      }

      .ticket-breakdown-name {
        font-size: 15px;
      }

      .ticket-breakdown-meta {
        min-width: 72px;
        padding: 8px 10px;
      }

      .ticket-breakdown-count {
        font-size: 21px;
      }
    }

    /* Volunteer guidance for clickable stats and search */
    .stats-guide {
      margin-top: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 12px;
      border-radius: 16px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      color: #1e3a8a;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.35;
    }

    .stats-guide-icon {
      width: 24px;
      height: 24px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #2563eb;
      color: white;
      font-size: 13px;
      flex-shrink: 0;
    }

    .stat-card div:last-child::after {
      content: "Tap for details";
      display: block;
      margin-top: 5px;
      font-size: 11px;
      font-weight: 900;
      color: #64748b;
    }

    .search-guide {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px 13px;
      margin: 0 0 12px;
      border-radius: 18px;
      background: #fffbeb;
      border: 1px solid #fde68a;
      color: #92400e;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.4;
    }

    .search-guide-icon {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f59e0b;
      color: white;
      flex-shrink: 0;
      font-size: 14px;
    }

    @media (max-width: 600px) {
      .stats-guide, .search-guide {
        font-size: 13px;
        border-radius: 14px;
      }

      .stat-card div:last-child::after {
        font-size: 10px;
      }
    }


    .ticket-name-pill {
      font-weight: 950;
    }


    /* Founder Mode, hidden stats, haptic feedback and end of day easter */
    .creator-overlay {
      position: fixed;
      inset: 0;
      z-index: 30000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, 0.48);
      backdrop-filter: blur(16px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
    }

    .creator-overlay.show {
      opacity: 1;
      pointer-events: auto;
    }

    .creator-card {
      width: min(360px, calc(100% - 36px));
      border-radius: 34px;
      padding: 28px 24px;
      text-align: center;
      background:
        radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.95), transparent 36%),
        linear-gradient(145deg, rgba(255,255,255,0.94), rgba(239,246,255,0.88));
      border: 1px solid rgba(255,255,255,0.95);
      box-shadow: 0 32px 90px rgba(15, 23, 42, 0.28);
      animation: creatorPop 0.32s ease both;
      position: relative;
      overflow: hidden;
    }

    .creator-card::before {
      content: "";
      position: absolute;
      inset: -40%;
      background: conic-gradient(from 180deg, transparent, rgba(37,99,235,0.16), transparent, rgba(22,163,74,0.16), transparent);
      animation: founderGlow 1.8s linear infinite;
    }

    .creator-card-inner {
      position: relative;
      z-index: 1;
    }

    .creator-crown {
      width: 72px;
      height: 72px;
      margin: 0 auto 14px;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0f172a;
      color: white;
      font-size: 38px;
      box-shadow: 0 18px 44px rgba(15,23,42,0.22);
      animation: founderFloat 1.6s ease-in-out infinite;
    }

    .creator-title {
      font-size: 24px;
      line-height: 1.1;
      font-weight: 950;
      color: #0f172a;
      letter-spacing: -0.4px;
      margin-bottom: 8px;
    }

    .creator-sub {
      font-size: 15px;
      line-height: 1.35;
      font-weight: 850;
      color: #475569;
    }

    .creator-mini {
      margin-top: 16px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 999px;
      background: #eff6ff;
      color: #1e3a8a;
      border: 1px solid #bfdbfe;
      font-size: 12px;
      font-weight: 950;
    }

    .operator-stats-panel {
      padding: 10px 2px 12px;
    }

    .apple-stats-strip {
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,252,0.94));
      border: 1px solid rgba(203, 213, 225, 0.9);
      border-radius: 26px;
      padding: 14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 12px 28px rgba(15,23,42,0.07);
    }

    .apple-stats-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

    .apple-stats-title {
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #64748b;
    }

    .apple-crowd-pill {
      border-radius: 999px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 950;
      background: #eff6ff;
      color: #1e40af;
      border: 1px solid #bfdbfe;
      white-space: nowrap;
    }

    .apple-stats-main {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 10px;
      align-items: stretch;
      margin-bottom: 10px;
    }

    .apple-stat-hero,
    .apple-stat-mini {
      background: rgba(255,255,255,0.86);
      border: 1px solid #e2e8f0;
      border-radius: 22px;
      padding: 14px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
    }

    .apple-stat-hero {
      min-height: 92px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(145deg, #eff6ff, #ffffff);
      border-color: #bfdbfe;
    }

    .apple-stat-label {
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: #64748b;
      margin-bottom: 6px;
    }

    .apple-stat-value {
      font-size: 34px;
      font-weight: 950;
      color: #0f172a;
      line-height: 1;
      letter-spacing: -0.9px;
    }

    .apple-stat-sub {
      margin-top: 7px;
      color: #475569;
      font-size: 12px;
      font-weight: 850;
    }

    .apple-stat-stack {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .apple-stat-mini .apple-stat-value {
      font-size: 22px;
      letter-spacing: -0.4px;
      line-height: 1.12;
    }

    .apple-progress-wrap {
      background: #e5e7eb;
      height: 9px;
      border-radius: 999px;
      overflow: hidden;
      margin-top: 10px;
    }

    .apple-progress-fill {
      height: 100%;
      width: 0%;
      border-radius: 999px;
      background: linear-gradient(90deg, #2563eb, #16a34a);
      transition: width 0.22s ease;
    }

    .apple-stats-footer {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .operator-stat-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      padding: 12px;
    }

    .operator-stat-label {
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #64748b;
      margin-bottom: 5px;
    }

    .operator-stat-value {
      font-size: 20px;
      font-weight: 950;
      color: #0f172a;
      line-height: 1.1;
    }

    .founder-panel {
      display: none;
      margin: 0 0 10px;
      border: 1px solid #bfdbfe;
      border-radius: 22px;
      padding: 14px;
      background: linear-gradient(135deg, #eff6ff, #ffffff);
    }

    .founder-panel.show {
      display: block;
    }

    .founder-panel-title {
      font-size: 15px;
      font-weight: 950;
      color: #1e3a8a;
      margin-bottom: 6px;
    }

    .founder-panel-text {
      font-size: 13px;
      font-weight: 800;
      color: #475569;
      line-height: 1.35;
    }

    .end-day-banner {
      position: fixed;
      left: 50%;
      bottom: 78px;
      transform: translateX(-50%) translateY(20px);
      z-index: 9997;
      width: min(420px, calc(100% - 28px));
      border-radius: 999px;
      padding: 12px 16px;
      background: rgba(15,23,42,0.92);
      color: white;
      box-shadow: 0 18px 44px rgba(15,23,42,0.28);
      font-size: 14px;
      font-weight: 900;
      text-align: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease, transform 0.22s ease;
    }

    .end-day-banner.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    body.end-day-mode .header {
      background: linear-gradient(135deg, #111827, #312e81);
    }

    @keyframes creatorPop {
      from { opacity: 0; transform: translateY(12px) scale(0.94); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes founderFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }

    @keyframes founderGlow {
      to { transform: rotate(360deg); }
    }

    @media (max-width: 600px) {
      .apple-stats-strip { padding: 12px; border-radius: 24px; }
      .apple-stats-main { grid-template-columns: 1fr; }
      .apple-stats-footer { grid-template-columns: 1fr; }
      .apple-stat-value { font-size: 32px; }
      .apple-stat-mini .apple-stat-value { font-size: 21px; }
      .operator-stat-value { font-size: 18px; }
      .end-day-banner { bottom: 74px; }
    }

  
/* Premium Search Panel */
.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 6px 4px 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  transition: all 0.18s ease;
}
.search-input-wrap:focus-within {
  border-color: #2563eb;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.12),
    0 10px 24px rgba(37, 99, 235, 0.12);
}
.search-input-wrap input {
  border: none !important;
  background: transparent !important;
  padding: 14px 44px 14px 0 !important;
  font-weight: 800;
}
.search-input-wrap input::placeholder {
  color: #94a3b8;
  font-weight: 700;
}
.clear-search-btn {
  background: #f1f5f9 !important;
  color: #475569 !important;
}
.search-row button {
  border-radius: 999px !important;
  padding: 14px 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.25);
}
.search-row button:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}

/* Premium Family Card */
.family-summary-card {
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
  transition: all 0.18s ease;
}
.family-summary-card:hover {
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
}
.family-summary-main {
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.family-name {
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.3px;
  color: #0f172a;
}
.family-clean-meta span {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
}
.ticket-type-count {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-weight: 900;
}
.family-progress-bar {
  height: 8px;
  background: #e5e7eb;
}
.family-progress-fill {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}
.family-summary-actions {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
.family-btn {
  border-radius: 14px;
  font-weight: 900;
}
.family-summary-card.selected-family {
  border-color: #2563eb;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.20);
}


/* Search clear button */
.clear-search-btn {
  position: absolute;
  right: 10px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none !important;
  z-index: 2;
}
.clear-search-btn:hover {
  background: #cbd5e1 !important;
}
.clear-search-btn:active {
  transform: scale(0.92);
}


/* Last sync inside stats */
.last-sync {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
  text-align: right;
  margin-top: 2px;
  opacity: 0.9;
}

/* Subtle premium stats animation */
.stat-number.stat-bump,
.apple-stat-value.stat-bump,
#totalTickets.stat-bump,
#attendedTickets.stat-bump,
#remainingTickets.stat-bump,
#completionPercent.stat-bump {
  animation: statBump 0.34s ease-out;
}

@keyframes statBump {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.055); filter: brightness(1.08); }
  100% { transform: scale(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .stat-number.stat-bump,
  .apple-stat-value.stat-bump,
  #totalTickets.stat-bump,
  #attendedTickets.stat-bump,
  #remainingTickets.stat-bump,
  #completionPercent.stat-bump {
    animation: none;
  }
}


/* Speed polish: collected tickets fade */
.result-card.attended,
.result-card.collected,
.result-card:has(.status-pill.collected) {
  opacity: 0.68;
  filter: saturate(0.86);
  transition: opacity 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

.result-card.attended:hover,
.result-card.collected:hover,
.result-card:has(.status-pill.collected):hover {
  opacity: 0.9;
  filter: saturate(0.96);
}

/* Speed polish: success flash */
.speed-success-flash {
  animation: speedSuccessFlash 0.38s ease-out;
}

@keyframes speedSuccessFlash {
  0% { transform: scale(1); }
  40% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .speed-success-flash {
    animation: none;
  }
}


/* Auto search hint */
.auto-search-hint {
  font-size: 12px;
  font-weight: 750;
  color: #64748b;
  margin-top: 6px;
  text-align: right;
}


/* Final polish trial */
.auto-search-hint {
  display: none !important;
}

.ready-next-hint {
  font-size: 12px;
  font-weight: 850;
  color: #16a34a;
  text-align: right;
  margin-top: 6px;
  min-height: 16px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.ready-next-hint.show {
  opacity: 1;
  transform: translateY(0);
}

.hide-collected-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 8px 0 4px;
}

.hide-collected-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e40af;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  user-select: none;
}

.hide-collected-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
}

body.hide-collected-on .result-card.attended,
body.hide-collected-on .result-card.collected,
body.hide-collected-on .result-card:has(.status-pill.collected) {
  display: none !important;
}

.result-card.attended,
.result-card.collected,
.result-card:has(.status-pill.collected) {
  max-height: 320px;
}

body.compact-collected-on .result-card.attended,
body.compact-collected-on .result-card.collected,
body.compact-collected-on .result-card:has(.status-pill.collected) {
  max-height: 118px;
  overflow: hidden;
}

.duplicate-warning {
  display: none;
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  font-size: 13px;
  font-weight: 900;
}

.duplicate-warning.show {
  display: block;
}


/* Dashboard style trial based on soft card UI */
:root {
  --dash-bg-a: #f7fbff;
  --dash-bg-b: #eef4fb;
  --dash-card: rgba(255,255,255,0.92);
  --dash-ink: #111827;
  --dash-muted: #667085;
  --dash-line: rgba(226,232,240,0.95);
  --dash-blue: #1f6feb;
  --dash-blue-dark: #155bd6;
  --dash-green: #16a34a;
  --dash-shadow: 0 22px 60px rgba(15, 23, 42, 0.09);
  --dash-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.06);
}

html {
  background: linear-gradient(180deg, var(--dash-bg-a), var(--dash-bg-b));
}

body {
  background:
    radial-gradient(circle at 12% 6%, rgba(191, 219, 254, 0.78), transparent 22%),
    radial-gradient(circle at 88% 9%, rgba(204, 251, 241, 0.64), transparent 26%),
    linear-gradient(180deg, var(--dash-bg-a), var(--dash-bg-b)) !important;
  color: var(--dash-ink);
}

.app {
  max-width: 1120px !important;
  padding: 24px !important;
}

/* Main hero */
.header {
  position: relative;
  overflow: hidden;
  border-radius: 28px !important;
  padding: 30px !important;
  min-height: 230px;
  background: var(--dash-card) !important;
  color: var(--dash-ink) !important;
  border: 1px solid rgba(255,255,255,0.86) !important;
  box-shadow: var(--dash-shadow) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header::before {
  content: "PUNGGOL WATERFRONT RN";
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 8px 12px;
  background: #eef2f7;
  color: #344054;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.header::after {
  content: "";
  position: absolute;
  right: -64px;
  bottom: -76px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.92), rgba(186,230,253,0.62), rgba(209,250,229,0.52));
  filter: blur(1px);
  z-index: 0;
}

.header h1,
.header p {
  position: relative;
  z-index: 1;
}

.header h1 {
  font-size: clamp(40px, 7vw, 70px) !important;
  line-height: 0.94 !important;
  letter-spacing: -3px !important;
  font-weight: 950 !important;
  margin-bottom: 14px !important;
  color: #111827 !important;
}

.header p {
  max-width: 560px;
  color: #667085 !important;
  font-size: 17px !important;
  font-weight: 750;
}

/* Panels */
.panel {
  border-radius: 28px !important;
  background: var(--dash-card) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
  box-shadow: var(--dash-shadow) !important;
  padding: 20px !important;
}

/* Put search panel into a product card style */
.panel:has(.search-row) {
  position: relative;
}

.panel:has(.search-row)::before {
  content: "CHECK IN";
  display: block;
  color: #667085;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.search-row {
  grid-template-columns: 1fr auto !important;
  gap: 14px !important;
  align-items: center;
}

.search-input-wrap {
  border-radius: 22px !important;
  background: #f3f6fa !important;
  border: 1px solid #e1e7ef !important;
  padding: 8px 8px 8px 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    0 8px 18px rgba(15,23,42,0.04) !important;
}

.search-input-wrap:focus-within {
  background: #ffffff !important;
  border-color: #bfdbfe !important;
  box-shadow:
    0 0 0 5px rgba(37, 99, 235, 0.12),
    0 12px 28px rgba(37, 99, 235, 0.10) !important;
}

.search-input-wrap input {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: #111827 !important;
}

.search-input-wrap input::placeholder {
  color: #98a2b3 !important;
  font-weight: 850 !important;
}

.clear-search-btn {
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  background: #ffffff !important;
  color: #667085 !important;
  box-shadow: 0 6px 14px rgba(15,23,42,0.08) !important;
}

.search-row > button,
#searchButton {
  min-height: 60px !important;
  min-width: 132px;
  border-radius: 22px !important;
  background: linear-gradient(135deg, var(--dash-blue), var(--dash-blue-dark)) !important;
  box-shadow: 0 16px 34px rgba(31, 111, 235, 0.28) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

/* Stats become large dashboard tiles */
.stats,
.apple-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
}

.stat-card,
.apple-stat-card {
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: var(--dash-shadow-soft) !important;
  text-align: left !important;
  padding: 20px !important;
}

.stat-card div:last-child,
.apple-stat-label {
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-number,
.apple-stat-value {
  font-size: 36px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -1.6px !important;
  color: #111827 !important;
}

#attendedTickets,
#completionPercent {
  color: #111827 !important;
}

.last-sync {
  grid-column: 1 / -1;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 8px 12px;
  text-align: right;
  font-size: 12px;
  font-weight: 900;
  color: #667085;
}

/* Result count and helper messages */
.result-count,
.ready-next-hint,
.duplicate-warning {
  border-radius: 18px !important;
}

/* Family cards like dashboard cards */
.family-summary-card,
.family-card,
.group-card {
  border-radius: 30px !important;
  background: #ffffff !important;
  border: 1px solid rgba(226,232,240,0.95) !important;
  box-shadow: var(--dash-shadow-soft) !important;
  overflow: hidden;
}

.family-summary-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(15,23,42,0.10) !important;
}

.family-summary-main {
  padding: 20px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(219,234,254,0.56), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}

.family-name {
  font-size: 24px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.8px !important;
  color: #111827 !important;
}

.family-other-label,
.family-subline {
  color: #667085 !important;
  font-weight: 800 !important;
}

.family-expand {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  background: #f3f6fa !important;
  color: #1f6feb !important;
  border: 1px solid #e1e7ef !important;
}

.family-clean-meta,
.clean-ticket-summary {
  gap: 8px !important;
}

.family-clean-meta span,
.family-chip,
.ticket-type-count {
  min-height: 34px !important;
  border-radius: 999px !important;
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  color: #344054 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.clean-ticket-summary .ticket-type-count,
.ticket-type-count {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #1e40af !important;
}

.family-clean-progress {
  margin-top: 12px !important;
}

.family-progress-bar {
  height: 10px !important;
  background: #edf2f7 !important;
}

.family-progress-fill {
  background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}

.family-summary-actions {
  background: #f8fafc !important;
  border-top: 1px solid #e5e7eb !important;
  padding: 14px 16px !important;
  gap: 10px !important;
}

.family-btn,
.family-summary-actions button,
.group-select-button,
.group-clear-button,
.family-view-button {
  min-height: 48px !important;
  border-radius: 18px !important;
  font-size: 14px !important;
}

/* Expanded tickets as neat mini cards */
.result-card {
  border-radius: 24px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 18px rgba(15,23,42,0.045) !important;
}

.result-card.not-attended {
  background: #ffffff !important;
}

.result-card.attended,
.result-card.collected,
.result-card:has(.status-pill.collected) {
  background: #f8fafc !important;
  opacity: 0.7;
}

/* Bottom menu */
.user-dot-button {
  width: 56px !important;
  height: 56px !important;
  background: #111827 !important;
  box-shadow: 0 18px 44px rgba(15,23,42,0.24) !important;
}

.bottom-user-menu {
  border-radius: 34px !important;
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(18px);
}

/* Mobile */
@media (max-width: 700px) {
  .app {
    padding: 12px !important;
  }

  .header {
    min-height: 190px;
    border-radius: 26px !important;
    padding: 24px !important;
  }

  .header h1 {
    font-size: 42px !important;
    letter-spacing: -1.8px !important;
  }

  .header p {
    font-size: 15px !important;
  }

  .panel {
    border-radius: 24px !important;
    padding: 16px !important;
  }

  .search-row {
    grid-template-columns: 1fr !important;
  }

  .search-row > button,
  #searchButton {
    width: 100%;
    min-height: 56px !important;
  }

  .stats,
  .apple-stats-grid {
    grid-template-columns: 1fr !important;
  }

  .stat-card,
  .apple-stat-card {
    padding: 16px !important;
  }

  .stat-number,
  .apple-stat-value {
    font-size: 32px !important;
  }

  .family-summary-main {
    padding: 16px !important;
  }

  .family-name {
    font-size: 21px !important;
  }

  .family-summary-actions {
    grid-template-columns: 1fr !important;
  }

  .hide-collected-row {
    justify-content: stretch !important;
  }

  .hide-collected-toggle {
    width: 100%;
    justify-content: center;
  }
}


/* Waterfront GatePass product header */
.header::before {
  content: none !important;
}

.brand-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  animation: brandFadeUp 0.5s ease both;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: livePulse 1.7s ease-out infinite;
}

.brand-title {
  margin: 0;
  font-size: clamp(42px, 7vw, 74px) !important;
  line-height: 0.92 !important;
  font-weight: 950 !important;
  letter-spacing: -3px !important;
  color: #111827 !important;
  animation: brandFadeUp 0.58s ease 0.08s both;
}

.brand-main {
  display: block;
}

.brand-highlight {
  display: block;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-sub {
  margin: 4px 0 0;
  max-width: 560px;
  color: #667085 !important;
  font-size: 17px !important;
  font-weight: 780;
  animation: brandFadeUp 0.58s ease 0.16s both;
}

@keyframes brandFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes livePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@media (max-width: 700px) {
  .brand-title {
    font-size: 44px !important;
    letter-spacing: -2px !important;
  }

  .brand-sub {
    font-size: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-badge,
  .brand-title,
  .brand-sub,
  .live-dot {
    animation: none !important;
  }
}


/* Compact mobile friendly stats strip */
.stats,
.apple-stats-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055) !important;
}

.stat-card,
.apple-stat-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  border-radius: 0 !important;
}

.stat-card:not(:last-child),
.apple-stat-card:not(:last-child) {
  border-right: 1px solid #e5e7eb !important;
  padding-right: 10px !important;
}

.stat-number,
.apple-stat-value,
#totalTickets,
#attendedTickets,
#remainingTickets,
#completionPercent {
  display: block !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.8px !important;
  color: #111827 !important;
  margin-bottom: 4px !important;
}

#attendedTickets {
  color: #16a34a !important;
}

.stat-card div:last-child,
.apple-stat-label {
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: #667085 !important;
}

.last-sync {
  flex: 1 0 100% !important;
  grid-column: 1 / -1 !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
  border-top: 1px solid #eef2f7 !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: right !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #667085 !important;
}

/* Make the stats panel itself less bulky */
.panel:has(.stats),
.panel:has(.apple-stats-grid) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 12px !important;
}

/* Reduce hero height slightly on mobile so check in appears faster */
@media (max-width: 700px) {
  .header {
    min-height: 170px !important;
    padding: 22px !important;
    margin-bottom: 14px !important;
  }

  .stats,
  .apple-stats-grid {
    padding: 13px 14px !important;
    border-radius: 20px !important;
  }

  .stat-number,
  .apple-stat-value,
  #totalTickets,
  #attendedTickets,
  #remainingTickets,
  #completionPercent {
    font-size: 23px !important;
  }

  .stat-card div:last-child,
  .apple-stat-label {
    font-size: 10px !important;
  }
}

@media (max-width: 380px) {
  .stats,
  .apple-stats-grid {
    gap: 6px !important;
    padding: 12px !important;
  }

  .stat-number,
  .apple-stat-value,
  #totalTickets,
  #attendedTickets,
  #remainingTickets,
  #completionPercent {
    font-size: 21px !important;
  }

  .stat-card:not(:last-child),
  .apple-stat-card:not(:last-child) {
    padding-right: 6px !important;
  }
}


/* Restore selection and action colours */
.family-summary-card.selected-family {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.22) !important;
}

.family-summary-card.selected-family .family-summary-main {
  background:
    radial-gradient(circle at 92% 8%, rgba(147, 197, 253, 0.55), transparent 30%),
    linear-gradient(180deg, #dbeafe 0%, #eff6ff 100%) !important;
}

.family-summary-card.selected-family .family-summary-actions {
  background: #dbeafe !important;
  border-top-color: #93c5fd !important;
}

.family-summary-card.selected-family .family-expand {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #2563eb !important;
}

.family-summary-card.selected-family .family-selected-chip {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

/* Keep uncollected cards visually active */
.result-card.not-attended {
  background: #ffffff !important;
  border-color: #bfdbfe !important;
}

/* Keep collected cards clearly done, not just plain white */
.result-card.attended,
.result-card.collected,
.result-card:has(.status-pill.collected) {
  background: #f0fdf4 !important;
  border-color: #86efac !important;
}

/* Restore button colours */
.family-btn.primary,
.group-select-button,
.search-select-all {
  background: #2563eb !important;
  color: #ffffff !important;
}

.family-btn.secondary,
.family-view-button {
  background: #111827 !important;
  color: #ffffff !important;
}

.family-btn.ghost,
.group-clear-button,
.search-clear-all {
  background: #64748b !important;
  color: #ffffff !important;
}

.action-button.ready {
  background: #2563eb !important;
  color: #ffffff !important;
}

.action-button.collected {
  background: #9ca3af !important;
  color: #ffffff !important;
}

/* Restore ticket type pill colours */
.ticket-type-blue { background: #dbeafe !important; border-color: #60a5fa !important; color: #1e3a8a !important; }
.ticket-type-green { background: #dcfce7 !important; border-color: #4ade80 !important; color: #166534 !important; }
.ticket-type-purple { background: #f3e8ff !important; border-color: #c084fc !important; color: #6b21a8 !important; }
.ticket-type-orange { background: #ffedd5 !important; border-color: #fb923c !important; color: #9a3412 !important; }
.ticket-type-pink { background: #fce7f3 !important; border-color: #f472b6 !important; color: #9d174d !important; }
.ticket-type-teal { background: #ccfbf1 !important; border-color: #2dd4bf !important; color: #115e59 !important; }



    /* Predictive number suggestions */
    .predictive-box {
      background: #fff7ed;
      border: 1px solid #fdba74;
      border-radius: 20px;
      padding: 14px;
      box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    }

    .predictive-title {
      font-size: 17px;
      font-weight: 950;
      color: #9a3412;
      margin-bottom: 4px;
    }

    .predictive-subtitle {
      font-size: 13px;
      font-weight: 800;
      color: #7c2d12;
      margin-bottom: 10px;
    }

    .predictive-suggestion {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: #ffffff;
      color: #111827;
      border: 1px solid #fed7aa;
      border-radius: 16px;
      padding: 12px;
      margin-top: 8px;
      text-align: left;
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
    }

    .predictive-suggestion:hover {
      background: #ffedd5;
    }

    .predictive-number {
      font-size: 17px;
      font-weight: 950;
      color: #9a3412;
      white-space: nowrap;
    }

    .predictive-name {
      font-size: 13px;
      font-weight: 850;
      color: #475569;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (max-width: 600px) {
      .predictive-suggestion {
        flex-direction: column;
        align-items: flex-start;
      }
    }

/* ===== mobile-refined-fixed ===== */
/* Mobile refined fixed patch */
@media screen and (max-width: 700px) {
  body .app {
    padding: 10px !important;
  }

  body .header {
    min-height: 118px !important;
    height: auto !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    border-radius: 22px !important;
  }

  body .header::after {
    width: 150px !important;
    height: 150px !important;
    right: -46px !important;
    bottom: -58px !important;
    opacity: 0.75 !important;
  }

  body .brand-block {
    gap: 6px !important;
  }

  body .brand-badge {
    padding: 5px 9px !important;
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    line-height: 1 !important;
  }

  body .live-dot {
    width: 7px !important;
    height: 7px !important;
  }

  body .brand-title {
    font-size: 30px !important;
    line-height: 0.92 !important;
    letter-spacing: -1.4px !important;
    margin: 0 !important;
  }

  body .brand-sub {
    font-size: 12.5px !important;
    line-height: 1.2 !important;
    margin: 3px 0 0 !important;
  }

  /* Compact stats into one neat mobile strip */
  body .stats,
  body .apple-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    margin: 0 !important;
  }

  body .stat-card,
  body .apple-stat-card {
    min-height: auto !important;
    padding: 0 8px !important;
    border: 0 !important;
    border-right: 1px solid #e5e7eb !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  body .stat-card:nth-child(3),
  body .apple-stat-card:nth-child(3) {
    border-right: 0 !important;
  }

  body .stat-number,
  body .apple-stat-value,
  body #totalTickets,
  body #attendedTickets,
  body #remainingTickets,
  body #completionPercent {
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 0 3px !important;
    letter-spacing: -0.7px !important;
  }

  body .stat-card div:last-child,
  body .apple-stat-label {
    font-size: 8.8px !important;
    line-height: 1.05 !important;
    letter-spacing: 0.055em !important;
  }

  body .last-sync {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 7px 0 0 !important;
    border-top: 1px solid #eef2f7 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: right !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.06em !important;
    white-space: nowrap !important;
    color: #667085 !important;
  }

  body .panel:has(.stats),
  body .panel:has(.apple-stats-grid) {
    padding: 0 !important;
    margin-bottom: 10px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body .panel:has(.search-row) {
    padding: 14px !important;
    border-radius: 22px !important;
  }

  body .panel:has(.search-row)::before {
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }

  body .search-row {
    gap: 10px !important;
  }

  body .search-input-wrap {
    padding: 6px 6px 6px 14px !important;
    border-radius: 20px !important;
  }

  body .search-input-wrap input,
  body #searchInput {
    font-size: 18px !important;
    padding: 12px 42px 12px 0 !important;
  }

  body #qrButton,
  body button.secondary {
    min-height: 52px !important;
    padding: 13px !important;
    border-radius: 16px !important;
  }

  body #searchButton {
    min-height: 54px !important;
  }
}

@media screen and (max-width: 390px) {
  body .brand-title {
    font-size: 28px !important;
  }

  body .stat-number,
  body .apple-stat-value,
  body #totalTickets,
  body #attendedTickets,
  body #remainingTickets,
  body #completionPercent {
    font-size: 20px !important;
  }

  body .stat-card,
  body .apple-stat-card {
    padding: 0 6px !important;
  }
}

/* ===== operator-panel-last-sync-style ===== */
/* Hide last sync from main stats area */
.stats > #lastSyncTime,
.apple-stats-grid > #lastSyncTime {
  display: none !important;
}

/* Operator panel system info */
.operator-system-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border: 1px solid #e5e7eb;
  margin-bottom: 10px;
}

.operator-system-icon {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: #eff6ff;
  color: #1d4ed8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.operator-system-label {
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 3px;
}

.operator-system-value {
  font-size: 15px;
  font-weight: 950;
  color: #0f172a;
  line-height: 1.2;
}

.operator-system-sub {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

/* ===== operator-snapshot-sync-style ===== */
.stats > #lastSyncTime,
.apple-stats-grid > #lastSyncTime,
#lastSyncTime {
  display: none !important;
}

.operator-sync-stat {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 12px 14px;
  margin-top: 10px;
}

.operator-sync-stat .operator-sync-label {
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 5px;
}

.operator-sync-stat .operator-sync-value {
  font-size: 16px;
  font-weight: 950;
  color: #0f172a;
  line-height: 1.15;
}

.operator-sync-stat .operator-sync-sub {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

/* ===== inline-style-5 ===== */
/* Always show collected check in summary even in compact collected view */
.compact-checkin-line {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px 0;
  padding: 8px 10px;
  border-radius: 999px;
  background: #ecfdf3;
  border: 1px solid #86efac;
  color: #166534;
  font-size: 12px;
  font-weight: 950;
}
.compact-checkin-line span {
  white-space: nowrap;
}
body.compact-collected-on .result-card.attended,
body.compact-collected-on .result-card.collected,
body.compact-collected-on .result-card:has(.status-pill.collected) {
  max-height: 168px;
}
@media (max-width: 600px) {
  .compact-checkin-line {
    border-radius: 14px;
    line-height: 1.35;
  }
}

/* ===== search-render-limit-optimisation ===== */
.gp-search-limit-note {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px dashed var(--org-primary-border);
  border-radius: 14px;
  background: var(--org-primary-softer);
  color: var(--org-primary-deep);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
  text-align: center;
}

/* ===== inline-style-6 ===== */
/* Repair: keep collected check-in details visible */
body.compact-collected-on .result-card.attended,
body.compact-collected-on .result-card.collected,
body.compact-collected-on .result-card:has(.status-pill.collected) {
  max-height: none !important;
  overflow: visible !important;
}
.compact-checkin-line {
  display: flex !important;
  width: 100%;
  border-radius: 16px !important;
  margin: 0 0 12px 0 !important;
  padding: 10px 12px !important;
}
.checkin-card { display: block !important; }

/* ===== gatepass-onboarding-style ===== */
.gp-onboarding-overlay{position:fixed;inset:0;z-index:50000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.66);backdrop-filter:blur(12px)}
.gp-onboarding-overlay.show{display:flex}
.gp-onboarding-card{width:min(540px,100%);background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.92);border-radius:30px;padding:22px;box-shadow:0 34px 90px rgba(15,23,42,.32)}
.gp-onboarding-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.gp-onboarding-kicker{font-size:12px;font-weight:950;color:#2563eb;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.gp-onboarding-title{font-size:26px;line-height:1.12;font-weight:950;color:#0f172a;margin:0}
.gp-onboarding-close{width:38px;height:38px;border-radius:999px;background:#f1f5f9!important;color:#334155!important;border:1px solid #e2e8f0;font-size:20px;padding:0;box-shadow:none}
.gp-onboarding-step{display:none}.gp-onboarding-step.active{display:block}
.gp-onboarding-text{font-size:16px;line-height:1.5;color:#475569;font-weight:750;margin:0 0 16px}
.gp-demo-box{background:linear-gradient(135deg,#eff6ff,#fff);border:1px solid #bfdbfe;border-radius:22px;padding:16px;margin-bottom:14px}
.gp-demo-main{font-size:21px;font-weight:950;color:#1e3a8a;margin-bottom:6px;line-height:1.25}
.gp-demo-sub{font-size:13px;font-weight:850;color:#64748b;line-height:1.4}
.gp-onboarding-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px}
.gp-onboarding-dot{height:6px;border-radius:999px;background:#e2e8f0}.gp-onboarding-dot.active{background:#2563eb}
.gp-guide-option{display:flex;align-items:center;gap:9px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:11px 12px;margin:0 0 16px;font-size:14px;font-weight:850;color:#334155}
.gp-guide-option input{width:18px;height:18px;margin:0;padding:0;accent-color:#2563eb}
.gp-onboarding-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gp-skip-button{background:#64748b;min-height:48px;border-radius:16px}
.gp-next-button{background:#2563eb;min-height:48px;border-radius:16px}
.gp-menu-guide-button{background:#2563eb!important}
@media(max-width:600px){.gp-onboarding-card{border-radius:26px;padding:18px}.gp-onboarding-title{font-size:23px}}

/* ===== admin-clear-style ===== */
.sheet-clear-button {
  background: #dc2626 !important;
}
.sheet-clear-button:hover {
  background: #b91c1c !important;
}
.sheet-clear-button:disabled {
  background: #9ca3af !important;
  cursor: not-allowed;
}

/* ===== recently-added-style ===== */
.pending-empty-card { background:#fff; border:1px solid #bfdbfe; border-radius:22px; padding:18px; box-shadow:0 10px 24px rgba(15,23,42,.07); margin-bottom:14px; }
.pending-empty-title { font-size:21px; font-weight:950; color:#0f172a; margin-bottom:6px; }
.pending-empty-sub { font-size:14px; font-weight:750; color:#64748b; line-height:1.45; margin-bottom:14px; }
.pending-add-button { width:100%; background:#2563eb; min-height:52px; border-radius:16px; font-size:16px; }
.pending-modal-backdrop { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.45); backdrop-filter:blur(8px); z-index:60000; padding:16px; }
.pending-modal-backdrop.open { display:flex; }
.pending-modal-card { width:min(440px,100%); background:rgba(255,255,255,.98); border:1px solid rgba(255,255,255,.9); border-radius:28px; padding:18px; box-shadow:0 30px 80px rgba(15,23,42,.28); }
.pending-modal-kicker { font-size:11px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; color:#2563eb; margin-bottom:6px; }
.pending-modal-title { font-size:24px; font-weight:950; line-height:1.15; color:#0f172a; margin:0 0 8px; }
.pending-modal-sub { font-size:14px; line-height:1.45; font-weight:750; color:#64748b; margin:0 0 14px; }
.pending-field { margin-bottom:12px; }
.pending-field label { display:block; font-size:12px; font-weight:950; color:#64748b; text-transform:uppercase; letter-spacing:.05em; margin:0 0 6px 2px; }
.pending-field input { min-height:50px; border-radius:16px; font-weight:800; }
.pending-field textarea { width:100%; min-height:108px; resize:vertical; padding:14px; border:1px solid #d1d5db; border-radius:16px; background:#fff; color:#111827; font:inherit; font-weight:750; line-height:1.45; }
.pending-field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(var(--org-primary-rgb),.14); }
.pending-modal-card { position:relative; }
.pending-modal-close { position:absolute; top:14px; right:14px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:1px solid #dbe3ee; border-radius:999px; background:#f8fafc; color:#334155; font-size:25px; font-weight:700; line-height:1; }
.pending-modal-close:hover { border-color:var(--org-primary-border); background:var(--org-primary-soft); color:var(--org-primary-deep); }
.checkin-remark-target { margin:0 0 14px; padding:11px 12px; border:1px solid var(--org-primary-border); border-radius:14px; background:var(--org-primary-soft); color:var(--org-primary-deep); font-size:13px; font-weight:850; line-height:1.4; }
.checkin-remark-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; color:#64748b; font-size:11px; font-weight:800; }
.checkin-remark-confirm { background:linear-gradient(135deg,var(--blue),var(--blue-dark)); }
.saved-remark-alert-backdrop { background:rgba(15,23,42,.62); }
.saved-remark-alert-card {
  width:min(500px,100%);
  border:2px solid color-mix(in srgb, var(--blue) 48%, #f59e0b);
  box-shadow:0 32px 90px rgba(15,23,42,.38);
}
.saved-remark-alert-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin:0 0 14px;
  border-radius:18px;
  background:color-mix(in srgb, var(--blue) 18%, #fff7d6);
  color:var(--org-primary-deep);
  font-size:30px;
  font-weight:950;
}
.saved-remark-alert-person {
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:16px;
  background:var(--org-primary-soft);
  color:var(--org-primary-deep);
  font-size:15px;
  font-weight:900;
  line-height:1.4;
}
.saved-remark-alert-list { display:grid; gap:10px; }
.saved-remark-alert-item {
  padding:14px;
  border:1px solid color-mix(in srgb, var(--blue) 34%, #dbe3ee);
  border-left:6px solid var(--blue);
  border-radius:16px;
  background:#fff;
}
.saved-remark-alert-meta {
  display:flex;
  flex-wrap:wrap;
  gap:5px 12px;
  margin-bottom:8px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}
.saved-remark-alert-remark {
  color:#0f172a;
  font-size:17px;
  font-weight:900;
  line-height:1.42;
  overflow-wrap:anywhere;
}
.saved-remark-alert-actions { grid-template-columns:1fr; margin-top:16px; }
.saved-remark-alert-actions .pending-submit {
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
}
.checkin-review-summary { margin:0 0 12px; padding:12px; border:1px solid var(--org-primary-border); border-radius:15px; background:var(--org-primary-soft); color:var(--org-primary-deep); }
.checkin-review-summary strong { display:block; margin-bottom:6px; font-size:14px; }
.checkin-review-type-chips { display:flex; flex-wrap:wrap; gap:6px; }
.checkin-review-type-chip { display:inline-flex; align-items:center; min-height:30px; padding:6px 9px; border:1px solid var(--org-primary-border); border-radius:999px; background:#fff; color:var(--org-primary-deep); font-size:12px; font-weight:900; }
.checkin-review-list { display:grid; gap:8px; max-height:42vh; overflow:auto; padding-right:2px; }
.checkin-review-row { padding:12px; border:1px solid #dbe3ee; border-radius:15px; background:#fff; }
.checkin-review-name { color:#0f172a; font-size:16px; font-weight:950; line-height:1.25; }
.checkin-review-id { margin-top:3px; color:#64748b; font-size:12px; font-weight:800; }
.checkin-review-ticket { margin-top:9px; padding:9px 10px; border-left:5px solid var(--blue); border-radius:10px; background:var(--org-primary-softer); color:var(--org-primary-deep); font-size:14px; font-weight:950; }
.pending-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px; }
.pending-cancel { background:#64748b; }
.pending-submit { background:#16a34a; }
.pending-mini-note { background:#fffbeb; border:1px solid #fde68a; color:#92400e; padding:10px 12px; border-radius:16px; font-size:13px; font-weight:800; line-height:1.35; margin-top:10px; }
@media(max-width:600px){ .pending-modal-card{border-radius:24px;padding:16px}.pending-actions{grid-template-columns:1fr}.pending-modal-title{font-size:22px} }


    .family-members-preview {
      margin-bottom: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
    }

    .family-members-label {
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: #64748b;
      margin-bottom: 6px;
    }

    .family-members-list {
      font-size: 15px;
      font-weight: 850;
      line-height: 1.45;
      color: #0f172a;
    }

    .family-name {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: unset !important;
    }

    @media (max-width: 600px) {
      .family-members-preview {
        padding: 11px 12px;
      }

      .family-members-list {
        font-size: 14px;
      }
    }

/* ===== desktop-two-column-layout-fixed ===== */
/* Desktop two column layout for GatePass operator screen */
  @media (min-width: 980px) {
    body:not(.login-mode) {
      overflow: hidden;
    }

    #mainApp.app {
      max-width: 1480px !important;
      height: 100vh !important;
      display: grid !important;
      grid-template-columns: 430px minmax(0, 1fr) !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      gap: 16px !important;
      padding: 16px 18px 18px !important;
      overflow: hidden !important;
    }

    #mainApp .header {
      grid-column: 1 / -1 !important;
      grid-row: 1 !important;
      margin-bottom: 0 !important;
      padding: 16px 22px !important;
      border-radius: 26px !important;
    }

    #mainApp .brand-title {
      font-size: 36px !important;
      line-height: 1 !important;
      margin-bottom: 6px !important;
    }

    #mainApp .brand-sub {
      font-size: 14px !important;
    }

    #mainApp .desktop-control-column {
      grid-column: 1 !important;
      grid-row: 2 !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      padding-right: 4px !important;
    }

    #mainApp .desktop-results-column {
      grid-column: 2 !important;
      grid-row: 2 !important;
      min-width: 0 !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: flex !important;
    }

    #mainApp .desktop-control-column .panel,
    #mainApp .desktop-results-column .panel {
      margin-bottom: 14px !important;
    }

    #mainApp .results-panel {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      margin-bottom: 0 !important;
      padding: 18px !important;
    }

    #mainApp .results-panel h2 {
      flex: 0 0 auto !important;
      margin-bottom: 12px !important;
    }

    #results {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      padding-right: 8px !important;
      scroll-behavior: smooth;
    }

    #results::-webkit-scrollbar,
    #mainApp .desktop-control-column::-webkit-scrollbar {
      width: 10px;
    }

    #results::-webkit-scrollbar-thumb,
    #mainApp .desktop-control-column::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 999px;
    }

    #results::-webkit-scrollbar-track,
    #mainApp .desktop-control-column::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 999px;
    }

    #mainApp .stats,
    #mainApp .apple-stats-grid {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
    }

    #mainApp .stat-card,
    #mainApp .apple-stat-card {
      padding: 14px !important;
    }

    #mainApp .stat-number,
    #mainApp .apple-stat-value,
    #totalTickets,
    #attendedTickets,
    #remainingTickets,
    #completionPercent {
      font-size: 30px !important;
    }

    #mainApp .search-row {
      grid-template-columns: 1fr !important;
    }

    #searchButton {
      width: 100% !important;
      min-width: 0 !important;
    }

    #qrReader {
      max-height: 260px !important;
    }

    .bulk-action-bar {
      left: 18px !important;
      right: auto !important;
      bottom: 18px !important;
      transform: none !important;
      width: 430px !important;
      grid-template-columns: 1fr !important;
    }

    .bulk-clear,
    .bulk-submit {
      width: 100% !important;
    }
  }

  @media (min-width: 1280px) {
    #mainApp.app {
      grid-template-columns: 470px minmax(0, 1fr) !important;
    }

    .bulk-action-bar {
      width: 470px !important;
    }
  }

  @media (max-width: 979px) {
    body:not(.login-mode) {
      overflow: auto;
    }

    #mainApp.app {
      height: auto !important;
      display: block !important;
      overflow: visible !important;
    }

    #mainApp .desktop-control-column,
    #mainApp .desktop-results-column {
      display: block !important;
      overflow: visible !important;
    }

    #mainApp .results-panel {
      height: auto !important;
      overflow: visible !important;
      display: block !important;
    }

    #results {
      overflow: visible !important;
      padding-right: 0 !important;
    }
  }

/* ===== desktop-compact-operations-dashboard-v3 ===== */
/* Compact desktop dashboard layout
     Header becomes a small left header instead of consuming a full top row.
     Left controls are compressed. Right results panel gets the full height. */
  @media (min-width: 980px) {
    html,
    body:not(.login-mode) {
      height: 100%;
      overflow: hidden !important;
    }

    body:not(.login-mode) {
      background: #eef2f7 !important;
    }

    #mainApp.app {
      max-width: none !important;
      width: 100vw !important;
      height: 100vh !important;
      display: grid !important;
      grid-template-columns: 360px minmax(0, 1fr) !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      gap: 12px !important;
      padding: 12px !important;
      overflow: hidden !important;
    }

    /* Make header a compact left column brand block */
    #mainApp .header {
      grid-column: 1 !important;
      grid-row: 1 !important;
      margin: 0 !important;
      padding: 12px 14px !important;
      min-height: 0 !important;
      border-radius: 20px !important;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10) !important;
      overflow: hidden !important;
    }

    #mainApp .header::before,
    #mainApp .header::after {
      opacity: 0.28 !important;
      transform: scale(0.72) !important;
    }

    #mainApp .brand-block {
      gap: 4px !important;
    }

    #mainApp .brand-badge {
      display: inline-flex !important;
      width: fit-content !important;
      padding: 4px 8px !important;
      font-size: 9px !important;
      letter-spacing: 0.08em !important;
      margin-bottom: 4px !important;
    }

    #mainApp .brand-title {
      font-size: 24px !important;
      line-height: 1 !important;
      margin: 0 !important;
      letter-spacing: -0.6px !important;
      white-space: nowrap !important;
    }

    #mainApp .brand-title .brand-main,
    #mainApp .brand-title .brand-highlight {
      display: inline !important;
    }

    #mainApp .brand-sub {
      font-size: 12px !important;
      line-height: 1.2 !important;
      margin: 4px 0 0 !important;
      opacity: 0.9 !important;
    }

    #mainApp .desktop-control-column {
      grid-column: 1 !important;
      grid-row: 2 !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      padding: 0 !important;
    }

    #mainApp .desktop-results-column {
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important;
      min-width: 0 !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: flex !important;
    }

    #mainApp .panel {
      border-radius: 18px !important;
      padding: 12px !important;
      margin: 0 !important;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07) !important;
    }

    #mainApp .desktop-control-column .panel {
      flex: 0 0 auto !important;
    }

    /* Compact stats: 3 cards in one row */
    #mainApp .stats,
    #mainApp .apple-stats-grid {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 8px !important;
    }

    #mainApp .stat-card,
    #mainApp .apple-stat-card {
      padding: 10px 6px !important;
      border-radius: 14px !important;
      min-height: 72px !important;
    }

    #mainApp .stat-number,
    #mainApp .apple-stat-value,
    #totalTickets,
    #attendedTickets,
    #remainingTickets,
    #completionPercent {
      font-size: 24px !important;
      line-height: 1 !important;
      margin-bottom: 4px !important;
    }

    #mainApp .stat-card div:last-child,
    #mainApp .apple-stat-label {
      font-size: 11px !important;
      line-height: 1.15 !important;
      font-weight: 850 !important;
    }

    #lastSyncTime {
      grid-column: 1 / -1 !important;
      font-size: 11px !important;
      padding: 6px 8px !important;
      margin-top: 0 !important;
      min-height: 0 !important;
      border-radius: 999px !important;
      text-align: center !important;
    }

    #mainApp .stats-guide {
      margin-top: 8px !important;
      padding: 7px 9px !important;
      border-radius: 12px !important;
      font-size: 11px !important;
      line-height: 1.25 !important;
    }

    #overallTicketTypeSummary {
      max-height: 190px !important;
      overflow-y: auto !important;
    }

    #messageBox.message {
      flex: 0 0 auto !important;
      margin: 0 !important;
      padding: 10px 12px !important;
      border-radius: 14px !important;
      font-size: 13px !important;
      line-height: 1.25 !important;
    }

    /* Scanner and search panel compact */
    #startScannerButton,
    #stopScannerButton,
    button.secondary {
      min-height: 42px !important;
      padding: 10px 12px !important;
      font-size: 14px !important;
      border-radius: 14px !important;
      margin-bottom: 8px !important;
    }

    #qrReader {
      max-height: 210px !important;
      margin-bottom: 8px !important;
      border-radius: 14px !important;
    }

    #mainApp .search-guide {
      padding: 7px 9px !important;
      border-radius: 12px !important;
      font-size: 11px !important;
      line-height: 1.25 !important;
      margin-bottom: 8px !important;
    }

    #mainApp .search-row {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 8px !important;
    }

    #mainApp input,
    #mainApp button {
      font-size: 14px !important;
    }

    #searchInput {
      padding: 12px 38px 12px 12px !important;
      min-height: 42px !important;
      border-radius: 14px !important;
    }

    #searchButton {
      width: 100% !important;
      min-height: 42px !important;
      padding: 10px 12px !important;
      border-radius: 14px !important;
    }

    .pending-add-button {
      min-height: 42px !important;
      padding: 10px 12px !important;
      font-size: 13px !important;
      border-radius: 14px !important;
    }

    #mainApp .small-text {
      font-size: 11px !important;
      line-height: 1.25 !important;
    }

    /* Full height results area */
    #mainApp .results-panel {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      margin: 0 !important;
      padding: 14px !important;
      border-radius: 22px !important;
    }

    #mainApp .results-panel h2 {
      flex: 0 0 auto !important;
      margin: 0 0 10px !important;
      font-size: 20px !important;
      line-height: 1.15 !important;
    }

    #results {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      padding-right: 8px !important;
    }

    /* Make result cards slightly denser on desktop */
    #results .family-summary-card,
    #results .family-card,
    #results .group-card,
    #results .result-card {
      margin-bottom: 10px !important;
      border-radius: 18px !important;
    }

    #results .family-summary-main,
    #results .family-main,
    #results .result-card {
      padding: 12px !important;
    }

    #results .family-name {
      font-size: 17px !important;
    }

    #results .ticket-type-count,
    #results .family-chip,
    #results .family-clean-meta span {
      min-height: 28px !important;
      padding: 6px 9px !important;
      font-size: 12px !important;
    }

    #results::-webkit-scrollbar,
    #overallTicketTypeSummary::-webkit-scrollbar {
      width: 10px;
    }

    #results::-webkit-scrollbar-thumb,
    #overallTicketTypeSummary::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 999px;
    }

    #results::-webkit-scrollbar-track,
    #overallTicketTypeSummary::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 999px;
    }

    /* Floating bars fit inside left column */
    .bulk-action-bar {
      left: 12px !important;
      right: auto !important;
      bottom: 12px !important;
      transform: none !important;
      width: 360px !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 8px !important;
      padding: 8px !important;
      border-radius: 16px !important;
    }

    .bulk-summary {
      grid-column: 1 / -1 !important;
      font-size: 13px !important;
    }

    .bulk-clear,
    .bulk-submit {
      width: 100% !important;
      min-height: 38px !important;
      padding: 8px 10px !important;
      font-size: 13px !important;
    }

    .bottom-bar {
      right: 18px !important;
      bottom: 18px !important;
    }
  }

  @media (min-width: 1280px) {
    #mainApp.app {
      grid-template-columns: 390px minmax(0, 1fr) !important;
    }

    .bulk-action-bar {
      width: 390px !important;
    }
  }

  @media (min-width: 1600px) {
    #mainApp.app {
      grid-template-columns: 420px minmax(0, 1fr) !important;
      gap: 14px !important;
      padding: 14px !important;
    }

    .bulk-action-bar {
      width: 420px !important;
      left: 14px !important;
      bottom: 14px !important;
    }
  }

/* ===== desktop-master-detail-results-v4 ===== */
/* Desktop results optimisation
     Compact list cards by default. When a family is opened, details sit on the right
     instead of expanding downward and making operators scroll too much. */
  @media (min-width: 980px) {
    #mainApp .results-panel {
      padding: 12px !important;
    }

    #mainApp .results-panel h2 {
      margin: 0 0 8px !important;
      font-size: 18px !important;
      line-height: 1.1 !important;
      letter-spacing: -0.2px !important;
    }

    #results {
      padding-right: 6px !important;
    }

    #results .result-count {
      margin: 0 0 8px !important;
      font-size: 13px !important;
    }

    #results .family-summary-card {
      border-radius: 16px !important;
      margin-bottom: 8px !important;
      box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05) !important;
    }

    #results .family-summary-main {
      padding: 10px 12px !important;
    }

    #results .family-summary-top {
      margin-bottom: 6px !important;
      gap: 8px !important;
    }

    #results .family-name-icon {
      display: none !important;
    }

    #results .family-name {
      font-size: 16px !important;
      line-height: 1.15 !important;
    }

    #results .family-other-label,
    #results .family-subline {
      font-size: 12px !important;
      margin-top: 3px !important;
    }

    #results .family-expand {
      width: 30px !important;
      height: 30px !important;
      min-width: 30px !important;
      font-size: 16px !important;
    }

    #results .family-quantity-summary {
      margin-top: 7px !important;
      gap: 5px !important;
    }

    #results .family-quantity-summary span,
    #results .family-chip,
    #results .ticket-type-count {
      min-height: 26px !important;
      padding: 5px 8px !important;
      font-size: 11px !important;
      gap: 4px !important;
    }

    #results .family-quantity-summary strong {
      font-size: 13px !important;
    }

    #results .family-clean-meta {
      margin-bottom: 7px !important;
      gap: 5px !important;
    }

    #results .family-members-preview {
      margin: 6px 0 !important;
      padding: 8px !important;
      border-radius: 12px !important;
    }

    #results .family-ticket-summary,
    #results .clean-ticket-summary {
      margin-bottom: 8px !important;
      gap: 5px !important;
    }

    #results .family-clean-progress {
      margin-top: 0 !important;
    }

    #results .family-summary-actions {
      padding: 8px 10px !important;
      gap: 6px !important;
    }

    #results .family-btn,
    #results .family-summary-actions button,
    #results .group-select-button,
    #results .group-clear-button,
    #results .family-view-button {
      min-height: 34px !important;
      padding: 8px 10px !important;
      border-radius: 11px !important;
      font-size: 12px !important;
    }

    /* Result detail cards on the right should also be denser */
    #results .family-ticket-list .result-card {
      padding: 10px !important;
      border-radius: 14px !important;
      margin-bottom: 8px !important;
      box-shadow: none !important;
    }

    #results .card-topline {
      margin-bottom: 8px !important;
    }

    #results .attendee-no,
    #results .ticket-card-title {
      font-size: 17px !important;
    }

    #results .status-pill {
      padding: 5px 8px !important;
      font-size: 11px !important;
    }

    #results .ticket-name-pill {
      padding: 5px 8px !important;
      font-size: 12px !important;
      margin-bottom: 8px !important;
    }

    #results .person-card,
    #results .checkin-card {
      padding: 10px !important;
      border-radius: 14px !important;
      margin-bottom: 8px !important;
    }

    #results .person-main-name {
      font-size: 17px !important;
      margin-bottom: 8px !important;
    }

    #results .info-grid,
    #results .checkin-grid {
      gap: 6px !important;
    }

    #results .mini-info,
    #results .email-card {
      padding: 8px !important;
      border-radius: 12px !important;
    }

    #results .mini-label {
      font-size: 10px !important;
      margin-bottom: 3px !important;
    }

    #results .mini-value {
      font-size: 13px !important;
    }

    #results .action-button {
      min-height: 40px !important;
      padding: 10px !important;
      font-size: 14px !important;
      border-radius: 12px !important;
    }
  }

  /* Master detail layout for wider desktop screens */
  @media (min-width: 1180px) {
    #results .family-summary-card.expanded {
      display: grid !important;
      grid-template-columns: minmax(300px, 34%) minmax(0, 1fr) !important;
      grid-template-rows: auto auto !important;
      align-items: start !important;
      overflow: hidden !important;
      border-color: #93c5fd !important;
    }

    #results .family-summary-card.expanded .family-summary-main {
      grid-column: 1 !important;
      grid-row: 1 !important;
      min-width: 0 !important;
      height: 100% !important;
      border-right: 1px solid #e5e7eb !important;
    }

    #results .family-summary-card.expanded .family-summary-actions {
      grid-column: 1 !important;
      grid-row: 2 !important;
      border-right: 1px solid #e5e7eb !important;
    }

    #results .family-summary-card.expanded .family-ticket-list {
      grid-column: 2 !important;
      grid-row: 1 / span 2 !important;
      display: block !important;
      border-top: 0 !important;
      border-left: 0 !important;
      background: #f8fafc !important;
      padding: 10px !important;
      max-height: calc(100vh - 76px) !important;
      overflow-y: auto !important;
    }

    #results .family-summary-card.expanded .family-ticket-list::-webkit-scrollbar {
      width: 8px;
    }

    #results .family-summary-card.expanded .family-ticket-list::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 999px;
    }

    #results .family-summary-card.expanded .family-ticket-list .result-card {
      background: #ffffff !important;
    }

    /* Keep non opened cards extra compact so the operator sees more residents */
    #results .family-summary-card:not(.expanded) .family-clean-meta,
    #results .family-summary-card:not(.expanded) .family-members-preview,
    #results .family-summary-card:not(.expanded) .family-clean-progress {
      display: none !important;
    }

    #results .family-summary-card:not(.expanded) .family-summary-actions {
      grid-template-columns: 1fr 1fr !important;
    }
  }

  @media (max-width: 979px) {
    #results .family-summary-card.expanded {
      display: block !important;
    }
  }

/* ===== sticky-selected-action-v5 ===== */
/* Selected ticket action should stay visible inside the results area, not hide at the bottom corner. */
  .results-panel .bulk-action-bar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    display: grid;
    grid-template-columns: 1fr auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: rgba(248, 250, 252, 0.98) !important;
    border: 1px solid #bfdbfe !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14) !important;
    z-index: 25 !important;
  }

  .results-panel .bulk-summary {
    grid-column: auto !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    color: #1e3a8a !important;
    white-space: nowrap !important;
  }

  .results-panel .bulk-clear,
  .results-panel .bulk-submit {
    width: auto !important;
    min-height: 40px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    border-radius: 13px !important;
    margin: 0 !important;
  }

  .results-panel .bulk-submit {
    min-width: 150px !important;
  }

  @media (min-width: 980px) {
    #mainApp .results-panel h2 {
      display: flex !important;
      align-items: center !important;
      min-height: 30px !important;
    }

    #results {
      padding-top: 0 !important;
    }
  }

  @media (max-width: 600px) {
    .results-panel .bulk-action-bar {
      grid-template-columns: 1fr !important;
      position: sticky !important;
      top: 8px !important;
    }

    .results-panel .bulk-clear,
    .results-panel .bulk-submit {
      width: 100% !important;
    }
  }

/* ===== desktop-empty-results-v7 ===== */
/* Filled empty dashboard for desktop results panel */
  .results-empty-state {
    min-height: calc(100vh - 118px);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  .results-empty-dashboard {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(320px, 0.84fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 14px;
    align-content: stretch;
  }

  .empty-hero-panel,
  .empty-panel {
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
    overflow: hidden;
  }

  .empty-hero-panel {
    grid-column: 1 / -1;
    min-height: 138px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    background:
      radial-gradient(circle at 14% 12%, rgba(96, 165, 250, 0.20), transparent 32%),
      radial-gradient(circle at 90% 20%, rgba(34, 197, 94, 0.10), transparent 30%),
      linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  }

  .empty-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
  }

  .empty-hero-title {
    font-size: 34px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: -0.8px;
    color: #0f172a;
    margin-bottom: 8px;
  }

  .empty-hero-subtitle {
    max-width: 760px;
    color: #64748b;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 800;
  }

  .empty-hero-search-hint {
    min-width: 300px;
    background: #0f172a;
    color: #ffffff;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
  }

  .empty-hero-search-label {
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 9px;
  }

  .empty-hero-search-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 26px;
    font-weight: 950;
    letter-spacing: 0.08em;
  }

  .empty-hero-search-value span {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.18);
  }

  .empty-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
  }

  .empty-panel-title {
    font-size: 15px;
    font-weight: 950;
    color: #0f172a;
  }

  .empty-panel-note {
    font-size: 12px;
    font-weight: 850;
    color: #64748b;
  }

  .empty-panel-body {
    padding: 16px;
  }

  .empty-large-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .empty-large-stat {
    min-height: 110px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 16px;
  }

  .empty-large-stat-value {
    font-size: 38px;
    line-height: 1;
    font-weight: 950;
    color: #0f172a;
    margin-bottom: 8px;
  }

  .empty-large-stat-value.green {
    color: #16a34a;
  }

  .empty-large-stat-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .empty-progress-track {
    height: 10px;
    margin-top: 14px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
  }

  .empty-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #16a34a;
  }

  .empty-breakdown-list,
  .empty-recent-list {
    display: grid;
    gap: 9px;
    max-height: 315px;
    overflow: auto;
    padding-right: 4px;
  }

  .empty-breakdown-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 11px 12px;
    background: #ffffff;
  }

  .empty-breakdown-name {
    font-size: 13px;
    font-weight: 950;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .empty-breakdown-sub {
    margin-top: 6px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .empty-mini-track {
    height: 7px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
  }

  .empty-mini-fill {
    height: 100%;
    border-radius: 999px;
    background: #2563eb;
  }

  .empty-breakdown-count {
    font-size: 12px;
    color: #64748b;
    font-weight: 900;
    white-space: nowrap;
  }

  .empty-recent-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 10px;
    background: #ffffff;
  }

  .empty-recent-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dcfce7;
    color: #166534;
    font-weight: 950;
  }

  .empty-recent-name {
    font-size: 13px;
    font-weight: 950;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .empty-recent-ticket {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .empty-recent-time {
    font-size: 12px;
    font-weight: 900;
    color: #16a34a;
    white-space: nowrap;
  }

  .empty-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .empty-step-card {
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    padding: 14px;
  }

  .empty-step-no {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
    margin-bottom: 10px;
  }

  .empty-step-title {
    font-size: 14px;
    font-weight: 950;
    color: #0f172a;
    margin-bottom: 5px;
  }

  .empty-step-text {
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
    font-weight: 800;
  }

  .empty-muted-box {
    border-radius: 18px;
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    padding: 20px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    font-weight: 850;
  }

  .results-empty-inline {
    min-height: 420px;
  }

  @media (max-width: 1280px) {
    .results-empty-dashboard {
      grid-template-columns: 1fr;
    }

    .empty-hero-panel {
      grid-template-columns: 1fr;
    }

    .empty-hero-search-hint {
      min-width: 0;
    }
  }

  @media (max-width: 979px) {
    .results-empty-state {
      min-height: auto;
    }

    .results-empty-dashboard,
    .empty-large-stats,
    .empty-steps-grid {
      grid-template-columns: 1fr;
    }

    .empty-hero-panel {
      padding: 18px;
      border-radius: 22px;
    }

    .empty-hero-title {
      font-size: 24px;
    }

    .empty-hero-search-value {
      font-size: 20px;
    }

    .empty-hero-search-value span {
      width: 34px;
      height: 34px;
    }
  }

/* ===== desktop-empty-results-v8-clean ===== */
/* v8 cleaner empty dashboard: remove repeated stats and recommended search */
  @media (min-width: 980px) {
    .results-empty-state {
      min-height: calc(100vh - 96px);
    }

    .results-empty-dashboard.clean-empty-dashboard {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 14px;
      height: 100%;
    }

    .clean-empty-hero {
      grid-column: 1 / -1;
      min-height: 118px;
      padding: 18px 22px;
    }

    .clean-empty-hero .empty-hero-title {
      font-size: 30px;
    }

    .clean-empty-hero .empty-hero-subtitle {
      max-width: 860px;
    }

    .clean-hero-status {
      min-width: 170px;
      border-radius: 22px;
      background: #0f172a;
      color: #ffffff;
      padding: 16px 18px;
      text-align: center;
      box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    }

    .clean-hero-status-value {
      font-size: 34px;
      line-height: 1;
      font-weight: 950;
      margin-bottom: 6px;
    }

    .clean-hero-status-label {
      font-size: 12px;
      color: #cbd5e1;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .clean-main-panel {
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    .clean-main-panel .empty-panel-body {
      min-height: 0;
      flex: 1;
    }

    .clean-breakdown-list,
    .clean-recent-list {
      max-height: none;
      height: 100%;
    }

    .clean-wide-panel {
      grid-column: 1 / -1;
    }

    .clean-notes-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .clean-notes-grid .empty-step-card {
      min-height: 104px;
    }

    .clean-notes-grid .empty-step-no {
      display: none;
    }

    .clean-exception-card {
      background: #f8fafc;
    }
  }

  @media (max-width: 1280px) and (min-width: 980px) {
    .clean-notes-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 979px) {
    .clean-hero-status {
      width: 100%;
      border-radius: 18px;
      background: #0f172a;
      color: #ffffff;
      padding: 14px;
      text-align: center;
    }

    .clean-hero-status-value {
      font-size: 28px;
      font-weight: 950;
    }

    .clean-hero-status-label {
      font-size: 12px;
      color: #cbd5e1;
      font-weight: 900;
    }

    .clean-notes-grid {
      grid-template-columns: 1fr;
    }
  }

/* ===== phone-call-whatsapp-actions-style ===== */
.phone-mini-info {
    grid-column: 1 / -1;
  }
  .phone-action-value {
    font-size: 14px !important;
  }
  .gp-phone-inline {
    display: grid;
    gap: 8px;
  }
  .gp-phone-display {
    font-weight: 900;
    color: #111827;
    word-break: break-word;
  }
  .gp-phone-actions,
  .gp-monitor-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .gp-phone-action,
  .gp-monitor-call,
  .gp-monitor-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
    white-space: nowrap;
  }
  .gp-phone-action.call,
  .gp-monitor-call {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
  }
  .gp-phone-action.whatsapp,
  .gp-monitor-whatsapp {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
  }
  .gp-monitor-contact-actions {
    justify-content: flex-end;
  }
  @media (max-width: 720px) {
    .gp-monitor-contact-actions {
      justify-content: flex-start;
    }
    .gp-monitor-contact-actions .gp-monitor-call,
    .gp-monitor-contact-actions .gp-monitor-whatsapp {
      min-width: 92px;
    }
  }

/* ===== multi-organisation-styles ===== */
.organisation-field { margin-bottom: 16px; }
  .organisation-select-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .organisation-select-row select { width: 100%; min-width: 0; border: 1px solid #d1d5db; border-radius: 14px; padding: 14px; background: #fff; color: #111827; font-size: 16px; font-weight: 800; }
  .organisation-manage-button { width: auto; padding: 12px 14px; background: #e2e8f0; color: #1e293b; white-space: nowrap; }
  .organisation-manage-button:hover { background: #cbd5e1; }
  .organisation-active-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 9px; border-radius: 999px; background: #eff6ff; color: #1e40af; font-size: 12px; font-weight: 900; }
  .organisation-modal { position: fixed; inset: 0; z-index: 12000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15,23,42,.52); backdrop-filter: blur(8px); }
  .organisation-modal.open { display: flex; }
  .organisation-modal-card { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 20px; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(15,23,42,.3); }
  .organisation-modal-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
  .organisation-modal-top h2 { margin: 0 0 5px; }
  .organisation-modal-top p { margin: 0; color: #64748b; line-height: 1.4; }
  .organisation-close { width: 42px; height: 42px; padding: 0; border-radius: 999px; background: #e2e8f0; color: #0f172a; font-size: 24px; }
  .organisation-profile-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .organisation-profile-pill { width: auto; padding: 9px 12px; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; }
  .organisation-profile-pill.active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
  .organisation-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .organisation-form-grid .wide { grid-column: 1 / -1; }
  .organisation-form-grid label { display: block; margin-bottom: 6px; color: #475569; font-size: 12px; font-weight: 900; }
  .organisation-form-grid input, .organisation-form-grid select { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 14px; background: #fff; color: #111827; font-size: 14px; }
  .organisation-colour-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
  .organisation-colour-grid input[type="color"] { width: 100%; min-height: 48px; padding: 4px; cursor: pointer; }
  .organisation-advanced { grid-column: 1 / -1; padding: 12px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; }
  .organisation-advanced summary { cursor: pointer; color: #334155; font-weight: 900; }
  .organisation-advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
  .organisation-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .organisation-modal-actions button { flex: 1; min-width: 130px; }
  .organisation-save { background: #16a34a; }
  .organisation-new { background: #2563eb; }
  .organisation-delete { background: #b91c1c; }
  .organisation-help { margin-top: 12px; padding: 11px 12px; border-radius: 14px; background: #fffbeb; color: #854d0e; font-size: 13px; line-height: 1.45; }
  .header { background: linear-gradient(135deg, var(--org-header-start, #0f172a), var(--org-header-end, #1e3a8a)); }
  .login-shell { background: linear-gradient(180deg, var(--org-login-background, #eef5ff) 0%, var(--bg) 100%); }
  .wotter-photo-stage.organisation-image-hidden { display: none; }
  @media (max-width: 600px) {
    .organisation-select-row { grid-template-columns: 1fr; }
    .organisation-manage-button { width: 100%; }
    .organisation-form-grid, .organisation-advanced-grid, .organisation-colour-grid { grid-template-columns: 1fr 1fr; }
  }

/* ===== admin-menu-scroll-fix-style ===== */
/* Admin menu scroll fix
     The 3 dot menu can become taller than the screen when admin controls,
     station progress, delete tools and audit buttons are visible. Keep it
     inside the viewport and allow the content to scroll. */
  .bottom-user-menu {
    max-height: calc(100dvh - 28px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-padding-top: 14px;
    scroll-padding-bottom: 14px;
  }

  @supports not (height: 100dvh) {
    .bottom-user-menu {
      max-height: calc(100vh - 28px) !important;
    }
  }

  .bottom-user-menu.open {
    transform: translateX(-50%) translateY(0) !important;
  }

  .bottom-user-menu .bottom-sheet-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-top: 1px solid #e5e7eb;
    padding-top: 10px;
    margin-top: 10px;
    border-radius: 0 0 22px 22px;
  }

  .admin-station-progress-panel {
    max-height: 42dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }

  @supports not (height: 100dvh) {
    .admin-station-progress-panel {
      max-height: 42vh;
    }
  }

  .admin-progress-list,
  .admin-ticket-progress-list {
    padding-bottom: 4px;
  }

  @media (min-width: 760px) {
    .bottom-user-menu {
      bottom: 18px !important;
      max-height: calc(100dvh - 36px) !important;
    }
  }

  @media (max-width: 600px) {
    .bottom-user-menu {
      bottom: 10px !important;
      width: calc(100% - 20px) !important;
      max-height: calc(100dvh - 20px) !important;
      border-radius: 24px !important;
    }

    .admin-station-progress-panel {
      max-height: 38dvh;
    }
  }

/* ===== admin-menu-two-column-style ===== */
/* Admin menu two column layout for tablet, desktop and laptop screens.
     This uses the wider screen instead of forcing the admin to scroll a tall bottom sheet. */
  @media (min-width: 760px) {
    .bottom-user-menu {
      width: min(900px, calc(100vw - 44px)) !important;
      max-height: calc(100dvh - 36px) !important;
      display: grid !important;
      grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
      gap: 12px !important;
      align-items: start !important;
      padding: 14px !important;
      border-radius: 32px !important;
    }

    @supports not (height: 100dvh) {
      .bottom-user-menu {
        max-height: calc(100vh - 36px) !important;
      }
    }

    .bottom-user-menu .bottom-sheet-handle {
      grid-column: 1 / -1;
      margin: 2px auto 4px !important;
    }

    .bottom-user-menu > .bottom-sheet-user-card:not(.station-switch-card),
    .bottom-user-menu > .station-switch-card,
    .bottom-user-menu > #founderPanel {
      grid-column: 1;
      margin-bottom: 0 !important;
    }

    .bottom-user-menu > #operatorStatsPanel {
      grid-column: 2;
      grid-row: 2 / span 4;
      min-width: 0;
    }

    .bottom-user-menu > #operatorStatsPanel:empty {
      display: none;
    }

    .bottom-user-menu > #operatorStatsPanel:empty + .bottom-sheet-actions {
      grid-column: 1 / -1;
    }

    .bottom-user-menu .admin-station-progress-panel {
      max-height: min(64dvh, 580px) !important;
      overflow-y: auto !important;
      padding-right: 2px;
    }

    .bottom-user-menu .bottom-sheet-actions {
      grid-column: 1 / -1;
      position: sticky !important;
      bottom: 0 !important;
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px !important;
      margin-top: 0 !important;
      padding: 10px !important;
      border-radius: 22px !important;
      background: rgba(255, 255, 255, 0.98) !important;
    }

    .bottom-user-menu .bottom-sheet-actions button {
      min-height: 48px;
      padding: 12px 10px !important;
      font-size: 14px !important;
      white-space: normal;
    }
  }

  @media (min-width: 760px) and (max-width: 980px) {
    .bottom-user-menu {
      width: min(820px, calc(100vw - 32px)) !important;
      grid-template-columns: minmax(250px, 0.92fr) minmax(320px, 1.08fr);
      gap: 10px !important;
    }

    .bottom-user-menu .bottom-sheet-actions {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 759px) {
    .bottom-user-menu {
      display: block !important;
    }
  }

/* ===== mobile-admin-menu-compact-actions-style ===== */
/* Mobile 3 dot menu action cleanup
     Admin users have more actions, so the mobile menu uses a compact two column grid
     instead of one long stack of oversized buttons. */
  @media (max-width: 759px) {
    .bottom-user-menu {
      width: calc(100% - 18px) !important;
      max-height: calc(100dvh - 18px) !important;
      padding: 10px !important;
      border-radius: 24px !important;
    }

    @supports not (height: 100dvh) {
      .bottom-user-menu {
        max-height: calc(100vh - 18px) !important;
      }
    }

    .bottom-user-menu .bottom-sheet-actions {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px !important;
      position: sticky !important;
      bottom: 0 !important;
      z-index: 8 !important;
      margin: 8px -2px 0 !important;
      padding: 8px 0 0 !important;
      background: rgba(255, 255, 255, 0.98) !important;
      backdrop-filter: blur(12px) !important;
      border-top: 1px solid #e5e7eb !important;
      border-radius: 0 0 20px 20px !important;
    }

    .bottom-user-menu .bottom-sheet-actions button {
      width: 100% !important;
      min-height: 46px !important;
      padding: 9px 8px !important;
      border-radius: 14px !important;
      font-size: 13px !important;
      line-height: 1.15 !important;
      white-space: normal !important;
      box-shadow: none !important;
    }

    #gpMenuGuideButton { order: 10; }
    #viewStationProgressButton { order: 20; }
    #downloadAuditReportButton { order: 30; }
    #backendAttendanceButton { order: 40; }
    #userRightsSheetButton { order: 50; }
    #switchUserButton { order: 60; }
    #clearAttendanceButton { order: 90; }
    #closeUserMenuButton { order: 100; }

    .bottom-user-menu .bottom-sheet-user-card {
      padding: 11px !important;
      border-radius: 18px !important;
      margin-bottom: 8px !important;
    }

    .bottom-sheet-avatar {
      width: 38px !important;
      height: 38px !important;
      font-size: 19px !important;
    }

    .bottom-sheet-name {
      font-size: 17px !important;
    }

    .admin-station-progress-panel,
    #operatorStatsPanel {
      margin-bottom: 8px !important;
    }
  }

  @media (max-width: 360px) {
    .bottom-user-menu .bottom-sheet-actions button {
      min-height: 44px !important;
      padding: 8px 6px !important;
      font-size: 12px !important;
    }
  }

/* ===== gatepass-cleanup-style ===== */
/* Cleanup: compact type progress inside group cards. The full header is still used only for the stats panel. */
  .family-ticket-summary.clean-ticket-summary {
    display: block;
    margin: 0 0 12px 0;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 8px 0;
    border-bottom: 0;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-name {
    white-space: normal;
    font-size: 13px;
    line-height: 1.25;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-meta {
    font-size: 12px;
    white-space: nowrap;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-bar {
    grid-column: 1 / -1;
    height: 8px;
  }

  @media (max-width: 600px) {
    .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row {
      grid-template-columns: 1fr;
      gap: 6px;
    }

    .family-ticket-summary.clean-ticket-summary .ticket-breakdown-meta {
      white-space: normal;
    }
  }

/* ===== gatepass-quantity-left-style ===== */
/* Quantity visibility upgrade: show completed count on the left and focus attention on the item type. */
  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 12px 0;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact .ticket-breakdown-meta {
    grid-column: 1;
    grid-row: 1;
    min-width: 78px;
    padding: 9px 12px;
    border-radius: 18px;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact .ticket-breakdown-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact .ticket-breakdown-name {
    font-size: 18px;
    line-height: 1.28;
    font-weight: 950;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact .ticket-breakdown-sub {
    display: none;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact .ticket-breakdown-count {
    font-size: 22px;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact .ticket-breakdown-count-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact .ticket-breakdown-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 12px;
    margin-top: 2px;
  }

  @media (max-width: 600px) {
    .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact {
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px 10px;
      padding: 13px 0;
    }

    .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact .ticket-breakdown-meta {
      min-width: 72px;
      padding: 8px 10px;
      white-space: nowrap;
    }

    .family-ticket-summary.clean-ticket-summary .ticket-breakdown-row.ticket-breakdown-row-compact .ticket-breakdown-name {
      font-size: 19px;
    }
  }

/* ===== gatepass-admin-panel-station-main-style ===== */
/* Streamlined user menu. Admin tools are now moved into their own Admin Panel. */
  #bottomUserMenu.gp-user-menu-clean {
    width: min(440px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 28px) !important;
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    padding: 12px !important;
    border-radius: 28px !important;
  }

  @supports not (height: 100dvh) {
    #bottomUserMenu.gp-user-menu-clean {
      max-height: calc(100vh - 28px) !important;
    }
  }

  #bottomUserMenu.gp-user-menu-clean #operatorStatsPanel,
  #bottomUserMenu.gp-user-menu-clean #adminStationProgressPanel,
  #bottomUserMenu.gp-user-menu-clean #viewStationProgressButton,
  #bottomUserMenu.gp-user-menu-clean #downloadAuditReportButton,
  #bottomUserMenu.gp-user-menu-clean #clearAttendanceButton,
  #bottomUserMenu.gp-user-menu-clean #backendAttendanceButton,
  #bottomUserMenu.gp-user-menu-clean #userRightsSheetButton {
    display: none !important;
  }

  #bottomUserMenu.gp-user-menu-clean .bottom-sheet-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    position: static !important;
    padding: 8px 0 0 !important;
    margin-top: 8px !important;
    border-top: 1px solid #e5e7eb !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  #bottomUserMenu.gp-user-menu-clean .bottom-sheet-actions button {
    min-height: 46px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    box-shadow: none !important;
  }

  #gpOpenAdminPanelButton {
    background: #1e40af !important;
    color: #ffffff !important;
  }

  #gpOpenAdminPanelButton:hover {
    background: #1d4ed8 !important;
  }

  #bottomUserMenu.gp-user-menu-clean #closeUserMenuButton {
    background: #64748b !important;
  }

  #bottomUserMenu.gp-user-menu-clean #switchUserButton {
    background: #111827 !important;
  }

  #bottomUserMenu.gp-user-menu-clean #gpMenuGuideButton {
    background: #2563eb !important;
  }

  @media (max-width: 420px) {
    #bottomUserMenu.gp-user-menu-clean .bottom-sheet-actions button {
      min-height: 44px !important;
      padding: 9px 8px !important;
      font-size: 13px !important;
    }
  }

  /* Main screen station control */
  #gpMainStationControl.panel {
    padding: 13px !important;
    margin-bottom: 12px !important;
    background: linear-gradient(135deg, #ffffff, #eff6ff) !important;
    border: 1px solid #bfdbfe !important;
  }

  .gp-main-station-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .gp-main-station-label,
  .gp-admin-mini-label {
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 4px;
  }

  .gp-main-station-name,
  .gp-admin-station-name {
    font-size: 18px;
    font-weight: 950;
    line-height: 1.15;
    color: #0f172a;
  }

  #gpMainStationChangeButton {
    width: auto !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    background: #111827 !important;
    flex-shrink: 0;
  }

  .gp-main-station-select {
    width: 100%;
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: #0f172a;
    border-radius: 15px;
    padding: 11px 12px;
    font-size: 15px;
    font-weight: 900;
    outline: none;
  }

  .gp-main-station-select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  }

  .gp-main-station-select:disabled {
    background: #f1f5f9;
    color: #64748b;
  }

  .gp-main-station-note {
    margin-top: 7px;
    font-size: 11px !important;
    color: #64748b;
    font-weight: 800;
    line-height: 1.25;
  }

  /* Admin panel */
  .gp-admin-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(5px);
    z-index: 10002;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }

  .gp-admin-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }

  .gp-admin-menu {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%) translateY(110%);
    width: min(960px, calc(100vw - 28px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 10003;
    opacity: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 30px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.30);
    padding: 14px;
    transition: transform 0.22s ease, opacity 0.18s ease;
  }

  @supports not (height: 100dvh) {
    .gp-admin-menu {
      max-height: calc(100vh - 32px);
    }
  }

  .gp-admin-menu.open {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .gp-admin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border: 1px solid #bfdbfe;
    margin-bottom: 12px;
  }

  .gp-admin-kicker {
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1d4ed8;
    margin-bottom: 4px;
  }

  .gp-admin-title {
    font-size: 24px;
    line-height: 1.1;
    font-weight: 950;
    color: #0f172a;
  }

  .gp-admin-user-line {
    margin-top: 5px;
    font-size: 13px;
    font-weight: 850;
    color: #475569;
  }

  .gp-admin-close-top {
    width: auto !important;
    min-width: 80px;
    min-height: 40px !important;
    padding: 9px 13px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    background: #64748b !important;
  }

  .gp-admin-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
    gap: 12px;
    align-items: start;
  }

  .gp-admin-left,
  .gp-admin-right {
    display: grid;
    gap: 10px;
    min-width: 0;
  }

  .gp-admin-section,
  .gp-admin-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 12px;
  }

  .gp-admin-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 950;
    color: #0f172a;
    margin-bottom: 10px;
  }

  .gp-admin-section-sub {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    line-height: 1.3;
    margin-top: -4px;
    margin-bottom: 10px;
  }

  .gp-admin-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .gp-admin-action-grid.one-col {
    grid-template-columns: 1fr;
  }

  .gp-admin-action {
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.15 !important;
    box-shadow: none !important;
    white-space: normal !important;
  }

  .gp-admin-action.primary { background: #2563eb !important; }
  .gp-admin-action.dark { background: #111827 !important; }
  .gp-admin-action.green { background: #16a34a !important; }
  .gp-admin-action.grey { background: #64748b !important; }
  .gp-admin-action.red { background: #dc2626 !important; }
  .gp-admin-action.red:hover { background: #b91c1c !important; }

  .gp-admin-note {
    color: #475569;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.4;
  }

  .gp-admin-note strong {
    display: block;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 4px;
  }

  .gp-admin-progress-mount .admin-station-progress-panel {
    display: block !important;
    max-height: min(58dvh, 560px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .gp-admin-progress-mount .admin-progress-list,
  .gp-admin-progress-mount .admin-ticket-progress-list {
    padding-bottom: 2px;
  }

  @media (min-width: 760px) and (max-width: 920px) {
    .gp-admin-menu {
      width: min(880px, calc(100vw - 24px));
    }

    .gp-admin-layout {
      grid-template-columns: minmax(240px, 0.86fr) minmax(320px, 1.14fr);
      gap: 10px;
    }
  }

  @media (max-width: 759px) {
    .gp-admin-menu {
      bottom: 10px;
      width: calc(100vw - 18px);
      max-height: calc(100dvh - 18px);
      padding: 10px;
      border-radius: 24px;
    }

    @supports not (height: 100dvh) {
      .gp-admin-menu {
        max-height: calc(100vh - 18px);
      }
    }

    .gp-admin-header {
      padding: 12px;
      border-radius: 19px;
      margin-bottom: 10px;
    }

    .gp-admin-title {
      font-size: 21px;
    }

    .gp-admin-layout {
      display: block;
    }

    .gp-admin-left,
    .gp-admin-right {
      gap: 8px;
    }

    .gp-admin-left {
      margin-bottom: 8px;
    }

    .gp-admin-section,
    .gp-admin-card {
      padding: 10px;
      border-radius: 18px;
      margin-bottom: 8px;
    }

    .gp-admin-action-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
    }

    .gp-admin-action {
      min-height: 42px !important;
      padding: 9px 8px !important;
      border-radius: 13px !important;
      font-size: 13px !important;
    }

    .gp-admin-progress-mount .admin-station-progress-panel {
      max-height: 42dvh !important;
    }
  }

/* ===== left-column-operator-optimisation-v1 ===== */
/* Keep the ticket type filter and search usable on laptop and desktop screens. */
  @media (min-width: 980px) {
    #mainApp.app {
      grid-template-rows: 86px minmax(0, 1fr) !important;
      gap: 10px !important;
      padding: 10px 12px !important;
    }

    #mainApp .header {
      min-height: 0 !important;
      padding: 10px 14px !important;
      border-radius: 18px !important;
    }

    #mainApp .brand-badge {
      padding: 3px 8px !important;
      font-size: 8.5px !important;
      margin-bottom: 3px !important;
    }

    #mainApp .brand-title {
      font-size: 22px !important;
      line-height: 1 !important;
    }

    #mainApp .brand-sub {
      font-size: 11px !important;
      line-height: 1.1 !important;
      margin-top: 3px !important;
    }

    #mainApp .desktop-control-column {
      min-height: 0 !important;
      overflow: hidden !important;
      display: grid !important;
      grid-template-rows: auto minmax(0, 1fr) !important;
      gap: 8px !important;
      padding: 0 !important;
    }

    #mainApp .desktop-control-column > .panel {
      min-height: 0 !important;
      margin: 0 !important;
      padding: 10px !important;
      border-radius: 16px !important;
    }

    #mainApp .desktop-control-column > .panel:first-child {
      overflow: visible !important;
    }

    #mainApp .desktop-control-column > .panel:last-child {
      overflow-y: auto !important;
      overflow-x: hidden !important;
      padding-bottom: 12px !important;
    }

    #mainApp .desktop-control-column > .panel:last-child::-webkit-scrollbar {
      width: 8px;
    }

    #mainApp .desktop-control-column > .panel:last-child::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 999px;
    }

    #mainApp .stats,
    #mainApp .apple-stats-grid {
      gap: 6px !important;
    }

    #mainApp .stat-card,
    #mainApp .apple-stat-card {
      min-height: 58px !important;
      padding: 8px 7px !important;
      border-radius: 12px !important;
    }

    #mainApp .stat-number,
    #mainApp .apple-stat-value,
    #totalTickets,
    #attendedTickets,
    #remainingTickets,
    #completionPercent {
      font-size: 22px !important;
      margin-bottom: 2px !important;
    }

    #mainApp .stat-card div:last-child,
    #mainApp .apple-stat-label {
      font-size: 10px !important;
      line-height: 1.1 !important;
      letter-spacing: 0.04em !important;
    }

    #lastSyncTime {
      display: none !important;
    }

    #mainApp .stats-guide {
      margin-top: 6px !important;
      padding: 6px 8px !important;
      font-size: 10.5px !important;
      line-height: 1.15 !important;
    }

    #mainApp .panel:has(.search-row)::before {
      margin-bottom: 8px !important;
      font-size: 11px !important;
    }

    #startScannerButton,
    #stopScannerButton,
    button.secondary {
      min-height: 38px !important;
      padding: 8px 10px !important;
      font-size: 13px !important;
      border-radius: 13px !important;
      margin-bottom: 8px !important;
    }

    #qrReader {
      max-height: 160px !important;
      margin-bottom: 6px !important;
    }

    #mainApp .search-guide {
      padding: 6px 8px !important;
      margin: 8px 0 !important;
      font-size: 10.5px !important;
      line-height: 1.15 !important;
      border-radius: 12px !important;
    }

    #ticketTypeZoneFilterWrap {
      margin: 0 0 8px !important;
      padding: 9px !important;
      border-radius: 14px !important;
    }

    #ticketTypeZoneFilterWrap .ticket-type-zone-filter-top {
      display: block !important;
      margin-bottom: 6px !important;
    }

    #ticketTypeZoneFilterWrap .ticket-type-zone-title {
      font-size: 13px !important;
      margin-bottom: 2px !important;
    }

    #ticketTypeZoneFilterWrap .ticket-type-zone-sub,
    #ticketTypeZoneFilterWrap .ticket-type-zone-current,
    #ticketTypeZoneFilterWrap .ticket-type-zone-badge {
      display: none !important;
    }

    #ticketTypeZoneFilter {
      min-height: 38px !important;
      padding: 9px 10px !important;
      border-radius: 12px !important;
      font-size: 13px !important;
      line-height: 1.15 !important;
    }

    #mainApp .search-row {
      gap: 7px !important;
    }

    #searchInput {
      min-height: 38px !important;
      padding: 9px 34px 9px 11px !important;
      border-radius: 12px !important;
      font-size: 13px !important;
    }

    #searchButton {
      min-height: 38px !important;
      padding: 8px 10px !important;
      border-radius: 12px !important;
      font-size: 13px !important;
    }

    .pending-add-button {
      min-height: 38px !important;
      margin-top: 7px !important;
      padding: 8px 10px !important;
      border-radius: 12px !important;
      font-size: 12.5px !important;
    }

    #mainApp .small-text {
      margin-top: 6px !important;
      font-size: 10.5px !important;
      line-height: 1.15 !important;
    }
  }

  @media (min-width: 1280px) {
    #mainApp.app {
      grid-template-columns: 400px minmax(0, 1fr) !important;
    }
    .bulk-action-bar {
      width: 400px !important;
    }
  }

/* ===== gpUserNoticeStyle ===== */
.gp-user-notice-backdrop{
    position:fixed;
    inset:0;
    z-index:30000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:rgba(15,23,42,0.42);
    backdrop-filter:blur(8px);
  }
  .gp-user-notice-backdrop.open{display:flex;}
  .gp-user-notice-card{
    width:min(520px,100%);
    max-height:min(78vh,620px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:26px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    box-shadow:0 28px 80px rgba(15,23,42,0.28);
    animation:gpNoticeIn 0.18s ease-out;
  }
  .gp-user-notice-head{
    padding:18px 18px 14px;
    background:linear-gradient(135deg,#eff6ff,#ffffff);
    border-bottom:1px solid #e5e7eb;
  }
  .gp-user-notice-kicker{
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:#2563eb;
    margin-bottom:6px;
  }
  .gp-user-notice-title{
    font-size:22px;
    line-height:1.18;
    font-weight:950;
    color:#0f172a;
    margin:0;
  }
  .gp-user-notice-body{
    padding:18px;
    overflow:auto;
    color:#111827;
    font-size:16px;
    line-height:1.55;
    white-space:normal;
  }
  .gp-user-notice-body p{margin:0 0 10px;}
  .gp-user-notice-body p:last-child{margin-bottom:0;}
  .gp-user-notice-actions{
    padding:14px 18px 18px;
    border-top:1px solid #e5e7eb;
    background:#f8fafc;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }
  .gp-user-notice-actions button{
    width:100%;
    border-radius:16px;
    padding:14px;
    font-size:16px;
    font-weight:950;
  }
  .gp-user-notice-note{
    font-size:12px;
    color:#64748b;
    font-weight:800;
    text-align:center;
  }
  @keyframes gpNoticeIn{
    from{opacity:0; transform:translateY(10px) scale(0.985);}
    to{opacity:1; transform:translateY(0) scale(1);}
  }

/* ===== gpUserNoticeMenuInlineStyle ===== */
.gp-menu-notice-card{
    display:none;
    margin: 0 0 10px 0;
    padding: 13px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
    border: 1px solid #fed7aa;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  }
  .gp-menu-notice-card.open{display:block;}
  .gp-menu-notice-kicker{
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9a3412;
    margin-bottom: 5px;
  }
  .gp-menu-notice-title{
    font-size: 16px;
    font-weight: 950;
    color: #0f172a;
    margin-bottom: 8px;
  }
  .gp-menu-notice-body{
    font-size: 14px;
    font-weight: 750;
    color: #334155;
    line-height: 1.45;
  }
  .gp-menu-notice-body p{margin:0 0 8px;}
  .gp-menu-notice-body p:last-child{margin-bottom:0;}
  .gp-menu-notice-note{
    margin-top: 10px;
    font-size: 12px;
    font-weight: 900;
    color: #1e40af;
  }

/* ===== gp-offline-protection-style ===== */
#gpOfflineBanner {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30000;
    align-items: center;
    justify-content: center;
    padding: 22px;
    color: #0f172a;
    background:
      radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--blue) 42%, #ffffff), transparent 34%),
      rgba(15, 23, 42, .86);
    backdrop-filter: blur(12px);
    text-align: center;
  }
  body.gp-offline #gpOfflineBanner {
    display: flex;
  }
  .gp-offline-card {
    width: min(440px, 100%);
    padding: 30px 26px 26px;
    border: 4px solid var(--blue);
    border-radius: 28px;
    background: #ffffff;
    box-shadow:
      0 28px 90px rgba(0, 0, 0, .42),
      0 0 0 8px rgba(var(--org-primary-rgb), .14);
  }
  .gp-offline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin: 0 auto 16px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    box-shadow: 0 12px 28px rgba(var(--org-primary-rgb), .32);
    font-size: 38px;
  }
  .gp-offline-kicker {
    margin-bottom: 8px;
    color: var(--org-primary-deep);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .12em;
  }
  .gp-offline-card h2 {
    margin: 0 0 10px;
    color: #0f172a;
    font-size: clamp(27px, 6vw, 38px);
    font-weight: 950;
    line-height: 1.05;
  }
  .gp-offline-card p {
    margin: 0 0 20px;
    color: #475569;
    font-size: 16px;
    line-height: 1.5;
  }
  .gp-offline-card p strong {
    color: var(--org-primary-deep);
    font-size: 18px;
  }
  #gpRetryConnectionButton {
    width: 100%;
    min-height: 54px;
    border: 0;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    box-shadow: 0 10px 22px rgba(var(--org-primary-rgb), .28);
    font-size: 16px;
    font-weight: 950;
  }
  #gpRetryConnectionButton:disabled {
    opacity: .7;
  }
  body.gp-offline #bulkSubmitButton,
  body.gp-offline #pendingSubmitButton,
  body.gp-offline .action-button.ready,
  body.gp-offline .group-select-button {
    box-shadow: 0 0 0 3px rgba(var(--org-primary-rgb), .18) !important;
  }
  @media (max-width: 600px) {
    #gpOfflineBanner {
      padding: 16px;
    }
    .gp-offline-card {
      padding: 26px 20px 20px;
      border-radius: 24px;
    }
    .gp-offline-icon {
      width: 72px;
      height: 72px;
      font-size: 34px;
    }
  }

/* ===== selection-tray-final-v1 ===== */
body.has-pending-selection {
    padding-bottom: 120px !important;
  }

  #bulkActionBar.bulk-action-bar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: min(760px, calc(100% - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.36) !important;
    z-index: 20050 !important;
    color: #ffffff !important;
    backdrop-filter: blur(14px) !important;
  }

  body:not(.has-pending-selection) #bulkActionBar.bulk-action-bar {
    display: none !important;
  }

  #bulkActionBar .bulk-summary {
    color: #ffffff !important;
    min-width: 0 !important;
    white-space: normal !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }

  #bulkActionBar .bulk-title {
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: -0.1px !important;
  }

  #bulkActionBar .bulk-pending-text {
    margin-top: 2px !important;
    color: #bbf7d0 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
  }

  #bulkActionBar .bulk-warning-text {
    margin-top: 3px !important;
    color: #fde68a !important;
    font-size: 12px !important;
    font-weight: 850 !important;
  }

  #bulkActionBar .bulk-clear,
  #bulkActionBar .bulk-submit {
    width: auto !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
    border-radius: 16px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  #bulkActionBar .bulk-clear {
    background: #475569 !important;
    color: #ffffff !important;
  }

  #bulkActionBar .bulk-submit {
    background: #16a34a !important;
    color: #ffffff !important;
    min-width: 150px !important;
    box-shadow: 0 10px 24px rgba(22, 163, 74, 0.30) !important;
  }

  #bulkActionBar .bulk-submit:hover {
    background: #15803d !important;
  }

  .result-card.selected-ticket-card,
  .family-summary-card.selected-family {
    border-color: #2563eb !important;
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.18) !important;
  }

  .result-card.selected-ticket-card .select-row,
  .family-summary-card.selected-family .family-summary-actions {
    background: #dbeafe !important;
    border-color: #93c5fd !important;
  }

  .result-card.selected-ticket-card .select-row {
    color: #1d4ed8 !important;
  }

  @media (max-width: 600px) {
    body.has-pending-selection {
      padding-bottom: 185px !important;
    }

    #bulkActionBar.bulk-action-bar {
      left: 10px !important;
      right: 10px !important;
      bottom: 10px !important;
      transform: none !important;
      width: auto !important;
      grid-template-columns: 1fr 1fr !important;
      border-radius: 20px !important;
    }

    #bulkActionBar .bulk-summary {
      grid-column: 1 / -1 !important;
    }

    #bulkActionBar .bulk-clear,
    #bulkActionBar .bulk-submit {
      width: 100% !important;
    }
  }

/* ===== gpCombinedStatsMonitorStyle ===== */
#gpCheckInMonitorCard{
    display:none !important;
  }
  #mainApp .stats-guide{
    display:none !important;
  }
  .stats-guide.gp-combined-monitor-guide{
    display:none !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:12px 14px !important;
    background:linear-gradient(135deg,#eff6ff,#ffffff) !important;
    border-color:#bfdbfe !important;
  }
  .gp-combined-monitor-info{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-width:0;
  }
  .gp-combined-monitor-copy{
    min-width:0;
  }
  .gp-combined-monitor-title{
    font-size:13px;
    font-weight:950;
    color:#0f172a;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .gp-combined-monitor-sub{
    margin-top:3px;
    font-size:12px;
    font-weight:850;
    color:#64748b;
    line-height:1.3;
  }
  .gp-combined-monitor-sub strong{
    color:#1e40af;
  }
  .gp-combined-monitor-actions{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .gp-combined-show-missing{
    padding:10px 12px !important;
    border-radius:14px !important;
    background:#16a34a !important;
    color:#ffffff !important;
    font-size:13px !important;
    font-weight:950 !important;
    white-space:nowrap;
    box-shadow:0 8px 18px rgba(22,163,74,.18);
  }
  .gp-combined-show-missing:hover{
    background:#15803d !important;
  }
  @media(max-width:640px){
    .stats-guide.gp-combined-monitor-guide{
      grid-template-columns:1fr;
      gap:9px;
    }
    .gp-combined-monitor-actions{
      width:100%;
    }
    .gp-combined-show-missing{
      width:100%;
    }
  }
  @media(min-width:980px){
    .stats-guide.gp-combined-monitor-guide{
      padding:9px 10px !important;
      border-radius:15px !important;
      gap:8px;
    }
    .gp-combined-monitor-title{font-size:12px;}
    .gp-combined-monitor-sub{font-size:10.5px;}
    .gp-combined-show-missing{padding:8px 10px !important;font-size:11.5px !important;border-radius:12px !important;}
  }

/* ===== gp-mobile-search-prominence-v1 ===== */
@media (max-width: 600px) {
    #mainApp .desktop-control-column {
      display: flex !important;
      flex-direction: column !important;
    }

    #mainApp .desktop-control-column > .panel:has(.search-row) {
      order: -1;
      padding: 14px !important;
      border: 2px solid rgba(37, 99, 235, 0.34) !important;
      background: #ffffff !important;
      box-shadow: 0 14px 32px rgba(37, 99, 235, 0.14) !important;
    }

    #mainApp .panel:has(.search-row)::before {
      color: var(--blue) !important;
      font-size: 13px !important;
      margin-bottom: 10px !important;
    }

    #mainApp .search-input-wrap {
      min-height: 58px !important;
      padding: 4px 8px 4px 16px !important;
      border: 2px solid var(--blue) !important;
      border-radius: 17px !important;
      background: #ffffff !important;
      box-shadow: 0 7px 18px rgba(37, 99, 235, 0.12) !important;
    }

    #mainApp #searchInput {
      min-height: 52px !important;
      padding: 13px 42px 13px 0 !important;
      border: 0 !important;
      font-size: 16px !important;
      font-weight: 850 !important;
      color: #0f172a !important;
    }

    #mainApp #searchInput::placeholder {
      color: #475569 !important;
      opacity: 1 !important;
      font-weight: 750 !important;
    }

    #mainApp #searchButton {
      min-height: 52px !important;
      border-radius: 16px !important;
      font-size: 16px !important;
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24) !important;
    }
  }

/* ===== gp-family-card-colour-sequence-v1 ===== */
#results .family-summary-card.family-colour-sequence {
    border-left: 8px solid var(--family-sequence) !important;
  }
  #results .family-summary-card.family-colour-sequence .family-summary-main {
    box-shadow: inset 0 5px 0 var(--family-sequence) !important;
  }
  #results .family-summary-card.family-colour-sequence .family-expand {
    background: var(--family-sequence-soft) !important;
    border-color: var(--family-sequence) !important;
    color: var(--family-sequence-deep) !important;
  }
  #results .family-card-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  #results .family-sequence-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 9px;
    border: 1px solid var(--family-sequence);
    border-radius: 999px;
    background: var(--family-sequence-deep);
    color: #ffffff;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
  }
  #results .family-colour-1 {
    --family-sequence: var(--org-sequence-1);
    --family-sequence-soft: var(--org-sequence-soft-1);
    --family-sequence-deep: var(--org-sequence-deep-1);
  }
  #results .family-colour-2 {
    --family-sequence: var(--org-sequence-2);
    --family-sequence-soft: var(--org-sequence-soft-2);
    --family-sequence-deep: var(--org-sequence-deep-2);
  }
  #results .family-colour-3 {
    --family-sequence: var(--org-sequence-3);
    --family-sequence-soft: var(--org-sequence-soft-3);
    --family-sequence-deep: var(--org-sequence-deep-3);
  }
  #results .family-colour-4 {
    --family-sequence: var(--org-sequence-4);
    --family-sequence-soft: var(--org-sequence-soft-4);
    --family-sequence-deep: var(--org-sequence-deep-4);
  }
  #results .family-colour-5 {
    --family-sequence: var(--org-sequence-5);
    --family-sequence-soft: var(--org-sequence-soft-5);
    --family-sequence-deep: var(--org-sequence-deep-5);
  }
  #results .family-colour-6 {
    --family-sequence: var(--org-sequence-6);
    --family-sequence-soft: var(--org-sequence-soft-6);
    --family-sequence-deep: var(--org-sequence-deep-6);
  }
  @media (max-width: 540px) {
    #results .family-card-identity {
      gap: 6px;
    }
    #results .family-sequence-number {
      min-height: 28px;
      padding: 5px 8px;
      font-size: 10px;
    }
  }

/* ===== gp-organisation-theme-runtime-v2 ===== */
/* Keep organisation colours effective after the desktop/mobile layout overrides. */
  body {
    background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%) !important;
  }
  #loginScreen.login-shell {
    background: linear-gradient(180deg, var(--org-login-background) 0%, var(--bg) 100%) !important;
  }
  #mainApp .header {
    background: linear-gradient(135deg, var(--org-header-start), var(--org-header-end)) !important;
  }
  #mainApp .brand-title,
  #mainApp .brand-main {
    color: var(--org-header-text) !important;
  }
  .brand-highlight {
    background: linear-gradient(135deg, var(--org-header-accent), var(--org-header-accent-end)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  #mainApp .brand-sub {
    color: var(--org-header-muted) !important;
  }
  #mainApp .brand-badge {
    color: var(--org-header-chip-text) !important;
    background: var(--org-header-chip-background) !important;
    border-color: rgba(255,255,255,.34) !important;
  }
  .premium-login-button {
    background: linear-gradient(135deg, var(--blue), var(--blue-dark)) !important;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 28%, transparent) !important;
  }
  .premium-login-button:hover {
    background: linear-gradient(135deg, var(--blue-dark), var(--blue)) !important;
  }
  #mainApp #searchButton,
  #mainApp .pending-add-button,
  #mainApp .family-btn.primary,
  #mainApp .group-select-button,
  #mainApp .gp-monitor-row-actions button,
  #mainApp .gp-zone-actions button:first-child,
  #bulkActionBar .bulk-submit,
  .pending-submit,
  .gp-next-button,
  .gp-menu-guide-button,
  .sheet-admin-panel-button,
  .gp-admin-action.primary {
    background: var(--blue) !important;
  }
  #mainApp #searchButton:hover,
  #mainApp .pending-add-button:hover,
  #mainApp .family-btn.primary:hover,
  #mainApp .group-select-button:hover,
  #bulkActionBar .bulk-submit:hover {
    background: var(--blue-dark) !important;
  }
  #mainApp .family-progress-fill,
  #mainApp .ticket-breakdown-fill,
  #mainApp .gp-zone-progress span,
  #mainApp .gp-monitor-toolbar button.active,
  #mainApp .gp-monitor-compact-btn,
  .gp-admin-action.green {
    background: var(--green) !important;
  }
  #attendedTickets,
  .live-dot,
  .gp-monitor-kicker {
    color: var(--green) !important;
  }
  .live-dot {
    background: var(--green) !important;
  }
  #mainApp .search-input-wrap:focus-within,
  #mainApp #searchInput:focus,
  .premium-input-wrap:focus-within {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent) !important;
  }
  #mainApp input[type="checkbox"],
  #mainApp input[type="radio"] {
    accent-color: var(--blue) !important;
  }
  #mainApp #ticketTypeZoneFilterWrap,
  #mainApp .ticket-type-zone-filter-wrap {
    border-color: var(--org-primary-border) !important;
    background: linear-gradient(135deg, var(--org-primary-soft), #ffffff) !important;
  }
  #mainApp .ticket-type-zone-select {
    border-color: var(--org-primary-border) !important;
  }
  #mainApp .ticket-type-zone-select:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 4px rgba(var(--org-primary-rgb),.14) !important;
  }
  #mainApp .ticket-type-zone-current strong,
  #mainApp .gp-monitor-list-count,
  #mainApp .pending-modal-kicker,
  .gp-onboarding-kicker {
    color: var(--blue-dark) !important;
  }
  #mainApp .empty-mini-fill,
  #mainApp .empty-step-no,
  #mainApp .gp-onboarding-dot.active {
    background: var(--blue) !important;
  }
  #mainApp .empty-hero-kicker,
  #mainApp .ticket-type-count,
  #mainApp .clean-ticket-summary .ticket-type-count,
  #mainApp .gp-monitor-call,
  #mainApp .gp-monitor-last4,
  #mainApp .phone-action.call,
  #mainApp .organisation-active-chip {
    background: var(--org-primary-soft) !important;
    border-color: var(--org-primary-border) !important;
    color: var(--blue-dark) !important;
  }
  #mainApp .empty-hero-panel,
  #mainApp .gp-demo-box,
  #mainApp .pending-empty-card {
    border-color: var(--org-primary-border) !important;
  }
  #mainApp .gp-demo-box {
    background: linear-gradient(135deg, var(--org-primary-soft), #ffffff) !important;
  }
  #mainApp .result-card.selected-ticket-card,
  #mainApp .family-summary-card.selected-family {
    border-color: var(--blue) !important;
    box-shadow: 0 14px 34px rgba(var(--org-primary-rgb),.18) !important;
  }
  #mainApp .result-card.selected-ticket-card .select-row,
  #mainApp .family-summary-card.selected-family .family-summary-actions {
    background: var(--org-primary-soft) !important;
    border-color: var(--org-primary-border) !important;
  }
  #mainApp .family-summary-card.selected-family .family-expand,
  #mainApp .family-selected-chip {
    background: var(--blue) !important;
    border-color: var(--blue) !important;
  }
  #mainApp .search-input-wrap {
    box-shadow: 0 7px 18px rgba(var(--org-primary-rgb),.12) !important;
  }
  #mainApp #searchButton {
    box-shadow: 0 10px 22px rgba(var(--org-primary-rgb),.24) !important;
  }
  #mainApp ::-webkit-scrollbar-thumb {
    background: var(--org-primary-border);
  }
  #mainApp .gp-monitor-list > .gp-monitor-resident-row:nth-child(4n+1) {
    border-left-color: var(--blue) !important;
  }
  #mainApp .gp-monitor-list > .gp-monitor-resident-row:nth-child(4n+1) .gp-monitor-avatar {
    background: var(--org-primary-soft) !important;
    color: var(--blue-dark) !important;
  }
  #mainApp .empty-hero-panel {
    background:
      radial-gradient(circle at 14% 12%, rgba(var(--org-primary-rgb),.14), transparent 32%),
      radial-gradient(circle at 90% 20%, rgba(var(--org-primary-rgb),.08), transparent 30%),
      linear-gradient(135deg, #ffffff 0%, var(--org-primary-softer) 100%) !important;
  }
  #mainApp .clean-hero-status {
    background: var(--blue-dark) !important;
    box-shadow: 0 16px 34px rgba(var(--org-primary-rgb),.18) !important;
  }
  #mainApp .empty-panel,
  #mainApp .empty-large-stat,
  #mainApp .empty-breakdown-row,
  #mainApp .empty-recent-row,
  #mainApp .empty-step-card,
  #mainApp .empty-panel-header,
  #mainApp .results-panel {
    border-color: var(--org-primary-soft) !important;
  }
  #mainApp .empty-panel-header {
    background: linear-gradient(180deg, #ffffff, var(--org-primary-softer)) !important;
  }
  #mainApp .empty-recent-avatar,
  #mainApp .ticket-type-zone-badge.active,
  #mainApp .gp-monitor-done,
  #mainApp .gp-monitor-whatsapp,
  #mainApp .phone-action.whatsapp,
  #mainApp .status-pill.collected,
  #mainApp .family-summary-card.all-collected-family .family-expand,
  #mainApp .ticket-type-green {
    background: var(--org-success-soft) !important;
    border-color: var(--org-success-border) !important;
    color: var(--org-success-deep) !important;
  }
  #mainApp .empty-recent-time,
  #mainApp .empty-large-stat-value.green,
  #mainApp .gp-monitor-checkin-details,
  #mainApp .status-pill.collected,
  #mainApp .compact-checkin-line,
  #mainApp .checkin-title {
    color: var(--org-success-deep) !important;
  }
  #mainApp .empty-progress-fill {
    background: var(--green) !important;
  }
  #mainApp .result-card.attended,
  #mainApp .family-summary-card.all-collected-family,
  #mainApp .gp-monitor-resident-row.checked,
  #mainApp .checkin-card {
    border-color: var(--org-success-border) !important;
    background: linear-gradient(135deg, var(--org-success-softer), #ffffff) !important;
  }
  #mainApp .family-summary-card.all-collected-family .family-summary-main {
    background: linear-gradient(180deg, var(--org-success-softer), #ffffff) !important;
  }
  #mainApp .message.success {
    color: var(--org-success-deep) !important;
    background: var(--org-success-soft) !important;
    border-color: var(--org-success-border) !important;
  }
  #results .family-summary-card .family-summary-main {
    background: linear-gradient(180deg, #ffffff, var(--org-primary-softer)) !important;
  }
  #results .family-summary-card.selected-family .family-summary-main {
    background: linear-gradient(180deg, var(--org-primary-soft), var(--org-primary-softer)) !important;
  }
  #results .ticket-breakdown-meta {
    background: var(--org-primary-soft) !important;
    border-color: var(--org-primary-border) !important;
    color: var(--blue-dark) !important;
    box-shadow: 0 8px 18px rgba(var(--org-primary-rgb),.10) !important;
  }
  #results .ticket-breakdown-row-compact .ticket-breakdown-fill {
    background: var(--blue) !important;
  }
  #results .result-count {
    color: var(--blue-dark) !important;
  }
  #results .family-view-button,
  #results .family-btn.secondary {
    background: var(--org-primary-deep) !important;
    color: #ffffff !important;
  }
  #bulkActionBar.bulk-action-bar {
    background: color-mix(in srgb, var(--org-primary-deep) 94%, transparent) !important;
    box-shadow: 0 22px 70px rgba(var(--org-primary-rgb),.28) !important;
  }
  #bulkActionBar .bulk-pending-text {
    color: var(--org-primary-soft) !important;
  }
  #mainApp .ticket-type-blue,
  #mainApp .ticket-type-pink {
    background: var(--org-sequence-soft-1) !important;
    border-color: var(--org-sequence-1) !important;
    color: var(--org-sequence-deep-1) !important;
  }
  #mainApp .ticket-type-green,
  #mainApp .ticket-type-teal {
    background: var(--org-sequence-soft-2) !important;
    border-color: var(--org-sequence-2) !important;
    color: var(--org-sequence-deep-2) !important;
  }
  #mainApp .ticket-type-purple {
    background: var(--org-sequence-soft-3) !important;
    border-color: var(--org-sequence-3) !important;
    color: var(--org-sequence-deep-3) !important;
  }
  #mainApp .ticket-type-orange {
    background: var(--org-sequence-soft-4) !important;
    border-color: var(--org-sequence-4) !important;
    color: var(--org-sequence-deep-4) !important;
  }
  #mainApp .gp-monitor-list > .gp-monitor-resident-row:nth-child(4n+2) { border-left-color: var(--org-sequence-2) !important; }
  #mainApp .gp-monitor-list > .gp-monitor-resident-row:nth-child(4n+2) .gp-monitor-avatar { background: var(--org-sequence-soft-2) !important; color: var(--org-sequence-deep-2) !important; }
  #mainApp .gp-monitor-list > .gp-monitor-resident-row:nth-child(4n+3) { border-left-color: var(--org-sequence-3) !important; }
  #mainApp .gp-monitor-list > .gp-monitor-resident-row:nth-child(4n+3) .gp-monitor-avatar { background: var(--org-sequence-soft-3) !important; color: var(--org-sequence-deep-3) !important; }
  #mainApp .gp-monitor-list > .gp-monitor-resident-row:nth-child(4n+4) { border-left-color: var(--org-sequence-4) !important; }
  #mainApp .gp-monitor-list > .gp-monitor-resident-row:nth-child(4n+4) .gp-monitor-avatar { background: var(--org-sequence-soft-4) !important; color: var(--org-sequence-deep-4) !important; }
  #results .family-summary-card .ticket-breakdown-meta,
  #results .family-summary-card .select-row,
  #results .family-summary-card .status-pill.ready,
  #results .family-summary-card .ticket-name-pill,
  #results .family-summary-card .gp-phone-action,
  #results .family-summary-card .phone-action {
    background: var(--family-sequence-soft) !important;
    border-color: var(--family-sequence) !important;
    color: var(--family-sequence-deep) !important;
  }
  #results .family-summary-card .result-card.not-attended,
  #results .family-summary-card .person-card,
  #results .family-summary-card .mini-info,
  #results .family-summary-card .email-card {
    border-color: var(--family-sequence-soft) !important;
  }
  #results .family-summary-card .result-card.not-attended {
    background: linear-gradient(180deg, var(--family-sequence-soft), #ffffff 32%) !important;
    border-color: var(--family-sequence) !important;
  }
  #results .family-summary-card .status-pill.ready {
    border: 1px solid var(--family-sequence) !important;
  }
  #results .family-summary-card .person-card {
    background: linear-gradient(180deg, var(--family-sequence-soft), #ffffff) !important;
  }
  #results .family-summary-card .ticket-breakdown-row-compact .ticket-breakdown-fill,
  #results .family-summary-card .action-button.ready,
  #results .family-summary-card .group-select-button,
  #results .family-summary-card .family-btn.primary,
  #results .family-summary-card .family-selected-chip {
    background: var(--family-sequence) !important;
    border-color: var(--family-sequence) !important;
    color: #ffffff !important;
  }
  #results .family-summary-card .family-view-button,
  #results .family-summary-card .family-btn.secondary {
    background: var(--family-sequence-deep) !important;
    color: #ffffff !important;
  }
  #results .family-summary-card input[type="checkbox"],
  #results .family-summary-card input[type="radio"] {
    accent-color: var(--family-sequence) !important;
  }
  #results .family-summary-card .family-ticket-list,
  #results .family-summary-card .family-summary-actions {
    border-color: var(--family-sequence-soft) !important;
  }

/* ===== gp-ranked-live-search-style ===== */
.gp-search-guidance {
    padding: 15px;
    border: 1px solid var(--org-primary-border);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--org-primary-softer), #ffffff);
    color: #475569;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.45;
  }
  .gp-search-overview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border: 1px solid var(--org-primary-border);
    border-radius: 17px;
    background: var(--org-primary-softer);
    color: var(--org-primary-deep);
  }
  .gp-search-overview strong {
    font-size: 15px;
    font-weight: 950;
  }
  .gp-search-overview span {
    font-size: 12px;
    font-weight: 850;
  }
  .gp-search-section {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
  }
  .gp-search-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
  }
  .gp-search-section-head h3 {
    margin: 0 !important;
    color: #0f172a;
    font-size: 16px;
    font-weight: 950;
  }
  .gp-search-section-head span {
    color: #64748b;
    font-size: 12px;
    font-weight: 850;
  }
  .gp-search-section.possible {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 2px dashed #cbd5e1;
  }
  .gp-search-section.possible .gp-search-section-head h3 {
    color: #92400e;
  }
  .gp-search-match-block {
    display: grid;
    gap: 6px;
  }
  .gp-search-match-reason {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid var(--org-primary-border);
    border-radius: 999px;
    background: var(--org-primary-soft);
    color: var(--org-primary-deep);
    font-size: 11px;
    font-weight: 950;
  }
  .gp-search-section.possible .gp-search-match-reason {
    border-color: #fed7aa;
    background: #fff7ed;
    color: #9a3412;
  }
  .gp-search-no-match {
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    background: #f8fafc;
    text-align: center;
  }
  .gp-search-no-match strong {
    display: block;
    margin-bottom: 5px;
    color: #0f172a;
    font-size: 17px;
    font-weight: 950;
  }
  .gp-search-no-match span {
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
  }
  @media (max-width: 600px) {
    .gp-search-overview {
      align-items: flex-start;
      flex-direction: column;
    }
    .gp-search-section-head {
      align-items: flex-start;
    }
  }

/* ===== gp-attendance-verification-style ===== */
.gp-verification-tray {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 20040;
    width: min(620px, calc(100vw - 24px));
    min-height: 72px;
    display: none;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 2px solid var(--org-primary-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 20px 60px rgba(15, 23, 42, .24);
    transform: translateX(-50%);
    backdrop-filter: blur(16px);
  }
  .gp-verification-tray.show {
    display: grid;
  }
  .gp-verification-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--org-primary-soft);
    color: var(--org-primary-deep);
    font-size: 21px;
    font-weight: 950;
  }
  .gp-verification-tray[data-state="pending"] .gp-verification-icon {
    animation: gpVerificationPulse 1.1s ease-in-out infinite;
  }
  .gp-verification-tray[data-state="verified"] {
    border-color: #86efac;
    background: rgba(240, 253, 244, .98);
  }
  .gp-verification-tray[data-state="verified"] .gp-verification-icon {
    background: #dcfce7;
    color: #166534;
  }
  .gp-verification-tray[data-state="needed"] {
    border-color: #f59e0b;
    background: rgba(255, 251, 235, .99);
  }
  .gp-verification-tray[data-state="needed"] .gp-verification-icon {
    background: #fef3c7;
    color: #92400e;
  }
  .gp-verification-copy strong,
  .gp-verification-copy span {
    display: block;
  }
  .gp-verification-copy strong {
    color: #0f172a;
    font-size: 15px;
    font-weight: 950;
  }
  .gp-verification-copy span {
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
  }
  .gp-verification-retry {
    min-height: 42px;
    padding: 9px 13px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    color: #fff;
    font-size: 12px;
    font-weight: 950;
    white-space: nowrap;
  }
  .gp-verification-retry[hidden] {
    display: none;
  }
  .result-card.verification-pending {
    border-style: dashed !important;
  }
  .result-card.verification-pending .status-pill,
  .result-card.verification-pending .action-button {
    background: var(--org-primary-soft) !important;
    color: var(--org-primary-deep) !important;
    border-color: var(--org-primary-border) !important;
  }
  .result-card.verification-needed {
    border-color: #f59e0b !important;
    background: #fffbeb !important;
  }
  .result-card.verification-needed .status-pill,
  .result-card.verification-needed .action-button {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-color: #f59e0b !important;
  }
  @keyframes gpVerificationPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.88); opacity: .62; }
  }
  @media (max-width: 600px) {
    .gp-verification-tray {
      top: 8px;
      grid-template-columns: auto minmax(0, 1fr);
      border-radius: 17px;
    }
    .gp-verification-retry {
      grid-column: 1 / -1;
      width: 100%;
    }
  }