@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  }

  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  }

  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  }

  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2");
  }

  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 800;
    src: url("/assets/fonts/inter-latin-800-normal.woff2") format("woff2");
  }

  :root {
    --bg: #f5f8fb;
    --surface: #ffffff;
    --surface-2: #f9fbfd;
    --sidebar: #08182f;
    --sidebar-2: #10294a;
    --primary: #1da1f2;
    --primary-2: #0c7abf;
    --primary-soft: #e0f0fd;
    --text: #0f1c2e;
    --muted: #657786;
    --line: #e2e9f1;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(3, 12, 26, 0.06);
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  body.app {
    min-height: 100vh;
  }

  /* Legacy public-page helpers (ported from app.css) */
  .base-color {
    color: var(--primary) !important;
  }

  .header-bg {
    background-color: var(--primary);
    color: #fff;
  }

  .logo-text {
    color: #fff;
  }

  /* Public landing page */
  body.public {
    background: var(--bg);
    margin: 0;
  }

  .site-footer {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 24px 16px;
  }

  .site-footer a {
    color: var(--primary-2);
    text-decoration: underline;
  }

  .landing {
    display: block;
  }

  .landing-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    background: linear-gradient(135deg, #061630 0%, #10294a 55%, #0b6ba3 100%);
    color: #eaf6fe;
    padding: 148px 32px 72px;
    display: flex;
    flex-direction: column;
  }

  .landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 15% 10%, rgba(255, 255, 255, .12), transparent 50%), radial-gradient(circle at 85% 40%, rgba(34, 197, 94, .22), transparent 55%), radial-gradient(circle at 40% 100%, rgba(29, 161, 242, .35), transparent 60%);
    pointer-events: none;
  }

  .landing-glow {
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, .35), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    animation: glow-drift 16s ease-in-out infinite alternate;
  }

  @keyframes glow-drift {
    from {
      transform: translate3d(0, 0, 0) scale(1);
    }

    to {
      transform: translate3d(-70px, 50px, 0) scale(1.18);
    }
  }

  /* Fixed glass topnav — transparent over the hero, frosted once you scroll */
  .landing-topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: max(14px, env(safe-area-inset-top)) clamp(20px, 4vw, 32px) 14px;
    transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .landing-topnav::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, .08);
    opacity: 0;
    transition: opacity .35s ease;
  }

  .landing-topnav.is-scrolled {
    background: rgba(6, 22, 48, .8);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    backdrop-filter: blur(16px) saturate(1.6);
    box-shadow: 0 16px 40px rgba(3, 12, 26, .35);
    padding-top: max(8px, env(safe-area-inset-top));
    padding-bottom: 8px;
  }

  .landing-topnav.is-scrolled::after {
    opacity: 1;
  }

  .landing-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .landing-logo {
    height: 96px;
    width: auto;
    display: block;
    transition: height .35s ease;
  }

  .landing-topnav.is-scrolled .landing-logo {
    height: 46px;
  }

  .landing-wordmark {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
  }

  .landing-wordmark .accent {
    color: var(--primary);
  }

  .landing-topnav-links {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .landing-topnav-links a {
    color: rgba(239, 246, 253, .85);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
  }

  .landing-topnav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
  }

  .landing-topnav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .primary-cta-sm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--primary);
    color: #fff !important;
    padding: 9px 18px;
    border-radius: 999px;
    font-weight: 600 !important;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(29, 161, 242, .35);
    transition: background-color .15s ease, transform .15s ease;
  }

  .primary-cta-sm:hover {
    background: var(--primary-2);
    transform: translateY(-1px);
  }

  .primary-cta-sm:active {
    transform: scale(.96);
  }

  .primary-cta-sm svg {
    width: 14px;
    height: 14px;
  }

  /* Animated burger (mobile only) */
  .nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #eaf6fe;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
  }

  .nav-burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.3);
  }

  .nav-burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Full-screen mobile menu with staggered links */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: linear-gradient(165deg, rgba(6, 22, 48, .98) 0%, rgba(16, 41, 74, .97) 55%, rgba(11, 107, 163, .95) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    padding: 96px 24px calc(28px + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }

  body.menu-open {
    overflow: hidden;
  }

  body.menu-open .mobile-menu {
    opacity: 1;
    visibility: visible;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
  }

  .mobile-menu-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    padding: 16px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .35s ease, transform .35s ease;
  }

  .mobile-menu-links a svg {
    width: 20px;
    height: 20px;
    color: rgba(239, 246, 253, .5);
  }

  body.menu-open .mobile-menu-links a {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 55ms + 60ms);
  }

  .mobile-menu-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .35s ease, transform .35s ease;
  }

  body.menu-open .mobile-menu-ctas {
    opacity: 1;
    transform: none;
    transition-delay: .3s;
  }

  .mobile-menu-ctas .primary-cta,
  .mobile-menu-ctas .ghost-cta {
    justify-content: center;
  }

  .mobile-menu-note {
    text-align: center;
    font-size: 12px;
    color: rgba(239, 246, 253, .55);
    margin-top: 16px;
    opacity: 0;
    transition: opacity .35s ease .38s;
  }

  body.menu-open .mobile-menu-note {
    opacity: 1;
  }

  @media (min-width: 821px) {
    .mobile-menu {
      display: none;
    }
  }

  @media (max-width: 820px) {
    .landing-topnav {
      padding: max(10px, env(safe-area-inset-top)) 16px 10px;
    }

    .landing-logo {
      height: 44px;
    }

    .landing-topnav.is-scrolled .landing-logo {
      height: 38px;
    }

    .landing-topnav-links {
      display: none;
    }

    .nav-burger {
      display: inline-flex;
    }

    .primary-cta-sm {
      padding: 8px 14px;
      font-size: 13px;
    }

    .landing-hero {
      padding: 100px 20px 56px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .landing-glow {
      animation: none;
    }

    .landing-topnav,
    .landing-logo,
    .nav-burger span,
    .mobile-menu,
    .mobile-menu-links a,
    .mobile-menu-ctas {
      transition: none;
    }
  }

  .landing-hero-inner {
    position: relative;
    max-width: 920px;
    margin: auto;
    text-align: center;
    padding: 60px 0 40px;
  }

  .landing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(239, 246, 253, .9);
    margin-bottom: 22px;
  }

  .landing-eyebrow svg {
    width: 14px;
    height: 14px;
    color: var(--primary-soft);
  }

  .landing-headline {
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.1;
    margin: 0 0 18px;
    color: #fff;
  }

  .landing-headline .accent {
    background: linear-gradient(135deg, #9ed7fb, #6cc3f8);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .landing-sub {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(239, 246, 253, .78);
    max-width: 640px;
    margin: 0 auto 32px;
  }

  .landing-ctas {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .primary-cta,
  .ghost-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    text-decoration: none;
  }

  .primary-cta {
    background: #fff;
    color: #061630 !important;
    box-shadow: 0 10px 30px rgba(34, 197, 94, .25);
  }

  .primary-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px rgba(34, 197, 94, .35);
  }

  .ghost-cta {
    background: rgba(255, 255, 255, .06);
    color: #eaf6fe !important;
    border: 1px solid rgba(255, 255, 255, .14);
  }

  .ghost-cta:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .24);
  }

  .primary-cta:active,
  .ghost-cta:active {
    transform: scale(.97);
  }

  .primary-cta svg,
  .ghost-cta svg {
    width: 16px;
    height: 16px;
  }

  .landing-metrics {
    margin-top: 48px;
    display: flex;
    justify-content: center;
    gap: 44px;
    flex-wrap: wrap;
  }

  .landing-metrics>div {
    text-align: center;
  }

  .landing-metrics strong {
    display: block;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    margin-bottom: 4px;
  }

  .landing-metrics span {
    font-size: 12px;
    color: rgba(239, 246, 253, .65);
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .landing-footline {
    position: relative;
    z-index: 2;
    text-align: center;
    color: rgba(239, 246, 253, .55);
    font-size: 12px;
    margin-top: auto;
    padding-top: 32px;
  }

  .landing-footline a {
    color: rgba(239, 246, 253, .9);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Public-form pages (signup, apply) */
  .public-form-page {
    min-height: 100vh;
    padding: 24px 16px 48px;
    background: linear-gradient(180deg, var(--bg) 0%, #edf3f9 100%);
  }

  .public-form-shell {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .public-form-shell:has(.public-form-wide) {
    max-width: 1100px;
  }

  .public-form-wide .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .public-form-brand {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .public-form-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
  }

  .public-form-back:hover {
    color: var(--primary-2);
  }

  .public-form-back svg {
    width: 14px;
    height: 14px;
  }

  .public-form-logo {
    height: 36px;
    width: auto;
    display: block;
    margin-left: auto;
  }

  .public-form-wordmark {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-left: auto;
  }

  .public-form-wordmark .accent {
    color: var(--primary);
  }

  .public-form-card {
    padding: 32px !important;
    border-radius: 20px;
  }

  .public-form-title {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  .public-form-sub {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 14px;
  }

  .landing-features {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 32px;
  }

  .landing-features h2 {
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -.03em;
    margin: 0 0 36px;
    color: var(--text);
  }

  .feature-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    text-decoration: none;
    color: var(--text);
  }

  .feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-soft);
    box-shadow: 0 20px 40px rgba(3, 12, 26, .08);
  }

  .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary-2);
    display: grid;
    place-items: center;
  }

  .feature-icon svg {
    width: 22px;
    height: 22px;
  }

  .feature-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
  }

  .feature-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
  }

  .feature-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-2);
    font-weight: 600;
    font-size: 14px;
  }

  .feature-cta svg {
    width: 14px;
    height: 14px;
    transition: transform .15s ease;
  }

  .feature-card:hover .feature-cta svg {
    transform: translateX(3px);
  }

  @media (max-width: 640px) {
    .landing-hero {
      padding: 92px 20px 48px;
    }

    .landing-features {
      padding: 48px 20px;
    }

    .landing-hero-inner {
      padding: 20px 0 24px;
    }

    .landing-eyebrow {
      font-size: 10px;
      letter-spacing: .08em;
      padding: 6px 12px;
      margin-bottom: 18px;
    }

    .landing-headline {
      font-size: clamp(1.75rem, 7.6vw, 2.5rem);
    }

    .landing-sub {
      font-size: 15.5px;
      margin-bottom: 26px;
    }

    .landing-ctas {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }

    .landing-ctas .primary-cta,
    .landing-ctas .ghost-cta {
      justify-content: center;
    }

    .landing-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin-top: 36px;
    }

    .landing-metrics>div {
      padding: 0 8px;
    }

    .landing-metrics>div+div {
      border-left: 1px solid rgba(255, 255, 255, .14);
    }

    .landing-metrics strong {
      font-size: 21px;
    }

    .landing-metrics span {
      font-size: 10px;
      letter-spacing: .05em;
    }
  }

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

  .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--line);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: middle;
  }

  .spinner.lg {
    width: 28px;
    height: 28px;
    border-width: 3px;
  }

  .spinner.inverse {
    border-color: rgba(255, 255, 255, .25);
    border-top-color: #fff;
  }

  .spinner-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: var(--muted);
    font-size: 14px;
  }

  @keyframes topbar-indeterminate {
    0% {
      left: -40%;
      right: 100%;
    }

    50% {
      left: 20%;
      right: 20%;
    }

    100% {
      left: 100%;
      right: -40%;
    }
  }

  /* Full-page loader (see _layout.default.lhtml). Covers the UI from first
   paint until app.ts dismisses it, so half-hydrated tables never flash. */
  #page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity .3s ease;
  }

  #page-loader.done {
    opacity: 0;
    pointer-events: none;
  }

  #page-loader img {
    width: 180px;
    max-width: 44vw;
    height: auto;
    animation: loader-breathe 1.5s ease-in-out infinite;
  }

  @keyframes loader-breathe {

    0%,
    100% {
      transform: scale(1);
      opacity: .55;
    }

    50% {
      transform: scale(1.05);
      opacity: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    #page-loader img {
      animation: none;
    }
  }

  /* Large attachment drop target (tenant/property/booking/maintenance
   attachment sections). The generous min-height is the point — a target big
   enough that a casual drag can't miss it. */
  .attach-drop {
    margin-top: 14px;
    min-height: 220px;
    padding: 24px;
    border: 2px dashed var(--line);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    color: var(--muted);
    transition: border-color .15s ease, background-color .15s ease;
    cursor: pointer;
  }

  .attach-drop:hover {
    border-color: var(--primary);
  }

  .attach-drop svg {
    width: 40px;
    height: 40px;
    color: var(--primary);
    margin-bottom: 8px;
  }

  .attach-drop .dz-primary {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
  }

  .attach-drop .dz-hint {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
  }

  .attach-drop.dragover {
    border-color: var(--primary);
    background: var(--primary-soft);
  }

  /* Whole-window attachment drop target (see ManagerView.handleDragAndDrop):
   shown while a file drag is over the page so the drop can't miss the small
   dashed #drop-zone affordance. */
  #drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(6, 22, 48, .5);
  }

  #drop-overlay.on {
    display: flex;
  }

  #drop-overlay .drop-card {
    background: var(--bg);
    border: 2px dashed var(--primary);
    border-radius: 16px;
    padding: 34px 56px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    pointer-events: none;
  }

  #app-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
    display: none;
  }

  #app-progress.on {
    display: block;
  }

  #app-progress::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--primary), var(--success));
    animation: topbar-indeterminate 1.1s ease-in-out infinite;
  }

  .layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 100vh;
  }

  /* Pinned full-height: the page (body) scrolls, the sidebar stays put. On
   viewports shorter than its content it scrolls internally so the footer
   (settings/logout/user chip) stays reachable. */
  .sidebar {
    background: linear-gradient(180deg, #061630 0%, #08182f 100%);
    color: #eaf6fe;
    padding: 22px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .logo small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: .7;
    margin-top: 4px;
  }

  .logo .logo-img {
    height: 48px;
    width: auto;
    display: block;
  }

  .context-header {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 10px 14px;
    color: #eaf6fe;
    font-size: 13px;
  }

  .context-header .label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: rgba(239, 246, 253, .55);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 2px;
  }

  .context-header .context-account {
    display: block;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .portal-toggle {
    display: flex;
    gap: 3px;
    margin-top: 10px;
    padding: 3px;
    background: rgba(0, 0, 0, .28);
    border-radius: 8px;
  }

  .portal-toggle .portal-seg {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(239, 246, 253, .6);
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
  }

  .portal-toggle .portal-seg:hover {
    color: #fff;
  }

  .portal-toggle .portal-seg.active {
    background: rgba(34, 197, 94, .28);
    color: #fff;
    cursor: default;
  }

  .portal-toggle .portal-seg svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
  }

  /* claude: grow to fill the full-height sidebar so the .spacer can push the
   footer (settings/logout + user chip) to the very bottom of the page. */
  .nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    flex: 1 1 auto;
    min-height: 0;
  }

  .nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: rgba(239, 246, 253, .92);
    font-size: 15px;
    cursor: pointer;
  }

  .nav a.active,
  .nav a:hover {
    background: rgba(63, 171, 244, 0.18);
    color: #fff;
  }

  .wa-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: inherit;
  }

  .wa-fab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    background: #25D366;
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(37, 211, 102, .35), 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  }

  .wa-fab:hover {
    background: #1ebd5a;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(37, 211, 102, .4), 0 3px 8px rgba(0, 0, 0, .14);
  }

  .wa-fab:active {
    transform: translateY(0);
  }

  .wa-fab svg {
    width: 22px;
    height: 22px;
    fill: #fff;
    flex-shrink: 0;
  }

  .wa-fab-label {
    white-space: nowrap;
  }

  .wa-widget.open .wa-fab-label {
    display: none;
  }

  .wa-widget.open .wa-fab {
    padding: 12px;
  }

  .wa-panel {
    width: 340px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 4px 12px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    animation: wa-pop .18s ease-out;
    transform-origin: bottom right;
  }

  .wa-panel[hidden] {
    display: none;
  }

  .wa-header {
    background: linear-gradient(180deg, #075E54 0%, #128C7E 100%);
    color: #fff;
    padding: 14px 14px 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .wa-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .wa-avatar svg {
    width: 22px;
    height: 22px;
    fill: #fff;
  }

  .wa-head-text {
    flex: 1;
    min-width: 0;
  }

  .wa-title {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -.01em;
  }

  .wa-status {
    font-size: 12px;
    opacity: .92;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }

  .wa-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4CE27A;
    box-shadow: 0 0 0 2px rgba(76, 226, 122, .25);
  }

  .wa-close {
    background: transparent;
    border: 0;
    color: #fff;
    opacity: .85;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
  }

  .wa-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .12);
  }

  .wa-close svg {
    width: 18px;
    height: 18px;
  }

  .wa-body {
    background: #ECE5DD;
    padding: 18px 14px;
    min-height: 130px;
    background-image: radial-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px);
    background-size: 14px 14px;
  }

  .wa-bubble {
    background: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #111;
    line-height: 1.45;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    max-width: 88%;
    position: relative;
  }

  .wa-bubble p {
    margin: 0;
  }

  .wa-bubble.wa-in {
    border-top-left-radius: 2px;
  }

  .wa-bubble.wa-in::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: #fff;
    border-right-color: #fff;
  }

  .wa-composer {
    display: flex;
    gap: 8px;
    padding: 10px;
    background: #F0F0F0;
    align-items: center;
  }

  .wa-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-family: inherit;
    color: #111;
    outline: none;
  }

  .wa-input::placeholder {
    color: #98a1a6;
  }

  .wa-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #25D366;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .15s ease, transform .12s ease;
  }

  .wa-send:hover {
    background: #1ebd5a;
  }

  .wa-send:active {
    transform: scale(.95);
  }

  .wa-send svg {
    width: 18px;
    height: 18px;
    fill: #fff;
  }

  @keyframes wa-pop {
    from {
      opacity: 0;
      transform: translateY(8px) scale(.98);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (max-width: 860px) {
    .wa-widget {
      bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      right: 16px;
    }

    .wa-fab {
      padding: 12px;
    }

    .wa-fab .wa-fab-label {
      display: none;
    }

    .wa-panel {
      width: calc(100vw - 32px);
    }
  }

  .nav .spacer {
    flex: 1;
  }

  /* Bottom group: settings, testing, logout. */
  .nav-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  /* Signed-in identity chip, sits under the account switcher at the top. */
  /* claude: sleeker, flat user chip — now pinned to the bottom of the sidebar,
   grouped with the footer (see sidemenu.phtml). */
  .user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
  }

  .nav-footer .user-chip {
    padding: 12px 6px 4px;
    margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
  }

  .user-chip-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
  }

  .user-chip-name {
    font-weight: 600;
    font-size: 13.5px;
    color: rgba(239, 246, 253, .95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-chip-role {
    font-size: 11px;
    color: rgba(239, 246, 253, .5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .user-chip-role:empty {
    display: none;
  }

  /* logout sits to the right of the user chip, icon-only */
  .user-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .user-row .user-chip {
    flex: 1;
    min-width: 0;
    padding: 2px 6px;
    margin: 0;
    border: 0;
  }

  .nav #logout {
    flex-shrink: 0;
    margin-left: auto;
    width: 34px;
    height: 34px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 8px;
    color: rgba(239, 246, 253, .7);
  }

  .nav #logout svg {
    width: 17px;
    height: 17px;
  }

  .nav #logout:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #fff;
  }

  .main {
    padding: 22px 28px 34px;
  }

  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
  }

  .page-title h1 {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
  }

  .page-title p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
  }

  /* Back-link (e.g. "← Team") — keep the icon vertically centered with the text
   instead of riding high on the baseline. */
  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .back-link svg {
    width: 16px;
    height: 16px;
  }

  .top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .search {
    min-width: 280px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 14px;
    color: var(--muted);
    box-shadow: var(--shadow);
  }

  .icon-btn,
  .ghost-btn,
  .primary-btn,
  .warning-btn,
  .danger-btn,
  .outline-btn {
    border: 1px solid var(--line);
    background: var(--surface);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 14px;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }

  .icon-btn:focus-visible,
  .ghost-btn:focus-visible,
  .primary-btn:focus-visible,
  .warning-btn:focus-visible,
  .danger-btn:focus-visible,
  .outline-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .primary-btn {
    background: var(--primary-2);
    border-color: var(--primary-2);
    color: #fff;
  }

  .primary-btn:hover {
    background: #0c7abf;
    border-color: #0c7abf;
  }

  .outline-btn {
    color: var(--text);
    background: var(--surface);
  }

  .outline-btn:hover {
    background: #f3f5f4;
    border-color: #c3cdda;
  }

  .ghost-btn {
    background: transparent;
    border-color: transparent;
    color: var(--text);
  }

  .ghost-btn:hover {
    background: #f3f5f4;
  }

  .warning-btn {
    background: #fff5db;
    color: #9a5b00;
    border-color: #fde3a7;
  }

  .warning-btn:hover {
    background: #ffecb3;
    border-color: #f8c878;
  }

  .danger-btn {
    background: #fff0f1;
    color: #c92b39;
    border-color: #ffcfd5;
  }

  .danger-btn:hover {
    background: #ffdde1;
    border-color: #ff9aa6;
  }

  .btn-sm {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 6px;
  }

  /* claude: split button + dropdown menu (topbar "Add" actions). Click-to-open
   (hover is unreliable on touch and prone to accidental opens); wiring lives
   in reusables/app.ts wireMenuToggle() — closes on outside click and Escape. */
  .split-btn {
    display: inline-flex;
    position: relative;
  }

  .split-btn>.primary-btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .split-btn>.split-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: rgba(255, 255, 255, .35);
    padding: 9px 9px;
  }

  .menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 250px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 6px;
    z-index: 900;
    display: none;
  }

  .menu-panel.open {
    display: block;
  }

  .menu-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
  }

  .menu-item:hover {
    background: var(--surface-2);
  }

  .menu-item svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    margin-top: 2px;
    flex-shrink: 0;
    color: var(--primary-2);
  }

  .menu-item-label {
    display: block;
    font-weight: 600;
    font-size: 13.5px;
  }

  .menu-item-hint {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 1px;
  }

  .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  .card.pad {
    padding: 24px;
  }

  .card.pad+.card.pad,
  .card.pad+*+.card.pad {
    margin-top: 16px;
  }

  .form-grid {
    gap: 14px 16px;
  }

  .form-grid .field>label {
    margin-bottom: 2px;
  }

  .grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  .grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .stat {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .stat .label {
    color: var(--muted);
    font-size: 13px;
  }

  .stat .value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
  }

  .stat .meta {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
  }

  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }

  .section-title h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    position: relative;
    padding-left: 12px;
  }

  .section-title h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), var(--success));
  }

  .section-title span {
    color: var(--muted);
    font-size: 13px;
  }

  .list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .list-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    transition: background-color .12s ease, border-color .12s ease, transform .12s ease;
  }

  .list-item[data-url] {
    cursor: pointer;
  }

  .list-item[data-url]:hover {
    background-color: var(--surface-2);
    border-color: #d6ddd9;
    transform: translateY(-1px);
  }

  .list-item .title {
    font-weight: 700;
    margin-bottom: 5px;
  }

  .list-item .meta {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
  }

  .badge.success {
    background: #e9faef;
    color: #16803d;
  }

  .badge.warning {
    background: #fff4da;
    color: #a16207;
  }

  .badge.danger {
    background: #feebee;
    color: #be123c;
  }

  .badge.soft {
    background: var(--primary-soft);
    color: var(--primary-2);
  }

  /* Ledger amounts — credits green, debits red. Used by the landlord bank page
   and the manager ledger report. */
  .amt-credit {
    color: var(--primary-2);
    font-weight: 600;
    white-space: nowrap;
  }

  .amt-debit {
    color: var(--danger);
    font-weight: 600;
    white-space: nowrap;
  }

  .prop-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
  }

  .prop-description {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
  }

  .message {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    border-left: 4px solid;
  }

  .message.success {
    background: #e9faef;
    color: #16803d;
    border-left-color: #16803d;
  }

  .message.error {
    background: #feebee;
    color: #be123c;
    border-left-color: #be123c;
  }

  .message.info {
    background: #e0f2fe;
    color: #0369a1;
    border-left-color: #0369a1;
  }

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    text-align: left;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
  }

  th {
    color: var(--muted);
    font-weight: 600;
    background: #fbfcfc;
  }

  tr:last-child td {
    border-bottom: none;
  }

  tbody tr {
    transition: background-color .12s ease;
  }

  tbody tr:hover {
    background-color: var(--surface-2);
  }

  tbody tr[id] {
    cursor: pointer;
  }

  tbody tr:has(.no-data) {
    background: transparent !important;
    cursor: default;
  }

  tbody tr:has(.no-data):hover {
    background: transparent !important;
  }

  td.no-data {
    text-align: center;
    padding: 48px 20px;
    color: var(--muted);
    font-size: 14px;
    font-style: normal;
    background: transparent;
    border-bottom: 0;
  }

  td.no-data::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background-color: var(--surface-2);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
  }

  .property-cell {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .thumb {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #bfe4d4, #e6f4ee);
    border: 1px solid #d6ebe1;
    flex-shrink: 0;
  }

  .page-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 0;
  }

  .page-card-body {
    padding: 18px 20px 20px;
  }

  .profile-hero {
    background: linear-gradient(135deg, #4b8f8a 0%, #4f9c96 100%);
    color: #fff;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    box-shadow: var(--shadow);
  }

  .profile-hero .who {
    display: flex;
    gap: 16px;
    align-items: center;
  }

  .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .35);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
    flex-shrink: 0;
  }

  .avatar svg {
    width: 28px;
    height: 28px;
  }

  .profile-hero h1 {
    margin: 0;
    font-size: 24px;
  }

  .profile-hero p {
    margin: 6px 0 0;
    opacity: .9;
  }

  .updated-pill {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    flex-shrink: 0;
  }

  .updated-pill svg {
    width: 18px;
    height: 18px;
    opacity: .85;
  }

  .updated-pill-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .75;
    line-height: 1;
    margin-bottom: 3px;
  }

  .updated-pill-value {
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
  }

  .stats-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
  }

  .mini-stat {
    background: rgba(15, 23, 42, .12);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 12px 14px;
  }

  .mini-stat strong {
    display: block;
    font-size: 20px;
  }

  .mini-stat span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: .9;
  }

  .tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #eff4f2;
    border-radius: 10px;
    width: fit-content;
    flex-wrap: wrap;
  }

  .tab {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: 0;
    font-family: inherit;
    transition: color .15s ease, background-color .15s ease;
  }

  .tab:hover {
    color: var(--text);
  }

  .tab.active {
    background: #fff;
    color: var(--text);
    font-weight: 600;
  }

  /* Property profile: separate the view switcher (places, left) from the action bar
   (verbs, right). Both live inside #view-tabs so magicui still governs every anchor.
   Places keep the pill-tab look; actions read as buttons with icons so the manager
   recognises "what I can do" without scanning the whole strip. */
  .view-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
  }

  .view-nav .view-switch {
    margin: 0;
  }

  .action-bar {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .action-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  }

  .action-tab svg {
    width: 15px;
    height: 15px;
  }

  .action-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
  }

  .action-tab.active {
    background: var(--primary-2);
    border-color: var(--primary-2);
    color: #fff;
  }

  .action-tab.active svg {
    color: #fff;
  }

  @media (max-width: 820px) {
    .view-nav {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
    }

    .view-nav .view-switch {
      width: 100%;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .view-nav .view-switch::-webkit-scrollbar {
      display: none;
    }

    .action-bar {
      width: 100%;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .action-bar::-webkit-scrollbar {
      display: none;
    }

    .action-tab {
      flex-shrink: 0;
    }
  }

  .view {
    display: block;
  }

  .view.d-none {
    display: none;
  }

  .d-none {
    display: none !important;
  }

  .form-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 0;
  }

  .form-side {
    border-right: 1px solid var(--line);
    padding: 20px;
    background: #fbfcfc;
    position: sticky;
    top: 20px;
    align-self: start;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
  }

  .form-side a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #2a3936;
    border-radius: 10px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 14px;
  }

  .form-side a.active {
    background: var(--primary-soft);
    color: var(--primary-2);
    font-weight: 700;
  }

  .form-side button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    color: #2a3936;
    background: transparent;
    border: 0;
    border-radius: 10px;
    margin-bottom: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
  }

  .form-side button.active {
    background: var(--primary-soft);
    color: var(--primary-2);
    font-weight: 700;
  }

  .form-side svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-width: 2;
    opacity: .75;
  }

  .form-side button.active svg,
  .form-side a.active svg {
    opacity: 1;
  }

  .settings-pane {
    display: none;
  }

  .settings-pane.active {
    display: block;
  }

  .check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }

  .check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
  }

  .check-row label {
    font-size: 14px;
    color: var(--text);
  }

  .form-main {
    padding: 20px;
  }

  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
  }

  .field>label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .field>label .req {
    color: var(--danger);
    font-weight: 700;
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
    outline: none;
    min-height: 42px;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  }

  .field input::placeholder,
  .field textarea::placeholder {
    color: #9aa5a8;
  }

  .field input:hover,
  .field select:hover,
  .field textarea:hover {
    border-color: #c3cdda;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
    background: #fff;
  }

  .field input:disabled,
  .field select:disabled,
  .field textarea:disabled {
    background: #fbfcfc;
    color: var(--muted);
    cursor: not-allowed;
  }

  .field input[type="number"] {
    -moz-appearance: textfield;
  }

  /* month/date inputs have a wide native min-width — let them shrink to their container
   so they never force horizontal scroll inside a flex/grid layout. */
  .field input[type="month"],
  .field input[type="date"],
  .field input[type="time"] {
    min-width: 0;
    max-width: 100%;
  }

  .field input[type="number"]::-webkit-outer-spin-button,
  .field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .field .hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }

  .field .err {
    font-size: 12px;
    color: var(--danger);
    margin-top: 2px;
    display: none;
  }

  /* Grouped optional fields (e.g. planned-maintenance recurrence) — visually set apart
   from the main form so managers don't fill them in by mistake. Spans the full grid. */
  .field-group {
    grid-column: 1 / -1;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    background: #fbfcfc;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .field-group .fg-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .field-group .fg-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
  }

  .field-group .fg-title svg {
    width: 15px;
    height: 15px;
    color: var(--primary);
  }

  .field-group .fg-optional {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    background: var(--line);
    padding: 1px 8px;
    border-radius: 20px;
    text-transform: none;
  }

  .field-group .fg-hint {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
  }

  .field-group .fg-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
  }

  @media (max-width: 640px) {
    .field-group .fg-fields {
      grid-template-columns: 1fr;
    }
  }

  .field.invalid input,
  .field.invalid select,
  .field.invalid textarea {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, .14);
  }

  .field.invalid .err {
    display: block;
  }

  .field.invalid>label {
    color: var(--danger);
  }

  .field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }

  .field select::-ms-expand {
    display: none;
  }

  .field input[type="date"],
  .field input[type="datetime-local"],
  .field input[type="time"] {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    color-scheme: light;
  }

  .field input[type="date"]::-webkit-calendar-picker-indicator,
  .field input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  .field input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    width: 36px;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    background: transparent;
  }

  .field input[type="date"]::-webkit-datetime-edit,
  .field input[type="datetime-local"]::-webkit-datetime-edit {
    color: var(--text);
    padding: 0;
  }

  .field input[type="date"]::-webkit-datetime-edit-text,
  .field input[type="datetime-local"]::-webkit-datetime-edit-text {
    color: var(--muted);
    padding: 0 2px;
  }

  .field input[type="date"]:focus,
  .field input[type="datetime-local"]:focus,
  .field input[type="time"]:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/></svg>");
  }

  .custom-select {
    position: relative;
    width: 100%;
  }

  .custom-select .native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    clip: rect(0 0 0 0);
  }

  .custom-select-trigger {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
    outline: none;
    min-height: 38px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: border-color .15s ease, box-shadow .15s ease;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }

  .custom-select-trigger:hover {
    border-color: #c3cdda;
  }

  .custom-select.open .custom-select-trigger {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
  }

  .custom-select-trigger .placeholder {
    color: #9aa5a8;
  }

  /* claude: position:fixed so an ancestor's overflow (modal card, table wrap, etc.) can't clip the dropdown; top/left/width are set from the trigger's rect in reusables/select.ts. z-index sits above the modal backdrop (1000). */
  .custom-select-pop {
    position: fixed;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(3, 12, 26, .1);
    max-height: 260px;
    overflow: auto;
    z-index: 1200;
    padding: 4px;
  }

  .custom-select-pop[hidden] {
    display: none;
  }

  .custom-select-item {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .custom-select-item:hover,
  .custom-select-item.hover {
    background: var(--primary-soft);
    color: var(--primary-2);
  }

  .custom-select-item.selected {
    background: var(--primary-soft);
    color: var(--primary-2);
    font-weight: 600;
  }

  .custom-select-item.selected::after {
    content: "";
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23065f46' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
  }

  .custom-select-item.disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: .6;
  }

  .custom-select-item.disabled:hover {
    background: transparent;
    color: var(--muted);
  }

  .field textarea {
    min-height: 80px;
    resize: vertical;
    padding: 10px 12px;
  }

  .pw-wrap {
    position: relative;
  }

  .pw-wrap>input {
    padding-right: 42px;
  }

  .pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
  }

  .pw-toggle:hover {
    color: var(--text);
    background: rgba(3, 12, 26, .05);
  }

  .pw-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .pw-toggle svg {
    width: 18px;
    height: 18px;
  }

  .pw-toggle .lucide-eye-off {
    display: none;
  }

  .pw-toggle.on .lucide-eye {
    display: none;
  }

  .pw-toggle.on .lucide-eye-off {
    display: inline-block;
  }

  .forgot-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-2);
    font-size: 13px;
    font-weight: 500;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 6px;
    text-decoration: none;
  }

  .forgot-link:hover {
    text-decoration: underline;
  }

  .forgot-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }

  .primary-btn[disabled],
  .outline-btn[disabled],
  .danger-btn[disabled],
  .warning-btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
  }

  .auth-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary-2);
    margin: 4px auto 16px;
    flex-shrink: 0;
  }

  .auth-success-icon svg {
    width: 28px;
    height: 28px;
  }

  .auth-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(239, 68, 68, .12);
    color: var(--danger);
    margin: 4px auto 16px;
    flex-shrink: 0;
  }

  .auth-error-icon svg {
    width: 28px;
    height: 28px;
  }

  .auth-center {
    text-align: center;
  }

  .onboard-card {
    margin-top: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
  }

  .onboard-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
  }

  .onboard-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary-2);
  }

  .onboard-icon svg {
    width: 24px;
    height: 24px;
  }

  .onboard-head h2 {
    margin: 0 0 4px;
    font-size: 20px;
    letter-spacing: -.01em;
  }

  .onboard-head p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
  }

  .onboard-steps {
    display: grid;
    gap: 12px;
  }

  .onboard-step {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
  }

  .onboard-step:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(29, 161, 242, .12);
    transform: translateY(-1px);
  }

  .onboard-step .step-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary-2);
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .onboard-step .step-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f3f5f4;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .onboard-step .step-num {
    flex-shrink: 0;
  }

  .onboard-step .step-icon svg {
    width: 20px;
    height: 20px;
  }

  .onboard-step .step-body h3 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
  }

  .onboard-step .step-body p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
  }

  .onboard-step .step-arrow {
    color: var(--muted);
  }

  .onboard-step:hover .step-arrow {
    color: var(--primary-2);
  }

  .onboard-about {
    margin-bottom: 24px;
    padding: 16px 18px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #fbfcfc;
  }

  .onboard-about h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -.01em;
    text-transform: uppercase;
  }

  .onboard-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
  }

  .onboard-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
  }

  .onboard-features li svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--primary-2);
    margin-top: 2px;
  }

  .onboard-features li strong {
    color: var(--text);
    font-weight: 600;
  }

  /* Landlord dashboard — executive layout
   Hero NOI + Cash Position (with wallet breakdown bar) + ratio strip, then chart cards.
   All other portal pages keep using the existing .grid-4 / .stat / .section-title primitives. */
  .hero-card {
    padding: 20px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: center;
    margin-bottom: 14px;
  }

  .hero-card>* {
    min-width: 0;
  }

  .hero-card>*+* {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }

  .hero-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .hero-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.01em;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .hero-value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--text);
    line-height: 1.1;
  }

  .hero-delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
  }

  .hero-delta.up {
    color: var(--primary);
  }

  .hero-delta.down {
    color: var(--danger);
  }

  .hero-delta.flat {
    color: var(--muted);
  }

  .hero-delta svg {
    width: 14px;
    height: 14px;
  }

  .wallet-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .wallet-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }

  .wallet-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .wallet-total {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
  }

  .wallet-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
  }

  .wallet-seg {
    transition: flex-basis .25s ease;
    min-width: 0;
  }

  .wallet-seg.seg-rent {
    background: var(--primary);
  }

  .wallet-seg.seg-maint {
    background: var(--success);
  }

  .wallet-seg.seg-legal {
    background: var(--warning);
  }

  .wallet-seg[data-empty="true"] {
    flex-basis: 0 !important;
  }

  .wallet-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--muted);
  }

  .wallet-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .wallet-legend .legend-item strong {
    color: var(--text);
    font-weight: 700;
    margin-left: 2px;
  }

  .wallet-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .wallet-legend .legend-dot.dot-rent {
    background: var(--primary);
  }

  .wallet-legend .legend-dot.dot-maint {
    background: var(--success);
  }

  .wallet-legend .legend-dot.dot-legal {
    background: var(--warning);
  }

  .ratio-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .ratio-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }

  .ratio-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    min-width: 78px;
  }

  .ratio-value {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
  }

  .ratio-meta {
    color: var(--muted);
    font-size: 12px;
  }

  .ratio-warn {
    background: #fff4da;
    border: 1px solid #fde3a7;
    color: #9a5b00;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-width: 0;
    flex-wrap: nowrap;
  }

  .ratio-warn svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .ratio-warn strong {
    color: #9a5b00;
    font-weight: 700;
  }

  .chart-row {
    margin-bottom: 14px;
  }

  .chart-card {
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
  }

  .chart-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--text);
  }

  .chart-head .chart-sub {
    color: var(--muted);
    font-size: 11px;
  }

  .chart-body {
    position: relative;
    height: 200px;
  }

  .chart-body canvas {
    max-width: 100%;
  }

  .chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 13px;
  }

  .glance-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 12.5px;
  }

  .glance-strip .glance-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
  }

  .glance-strip .glance-num {
    color: var(--text);
    font-weight: 700;
  }

  .glance-strip .glance-sep {
    color: var(--line);
  }

  .shortlet-block {
    margin-top: 4px;
  }

  .shortlet-block .section-title {
    margin-bottom: 10px;
  }

  /* Tablet / narrow desktop: stack the hero columns vertically with horizontal
   separators in place of the vertical dividers. */
  @media (max-width: 1024px) {
    .hero-card {
      grid-template-columns: 1fr;
      gap: 18px;
      padding: 18px 20px;
    }

    .hero-card>*+* {
      padding-left: 0;
      border-left: none;
      padding-top: 18px;
      border-top: 1px solid var(--line);
    }

    .ratio-block {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 14px 24px;
    }

    .ratio-item {
      flex-direction: row;
    }

    .ratio-label {
      min-width: 0;
    }
  }

  @media (max-width: 900px) {
    .chart-body {
      height: 220px;
    }
  }

  @media (max-width: 600px) {
    .hero-card {
      padding: 16px;
      gap: 14px;
    }

    .hero-card>*+* {
      padding-top: 14px;
    }

    .hero-value {
      font-size: 26px;
    }

    .wallet-total {
      font-size: 18px;
    }

    .wallet-legend {
      gap: 4px 12px;
      font-size: 11.5px;
    }

    .ratio-block {
      gap: 10px 16px;
    }

    .ratio-value {
      font-size: 16px;
    }

    .chart-body {
      height: 200px;
    }

    .chart-card {
      padding: 14px 14px 12px;
      gap: 8px;
    }

    .glance-strip {
      padding: 8px 12px;
      font-size: 12px;
      gap: 8px;
    }
  }

  .page-empty {
    text-align: center;
    padding: 56px 24px;
  }

  .page-empty .empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
  }

  .page-empty .empty-icon svg {
    width: 28px;
    height: 28px;
  }

  .page-empty h3 {
    margin: 0 0 8px;
    font-size: 18px;
    letter-spacing: -.01em;
  }

  .page-empty p {
    margin: 0 auto 20px;
    color: var(--muted);
    font-size: 14px;
    max-width: 460px;
    line-height: 1.5;
  }

  .page-empty .empty-cta {
    display: inline-flex;
  }

  .page-empty .empty-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Import CTA: tinted, accented so it reads as a real alternative to "Add". */
  .import-cta {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary-2);
    font-weight: 600;
  }

  .import-cta:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
  }

  .import-cta svg {
    color: inherit;
  }

  .attachments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }

  .attachments-empty {
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    background: #fbfcfc;
  }

  .attachment-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
  }

  .attachment-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(29, 161, 242, .10);
  }

  .attachment-thumb {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #f8faf9, #eef2f1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .attachment-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .attachment-thumb svg {
    width: 26px;
    height: 26px;
    color: var(--primary);
    opacity: .55;
    stroke-width: 1.5;
  }

  .attachment-meta {
    padding: 9px 11px;
    min-width: 0;
    border-top: 1px solid var(--line);
  }

  .attachment-name {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .attachment-size {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
  }

  /* Floating action buttons (download / delete) over the thumbnail. */
  .attachment-actions {
    position: absolute;
    top: 7px;
    right: 7px;
    display: flex;
    gap: 5px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .15s ease, transform .15s ease;
  }

  .attachment-card:hover .attachment-actions,
  .attachment-card:focus-within .attachment-actions {
    opacity: 1;
    transform: translateY(0);
  }

  /* In-flight upload placeholder cards (see AttachmentsList / beginUpload) */
  .attachment-card.uploading {
    pointer-events: none;
    border-style: dashed;
  }

  .attachment-card.uploading .attachment-thumb {
    opacity: .55;
  }

  .upload-progress {
    height: 5px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    margin-top: 6px;
  }

  .upload-progress-bar {
    height: 100%;
    width: 0;
    background: var(--primary);
    border-radius: 999px;
    transition: width .25s ease;
  }

  .attachment-card.uploading.failed {
    border-color: #ffcfd5;
    background: #fff0f1;
  }

  .attachment-card.uploading.failed .upload-status {
    color: var(--danger);
    font-weight: 600;
  }

  .attachment-card.uploading.failed .upload-progress-bar {
    background: var(--danger);
  }

  .attachment-actions button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text);
    transition: background .12s ease, color .12s ease;
  }

  .attachment-actions button:hover {
    background: #fff;
  }

  .attachment-actions .attachment-download:hover {
    color: var(--primary);
  }

  .attachment-actions .attachment-delete:hover {
    color: var(--danger);
  }

  .attachment-actions svg {
    width: 15px;
    height: 15px;
  }

  /* Touch devices have no hover — keep the actions visible. */
  @media (hover: none) {
    .attachment-actions {
      opacity: 1;
      transform: none;
    }
  }

  @media (max-width: 600px) {
    .attachments-grid {
      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 10px;
    }

    .attachment-meta {
      padding: 8px 10px;
    }
  }

  .field.readonly {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    gap: 4px;
  }

  .field.readonly>label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    margin: 0;
  }

  .field.readonly>*:not(label) {
    font-size: 14px;
    color: var(--text);
    min-height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .field div {
    min-height: 20px;
  }

  .field.readonly {
    background: #fbfcfc;
  }

  .row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    font-size: 0;
    color: transparent;
    text-decoration: none;
    margin-right: 4px;
    cursor: pointer;
    vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease;
  }

  .row-action:hover {
    background-color: var(--primary-soft);
    border-color: var(--primary-soft);
  }

  .row-action:last-child {
    margin-right: 0;
  }

  /* clean full-width data table (used where we don't want bootstrap's bordered look).
   The action column shrinks to its icon so the text columns fill the row. */
  .data-table {
    width: 100%;
    table-layout: auto;
  }

  .data-table td:has(.row-action),
  .data-table th:last-child {
    width: 1%;
    white-space: nowrap;
  }

  .delete-action {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>");
  }

  .delete-action:hover {
    background-color: #fff0f1;
    border-color: #ffcfd5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c92b39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><line x1='10' x2='10' y1='11' y2='17'/><line x1='14' x2='14' y1='11' y2='17'/></svg>");
  }

  .edit-action {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/><path d='m15 5 4 4'/></svg>");
  }

  .view-action {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>");
  }

  .view-action:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23065f46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>");
  }

  .edit-action:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23065f46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/><path d='m15 5 4 4'/></svg>");
  }

  .post-to-marketplace-action {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='16 6 12 2 8 6'/><line x1='12' x2='12' y1='2' y2='15'/><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/></svg>");
  }

  .buy-action {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='21' r='1'/><circle cx='19' cy='21' r='1'/><path d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/></svg>");
  }

  .checkout-action {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' x2='9' y1='12' y2='12'/></svg>");
  }

  .extend-action {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/><path d='M12 14v4'/><path d='M10 16h4'/></svg>");
  }

  /* claude: "Book" action is a filled icon+text button (overrides the muted
   icon-only .row-action) so it stands out on vacant shortlet units. */
  .book-action {
    width: auto;
    height: auto;
    padding: 6px 12px 6px 30px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
    background-position: 11px center;
    background-size: 14px 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M16 2v4'/><rect width='18' height='18' x='3' y='4' rx='2'/><path d='M3 10h18'/><path d='m9 16 2 2 4-4'/></svg>");
  }

  .book-action:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    filter: brightness(1.06);
  }

  .record-contact-action {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
  }

  .send-7-days-quit-notice-action {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366757a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m22 2-7 20-4-9-9-4Z'/><path d='M22 2 11 13'/></svg>");
  }

  td:has(.row-action) {
    text-align: right;
    white-space: nowrap;
  }

  .tenancy-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
  }

  .tenancy-tabs .tab {
    background: #fff;
    border: 1px solid var(--line);
  }

  .tenancy-card {
    padding: 0;
    overflow: hidden;
  }

  .tenancy-head {
    background: #f4f7f6;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }

  .tenancy-head .left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    font-size: 15px;
  }

  .accent-line {
    width: 4px;
    height: 24px;
    border-radius: 999px;
    background: var(--warning);
    flex-shrink: 0;
  }

  .accent-line.green {
    background: var(--success);
  }

  .accent-line.red {
    background: var(--danger);
  }

  /* Term (date range) block — a small uppercase label over the bold value, so
   it reads as a labelled fact instead of a lone bold string floating in
   empty space next to the property name. */
  .tenancy-term {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .tenancy-term .term-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .tenancy-term strong {
    font-size: 14px;
  }

  /* Lifecycle/history chips (renewed, terminated, ended, quit notice served) —
   compact pills instead of stacked full-width banners, since a tenancy can
   legitimately carry more than one of these facts at once (e.g. renewed, then
   later terminated) and stacking them as alert bars read as contradictory
   noise rather than a coherent history. Reuses the existing .badge palette. */
  .tenancy-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px;
  }

  .tenancy-chips:empty {
    display: none;
    padding: 0;
  }

  .dva-strip {
    background: #eff7f3;
    border-bottom: 1px solid var(--line);
    padding: 10px 18px;
    font-size: 13px;
    color: #2a3936;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
  }

  .dva-strip strong {
    color: #0f1c2e;
  }

  .actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px 18px;
    flex-wrap: wrap;
  }

  .footer-note {
    color: var(--muted);
    font-size: 12px;
    margin-top: 12px;
  }

  /* Universal icon safety: prevent icons from being squashed by flex parents
   that run out of space (e.g. avatar in a profile-hero row, action button
   icons next to long labels). flex-shrink only kicks in inside a flex
   container, so this is harmless on non-flex SVGs. */
  svg {
    flex-shrink: 0;
  }

  .nav a svg,
  .icon-btn svg,
  .primary-btn svg,
  .outline-btn svg,
  .warning-btn svg,
  .danger-btn svg,
  .ghost-btn svg,
  td svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
  }

  .nav a svg {
    width: 20px;
    height: 20px;
  }

  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 14, 28, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
  }

  .modal-backdrop.show {
    display: flex;
  }

  .modal-card {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(3, 12, 26, .25);
    width: min(560px, 100%);
    max-height: 92vh;
    overflow: auto;
  }

  .modal-card.wide {
    width: min(960px, 100%);
  }

  .modal-card.fullscreen {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
  }

  .modal-head h3 {
    margin: 0;
    font-size: 16px;
  }

  .modal-head button {
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--muted);
    padding: 4px;
    border-radius: 6px;
  }

  .modal-body {
    padding: 20px;
  }

  .modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  .toast-host {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .toast-host .toast {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: var(--shadow);
    font-size: 14px;
    min-width: 280px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .toast-host .toast.error {
    border-color: #b91c1c;
    background: var(--danger);
    color: #fff;
    font-weight: 600;
  }

  .toast-host .toast.success {
    border-color: #bfe4d4;
    background: #e9faef;
    color: #16803d;
  }

  .toast-host .toast.warning {
    border-color: #fde68a;
    background: #fff4da;
    color: #a16207;
  }

  .login-shell {
    display: grid;
    grid-template-columns: 480px 1fr;
    min-height: 100vh;
  }

  .login-panel {
    display: flex;
    flex-direction: column;
    padding: 28px 40px;
    background: var(--bg);
    min-height: 100vh;
  }

  .login-panel>.page {
    display: contents;
  }

  .login-art {
    background: linear-gradient(135deg, #061630 0%, #10294a 55%, #1da1f2 100%);
    position: relative;
    overflow: hidden;
  }

  .login-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .12), transparent 55%), radial-gradient(circle at 80% 70%, rgba(34, 197, 94, .22), transparent 60%);
  }

  .login-brand-top {
    display: flex;
    align-items: flex-end;
    gap: 10px;
  }

  .login-brand-top .wordmark-img {
    height: 70px;
    width: auto;
    display: block;
  }

  .login-brand-top .role {
    margin-bottom: 6px;
  }

  .login-brand-top .wordmark {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.03em;
  }

  .login-brand-top .wordmark .accent {
    color: var(--primary);
  }

  .login-brand-top .role {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-2);
    background: var(--primary-soft);
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .login-tagline {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
  }

  .login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .login-card {
    width: 100%;
    max-width: 400px;
  }

  .login-heading {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .login-sub {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 14px;
  }

  @media (max-width: 900px) {
    .login-shell {
      grid-template-columns: 1fr;
    }

    .login-art {
      display: none;
    }
  }

  @media (max-width: 1200px) {

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

    .stats-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 900px) {
    .layout {
      grid-template-columns: 1fr;
    }

    .sidebar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      top: auto;
      height: auto;
      overflow: visible;
      z-index: 100;
      padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
      flex-direction: row;
      gap: 0;
      box-shadow: 0 -8px 24px rgba(0, 0, 0, .2);
    }

    .sidebar .logo,
    .sidebar .context-header,
    .sidebar .user-chip {
      display: none;
    }

    /* flatten the user row so the icon-only logout drops into the bottom bar (the chip
     itself stays hidden above). */
    .sidebar .user-row {
      display: contents;
    }

    .sidebar .nav {
      flex-direction: row;
      gap: 2px;
      flex: 1;
      justify-content: space-around;
      align-items: center;
      margin-top: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .sidebar .nav::-webkit-scrollbar {
      display: none;
    }

    .sidebar .nav .spacer {
      display: none;
    }

    /* Flatten the bottom group into the horizontal bar. */
    .sidebar .nav-footer {
      display: contents;
      border: 0;
      margin: 0;
      padding: 0;
    }

    .sidebar .nav a {
      flex-direction: column;
      gap: 3px;
      padding: 6px 10px;
      border-radius: 10px;
      font-size: 10px;
      min-width: 56px;
      flex-shrink: 0;
      text-align: center;
      line-height: 1.1;
    }

    .sidebar .nav a svg {
      width: 18px;
      height: 18px;
    }

    .sidebar .nav #logout {
      border-top: 0;
      margin: 0;
      padding: 6px 10px;
      width: auto;
      height: auto;
    }

    .main {
      padding: 16px 16px calc(72px + env(safe-area-inset-bottom, 0px));
    }

    .grid-4,
    .grid-3,
    .grid-2,
    .form-grid,
    .stats-row {
      grid-template-columns: 1fr;
    }

    .topbar {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      margin-bottom: 16px;
    }

    .top-actions {
      flex-wrap: wrap;
    }

    .top-actions>* {
      flex: 1 1 auto;
      justify-content: center;
    }

    .search {
      min-width: auto;
      width: 100%;
    }

    .form-shell {
      grid-template-columns: 1fr;
    }

    /* The 14-item settings nav becomes a horizontal scrolling tab bar instead of a tall
     stacked column, so the content is reachable without scrolling past every tab. */
    .form-side {
      border-right: none;
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-direction: row;
      gap: 4px;
      padding: 10px 12px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .form-side::-webkit-scrollbar {
      display: none;
    }

    .form-side button,
    .form-side a {
      width: auto;
      flex: 0 0 auto;
      white-space: nowrap;
      margin-bottom: 0;
    }

    .card.pad {
      padding: 18px;
    }

    .page-card-header,
    .page-card-body {
      padding-left: 16px;
      padding-right: 16px;
    }

    .section-title {
      flex-wrap: wrap;
      gap: 8px;
    }

    .section-title h2 {
      font-size: 16px;
    }

    th,
    td {
      padding: 12px 14px;
      font-size: 13px;
    }

    td.no-data {
      padding: 32px 16px;
    }

    .modal-backdrop {
      padding: 12px;
    }

    .modal-card,
    .modal-card.wide {
      width: 100%;
      max-height: calc(100vh - 24px);
    }

    .modal-head {
      padding: 14px 16px;
    }

    .modal-body {
      padding: 16px;
    }

    .modal-footer {
      padding: 12px 16px;
      flex-wrap: wrap;
    }

    .modal-footer>* {
      flex: 1 1 auto;
      justify-content: center;
    }

    .public-form-page {
      padding: 16px 12px 36px;
    }

    .public-form-card {
      padding: 22px !important;
      border-radius: 14px;
    }

    .public-form-title {
      font-size: 20px;
    }

    .public-form-wide .form-grid {
      grid-template-columns: 1fr;
    }

    .public-form-brand {
      flex-wrap: wrap;
      gap: 12px;
    }

    .public-form-logo {
      margin-left: 0;
    }

    .public-form-wordmark {
      margin-left: 0;
    }

    .profile-hero {
      flex-direction: column;
      padding: 18px;
      border-radius: 18px;
      gap: 16px;
    }

    .profile-hero h1 {
      font-size: 20px;
    }

    .updated-pill {
      align-self: stretch;
    }

    .login-shell {
      min-height: 100vh;
    }

    .login-panel {
      padding: 24px 18px;
      min-height: 100vh;
      box-sizing: border-box;
    }

    .login-card {
      max-width: 100%;
    }

    .login-brand-top .wordmark-img {
      height: 52px;
    }

    .login-tagline {
      font-size: 13px;
    }

    .tenancy-head {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      padding: 14px 16px;
    }

    .actions-row {
      flex-wrap: wrap;
      gap: 8px;
      padding: 12px 14px;
    }

    .onboard-card {
      padding: 18px;
    }

    .onboard-head {
      gap: 12px;
      margin-bottom: 18px;
    }

    .onboard-icon {
      width: 40px;
      height: 40px;
    }

    .onboard-icon svg {
      width: 20px;
      height: 20px;
    }

    .onboard-head h2 {
      font-size: 17px;
    }

    .onboard-step {
      grid-template-columns: auto 1fr auto;
      gap: 12px;
      padding: 12px 14px;
    }

    .onboard-step .step-icon {
      display: none;
    }

    /* Prevent iOS Safari from auto-zooming on input focus (triggered when font-size < 16px). */
    .field input,
    .field select,
    .field textarea,
    .wa-input {
      font-size: 16px;
    }
  }

  @media (max-width: 600px) {
    .stats-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-4 .card.stat .value,
    .stat .value {
      font-size: 22px;
    }

    th,
    td {
      padding: 10px 12px;
      font-size: 12.5px;
    }

    .badge {
      padding: 4px 8px;
      font-size: 11px;
    }

    .row-action {
      width: 28px;
      height: 28px;
      background-size: 14px 14px;
    }

    .tabs {
      width: 100%;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar {
      display: none;
    }

    .tab {
      white-space: nowrap;
      flex-shrink: 0;
    }

    .public-form-card {
      padding: 18px !important;
    }

    .public-form-title {
      font-size: 18px;
    }

    .login-heading {
      font-size: 19px;
    }
  }

  /* Two-line table cell: a title with a muted subtitle beneath. */
  .cell-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }

  .cell-stack .cell-title {
    font-weight: 600;
  }

  .cell-stack .cell-sub {
    font-size: 12px;
    color: var(--muted);
  }

  /* Single-column property row: stacked title/subtitle left, badge pushed right. */
  .prop-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* Detail page with a pinned Notes right-rail (maintenance detail; mirrors booking). */
  .notes-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
  }

  .notes-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }

  .notes-rail {
    display: flex;
    flex-direction: column;
  }

  .notes-rail #notes-list {
    flex: 1 1 auto;
    overflow-y: auto;
  }

  @media (max-width: 900px) {
    .notes-layout {
      grid-template-columns: 1fr;
    }
  }

  .note-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fbfcfc;
  }

  .note-item .note-meta {
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 4px;
  }

  .note-item .note-body {
    font-size: 13px;
    white-space: pre-wrap;
  }

  .note-empty {
    color: var(--muted);
    font-size: 13px;
  }

  /* ============================================================================
   Home page — minified stat chips, to-do master-detail, sidebar storage meter
   ============================================================================ */

  /* Minified stat chips (replaced the big grid-4 stat cards) */
  .stat-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  .stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
  }

  .stat-chip svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
  }

  .stat-chip .sc-val {
    font-weight: 700;
    font-size: 15px;
  }

  .stat-chip .sc-label {
    font-size: 13px;
    color: var(--muted);
  }

  a.stat-chip:hover {
    border-color: var(--primary);
  }

  /* Quick-action bar across the top (always visible) */
  .quick-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  /* Quick actions: desktop shows the list as an inline row and hides the dropdown
   toggle; mobile shows the toggle and floats the list as a dropdown. Toggled by
   the .open class (added in manager/index.ts). */
  .quick-menu {
    margin-bottom: 16px;
  }

  .quick-menu .qa-summary {
    display: none;
  }

  .quick-menu .quick-menu-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  @media (max-width: 820px) {
    .quick-menu {
      position: relative;
    }

    .quick-menu .qa-summary {
      display: inline-flex;
      width: 100%;
      justify-content: center;
      cursor: pointer;
    }

    .quick-menu .qa-summary .qa-caret {
      margin-left: auto;
      width: 16px;
      height: 16px;
      transition: transform .15s ease;
    }

    .quick-menu.open .qa-summary .qa-caret {
      transform: rotate(180deg);
    }

    .quick-menu:not(.open) .quick-menu-list {
      display: none;
    }

    .quick-menu.open .quick-menu-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 50;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 6px;
      box-shadow: 0 12px 30px rgba(3, 12, 26, .16);
    }

    .quick-menu.open .quick-menu-list .qa-btn {
      border: 0;
      width: 100%;
    }

    .quick-menu.open .quick-menu-list .qa-btn:hover {
      background: var(--primary-soft);
    }
  }

  /* Master-detail joined into one card, like a classic vertical-tab panel:
   list (tabs) on the left, content on the right, sharing a divider — no gap. */
  .home-split {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
  }

  .todo-pane {
    border-right: 1px solid var(--line);
    padding: 14px 12px 6px;
    min-height: 340px;
  }

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

  .todo-head h2 {
    margin: 0;
    font-size: 15px;
  }

  .todo-head .list-filter {
    flex: 1;
    max-width: 190px;
  }

  .todo-list {
    display: flex;
    flex-direction: column;
  }

  .todo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .12s ease, border-color .12s ease;
  }

  .todo-item:hover {
    background: #f6faf8;
  }

  .todo-item.active {
    background: var(--primary-soft);
    box-shadow: inset 3px 0 0 var(--primary);
  }

  .todo-marker {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef4f2;
    color: var(--muted);
  }

  .todo-marker svg {
    width: 17px;
    height: 17px;
  }

  .todo-marker.warning {
    background: #fff5db;
    color: #9a5b00;
  }

  .todo-marker.danger {
    background: #fff0f1;
    color: #c92b39;
  }

  .todo-marker.soft {
    background: var(--primary-soft);
    color: var(--primary-2);
  }

  .todo-body {
    flex: 1;
    min-width: 0;
  }

  .todo-title {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .todo-sub {
    font-size: 12.5px;
    color: var(--text);
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .todo-meta {
    font-size: 11.5px;
    color: var(--muted);
  }

  .todo-caption {
    font-size: 12.5px;
    color: var(--muted);
    padding: 4px 8px 10px;
    margin: 0;
  }

  /* mini tenant list inside the Home property mini-profile */
  .mini-tenant-list {
    display: flex;
    flex-direction: column;
  }

  .mini-tenant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
  }

  .mini-tenant:last-child {
    border-bottom: 0;
  }

  .mini-tenant .mt-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .mini-tenant .mt-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mini-tenant .mt-unit {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    flex-shrink: 0;
  }

  .mini-tenant:hover .mt-name {
    color: var(--primary-2);
  }

  .todo-badge {
    flex-shrink: 0;
    font-size: 11px;
  }

  .todo-chev {
    width: 16px;
    height: 16px;
    color: var(--muted);
    flex-shrink: 0;
  }

  /* To-do empty state + quick actions */
  .todo-empty {
    text-align: center;
    padding: 28px 12px 32px;
  }

  .todo-empty .te-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-2);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .todo-empty h3 {
    margin: 0 0 4px;
    font-size: 15px;
  }

  .todo-empty p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 13px;
  }

  .quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 260px;
    margin: 0 auto;
  }

  .qa-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
  }

  .qa-btn svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
  }

  .qa-btn:hover {
    border-color: var(--primary);
    background: #f6faf8;
  }

  /* Detail pane (right side of the joined panel — no own border/bg) */
  .detail-pane {
    min-height: 340px;
  }

  .detail-placeholder {
    height: 100%;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--muted);
  }

  /* our display:flex on these overrides the [hidden] attribute's UA display:none, so
   restore it explicitly — otherwise the placeholder/list stays visible when hidden. */
  .detail-placeholder[hidden],
  .todo-list[hidden] {
    display: none;
  }

  .detail-placeholder svg {
    width: 26px;
    height: 26px;
    opacity: .6;
  }

  .detail-body {
    padding: 18px 20px 22px;
  }

  .detail-back {
    display: none;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    color: var(--primary-2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    margin-bottom: 8px;
  }

  .detail-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }

  .detail-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
  }

  .detail-avatar svg {
    width: 20px;
    height: 20px;
  }

  .detail-avatar.warning {
    background: #fff5db;
    color: #9a5b00;
  }

  .detail-avatar.danger {
    background: #fff0f1;
    color: #c92b39;
  }

  .detail-head h2 {
    margin: 0;
    font-size: 17px;
  }

  .detail-head p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 13px;
  }

  .detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
  }

  .detail-section {
    margin-bottom: 16px;
  }

  .detail-section h3 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .detail-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
  }

  .kv {
    width: 100%;
    font-size: 13.5px;
    border-collapse: collapse;
  }

  .kv td {
    padding: 5px 0;
    vertical-align: top;
  }

  .kv td:first-child {
    color: var(--muted);
    width: 110px;
  }

  .balance-figure {
    font-size: 22px;
    font-weight: 700;
  }

  .balance-figure.owe {
    color: var(--danger);
  }

  .balance-figure.clear {
    color: var(--primary-2);
  }

  .balance-figure.clear,
  .balance-figure.owe {
    font-size: 20px;
  }

  .notice-log {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .notice-log li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }

  .notice-log li:last-child {
    border-bottom: 0;
  }

  .notice-log svg {
    width: 15px;
    height: 15px;
    color: var(--muted);
    flex-shrink: 0;
  }

  .notice-log time {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
  }

  .planned-counts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
  }

  .pc {
    background: var(--bg);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
  }

  .pc-num {
    display: block;
    font-size: 22px;
    font-weight: 700;
  }

  .pc-label {
    font-size: 12px;
    color: var(--muted);
  }

  .pc.warn .pc-num {
    color: var(--warning);
  }

  .detail-note {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--primary-soft);
    color: var(--primary-2);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 14px;
  }

  .detail-note svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
  }

  .mock-tag {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    background: var(--line);
    padding: 1px 6px;
    border-radius: 20px;
  }

  /* Sidebar storage meter (dark sidebar → light text) */
  .storage-meter {
    padding: 10px 14px 4px;
  }

  .storage-meter .sm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: rgba(238, 246, 253, .72);
    margin-bottom: 6px;
  }

  .storage-meter .sm-head span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .storage-meter .sm-head svg {
    width: 14px;
    height: 14px;
  }

  .storage-meter .sm-label {
    color: #eaf6fe;
  }

  .storage-meter .sm-bar {
    height: 6px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .15);
    overflow: hidden;
  }

  .storage-meter .sm-fill {
    height: 100%;
    border-radius: 6px;
    background: #6cc3f8;
    transition: width .4s ease;
  }

  .storage-meter .sm-fill.sm-warn {
    background: #fbbf24;
  }

  /* Home responsive: on phone the detail replaces the list (master-detail) */
  @media (max-width: 820px) {
    .storage-meter {
      display: none;
    }

    .home-split {
      grid-template-columns: 1fr;
    }

    .home-split .todo-pane {
      border-right: 0;
    }

    .home-split .detail-pane {
      display: none;
    }

    .home-split.show-detail .todo-pane {
      display: none;
    }

    .home-split.show-detail .detail-pane {
      display: block;
    }

    .home-split.show-detail .detail-back {
      display: inline-flex;
    }

    /* To-do list fills the full width and each row becomes a pronounced, tappable
     card (the joined-panel chrome is dropped on mobile since only one pane shows). */
    .home-split {
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }

    .todo-pane {
      padding: 0;
      min-height: 0;
    }

    .detail-pane {
      min-height: 0;
    }

    .todo-head {
      padding: 2px 2px 12px;
    }

    .todo-list {
      gap: 0;
    }

    .todo-item {
      padding: 14px 6px;
      gap: 14px;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
    }

    .todo-item:last-child {
      border-bottom: 0;
    }

    .todo-item:active {
      background: #f6faf8;
    }

    .todo-item.active {
      background: var(--primary-soft);
      box-shadow: inset 3px 0 0 var(--primary);
    }

    .todo-marker {
      width: 40px;
      height: 40px;
    }

    .todo-marker svg {
      width: 19px;
      height: 19px;
    }

    .todo-title {
      font-size: 15px;
    }

    .todo-sub {
      font-size: 13px;
    }

    /* --- mobile overflow fixes (manager tenant/property portals) --- */
    /* Tables sit in a .table-wrap (overflow-x:auto), so wide ones scroll within
     their card while narrow ones (e.g. the properties list) still fill 100%
     width. No display:block here — that shrinks narrow tables below full width. */
    /* Profile hero stacks vertically so the name + stats never overflow. */
    .profile-hero {
      flex-direction: column;
      padding: 18px;
      border-radius: 18px;
    }

    .profile-hero>div:first-child {
      width: 100%;
      min-width: 0;
    }

    .profile-hero .updated-pill {
      align-self: flex-start;
    }

    .profile-hero h1 {
      font-size: 20px;
      word-break: break-word;
    }

    /* Belt-and-suspenders: never let a stray child force page-level h-scroll. */
    .main {
      overflow-x: hidden;
    }
  }

  /* Forms: on mobile the grid is a single column, so full-width fields (inline
   grid-column: span 2) must not force a ragged implicit second column — stack
   everything. !important is needed to beat the inline style. Applies to every form. */
  @media (max-width: 900px) {
    .form-grid>* {
      grid-column: auto !important;
    }
  }

  /* Tenancy-card footer actions go icon-only on phones so 3–4 buttons fit a narrow
   row. Labels stay in the DOM (title + aria-label) for screen readers + tooltips;
   status pills (.badge) keep their text since they're informational, not actions. */
  @media (max-width: 640px) {
    .tenancy-card .actions-row button span {
      display: none;
    }

    .tenancy-card .actions-row button {
      padding: 8px;
      gap: 0;
      min-width: 40px;
      justify-content: center;
    }

    .tenancy-card .actions-row button svg {
      width: 17px;
      height: 17px;
    }
  }

  /* ==========================================================================
   SUPPORT WIDGET & FLOATING HELP CENTER
   ========================================================================== */
  .support-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: inherit;
  }

  .support-fab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    background: linear-gradient(135deg, #3fabf4 0%, #1da1f2 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(63, 171, 244, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }

  .support-fab:hover {
    transform: translateY(-1.5px);
    box-shadow: 0 14px 28px rgba(63, 171, 244, 0.4), 0 3px 8px rgba(0, 0, 0, 0.14);
  }

  .support-fab:active {
    transform: translateY(0);
  }

  .support-fab svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
    flex-shrink: 0;
  }

  .support-fab-label {
    white-space: nowrap;
  }

  .support-widget.open .support-fab-label {
    display: none;
  }

  .support-widget.open .support-fab {
    padding: 12px;
  }

  .support-panel {
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 500px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    animation: support-pop 0.18s ease-out;
    transform-origin: bottom right;
    border: 1px solid var(--line, #e2e8f0);
  }

  .support-panel[hidden] {
    display: none;
  }

  .support-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .support-head-text {
    flex: 1;
    min-width: 0;
  }

  .support-title {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
  }

  .support-subtitle {
    font-size: 11px;
    opacity: 0.75;
    margin-top: 2px;
  }

  .support-close {
    background: transparent;
    border: 0;
    color: #fff;
    opacity: 0.75;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
  }

  .support-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.12);
  }

  .support-close svg {
    width: 18px;
    height: 18px;
  }

  .support-search-container {
    position: relative;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--line, #e2e8f0);
    display: flex;
    align-items: center;
  }

  .support-search-input {
    width: 100%;
    border: 1px solid var(--line, #cbd5e1);
    background: #fff;
    padding: 8px 12px 8px 36px;
    border-radius: 8px;
    font-size: 13.5px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .support-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
  }

  .support-search-icon {
    position: absolute;
    left: 28px;
    width: 16px;
    height: 16px;
    color: #64748b;
    pointer-events: none;
  }

  .support-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #f8fafc;
  }

  .support-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .support-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .support-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .support-item {
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .support-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .support-item-header {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
  }

  .support-item-title {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
  }

  .support-item-chevron {
    width: 15px;
    height: 15px;
    color: #64748b;
    transition: transform 0.18s ease;
  }

  .support-item-content {
    padding: 0 14px 12px 14px;
    font-size: 12px;
    color: #475569;
    border-top: 1px dashed var(--line, #f1f5f9);
    padding-top: 10px;
  }

  .support-item-content p {
    margin: 0 0 8px 0;
    line-height: 1.5;
  }

  .support-read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--primary-2, #1da1f2);
    font-weight: 600;
    text-decoration: none;
    font-size: 11.5px;
  }

  .support-read-more-link:hover {
    text-decoration: underline;
  }

  .support-read-more-link svg {
    width: 12px;
    height: 12px;
  }

  .support-empty-state {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    padding: 12px 0;
  }

  .support-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line, #e2e8f0);
  }

  .support-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    text-align: center;
  }

  .support-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
  }

  .support-action-btn.primary-action {
    background: var(--primary-2, #1da1f2);
    color: #fff;
    border: 1px solid var(--primary-2, #1da1f2);
  }

  .support-action-btn.primary-action:hover {
    background: #0c7abf;
    border-color: #0c7abf;
  }

  .support-action-btn.whatsapp-action {
    background: #e8fbf0;
    color: #0f763c;
    border: 1px solid #c6f6d5;
  }

  .support-action-btn.whatsapp-action:hover {
    background: #d4f7e2;
  }

  @keyframes support-pop {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (max-width: 860px) {
    .support-widget {
      bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      right: 16px;
    }

    .support-fab {
      padding: 12px;
    }

    .support-fab .support-fab-label {
      display: none;
    }

    .support-panel {
      width: calc(100vw - 32px);
      height: calc(100vh - 120px);
    }
  }

  /* ==========================================================================
   SUPPORT CHATBOT LAYOUT (PREMIUM EXPERIENCE)
   ========================================================================== */
  .support-panel {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-radius: 20px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .support-header {
    background: linear-gradient(135deg, #064e3b 0%, #1a8cd8 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 18px 20px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .support-title {
    font-weight: 700 !important;
    font-size: 15.5px !important;
    letter-spacing: -0.25px;
    color: #fff !important;
    margin: 0;
  }

  .status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 4px;
    font-weight: 500;
  }

  .status-dot {
    width: 7px;
    height: 7px;
    background-color: #3fabf4;
    border-radius: 50%;
    position: relative;
    display: inline-block;
  }

  .status-dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #3fabf4;
    animation: pulse-dot 1.8s infinite ease-in-out;
  }

  @keyframes pulse-dot {
    0% {
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(2.6);
      opacity: 0;
    }
  }

  .support-close {
    color: rgba(255, 255, 255, 0.8) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: none !important;
  }

  .support-close:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    transform: rotate(90deg);
  }

  .support-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f8fafc;
  }

  .chat-bubble {
    max-width: 82%;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.5;
    position: relative;
    word-break: break-word;
    transition: all 0.25s ease;
  }

  .chat-bubble.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #3fabf4 0%, #1a8cd8 100%);
    color: #fff;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 4px 12px rgba(63, 171, 244, 0.15);
  }

  .chat-bubble.bot {
    align-self: flex-start;
    background: #ffffff;
    color: #334155;
    border-radius: 18px 18px 18px 4px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .chat-bubble.bot p {
    margin: 0 0 8px 0;
  }

  .chat-bubble.bot p:last-child {
    margin-bottom: 0;
  }

  .chat-chips-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #94a3b8;
    margin: 12px 0 2px;
    padding-left: 2px;
  }

  .chat-human-row {
    margin-top: 12px;
    padding-left: 2px;
  }

  .chat-human-row .support-action-btn.whatsapp-action {
    display: inline-flex;
    width: auto;
  }

  .chat-suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-left: 2px;
  }

  .chat-chip {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
  }

  .chat-chip:hover {
    background-color: #dcfce7;
    border-color: #86efac;
    transform: translateY(-1.5px);
    box-shadow: 0 4px 8px rgba(22, 101, 52, 0.08);
  }

  .chat-bubble-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 10px;
  }

  .chat-bubble-actions .support-read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #1a8cd8;
    font-weight: 700;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.15s ease;
  }

  .chat-bubble-actions .support-read-more-link:hover {
    color: #1da1f2;
    text-decoration: underline;
  }

  .chat-bubble-actions .support-read-more-link svg {
    width: 13px;
    height: 13px;
  }

  /* WhatsApp action inside chat */
  .chat-bubble-actions .support-action-btn.whatsapp-action {
    background: #25d366;
    color: #ffffff;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.15);
    transition: all 0.2s ease;
    width: fit-content;
    border: none;
  }

  .chat-bubble-actions .support-action-btn.whatsapp-action:hover {
    background: #1ebd56;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.25);
    transform: translateY(-1px);
  }

  /* Autocomplete Dropdown */
  .support-autocomplete {
    position: absolute;
    bottom: 68px;
    left: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
    padding: 6px 0;
  }

  .support-autocomplete-item {
    padding: 10px 16px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease;
  }

  .support-autocomplete-item:last-child {
    border-bottom: none;
  }

  .support-autocomplete-item:hover {
    background-color: #f8fafc;
    color: #1a8cd8;
    padding-left: 20px;
  }

  .support-autocomplete-item svg {
    width: 14px;
    height: 14px;
    color: #64748b;
    flex-shrink: 0;
    transition: color 0.15s ease;
  }

  .support-autocomplete-item:hover svg {
    color: #1a8cd8;
  }

  /* Input Container */
  .support-chat-input-container {
    display: flex;
    padding: 14px 16px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    gap: 10px;
    align-items: center;
  }

  .support-chat-input {
    flex: 1;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 13.5px;
    font-family: inherit;
    color: #1e293b;
    outline: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.01);
  }

  .support-chat-input:focus {
    border-color: #3fabf4;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(63, 171, 244, 0.1);
  }

  .support-chat-send-btn {
    background: linear-gradient(135deg, #3fabf4 0%, #1a8cd8 100%);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(63, 171, 244, 0.2);
  }

  .support-chat-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(63, 171, 244, 0.35);
  }

  .support-chat-send-btn:active {
    transform: scale(0.95);
  }

  .support-chat-send-btn svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
    stroke-width: 2.5;
  }

  /* Typing Indicator Animation */
  .typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
    align-self: flex-start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .typing-dot {
    width: 6px;
    height: 6px;
    background: #94a3b8;
    border-radius: 50%;
    animation: typing-bounce 1.4s infinite ease-in-out both;
  }

  .typing-dot:nth-child(1) {
    animation-delay: -0.32s;
  }

  .typing-dot:nth-child(2) {
    animation-delay: -0.16s;
  }

  @keyframes typing-bounce {

    0%,
    80%,
    100% {
      transform: scale(0);
    }

    40% {
      transform: scale(1);
    }
  }

  /* Dynamic Panel Positioning */
  .support-widget.panel-left .support-panel {
    right: auto;
    left: 0;
  }

  .support-widget.panel-top .support-panel {
    bottom: auto;
    top: 80px;
  }

  /* Draggable Cursor */
  .support-fab {
    cursor: grab !important;
    background: linear-gradient(135deg, #3fabf4 0%, #1a8cd8 100%) !important;
    box-shadow: 0 10px 25px rgba(63, 171, 244, 0.3) !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  .support-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 14px 30px rgba(63, 171, 244, 0.4) !important;
  }

  .support-fab:active {
    cursor: grabbing !important;
    transform: scale(0.95);
  }

  /* ==========================================================================
   SIDEBAR SUBMENUS & PAGE HELP CARDS
   ========================================================================== */

  /* Submenu layout and navigation styling */
  .nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .nav-group-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    color: rgba(239, 246, 253, 0.92);
    font-size: 15px;
    cursor: pointer;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .nav-group-trigger:hover,
  .nav-group-trigger.active {
    background: rgba(63, 171, 244, 0.18);
    color: #fff;
  }

  .nav-group-trigger span {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav-group-trigger .chevron {
    width: 14px;
    height: 14px;
    margin-left: auto;
    transition: transform 0.2s ease;
    color: rgba(239, 246, 253, 0.6);
  }

  .nav-group.open .nav-group-trigger .chevron {
    transform: rotate(180deg);
  }

  .nav-sub {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding-left: 24px;
    margin-top: 2px;
    margin-bottom: 6px;
  }

  .nav-group.open .nav-sub {
    display: flex;
  }

  .nav-sub a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    color: rgba(239, 246, 253, 0.75);
    transition: background 0.15s ease, color 0.15s ease;
  }

  .nav-sub a svg {
    width: 15px;
    height: 15px;
    opacity: 0.7;
  }

  .nav-sub a.active,
  .nav-sub a:hover {
    background: rgba(63, 171, 244, 0.12);
    color: #fff;
  }

  .nav-sub a.active svg {
    opacity: 1;
  }

  /* Ensure submenus display nicely on mobile horizontal tabs */
  @media (max-width: 900px) {
    .nav-group {
      flex-direction: row;
      align-items: center;
    }

    .nav-sub {
      display: none !important;
      /* Hide submenu links inside horizontal layout */
    }
  }

  /* Premium CSS-only info tooltip popups */
  .info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    margin-left: 6px;
    color: var(--muted);
    vertical-align: middle;
    transition: color 0.15s ease;
  }

  .info-tooltip:hover {
    color: var(--primary);
  }

  .info-tooltip svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
  }

  .info-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: #0f172a;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    width: 220px;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2);
    z-index: 1000;
    text-align: center;
  }

  .info-tooltip::before {
    content: '';
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0f172a;
    opacity: 0;
    pointer-events: none;
    transition: all 0.18s ease;
    z-index: 1000;
  }

  .info-tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  .info-tooltip:hover::before {
    opacity: 1;
  }

  /* Tooltip placement helper overrides */
  .info-tooltip.tooltip-right::after {
    bottom: 50%;
    left: 140%;
    transform: translateY(50%) scale(0.9);
  }

  .info-tooltip.tooltip-right::before {
    bottom: 50%;
    left: 120%;
    transform: translateY(50%);
    border-top-color: transparent;
    border-right-color: #0f172a;
  }

  .info-tooltip.tooltip-right:hover::after {
    transform: translateY(50%) scale(1);
  }

  /* ==========================================================================
   CHATBOT PREMIUM UI — BOT AVATAR, ROW LAYOUT, ARTICLE LINKS, FOOTER
   ========================================================================== */

  /* Bot avatar icon in the panel header */
  .support-bot-avatar {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
  }

  .support-bot-avatar svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
  }

  /* Chat row — wraps avatar + bubble together */
  .chat-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
  }

  .chat-row.user {
    flex-direction: row-reverse;
  }

  .chat-row.bot .chat-bubble {
    max-width: calc(100% - 40px);
  }

  .chat-row.user .chat-bubble {
    max-width: 82%;
  }

  /* Per-message bot avatar dot */
  .chat-avatar {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #064e3b 0%, #1a8cd8 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
  }

  .chat-avatar svg {
    stroke: #fff;
  }

  /* Context note labels (e.g. "Suggested for this page:") */
  .chat-context-note {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 34px;
    margin-top: 4px;
  }

  .chat-context-note span {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Article quick-link pills inside bot answer */
  .chat-article-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
  }

  .chat-article-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    color: #166534;
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
  }

  .chat-article-link:hover {
    background: #dcfce7;
    border-color: #86efac;
    transform: translateY(-1px);
    color: #14532d;
  }

  .chat-article-link svg {
    flex-shrink: 0;
    stroke: currentColor;
  }

  /* Powered-by footer strip */
  .support-chat-footer {
    padding: 8px 18px;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    flex-shrink: 0;
  }

  .support-footer-link {
    color: #1a8cd8;
    font-weight: 600;
    text-decoration: none;
  }

  .support-footer-link:hover {
    text-decoration: underline;
  }

  /* Header action buttons (New Chat, Share, Close) */
  .support-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }

  .support-header-action {
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
  }

  .support-header-action:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  .support-header-action svg,
  .support-header-action i {
    width: 15px;
    height: 15px;
  }

  /* Autocomplete subtitle (page link hint) */
  .support-autocomplete-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .support-autocomplete-item>div {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .support-autocomplete-subtitle {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
  }

  /* ==========================================================================
   SUPPORT & GUIDES PAGE — content styling (support.index.html)
   ========================================================================== */

  /* Topbar: search + assistant button */
  .support-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .support-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 300px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 12px;
    box-shadow: var(--shadow);
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .support-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
  }

  .support-search svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
    flex-shrink: 0;
  }

  .support-search input {
    border: 0;
    outline: 0;
    background: transparent;
    padding: 11px 8px;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    width: 100%;
  }

  .support-ask-btn {
    white-space: nowrap;
  }

  /* Content typography */
  .support-content {
    font-size: 14.5px;
    line-height: 1.65;
    color: #2a3936;
  }

  .support-content>p {
    margin: 0 0 14px;
  }

  .support-content ul,
  .support-content ol {
    margin: 0 0 14px;
    padding-left: 20px;
  }

  .support-content li {
    margin-bottom: 7px;
  }

  .support-content li>ul,
  .support-content li>ol {
    margin: 8px 0 4px;
  }

  .support-content code {
    background: var(--primary-soft);
    color: var(--primary-2);
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 12.5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  .support-note {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
  }

  /* Inline links */
  .support-link {
    color: var(--primary-2);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid transparent;
    transition: border-color .15s ease, color .15s ease;
  }

  .support-link:hover {
    border-bottom-color: var(--primary-2);
  }

  .support-link svg {
    width: 15px;
    height: 15px;
  }

  .support-content a:not(.support-link):not(.outline-btn) {
    color: var(--primary-2);
    font-weight: 600;
    border-bottom: 1px solid rgba(12, 122, 191, .28);
  }

  .support-content a:not(.support-link):not(.outline-btn):hover {
    border-bottom-color: var(--primary-2);
  }

  /* Tables */
  .support-table {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface);
  }

  .support-table thead th {
    background: var(--surface-2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 700;
    padding: 12px 16px;
  }

  .support-table td {
    padding: 13px 16px;
    vertical-align: top;
  }

  .support-table tbody tr {
    transition: background-color .12s ease;
  }

  .support-table tbody tr:last-child td {
    border-bottom: 0;
  }

  .support-table tbody tr:hover {
    background: var(--surface-2);
  }

  .support-table td strong {
    color: var(--text);
  }

  /* Callout box (replaces old .alert usage + intro hints) */
  .support-callout {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--primary-soft);
    border: 1px solid #bfe8d9;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0 0 16px;
    color: #14433a;
    font-size: 14px;
    line-height: 1.55;
  }

  .support-callout svg {
    width: 20px;
    height: 20px;
    color: var(--primary-2);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .support-callout a {
    color: var(--primary-2);
    font-weight: 700;
  }

  /* Settings subsection cards grid */
  .support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 4px;
  }

  .subsection-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    display: flex;
    flex-direction: column;
  }

  .support-grid .subsection-card:hover {
    border-color: #cfe3db;
    box-shadow: 0 8px 24px rgba(3, 12, 26, .07);
    transform: translateY(-2px);
  }

  /* Section 4 stacks full-width cards */
  .support-pane[data-support-pane="section-4"] .subsection-card {
    margin-bottom: 14px;
  }

  .support-pane[data-support-pane="section-4"] .subsection-card:last-child {
    margin-bottom: 0;
  }

  .subsection-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
  }

  .subsection-head svg {
    width: 18px;
    height: 18px;
    color: var(--primary-2);
    background: var(--primary-soft);
    padding: 6px;
    box-sizing: content-box;
    border-radius: 9px;
    flex-shrink: 0;
  }

  .subsection-card h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
  }

  .subsection-card p {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: #48575a;
  }

  .subsection-card ul {
    margin: 0 0 12px;
    padding-left: 18px;
  }

  .subsection-card li {
    font-size: 13px;
    margin-bottom: 6px;
    color: #3a4a48;
  }

  .subsection-card ol {
    padding-left: 18px;
  }

  /* Arrow link at the bottom of a card */
  .card-link {
    margin-top: auto;
    font-size: 13px;
  }

  .card-link svg {
    width: 14px;
    height: 14px;
    transition: transform .15s ease;
  }

  .subsection-card:hover .card-link svg {
    transform: translateX(3px);
  }

  /* Getting-started stepper */
  .setup-steps-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .setup-step-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--surface);
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  .setup-step-item:hover {
    border-color: #cfe3db;
    box-shadow: 0 6px 18px rgba(3, 12, 26, .06);
  }

  .step-badge {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--primary), var(--primary-2));
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(29, 161, 242, .3);
  }

  .step-details {
    flex: 1;
    min-width: 0;
  }

  .step-details h4 {
    margin: 4px 0 5px;
    font-size: 15px;
    font-weight: 700;
  }

  .step-details p {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: #48575a;
    line-height: 1.55;
  }

  /* Team role cards */
  .role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 4px 0 16px;
  }

  .role-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    background: var(--surface);
    transition: border-color .15s ease, transform .15s ease;
  }

  .role-card:hover {
    border-color: #cfe3db;
    transform: translateY(-1px);
  }

  .role-card svg {
    width: 18px;
    height: 18px;
    color: var(--primary-2);
    background: var(--primary-soft);
    padding: 7px;
    box-sizing: content-box;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .role-card strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
  }

  .role-card span {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
  }

  /* Payout: two bank cards */
  .bank-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
  }

  .bank-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    background: var(--surface);
  }

  .bank-card-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
  }

  .bank-card-head svg {
    width: 18px;
    height: 18px;
    color: var(--primary-2);
  }

  .bank-card-head h4 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
  }

  .bank-card p {
    margin: 0;
    font-size: 13.5px;
    color: #48575a;
    line-height: 1.55;
  }

  /* FAQ */
  .faq-item {
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
    background: var(--surface);
  }

  .faq-q {
    display: flex;
    align-items: flex-start;
    gap: 9px;
  }

  .faq-q svg {
    width: 17px;
    height: 17px;
    color: var(--primary-2);
    flex-shrink: 0;
    margin-top: 2px;
  }

  .faq-item h3 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
  }

  .faq-item p {
    margin: 0;
    font-size: 13.5px;
    color: #48575a;
    line-height: 1.6;
    padding-left: 26px;
  }

  .faq-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #063f39, #0b5d4f);
    color: #eafaf4;
  }

  .faq-contact strong {
    display: block;
    font-size: 15px;
  }

  .faq-contact span {
    font-size: 13px;
    color: #b7e3d4;
  }

  .faq-contact .primary-btn {
    background: #fff;
    color: var(--primary-2);
    border-color: #fff;
    flex-shrink: 0;
  }

  .faq-contact .primary-btn:hover {
    background: #eafaf4;
    border-color: #eafaf4;
  }

  /* Search results list */
  .support-search-match {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, transform .12s ease;
  }

  .support-search-match:hover {
    border-color: #cfe3db;
    background: var(--surface-2);
    transform: translateY(-1px);
  }

  .support-search-match-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .support-search-match-text {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
  }

  .support-search-highlight {
    background: #fef3c7;
    color: #92400e;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 600;
  }

  /* Highlight flash when jumping to a subsection */
  .subsection-card {
    scroll-margin-top: 16px;
  }

  .support-pane[data-support-pane] {
    scroll-margin-top: 16px;
  }

  /* Screenshot figures */
  .support-figure {
    margin: 8px 0 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 10px 30px rgba(3, 12, 26, .08);
  }

  .support-figure img {
    display: block;
    width: 100%;
    height: auto;
  }

  .support-figure figcaption {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
    border-top: 1px solid var(--line);
    background: var(--surface);
  }

  .support-figure figcaption svg {
    width: 15px;
    height: 15px;
    color: var(--primary-2);
    flex-shrink: 0;
    margin-top: 1px;
  }

  .support-figure figcaption strong {
    color: var(--text);
    font-weight: 700;
  }

  /* Sub-headings inside a pane */
  .support-content h3.support-h {
    margin: 22px 0 10px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .support-content h3.support-h svg {
    width: 18px;
    height: 18px;
    color: var(--primary-2);
  }

  .support-content h4.support-sub {
    margin: 16px 0 6px;
    font-size: 14.5px;
    font-weight: 700;
  }

  /* "Sell" feature highlight strip */
  .feature-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 4px 0 18px;
  }

  .feature-pill {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px;
    background: var(--surface);
  }

  .feature-pill svg {
    width: 20px;
    height: 20px;
    color: var(--primary-2);
    background: var(--primary-soft);
    padding: 8px;
    box-sizing: content-box;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  .feature-pill strong {
    display: block;
    font-size: 13.5px;
    margin-bottom: 3px;
  }

  .feature-pill span {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.5;
  }

  /* Numbered example / naming-convention callout */
  .example-box {
    border: 1px dashed #bfe8d9;
    border-radius: 12px;
    padding: 14px 16px;
    background: #f4fbf8;
    margin: 4px 0 16px;
    font-size: 13.5px;
  }

  .example-box .example-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--primary-2);
    margin-bottom: 6px;
  }

  .example-box code {
    background: #e2f3ec;
  }

  /* ── Guided UI flows: numbered steps with focused UI crops ─────────────── */
  .ui-flow {
    margin: 14px 0 24px;
  }

  .ui-step {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 16px;
    position: relative;
    padding-bottom: 28px;
  }

  .ui-step:last-child {
    padding-bottom: 4px;
  }

  .ui-step::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-soft), transparent);
  }

  .ui-step:last-child::before {
    display: none;
  }

  .ui-step-num {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(29, 161, 242, .25);
    position: relative;
    z-index: 1;
  }

  .ui-step-body {
    min-width: 0;
    padding-top: 6px;
  }

  .ui-step-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 4px;
  }

  .ui-step-text {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 12px;
  }

  .ui-step-text strong {
    color: var(--text);
  }

  /* Focused UI crop: a piece of the real app, framed like a window */
  .ui-crop {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(3, 12, 26, .08);
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .ui-crop:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(3, 12, 26, .12);
  }

  .ui-crop img {
    display: block;
    height: auto;
  }

  .ui-crop.narrow {
    max-width: 560px;
  }

  .ui-crop.mid {
    max-width: 760px;
  }

  /* Breadcrumb chip that says where in the app this piece lives */
  .ui-crop-path {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary-2);
    background: var(--primary-soft);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: 8px;
  }

  .ui-crop-path svg {
    width: 12px;
    height: 12px;
  }

  /* Two crops side by side */
  .ui-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;
  }

  @media (max-width: 860px) {
    .ui-duo {
      grid-template-columns: 1fr;
    }
  }

  /* Feature spotlight: icon + text + optional micro-note */
  .ui-spot {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    background: var(--surface);
    padding: 12px 14px;
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.55;
  }

  .ui-spot svg {
    width: 18px;
    height: 18px;
    color: var(--primary-2);
    flex-shrink: 0;
    margin-top: 2px;
  }

  .ui-spot strong {
    display: block;
    font-size: 13.5px;
    margin-bottom: 2px;
  }

  .ui-spot span {
    color: var(--muted);
  }

  /* Backdating / big-promise banner */
  .support-banner {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border-radius: 16px;
    padding: 18px 20px;
    margin: 16px 0 20px;
    background: linear-gradient(135deg, #061630 0%, #10294a 55%, #0b6ba3 100%);
    color: #eaf6fe;
    box-shadow: 0 12px 30px rgba(6, 22, 48, .28);
  }

  .support-banner svg {
    width: 26px;
    height: 26px;
    color: #9ed7fb;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .support-banner strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
    letter-spacing: -.01em;
  }

  .support-banner p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #c9ece0;
  }

  .support-banner a {
    color: #9ed7fb;
    text-decoration: underline;
    font-weight: 600;
  }

  @media (max-width: 720px) {
    .support-top-actions {
      width: 100%;
      flex-wrap: wrap;
    }

    .support-search {
      min-width: 0;
      flex: 1;
    }

    .bank-compare {
      grid-template-columns: 1fr;
    }

    .support-grid {
      grid-template-columns: 1fr;
    }

    .faq-item p {
      padding-left: 0;
    }
  }