@font-face {
      font-family: Funnel;
      src: url('/assets/FunnelSans.ttf') format('truetype');
      font-weight: 300 800;
      font-display: swap;
    }
    @font-face {
      font-family: Shabnam;
      src: url('/assets/Shabnam.woff2') format('woff2');
      font-weight: 400;
      font-display: swap;
    }

    /* Theme 1 (Default): Kashaneh Luxe (Warm Editorial — Airbnb / Soho House) */
    :root, [data-theme="luxe"] {
      --paper: #f8f7f3;
      --white: #ffffff;
      --ink: #18181b;
      --muted: #64615a;
      --gold: #b69b60;
      --gold-text: #7d6230;
      --gold-soft: #f5f0e4;
      --gold-border: #dcd0b4;
      --stone: #ece9e2;
      --line: #e6e4dd;
      --soft: #f3f1ec;
      --border: #d0ccc2;
      --row-hover: #fbf9f4;
      --green: #166534;
      --green-soft: #dcfce7;
      --amber: #9a5b13;
      --amber-soft: #fef3c7;
      --red: #991b1b;
      --red-soft: #fee2e2;
      --blue: #1e40af;
      --blue-soft: #dbeafe;
      --purple: #5b21b6;
      --purple-soft: #ede9fe;
      --radius-xl: 14px;
      --radius-lg: 10px;
      --radius-md: 7px;
      --radius-pill: 999px;
      --shadow-xs: 0 1px 2px rgba(24, 24, 27, 0.04);
      --shadow-sm: 0 2px 8px rgba(24, 24, 27, 0.05);
      --shadow-pop: 0 16px 40px rgba(24, 24, 27, 0.14), 0 2px 8px rgba(24, 24, 27, 0.06);
    }

    /* Theme 2: Linear / Attio Minimal (Crisp Zinc & Indigo) */
    [data-theme="linear"] {
      --paper: #f8fafc;
      --white: #ffffff;
      --ink: #0f172a;
      --muted: #64748b;
      --gold: #4f46e5;
      --gold-text: #4338ca;
      --gold-soft: #eef2ff;
      --gold-border: #c7d2fe;
      --stone: #e2e8f0;
      --line: #e2e8f0;
      --soft: #f1f5f9;
      --border: #cbd5e1;
      --row-hover: #f8fafc;
      --radius-lg: 8px;
      --radius-md: 6px;
    }

    /* Theme 3: Stripe / Mercury Financial Ledger (Cool Alabaster & Navy) */
    [data-theme="stripe"] {
      --paper: #f6f8fa;
      --white: #ffffff;
      --ink: #0a2540;
      --muted: #425466;
      --gold: #0066ff;
      --gold-text: #0055d4;
      --gold-soft: #f0f6ff;
      --gold-border: #b8d4ff;
      --stone: #e6ebf1;
      --line: #e3e8ee;
      --soft: #f0f4f8;
      --border: #cfd7df;
      --row-hover: #f5f9ff;
      --radius-lg: 10px;
      --radius-md: 6px;
    }

    /* Theme 4: Executive Obsidian Dark (Linear Dark / Raycast) */
    [data-theme="dark"] {
      --paper: #0b0d12;
      --white: #12161f;
      --ink: #f3f4f6;
      --muted: #9ca3af;
      --gold: #d4b475;
      --gold-text: #e7c98c;
      --gold-soft: rgba(212, 180, 117, 0.14);
      --gold-border: rgba(212, 180, 117, 0.32);
      --stone: #1e2433;
      --line: #1f2637;
      --soft: #171c28;
      --border: #2b3548;
      --row-hover: #181e2c;
      --green: #4ade80;
      --green-soft: rgba(74, 222, 128, 0.14);
      --amber: #fbbf24;
      --amber-soft: rgba(251, 191, 36, 0.14);
      --red: #f87171;
      --red-soft: rgba(248, 113, 113, 0.14);
      --blue: #60a5fa;
      --blue-soft: rgba(96, 165, 250, 0.14);
      --purple: #c084fc;
      --purple-soft: rgba(192, 132, 252, 0.14);
    }

    * { box-sizing: border-box; }
    html, body {
      width: 100%;
      max-width: 100vw;
      overflow-x: clip;
      -webkit-text-size-adjust: 100%;
    }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: Funnel, Shabnam, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
      font-size: 13px;
      line-height: 1.48;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      transition: background-color 0.15s ease, color 0.15s ease;
    }

    button, input, select, textarea {
      font: inherit;
      color: inherit;
    }
    button {
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      border: 0;
      padding: 0;
      margin: 0;
      cursor: pointer;
    }
    bdi, .mono-pill { unicode-bidi: isolate; }

    /* Minimalist Info 'i' Badge & Floating Tooltip — Always lowercase 'i' everywhere */
    .info-i {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--soft);
      color: var(--muted);
      font-family: ui-serif, Georgia, serif;
      font-style: italic;
      font-weight: 700;
      font-size: 10px;
      line-height: 1;
      text-transform: lowercase !important;
      font-variant: normal !important;
      letter-spacing: 0 !important;
      cursor: help;
      user-select: none;
      flex-shrink: 0;
      transition: all 0.14s ease;
      vertical-align: middle;
    }
    .info-i:hover, .info-i:focus {
      background: var(--gold-soft);
      color: var(--gold-text);
      border-color: var(--gold);
      outline: none;
    }
    .floating-info-tooltip {
      position: fixed;
      z-index: 99999;
      max-width: min(330px, calc(100vw - 24px));
      background: #18181b;
      color: #ffffff;
      padding: 10px 13px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.48;
      box-shadow: var(--shadow-pop);
      pointer-events: none;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.14s ease, transform 0.14s ease;
      text-transform: none;
      letter-spacing: normal;
      text-align: left;
    }
    .floating-info-tooltip.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .floating-info-tooltip strong { color: #f3dfb2; font-weight: 600; }
    .floating-info-tooltip .tip-split-box {
      margin-top: 7px;
      padding-top: 7px;
      border-top: 1px solid rgba(255, 255, 255, 0.16);
      font-size: 11.5px;
      color: #f7f4eb;
    }

    /* Aligned Enterprise Two-Tier Header (Top Brand Row scrolls normally; Bottom Navigation Row sticks to top: 0) */
    .header {
      background: var(--white);
      position: relative;
      z-index: 45;
      width: 100%;
      max-width: 100vw;
    }
    .header-inner {
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
      padding: 10px 24px 8px;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .header-top-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
    }
    .sticky-nav-shell {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 40;
      width: 100%;
      max-width: 100vw;
      background: var(--white);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 2px 8px rgba(24, 24, 27, 0.04);
      transition: background-color 0.15s ease, border-color 0.15s ease;
    }
    .header-nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
      padding: 8px 24px;
    }

    .brand {
      --brand-mark-height: 32px;
      --brand-name-size: 19.5px;
      --brand-sub-size: 9px;
      --brand-gap: 4px;
      --brand-sub-inset-start: .117em;
      --brand-sub-inset-end: .056em;
      display: flex;
      gap: 10px;
      align-items: flex-end;
      text-decoration: none;
      flex-shrink: 0;
    }
    .brand-mark {
      display: block;
      position: relative;
      overflow: hidden;
      height: var(--brand-mark-height);
      width: calc(var(--brand-mark-height) * 412 / 464);
      margin-bottom: -1px;
      flex-shrink: 0;
    }
    .brand-mark img {
      display: block;
      position: absolute;
      max-width: none;
      width: calc(100% * 512 / 412);
      height: auto;
      left: calc(-100% * 50 / 412);
      top: calc(-100% * 44 / 464);
    }
    .brand-text { display: grid; gap: var(--brand-gap); width: max-content; }
    .brand-name { font-size: var(--brand-name-size); font-weight: 650; line-height: 1; letter-spacing: -0.4px; color: var(--ink); }
    .brand-sub {
      display: flex;
      justify-content: space-between;
      font-size: var(--brand-sub-size);
      font-weight: 600;
      line-height: 1;
      color: var(--gold-text);
      margin: 0;
      padding-inline: var(--brand-sub-inset-start) var(--brand-sub-inset-end);
    }
    .brand-sub span { display: block; }

    .nav-tabs {
      display: flex;
      align-items: center;
      gap: 2px;
      background: var(--soft);
      padding: 3px;
      border-radius: 8px;
      border: 1px solid var(--line);
      overflow-x: auto;
      max-width: 100%;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tab {
      border: 0;
      background: transparent;
      color: var(--muted);
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 12.5px;
      font-weight: 550;
      white-space: nowrap;
      transition: all 0.14s ease;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
    }
    .nav-tab:hover { color: var(--ink); }
    .nav-tab.active {
      background: var(--white);
      color: var(--ink);
      font-weight: 600;
      box-shadow: var(--shadow-xs);
    }
    .nav-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 99px;
      background: var(--amber-soft);
      color: var(--amber);
    }

    .user-menu-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
    }
    .user-circle-btn {
      position: relative;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.5px solid var(--gold-border);
      background: var(--gold-soft);
      color: var(--gold-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.3px;
      cursor: pointer;
      transition: all 0.16s ease;
      box-shadow: var(--shadow-xs);
      user-select: none;
      flex-shrink: 0;
      padding: 0;
      overflow: visible;
    }
    .user-circle-btn img.user-avatar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }
    .user-circle-btn:hover,
    .user-circle-btn.active {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow-sm);
      transform: translateY(-1px);
    }
    .user-circle-status-dot {
      position: absolute;
      bottom: -1px;
      right: -1px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--green);
      border: 2px solid var(--white);
      z-index: 2;
    }
    .user-dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 250;
      width: min(320px, calc(100vw - 24px));
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px;
      box-shadow: var(--shadow-pop);
      display: none;
      flex-direction: column;
      gap: 10px;
    }
    .user-dropdown-menu.open {
      display: flex;
    }
    .user-profile-top-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 11px;
      border-radius: 10px;
      background: var(--paper);
      border: 1px solid var(--line);
    }
    .user-profile-row {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .user-profile-avatar-lg {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1.5px solid var(--gold-border);
      background: var(--gold-soft);
      color: var(--gold-text);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }
    .user-profile-avatar-lg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .user-profile-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      flex: 1;
    }
    .user-profile-name {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-profile-role {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .user-avatar-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .user-menu-divider {
      height: 1px;
      background: var(--line);
      margin: 2px 0;
    }
    .user-menu-section {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .user-menu-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--muted);
      padding: 0 2px;
    }
    .quick-actions-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .theme-select {
      width: 100%;
      height: 30px;
      padding: 0 28px 0 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--ink);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      outline: none;
    }
    .theme-select:hover { border-color: var(--gold); }

    .auth-pill-btn {
      width: 100%;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 10px;
      border-radius: 6px;
      border: 1px solid var(--gold-border);
      background: var(--gold-soft);
      color: var(--gold-text);
      font-size: 11.5px;
      font-weight: 600;
      transition: all 0.14s ease;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .auth-pill-btn:hover { filter: brightness(0.97); }
    .mode-pill {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--soft);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 3px;
    }
    .mode-pill button {
      border: 0;
      background: transparent;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      text-align: center;
    }
    .mode-pill button.active { background: var(--gold-soft); color: var(--gold-text); border: 1px solid var(--gold); font-weight: 700; }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      height: 28px;
      min-height: 28px;
      max-height: 28px;
      padding: 0 11px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--ink);
      font-size: 11.5px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
      box-sizing: border-box;
      transition: all 0.12s ease;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
    }
    .btn:hover { background: var(--soft); border-color: var(--gold-border); }
    .btn.primary { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; font-weight: 600; }
    .btn.primary:hover { background: #dbeafe; border-color: #60a5fa; }
    .btn.gold { background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold-border); font-weight: 600; }
    .btn.gold:hover { filter: brightness(0.96); }
    .btn.green { background: #ecfdf5; color: #15803d; border-color: #86efac; font-weight: 600; }
    .btn.green:hover { background: #dcfce7; border-color: #4ade80; }
    .btn.danger, .btn.red { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; font-weight: 600; }
    .btn.danger:hover, .btn.red:hover { background: #fee2e2; border-color: #f87171; }
    .btn.sm {
      height: 28px;
      min-height: 28px;
      max-height: 28px;
      padding: 0 10px;
      font-size: 11.5px;
      border-radius: 6px;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    /* Prominent Primary Workflow Call-To-Action (CTA) System */
    .wf-action-dock {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 4px 6px 4px 11px;
      border-radius: 9px;
      background: var(--white);
      border: 1.5px solid var(--border);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .wf-next-label {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn-wf-cta {
      appearance: none;
      -webkit-appearance: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      height: 34px;
      min-height: 34px;
      padding: 0 16px;
      border-radius: 7px;
      font-family: inherit;
      font-size: 12.5px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0.01em;
      white-space: nowrap;
      cursor: pointer;
      transition: all 0.14s ease;
      box-sizing: border-box;
    }
    .btn-wf-cta.cta-green {
      background: #ecfdf5;
      color: #15803d;
      border: 1.5px solid #6ee7b7;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }
    .btn-wf-cta.cta-green:hover {
      background: #dcfce7;
      border-color: #4ade80;
    }
    .btn-wf-cta.cta-blue {
      background: #eff6ff;
      color: #1d4ed8;
      border: 1.5px solid #93c5fd;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }
    .btn-wf-cta.cta-blue:hover {
      background: #dbeafe;
      border-color: #60a5fa;
    }
    .btn-wf-cta.cta-gold {
      background: var(--gold-soft);
      color: var(--gold-text);
      border: 1.5px solid var(--gold);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    }
    .btn-wf-cta.cta-gold:hover {
      background: #ece0c8;
      border-color: var(--gold);
    }

    main {
      width: 100%;
      max-width: 1600px;
      margin: 0 auto;
      padding: 18px 24px 36px;
      flex: 1;
      min-width: 0;
    }

    /* Role Banner for Tenant / Homeowner Portal Views */
    .portal-mode-banner {
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 18px;
      margin-bottom: 16px;
      border-radius: var(--radius-lg);
      background: var(--gold-soft);
      border: 1px solid var(--gold-border);
      box-shadow: var(--shadow-xs);
      flex-wrap: wrap;
    }
    .portal-mode-banner.active, .portal-mode-banner.visible { display: flex; }

    /* KPI Strip */
    .kpi-strip {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 16px;
    }
    @media (max-width: 1320px) {
      .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .kpi-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 14px 18px;
      box-shadow: var(--shadow-xs);
      display: flex;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      min-width: 0;
      transition: border-color 0.14s ease, box-shadow 0.14s ease;
    }
    .kpi-card:hover { border-color: var(--gold); box-shadow: var(--shadow-sm); }
    .kpi-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
    }
    .kpi-val {
      font-size: 22px;
      font-weight: 650;
      letter-spacing: -0.02em;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
      line-height: 1.15;
    }
    .kpi-sub { font-size: 11.5px; color: var(--muted); }
    .kpi-sub strong { color: var(--ink); font-weight: 600; }

    /* Overview Split Grid */
    .overview-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 16px;
      margin-bottom: 16px;
    }
    .panel-card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xs);
      overflow: hidden;
      min-width: 0;
      max-width: 100%;
    }
    .panel-head {
      padding: 12px 18px;
      background: var(--white);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .panel-head h2 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .panel-head p { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }

    /* MODERN SAAS CLICKABLE LINKS (Zero Native Button Box, Zero Clutter) */
    .entity-link {
      appearance: none;
      -webkit-appearance: none;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0;
      margin: 0;
      color: var(--ink);
      font: inherit;
      font-weight: 600;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
      display: inline;
      line-height: 1.35;
      transition: color 0.12s ease;
    }
    .entity-link:hover {
      color: var(--gold-text);
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1.5px;
    }
    .entity-unit-pill {
      appearance: none;
      -webkit-appearance: none;
      display: inline-flex;
      align-items: center;
      padding: 1px 7px;
      margin-left: 4px;
      border-radius: 5px;
      background: var(--soft);
      border: 1px solid #cbd5e1;
      color: var(--ink2);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .entity-unit-pill:hover {
      background: var(--gold-soft);
      border-color: var(--gold-border);
      color: var(--gold-text);
    }

    /* Dedicated Graphical Entity Profile View (#entity-profile-view) */
    #entity-profile-view {
      display: none;
      margin-bottom: 20px;
      animation: fadeInProfile 0.16s ease;
      min-width: 0;
      max-width: 100%;
    }
    #entity-profile-view.active {
      display: block;
    }
    @keyframes fadeInProfile {
      from { opacity: 0; transform: translateY(3px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .profile-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 16px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      margin-bottom: 14px;
      box-shadow: var(--shadow-xs);
      flex-wrap: wrap;
    }
    .profile-breadcrumb {
      font-size: 12px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .profile-breadcrumb a {
      color: var(--gold-text);
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
    }
    .profile-breadcrumb a:hover { text-decoration: underline; }

    .profile-hero {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 20px 24px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-xs);
      min-width: 0;
    }
    .profile-hero-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .profile-eyebrow {
      display: block;
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--gold-text);
      margin-bottom: 4px;
    }
    .profile-title {
      font-size: 22px;
      font-weight: 650;
      margin: 0 0 4px;
      letter-spacing: -0.02em;
      color: var(--ink);
      word-break: break-word;
    }
    .profile-sub {
      margin: 0;
      font-size: 12.5px;
      color: var(--muted);
    }
    .profile-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
    .access-card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px 15px;
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .access-icon {
      width: 34px;
      height: 34px;
      border-radius: 7px;
      background: var(--gold-soft);
      border: 1px solid var(--gold-border);
      color: var(--gold-text);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      flex-shrink: 0;
    }
    .access-card small {
      display: block;
      font-size: 11px;
      color: var(--muted);
      font-weight: 500;
    }
    .access-card strong {
      display: block;
      font-size: 13.5px;
      color: var(--ink);
      margin-top: 1px;
      word-break: break-word;
    }

    .profile-sections-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
      margin-bottom: 16px;
    }
    .profile-section-full { grid-column: 1 / -1; }

    /* 6-Tier Pricing Matrix Cards in Unit Profile */
    .tier-matrix-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
      margin-top: 8px;
    }
    .tier-box {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 11px 12px;
      text-align: center;
      min-width: 0;
    }
    .tier-box.highlight {
      background: var(--gold-soft);
      border-color: var(--gold-border);
    }
    .tier-box span {
      display: block;
      font-size: 10.5px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .tier-box strong {
      display: block;
      font-size: 16.5px;
      margin-top: 3px;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }

    /* Task Workflow Stepper */
    .workflow-stepper {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 16px;
    }
    .wf-step {
      padding: 11px 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--paper);
      font-size: 12px;
      color: var(--muted);
      min-width: 0;
    }
    .wf-step small {
      display: block;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      opacity: 0.8;
    }
    .wf-step strong {
      display: block;
      font-size: 13px;
      margin-top: 2px;
      color: var(--ink);
    }
    .wf-step.active {
      background: var(--gold-soft);
      border-color: var(--gold);
    }
    .wf-step.done {
      background: var(--green-soft);
      border-color: transparent;
      color: var(--green);
    }
    .wf-step.done strong { color: var(--green); }

    /* Modern SaaS Status Badges */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      line-height: 1.4;
    }
    .badge.green, .badge.task-done { background: #ecfdf5; color: #15803d; border: 1px solid #6ee7b7; }
    .badge.amber { background: #fffbeb; color: #b45309; border: 1px solid #fbbf24; }
    .badge.red { background: #fef2f2; color: #b91c1c; border: 1px solid #f87171; }
    .badge.gold { background: var(--gold-soft); color: var(--gold-text); border: 1px solid var(--gold-border); }
    .badge.blue { background: #eff6ff; color: #1d4ed8; border: 1px solid #7dd3fc; }
    .badge.purple { background: #f5f3ff; color: #6d28d9; border: 1px solid #c4b5fd; }
    .badge.stone, .badge.neutral { background: var(--soft); color: var(--ink2); border: 1px solid #cbd5e1; }
    /* Task Priority Spectrum (Graduated Soft-to-Rich Tints with Crisp Visible Borders; Completed = Green) */
    .badge.prio-urgent { background: #fecaca; color: #7f1d1d; border: 1px solid #ef4444; font-weight: 700; }
    .badge.prio-high   { background: #fee2e2; color: #b91c1c; border: 1px solid #f87171; font-weight: 700; }
    .badge.prio-medium { background: #ffedd5; color: #c2410c; border: 1px solid #fb923c; font-weight: 600; }
    .badge.prio-low    { background: #fef9c3; color: #854d0e; border: 1px solid #facc15; font-weight: 600; }

    /* Sheet Toolbar & Table */
    .sheet-toolbar {
      padding: 11px 18px;
      border-bottom: 1px solid var(--line);
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .search-box {
      position: relative;
      flex: 1;
      min-width: 240px;
      max-width: 380px;
    }
    .search-box input {
      width: 100%;
      padding: 6px 12px 6px 32px;
      border-radius: 7px;
      border: 1px solid var(--line);
      background: var(--paper);
      font-size: 12.5px;
      outline: none;
      transition: border-color 0.14s ease, background-color 0.14s ease;
    }
    .search-box input:focus { border-color: var(--gold); background: var(--white); }
    .search-box svg {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      stroke: var(--muted);
      fill: none;
      stroke-width: 2;
    }
    .sheet-toolbar-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .toolbar-select {
      padding: 6px 11px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--white);
      font-size: 12px;
      outline: none;
      max-width: 100%;
    }

    .active-filters-bar {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 8px 18px;
      background: var(--gold-soft);
      border-bottom: 1px solid var(--gold-border);
      font-size: 12px;
      flex-wrap: wrap;
    }
    .active-filters-bar.visible { display: flex; }
    .filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 9px;
      border-radius: 6px;
      background: var(--white);
      border: 1px solid var(--gold-border);
      font-size: 11.5px;
    }
    .filter-chip button { border: 0; background: none; padding: 0 2px; color: var(--muted); font-weight: 700; }

    .table-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      max-height: 66vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; }
    thead th {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--soft);
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
      user-select: none;
    }
    #data-table thead th {
      padding: 0;
    }
    .th-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      padding: 7px 8px;
      width: 100%;
      transition: background-color 0.12s ease;
    }
    .th-inner:hover { background: rgba(231, 229, 224, 0.55); color: var(--ink); }
    .th-label-wrap {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      padding: 2px 0;
      font-weight: 650;
      transition: color 0.12s ease;
    }
    .th-label-wrap:hover { color: var(--ink); }
    .th-actions {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      flex-shrink: 0;
    }
    .th-icon-btn {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid rgba(214, 211, 205, 0.75);
      background: rgba(255, 255, 255, 0.75);
      color: var(--muted);
      width: 20px;
      height: 20px;
      border-radius: 5px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      transition: all 0.14s ease;
      box-shadow: 0 1px 1px rgba(24, 24, 27, 0.03);
    }
    .th-icon-btn svg {
      width: 11px;
      height: 11px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }
    .th-inner:hover .th-icon-btn {
      border-color: var(--border);
      background: var(--white);
      color: var(--ink-2);
    }
    .th-icon-btn:hover {
      border-color: var(--gold) !important;
      background: var(--gold-soft) !important;
      color: var(--gold-text) !important;
      transform: translateY(-0.5px);
    }
    .th-sort-btn.active {
      background: var(--gold-soft) !important;
      border-color: var(--gold) !important;
      color: var(--gold-text) !important;
      box-shadow: 0 1px 2px rgba(180, 83, 9, 0.14);
    }
    .th-filter-btn.active {
      background: var(--gold-soft) !important;
      border-color: var(--gold) !important;
      color: var(--gold-text) !important;
      box-shadow: 0 1px 2px rgba(180, 83, 9, 0.16);
    }
    .th-filter-btn.active::after {
      content: "";
      position: absolute;
      top: -2px;
      right: -2px;
      width: 6px;
      height: 6px;
      border-radius: 999px;
      background: var(--red);
      border: 1.5px solid var(--white);
    }

    tbody tr { transition: background-color 0.1s ease; }
    tbody tr:hover td { background: var(--row-hover); }
    tbody td {
      padding: 10px 14px;
      border-bottom: 1px solid var(--line);
      vertical-align: top;
      background: var(--white);
      font-size: 13px;
    }
    .num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    th.num, td.num {
      padding-right: 22px;
    }
    #data-table th.num .th-inner {
      padding-right: 20px;
    }
    th.num + th, td.num + td {
      padding-left: 18px;
    }

    /* Explicit Recorded / Approved Attribution Stack & Check-in / Check-out Stack */
    .audit-stack, .stay-stack {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 11.5px;
      line-height: 1.2;
      white-space: nowrap;
    }
    .audit-row, .stay-row, .audit-line {
      display: flex;
      align-items: center;
      min-height: 22px;
      height: 22px;
      gap: 5px;
    }
    .audit-lbl {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      min-width: 58px;
    }
    .audit-ok { color: var(--green); }
    .audit-pend { color: var(--amber); font-weight: 600; }
    .stay-lbl {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      min-width: 28px;
    }
    .stay-lbl.out {
      color: var(--gold-text);
    }

    /* Section Bottom Activity, Change Log & Full-Width Note Composer Panel */
    .section-log-card {
      margin-top: 16px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xs);
      overflow: hidden;
      min-width: 0;
      max-width: 100%;
    }
    .log-bar-head {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--line);
      background: var(--soft);
      width: 100%;
    }
    .log-bar-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      width: 100%;
    }
    .log-bar-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .log-staff-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--gold-text);
      background: var(--gold-soft);
      border: 1px solid var(--gold-border);
      padding: 3px 10px;
      border-radius: 99px;
    }
    .note-composer-bar {
      padding: 12px 18px;
      background: var(--soft);
      border-bottom: 1px solid var(--line);
      width: 100%;
    }
    .quick-note-form,
    .note-composer-bar .quick-note-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      width: 100%;
      align-items: start;
    }
    .quick-note-input-col {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
      width: 100%;
    }
    .quick-note-form textarea,
    .quick-note-form input,
    .note-composer-bar textarea {
      width: 100%;
      min-width: 0;
      height: 52px;
      min-height: 52px;
      margin: 0;
      padding: 14px 14px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--white);
      font-family: Funnel, Shabnam, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
      font-size: 13px;
      line-height: 1.45;
      resize: vertical;
      outline: none;
      unicode-bidi: plaintext;
      transition: border-color 0.14s ease, box-shadow 0.14s ease;
    }
    .quick-note-form .note-submit-btn,
    .note-composer-bar .note-submit-btn {
      height: 52px;
      min-height: 52px;
      padding: 0 20px;
      margin: 0;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .quick-note-form textarea:focus,
    .note-composer-bar textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px var(--gold-soft);
    }
    .bidi-live-preview {
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px dashed var(--gold-border);
      background: var(--white);
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--ink);
    }
    .bidi-live-preview-lbl {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--gold-text);
      margin-bottom: 3px;
      display: block;
    }
    .bidi-line {
      line-height: 1.5;
      word-break: break-word;
    }
    .bidi-line.rtl {
      direction: rtl;
      text-align: right;
      font-family: Shabnam, Funnel, -apple-system, BlinkMacSystemFont, sans-serif;
    }
    .bidi-line.ltr {
      direction: ltr;
      text-align: left;
    }
    .bidi-ltr-run {
      direction: ltr;
      unicode-bidi: isolate;
      display: inline-block;
      padding: 0 2px;
      font-family: Funnel, -apple-system, BlinkMacSystemFont, sans-serif;
    }
    .log-list { max-height: 280px; overflow-y: auto; }
    .log-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 18px;
      border-bottom: 1px solid var(--line);
      font-size: 12.5px;
    }
    .log-item:last-child { border-bottom: 0; }
    .log-left {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      flex: 1;
      min-width: 0;
      flex-wrap: wrap;
    }
    .log-msg-body {
      flex: 1;
      min-width: 180px;
      color: var(--ink);
    }
    .log-meta-right {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      white-space: nowrap;
      font-size: 11.5px;
      color: var(--muted);
      padding-top: 2px;
    }
    .log-actor {
      font-weight: 600;
      color: var(--ink);
      background: var(--soft);
      border: 1px solid var(--line);
      padding: 1px 7px;
      border-radius: 99px;
      font-size: 11px;
    }
    .log-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* Report View */
    .report-hero {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 20px 24px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-xs);
      min-width: 0;
    }
    .report-metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }
    .report-metric-box {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 13px 16px;
      min-width: 0;
    }
    .report-metric-box .rm-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
    }
    .report-metric-box strong { display: block; font-size: 20px; margin-top: 4px; font-variant-numeric: tabular-nums; }
    .report-metric-box small { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

    /* Unit-Separated Current Occupants Grid */
    .unit-occupants-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
      gap: 12px;
      padding: 16px 18px;
    }
    .unit-occupant-box {
      display: flex;
      flex-direction: column;
      gap: 8px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 11px 13px;
      min-width: 0;
      transition: border-color 0.14s ease, box-shadow 0.14s ease;
    }
    .unit-occupant-box.is-current-unit {
      background: var(--gold-soft);
      border-color: var(--gold-border);
    }
    .unit-occupant-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 7px;
      border-bottom: 1px solid var(--line);
    }
    .unit-occupant-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .unit-occupant-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      width: 100%;
      text-align: left;
      padding: 7px 10px;
      border-radius: 7px;
      border: 1px solid var(--line);
      background: var(--white);
      color: var(--ink);
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .unit-occupant-card:hover {
      border-color: var(--gold);
      background: var(--gold-soft);
    }
    .unit-occupant-card.is-current-res {
      border-color: var(--gold);
      background: var(--white);
      box-shadow: 0 0 0 2px var(--gold-border);
      cursor: default;
    }
    .unit-occupant-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      word-break: break-word;
    }
    .unit-occupant-meta {
      font-size: 11px;
      color: var(--muted);
    }

    /* Bold Lease & Entity Identity Strip */
    .lease-identity-strip {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
    }
    .identity-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 11px;
      font-size: 12.5px;
      color: var(--ink);
      line-height: 1.25;
    }
    .identity-pill.highlight {
      background: var(--gold-soft);
      border-color: var(--gold-border);
    }
    .identity-pill .id-lbl {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
    }
    .identity-pill strong {
      font-size: 13.5px;
      font-weight: 700;
      color: var(--ink);
    }

    /* Equal-Weight 3-Cell Strip for First Month, Last Month & Key Deposit */
    .fld-equal-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: 6px;
    }
    .fld-equal-cell {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 7px 9px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .fld-equal-cell .fld-lbl {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .fld-equal-cell strong {
      display: block !important;
      font-size: 15.5px !important;
      margin-top: 1px !important;
      font-weight: 700;
      color: var(--ink);
      font-variant-numeric: tabular-nums;
    }

    /* Column Filter Popover */
    .col-filter-popover {
      position: fixed;
      z-index: 100;
      width: 295px;
      max-width: calc(100vw - 24px);
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: var(--shadow-pop);
      display: none;
      flex-direction: column;
      overflow: hidden;
      font-size: 12.5px;
    }
    .col-filter-popover.open { display: flex; }
    .pop-section { padding: 10px 12px; border-bottom: 1px solid var(--line); }
    .pop-title {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
    }
    .sort-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .sort-btn {
      padding: 6px 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--paper);
      font-size: 11.5px;
      font-weight: 550;
    }
    .sort-btn.active { background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold); font-weight: 700; }
    .cond-row { display: grid; gap: 6px; }
    .cond-row select, .cond-row input, .val-search {
      width: 100%;
      padding: 6px 9px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--paper);
      font-size: 12px;
      outline: none;
    }
    .cond-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .val-links { display: flex; gap: 10px; font-size: 11px; margin: 6px 0; }
    .val-links button { border: 0; background: none; padding: 0; color: var(--gold-text); font-weight: 600; text-decoration: underline; }
    .val-list {
      max-height: 160px;
      overflow-y: auto;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--paper);
      padding: 4px;
    }
    .val-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
    .val-item:hover { background: var(--white); }
    .val-item label { display: flex; align-items: center; gap: 7px; cursor: pointer; flex: 1; min-width: 0; }
    .val-item input[type="checkbox"] { accent-color: var(--gold-text); width: 14px; height: 14px; margin: 0; }
    .val-item-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .val-item-count { font-size: 10.5px; color: var(--muted); }
    .pop-footer { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; background: var(--soft); }

    /* Modals */
    dialog {
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: 0;
      width: min(670px, calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      background: var(--white);
      color: var(--ink);
      box-shadow: var(--shadow-pop);
      max-height: calc(100dvh - 32px);
      overflow-x: hidden;
    }
    dialog::backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); }
    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 22px;
      border-bottom: 1px solid var(--line);
      gap: 10px;
      min-width: 0;
    }
    .modal-head h3 { margin: 0; font-size: 15.5px; font-weight: 600; min-width: 0; word-break: break-word; }
    .modal-body {
      padding: 18px 22px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
      max-height: calc(100dvh - 160px);
      overflow-y: auto;
      overflow-x: hidden;
      min-width: 0;
    }
    .modal-body.single-col {
      grid-template-columns: minmax(0, 1fr);
    }
    .modal-body > * {
      min-width: 0;
      max-width: 100%;
    }
    .auth-tabs-bar {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      background: var(--soft);
      padding: 4px;
      border-radius: 10px;
      width: 100%;
    }
    .auth-tabs-bar .btn {
      width: 100%;
      min-width: 0;
      white-space: normal;
      text-align: center;
      line-height: 1.25;
      padding: 6px 8px;
    }
    .auth-inline-form {
      display: flex;
      gap: 8px;
      width: 100%;
      min-width: 0;
    }
    .auth-inline-form input {
      flex: 1;
      min-width: 0;
      padding: 7px 12px;
      border: 1px solid var(--border);
      border-radius: 6px;
    }
    .responsive-two-col {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
      width: 100%;
      min-width: 0;
    }
    .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .field.full { grid-column: 1 / -1; }
    .field label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--muted);
      flex-wrap: wrap;
    }
    .field input, .field select, .field textarea {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      padding: 7px 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--paper);
      font-size: 13px;
    }
    .field input:focus, .field select:focus, .field textarea:focus {
      outline: none;
      border-color: var(--gold);
      background: var(--white);
    }
    .modal-history-box {
      grid-column: 1 / -1;
      margin-top: 6px;
      border-top: 1px solid var(--line);
      padding-top: 10px;
      min-width: 0;
    }
    .modal-history-list {
      max-height: 120px;
      overflow-y: auto;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 6px 10px;
      font-size: 11.5px;
      margin-top: 6px;
    }
    .modal-foot {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 12px 22px;
      border-top: 1px solid var(--line);
      background: var(--soft);
      flex-wrap: wrap;
    }
    .perm-check {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--paper);
      font-size: 12.5px;
      cursor: pointer;
      min-width: 0;
      word-break: break-word;
    }
    .google-user-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 9px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--paper);
      cursor: pointer;
      transition: all 0.14s ease;
      flex-wrap: wrap;
      min-width: 0;
      max-width: 100%;
    }
    .google-user-card:hover { border-color: var(--gold); background: var(--gold-soft); }
    .google-user-info {
      flex: 1 1 180px;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    footer {
      text-align: center;
      padding: 14px;
      font-size: 11.5px;
      color: var(--muted);
      border-top: 1px solid var(--line);
      background: var(--white);
      width: 100%;
    }

    /* Tablet & Compact Laptop Breakpoint */
    @media (max-width: 1100px) {
      .kpi-strip, .report-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tier-matrix-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .workflow-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .overview-grid, .profile-sections-grid { grid-template-columns: minmax(0, 1fr); }
      .header-nav-row { flex-direction: column; align-items: stretch; gap: 8px; }
      .quick-actions-bar { width: 100%; overflow-x: auto; padding-bottom: 2px; }
    }

    /* Mobile Phone & Small Tablet Breakpoint (Full UI/UX Optimization & Zero Non-Table Overflow) */
    @media (max-width: 768px) {
      .header {
        position: relative;
      }
      .header-inner {
        padding: 10px 12px;
        gap: 8px;
      }
      .header-top-row {
        flex-wrap: nowrap;
        gap: 10px;
      }
      .header-nav-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding-top: 8px;
      }
      .nav-tabs {
        width: 100%;
        max-width: 100%;
      }
      .quick-actions-bar {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 5px;
      }
      .quick-actions-bar .btn {
        padding: 6px 4px;
        font-size: 11px;
        width: 100%;
      }
      main {
        padding: 12px 12px 28px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
      }
      .kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
      }
      .kpi-card {
        padding: 11px 12px;
      }
      .kpi-val {
        font-size: 18px;
      }
      .kpi-sub {
        font-size: 10.5px;
      }
      .panel-head {
        padding: 10px 12px;
        gap: 8px;
      }
      .sheet-toolbar {
        padding: 10px 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .search-box {
        min-width: 0;
        max-width: 100%;
        width: 100%;
      }
      .sheet-toolbar-actions {
        width: 100%;
        justify-content: space-between;
      }
      #rep-prop-select {
        min-width: 0 !important;
        width: 100%;
      }
      thead th, tbody td, .th-inner {
        padding: 8px 10px;
        font-size: 12px;
      }
      .log-bar-head, .note-composer-bar {
        padding: 12px;
      }
      .quick-note-form,
      .note-composer-bar .quick-note-form {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }
      .quick-note-form select {
        height: 42px;
        width: 100%;
      }
      .quick-note-form textarea,
      .note-composer-bar textarea {
        height: 46px;
        min-height: 46px;
        padding: 11px 12px;
        width: 100%;
      }
      .quick-note-form .note-submit-btn,
      .note-composer-bar .note-submit-btn,
      .quick-note-form button[type="submit"] {
        height: 42px !important;
        min-height: 42px !important;
        width: 100%;
      }
      .log-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 12px;
      }
      .log-msg-body {
        min-width: 0;
        width: 100%;
      }
      .profile-hero, .report-hero {
        padding: 14px;
      }
      .profile-title {
        font-size: 18px;
      }
      .profile-cards-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }
      .tier-matrix-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .workflow-stepper {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }
      .report-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      dialog {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 20px);
        margin: auto;
      }
      .modal-head {
        padding: 12px 14px;
      }
      .modal-body {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 12px 14px;
        gap: 10px;
        max-height: calc(100dvh - 130px);
      }
      .modal-foot {
        padding: 10px 14px;
      }
      .auth-tabs-bar {
        grid-template-columns: minmax(0, 1fr);
        border-radius: 10px;
      }
      .auth-inline-form {
        flex-direction: column;
      }
      .auth-inline-form .btn {
        width: 100%;
      }
      .responsive-two-col {
        grid-template-columns: minmax(0, 1fr);
      }
      .google-user-card {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      .google-user-card > .btn {
        width: 100%;
      }
      .col-filter-popover {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px);
        max-height: 80vh;
        overflow-y: auto;
      }
    }

    @media (max-width: 420px) {
      .quick-actions-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .quick-actions-bar .btn.primary {
        grid-column: span 2;
      }
    }

    /* 7-Day Upcoming Check-Ins & Check-Outs Table: Fit 100% Width Without Horizontal Scroll */
    #turnovers-table-wrap {
      overflow-x: hidden;
    }
    #turnovers-table {
      width: 100%;
      table-layout: auto;
    }
    #turnovers-table thead th {
      padding: 8px 9px;
      font-size: 10.5px;
      letter-spacing: 0.03em;
      white-space: nowrap;
    }
    #turnovers-table tbody td {
      padding: 8px 9px;
      font-size: 12px;
      line-height: 22px;
      vertical-align: top;
    }

    /* Universal Searchable Select Dropdown Popover (First Row = Sticky Live Search Box) */
    .searchable-select-menu {
      position: fixed;
      z-index: 999999;
      background: var(--white);
      border: 1.5px solid var(--gold-border);
      border-radius: 10px;
      box-shadow: 0 14px 36px rgba(15, 23, 42, 0.22), 0 3px 10px rgba(15, 23, 42, 0.10);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 240px;
      max-height: 340px;
      font-family: inherit;
    }
    .ss-search-row {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      padding: 7px 9px;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .ss-search-icon {
      font-size: 12.5px;
      color: var(--muted);
      flex-shrink: 0;
      user-select: none;
    }
    .ss-search-input {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--white);
      color: var(--ink);
      padding: 5px 9px;
      font-size: 12.5px;
      outline: none;
    }
    .ss-search-input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15);
    }
    .ss-options-list {
      overflow-y: auto;
      max-height: 280px;
      padding: 4px 0;
      overscroll-behavior: contain;
    }
    .ss-optgroup-label {
      padding: 6px 11px 3px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--gold-text);
      background: var(--soft);
      user-select: none;
    }
    .ss-opt {
      padding: 6px 11px;
      font-size: 12.5px;
      color: var(--ink);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      transition: background-color 0.08s ease;
    }
    .ss-opt:hover,
    .ss-opt.focused {
      background: var(--gold-soft);
      color: var(--ink);
    }
    .ss-opt.selected {
      background: rgba(217, 119, 6, 0.14);
      font-weight: 600;
      color: var(--gold-text);
    }
    .ss-opt-check {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--gold-text);
      flex-shrink: 0;
    }
    .ss-empty {
      padding: 14px 12px;
      text-align: center;
      font-size: 12px;
      color: var(--muted);
    }
    .btn-edit-task-bold {
      height: 28px !important;
      min-height: 28px !important;
      max-height: 28px !important;
      font-weight: 600 !important;
      font-size: 11.5px !important;
      padding: 0 11px !important;
      border-radius: 6px !important;
      border-width: 1px !important;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02) !important;
      letter-spacing: 0;
    }
    .btn-edit-task-bold:hover {
      transform: none;
    }
    .wf-step.clickable,
    .report-metric-box.clickable {
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
      position: relative;
    }
    .report-metric-box.clickable::after {
      content: "✎";
      position: absolute;
      top: 9px;
      right: 11px;
      font-size: 11px;
      color: var(--muted);
      opacity: 0;
      transition: opacity 0.14s ease, color 0.14s ease;
      pointer-events: none;
    }
    .report-metric-box.clickable:hover::after {
      opacity: 0.85;
      color: var(--gold-text);
    }
    .wf-step.clickable:hover,
    .report-metric-box.clickable:hover {
      border-color: var(--gold) !important;
      box-shadow: 0 3px 10px rgba(184, 151, 88, 0.12);
      transform: translateY(-1px);
    }
    .wf-click-hint {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-top: 7px;
      height: 24px;
      min-height: 24px;
      padding: 0 9px;
      border-radius: 6px !important;
      font-size: 11px;
      font-weight: 600;
      line-height: 1;
      background: var(--white);
      border: 1px solid var(--border);
      color: var(--ink);
      box-sizing: border-box;
    }
    .wf-step.clickable:hover .wf-click-hint,
    .report-metric-box.clickable:hover .wf-click-hint {
      background: var(--gold-soft);
      border-color: var(--gold-border);
      color: var(--gold-text);
    }
    /* Compact Icon Buttons & Attachment Pills */
    .btn-icon,
    .btn.sm.btn-icon {
      padding: 0 7px !important;
      min-width: 28px;
      height: 28px;
      min-height: 28px;
      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      line-height: 1;
      border-radius: 6px !important;
    }
    .attach-clip-btn {
      height: 52px;
      min-height: 52px;
      padding: 0 13px;
      border-radius: 8px;
      border: 1px dashed var(--gold-border);
      background: var(--gold-soft);
      color: var(--gold-text);
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: all 0.14s ease;
      flex-shrink: 0;
    }
    .attach-clip-btn:hover {
      border-color: var(--gold);
      background: var(--white);
    }
    .doc-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 22px;
      min-height: 22px;
      padding: 0 7px;
      border-radius: 5px !important;
      background: var(--gold-soft);
      border: 1px solid var(--gold-border);
      color: var(--gold-text);
      font-size: 10.5px;
      font-weight: 600;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      box-sizing: border-box;
    }
    .doc-pill:hover {
      background: var(--white);
      border-color: var(--gold);
    }

    /* ==========================================================================
       1. CENTERED ENTITY PROFILE WINDOW OVERLAY (MODAL SHEET WITH VISIBLE MARGINS)
       ========================================================================== */
    body.entity-window-open {
      overflow: hidden;
    }
    #entity-profile-view.overlay-mode {
      position: fixed;
      inset: 0;
      z-index: 1200;
      background: rgba(15, 23, 42, 0.52);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 26px 36px;
      margin: 0;
      box-sizing: border-box;
    }
    #entity-profile-view.overlay-mode.active {
      display: flex;
      animation: fadeOverlayBackdrop 0.16s ease;
    }
    @keyframes fadeOverlayBackdrop {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes popEntityWindow {
      from { opacity: 0; transform: scale(0.975) translateY(8px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .entity-window-shell {
      width: min(1240px, calc(100vw - 64px));
      height: auto;
      max-height: min(90vh, calc(100vh - 48px));
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 24px 64px rgba(15, 23, 42, 0.34), 0 4px 16px rgba(15, 23, 42, 0.14);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: popEntityWindow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
    }
    dialog {
      border: 1px solid var(--border) !important;
      border-radius: 12px !important;
    }
    @media (max-width: 900px) {
      #entity-profile-view.overlay-mode {
        padding: 12px;
      }
      .entity-window-shell {
        width: calc(100vw - 24px);
        height: auto;
        max-height: calc(100vh - 24px);
        border-radius: 12px;
      }
    }
    .btn-window-close-circle,
    .modal-head > button,
    .modal-close-btn {
      appearance: none;
      -webkit-appearance: none;
      width: 28px !important;
      min-width: 28px !important;
      max-width: 28px !important;
      height: 28px !important;
      min-height: 28px !important;
      max-height: 28px !important;
      border-radius: 6px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-family: inherit;
      font-size: 13px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      background: var(--white) !important;
      border: 1px solid var(--border) !important;
      color: var(--ink) !important;
      cursor: pointer;
      transition: all 0.14s ease;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
      padding: 0 !important;
      flex-shrink: 0;
    }
    .btn-window-close-circle {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 30;
    }
    .btn-window-close-circle:hover,
    .modal-head > button:hover,
    .modal-close-btn:hover {
      background: #fef2f2 !important;
      border-color: #fca5a5 !important;
      color: #b91c1c !important;
    }
    /* Scalable Notes & Activity Explorer Toolbar + Progressive Loader */
    .log-list {
      max-height: none !important;
      overflow-y: visible !important;
    }
    .notes-filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px 18px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
    }
    .notes-filter-input {
      flex: 1 1 200px;
      min-width: 150px;
      height: 28px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--white);
      color: var(--ink);
      font-size: 12px;
      outline: none;
    }
    .notes-filter-input:focus {
      border-color: var(--gold);
    }
    .notes-filter-select {
      height: 28px;
      padding: 0 28px 0 9px !important;
      border: 1px solid var(--border);
      border-radius: 6px;
      background-color: var(--white);
      color: var(--ink);
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      outline: none;
      max-width: 220px;
    }
    .notes-filter-date {
      height: 28px;
      padding: 0 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--white);
      color: var(--ink);
      font-size: 11.5px;
      font-weight: 600;
      outline: none;
    }
    .notes-load-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      padding: 10px 18px;
      background: var(--paper);
      border-top: 1px solid var(--line);
      font-size: 11.5px;
      color: var(--muted);
    }
    .notes-load-btns {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .entity-window-body {
      flex: 1 1 auto;
      overflow-y: auto;
      padding: 0;
      background: var(--white);
      overscroll-behavior: contain;
      min-width: 0;
    }
    .entity-window-body > .profile-hero {
      border: none;
      border-radius: 0;
      box-shadow: none;
      margin: 0 !important;
      padding: 20px 24px;
      border-bottom: 1.5px solid var(--line);
    }
    .entity-window-body .profile-hero-top,
    .entity-fullpage-wrap .profile-hero-top {
      padding-right: 40px;
    }
    .entity-window-body > .panel-card,
    .entity-window-body > div:not(.profile-sections-grid) > .panel-card {
      border-left: none !important;
      border-right: none !important;
      border-top: none !important;
      border-bottom: 1.5px solid var(--line) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      margin: 0 !important;
    }
    .entity-window-body > .panel-card:last-child {
      border-bottom: none !important;
    }
    .entity-window-body > .profile-sections-grid {
      margin: 0 !important;
      padding: 16px 24px;
      background: var(--white);
      border-bottom: 1.5px solid var(--line);
    }
    .entity-fullpage-wrap {
      position: relative;
    }
    /* Tiny corner icon at the end of every entity button/badge to open in Full-Page mode instead of Overlay Window */
    .ext-page-hit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 15px;
      min-height: 15px;
      max-height: 15px;
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
      padding: 0 3.5px;
      margin-left: 4px;
      border-radius: 3.5px;
      background: rgba(15, 23, 42, 0.06);
      border: 1px solid rgba(15, 23, 42, 0.15);
      color: inherit;
      opacity: 0.72;
      cursor: pointer;
      transition: all 0.13s ease;
      vertical-align: middle;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .badge .ext-page-hit,
    .entity-unit-pill .ext-page-hit {
      background: rgba(255, 255, 255, 0.65);
      border-color: rgba(15, 23, 42, 0.22);
      padding: 0 3.5px;
      margin-left: 4px;
    }
    .ext-page-hit:hover {
      opacity: 1;
      background: var(--gold-soft) !important;
      border-color: var(--gold) !important;
      color: var(--gold-text) !important;
      transform: scale(1.06);
      box-shadow: 0 1px 4px rgba(180, 83, 9, 0.18);
    }
    .prop-unit-stacked {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      line-height: 1.2;
    }
    .prop-unit-subline {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: nowrap !important;
      white-space: nowrap !important;
      font-size: 10.5px;
      color: var(--ink);
      font-weight: 600;
    }
    .tasks-row-line2 {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    /* ==========================================================================
       2. DASHBOARD HEADER SUMMARY CAPTION & WORKSPACE QUICK FILTER BAR
       ========================================================================== */
    .panel-head-right-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }
    .panel-head-count-sub {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.25;
      text-align: right;
      white-space: nowrap;
    }
    .panel-head-count-sub strong {
      color: var(--ink);
      font-weight: 700;
    }
    .dashboard-card-footer {
      display: none !important;
    }
    .workspace-quick-bar {
      padding: 10px 16px;
      background: var(--paper);
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .workspace-quick-pills {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .quick-pill-btn {
      appearance: none;
      -webkit-appearance: none;
      height: 28px;
      min-height: 28px;
      max-height: 28px;
      padding: 0 10px;
      border-radius: 6px !important;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--ink2);
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.12s ease;
      white-space: nowrap;
      box-sizing: border-box;
    }
    .quick-pill-btn:hover {
      border-color: var(--gold);
      color: var(--ink);
      background: var(--gold-soft);
    }
    .quick-pill-btn.active {
      background: var(--gold-soft);
      border-color: var(--gold);
      color: var(--gold-text);
      font-weight: 700;
    }
    .quick-pill-count {
      font-size: 10px;
      padding: 1px 5px;
      border-radius: 4px;
      background: rgba(15, 23, 42, 0.08);
      color: inherit;
      font-variant-numeric: tabular-nums;
    }
    .quick-pill-btn.active .quick-pill-count {
      background: rgba(180, 83, 9, 0.14);
      color: var(--gold-text);
    }

    /* ==========================================================================
       3. UNIVERSAL ENTERPRISE TABLE PAGINATION & PROGRESSIVE LOAD BAR
       ========================================================================== */
    .table-pagination-bar {
      padding: 10px 16px;
      background: var(--paper);
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 12px;
      color: var(--muted);
    }
    .pagination-left,
    .pagination-center,
    .pagination-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .pagination-controls {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }
    select,
    .field select,
    .page-size-select,
    .theme-select,
    .toolbar-select,
    .cond-row select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2357534e' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat !important;
      background-position: right 10px center !important;
      background-size: 12px 12px !important;
      padding-right: 30px !important;
    }
    html[data-theme="dark"] select,
    html[data-theme="dark"] .field select,
    html[data-theme="dark"] .page-size-select,
    html[data-theme="dark"] .theme-select,
    html[data-theme="dark"] .toolbar-select,
    html[data-theme="dark"] .cond-row select {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    }
    .page-size-select {
      height: 28px;
      padding: 0 30px 0 10px !important;
      border-radius: 6px;
      border: 1px solid var(--border);
      background-color: var(--white);
      color: var(--ink);
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.14s ease, box-shadow 0.14s ease;
    }
    .page-size-select:hover {
      border-color: var(--gold);
    }

    /* ==========================================================================
       UNIVERSAL BADGE, PILL & BUTTON GEOMETRY STANDARD (100% UNIFORM ACROSS APP)
       - All status badges / task pills / stage pills / due pills / unit pills / table row buttons: 22px height, 5px radius, 1px border
       - All header / toolbar / profile-hero buttons: 28px height, 6px radius
       ========================================================================== */
    .badge,
    button.badge,
    button.row-task-btn,
    .stage-pill,
    .due-alert-pill,
    .entity-unit-pill,
    .doc-pill,
    .log-actor,
    .log-staff-badge {
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
      height: 22px !important;
      min-height: 22px !important;
      max-height: 22px !important;
      padding: 0 7px !important;
      border-radius: 5px !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      line-height: 1 !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
      vertical-align: middle !important;
    }
    .badge.green, .badge.task-done { background: #ecfdf5; color: #15803d; border: 1px solid #6ee7b7; }
    .badge.amber { background: #fffbeb; color: #b45309; border: 1px solid #fbbf24; }
    .badge.red { background: #fef2f2; color: #b91c1c; border: 1px solid #f87171; }
    .badge.gold { background: var(--gold-soft); color: var(--gold-text); border: 1px solid var(--gold-border); }
    .badge.blue { background: #eff6ff; color: #1d4ed8; border: 1px solid #7dd3fc; }
    .badge.purple { background: #f5f3ff; color: #6d28d9; border: 1px solid #c4b5fd; }
    .badge.stone, .badge.neutral { background: var(--soft); color: var(--ink2); border: 1px solid #cbd5e1; }

    .stage-pill.s1, .stage-pill.s1-approve { background: #f5f3ff; color: #6d28d9; border: 1px solid #c4b5fd; }
    .stage-pill.s2, .stage-pill.s2-assign  { background: #fef2f2; color: #b91c1c; border: 1px solid #f87171; }
    .stage-pill.s3, .stage-pill.s3-exec    { background: #fffbeb; color: #b45309; border: 1px solid #fbbf24; }
    .stage-pill.s4, .stage-pill.s4-verify  { background: #eff6ff; color: #1d4ed8; border: 1px solid #7dd3fc; }
    .stage-pill.s5, .stage-pill.s5-done    { background: #ecfdf5; color: #15803d; border: 1px solid #6ee7b7; }
    .stage-pill.s6, .stage-pill.s-rejected { background: var(--soft); color: var(--ink2); border: 1px solid #cbd5e1; }

    .due-alert-pill.overdue { background: #fecaca; color: #7f1d1d; border: 1px solid #ef4444; font-weight: 700 !important; }
    .due-alert-pill.today { background: #fee2e2; color: #991b1b; border: 1px solid #f87171; font-weight: 700 !important; }
    .due-alert-pill.tomorrow { background: #ffedd5; color: #c2410c; border: 1px solid #fb923c; }
    .due-alert-pill.soon { background: #fef9c3; color: #854d0e; border: 1px solid #facc15; }
    .due-alert-pill.future, .due-alert-pill.upcoming { background: var(--soft); color: var(--ink2); border: 1px solid #cbd5e1; }

    .identity-pill {
      height: 28px !important;
      min-height: 28px !important;
      max-height: 28px !important;
      padding: 0 10px !important;
      border-radius: 6px !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 6px !important;
      font-size: 12px !important;
      box-sizing: border-box !important;
    }
    .identity-pill .entity-unit-pill {
      background: transparent !important;
      border: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      height: auto !important;
      min-height: 0 !important;
      font-size: 12px !important;
      color: var(--ink) !important;
      font-weight: 600 !important;
    }
    .identity-pill .entity-unit-pill:hover {
      color: var(--gold-text) !important;
      text-decoration: underline;
    }

    /* Active filter tab buttons in Dashboard headers */
    button[id^="flt-"].btn.primary {
      background: var(--gold-soft) !important;
      color: var(--gold-text) !important;
      border-color: var(--gold) !important;
      font-weight: 700 !important;
    }

    .overview-grid {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 14px !important;
    }
    thead th {
      padding: 8px 8px !important;
      font-size: 10.5px !important;
      letter-spacing: 0.03em !important;
      white-space: nowrap !important;
    }
    thead th:first-child {
      padding-left: 12px !important;
    }
    thead th:last-child {
      padding-right: 12px !important;
    }
    #data-table thead th {
      padding: 0 !important;
    }
    tbody td,
    #turnovers-table tbody td,
    #data-table tbody td {
      padding: 12px 8px 8px 8px !important;
      font-size: 12.5px !important;
      line-height: 22px !important;
      vertical-align: top !important;
    }
    tbody td:first-child,
    #turnovers-table tbody td:first-child,
    #data-table tbody td:first-child {
      padding-left: 12px !important;
    }
    tbody td:last-child,
    #turnovers-table tbody td:last-child,
    #data-table tbody td:last-child {
      padding-right: 12px !important;
    }
    .cell-stack,
    .prop-unit-stacked,
    .audit-stack,
    .stay-stack,
    .avail-window-cell {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 4px !important;
      line-height: 1.2 !important;
    }
    .cell-line,
    .prop-unit-stacked > div,
    .prop-unit-subline,
    .audit-row,
    .stay-row,
    .audit-line,
    .avail-window-cell > div,
    .tasks-row-line2 {
      display: flex !important;
      align-items: center !important;
      gap: 5px;
      min-height: 22px !important;
      height: 22px !important;
      line-height: 1.2 !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      flex-wrap: nowrap !important;
      white-space: nowrap !important;
    }
    .status-dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      flex-shrink: 0;
      background: currentColor;
    }
    .status-dot.red { background: var(--red); }
    .status-dot.amber { background: var(--amber); }
    .status-dot.green { background: var(--green); }
    .status-dot.blue { background: var(--blue); }
    .pipe-sep {
      display: inline-block;
      margin: 0 5px;
      opacity: 0.45;
      font-weight: 400;
      user-select: none;
    }
    .cell-line.wrap-line {
      height: auto !important;
      min-height: 22px !important;
      line-height: 1.35 !important;
      flex-wrap: wrap !important;
      white-space: normal !important;
    }
    .cell-line.cell-line-sub {
      height: 16px !important;
      min-height: 16px !important;
      margin-top: -6px !important;
    }
    tbody td .entity-link {
      display: inline-flex !important;
      align-items: center !important;
      white-space: nowrap !important;
      max-width: 175px;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
    .prop-unit-subline .entity-unit-pill:first-child,
    td > .entity-unit-pill:first-child,
    .cell-line > .entity-unit-pill:first-child {
      margin-left: 0 !important;
    }
    tbody td .pricing-matrix-box {
      min-height: 48px;
    }
    tbody td .btn,
    tbody td .btn.sm,
    tbody td a.btn,
    tbody td button.row-task-btn {
      height: 22px !important;
      min-height: 22px !important;
      max-height: 22px !important;
      padding: 0 7px !important;
      font-size: 10.5px !important;
      font-weight: 600 !important;
      line-height: 1 !important;
      border-radius: 5px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      box-sizing: border-box !important;
      white-space: nowrap !important;
      vertical-align: middle !important;
    }
    tbody td .btn-icon,
    tbody td .btn.sm.btn-icon {
      width: 22px !important;
      min-width: 22px !important;
      max-width: 22px !important;
      height: 22px !important;
      min-height: 22px !important;
      max-height: 22px !important;
      padding: 0 !important;
      font-size: 11px !important;
      border-radius: 5px !important;
      flex-shrink: 0 !important;
    }
    .page-btn {
      appearance: none;
      -webkit-appearance: none;
      min-width: 28px;
      height: 28px;
      padding: 0 8px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--white);
      color: var(--ink);
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.12s ease;
      font-variant-numeric: tabular-nums;
    }
    .page-btn:hover:not(:disabled) {
      border-color: var(--gold);
      background: var(--gold-soft);
      color: var(--gold-text);
    }
    .page-btn.active {
      background: var(--gold-soft);
      border-color: var(--gold);
      color: var(--gold-text);
      font-weight: 700;
    }
    .page-btn:disabled {
      opacity: 0.42;
      cursor: not-allowed;
    }
    .btn-load-more-rows {
      height: 30px;
      padding: 0 12px;
      border-radius: 7px;
      border: 1px solid var(--gold-border);
      background: var(--gold-soft);
      color: var(--gold-text);
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.12s ease;
    }
    .btn-load-more-rows:hover {
      background: #ece0c8;
      border-color: var(--gold);
      color: var(--gold-text);
    }
    /* =========================================================================
       6-COLUMN UNIFIED PRICING BOX, PROPERTY FINANCIAL MATRIX & VACANCY WINDOW
       ========================================================================= */
    .pricing-matrix-box {
      display: grid;
      grid-template-columns: repeat(6, minmax(44px, 1fr));
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--white);
      overflow: hidden;
      min-width: 270px;
      box-shadow: 0 1px 2px rgba(24, 24, 27, 0.03);
      font-variant-numeric: tabular-nums;
    }
    .pricing-matrix-box.fin-matrix-4 {
      grid-template-columns: repeat(4, minmax(62px, 1fr));
      min-width: 260px;
    }
    .pricing-matrix-box.fin-matrix-5 {
      grid-template-columns: repeat(5, minmax(60px, 1fr));
      min-width: 310px;
    }
    .pm-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 4px 5px;
      border-right: 1px solid var(--line);
      text-align: center;
      line-height: 1.2;
      min-width: 0;
    }
    .pm-cell:last-child {
      border-right: none;
    }
    .pm-lbl {
      font-size: 8.5px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 2px;
      white-space: nowrap;
    }
    .pm-val {
      font-size: 11px;
      color: var(--ink-soft);
      font-weight: 500;
      white-space: nowrap;
    }
    .pm-cell.pm-sub {
      background: #fafafa;
    }
    .pm-cell.pm-bold {
      background: var(--white);
    }
    .pm-cell.pm-bold .pm-lbl {
      color: var(--ink-soft);
      font-weight: 800;
    }
    .pm-cell.pm-bold .pm-val {
      color: var(--ink);
      font-weight: 800;
      font-size: 12px;
    }
    .pm-cell.pm-primary {
      background: var(--gold-soft);
    }
    .pm-cell.pm-primary .pm-lbl {
      color: var(--gold-text);
      font-weight: 800;
    }
    .pm-cell.pm-primary .pm-val {
      color: var(--gold-text);
      font-weight: 900;
      font-size: 12.5px;
    }

    .avail-window-cell {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 135px;
    }
    .avail-window-top {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: nowrap;
    }
    .avail-window-dates {
      font-size: 10.5px;
      color: var(--ink);
      font-weight: 600;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    /* =========================================================================
       FIRST & LAST MONTH [ MONTHS * RATE = TOTAL ] FORMULA ROW
       ========================================================================= */
    .fl-formula-row {
      display: grid;
      grid-template-columns: 58px 14px minmax(92px, 1fr) 14px minmax(105px, 1.15fr);
      align-items: center;
      gap: 4px;
      background: var(--paper);
      padding: 4px 6px;
      border: 1px solid var(--border);
      border-radius: 8px;
    }
    .fl-op {
      text-align: center;
      font-weight: 800;
      font-size: 13px;
      color: var(--muted);
      user-select: none;
    }
    .fl-inp {
      width: 100% !important;
      height: 30px !important;
      padding: 4px 7px !important;
      font-size: 12px !important;
      border-radius: 6px !important;
      font-variant-numeric: tabular-nums;
    }
    .fl-inp-months {
      text-align: center;
      font-weight: 700;
    }
    .fl-inp-rate::placeholder {
      color: #a1a1aa;
      opacity: 0.78;
      font-style: italic;
      font-weight: 500;
    }
    .fl-inp-total {
      font-weight: 800;
      background: var(--white) !important;
      border-color: var(--gold-border) !important;
      color: var(--ink) !important;
    }
    .fl-inp-total::placeholder {
      color: #a1a1aa;
      font-weight: 500;
      font-size: 11px;
    }

    /* =========================================================================
       PUBLIC SHAREABLE PROPERTY / UNIT CLIENT SHOWCASE OVERLAY
       ========================================================================= */
    .showcase-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(15, 23, 42, 0.72);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow-y: auto;
      padding: 20px 14px;
    }
    .showcase-shell {
      width: 100%;
      max-width: 1160px;
      background: var(--white);
      border-radius: 16px;
      border: 1px solid var(--border);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
      overflow: hidden;
      margin: auto;
    }
    .showcase-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 22px;
      background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
      color: #ffffff;
      flex-wrap: wrap;
    }
    .showcase-brand {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .showcase-brand-badge {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: var(--gold);
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .showcase-body {
      padding: 22px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .showcase-hero-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--line);
      padding-bottom: 16px;
    }
    .showcase-title {
      font-size: 24px;
      font-weight: 800;
      color: var(--ink);
      margin: 4px 0 6px;
      letter-spacing: -0.02em;
    }
    .showcase-meta-pills {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .showcase-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
      gap: 20px;
      align-items: start;
    }
    .showcase-main-stage {
      width: 100%;
      aspect-ratio: 16 / 10;
      background: #0f172a;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--border);
    }
    .showcase-main-stage img,
    .showcase-main-stage iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: none;
    }
    .showcase-thumbs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 8px 2px 4px;
    }
    .showcase-thumb {
      width: 86px;
      height: 60px;
      border-radius: 8px;
      overflow: hidden;
      border: 2px solid transparent;
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      background: #18181b;
      opacity: 0.78;
      transition: all 0.14s ease;
    }
    .showcase-thumb:hover,
    .showcase-thumb.active {
      opacity: 1;
      border-color: var(--gold);
      transform: translateY(-1px);
    }
    .showcase-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .showcase-unit-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .showcase-unit-tab {
      padding: 8px 13px;
      border-radius: 9px;
      border: 1px solid var(--border);
      background: var(--paper);
      color: var(--ink);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.14s ease;
    }
    .showcase-unit-tab.active {
      background: var(--gold-soft);
      color: var(--gold-text);
      border-color: var(--gold);
    }
    .showcase-contact-card {
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .showcase-whatsapp-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 14px;
      border-radius: 9px;
      background: #ecfdf5;
      color: #15803d !important;
      border: 1px solid #86efac;
      font-weight: 800;
      font-size: 13px;
      text-decoration: none;
      transition: all 0.14s ease;
    }
    .showcase-whatsapp-btn:hover {
      background: #dcfce7;
      border-color: #4ade80;
    }
    .showcase-call-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 11px 14px;
      border-radius: 9px;
      background: var(--gold-soft);
      color: var(--gold-text) !important;
      border: 1px solid var(--gold-border);
      font-weight: 800;
      font-size: 13px;
      text-decoration: none;
      transition: all 0.14s ease;
    }
    .showcase-call-btn:hover {
      border-color: var(--gold);
      filter: brightness(0.97);
    }
    @media (max-width: 900px) {
      .showcase-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* PDI Living Standard Checklist & Gateway Status Strip */
    .pdi-checklist-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .pdi-pillar-row {
      border: 1px solid var(--line);
      border-radius: 9px;
      background: var(--white);
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color 0.14s ease, background 0.14s ease;
    }
    .pdi-pillar-row.is-issue {
      border-color: var(--gold-border);
      background: var(--gold-soft);
    }
    .pdi-pillar-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .pdi-pillar-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--ink);
    }
    .pdi-seg-group {
      display: inline-flex;
      flex-wrap: wrap;
      gap: 4px;
      background: var(--paper);
      padding: 3px;
      border-radius: 8px;
      border: 1px solid var(--line);
    }
    .pdi-seg-btn {
      appearance: none;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      font-size: 11.5px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.12s ease;
    }
    .pdi-seg-btn:hover {
      color: var(--ink);
      background: var(--white);
    }
    .pdi-seg-btn.active-PASS {
      background: #ecfdf5;
      color: #15803d;
      border-color: #86efac;
    }
    .pdi-seg-btn.active-REPAIR {
      background: #fef2f2;
      color: #b91c1c;
      border-color: #fca5a5;
    }
    .pdi-seg-btn.active-CLEANING {
      background: #eff6ff;
      color: #1d4ed8;
      border-color: #93c5fd;
    }
    .pdi-seg-btn.active-CHANGE {
      background: #faf5ff;
      color: #6d28d9;
      border-color: #d8b4fe;
    }
    .pdi-issue-detail-grid {
      display: grid;
      grid-template-columns: 190px minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      padding-top: 4px;
      border-top: 1px dashed var(--line);
    }
    @media (max-width: 680px) {
      .pdi-issue-detail-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    /* Clean Executive Zero-Leak Sign-In Gate */
    body.auth-locked {
      background: #f4f2ee !important;
      overflow: hidden !important;
    }
    body.auth-locked > .header,
    body.auth-locked > .sticky-nav-shell,
    body.auth-locked > main {
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    body.auth-locked #modal-auth::backdrop {
      background: #f4f2ee !important;
      backdrop-filter: none !important;
    }
    #modal-auth-close-btn[hidden],
    body.auth-locked #modal-auth-close-btn {
      display: none !important;
    }
    #modal-auth {
      border-radius: 16px !important;
      border: 1px solid rgba(28, 25, 23, 0.09) !important;
      box-shadow: 0 22px 54px rgba(15, 23, 42, 0.11) !important;
      background: #ffffff !important;
    }
    .kashaneh-auth-brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      padding: 6px 0 12px;
    }
    .kashaneh-auth-brand img {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      object-fit: cover;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    .kashaneh-auth-title {
      margin: 0;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #1c1917;
    }
    .kashaneh-auth-sub {
      margin: 0;
      font-size: 13px;
      line-height: 1.5;
      color: #57534e;
      max-width: 340px;
    }
    .kashaneh-auth-input {
      width: 100%;
      height: 44px !important;
      padding: 0 14px !important;
      border-radius: 10px !important;
      border: 1px solid #d6d3d1 !important;
      background: #fafaf9 !important;
      font-size: 15px !important;
      font-weight: 500 !important;
      color: #1c1917 !important;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    .kashaneh-auth-input:focus {
      outline: none !important;
      background: #ffffff !important;
      border-color: #1c1917 !important;
      box-shadow: 0 0 0 3px rgba(28, 25, 23, 0.08) !important;
    }
    .kashaneh-auth-cta {
      width: 100%;
      height: 44px !important;
      border-radius: 10px !important;
      background: #1c1917 !important;
      color: #ffffff !important;
      border: 1px solid #1c1917 !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      justify-content: center !important;
      cursor: pointer;
      transition: opacity 0.15s ease, transform 0.1s ease;
    }
    .kashaneh-auth-cta:hover:not(:disabled) {
      opacity: 0.91;
    }
    .kashaneh-auth-cta:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }