/* =====================================================================
   ZOHO CORPORATE THEME  (desktop + mobile)
   Loaded LAST — restyles the whole app: login, sidebar/drawer, top bar,
   bottom navigation, cards, tables, forms, buttons, dialogs.
   Palette = Zoho brand: blue #226DB4 · red #E42527 · green #089949 · yellow #F9B21D
   ===================================================================== */

/* ---------- tokens ---------- */
:root:has(.shell), :root:has(.login-wrap) {
  --card-a:#FFFFFF; --card-b:#FFFFFF; --sheet-a:#FFFFFF; --sheet-b:#FFFFFF;
  --input-bg:#FFFFFF; --input-focus:#FFFFFF;
  --side-a:#1C2536; --side-b:#161E2E;
  --hero-a:#EEF5FC; --hero-b:#E3EFFB; --hero-text:#1A5796; --on-brass:#FFFFFF;
  --accent-text:#226DB4; --brass-rgb:34 109 180;
  --bar-a:34 109 180; --bar-b:26 87 150;
  --dock-a:255 255 255; --dock-b:255 255 255;
  --toast:255 255 255; --sh:16 24 40; --ink:16 24 40; color-scheme:light;
}
body .tri-app:has(.shell), body .tri-app:has(.login-wrap) {
  --bg:#F4F6F9; --panel:#FFFFFF; --panel2:#F4F6F9; --line:#E3E8EF;
  --text:#1F2A37; --muted:#667085;
  --brass:#226DB4; --brass-hi:#3A86D0; --brass-lo:#1A5796; --brass-soft:rgba(34,109,180,.10);
  --teal:#089949; --coral:#E42527; --sky:#226DB4; --danger:#E42527;
  --hairline:rgba(16,24,40,.08);
  --zr:#E42527; --zg:#089949; --zb:#226DB4; --zy:#F9B21D;
  font-family:'Inter','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:#F4F6F9; -webkit-font-smoothing:antialiased;
}
html:has(.shell), body:has(.shell), html:has(.login-wrap), body:has(.login-wrap) { background:#F4F6F9; color-scheme:light; }

/* one clean sans-serif everywhere (no serif headings) */
.tri-serif, .section-title, .sheet-title, .login-title, .login-note-title, .kpi-num,
body .tri-app tbody tr > td[data-label]:first-child { font-family:'Inter',system-ui,sans-serif !important; }
.toast { font-family:'Inter',system-ui,sans-serif; }

/* plain background (replaces the chat-style doodle wallpaper) */
body .tri-app:has(.shell)::before { background:#F4F6F9 !important; }

/* ---------- brand mark ---------- */
.brand-mark { width:36px; height:36px; border-radius:10px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(145deg,#3A86D0,#1A5796); box-shadow:0 4px 10px -3px rgba(34,109,180,.55), inset 0 1px 0 rgba(255,255,255,.3); }
body .tri-app:has(.shell) .brand svg, body .tri-app:has(.shell) .drawer-header svg { color:#fff !important; }
body .tri-app:has(.shell) .brand-name { color:#fff; font-weight:700; letter-spacing:-.01em; font-size:1.02rem; }
body .tri-app:has(.shell) .brand-sub { color:#8FA0BB; letter-spacing:.09em; font-size:.62rem; font-weight:600; }

/* ---------- sidebar (desktop) + drawer (mobile): deep navy ---------- */
body .tri-app:has(.shell) .sidebar { background:linear-gradient(180deg,#1C2536,#161E2E); border-right:none; box-shadow:none; }
body .tri-app:has(.shell) .brand { border-bottom:1px solid rgba(255,255,255,.08); padding:18px 18px; gap:12px; }
body .tri-app:has(.shell) .nav-item, body .tri-app:has(.shell) .drawer-item { color:#B4C0D4; }
body .tri-app:has(.shell) .nav-item { border-radius:8px; padding:10px 14px; font-weight:500; transform:none !important; }
body .tri-app:has(.shell) .nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
body .tri-app:has(.shell) .nav-item.active { background:#226DB4; color:#fff; font-weight:600; box-shadow:0 6px 14px -8px rgba(34,109,180,.9); }
body .tri-app:has(.shell) .nav-item.active svg.icon, body .tri-app:has(.shell) .drawer-item.active svg.icon { fill:none; }
body .tri-app:has(.shell) .sidebar-foot { border-top:1px solid rgba(255,255,255,.08); }
body .tri-app:has(.shell) .sidebar .btn-ghost, body .tri-app:has(.shell) .drawer .btn-ghost { background:transparent; color:#D6DEEC; border:1px solid rgba(255,255,255,.18); }
body .tri-app:has(.shell) .sidebar .btn-ghost:hover, body .tri-app:has(.shell) .drawer .btn-ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); }

/* ---------- top bar ---------- */
body .tri-app:has(.shell) .topbar { background:linear-gradient(180deg,#2677C2,#1F63A6); border:none; box-shadow:0 2px 10px -4px rgba(16,24,40,.35); }
body .tri-app:has(.shell) .topbar.scrolled { background:#1F63A6; box-shadow:0 6px 18px -8px rgba(16,24,40,.5); }
body .tri-app:has(.shell) .topbar h2 { font-weight:700; letter-spacing:-.01em; }
body .tri-app:has(.shell) .topbar-name { color:rgba(255,255,255,.85); font-size:.85rem; }
body .tri-app:has(.shell) .topbar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; pointer-events:none;
  background:linear-gradient(90deg,var(--zr) 0 25%,var(--zg) 25% 50%,var(--zb) 50% 75%,var(--zy) 75% 100%); }
body .tri-app:has(.shell) .topbar { position:relative; }

/* ---------- cards ---------- */
body .tri-app:has(.shell) .card { background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); }
body .tri-app:has(.shell) .card:has(> table) { background:transparent; border:none; box-shadow:none; }
body .tri-app:has(.shell) .card[style*="border-color:var(--brass)"]:not(:has(> table)) {
  background:linear-gradient(135deg,#F3F8FE,#E6F0FB); border:1px solid #BCD6F1 !important;
  box-shadow:0 8px 20px -14px rgba(34,109,180,.55); }
body .tri-app:has(.shell) .card[style*="border-color:var(--brass)"]:not(:has(> table)) .kpi-num { color:#1A5796; }

/* ---------- highlighted "Total current fund" (current balance) card: orange, big font, matches the theme ---------- */
body .tri-app:has(.shell) .card.fund-hero {
  position:relative; overflow:hidden; padding:24px 26px;
  background:linear-gradient(135deg,#FF9A3C 0%,#EA6A0A 100%) !important;
  border:1px solid #EA6A0A !important;
  box-shadow:0 14px 28px -12px rgba(234,106,10,.65), 0 2px 4px rgba(16,24,40,.08) !important; }
body .tri-app:has(.shell) .card.fund-hero::after {
  content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.22); pointer-events:none; }
body .tri-app:has(.shell) .card.fund-hero::before {
  content:""; position:absolute; right:26px; bottom:-38px; width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,.10); pointer-events:none; }
body .tri-app:has(.shell) .card.fund-hero > * { position:relative; z-index:1; }
body .tri-app:has(.shell) .card.fund-hero .kpi-label { color:#fff; font-weight:700; font-size:.95rem; }
body .tri-app:has(.shell) .card.fund-hero .kpi-chip { background:rgba(255,255,255,.22); color:#fff; }
body .tri-app:has(.shell) .card.fund-hero .kpi-num { color:#fff; font-size:3rem; font-weight:800; line-height:1.05; letter-spacing:-.03em; }
body .tri-app:has(.shell) .card.fund-hero .kpi-sub { color:rgba(255,255,255,.88); font-size:.8rem; margin-top:8px; }
/* tablet / mobile: the grid drops to 2 columns, so give the current-fund card the full width (and show it first) so nothing overlaps */
@media (max-width:1000px) {
  body .tri-app:has(.shell) .card.fund-hero { grid-column:1 / -1; order:-1; min-width:0; }
}
@media (max-width:600px) {
  body .tri-app:has(.shell) .card.fund-hero { padding:20px 18px; }
  body .tri-app:has(.shell) .card.fund-hero .kpi-label { font-size:.9rem; }
  body .tri-app:has(.shell) .card.fund-hero .kpi-num { font-size:clamp(2rem, 10vw, 2.6rem); white-space:nowrap; }
  body .tri-app:has(.shell) .card.fund-hero .kpi-sub { padding-right:40px; }
  body .tri-app:has(.shell) .card.fund-hero::after { width:80px; height:80px; right:-26px; top:-26px; }
  body .tri-app:has(.shell) .card.fund-hero::before { display:none; }
}
body .tri-app:has(.shell) .kpi-label { color:var(--muted); font-weight:500; }
body .tri-app:has(.shell) .kpi-num { font-weight:700; letter-spacing:-.02em; color:var(--text); }
body .tri-app:has(.shell) .section-title { font-weight:700; letter-spacing:-.01em; color:var(--text); }
body .tri-app:has(.shell) .kpi-chip { background:rgba(34,109,180,.10); color:#226DB4; border-radius:10px; }
body .tri-app:has(.shell) .kpi-chip.tone-teal  { background:rgba(8,153,73,.11);  color:#067A3A; }
body .tri-app:has(.shell) .kpi-chip.tone-coral { background:rgba(228,37,39,.09); color:#C21F21; }
body .tri-app:has(.shell) .kpi-chip.tone-sky   { background:rgba(34,109,180,.10); color:#226DB4; }
body .tri-app:has(.shell) .progress-track { background:#E8EDF4; }
body .tri-app:has(.shell) .progress-fill { background:linear-gradient(90deg,#1A5796,#3A86D0); }
body .tri-app:has(.shell) .notice-card { background:#fff; border:1px solid var(--line); border-left:3px solid #D0D7E2; }
body .tri-app:has(.shell) .notice-card.pinned { border-left-color:var(--zy); }

/* ---------- buttons ---------- */
body .tri-app:has(.shell) .btn { background:#fff; color:var(--text); border:1px solid #D0D7E2; border-radius:8px; font-weight:500; box-shadow:0 1px 1px rgba(16,24,40,.04); }
body .tri-app:has(.shell) .btn:hover { border-color:#226DB4; color:#226DB4; }
body .tri-app:has(.shell) .btn-ghost { background:transparent; box-shadow:none; }
body .tri-app:has(.shell) .btn-brass { background:#226DB4; color:#fff; border:1px solid #1D5F9F; box-shadow:0 1px 2px rgba(16,24,40,.12), inset 0 1px 0 rgba(255,255,255,.18); }
body .tri-app:has(.shell) .btn-brass:hover { background:#1D5F9F; color:#fff; filter:none; }
body .tri-app:has(.shell) .btn-teal { background:#089949; color:#fff; border:1px solid #067F3C; box-shadow:0 1px 2px rgba(16,24,40,.12); }
body .tri-app:has(.shell) .btn-teal:hover { background:#067F3C; color:#fff; }
body .tri-app:has(.shell) .btn-danger { background:#E42527; color:#fff; border:1px solid #C71F21; box-shadow:0 1px 2px rgba(16,24,40,.12); }
body .tri-app:has(.shell) .btn-danger:hover { background:#C71F21; color:#fff; }
body .tri-app:has(.shell) .sos-btn { background:#E42527; }
body .tri-app:has(.shell) .btn-brass .ripple, body .tri-app:has(.shell) .btn-teal .ripple, body .tri-app:has(.shell) .btn-danger .ripple, body .tri-app:has(.shell) .nav-item.active .ripple { background:rgba(255,255,255,.4); }

/* ---------- inputs ---------- */
body .tri-app:has(.shell) .field label { color:#475467; font-weight:600; font-size:.78rem; }
body .tri-app:has(.shell) .field input, body .tri-app:has(.shell) .field select, body .tri-app:has(.shell) .field textarea, body .tri-app:has(.shell) select.inline, body .tri-app:has(.shell) input.inline {
  background:#fff; border:1px solid #D0D7E2; border-radius:8px; color:var(--text); box-shadow:0 1px 1px rgba(16,24,40,.03); }
body .tri-app:has(.shell) .field input:focus, body .tri-app:has(.shell) .field select:focus, body .tri-app:has(.shell) .field textarea:focus, body .tri-app:has(.shell) select.inline:focus, body .tri-app:has(.shell) input.inline:focus {
  border-color:#226DB4; box-shadow:0 0 0 3px rgba(34,109,180,.16); background:#fff; }
body .tri-app:has(.shell) :focus-visible, body .tri-app:has(.login-wrap) :focus-visible { outline:2px solid #3A86D0; outline-offset:2px; }

/* ---------- tables ---------- */
body .tri-app:has(.shell) th { background:#F7F9FC; color:#667085; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid var(--line); }
body .tri-app:has(.shell) td { border-bottom:1px solid #EDF0F5; }
body .tri-app:has(.shell) tbody tr:hover { background:#F5F9FE; }

/* ---------- status pills ---------- */
body .tri-app:has(.shell) .tag { font-weight:600; }
body .tri-app:has(.shell) .tag::before { box-shadow:none; }
body .tri-app:has(.shell) .tag-green { background:rgba(8,153,73,.12);  color:#067A3A; }
body .tri-app:has(.shell) .tag-amber { background:rgba(249,178,29,.20); color:#8A5B00; }
body .tri-app:has(.shell) .tag-red   { background:rgba(228,37,39,.10);  color:#B91C1E; }
body .tri-app:has(.shell) .tag-grey  { background:#EEF1F6; color:#556070; }
body .tri-app:has(.shell) .nav-badge, body .tri-app:has(.shell) .bnav-icon-wrap .nav-badge { background:#E42527; color:#fff; box-shadow:none; }

/* ---------- dialogs, toast ---------- */
body .tri-app:has(.shell) .sheet { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px -12px rgba(16,24,40,.35); }
body .tri-app:has(.shell) .sheet-overlay, body .tri-app:has(.shell) .drawer-overlay.show { background:rgba(16,24,40,.50); }
body .tri-app:has(.shell) .sheet-handle { background:#D0D7E2; }
body .tri-app:has(.shell) .sheet-title { font-weight:700; }
html:has(.shell) .toast, html:has(.login-wrap) .toast { background:#fff; color:#1F2A37; border:1px solid #E3E8EF; border-left:4px solid #226DB4;
  box-shadow:0 12px 30px -10px rgba(16,24,40,.35); border-radius:10px; }

/* =====================================================================
   DESKTOP specifics (> 900px): white top bar over a navy sidebar
   ===================================================================== */
@media (min-width: 901px) {
  body .tri-app:has(.shell) .topbar { background:#fff; box-shadow:0 1px 0 var(--line); padding:14px 30px; }
  body .tri-app:has(.shell) .topbar.scrolled { background:#fff; box-shadow:0 4px 14px -8px rgba(16,24,40,.25); }
  body .tri-app:has(.shell) .topbar::after { display:none; }
  body .tri-app:has(.shell) .topbar h2 { color:var(--text); font-size:1.3rem; }
  body .tri-app:has(.shell) .topbar .meta { color:var(--muted); }
  body .tri-app:has(.shell) .topbar-name { color:var(--muted); }
  body .tri-app:has(.shell) .topbar .icon-btn { background:#F4F6F9; border:1px solid var(--line); color:#475467; }
  body .tri-app:has(.shell) .topbar .icon-btn:hover { background:rgba(34,109,180,.10); color:#226DB4; }
  body .tri-app:has(.shell) .topbar .badge-role { background:rgba(34,109,180,.10); border:1px solid #BCD6F1; color:#1A5796; }
  body .tri-app:has(.shell) .sidebar { width:240px; position:relative; }
  body .tri-app:has(.shell) .sidebar::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg,var(--zr) 0 25%,var(--zg) 25% 50%,var(--zb) 50% 75%,var(--zy) 75% 100%); }
  body .tri-app:has(.shell) .content { padding:26px 32px 60px; }
  body .tri-app:has(.shell) .card { padding:20px; }
  body .tri-app:has(.shell) .section-title { margin:28px 2px 12px; font-size:1.02rem; }
}

/* =====================================================================
   MOBILE specifics (<= 900px): blue app bar, navy drawer, flat bottom tabs
   ===================================================================== */
@media (max-width: 900px) {
  body .tri-app:has(.shell) .topbar { padding:calc(11px + env(safe-area-inset-top)) 14px 14px; }
  body .tri-app:has(.shell) .topbar h2 { color:#fff; font-size:1.18rem; }
  body .tri-app:has(.shell) .topbar .meta { color:rgba(255,255,255,.8); }
  body .tri-app:has(.shell) .topbar .hamburger-btn, body .tri-app:has(.shell) .topbar .icon-btn { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); color:#fff; }
  body .tri-app:has(.shell) .topbar .badge-role { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.34); color:#fff; }

  body .tri-app:has(.shell) .content { padding:16px 14px calc(94px + env(safe-area-inset-bottom)); }
  body .tri-app:has(.shell) .section-title { font-size:1rem; margin:22px 4px 10px; }
  body .tri-app:has(.shell) .card { border-radius:12px; padding:16px; }
  body .tri-app:has(.shell) tbody tr { background:#fff; border:1px solid var(--line); border-radius:12px; padding:2px 16px;
    box-shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); }
  body .tri-app:has(.shell) tbody tr > td[data-label]:first-child { font-size:1.02rem; font-weight:700; color:var(--text); }
  body .tri-app:has(.shell) td[data-label] { border-bottom:1px solid #EDF0F5; }
  body .tri-app:has(.shell) td[data-label]::before { color:#667085; font-weight:500; }
  body .tri-app:has(.shell) tfoot tr { background:rgba(34,109,180,.08); border:1px solid #BCD6F1; border-radius:12px; }
  body .tri-app:has(.shell) tbody tr:has(td.empty) { background:transparent; border:none; box-shadow:none; }

  body .tri-app:has(.shell) .btn { border-radius:10px; min-height:46px; }
  body .tri-app:has(.shell) .btn-sm { border-radius:8px; min-height:38px; }
  body .tri-app:has(.shell) .field input, body .tri-app:has(.shell) .field select, body .tri-app:has(.shell) .field textarea, body .tri-app:has(.shell) select.inline, body .tri-app:has(.shell) input.inline { border-radius:10px; min-height:46px; }

  /* collapsible add-forms */
  body .tri-app:has(.shell) .collapsible { border-radius:12px; }
  body .tri-app:has(.shell) .collapsible-plus { background:#226DB4; color:#fff; box-shadow:none; }

  /* drawer */
  body .tri-app:has(.shell) .drawer { background:linear-gradient(180deg,#1C2536,#141B29); border-radius:0; box-shadow:none; }
  body .tri-app:has(.shell) .drawer.open { box-shadow:18px 0 50px -10px rgba(16,24,40,.6); }
  body .tri-app:has(.shell) .drawer-header { padding-top:24px; }
  body .tri-app:has(.shell) .drawer-close { color:#9FB0CC; }
  body .tri-app:has(.shell) .drawer-user { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; }
  body .tri-app:has(.shell) .drawer-user-name { color:#fff; }
  body .tri-app:has(.shell) .drawer-user-role { color:#9FB0CC; }
  body .tri-app:has(.shell) .drawer-avatar { background:linear-gradient(145deg,#3A86D0,#1A5796); color:#fff; box-shadow:none; }
  body .tri-app:has(.shell) .drawer-item { border-radius:10px; }
  body .tri-app:has(.shell) .drawer-item svg.icon { background:rgba(255,255,255,.07); border-radius:10px; }
  body .tri-app:has(.shell) .drawer-item.active { background:rgba(34,109,180,.28); color:#fff; box-shadow:inset 3px 0 0 #3A86D0; }
  body .tri-app:has(.shell) .drawer-item.active svg.icon { background:#226DB4; color:#fff; }
  body .tri-app:has(.shell) .drawer-foot { border-top:1px solid rgba(255,255,255,.08); }

  /* bottom tabs: flat full-width bar */
  body .tri-app:has(.shell) .bottomnav { left:0; right:0; bottom:0; border-radius:0; border:none; border-top:1px solid var(--line);
    background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 16px -8px rgba(16,24,40,.18); }
  body .tri-app:has(.shell) .bottomnav-item { color:#667085; font-weight:500; }
  body .tri-app:has(.shell) .bottomnav-item.active { color:#226DB4; font-weight:600; }
  body .tri-app:has(.shell) .bottomnav-item.active .bnav-icon-wrap { background:rgba(34,109,180,.12); color:#226DB4; box-shadow:none; }
  body .tri-app:has(.shell) .bottomnav-item.active svg.icon { fill:none; }
  body .tri-app:has(.shell) .bnav-icon-wrap { border-radius:14px; }
  body .tri-app:has(.shell) .bnav-icon-wrap .nav-badge { border-color:#fff; }
  body .tri-app:has(.shell) .sheet { border-radius:18px 18px 0 0; border-bottom:none; }
  html:has(.shell) .toast { bottom:calc(84px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   LOGIN — Zoho-style split screen (desktop) / brand header + card (mobile)
   ===================================================================== */
.login-wrap.zl { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); min-height:100vh; min-height:100dvh;
  padding:0; align-items:stretch; overflow:visible; background:#F4F6F9; position:relative; flex:1; width:100%; }

.zl-hero { position:relative; color:#fff; display:flex; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(8,20,40,.55) 0%, rgba(8,20,40,0) 28%, rgba(8,20,40,0) 55%, rgba(8,20,40,.62) 100%),
    url('building-bg.jpg?v=2') center 40% / cover no-repeat; }
.zl-hero-copy, .zl-brand-name, .zl-lead, .zl-headline { text-shadow:0 2px 12px rgba(0,0,0,.55); }
.zl-hero::before { content:""; position:absolute; right:-120px; top:-120px; width:380px; height:380px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 68%); pointer-events:none; }
.zl-hero-inner { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; gap:36px;
  width:100%; max-width:600px; margin:0 auto; padding:44px 52px; }
.zl-brand { display:flex; align-items:center; gap:12px; }
.zl-brand .brand-mark { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); box-shadow:none; }
.zl-brand-name { font-size:1.12rem; font-weight:700; letter-spacing:-.01em; }
.zl-headline { margin:0 0 14px; font-size:clamp(1.9rem,3.2vw,2.7rem); font-weight:700; line-height:1.15; letter-spacing:-.025em; }
.zl-lead { margin:0 0 30px; color:rgba(255,255,255,.78); font-size:1.02rem; line-height:1.6; max-width:420px; }
.zl-features { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.zl-features li { display:flex; align-items:center; gap:14px; }
.zl-feat-ic { width:40px; height:40px; border-radius:11px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:#fff; }
.zl-features b { display:block; font-size:.95rem; font-weight:600; }
.zl-features small { display:block; margin-top:2px; color:rgba(255,255,255,.7); font-size:.82rem; line-height:1.4; }
.zl-strip { display:flex; gap:6px; }
.zl-strip i { display:block; width:44px; height:4px; border-radius:4px; }
.zl-strip i:nth-child(1) { background:#E42527; } .zl-strip i:nth-child(2) { background:#089949; }
.zl-strip i:nth-child(3) { background:#4C9BE0; } .zl-strip i:nth-child(4) { background:#F9B21D; }

.zl-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 28px; gap:22px; }
.zl-card { width:100%; max-width:410px; background:#fff; border:1px solid #E3E8EF; border-radius:16px; padding:38px 34px 34px;
  box-shadow:0 20px 50px -22px rgba(16,24,40,.28), 0 2px 6px rgba(16,24,40,.05); animation:zlRise .6s cubic-bezier(.22,.8,.32,1) both; }
@keyframes zlRise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.zl-card-brand { display:none; }
.zl-title { margin:0 0 6px; font-size:1.65rem; font-weight:700; letter-spacing:-.02em; color:#1F2A37; }
.zl-sub { margin:0 0 26px; color:#667085; font-size:.9rem; line-height:1.55; }
.zl-foot { color:#98A2B3; font-size:.76rem; text-align:center; }

body .tri-app:has(.login-wrap) .zl .login-form { width:100%; max-width:none; padding:0; gap:18px; background:transparent; border:none; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; }
body .tri-app:has(.login-wrap) .zl .login-form > * { animation:none; }
.zl-field { display:flex; flex-direction:column; gap:7px; }
.zl-label { font-size:.8rem; font-weight:600; color:#344054; }
body .tri-app:has(.login-wrap) .zl .login-form input { background:#fff; border:1px solid #D0D7E2; border-radius:8px; min-height:46px; padding:11px 14px;
  font-size:.95rem; color:#1F2A37; box-shadow:0 1px 1px rgba(16,24,40,.03); transform:none; }
body .tri-app:has(.login-wrap) .zl .login-form input::placeholder { color:#98A2B3; }
body .tri-app:has(.login-wrap) .zl .login-form input:focus { border-color:#226DB4; box-shadow:0 0 0 3px rgba(34,109,180,.16); transform:none; }
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass { width:100%; min-height:48px; border-radius:8px; font-size:.95rem; font-weight:600; letter-spacing:.01em;
  background:#226DB4; color:#fff; border:1px solid #1D5F9F; box-shadow:0 6px 16px -8px rgba(34,109,180,.85); animation:none; }
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass::after { display:none; }
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass:hover { background:#1D5F9F; transform:none; }
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass:active { transform:scale(.99); }
.zl-msg { font-size:.84rem; line-height:1.4; padding:10px 12px; border-radius:8px; }
.zl-err { background:#FEF3F2; border:1px solid #FECDCA; color:#B42318; }
.zl-ok { background:#ECFDF3; border:1px solid #ABEFC6; color:#067647; }

/* loading screen (shown before the login form) */
.login-wrap:not(.zl) { background:#F4F6F9; }
.login-wrap:not(.zl) .login-bg, .login-wrap:not(.zl) .login-particles { display:none; }
body .tri-app:has(.login-wrap) .login-wrap:not(.zl) .login-title { background:none; color:#1F2A37; -webkit-text-fill-color:#1F2A37; filter:none; animation:none; font-weight:700; }
body .tri-app:has(.login-wrap) .login-wrap:not(.zl) .login-sub { color:#667085; }

/* ---- login on phones/tablets: compact brand header + overlapping card ---- */
@media (max-width: 900px) {
  .login-wrap.zl { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  .zl-hero-inner { padding:calc(30px + env(safe-area-inset-top)) 22px 96px; gap:18px; max-width:none; }
  .zl-hero-copy { display:none; }
  .zl-brand { flex-direction:column; align-items:flex-start; gap:14px; }
  .zl-brand .brand-mark { width:44px; height:44px; border-radius:12px; }
  .zl-brand-name { font-size:1.55rem; font-weight:700; letter-spacing:-.02em; }
  .zl-hero-inner::after { content:"Society management, beautifully simple."; display:block; margin-top:-8px; color:rgba(255,255,255,.78); font-size:.92rem; }
  .zl-strip { position:absolute; left:22px; bottom:62px; }
  .zl-panel { justify-content:flex-start; padding:0 16px calc(24px + env(safe-area-inset-bottom)); margin-top:-48px; position:relative; z-index:2; }
  .zl-card { max-width:460px; padding:28px 22px 24px; border-radius:16px; }
  .zl-title { font-size:1.45rem; }
  .zl-sub { margin-bottom:22px; }
  body .tri-app:has(.login-wrap) .zl .login-form input { font-size:16px; min-height:50px; border-radius:10px; }
  body .tri-app:has(.login-wrap) .zl .login-form .btn-brass { min-height:50px; border-radius:10px; }
}
@media (max-width: 900px) and (max-height: 520px) {
  .zl-hero-inner { padding-bottom:62px; }
  .zl-hero-inner::after, .zl-strip { display:none; }
  .zl-panel { margin-top:-40px; }
}
@media (min-width: 901px) and (max-width: 1100px) { .zl-hero-inner { padding:40px 36px; } }

@media (prefers-reduced-motion: reduce) { .zl-card { animation:none !important; } }

/* =====================================================================
   LOGIN HERO v2 — clear building photo + frosted-glass text boxes + animation
   ===================================================================== */
@keyframes zlPan { from { background-position:35% 35%, 35% 35%; } to { background-position:65% 45%, 65% 45%; } }
@keyframes zlUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes zlIn { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
@keyframes zlGlow { 0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.0); } 50% { box-shadow:0 0 0 6px rgba(255,255,255,.10); } }
@keyframes zlStrip { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.zl-hero { background-size:cover, cover; background-repeat:no-repeat;
  animation:zlPan 32s ease-in-out infinite alternate; }
.zl-hero::before { display:none; }

.zl-hero-inner { justify-content:space-between; gap:20px; }

/* brand pill */
.zl-brand { align-self:flex-start; flex-direction:row !important; align-items:center; gap:10px !important;
  padding:8px 18px 8px 8px; border-radius:999px; background:rgba(10,24,46,.58); border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 8px 24px -10px rgba(0,0,0,.5);
  animation:zlIn .7s cubic-bezier(.22,.8,.32,1) both; }
.zl-brand .brand-mark { width:38px; height:38px; border-radius:50%; }
.zl-brand-name { font-size:1.05rem !important; text-shadow:none; }

/* text box */
.zl-hero-copy { margin-top:auto; max-width:540px; padding:24px 26px 22px; border-radius:20px;
  background:rgba(10,24,46,.66); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.65); text-shadow:none;
  animation:zlUp .8s .15s cubic-bezier(.22,.8,.32,1) both; }
.zl-headline { font-size:clamp(1.5rem,2.4vw,2.05rem); margin:0 0 8px; text-shadow:none; }
.zl-lead { margin:0 0 18px; font-size:.95rem; max-width:none; color:rgba(255,255,255,.85); text-shadow:none; }
.zl-features { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.zl-features li { gap:11px; opacity:0; animation:zlUp .6s cubic-bezier(.22,.8,.32,1) both; }
.zl-features li:nth-child(1) { animation-delay:.45s; } .zl-features li:nth-child(2) { animation-delay:.58s; }
.zl-features li:nth-child(3) { animation-delay:.71s; } .zl-features li:nth-child(4) { animation-delay:.84s; }
.zl-feat-ic { width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.14); animation:zlGlow 3.6s ease-in-out infinite; }
.zl-features b { font-size:.88rem; }
.zl-features small { font-size:.76rem; color:rgba(255,255,255,.78); }
.zl-strip i { transform-origin:left; animation:zlStrip .7s .9s ease-out both; }
.zl-strip i:nth-child(2) { animation-delay:1s; } .zl-strip i:nth-child(3) { animation-delay:1.1s; } .zl-strip i:nth-child(4) { animation-delay:1.2s; }

@media (min-width: 901px) and (max-width: 1250px) { .zl-features { grid-template-columns:1fr; } }

/* mobile: photo on top, brand pill + tagline box over it */
@media (max-width: 900px) {
  .zl-hero { min-height:380px; }
  .zl-hero-inner { min-height:380px; justify-content:space-between; padding:calc(18px + env(safe-area-inset-top)) 16px 66px; gap:0; }
  .zl-brand-name { font-size:1rem !important; }
  .zl-hero-inner::after { margin:0; padding:12px 16px; border-radius:14px; font-size:.9rem; font-weight:500; color:#fff;
    background:rgba(10,24,46,.66); border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    animation:zlUp .8s .2s cubic-bezier(.22,.8,.32,1) both; }
  .zl-strip { display:none; }
  .zl-hero-copy { display:none; }
}
@media (max-width: 900px) and (max-height: 520px) { .zl-hero, .zl-hero-inner { min-height:0; } .zl-hero-inner::after { display:none; } }
@media (prefers-reduced-motion: reduce) {
  .zl-hero, .zl-brand, .zl-hero-copy, .zl-features li, .zl-feat-ic, .zl-strip i, .zl-hero-inner::after { animation:none !important; opacity:1 !important; }
}

/* =====================================================================
   LOGIN HERO v3 — full building in its own photo area + text box below
   ===================================================================== */
@keyframes zlKen { from { transform:scale(1) translate3d(0,0,0); } to { transform:scale(1.12) translate3d(-2.5%,-1.5%,0); } }
@keyframes zlSweep { 0% { transform:translateX(-120%) skewX(-18deg); } 55%,100% { transform:translateX(260%) skewX(-18deg); } }
@keyframes zlSky { 0%,100% { opacity:.0; } 50% { opacity:.35; } }

.zl-hero { background:linear-gradient(180deg,#0f2a50 0%,#0a1c38 100%) !important; animation:none !important; }
.zl-photo { position:absolute; left:0; right:0; top:0; height:64%; overflow:hidden; z-index:0;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%); mask-image:linear-gradient(180deg,#000 82%,transparent 100%); }
.zl-photo::before { content:""; position:absolute; inset:0; background:url('building-bg.jpg?v=2') center 52% / cover no-repeat;
  transform-origin:55% 70%; animation:zlKen 22s ease-in-out infinite alternate; will-change:transform; }
.zl-photo::after { content:""; position:absolute; top:0; bottom:0; left:0; width:38%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent); animation:zlSweep 9s ease-in-out infinite; }
.zl-hero-inner { z-index:2; }
.zl-hero-copy { padding:20px 24px 18px; background:rgba(8,20,40,.72); }
.zl-headline { font-size:clamp(1.35rem,2.1vw,1.9rem); }
@media (min-width:901px) and (max-height:760px) { .zl-lead { display:none; } .zl-hero-inner { padding-top:32px; padding-bottom:28px; gap:14px; } }

@media (max-width:900px) {
  .zl-photo { height:100%; -webkit-mask-image:none; mask-image:none; }
  .zl-photo::before { background-position:center 55%; }
}
@media (prefers-reduced-motion: reduce) { .zl-photo::before, .zl-photo::after { animation:none !important; } }

/* =====================================================================
   LOGIN HERO v4 — LED / RGB name sign on the building roof
   ===================================================================== */
@keyframes zlHue { to { filter:hue-rotate(360deg); } }
@keyframes zlLetter { 0%,100% { opacity:1; } 42% { opacity:1; } 50% { opacity:.18; } 58% { opacity:1; } 80% { opacity:.85; } 84% { opacity:1; } }
@keyframes zlBorder { to { background-position:0 0, -300% 0; } }
@keyframes zlBoardGlow { 0%,100% { box-shadow:0 0 1.2cqw rgba(255,45,85,.55), 0 0 3cqw rgba(10,132,255,.25); } 33% { box-shadow:0 0 1.4cqw rgba(48,209,88,.6), 0 0 3cqw rgba(255,214,10,.25); } 66% { box-shadow:0 0 1.4cqw rgba(10,132,255,.6), 0 0 3cqw rgba(191,90,242,.3); } }

.zl-photo { height:70%; container-type:size; -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,#000 88%,transparent 100%); }
.zl-photo::before { display:none !important; }
.zl-zoom { position:absolute; inset:0; }
.zl-scene { position:absolute; left:50%; top:30%; transform:translate(-50%,-30%);
  width:max(100cqw, calc(100cqh * 1.2969)); aspect-ratio:1992 / 1536;
  background:url('building-bg.jpg?v=2') center / 100% 100% no-repeat; container-type:inline-size; }

.zl-sign { position:absolute; left:28%; width:44%; top:16.2%; height:6.8%; }
.zl-posts i { position:absolute; top:100%; width:.65cqw; background:linear-gradient(#aab3c2,#5b6474); border-radius:1px; }
.zl-posts i:nth-child(1) { left:26%; height:50%; } .zl-posts i:nth-child(2) { left:64%; height:18%; }
.zl-board { position:absolute; inset:0; border-radius:.7cqw; border:.28cqw solid transparent;
  background:linear-gradient(rgba(4,8,20,.92),rgba(4,8,20,.92)) padding-box,
             linear-gradient(90deg,#ff2d55,#ffd60a,#30d158,#0a84ff,#bf5af2,#ff2d55) border-box;
  background-size:100% 100%, 300% 100%; animation:zlBorder 5s linear infinite, zlBoardGlow 6s ease-in-out infinite;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.zl-led { position:relative; display:flex; align-items:center; justify-content:center; white-space:nowrap;
  font:800 2.7cqw/1 Inter,system-ui,sans-serif; letter-spacing:.12em; color:#ffb3c1; padding-left:.14em;
  animation:zlHue 7s linear infinite; }
.zl-led span { display:inline-block; text-shadow:0 0 .35cqw currentColor, 0 0 1cqw currentColor;
  filter:hue-rotate(calc(var(--i) * 21deg)); animation:zlLetter 3s ease-in-out infinite; animation-delay:calc(var(--i) * .13s); }
.zl-led .zl-sp { display:inline-block; width:.55em; }
.zl-led::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle, transparent 55%, rgba(4,8,20,.28) 70%) 0 0 / .3cqw .3cqw; }

@media (max-width:900px) {
  .zl-photo { height:100%; -webkit-mask-image:none; mask-image:none; }
  .zl-scene { top:20%; transform:translate(-50%,-20%); }
  .zl-hero-inner::after { margin-top:auto !important; }
}
@media (prefers-reduced-motion: reduce) { .zl-zoom, .zl-board, .zl-led, .zl-led span { animation:none !important; } }

/* mobile: no tagline over the photo */
@media (max-width:900px) { .zl-hero-inner::after { content:none !important; display:none !important; } }

/* =====================================================================
   MOBILE LOGIN — fixed one-screen layout (no scrolling), app-like
   ===================================================================== */
@media (max-width:900px) {
  html:has(.login-wrap.zl), body:has(.login-wrap.zl) { height:100%; overflow:hidden; overscroll-behavior:none; }
  .tri-app:has(.login-wrap.zl) { height:100vh; height:100dvh; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
  .login-wrap.zl { height:100%; min-height:0; flex:1; overflow:hidden; grid-template-rows:minmax(0,1fr) auto; }
  .login-wrap.zl .zl-hero, .login-wrap.zl .zl-hero-inner { min-height:0 !important; }
  .login-wrap.zl .zl-hero-inner { padding:calc(14px + env(safe-area-inset-top)) 16px 40px; }
  .login-wrap.zl .zl-panel { padding:0 14px calc(10px + env(safe-area-inset-bottom)); margin-top:-30px; gap:8px; flex:none; }
  .login-wrap.zl .zl-card { padding:18px 18px 16px; max-width:440px; }
  .login-wrap.zl .zl-title { font-size:1.3rem; margin:0 0 12px; }
  .login-wrap.zl .zl-sub { display:none; }
  .login-wrap.zl .login-form { gap:11px; }
  .login-wrap.zl .zl-field { gap:5px; }
  body .tri-app:has(.login-wrap) .login-wrap.zl .login-form input { min-height:46px; padding:9px 13px; }
  body .tri-app:has(.login-wrap) .login-wrap.zl .login-form .btn-brass { min-height:48px; }
  .login-wrap.zl .zl-foot { font-size:.7rem; line-height:1.2; }
}
/* very short screens (keyboard open / landscape): allow scrolling only as a last resort */
@media (max-width:900px) and (max-height:480px) {
  html:has(.login-wrap.zl), body:has(.login-wrap.zl) { overflow:auto; }
  .tri-app:has(.login-wrap.zl), .login-wrap.zl { overflow-y:auto; height:auto; min-height:100%; }
  .login-wrap.zl .zl-hero { min-height:140px !important; }
}

/* =====================================================================
   MOBILE — keep the top bar (page title + admin name) fixed while scrolling
   ===================================================================== */
@media (max-width:900px) {
  body .tri-app:has(.shell) .topbar { position:fixed; top:0; left:0; right:0; width:100%; z-index:60; }
  body .tri-app:has(.shell) .main { padding-top:var(--topbar-h, calc(68px + env(safe-area-inset-top))); }
}

/* =====================================================================
   MOBILE — bottom menu bar uses the same blue as the top bar
   ===================================================================== */
@media (max-width:900px) {
  body .tri-app:has(.shell) .bottomnav { background:linear-gradient(180deg,#2677C2,#1F63A6); border:none;
    box-shadow:0 -4px 16px -6px rgba(16,24,40,.45); }
  body .tri-app:has(.shell) .bottomnav::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; pointer-events:none;
    background:linear-gradient(90deg,var(--zr) 0 25%,var(--zg) 25% 50%,var(--zb) 50% 75%,var(--zy) 75% 100%); }
  body .tri-app:has(.shell) .bottomnav-item { color:rgba(255,255,255,.76); }
  body .tri-app:has(.shell) .bottomnav-item.active { color:#fff; font-weight:700; }
  body .tri-app:has(.shell) .bottomnav-item.active .bnav-icon-wrap { background:rgba(255,255,255,.22); color:#fff; box-shadow:none; }
  body .tri-app:has(.shell) .bottomnav-item.active svg.icon { fill:none; }
  body .tri-app:has(.shell) .bnav-icon-wrap .nav-badge { border-color:#1F63A6; }
}

/* =====================================================================
   BRAND PILL — premium animation (border light, text shine, icon halo, float)
   ===================================================================== */
@property --zA { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes zlSpinA { to { --zA:360deg; } }
@keyframes zlFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes zlShine { 0% { background-position:180% 0; } 100% { background-position:-80% 0; } }
@keyframes zlSweepPill { 0% { transform:translateX(-140%) skewX(-20deg); } 45%,100% { transform:translateX(320%) skewX(-20deg); } }
@keyframes zlHalo { 0% { transform:scale(.9); opacity:.75; } 100% { transform:scale(1.35); opacity:0; } }
@keyframes zlPillGlow { 0%,100% { box-shadow:0 10px 28px -10px rgba(0,0,0,.55), 0 0 0 0 rgba(255,214,120,0); }
                        50% { box-shadow:0 12px 30px -8px rgba(0,0,0,.55), 0 0 22px 2px rgba(255,214,120,.28); } }
@keyframes zlIconTilt { 0%,86%,100% { transform:rotate(0) scale(1); } 90% { transform:rotate(-10deg) scale(1.1); } 95% { transform:rotate(8deg) scale(1.1); } }

.zl-brand { position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,rgba(14,32,62,.78),rgba(30,70,120,.62));
  animation:zlIn .7s cubic-bezier(.22,.8,.32,1) both, zlFloat 5.5s ease-in-out 1s infinite, zlPillGlow 4s ease-in-out 1s infinite; }
/* travelling gold/white light along the border */
.zl-brand::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px; z-index:2; pointer-events:none;
  background:conic-gradient(from var(--zA), rgba(255,255,255,.10) 0 52%, rgba(255,214,120,.95) 72%, #fff 80%, rgba(255,214,120,.95) 88%, rgba(255,255,255,.10) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite:exclude;
  animation:zlSpinA 4.5s linear infinite; }
/* soft light sweep over the whole pill */
.zl-brand::after { content:""; position:absolute; top:0; bottom:0; left:0; width:34%; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); animation:zlSweepPill 5.5s ease-in-out 1.2s infinite; }
/* icon badge with halo ring + little tilt */
.zl-brand .brand-mark { position:relative; z-index:3; background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.4); animation:zlIconTilt 6s ease-in-out 2s infinite; }
.zl-brand .brand-mark::after { content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid rgba(255,225,150,.8);
  animation:zlHalo 2.6s ease-out infinite; pointer-events:none; }
/* shimmering premium lettering */
.zl-brand .zl-brand-name { position:relative; z-index:3; letter-spacing:.01em; font-weight:700;
  background:linear-gradient(100deg,#fff 0 36%,#ffe7a3 48%,#fff 60% 100%); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:zlShine 4.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .zl-brand, .zl-brand::before, .zl-brand::after, .zl-brand .brand-mark, .zl-brand .brand-mark::after, .zl-brand .zl-brand-name { animation:none !important; }
  .zl-brand .zl-brand-name { -webkit-text-fill-color:#fff; background:none; color:#fff; }
}


/* ---------- big highlighted counts next to section titles (e.g. "31 Pending", "13 Paid") ---------- */
body .tri-app:has(.shell) .section-title.has-count { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; }
body .tri-app:has(.shell) .count-pill { display:inline-flex; align-items:baseline; gap:7px; padding:6px 16px 8px; border-radius:14px;
  font-size:.95rem; font-weight:700; letter-spacing:0; line-height:1; white-space:nowrap; }
body .tri-app:has(.shell) .count-pill b { font-size:2.3rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
body .tri-app:has(.shell) .count-pill.count-amber { background:rgba(249,178,29,.20); color:#8A5A00; border:1px solid rgba(249,178,29,.55); }
body .tri-app:has(.shell) .count-pill.count-green { background:rgba(8,153,73,.12); color:#067A3A; border:1px solid rgba(8,153,73,.35); }
@media (max-width:600px) {
  body .tri-app:has(.shell) .count-pill b { font-size:1.9rem; }
  body .tri-app:has(.shell) .count-pill { padding:5px 14px 7px; }
}


/* ---------- admin password pop-up (Edit / Delete verification) ---------- */
.pw-modal-back { position:fixed; inset:0; z-index:200; background:rgba(16,24,40,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.pw-modal { width:100%; max-width:380px; background:#fff; border-radius:16px; padding:22px; box-shadow:0 24px 60px -20px rgba(16,24,40,.6); font-family:'Inter',system-ui,sans-serif; color:#1F2A37; }
.pw-title { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.pw-sub { font-size:.85rem; color:#667085; margin-bottom:14px; }
.pw-input { width:100%; box-sizing:border-box; padding:12px 14px; font-size:1rem; border:1px solid #D0D5DD; border-radius:10px; background:#fff; color:#1F2A37; }
.pw-input:focus { outline:2px solid #226DB4; outline-offset:1px; }
.pw-err { min-height:1.2em; margin:8px 2px 0; font-size:.82rem; color:#C21F21; }
.pw-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }

/* Bold every KPI box title — admin & owner, desktop & mobile */
body .kpi-label,
body .tri-app:has(.shell) .kpi-label,
body .tri-app:has(.shell) .card .kpi-label { font-weight:700 !important; }
body .tri-app:has(.shell) .card.fund-hero .kpi-label { color:#fff; }

/* ---------- stylish KPI box titles: tinted pill strip + coloured accent bar (tone follows the icon) ---------- */
body .tri-app:has(.shell) .card:not(.fund-hero) .kpi-label {
  display:flex; align-items:center; gap:10px; min-width:0; box-sizing:border-box;
  padding:7px 12px 7px 8px; margin-bottom:14px; border-radius:12px;
  border-left:4px solid #226DB4; color:#1B4F82; letter-spacing:.01em;
  background:linear-gradient(90deg, rgba(34,109,180,.14) 0%, rgba(34,109,180,.04) 100%); }
body .tri-app:has(.shell) .card:not(.fund-hero) .kpi-label:has(.kpi-chip.tone-teal) {
  border-left-color:#0AA553; color:#067A3A; background:linear-gradient(90deg, rgba(10,165,83,.15) 0%, rgba(10,165,83,.04) 100%); }
body .tri-app:has(.shell) .card:not(.fund-hero) .kpi-label:has(.kpi-chip.tone-coral) {
  border-left-color:#E5484D; color:#B42318; background:linear-gradient(90deg, rgba(229,72,77,.14) 0%, rgba(229,72,77,.04) 100%); }
body .tri-app:has(.shell) .card:not(.fund-hero) .kpi-label:has(.kpi-chip:not(.tone-teal):not(.tone-coral):not(.tone-sky)) {
  border-left-color:#F79009; color:#B54708; background:linear-gradient(90deg, rgba(247,144,9,.17) 0%, rgba(247,144,9,.05) 100%); }
/* orange fund card: frosted white strip */
body .tri-app:has(.shell) .card.fund-hero .kpi-label {
  padding:7px 12px 7px 8px; border-radius:12px; border-left:4px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.18); }
/* mobile: tighter strip, long titles wrap instead of overflowing */
@media (max-width:720px) {
  body .tri-app:has(.shell) .card .kpi-label { padding:6px 9px 6px 6px; gap:8px; margin-bottom:10px; border-radius:10px; border-left-width:3px; }
  body .tri-app:has(.shell) .card .kpi-label { overflow-wrap:anywhere; }
}

/* ---------- "Total current fund" hero card: premium glass + pattern design (admin & owner, desktop & mobile) ---------- */
body .tri-app:has(.shell) .card.fund-hero {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='90' viewBox='0 0 420 90' preserveAspectRatio='none'%3E%3Cpath d='M0 55 C70 20 140 90 210 55 S350 20 420 50 V90 H0Z' fill='%23ffffff' fill-opacity='.13'/%3E%3Cpath d='M0 72 C80 45 150 98 230 70 S360 48 420 68 V90 H0Z' fill='%23ffffff' fill-opacity='.10'/%3E%3C/svg%3E") bottom/100% 64px no-repeat,
    radial-gradient(rgba(255,255,255,.16) 1.2px, transparent 1.6px) 0 0/16px 16px,
    linear-gradient(135deg,#FFAE4D 0%,#F47F16 48%,#E2600A 100%) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:0 18px 34px -14px rgba(226,96,10,.7), 0 2px 6px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.55) !important; }
/* decorative rings */
body .tri-app:has(.shell) .card.fund-hero::after {
  right:-34px; top:-34px; width:128px; height:128px; background:rgba(255,255,255,.12);
  border:2px solid rgba(255,255,255,.35); box-shadow:0 0 0 14px rgba(255,255,255,.07); }
body .tri-app:has(.shell) .card.fund-hero::before {
  right:22px; bottom:-46px; width:96px; height:96px; background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.28); }
/* title: frosted pill */
body .tri-app:has(.shell) .card.fund-hero .kpi-label {
  display:inline-flex; max-width:100%; box-sizing:border-box; border-left:0; padding:6px 14px 6px 6px; margin-bottom:12px;
  border-radius:999px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4);
  box-shadow:0 4px 10px -4px rgba(150,60,0,.35); letter-spacing:.02em; text-shadow:0 1px 2px rgba(150,60,0,.25); }
body .tri-app:has(.shell) .card.fund-hero .kpi-chip { background:#fff; color:#E2600A; box-shadow:0 3px 8px -2px rgba(150,60,0,.4); }
/* amount: crisp with soft depth */
body .tri-app:has(.shell) .card.fund-hero .kpi-num { text-shadow:0 3px 14px rgba(150,60,0,.35); }
/* caption: glass chip with a divider feel */
body .tri-app:has(.shell) .card.fund-hero .kpi-sub {
  display:inline-block; max-width:100%; box-sizing:border-box; padding:5px 12px; margin-top:12px; border-radius:999px;
  background:rgba(120,45,0,.18); border:1px solid rgba(255,255,255,.22); color:#fff; font-weight:500; }
@media (max-width:720px) {
  body .tri-app:has(.shell) .card.fund-hero { background-size:auto, 100% 48px, 14px 14px, auto !important; }
  body .tri-app:has(.shell) .card.fund-hero .kpi-label { padding:5px 12px 5px 5px; }
  body .tri-app:has(.shell) .card.fund-hero .kpi-sub { padding:4px 10px; font-size:.74rem; margin-top:10px; }
  body .tri-app:has(.shell) .card.fund-hero::after { right:-40px; top:-40px; width:100px; height:100px; box-shadow:0 0 0 10px rgba(255,255,255,.07); }
}

/* ---------- fund hero card: Zoho theme BLUE (design kept) ---------- */
body .tri-app:has(.shell) .card.fund-hero {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='90' viewBox='0 0 420 90' preserveAspectRatio='none'%3E%3Cpath d='M0 55 C70 20 140 90 210 55 S350 20 420 50 V90 H0Z' fill='%23ffffff' fill-opacity='.13'/%3E%3Cpath d='M0 72 C80 45 150 98 230 70 S360 48 420 68 V90 H0Z' fill='%23ffffff' fill-opacity='.10'/%3E%3C/svg%3E") bottom/100% 64px no-repeat,
    radial-gradient(rgba(255,255,255,.14) 1.2px, transparent 1.6px) 0 0/16px 16px,
    linear-gradient(135deg,#3A86D0 0%,#226DB4 52%,#1A5796 100%) !important;
  border:1px solid rgba(255,255,255,.3) !important;
  box-shadow:0 18px 34px -14px rgba(34,109,180,.7), 0 2px 6px rgba(16,24,40,.10), inset 0 1px 0 rgba(255,255,255,.45) !important; }
body .tri-app:has(.shell) .card.fund-hero .kpi-label { box-shadow:0 4px 10px -4px rgba(10,40,80,.35); text-shadow:0 1px 2px rgba(10,40,80,.25); }
body .tri-app:has(.shell) .card.fund-hero .kpi-chip { color:#226DB4; box-shadow:0 3px 8px -2px rgba(10,40,80,.4); }
body .tri-app:has(.shell) .card.fund-hero .kpi-num { text-shadow:0 3px 14px rgba(10,40,80,.35); }
body .tri-app:has(.shell) .card.fund-hero .kpi-sub { background:rgba(10,40,80,.22); }
@media (max-width:720px) {
  body .tri-app:has(.shell) .card.fund-hero { background-size:auto, 100% 48px, 14px 14px, auto !important; }
}

/* ---------- Visitors feature removed: hide any leftover entry point (sidebar, mobile drawer, bottom bar) ---------- */
[data-tab="visitors"] { display:none !important; }

/* =====================================================================
   DESKTOP REDESIGN of the main content area (> 900px) — all admin & owner menus
   top bar · page background · section titles · count pills · cards · tables
   ===================================================================== */
@media (min-width: 901px) {
  /* page canvas: soft blue glow */
  body .tri-app:has(.shell) .main, body .tri-app:has(.shell) .content {
    background:radial-gradient(900px 340px at 85% -80px, rgba(34,109,180,.09), transparent 70%); }

  /* top bar: clean white, Zoho 4-colour underline, accent bar before the page title */
  body .tri-app:has(.shell) .topbar { padding:16px 32px 17px; box-shadow:0 1px 0 var(--line), 0 8px 20px -16px rgba(16,24,40,.35); }
  body .tri-app:has(.shell) .topbar::after { display:block; content:""; position:absolute; left:0; right:0; bottom:0; height:3px; pointer-events:none;
    background:linear-gradient(90deg,#E42527 0 25%,#089949 25% 50%,#226DB4 50% 75%,#F9B21D 75% 100%); opacity:.9; }
  body .tri-app:has(.shell) .topbar h2 { position:relative; padding-left:14px; font-size:1.38rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; }
  body .tri-app:has(.shell) .topbar h2::before { content:""; position:absolute; left:0; top:3px; bottom:3px; width:5px; border-radius:4px;
    background:linear-gradient(180deg,#3A86D0,#1A5796); }
  body .tri-app:has(.shell) .topbar .meta { padding-left:14px; font-size:.8rem; letter-spacing:.01em; }
  body .tri-app:has(.shell) .topbar .badge-role { font-weight:700; padding:5px 14px; border-radius:999px; }

  /* section titles: accent bar + stronger weight */
  body .tri-app:has(.shell) .section-title { position:relative; padding-left:14px; font-size:1.12rem; font-weight:800; letter-spacing:-.015em; margin:30px 2px 14px; }
  body .tri-app:has(.shell) .section-title::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:5px; height:1.15em; border-radius:4px;
    background:linear-gradient(180deg,#3A86D0,#1A5796); }
  body .tri-app:has(.shell) .section-title.has-count::before { top:calc(50% - 1px); height:1.6em; }

  /* big count chips (31 Pending, 13 Paid …): glossy tinted badge */
  body .tri-app:has(.shell) .count-pill { padding:8px 20px 10px; border-radius:16px; box-shadow:0 8px 18px -10px rgba(16,24,40,.35), inset 0 1px 0 rgba(255,255,255,.7); }
  body .tri-app:has(.shell) .count-pill.count-amber { background:linear-gradient(180deg,#FFF4D6,#FDE6A8); }

  /* cards: rounder, soft depth, gentle lift on hover */
  body .tri-app:has(.shell) .card:not(:has(> table)) { border-radius:16px; border:1px solid #E6EBF2;
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 24px -16px rgba(16,24,40,.22); transition:transform .2s ease, box-shadow .2s ease; }
  body .tri-app:has(.shell) .card:not(:has(> table)):hover { transform:translateY(-2px);
    box-shadow:0 2px 4px rgba(16,24,40,.05), 0 18px 32px -16px rgba(34,109,180,.35); }

  /* tables: one rounded white panel, blue header band, airy rows with hover accent */
  body .tri-app:has(.shell) .card:has(> table) { background:#fff; border:1px solid #E6EBF2; border-radius:16px; padding:0; overflow:auto;
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 14px 28px -18px rgba(16,24,40,.28); }
  body .tri-app:has(.shell) .card:has(> table):hover { transform:none; }
  body .tri-app:has(.shell) table { border-collapse:separate; border-spacing:0; width:100%; }
  body .tri-app:has(.shell) thead th { background:linear-gradient(180deg,#F1F7FD,#E6F0FA); color:#1A5796; font-size:.72rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.07em; padding:15px 18px; border-bottom:1px solid #D5E4F3; white-space:nowrap; }
  body .tri-app:has(.shell) tbody tr { background:#fff; box-shadow:none; transition:background .15s ease; }
  body .tri-app:has(.shell) tbody tr:nth-child(even) { background:#FAFCFE; }
  body .tri-app:has(.shell) tbody td { padding:15px 18px; border-bottom:1px solid #EEF2F7; color:#344054; vertical-align:middle; }
  body .tri-app:has(.shell) tbody tr:last-child td { border-bottom:none; }
  body .tri-app:has(.shell) tbody td:first-child { font-weight:700; color:#101828; }
  body .tri-app:has(.shell) tbody tr:hover { background:#EEF5FD; }
  body .tri-app:has(.shell) tbody tr:hover td:first-child { box-shadow:inset 4px 0 0 #226DB4; }
  body .tri-app:has(.shell) tbody tr:has(td.empty):hover { background:transparent; }
  body .tri-app:has(.shell) tbody td.empty { text-align:center; color:#98A2B3; padding:34px 18px; }

  /* pills & small buttons inside tables */
  body .tri-app:has(.shell) td .tag { padding:5px 12px; border-radius:999px; font-size:.76rem; }
  body .tri-app:has(.shell) td .btn-sm, body .tri-app:has(.shell) td .btn { border-radius:9px; box-shadow:0 4px 10px -6px rgba(34,109,180,.6); transition:transform .15s ease, box-shadow .15s ease; }
  body .tri-app:has(.shell) td .btn-sm:hover, body .tri-app:has(.shell) td .btn:hover { transform:translateY(-1px); box-shadow:0 8px 14px -8px rgba(34,109,180,.7); }

  /* slim modern page scrollbar */
  html:has(.shell) ::-webkit-scrollbar { width:10px; height:10px; }
  html:has(.shell) ::-webkit-scrollbar-thumb { background:#C5D3E3; border-radius:10px; border:2px solid #F4F6F9; }
  html:has(.shell) ::-webkit-scrollbar-thumb:hover { background:#9FB6D0; }
}

/* =====================================================================
   MOBILE REDESIGN of the main content area (<= 900px) — same look as desktop,
   all admin & owner menus: page canvas · titles · count chips · cards · table cards
   ===================================================================== */
@media (max-width: 900px) {
  /* canvas */
  body .tri-app:has(.shell) .content { background:radial-gradient(520px 240px at 90% -40px, rgba(34,109,180,.10), transparent 70%); }

  /* top bar: bolder title, soft depth, 4-colour underline already shown */
  body .tri-app:has(.shell) .topbar h2 { font-weight:800; letter-spacing:-.02em; }
  body .tri-app:has(.shell) .topbar .meta { font-size:.74rem; letter-spacing:.01em; }
  body .tri-app:has(.shell) .topbar .badge-role { font-weight:700; border-radius:999px; }

  /* section titles with accent bar */
  body .tri-app:has(.shell) .section-title { position:relative; padding-left:12px; font-size:1.05rem; font-weight:800; letter-spacing:-.015em; margin:24px 2px 12px; }
  body .tri-app:has(.shell) .section-title::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:1.1em; border-radius:4px;
    background:linear-gradient(180deg,#3A86D0,#1A5796); }
  body .tri-app:has(.shell) .section-title.has-count::before { height:1.5em; }

  /* count chips (31 Pending …) */
  body .tri-app:has(.shell) .count-pill { padding:6px 16px 8px; border-radius:14px; box-shadow:0 8px 16px -10px rgba(16,24,40,.35), inset 0 1px 0 rgba(255,255,255,.7); }
  body .tri-app:has(.shell) .count-pill.count-amber { background:linear-gradient(180deg,#FFF4D6,#FDE6A8); }

  /* cards */
  body .tri-app:has(.shell) .card:not(:has(> table)) { border-radius:16px; border:1px solid #E6EBF2; padding:16px;
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 22px -16px rgba(16,24,40,.25); transition:transform .15s ease; }
  body .tri-app:has(.shell) .card:not(:has(> table)):active { transform:scale(.985); }

  /* table rows -> neat cards: blue left bar, tinted title band, label/value lines, tinted action footer */
  body .tri-app:has(.shell) tbody tr { position:relative; overflow:hidden; background:#fff; border:1px solid #E6EBF2; border-left:4px solid #226DB4;
    border-radius:16px; padding:0 16px 2px; margin-bottom:14px;
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 12px 22px -16px rgba(16,24,40,.28); }
  body .tri-app:has(.shell) tbody tr > td[data-label]:first-child { margin:0 -16px 2px; padding:13px 16px; font-size:1.05rem; font-weight:800; color:#1A5796;
    background:linear-gradient(90deg,#EAF3FC,#F6FAFE); border-bottom:1px solid #D9E7F5; justify-content:flex-start; text-align:left; }
  body .tri-app:has(.shell) td[data-label] { padding:11px 0; border-bottom:1px solid #EEF2F7; color:#101828; font-weight:600; font-size:.92rem; }
  body .tri-app:has(.shell) td[data-label]::before { color:#667085; font-weight:600; font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; }
  body .tri-app:has(.shell) tbody tr > td:last-child { border-bottom:none; }
  body .tri-app:has(.shell) td[data-label=""] { margin:4px -16px 0; padding:12px 16px; background:#F6F9FD; border-top:1px solid #E6EDF6; border-bottom:none; gap:8px; }
  body .tri-app:has(.shell) td .tag { padding:5px 12px; border-radius:999px; font-size:.76rem; }
  body .tri-app:has(.shell) td .btn-sm, body .tri-app:has(.shell) td .btn { min-height:40px; border-radius:10px; box-shadow:0 4px 10px -6px rgba(34,109,180,.6); }
  body .tri-app:has(.shell) tbody tr:has(td.empty) { border:none; border-left:none; overflow:visible; padding:0; box-shadow:none; background:transparent; }
  body .tri-app:has(.shell) tbody td.empty { color:#98A2B3; padding:26px 0; }
  body .tri-app:has(.shell) tfoot tr { border-left:4px solid #226DB4; border-radius:16px; }
}

/* =====================================================================
   LOGIN BOX redesign — same design language as the app (desktop + mobile)
   4-colour top line · accent-bar title · rounded fields · glossy blue button
   ===================================================================== */
body .tri-app:has(.login-wrap) .zl .zl-card, .login-wrap.zl .zl-card { position:relative; overflow:hidden; border-radius:20px; border:1px solid #E6EBF2;
  background:linear-gradient(180deg,#FFFFFF 0%,#F8FBFE 100%);
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 26px 50px -24px rgba(26,87,150,.45), 0 0 0 6px rgba(34,109,180,.05); }
/* Zoho 4-colour line across the top of the box */
.login-wrap.zl .zl-card::before { content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg,#E42527 0 25%,#089949 25% 50%,#226DB4 50% 75%,#F9B21D 75% 100%); }
/* soft blue glow in the corner */
.login-wrap.zl .zl-card::after { content:""; position:absolute; right:-70px; top:-70px; width:190px; height:190px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(34,109,180,.14), transparent 70%); }
.login-wrap.zl .zl-card > * { position:relative; z-index:1; }
/* brand badge (desktop) */
.login-wrap.zl .zl-card-brand { display:flex; align-items:center; justify-content:center; width:46px; height:46px; margin:0 0 16px; border-radius:14px;
  background:linear-gradient(135deg,#3A86D0,#1A5796); color:#fff; box-shadow:0 10px 18px -8px rgba(34,109,180,.8), inset 0 1px 0 rgba(255,255,255,.35); }
.login-wrap.zl .zl-card-brand .brand-mark { background:transparent !important; box-shadow:none !important; color:#fff; }
/* title with accent bar */
.login-wrap.zl .zl-title { position:relative; padding-left:14px; font-size:1.6rem; font-weight:800; letter-spacing:-.025em; }
.login-wrap.zl .zl-title::before { content:""; position:absolute; left:0; top:4px; bottom:4px; width:5px; border-radius:4px; background:linear-gradient(180deg,#3A86D0,#1A5796); }
.login-wrap.zl .zl-sub { padding-left:14px; }
/* labels + fields */
.login-wrap.zl .zl-label { font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#1A5796; }
body .tri-app:has(.login-wrap) .zl .login-form input { background:#F6F9FD; border:1.5px solid #D5E2F0; border-radius:12px; transition:border-color .15s, box-shadow .15s, background .15s; }
body .tri-app:has(.login-wrap) .zl .login-form input:focus { background:#fff; border-color:#226DB4; box-shadow:0 0 0 4px rgba(34,109,180,.15); }
/* button: glossy blue gradient */
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass { border-radius:12px; border:1px solid #1A5796; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(180deg,#3A86D0 0%,#226DB4 55%,#1D5F9F 100%);
  box-shadow:0 12px 20px -10px rgba(34,109,180,.9), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass:hover { background:linear-gradient(180deg,#4A93DB 0%,#2A78C4 55%,#226DB4 100%); transform:translateY(-1px); box-shadow:0 16px 24px -12px rgba(34,109,180,.95), inset 0 1px 0 rgba(255,255,255,.4); }
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass:active { transform:scale(.99); }
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass:disabled { filter:grayscale(.2) opacity(.8); }
.login-wrap.zl .zl-msg { border-radius:12px; }
/* mobile: no brand badge (hero already shows it), tighter title */
@media (max-width: 900px) {
  .login-wrap.zl .zl-card-brand { display:none; }
  .login-wrap.zl .zl-card { border-radius:18px; }
  .login-wrap.zl .zl-title { font-size:1.4rem; padding-left:12px; }
  .login-wrap.zl .zl-sub { padding-left:12px; }
}

/* longer pill text ("Welcome to Trimurti Heights"): keep it on one line and inside the screen on small phones */
.login-wrap.zl .zl-brand { max-width:100%; box-sizing:border-box; }
.login-wrap.zl .zl-brand .zl-brand-name { white-space:nowrap; }
@media (max-width: 420px) { .login-wrap.zl .zl-brand .zl-brand-name { font-size:.9rem !important; } .login-wrap.zl .zl-brand { padding-right:14px; } }

/* desktop: lift the brand pill to the very top so the building photo is fully visible */
@media (min-width: 901px) {
  .login-wrap.zl .zl-hero-inner { padding-top:12px !important; }
  .login-wrap.zl .zl-brand { padding:6px 18px 6px 6px; }
  .login-wrap.zl .zl-brand .brand-mark { width:34px; height:34px; }
  .login-wrap.zl .zl-brand .zl-brand-name { font-size:1rem !important; }
}

/* desktop: centre the "Welcome to Trimurti Heights" pill exactly on the hero's centre line (same axis as the glass card below) */
@media (min-width: 901px) {
  .login-wrap.zl .zl-brand { align-self:center !important; justify-content:center; margin-left:auto; margin-right:auto; }
}

/* ---- login pill centred on mobile too ---- */
@media (max-width: 900px) {
  .login-wrap.zl .zl-brand { align-self:center !important; justify-content:center; margin-left:auto; margin-right:auto; }
}

/* ---- sound button: small, fixed at the BOTTOM on both views (login page included) ---- */
body .amb-btn { width:36px !important; height:36px !important; box-shadow:0 6px 14px -6px rgba(0,0,0,.5) !important; }
body .amb-btn svg { width:18px !important; height:18px !important; }
body:has(.login-wrap) .amb-btn { top:auto !important; bottom:calc(14px + env(safe-area-inset-bottom)) !important; right:14px !important; }
@media (max-width: 900px) {
  body:has(.login-wrap) .amb-btn { bottom:calc(12px + env(safe-area-inset-bottom)) !important; right:12px !important; }
}


/* =====================================================================
   LOGIN HERO — DESKTOP "AURORA GLASS" UPGRADE (>= 901px only)
   Targets: the "Welcome to Trimurti Heights" pill + the glass card
   (headline + feature tiles). Mobile is untouched.
   ===================================================================== */
@property --zB { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes zlSpinB { to { --zB:360deg; } }
@keyframes zlPillPop { 0% { opacity:0; transform:translateY(-26px) scale(.82); filter:blur(8px); }
                       60% { opacity:1; transform:translateY(3px) scale(1.03); filter:blur(0); }
                       100% { opacity:1; transform:none; filter:blur(0); } }
@keyframes zlAurora { 0% { transform:translate3d(-12%,-8%,0) scale(1); } 50% { transform:translate3d(10%,6%,0) scale(1.25); } 100% { transform:translate3d(-12%,-8%,0) scale(1); } }
@keyframes zlAurora2 { 0% { transform:translate3d(14%,10%,0) scale(1.2); } 50% { transform:translate3d(-10%,-6%,0) scale(.95); } 100% { transform:translate3d(14%,10%,0) scale(1.2); } }
@keyframes zlCardIn { 0% { opacity:0; transform:perspective(900px) translateY(46px) rotateX(10deg) scale(.96); filter:blur(10px); }
                      100% { opacity:1; transform:perspective(900px) translateY(0) rotateX(0) scale(1); filter:blur(0); } }
@keyframes zlLine { from { transform:translateY(110%) rotate(3deg); opacity:0; } to { transform:none; opacity:1; } }
@keyframes zlHeadSweep { 0%,55% { background-position:-120% 0; } 100% { background-position:220% 0; } }
@keyframes zlTile { from { opacity:0; transform:translateY(18px) scale(.94); filter:blur(6px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes zlIcFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
@keyframes zlLive { 0% { box-shadow:0 0 0 0 rgba(74,222,128,.65); } 100% { box-shadow:0 0 0 9px rgba(74,222,128,0); } }
@keyframes zlEdge { 0%,100% { transform:scaleX(.25); opacity:.5; } 50% { transform:scaleX(1); opacity:1; } }

@media (min-width: 901px) {

  /* ---------- 1. Welcome pill ---------- */
  .login-wrap.zl .zl-brand {
    background:
      radial-gradient(120% 220% at 0% 0%, rgba(76,155,224,.55), transparent 55%),
      radial-gradient(120% 220% at 100% 100%, rgba(249,178,29,.28), transparent 55%),
      linear-gradient(135deg, rgba(10,26,52,.82), rgba(24,62,112,.70));
    background-size:160% 160%, 160% 160%, 100% 100%;
    border-color:rgba(255,255,255,.16);
    padding:6px 20px 6px 6px; gap:12px !important;
    box-shadow:0 14px 34px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.28);
    cursor:default; transition:transform .4s cubic-bezier(.22,.8,.32,1), box-shadow .4s;
    animation:zlPillPop 1s cubic-bezier(.2,.9,.3,1.15) both, zlFloat 6s ease-in-out 1.2s infinite, zlPillGlow 4s ease-in-out 1.2s infinite; }
  .login-wrap.zl .zl-brand:hover { transform:translateY(-3px) scale(1.035);
    box-shadow:0 20px 40px -14px rgba(0,0,0,.65), 0 0 28px 2px rgba(255,214,120,.30), inset 0 1px 0 rgba(255,255,255,.35); }
  /* icon badge: spinning conic ring instead of the plain halo */
  .login-wrap.zl .zl-brand .brand-mark { width:36px; height:36px; }
  .login-wrap.zl .zl-brand .brand-mark::after { inset:-3px; border:0; padding:2px;
    background:conic-gradient(from var(--zB), transparent 0 55%, #ffd98a 78%, #fff 86%, transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite:exclude;
    animation:zlSpinB 3s linear infinite; opacity:1; }
  /* live "online" dot after the text */
  .login-wrap.zl .zl-brand .zl-brand-name { padding-right:20px; }
  .login-wrap.zl .zl-brand .zl-brand-name::after { content:""; position:absolute; right:0; top:50%; width:8px; height:8px; margin-top:-4px;
    border-radius:50%; background:#4ade80; -webkit-text-fill-color:initial; animation:zlLive 1.8s ease-out infinite; }

  /* ---------- 2. Glass card ---------- */
  .zl-hero-copy { --mx:50%; --my:50%; --rx:0deg; --ry:0deg; position:relative; isolation:isolate; overflow:hidden;
    background:linear-gradient(160deg, rgba(10,26,52,.74), rgba(6,16,34,.82));
    border:0; border-radius:22px; padding:24px 26px 24px;
    box-shadow:0 30px 60px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.18);
    transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
    transition:transform .25s ease-out, box-shadow .5s;
    animation:zlCardIn 1s .2s cubic-bezier(.2,.9,.3,1) both; will-change:transform; }
  .zl-hero-copy.is-hot { box-shadow:0 36px 70px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.14), 0 0 40px -6px rgba(76,155,224,.35), inset 0 1px 0 rgba(255,255,255,.22); }
  .zl-hero-copy > * { position:relative; z-index:3; }
  /* rotating light along the card border */
  .zl-hero-copy::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:2; pointer-events:none;
    background:conic-gradient(from var(--zB), rgba(255,255,255,0) 0 62%, rgba(76,155,224,.9) 76%, rgba(255,214,120,.95) 86%, #fff 90%, rgba(255,255,255,0) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite:exclude;
    animation:zlSpinB 7s linear infinite; }
  /* aurora blobs + cursor spotlight (one layered pseudo element) */
  .zl-hero-copy::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
    background:
      radial-gradient(260px circle at var(--mx) var(--my), rgba(140,200,255,.20), transparent 62%),
      radial-gradient(60% 80% at 8% 0%, rgba(58,134,208,.34), transparent 70%),
      radial-gradient(50% 70% at 100% 100%, rgba(249,178,29,.16), transparent 70%);
    opacity:.9; transition:opacity .4s; }
  .zl-hero-copy:not(.is-hot)::after { opacity:.7; }

  /* headline: lines slide up out of a mask, then a soft light passes over it */
  .zl-headline { font-weight:800; letter-spacing:-.03em; line-height:1.14; }
  .zl-ln { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
  .zl-ln > span { display:inline-block;
    background:linear-gradient(100deg,#fff 0 42%,#cfe6ff 50%,#fff 58% 100%); background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    animation:zlLine .85s cubic-bezier(.2,.9,.3,1) both, zlHeadSweep 6s ease-in-out 2s infinite; }
  .zl-headline .zl-ln:nth-of-type(1) > span { animation-delay:.55s, 2s; }
  .zl-headline .zl-ln:nth-of-type(2) > span { animation-delay:.7s, 2.4s; }

  /* feature tiles */
  .zl-features { gap:10px; }
  .zl-features li { --tx:50%; --ty:50%; position:relative; padding:9px 12px 9px 9px; border-radius:14px; overflow:hidden;
    background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
    transition:transform .35s cubic-bezier(.22,.8,.32,1), background .3s, box-shadow .3s;
    animation:zlTile .7s cubic-bezier(.2,.9,.3,1) both; }
  .zl-features li::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
    background:radial-gradient(140px circle at var(--tx) var(--ty), rgba(255,255,255,.18), transparent 70%); }
  .zl-features li:hover { transform:translateY(-3px); background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 24px -14px rgba(0,0,0,.7); }
  .zl-features li:hover::before { opacity:1; }
  .zl-features li > * { position:relative; }
  .zl-features li:nth-child(1) { animation-delay:.85s; } .zl-features li:nth-child(2) { animation-delay:.97s; }
  .zl-features li:nth-child(3) { animation-delay:1.09s; } .zl-features li:nth-child(4) { animation-delay:1.21s; }
  .zl-feat-ic { background:linear-gradient(145deg, rgba(255,255,255,.26), rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
    animation:zlIcFloat 4s ease-in-out infinite; transition:background .3s, color .3s, transform .3s; }
  .zl-features li:nth-child(2) .zl-feat-ic { animation-delay:-1.3s; } .zl-features li:nth-child(3) .zl-feat-ic { animation-delay:-2.6s; }
  .zl-features li:hover .zl-feat-ic { background:linear-gradient(145deg,#4C9BE0,#226DB4); color:#fff; transform:scale(1.1) rotate(-6deg); animation-play-state:paused; }

  /* breathing light line along the bottom edge of the card */
  .zl-hero-copy .zl-features::after { content:""; position:absolute; left:6%; right:6%; bottom:-14px; height:2px; border-radius:2px; z-index:3;
    background:linear-gradient(90deg,transparent,#4C9BE0,#F9B21D,#4C9BE0,transparent); transform-origin:center; animation:zlEdge 4.5s ease-in-out infinite; }
  .zl-features { position:relative; padding-bottom:4px; }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .login-wrap.zl .zl-brand, .login-wrap.zl .zl-brand .brand-mark::after, .login-wrap.zl .zl-brand .zl-brand-name::after,
  .zl-hero-copy, .zl-hero-copy::before, .zl-ln > span, .zl-features li, .zl-feat-ic, .zl-hero-copy .zl-features::after { animation:none !important; }
  .zl-hero-copy { transform:none !important; }
  .zl-ln > span { -webkit-text-fill-color:#fff; background:none; color:#fff; }
}


/* =====================================================================
   DASHBOARD — "Society fund" banner heading + animated "Total current fund" card
   (admin + flat owner dashboards, desktop + mobile)
   ===================================================================== */
@keyframes fbShine { 0%,60% { transform:translateX(-120%) skewX(-18deg); } 100% { transform:translateX(420%) skewX(-18deg); } }
@keyframes fbPop { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes fxWaveA { to { background-position:400px 0; } }
@keyframes fxWaveB { to { background-position:-400px 0; } }
@keyframes fxOrb1 { 0%,100% { transform:translate3d(0,0,0) scale(1); } 50% { transform:translate3d(-36px,26px,0) scale(1.25); } }
@keyframes fxOrb2 { 0%,100% { transform:translate3d(0,0,0) scale(1.1); } 50% { transform:translate3d(30px,-22px,0) scale(.9); } }
@keyframes fxOrb3 { 0%,100% { transform:translate3d(0,0,0); opacity:.55; } 50% { transform:translate3d(-20px,-30px,0); opacity:.95; } }
@keyframes fxSheen { 0%,55% { transform:translateX(-140%) skewX(-20deg); } 100% { transform:translateX(480%) skewX(-20deg); } }
@keyframes fxRing { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.12); opacity:.7; } }

/* ---- heading: bigger, on a soft blue banner ---- */
body .tri-app:has(.shell) .section-title.fund-banner {
  position:relative; overflow:hidden; display:flex; align-items:center; gap:14px;
  margin:4px 0 12px; padding:16px 24px 16px 26px; border-radius:18px;
  font-size:1.7rem; font-weight:800; letter-spacing:-.025em; line-height:1.15; color:#12386A;
  background:linear-gradient(100deg, rgba(34,109,180,.18) 0%, rgba(58,134,208,.08) 55%, rgba(249,178,29,.14) 100%), #fff;
  border:1px solid rgba(34,109,180,.20);
  box-shadow:0 14px 28px -18px rgba(34,109,180,.65), inset 0 1px 0 rgba(255,255,255,.9);
  animation:fbPop .6s cubic-bezier(.22,.8,.32,1) both; }
body .tri-app:has(.shell) .section-title.fund-banner::before {
  left:0; top:0; bottom:0; width:7px; height:auto; transform:none; border-radius:0;
  background:linear-gradient(180deg,#4C9BE0,#1A5796 60%,#F9B21D); }
body .tri-app:has(.shell) .section-title.fund-banner::after {
  content:""; position:absolute; top:0; bottom:0; left:0; width:22%; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation:fbShine 7s ease-in-out 1.2s infinite; }
body .tri-app:has(.shell) .section-title.fund-banner > * { position:relative; z-index:1; }
.fund-banner .fb-ic { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; flex-shrink:0; border-radius:14px; color:#fff;
  background:linear-gradient(145deg,#3A86D0,#1A5796); box-shadow:0 8px 16px -8px rgba(26,87,150,.8), inset 0 1px 0 rgba(255,255,255,.35); }
@media (max-width:720px) {
  body .tri-app:has(.shell) .section-title.fund-banner { font-size:1.35rem; padding:13px 16px 13px 20px; gap:12px; border-radius:16px; margin:2px 0 10px; }
  .fund-banner .fb-ic { width:40px; height:40px; border-radius:12px; }
}

/* ---- "Total current fund" card: living background (waves, drifting light, sheen) ---- */
body .tri-app:has(.shell) .card.fund-hero > .fund-fx { position:absolute !important; inset:0; z-index:0 !important; overflow:hidden; border-radius:inherit; pointer-events:none; }
.fund-fx i { position:absolute; display:block; }
.fund-fx .fx-orb { border-radius:50%; filter:blur(18px); will-change:transform; }
.fund-fx .o1 { width:190px; height:190px; right:-50px; top:-60px; background:radial-gradient(circle,rgba(255,214,120,.55),transparent 68%); animation:fxOrb1 9s ease-in-out infinite; }
.fund-fx .o2 { width:170px; height:170px; left:-50px; bottom:-60px; background:radial-gradient(circle,rgba(120,200,255,.60),transparent 68%); animation:fxOrb2 11s ease-in-out infinite; }
.fund-fx .o3 { width:110px; height:110px; left:42%; top:18%; background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%); animation:fxOrb3 8s ease-in-out infinite; }
.fund-fx .fx-wave { left:0; right:0; bottom:0; background-repeat:repeat-x; background-size:400px 100%; }
.fund-fx .w1 { height:46%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C50 6 100 54 200 30 S350 6 400 30 V60 H0Z' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E"); animation:fxWaveA 14s linear infinite; }
.fund-fx .w2 { height:36%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='60' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 36 C60 58 140 8 200 36 S340 58 400 36 V60 H0Z' fill='%23ffffff' fill-opacity='.11'/%3E%3C/svg%3E"); animation:fxWaveB 20s linear infinite; }
.fund-fx .fx-sheen { top:-10%; bottom:-10%; left:0; width:24%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent); animation:fxSheen 6.5s ease-in-out 1s infinite; }
body .tri-app:has(.shell) .card.fund-hero::after { animation:fxRing 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  body .tri-app:has(.shell) .section-title.fund-banner, body .tri-app:has(.shell) .section-title.fund-banner::after,
  .fund-fx i, body .tri-app:has(.shell) .card.fund-hero::after { animation:none !important; }
}


/* =====================================================================
   NOTICE BOARD — cork board in a wooden frame, pinned paper notes (admin + residents, desktop + mobile)
   ===================================================================== */
@keyframes nbDrop { 0% { opacity:0; transform:translateY(-90px) rotate(calc(var(--r) + 9deg)) scale(.96); }
                    55% { opacity:1; transform:translateY(8px) rotate(calc(var(--r) - 2.5deg)); }
                    75% { transform:translateY(-3px) rotate(calc(var(--r) + 1deg)); }
                    100% { opacity:1; transform:translateY(0) rotate(var(--r)); } }
@keyframes nbSway { 0%,100% { transform:rotate(calc(var(--r) - .7deg)); } 50% { transform:rotate(calc(var(--r) + .7deg)); } }
@keyframes nbPin { 0% { transform:translateX(-50%) scale(0); } 70% { transform:translateX(-50%) scale(1.35); } 100% { transform:translateX(-50%) scale(1); } }
@keyframes nbBoard { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }

.nb-board { position:relative; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:34px 28px; align-items:start;
  min-height:440px; padding:38px 30px 34px; margin-top:6px; border:16px solid transparent; border-radius:22px;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(255,235,190,.35), transparent 60%) padding-box,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28  0 0 0 0 .15  0 0 0 0 .05  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") padding-box,
    linear-gradient(#C99C63,#C99C63) padding-box,
    linear-gradient(135deg,#8A5A2B 0%,#B07A3F 22%,#7A4A20 48%,#A56E36 74%,#6E421B 100%) border-box;
  box-shadow:inset 0 6px 18px rgba(60,30,5,.45), inset 0 -2px 8px rgba(60,30,5,.25), 0 22px 40px -22px rgba(60,30,5,.7);
  animation:nbBoard .6s ease-out both; }

.nb-note { --paper:#FFF4B8; position:relative; padding:30px 22px 16px; border-radius:3px 3px 14px 3px; background:var(--paper); color:#2B2A33;
  box-shadow:0 1px 1px rgba(60,30,5,.25), 0 14px 22px -10px rgba(40,20,0,.55);
  transform-origin:50% 8px; transform:rotate(var(--r));
  animation:nbDrop .95s cubic-bezier(.3,.9,.4,1) calc(var(--i) * .11s + .25s) both;
  transition:transform .35s cubic-bezier(.22,.8,.32,1), box-shadow .35s; }
.nb-note.c0 { --paper:#FFF4B8; } .nb-note.c1 { --paper:#D9ECFF; } .nb-note.c2 { --paper:#FFE0E6; } .nb-note.c3 { --paper:#DCF4DD; }
.nb-note.pinned { --paper:#FFE9A0; }
.nb-note::after { content:""; position:absolute; right:0; bottom:0; width:26px; height:26px; border-radius:0 0 14px 0; pointer-events:none;
  background:linear-gradient(135deg, rgba(0,0,0,0) 50%, rgba(60,30,5,.22) 51%, rgba(255,255,255,.55) 100%); }
.nb-note:hover { animation:none; transform:rotate(0) translateY(-6px) scale(1.03); z-index:3;
  box-shadow:0 2px 2px rgba(60,30,5,.25), 0 28px 34px -14px rgba(40,20,0,.65); }
.nb-note.pinned:not(:hover) { animation:nbDrop .95s cubic-bezier(.3,.9,.4,1) calc(var(--i) * .11s + .25s) both, nbSway 6s ease-in-out 2s infinite; }

/* push pin */
.nb-pin { position:absolute; left:50%; top:-9px; width:20px; height:20px; border-radius:50%; z-index:2; transform:translateX(-50%);
  background:radial-gradient(circle at 35% 30%, #fff9 0 12%, transparent 13%), radial-gradient(circle at 40% 35%, var(--pc1), var(--pc2));
  box-shadow:0 5px 6px -1px rgba(30,15,0,.55), inset 0 -2px 3px rgba(0,0,0,.3);
  animation:nbPin .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .11s + .85s) both; --pc1:#FF6B6B; --pc2:#C81E1E; }
.nb-pin.p1 { --pc1:#5CB0FF; --pc2:#1C62B8; } .nb-pin.p2 { --pc1:#FFD25C; --pc2:#D48A0B; } .nb-pin.p3 { --pc1:#6FD98C; --pc2:#1F8A3F; }
/* tape + badge on pinned notices */
.nb-tape { position:absolute; left:50%; top:-12px; width:92px; height:26px; transform:translateX(-50%) rotate(-3deg); z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.35)); box-shadow:0 2px 4px rgba(0,0,0,.15);
  clip-path:polygon(0 8%,4% 0,8% 8%,12% 0,100% 0,100% 100%,12% 100%,8% 92%,4% 100%,0 92%); }
.nb-badge { position:absolute; right:12px; top:12px; display:inline-flex; align-items:center; gap:4px; padding:2px 9px 2px 7px; border-radius:999px;
  font-size:.7rem; font-weight:700; color:#8A2B0B; background:rgba(255,255,255,.7); border:1px solid rgba(138,43,11,.25); }

.nb-title { margin:6px 0 8px; font-family:'Kalam','Inter',system-ui,sans-serif; font-size:1.3rem; font-weight:700; line-height:1.3; letter-spacing:0; color:#1F1D2B; padding-right:0; }
.nb-note.pinned .nb-title { padding-top:12px; }
.nb-body { margin:0; font-family:'Kalam','Inter',system-ui,sans-serif; font-size:1.02rem; line-height:1.6; color:#3C3A47; white-space:pre-line; overflow-wrap:anywhere; }
.nb-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:16px; padding-top:10px; border-top:1.5px dashed rgba(60,40,10,.25); }
.nb-date { font-size:.74rem; font-weight:700; color:#6B5A3A; padding:3px 10px; border-radius:6px; border:1.5px solid rgba(107,90,58,.45); transform:rotate(-2deg); background:rgba(255,255,255,.35); }
.nb-actions { display:inline-flex; gap:6px; margin-right:18px; }
.nb-empty { grid-column:1 / -1; align-self:center; justify-self:center; padding:18px 26px; border-radius:6px; background:#FFF4B8; color:#5A4A1E;
  font-family:'Kalam','Inter',sans-serif; font-size:1.15rem; transform:rotate(-1.5deg); box-shadow:0 14px 22px -10px rgba(40,20,0,.55); }

@media (max-width:720px) {
  .nb-board { grid-template-columns:1fr; gap:30px; min-height:320px; padding:30px 14px 26px; border-width:11px; border-radius:18px; }
  .nb-title { font-size:1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .nb-board, .nb-note, .nb-note.pinned:not(:hover), .nb-pin { animation:none !important; } }


/* mobile only: drop the word "Total" from the stat-card titles (Total expenses / maintenance collected / billed) */
@media (max-width:900px) {
  .kpi-label .tw { display:none; }
  .kpi-label .tw-rest { display:inline-block; }
  .kpi-label .tw-rest::first-letter { text-transform:uppercase; }
}

/* ---- Notice board: send notice to a flat owner on WhatsApp ---- */
.nb-actions { flex-wrap:wrap; }
body .tri-app:has(.shell) .btn.nb-wa, .btn.nb-wa { background:#25D366; color:#fff; border:1px solid #1FB456; display:inline-flex; align-items:center; gap:5px; }
body .tri-app:has(.shell) .btn.nb-wa:hover, .btn.nb-wa:hover { background:#1FB456; color:#fff; }
.btn.nb-wa.sent { background:#E7F8EE; color:#1B7F43; border-color:#B7E6C9; }
.nb-share { max-width:440px; }
.nb-share-list { margin-top:12px; max-height:min(52vh,360px); overflow-y:auto; border:1px solid #EAECF0; border-radius:10px; }
.nb-share-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid #EAECF0; }
.nb-share-row:last-child { border-bottom:0; }
.nb-share-flat { font-weight:600; font-size:.9rem; color:#1F2A37; }
.nb-share-mob { font-size:.78rem; color:#667085; margin-top:2px; }
.nb-share-empty { padding:18px; text-align:center; color:#667085; font-size:.85rem; }
.nb-mode { display:flex; gap:16px; flex-wrap:wrap; margin:2px 0 8px; font-size:.86rem; font-weight:600; color:#1F2A37; }
.nb-mode label { display:flex; align-items:center; gap:6px; cursor:pointer; }

/* ---- Login page: brand badge (icon + "Trimurti Height's / SOCIETY MANAGEMENT") ---- */
.login-wrap.zl .zl-badge { display:flex; align-items:center; gap:12px; align-self:center; margin-left:auto; margin-right:auto; max-width:100%; box-sizing:border-box;
  padding:12px 22px 12px 14px; border-radius:14px; background:rgba(16,26,46,.90); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.6); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.login-wrap.zl .zl-badge .brand-mark { width:42px; height:42px; border-radius:11px; }
.login-wrap.zl .zl-badge-name { color:#fff; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; line-height:1.15; white-space:nowrap; text-shadow:none; }
.login-wrap.zl .zl-badge-sub { color:#8FA0BB; font-weight:600; font-size:.66rem; letter-spacing:.1em; margin-top:3px; white-space:nowrap; text-shadow:none; }
@media (max-width: 420px) { .login-wrap.zl .zl-badge { padding:10px 16px 10px 10px; } .login-wrap.zl .zl-badge-name { font-size:1.02rem; } }

/* ---- Login badge: everything on ONE line ---- */
.login-wrap.zl .zl-badge-text { display:flex; flex-direction:row; align-items:baseline; gap:10px; white-space:nowrap; }
.login-wrap.zl .zl-badge-sub { margin-top:0; }
@media (max-width: 520px) {
  .login-wrap.zl .zl-badge { gap:9px; padding:8px 12px 8px 8px; }
  .login-wrap.zl .zl-badge .brand-mark { width:34px; height:34px; }
  .login-wrap.zl .zl-badge-text { gap:6px; }
  .login-wrap.zl .zl-badge-name { font-size:.88rem; }
  .login-wrap.zl .zl-badge-sub { font-size:.52rem; letter-spacing:.06em; }
}
@media (max-width: 360px) { .login-wrap.zl .zl-badge-name { font-size:.8rem; } .login-wrap.zl .zl-badge-sub { font-size:.48rem; } }

/* =====================================================================
   LOGIN BADGE — DESKTOP: bigger text + animation (>= 901px)
   ===================================================================== */
@keyframes zlBadgeIn   { 0% { opacity:0; transform:translateY(-28px) scale(.9); } 60% { opacity:1; transform:translateY(4px) scale(1.02); } 100% { opacity:1; transform:none; } }
@keyframes zlBadgeFloat{ 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes zlBadgeBorder{ 0% { background-position:0 0, 0% 50%; } 100% { background-position:0 0, 300% 50%; } }
@keyframes zlBadgeSweep { 0% { transform:translateX(-140%) skewX(-18deg); } 55%,100% { transform:translateX(420%) skewX(-18deg); } }
@keyframes zlBadgeGlow  { 0%,100% { box-shadow:0 4px 12px -3px rgba(34,109,180,.6), 0 0 0 0 rgba(90,170,240,.45), inset 0 1px 0 rgba(255,255,255,.3); }
                          50%     { box-shadow:0 4px 12px -3px rgba(34,109,180,.6), 0 0 0 9px rgba(90,170,240,0), inset 0 1px 0 rgba(255,255,255,.3); } }
@keyframes zlBadgeShine { 0% { background-position:150% 0; } 100% { background-position:-50% 0; } }

@media (min-width: 901px) {
  .login-wrap.zl .zl-badge {
    position:relative; overflow:hidden; isolation:isolate; gap:16px;
    padding:16px 32px 16px 18px; border-radius:18px; margin-top:6px;
    border:1.5px solid transparent;
    background:
      linear-gradient(135deg, rgba(10,22,42,.92), rgba(20,48,90,.90)) padding-box,
      linear-gradient(90deg, #E8272B, #F9B21D, #1CA24A, #3A86D0, #E8272B) border-box;
    background-size:auto, 300% 100%;
    box-shadow:0 18px 40px -14px rgba(0,0,0,.65), 0 0 28px -6px rgba(58,134,208,.45);
    animation:zlBadgeIn .9s cubic-bezier(.2,.9,.3,1.1) both, zlBadgeFloat 5s ease-in-out 1.1s infinite, zlBadgeBorder 6s linear infinite;
    transition:box-shadow .4s;
  }
  .login-wrap.zl .zl-badge::after {          /* light sweep passing across the badge */
    content:""; position:absolute; top:0; bottom:0; left:0; width:28%; z-index:1; pointer-events:none;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    animation:zlBadgeSweep 4.5s ease-in-out 1.4s infinite;
  }
  .login-wrap.zl .zl-badge:hover { box-shadow:0 22px 46px -14px rgba(0,0,0,.7), 0 0 40px -4px rgba(249,178,29,.5); }
  .login-wrap.zl .zl-badge .brand-mark { position:relative; z-index:2; width:58px; height:58px; border-radius:15px; animation:zlBadgeGlow 2.8s ease-out infinite; }
  .login-wrap.zl .zl-badge .brand-mark svg { width:28px; height:28px; }
  .login-wrap.zl .zl-badge-text { position:relative; z-index:2; gap:14px; }
  .login-wrap.zl .zl-badge-name {
    font-size:clamp(1.2rem, 2.1vw, 1.85rem); font-weight:800; letter-spacing:-.015em;
    background:linear-gradient(100deg,#fff 0%,#fff 38%,#9FD0FF 50%,#fff 62%,#fff 100%); background-size:250% 100%;
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
    animation:zlBadgeShine 4.5s linear infinite;
  }
  .login-wrap.zl .zl-badge-sub { font-size:clamp(.66rem, 1vw, .88rem); font-weight:700; letter-spacing:.14em; color:#A9BAD6; }
}
@media (prefers-reduced-motion: reduce) {
  .login-wrap.zl .zl-badge, .login-wrap.zl .zl-badge::after, .login-wrap.zl .zl-badge .brand-mark, .login-wrap.zl .zl-badge-name { animation:none !important; }
  .login-wrap.zl .zl-badge-name { -webkit-text-fill-color:#fff; background:none; color:#fff; }
}

/* =====================================================================
   LOGIN — DESKTOP ONLY: compact brand badge + compact info card
   so the building photo stays fully visible (>= 901px; phones unchanged)
   ===================================================================== */
@media (min-width: 901px) {
  /* --- brand badge: small --- */
  .login-wrap.zl .zl-badge { gap:10px; padding:7px 16px 7px 8px; border-radius:12px; margin-top:0; }
  .login-wrap.zl .zl-badge .brand-mark { width:30px; height:30px; border-radius:9px; }
  .login-wrap.zl .zl-badge .brand-mark svg { width:16px; height:16px; }
  .login-wrap.zl .zl-badge-text { gap:8px; }
  .login-wrap.zl .zl-badge-name { font-size:.95rem; font-weight:700; }
  .login-wrap.zl .zl-badge-sub { font-size:.56rem; letter-spacing:.1em; }

  /* --- info card (headline + 3 features): small text, short height --- */
  .login-wrap.zl .zl-hero-inner { padding-bottom:20px !important; gap:10px; }
  .login-wrap.zl .zl-hero-copy { max-width:600px !important; padding:12px 16px 12px !important; border-radius:14px; }
  .login-wrap.zl .zl-headline { font-size:clamp(.95rem, 1.35vw, 1.15rem) !important; margin:0 0 8px !important; line-height:1.2; letter-spacing:-.01em; }
  .login-wrap.zl .zl-headline br { display:none; }
  .login-wrap.zl .zl-headline .zl-ln { display:inline; }
  .login-wrap.zl .zl-headline .zl-ln + .zl-ln { margin-left:.3em; }
  .login-wrap.zl .zl-lead { display:none !important; }
  .login-wrap.zl .zl-features { grid-template-columns:repeat(3, 1fr) !important; gap:8px !important; padding-bottom:0; }
  .login-wrap.zl .zl-features li { padding:6px 8px 6px 6px; border-radius:10px; gap:8px; align-items:flex-start; }
  .login-wrap.zl .zl-feat-ic { width:26px; height:26px; border-radius:8px; }
  .login-wrap.zl .zl-feat-ic svg { width:13px; height:13px; }
  .login-wrap.zl .zl-features b { font-size:.7rem; line-height:1.2; }
  .login-wrap.zl .zl-features small { font-size:.6rem; line-height:1.3; margin-top:1px; }
  .login-wrap.zl .zl-hero-copy .zl-features::after { display:none; }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .login-wrap.zl .zl-features { grid-template-columns:1fr 1fr !important; }
}

/* =====================================================================
   LOGIN — brand name sits above "Sign in" on MOBILE; hidden above the building on mobile
   ===================================================================== */
.login-wrap.zl .zl-mbrand { display:none; }
@keyframes zlMbrandIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes zlMbrandGlow { 0%,100% { box-shadow:0 4px 10px -3px rgba(34,109,180,.55), 0 0 0 0 rgba(58,134,208,.4), inset 0 1px 0 rgba(255,255,255,.3); }
                          50% { box-shadow:0 4px 10px -3px rgba(34,109,180,.55), 0 0 0 7px rgba(58,134,208,0), inset 0 1px 0 rgba(255,255,255,.3); } }
@media (max-width: 900px) {
  .login-wrap.zl .zl-badge { display:none !important; }
  .login-wrap.zl .zl-mbrand { display:flex; align-items:center; gap:11px; margin:0 0 14px; animation:zlMbrandIn .6s .15s cubic-bezier(.22,.8,.32,1) both; }
  .login-wrap.zl .zl-mbrand .brand-mark { width:42px; height:42px; border-radius:12px; animation:zlMbrandGlow 3s ease-out infinite; }
  .login-wrap.zl .zl-mbrand-name { font-size:1.2rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:#1F2A37; white-space:nowrap; }
  .login-wrap.zl .zl-mbrand-sub { margin-top:2px; font-size:.62rem; font-weight:700; letter-spacing:.12em; color:#226DB4; white-space:nowrap; }
}
@media (max-width: 360px) { .login-wrap.zl .zl-mbrand-name { font-size:1.05rem; } .login-wrap.zl .zl-mbrand-sub { font-size:.56rem; } }
@media (prefers-reduced-motion: reduce) { .login-wrap.zl .zl-mbrand, .login-wrap.zl .zl-mbrand .brand-mark { animation:none !important; } }

/* ---- Login: stormy weather (clouds, rain, lightning) over the building photo — desktop & mobile ---- */
.zl-photo .zl-weather { position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,14,34,.58) 0%, rgba(10,22,46,.30) 45%, rgba(10,22,46,.10) 100%); }
.zl-photo .zl-weather canvas { display:block; width:100%; height:100%; }

/* ---- Desktop: same brand block above "Sign in" as mobile; no badge over the building ---- */
@media (min-width: 901px) {
  .login-wrap.zl .zl-badge { display:none !important; }
  .login-wrap.zl .zl-card-brand { display:none !important; }
  .login-wrap.zl .zl-mbrand { display:flex; align-items:center; gap:11px; margin:0 0 16px; animation:zlMbrandIn .6s .15s cubic-bezier(.22,.8,.32,1) both; }
  .login-wrap.zl .zl-mbrand .brand-mark { width:42px; height:42px; border-radius:12px; animation:zlMbrandGlow 3s ease-out infinite; }
  .login-wrap.zl .zl-mbrand-name { font-size:1.2rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:#1F2A37; white-space:nowrap; }
  .login-wrap.zl .zl-mbrand-sub { margin-top:2px; font-size:.62rem; font-weight:700; letter-spacing:.12em; color:#226DB4; white-space:nowrap; }
}

/* ---- Login: rain & thunder sound button (desktop & mobile) ---- */
.zl-hero .zl-snd { position:absolute; top:14px; right:14px; z-index:6; display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px 8px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.28); cursor:pointer;
  background:rgba(8,18,38,.62); color:#fff; font:600 .74rem/1 'Inter',system-ui,sans-serif; letter-spacing:.01em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 8px 20px -10px rgba(0,0,0,.6); transition:background .2s, transform .2s; }
.zl-hero .zl-snd:hover { background:rgba(20,50,95,.8); transform:translateY(-1px); }
.zl-hero .zl-snd.on { border-color:rgba(120,200,255,.6); }
.zl-hero .zl-snd:not(.on) { animation:zlSndHint 2.4s ease-in-out infinite; }
@keyframes zlSndHint { 0%,100% { box-shadow:0 8px 20px -10px rgba(0,0,0,.6), 0 0 0 0 rgba(120,200,255,.5); } 50% { box-shadow:0 8px 20px -10px rgba(0,0,0,.6), 0 0 0 8px rgba(120,200,255,0); } }
@media (prefers-reduced-motion: reduce) { .zl-hero .zl-snd { animation:none !important; } }

/* sound button: icon only */
.zl-hero .zl-snd { width:38px; height:38px; padding:0; justify-content:center; gap:0; border-radius:50%; }
.zl-hero .zl-snd svg { width:18px; height:18px; }

/* ---- Login: three seasons (winter / summer / rainy) — changes on every refresh ---- */
.zl-photo .zl-scene { transition:filter .6s; }
.zl-photo[data-season="winter"] .zl-scene { filter:saturate(.78) brightness(1.06) contrast(1.03) hue-rotate(-6deg); }
.zl-photo[data-season="summer"] .zl-scene { filter:saturate(1.22) brightness(1.1) contrast(1.04) sepia(.12); }
.zl-photo[data-season="rain"] .zl-scene   { filter:saturate(.85) brightness(.82); }

.zl-photo .zl-weather[data-season="winter"] { background:linear-gradient(180deg, rgba(150,190,235,.42) 0%, rgba(195,220,248,.22) 50%, rgba(225,238,252,.26) 100%); }
.zl-photo .zl-weather[data-season="summer"] { background:linear-gradient(180deg, rgba(255,196,96,.26) 0%, rgba(255,214,140,.10) 50%, rgba(255,230,170,.08) 100%); }
.zl-photo .zl-weather[data-season="rain"]   { background:linear-gradient(180deg, rgba(6,14,34,.58) 0%, rgba(10,22,46,.30) 45%, rgba(10,22,46,.10) 100%); }

/* ---- Login: animals playing on the green lawn (sits on the building photo, so it scales with it) ---- */
.zl-scene .zl-animals { position:absolute; left:0; top:83%; width:100%; height:17%; display:block; pointer-events:none; z-index:1; }

/* ---- Login: show the WHOLE green ground (lawn extended downward) so the animals have room to play ---- */
@media (min-width: 901px) {
  .zl-photo { -webkit-mask-image:linear-gradient(180deg,#000 94%,transparent 100%); mask-image:linear-gradient(180deg,#000 94%,transparent 100%); }
  .zl-scene { transform:translate(-50%,-42%); }
}
@media (max-width: 900px) {
  .zl-scene { transform:translate(-50%,-34%); }
}
/* extra grass = mirrored copy of the photo's own lawn, so it continues the picture seamlessly */
.zl-scene::after { content:""; position:absolute; left:0; right:0; top:calc(100% - 2px); height:calc(22% + 2px); transform:scaleY(-1); pointer-events:none;
  background:url('building-bg.jpg?v=2') left bottom / 100% auto no-repeat; }
.zl-scene .zl-animals { top:83%; height:39%; z-index:2; }

/* ---- Login: scene anchored so the whole lawn is visible on every screen shape ---- */
@media (min-width: 901px) {
  .zl-photo { height:76%; }
  .zl-scene { top:0; transform:translate(-50%,-19%); }
}
@media (max-width: 900px) {
  .zl-scene { top:0; transform:translate(-50%,-19%); }
}

/* ---- Login: cars on the road + people chatting ---- */
.zl-scene .zl-road { position:absolute; left:0; top:72%; width:100%; height:14%; display:block; pointer-events:none; z-index:1; }
.zl-scene .zl-talk { position:absolute; inset:0; pointer-events:none; z-index:1; }
.zl-bub { position:absolute; transform:translate(-50%,-100%) scale(.5); transform-origin:50% 100%; opacity:0; white-space:nowrap;
  background:#fff; color:#1b2a3a; font:700 clamp(9px,1.45cqw,16px)/1.2 'Inter',system-ui,sans-serif; padding:.38em .65em; border-radius:.85em;
  box-shadow:0 2px 7px rgba(0,0,0,.32); transition:opacity .22s, transform .28s cubic-bezier(.3,1.5,.5,1); }
.zl-bub::after { content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%); border:.42em solid transparent; border-top-color:#fff; border-bottom:0; }
.zl-bub.on { opacity:1; transform:translate(-50%,-100%) scale(1); animation:zlBubTalk .5s ease-in-out infinite alternate; }
@keyframes zlBubTalk { from { margin-top:0; } to { margin-top:-.18em; } }
.zl-dots { display:inline-flex; gap:.22em; align-items:center; height:1.1em; }
.zl-dots i { width:.38em; height:.38em; border-radius:50%; background:#6b7a8c; animation:zlDot .9s ease-in-out infinite; }
.zl-dots i:nth-child(2) { animation-delay:.15s; } .zl-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes zlDot { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-.3em); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .zl-bub.on, .zl-dots i { animation:none !important; } }

/* ---- Login: people walking on the pavement ---- */
.zl-scene .zl-walkers { position:absolute; left:0; top:72%; width:100%; height:14%; display:block; pointer-events:none; z-index:1; }


/* =====================================================================
   COMPLAINTS — modern animated card board (admin + residents, desktop + mobile)
   ===================================================================== */
@keyframes cmpRise  { from { opacity:0; transform:translateY(22px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes cmpBar   { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes cmpFill  { from { width:0; } to { width:var(--pct); } }
@keyframes cmpPulse { 0% { box-shadow:0 0 0 0 rgba(var(--brass-rgb),.45); } 70% { box-shadow:0 0 0 9px rgba(var(--brass-rgb),0); } 100% { box-shadow:0 0 0 0 rgba(var(--brass-rgb),0); } }
@keyframes cmpBlink { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(1.5); } }
@keyframes cmpShine { from { transform:translateX(-120%); } to { transform:translateX(260%); } }
@keyframes cmpPop   { 0% { transform:scale(.4); opacity:0; } 70% { transform:scale(1.15); } 100% { transform:scale(1); opacity:1; } }

/* filter chips */
.cmp-bar { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; animation:cmpRise .45s ease both; }
.cmp-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; font:600 .82rem/1 'Inter',system-ui,sans-serif;
  color:#475467; background:#fff; border:1px solid var(--line,#E3E8EF); cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .2s, box-shadow .25s; }
.cmp-chip:hover { transform:translateY(-2px); border-color:var(--brass,#226DB4); color:var(--brass,#226DB4); box-shadow:0 6px 14px -8px rgba(var(--brass-rgb),.5); }
.cmp-chip.active { background:linear-gradient(135deg,var(--brass-hi,#3A86D0),var(--brass-lo,#1A5796)); color:#fff; border-color:transparent;
  box-shadow:0 8px 18px -8px rgba(var(--brass-rgb),.7); }
.cmp-chip-n { min-width:20px; padding:2px 6px; border-radius:999px; text-align:center; font-size:.7rem; background:#EEF1F6; color:#344054; transition:background .25s,color .25s; }
.cmp-chip.active .cmp-chip-n { background:rgba(255,255,255,.25); color:#fff; }

/* grid */
.cmp-board { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px; align-items:start; }

/* card */
.cmp-card { --pc:#F9B21D; --pc-soft:rgba(249,178,29,.14);
  position:relative; overflow:hidden; padding:20px 20px 16px; border-radius:16px; background:#fff; color:var(--text,#1F2A37);
  border:1px solid var(--line,#E3E8EF); box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 24px -16px rgba(16,24,40,.25);
  animation:cmpRise .6s cubic-bezier(.22,.8,.32,1) calc(var(--i) * .07s + .1s) both;
  transition:transform .35s cubic-bezier(.22,.8,.32,1), box-shadow .35s, border-color .35s; }
.cmp-card.pr-high   { --pc:#E42527; --pc-soft:rgba(228,37,39,.10); }
.cmp-card.pr-medium { --pc:#F9B21D; --pc-soft:rgba(249,178,29,.16); }
.cmp-card.pr-low    { --pc:#089949; --pc-soft:rgba(8,153,73,.10); }
.cmp-card::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; transform-origin:left;
  background:linear-gradient(90deg,var(--pc),color-mix(in srgb,var(--pc) 45%,#fff));
  animation:cmpBar .8s cubic-bezier(.22,.8,.32,1) calc(var(--i) * .07s + .3s) both; }
.cmp-card::after { content:""; position:absolute; top:0; left:0; width:40%; height:100%; pointer-events:none; opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-120%); }
.cmp-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--pc) 40%,var(--line,#E3E8EF));
  box-shadow:0 2px 4px rgba(16,24,40,.06), 0 24px 36px -18px rgba(16,24,40,.35); }
.cmp-card:hover::after { opacity:1; animation:cmpShine 1s ease; }
.cmp-card.is-closed { filter:saturate(.35); opacity:.9; }

.cmp-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cmp-ic { width:42px; height:42px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:12px;
  color:var(--pc); background:var(--pc-soft); transition:transform .4s cubic-bezier(.3,1.5,.5,1); }
.cmp-card:hover .cmp-ic { transform:rotate(-8deg) scale(1.1); }
.cmp-meta { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.cmp-cat { font-weight:700; font-size:.92rem; color:#1F2A37; }
.cmp-id  { font-size:.74rem; color:var(--muted,#667085); }
.cmp-prio { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.72rem; font-weight:700; color:var(--pc); background:var(--pc-soft); }
.cmp-prio i { width:7px; height:7px; border-radius:50%; background:var(--pc); }
.cmp-prio.pulse i { animation:cmpBlink 1.4s ease-in-out infinite; }

.cmp-title { margin:0 0 6px; font:700 1.08rem/1.35 'Inter',system-ui,sans-serif; color:#101828; overflow-wrap:anywhere; }
.cmp-desc  { margin:0; font-size:.88rem; line-height:1.6; color:#475467; white-space:pre-line; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:all .3s; }
.cmp-card:hover .cmp-desc { -webkit-line-clamp:12; }

/* progress track */
.cmp-track { position:relative; display:flex; margin:20px 0 6px; }
.cmp-rail { position:absolute; left:12.5%; right:12.5%; top:9px; height:3px; border-radius:3px; background:#E3E8EF; overflow:hidden; }
.cmp-fill { display:block; height:100%; width:var(--pct); border-radius:3px; position:relative;
  background:linear-gradient(90deg,var(--brass-lo,#1A5796),var(--brass-hi,#3A86D0));
  animation:cmpFill 1.1s cubic-bezier(.22,.8,.32,1) calc(var(--i) * .07s + .5s) both; }
.cmp-step { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; }
.cmp-dot { width:21px; height:21px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:#fff;
  background:#fff; border:2px solid #D0D5DD; transition:all .3s; }
.cmp-step.done .cmp-dot { background:var(--brass,#226DB4); border-color:var(--brass,#226DB4); animation:cmpPop .45s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .07s + .8s) both; }
.cmp-step.current .cmp-dot { border-color:var(--brass,#226DB4); background:#fff; }
.cmp-step.current .cmp-dot::after { content:""; width:9px; height:9px; border-radius:50%; background:var(--brass,#226DB4); }
.cmp-card:not(.is-closed) .cmp-step.current:not(:last-child) .cmp-dot { animation:cmpPulse 1.8s ease-out infinite; }
.cmp-card .cmp-step:last-child.current .cmp-dot { background:var(--teal,#089949); border-color:var(--teal,#089949); }
.cmp-card .cmp-step:last-child.current .cmp-dot::after { display:none; }
.cmp-step-l { font-size:.68rem; font-weight:600; color:#98A2B3; text-align:center; white-space:nowrap; }
.cmp-step.done .cmp-step-l, .cmp-step.current .cmp-step-l { color:#344054; }

/* footer */
.cmp-foot { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin-top:14px; padding-top:12px; border-top:1px dashed #D9DEE7; }
.cmp-date, .cmp-by { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; color:var(--muted,#667085); }
.cmp-by:not(.muted) { color:var(--brass,#226DB4); }
.cmp-status { margin-left:auto; }

/* admin controls */
.cmp-admin { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:12px; padding:12px; border-radius:12px; background:#F7F9FC; border:1px solid #EDF0F5; }
.cmp-admin label { display:flex; flex-direction:column; gap:4px; flex:1 1 130px; min-width:0; }
.cmp-admin label span { font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#667085); }
.cmp-admin select { width:100%; }

/* empty state */
.cmp-empty { grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:46px 20px; text-align:center;
  border-radius:16px; background:#fff; border:1px dashed #C9D2DF; animation:cmpRise .5s ease both; }
.cmp-empty span { width:62px; height:62px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color:var(--teal,#089949);
  background:rgba(8,153,73,.10); animation:cmpPop .6s cubic-bezier(.3,1.5,.5,1) .2s both; }
.cmp-empty b { font-size:1rem; color:#1F2A37; margin-top:8px; }
.cmp-empty small { color:var(--muted,#667085); font-size:.84rem; }

@media (max-width:720px) {
  .cmp-board { grid-template-columns:1fr; gap:14px; }
  .cmp-card { padding:18px 16px 14px; border-radius:14px; }
  .cmp-bar { flex-wrap:nowrap; overflow-x:auto; margin-inline:-4px; padding:2px 4px 6px; scrollbar-width:none; }
  .cmp-bar::-webkit-scrollbar { display:none; }
  .cmp-chip { flex:none; }
  .cmp-desc { -webkit-line-clamp:4; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-bar, .cmp-card, .cmp-card::before, .cmp-fill, .cmp-step.done .cmp-dot, .cmp-step .cmp-dot, .cmp-prio i, .cmp-empty, .cmp-empty span { animation:none !important; }
  .cmp-card, .cmp-chip, .cmp-ic { transition:none; }
}


/* =====================================================================
   TENANTS — modern animated card board (admin + residents)
   ===================================================================== */
@keyframes tnShine { from { transform:translateX(-120%); } to { transform:translateX(260%); } }
@keyframes tnRing  { 0% { box-shadow:0 0 0 0 hsla(var(--h),70%,50%,.35); } 100% { box-shadow:0 0 0 12px hsla(var(--h),70%,50%,0); } }

.tn-head { display:flex; align-items:center; gap:10px; margin:0 0 16px; animation:cmpRise .45s ease both; }
.tn-head-t { font:700 1.05rem/1.3 'Inter',system-ui,sans-serif; color:#1F2A37; }
.tn-count { min-width:26px; padding:3px 10px; border-radius:999px; text-align:center; font-size:.78rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--brass-hi,#3A86D0),var(--brass-lo,#1A5796)); animation:cmpPop .5s cubic-bezier(.3,1.5,.5,1) .3s both; }

.tn-board { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; align-items:start; }

.tn-card { --h:212; position:relative; overflow:hidden; padding:20px 20px 16px; border-radius:16px; background:#fff;
  border:1px solid var(--line,#E3E8EF); box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 24px -16px rgba(16,24,40,.25);
  animation:cmpRise .6s cubic-bezier(.22,.8,.32,1) calc(var(--i) * .07s + .1s) both;
  transition:transform .35s cubic-bezier(.22,.8,.32,1), box-shadow .35s, border-color .35s; }
.tn-card::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; transform-origin:left;
  background:linear-gradient(90deg,hsl(var(--h),70%,50%),hsl(calc(var(--h) + 30),75%,62%));
  animation:cmpBar .8s cubic-bezier(.22,.8,.32,1) calc(var(--i) * .07s + .3s) both; }
.tn-card::after { content:""; position:absolute; top:0; left:0; width:40%; height:100%; pointer-events:none; opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-120%); }
.tn-card:hover { transform:translateY(-6px); border-color:hsla(var(--h),60%,50%,.4);
  box-shadow:0 2px 4px rgba(16,24,40,.06), 0 24px 36px -18px rgba(16,24,40,.35); }
.tn-card:hover::after { opacity:1; animation:tnShine 1s ease; }

.tn-top { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.tn-av { width:46px; height:46px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:14px;
  font:700 1rem/1 'Inter',system-ui,sans-serif; color:#fff; letter-spacing:.02em;
  background:linear-gradient(135deg,hsl(var(--h),70%,52%),hsl(calc(var(--h) + 30),70%,42%));
  box-shadow:0 8px 16px -8px hsla(var(--h),70%,40%,.7); transition:transform .4s cubic-bezier(.3,1.5,.5,1); }
.tn-card:hover .tn-av { transform:rotate(-6deg) scale(1.08); animation:tnRing 1.2s ease-out infinite; }
.tn-who { flex:1; min-width:0; }
.tn-name { margin:0; font:700 1.05rem/1.3 'Inter',system-ui,sans-serif; color:#101828; overflow-wrap:anywhere; }
.tn-sub { font-size:.74rem; color:var(--muted,#667085); }
.tn-flat { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px; white-space:nowrap;
  font-size:.74rem; font-weight:700; color:hsl(var(--h),65%,35%); background:hsla(var(--h),70%,50%,.12); }

.tn-rows { display:flex; flex-direction:column; gap:8px; }
.tn-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:#F7F9FC; border:1px solid #EDF0F5;
  color:inherit; text-decoration:none; transition:background .25s, border-color .25s, transform .25s; }
a.tn-row:hover { background:hsla(var(--h),70%,50%,.08); border-color:hsla(var(--h),60%,50%,.35); transform:translateX(3px); }
.tn-ri { width:28px; height:28px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:8px;
  color:hsl(var(--h),65%,40%); background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.08); }
.tn-rl { font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted,#667085); min-width:52px; }
.tn-rv { margin-left:auto; font-weight:600; font-size:.9rem; color:#1F2A37; text-align:right; overflow-wrap:anywhere; }
.tn-mono { font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.tn-rv.is-masked { color:#667085; }

.tn-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px dashed #D9DEE7; }
.tn-date { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; color:var(--muted,#667085); }

@media (max-width:720px) {
  .tn-board { grid-template-columns:1fr; gap:14px; }
  .tn-card { padding:18px 16px 14px; border-radius:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tn-head, .tn-count, .tn-card, .tn-card::before, .tn-card:hover .tn-av { animation:none !important; }
  .tn-card, .tn-row, .tn-av { transition:none; }
}


/* =====================================================================
   SHARED RECORD CARDS (rc-*) — Approval, Pending, Done, Maintenance, Expenses, Residents, Staff, Reports
   ===================================================================== */
@keyframes rcRingGrow { from { stroke-dasharray:0 264; } }
@keyframes rcBarGrow  { from { width:0; } to { width:var(--w); } }
@keyframes rcBlink    { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(1.55); } }

.rc-board { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; align-items:start; margin-bottom:6px; }
.rc-board:has(.compact) { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }

.rc-card { --h:212; position:relative; overflow:hidden; padding:18px 18px 14px; border-radius:16px; background:#fff;
  border:1px solid var(--line,#E3E8EF); box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 24px -16px rgba(16,24,40,.25);
  animation:cmpRise .55s cubic-bezier(.22,.8,.32,1) calc(var(--i) * .05s + .05s) both;
  transition:transform .35s cubic-bezier(.22,.8,.32,1), box-shadow .35s, border-color .35s; }
.rc-card.compact { padding:14px 16px 12px; border-radius:14px; }
.rc-card::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; transform-origin:left;
  background:linear-gradient(90deg,hsl(var(--h),70%,50%),hsl(calc(var(--h) + 28),75%,62%));
  animation:cmpBar .75s cubic-bezier(.22,.8,.32,1) calc(var(--i) * .05s + .2s) both; }
.rc-card::after { content:""; position:absolute; top:0; left:0; width:40%; height:100%; pointer-events:none; opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-120%); }
.rc-card:hover { transform:translateY(-5px); border-color:hsla(var(--h),60%,50%,.4); box-shadow:0 2px 4px rgba(16,24,40,.06), 0 22px 34px -18px rgba(16,24,40,.35); }
.rc-card:hover::after { opacity:1; animation:tnShine 1s ease; }
.rc-card.no-anim, .rc-card.no-anim::before { animation:none; }
.rc-card.is-empty { opacity:.82; filter:saturate(.4); }
.rc-card.is-mine { border-color:hsla(var(--h),60%,50%,.55); box-shadow:0 0 0 3px hsla(var(--h),70%,50%,.12), 0 10px 24px -16px rgba(16,24,40,.25); }

.rc-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.rc-card.compact .rc-top { margin-bottom:8px; }
.rc-av { min-width:44px; height:44px; padding:0 8px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:13px;
  font:700 .92rem/1 'Inter',system-ui,sans-serif; letter-spacing:.01em; color:#fff; white-space:nowrap;
  background:linear-gradient(135deg,hsl(var(--h),70%,52%),hsl(calc(var(--h) + 28),70%,42%)); box-shadow:0 8px 16px -8px hsla(var(--h),70%,40%,.7);
  transition:transform .4s cubic-bezier(.3,1.5,.5,1); }
.rc-card.compact .rc-av { min-width:40px; height:40px; border-radius:12px; font-size:.84rem; }
.rc-card:hover .rc-av { transform:rotate(-6deg) scale(1.08); animation:tnRing 1.2s ease-out infinite; }
.rc-who { flex:1; min-width:0; }
.rc-name { margin:0; font:700 1rem/1.3 'Inter',system-ui,sans-serif; color:#101828; overflow-wrap:anywhere; }
.rc-sub { display:block; margin-top:1px; font-size:.74rem; color:var(--muted,#667085); }

.rc-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-size:.72rem; font-weight:700;
  color:hsl(var(--h),70%,30%); background:hsla(var(--h),75%,50%,.14); }
.rc-badge i { width:7px; height:7px; border-radius:50%; background:hsl(var(--h),70%,45%); }
.rc-badge.pulse i { animation:rcBlink 1.4s ease-in-out infinite; }
.rc-badge.t-green { color:#067A3A; background:rgba(8,153,73,.12); } .rc-badge.t-green i { background:#089949; }
.rc-badge.t-amber { color:#8A5B00; background:rgba(249,178,29,.2); } .rc-badge.t-amber i { background:#F9B21D; }
.rc-badge.t-red   { color:#B91C1E; background:rgba(228,37,39,.1); }  .rc-badge.t-red i   { background:#E42527; }
.rc-amt { font:700 1.08rem/1 'Inter',system-ui,sans-serif; color:hsl(var(--h),65%,32%); white-space:nowrap; }
.rc-amt i { display:none; }

.rc-rows { display:flex; flex-direction:column; gap:6px; }
.rc-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:10px; background:#F7F9FC; border:1px solid #EDF0F5; font-size:.86rem; }
.rc-card.compact .rc-row { padding:6px 10px; font-size:.82rem; }
.rc-rl { font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted,#667085); }
.rc-rv { font-weight:600; color:#1F2A37; text-align:right; overflow-wrap:anywhere; }
.rc-rv a { color:inherit; text-decoration:none; } .rc-rv a:hover { color:hsl(var(--h),65%,38%); text-decoration:underline; }
.rc-rv small { font-weight:500; color:var(--muted,#667085); }
.rc-row.warn .rc-rv { color:#B54708; }
.rc-row.total { background:hsla(var(--h),75%,50%,.08); border-color:hsla(var(--h),60%,50%,.22); }
.rc-row.total .rc-rv { color:hsl(var(--h),65%,28%); font-size:.95rem; }

.rc-note { margin:0 0 10px; font-size:.84rem; line-height:1.55; color:#475467; white-space:pre-line; overflow-wrap:anywhere; }
.rc-bill { display:flex; align-items:center; gap:10px; margin:0 0 4px; padding:6px; border-radius:12px; background:#F7F9FC; border:1px solid #EDF0F5; text-decoration:none; color:var(--brass,#226DB4);
  font-size:.8rem; font-weight:700; transition:background .25s, transform .25s; }
.rc-bill:hover { background:hsla(var(--h),70%,50%,.09); transform:translateX(3px); }
.rc-bill img { width:54px; height:42px; object-fit:cover; border-radius:8px; border:1px solid #E3E8EF; }
.rc-bill span { display:inline-flex; align-items:center; gap:5px; }

.rc-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 10px; margin-top:12px; padding-top:10px; border-top:1px dashed #D9DEE7; }
.rc-card.compact .rc-foot { margin-top:10px; padding-top:8px; }
.rc-date { display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; color:var(--muted,#667085); }
.rc-date:empty { display:none; }
.rc-actions { display:inline-flex; flex-wrap:wrap; gap:6px; margin-left:auto; }

/* attendance segmented control */
.rc-seg { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin:0 0 10px; border-radius:12px; background:#EEF1F6; }
.rc-seg button { padding:7px 6px; border:0; border-radius:9px; background:transparent; font:600 .78rem/1 'Inter',system-ui,sans-serif; color:#475467; cursor:pointer; transition:background .25s, color .25s, box-shadow .25s, transform .15s; }
.rc-seg button:hover { background:rgba(255,255,255,.7); }
.rc-seg button:active { transform:scale(.96); }
.rc-seg button.on { color:#fff; box-shadow:0 6px 12px -6px rgba(16,24,40,.45); }
.rc-seg button.g.on { background:#089949; } .rc-seg button.r.on { background:#E42527; } .rc-seg button.a.on { background:#E49B0F; }

/* stat strip */
.rc-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:0 0 18px; }
.rc-stat { --h:212; position:relative; overflow:hidden; padding:14px 16px; border-radius:14px; background:#fff; border:1px solid var(--line,#E3E8EF);
  box-shadow:0 1px 2px rgba(16,24,40,.04); animation:cmpRise .5s cubic-bezier(.22,.8,.32,1) calc(var(--k) * .07s) both; }
.rc-stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:hsl(var(--h),70%,50%); }
.rc-stat span { display:block; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted,#667085); }
.rc-stat b { display:block; margin-top:4px; font:700 1.35rem/1.2 'Inter',system-ui,sans-serif; color:hsl(var(--h),60%,26%); }
.rc-stats.big .rc-stat { padding:18px 20px; } .rc-stats.big .rc-stat b { font-size:1.8rem; }

/* residents search */
.rc-search { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:6px 14px; border-radius:14px; background:#fff; border:1px solid var(--line,#E3E8EF);
  box-shadow:0 1px 2px rgba(16,24,40,.04); color:var(--muted,#667085); transition:border-color .25s, box-shadow .25s; animation:cmpRise .45s ease both; }
.rc-search:focus-within { border-color:var(--brass,#226DB4); box-shadow:0 0 0 4px rgba(var(--brass-rgb),.12); color:var(--brass,#226DB4); }
.rc-search input { flex:1; min-width:0; border:0 !important; outline:0 !important; background:transparent !important; box-shadow:none !important; padding:9px 0 !important; font-size:.92rem; color:#1F2A37; }
.rc-search-n { font-size:.74rem; font-weight:700; padding:3px 10px; border-radius:999px; background:#EEF1F6; color:#475467; white-space:nowrap; }

/* reports */
.rp-grid { display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:18px; margin-bottom:6px; }
.rp-panel { padding:20px; border-radius:16px; background:#fff; border:1px solid var(--line,#E3E8EF); box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 24px -16px rgba(16,24,40,.25);
  animation:cmpRise .55s cubic-bezier(.22,.8,.32,1) calc(var(--i) * .1s) both; }
.rp-ptitle { display:flex; align-items:center; gap:8px; margin-bottom:16px; font:700 .95rem/1.2 'Inter',system-ui,sans-serif; color:#1F2A37; }
.rp-pn { padding:2px 9px; border-radius:999px; font-size:.72rem; background:#EEF1F6; color:#475467; }
.rp-ring-panel { display:flex; flex-direction:column; align-items:center; }
.rp-ring { position:relative; width:180px; height:180px; }
.rp-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.rp-ring circle { fill:none; stroke-width:9; stroke-linecap:round; }
.rp-ring .bg { stroke:#EEF1F6; }
.rp-ring .fg { stroke:#089949; stroke-dasharray:calc(var(--p) * 2.639) 264; animation:rcRingGrow 1.4s cubic-bezier(.22,.8,.32,1) .3s both; filter:drop-shadow(0 4px 6px rgba(8,153,73,.35)); }
.rp-ring-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rp-ring-c b { font:800 2.1rem/1 'Inter',system-ui,sans-serif; color:#067A3A; }
.rp-ring-c span { margin-top:4px; font-size:.74rem; font-weight:600; color:var(--muted,#667085); }
.rp-legend { display:flex; flex-direction:column; gap:6px; margin-top:16px; font-size:.78rem; font-weight:600; color:#475467; }
.rp-legend i { display:inline-block; width:9px; height:9px; margin-right:7px; border-radius:50%; }
.rp-hrow { display:grid; grid-template-columns:150px 1fr 34px; align-items:center; gap:12px; margin-bottom:12px; }
.rp-hl { display:inline-flex; align-items:center; gap:8px; font-size:.84rem; font-weight:600; color:#344054; }
.rp-hi { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:hsl(var(--h),65%,38%); background:hsla(var(--h),70%,50%,.14); }
.rp-track { height:12px; border-radius:999px; background:#EEF1F6; overflow:hidden; }
.rp-bar { display:block; height:100%; width:var(--w); border-radius:999px; background:linear-gradient(90deg,hsl(var(--h),70%,50%),hsl(calc(var(--h) + 28),75%,60%));
  animation:rcBarGrow 1s cubic-bezier(.22,.8,.32,1) calc(var(--i) * .1s + .35s) both; }
.rp-hv { text-align:right; font-size:.9rem; color:#1F2A37; }
.rp-none { display:flex; align-items:center; gap:10px; padding:26px 0; color:var(--muted,#667085); font-size:.9rem; }

@media (max-width:900px) { .rp-grid { grid-template-columns:1fr; } }
@media (max-width:720px) {
  .rc-board, .rc-board:has(.compact) { grid-template-columns:1fr; gap:12px; }
  .rc-card { padding:16px 14px 12px; border-radius:14px; }
  .rc-stats { grid-template-columns:repeat(2,1fr); gap:10px; }
  .rc-stat { padding:12px 14px; } .rc-stat b { font-size:1.15rem; } .rc-stats.big .rc-stat b { font-size:1.35rem; }
  .rp-hrow { grid-template-columns:110px 1fr 28px; gap:8px; }
  .rp-ring { width:150px; height:150px; }
}
@media (prefers-reduced-motion: reduce) {
  .rc-card, .rc-card::before, .rc-stat, .rc-search, .rp-panel, .rp-ring .fg, .rp-bar, .rc-badge i, .rc-card:hover .rc-av { animation:none !important; }
  .rc-card, .rc-av, .rc-seg button, .rc-bill { transition:none; }
}


/* =====================================================================
   RESIDENT: My Flat hero/tiles, modern form cards, option pickers
   ===================================================================== */
@keyframes mfFloat { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-12px) scale(1.06); } }

/* ---- My Flat ---- */
.mf-hero { position:relative; overflow:hidden; display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:24px; margin-bottom:16px; border-radius:20px; color:#fff;
  background:linear-gradient(135deg,#2F7FD0 0%,#226DB4 45%,#1A5796 100%); box-shadow:0 18px 34px -18px rgba(26,87,150,.7);
  animation:cmpRise .55s cubic-bezier(.22,.8,.32,1) both; }
.mf-orb { position:absolute; border-radius:50%; background:rgba(255,255,255,.12); pointer-events:none; animation:mfFloat 7s ease-in-out infinite; }
.mf-orb.o1 { width:190px; height:190px; right:-50px; top:-70px; } .mf-orb.o2 { width:110px; height:110px; right:150px; bottom:-60px; animation-delay:-3s; }
.mf-av { position:relative; min-width:68px; height:68px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border-radius:20px;
  font:800 1.35rem/1 'Inter',system-ui,sans-serif; color:#1A5796; background:#fff; box-shadow:0 12px 22px -10px rgba(0,0,0,.45); animation:cmpPop .6s cubic-bezier(.3,1.5,.5,1) .15s both; }
.mf-who { position:relative; flex:1; min-width:160px; }
.mf-who h2 { margin:0; font:700 1.4rem/1.25 'Inter',system-ui,sans-serif; color:#fff; overflow-wrap:anywhere; }
.mf-who p { margin:4px 0 0; font-size:.9rem; color:rgba(255,255,255,.82); }
.mf-badge { position:relative; display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; font-size:.8rem; font-weight:700; background:rgba(255,255,255,.95); color:#067A3A; }
.mf-badge i { width:8px; height:8px; border-radius:50%; background:#089949; animation:rcBlink 1.6s ease-in-out infinite; }
.mf-badge.t-amber { color:#8A5B00; } .mf-badge.t-amber i { background:#F9B21D; }
.mf-badge.t-red { color:#B91C1E; } .mf-badge.t-red i { background:#E42527; }

.mf-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
.mf-tile { --h:212; position:relative; display:flex; flex-direction:column; gap:4px; padding:16px; border-radius:16px; background:#fff; border:1px solid var(--line,#E3E8EF);
  box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 24px -16px rgba(16,24,40,.25); animation:cmpRise .5s cubic-bezier(.22,.8,.32,1) calc(var(--k) * .06s + .15s) both;
  transition:transform .3s cubic-bezier(.22,.8,.32,1), box-shadow .3s, border-color .3s; }
.mf-tile:hover { transform:translateY(-4px); border-color:hsla(var(--h),60%,50%,.4); box-shadow:0 20px 30px -18px rgba(16,24,40,.35); }
.mf-ti { width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; border-radius:11px; color:hsl(var(--h),65%,38%); background:hsla(var(--h),70%,50%,.14); transition:transform .4s cubic-bezier(.3,1.5,.5,1); }
.mf-tile:hover .mf-ti { transform:rotate(-8deg) scale(1.1); }
.mf-tl { font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted,#667085); }
.mf-tv { font:700 1.05rem/1.3 'Inter',system-ui,sans-serif; color:#101828; overflow-wrap:anywhere; }

/* ---- modern form cards (all "Add ..." / "New ..." forms + tenant form) ---- */
body .tri-app:has(.shell) .card.collapsible, body .tri-app:has(.shell) .card.form-card { position:relative; overflow:hidden; border-radius:16px;
  border:1px solid var(--line,#E3E8EF); box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 24px -16px rgba(16,24,40,.25); animation:cmpRise .5s cubic-bezier(.22,.8,.32,1) both; }
body .tri-app:has(.shell) .card.collapsible::before, body .tri-app:has(.shell) .card.form-card::before { content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg,var(--brass-lo,#1A5796),var(--brass-hi,#3A86D0),#7DB6F0); transform-origin:left; animation:cmpBar .8s cubic-bezier(.22,.8,.32,1) .2s both; }
.card.collapsible .field input:focus, .card.collapsible .field select:focus, .card.collapsible .field textarea:focus,
.card.form-card .field input:focus, .card.form-card .field select:focus, .card.form-card .field textarea:focus {
  outline:none; border-color:var(--brass,#226DB4); box-shadow:0 0 0 4px rgba(var(--brass-rgb),.12); }
.card.collapsible .field input, .card.collapsible .field select, .card.collapsible .field textarea,
.card.form-card .field input, .card.form-card .field select, .card.form-card .field textarea { transition:border-color .25s, box-shadow .25s; }
.card.collapsible .btn-brass, .card.form-card .btn-brass { background:linear-gradient(135deg,var(--brass-hi,#3A86D0),var(--brass-lo,#1A5796)); border-color:transparent; color:#fff;
  box-shadow:0 10px 18px -10px rgba(var(--brass-rgb),.8); transition:transform .2s, box-shadow .25s; }
.card.collapsible .btn-brass:hover, .card.form-card .btn-brass:hover { transform:translateY(-2px); box-shadow:0 14px 22px -10px rgba(var(--brass-rgb),.9); }

.form-head { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.form-ic { width:44px; height:44px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:13px; color:#fff;
  background:linear-gradient(135deg,var(--brass-hi,#3A86D0),var(--brass-lo,#1A5796)); box-shadow:0 10px 18px -10px rgba(var(--brass-rgb),.8); }
.form-ht { font:700 1.05rem/1.3 'Inter',system-ui,sans-serif; color:#101828; }
.form-hs { margin-top:2px; font-size:.82rem; color:var(--muted,#667085); }
.card.form-card { max-width:none; }

/* ---- option pickers (complaint category / priority) ---- */
.pick-hidden { position:absolute !important; width:1px; height:1px; opacity:0; pointer-events:none; overflow:hidden; clip:rect(0 0 0 0); }
.pick-field { margin-bottom:14px; }
.pick-group { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.pick-chip { --h:212; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; cursor:pointer;
  font:600 .82rem/1 'Inter',system-ui,sans-serif; color:#475467; background:#fff; border:1.5px solid var(--line,#E3E8EF);
  transition:background .25s, color .25s, border-color .25s, transform .2s, box-shadow .25s; }
.pick-chip svg { color:hsl(var(--h),65%,42%); transition:color .25s; }
.pick-chip i { width:9px; height:9px; border-radius:50%; background:hsl(var(--h),75%,50%); }
.pick-chip:hover { transform:translateY(-2px); border-color:hsla(var(--h),60%,50%,.55); }
.pick-chip:active { transform:scale(.96); }
.pick-chip.active { color:#fff; border-color:transparent; background:linear-gradient(135deg,hsl(var(--h),70%,50%),hsl(calc(var(--h) + 24),70%,42%)); box-shadow:0 10px 18px -10px hsla(var(--h),70%,40%,.85); }
.pick-chip.active svg { color:#fff; } .pick-chip.active i { background:#fff; }

@media (max-width:720px) {
  .mf-hero { padding:20px 18px; border-radius:18px; } .mf-av { min-width:58px; height:58px; font-size:1.15rem; } .mf-who h2 { font-size:1.2rem; }
  .mf-tiles { grid-template-columns:repeat(2,1fr); gap:10px; } .mf-tile { padding:13px; }
  .pick-group { gap:6px; } .pick-chip { padding:8px 12px; font-size:.78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-hero, .mf-orb, .mf-av, .mf-badge i, .mf-tile, body .tri-app:has(.shell) .card.collapsible, body .tri-app:has(.shell) .card.form-card,
  body .tri-app:has(.shell) .card.collapsible::before, body .tri-app:has(.shell) .card.form-card::before { animation:none !important; }
  .mf-tile, .mf-ti, .pick-chip { transition:none; }
}

/* ---- unified form look: icon inputs, quick chips, upload box (Add flat / staff / expense / tenant) ---- */
.field.ic-field .inp { position:relative; }
.field.ic-field .inp-ic { position:absolute; left:13px; top:50%; transform:translateY(-50%); display:inline-flex; color:#98A2B3; pointer-events:none; transition:color .25s; }
body .tri-app:has(.shell) .field.ic-field .inp input { padding-left:40px; }
.field.ic-field .inp:focus-within .inp-ic { color:var(--brass,#226DB4); }
.field.ic-field .pick-group.quick { margin-top:8px; }
.pick-group.quick .pick-chip { padding:6px 12px; font-size:.76rem; }
.card.collapsible .form-grid, .card.form-card .form-grid { margin-bottom:16px; }
.card.collapsible .pick-field { margin-bottom:16px; }
.card.collapsible .pick-group .pick-chip.active { transform:none; }

.file-drop { position:relative; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; cursor:pointer;
  border:1.5px dashed #C9D3E0; background:#F8FAFD; transition:border-color .25s, background .25s, transform .2s; }
.file-drop:hover { border-color:var(--brass,#226DB4); background:#F1F6FD; transform:translateY(-1px); }
.file-drop input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; padding:0 !important; border:0 !important; }
.file-drop .file-ic { width:42px; height:42px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; color:var(--brass,#226DB4); background:#E6F0FB; }
.file-drop .file-t { display:flex; flex-direction:column; min-width:0; }
.file-drop .file-t b { font:700 .88rem/1.3 'Inter',system-ui,sans-serif; color:#1F2A37; }
.file-drop .file-t small { font-size:.78rem; color:var(--muted,#667085); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-drop.has-file { border-style:solid; border-color:hsl(152,55%,45%); background:#F0FAF4; }
.file-drop.has-file .file-ic { color:#fff; background:linear-gradient(135deg,hsl(152,60%,45%),hsl(170,60%,36%)); }

/* phones: the collapsible header already shows the title, so hide the in-body header */
@media (max-width:900px) { .collapsible-body > .form-head { display:none; } }

/* ---- Maintenance: auto-billing card ---- */
.ab-row { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.ab-info { display:flex; flex-wrap:wrap; gap:8px; flex:1; min-width:220px; }
.ab-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; font:600 .78rem/1 'Inter',system-ui,sans-serif; color:#475467; background:#F2F5FA; border:1px solid var(--line,#E3E8EF); }
.ab-chip i { width:8px; height:8px; border-radius:50%; background:hsl(152,70%,45%); box-shadow:0 0 0 0 hsla(152,70%,45%,.5); animation:abPulse 2s infinite; }
.ab-chip.next { color:#1A5796; background:#E6F0FB; border-color:#CFE2F7; }
.ab-note { margin-top:12px; font-size:.8rem; color:var(--muted,#667085); }
@keyframes abPulse { 70% { box-shadow:0 0 0 7px hsla(152,70%,45%,0); } 100% { box-shadow:0 0 0 0 hsla(152,70%,45%,0); } }
@media (max-width:720px) { .ab-row .btn { width:100%; justify-content:center; } }
@media (prefers-reduced-motion: reduce) { .ab-chip i { animation:none; } }

/* =====================================================================
   LOGIN CARD — animated redesign (icon fields, show/hide password,
   staggered intro, moving colour line, floating glow, shine button,
   spinner + shake on error). Intro plays once (.zl-intro), not on re-render.
   ===================================================================== */
.login-wrap.zl .zl-card > .zl-orb { position:absolute; z-index:0; border-radius:50%; pointer-events:none; filter:blur(2px); }
.zl-orb.o1 { width:150px; height:150px; left:-60px; bottom:-60px; background:radial-gradient(circle,rgba(34,109,180,.16),transparent 70%); animation:zlDrift1 9s ease-in-out infinite alternate; }
.zl-orb.o2 { width:110px; height:110px; right:-30px; bottom:30px; background:radial-gradient(circle,rgba(249,178,29,.16),transparent 70%); animation:zlDrift2 11s ease-in-out infinite alternate; }
@keyframes zlDrift1 { to { transform:translate(40px,-34px) scale(1.25); } }
@keyframes zlDrift2 { to { transform:translate(-36px,-26px) scale(.8); } }

/* colour line with a light sweep */
.login-wrap.zl .zl-card::before { background:
  linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent) -60% 0/38% 100% no-repeat,
  linear-gradient(90deg,#E42527 0 25%,#089949 25% 50%,#226DB4 50% 75%,#F9B21D 75% 100%);
  animation:zlLine 3.6s ease-in-out 1s infinite; }
@keyframes zlLine { 0% { background-position:-60% 0,0 0; } 55%,100% { background-position:170% 0,0 0; } }

/* brand badge: gentle float + soft ring */
.login-wrap.zl .zl-card-brand, .login-wrap.zl .zl-mbrand .brand-mark { position:relative; animation:zlFloat 4s ease-in-out infinite; }
.login-wrap.zl .zl-card-brand::after { content:""; position:absolute; inset:-5px; border-radius:18px; border:2px solid rgba(34,109,180,.35); opacity:0; animation:zlRing 3s ease-out infinite; }
@keyframes zlFloat { 50% { transform:translateY(-4px); } }
@keyframes zlRing { 0% { opacity:.7; transform:scale(.9); } 70%,100% { opacity:0; transform:scale(1.25); } }

/* fields */
.zl-inp { position:relative; transition:transform .25s cubic-bezier(.22,.8,.32,1); }
.zl-ic { position:absolute; left:14px; top:50%; transform:translateY(-50%); display:inline-flex; color:#98A2B3; pointer-events:none; transition:color .25s, transform .3s cubic-bezier(.34,1.56,.64,1); z-index:1; }
body .tri-app:has(.login-wrap) .zl .zl-inp input { padding-left:44px; width:100%; }
body .tri-app:has(.login-wrap) .zl .zl-inp #passwordInput { padding-right:48px; }
.zl-inp:focus-within { transform:translateY(-2px); }
.zl-inp:focus-within .zl-ic { color:#226DB4; transform:translateY(-50%) scale(1.15) rotate(-6deg); }
.zl-field:focus-within .zl-label { color:#226DB4; }
.zl-label { transition:color .25s; }
.zl-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:10px; background:transparent; color:#98A2B3; cursor:pointer; transition:background .2s, color .2s, transform .2s; z-index:2; }
.zl-eye:hover { background:#EAF2FB; color:#226DB4; }
.zl-eye:active { transform:translateY(-50%) scale(.9); }
.zl-eye.on { color:#226DB4; }

/* sign-in button */
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass.zl-go { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; }
body .tri-app:has(.login-wrap) .zl .login-form .btn-brass.zl-go::after { display:block; content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg); animation:zlShine 4.5s ease-in-out 1.6s infinite; }
@keyframes zlShine { 0% { left:-60%; } 35%,100% { left:130%; } }
.zl-go svg { transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.zl-go:hover svg { transform:translateX(5px); }
.zl-go.is-busy { cursor:progress; }
.zl-go.is-busy::after { display:none !important; }
.zl-spin { width:16px; height:16px; border-radius:50%; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:zlSpin .7s linear infinite; }
@keyframes zlSpin { to { transform:rotate(360deg); } }

/* messages + shake on error */
.login-wrap.zl .zl-msg { animation:zlMsg .35s cubic-bezier(.22,.8,.32,1) both; }
@keyframes zlMsg { from { opacity:0; transform:translateY(-6px) scale(.98); } }
.zl-card.zl-shake { animation:zlShake .45s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes zlShake { 15%,45%,75% { transform:translateX(-7px); } 30%,60%,90% { transform:translateX(7px); } }

/* one-time intro */
.zl-intro .zl-card { animation:zlCardIn .8s cubic-bezier(.22,.8,.32,1) both; }
@keyframes zlCardIn { from { opacity:0; transform:translateY(34px) scale(.94); filter:blur(6px); } }
.zl-intro .zl-card-brand, .zl-intro .zl-mbrand, .zl-intro .zl-title, .zl-intro .zl-sub, .zl-intro .zl-field, .zl-intro .zl-go, .zl-intro .zl-foot {
  animation-name:zlRise; animation-duration:.6s; animation-timing-function:cubic-bezier(.22,.8,.32,1); animation-fill-mode:both; animation-delay:calc(.25s + var(--d,0) * .08s); }
.zl-intro .zl-card-brand, .zl-intro .zl-mbrand { animation:zlRise .6s cubic-bezier(.22,.8,.32,1) .25s both, zlFloat 4s ease-in-out 1s infinite; }
.zl-intro .zl-foot { --d:8; }
@keyframes zlRise { from { opacity:0; transform:translateY(16px); } }
.zl-intro .zl-title::before { animation:zlBar .7s cubic-bezier(.22,.8,.32,1) .5s both; transform-origin:top; }
@keyframes zlBar { from { transform:scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  .zl-orb, .login-wrap.zl .zl-card::before, .login-wrap.zl .zl-card-brand, .login-wrap.zl .zl-card-brand::after, .zl-go::after, .zl-card.zl-shake,
  .zl-intro .zl-card, .zl-intro .zl-card-brand, .zl-intro .zl-mbrand, .zl-intro .zl-title, .zl-intro .zl-sub, .zl-intro .zl-field, .zl-intro .zl-go, .zl-intro .zl-foot, .zl-intro .zl-title::before { animation:none !important; }
}

/* fix: on phones the compact-login padding rule overrode the icon padding → text/placeholder overlapped the icon */
body .tri-app:has(.login-wrap) .login-wrap.zl .login-form .zl-inp input { padding-left:46px !important; padding-right:14px !important; }
body .tri-app:has(.login-wrap) .login-wrap.zl .login-form .zl-inp #passwordInput { padding-right:50px !important; }
.login-wrap.zl .zl-inp .zl-ic { left:15px; }

/* ---- Login footer: Powered By (desktop + mobile) ---- */
.zl-foot { width:100%; }
.zl-powered { margin-top:6px; font-size:.78rem; color:#667085; text-align:center; }
.zl-powered a { color:#226DB4; font-weight:600; text-decoration:none; }
.zl-powered a:hover { text-decoration:underline; }
@media (max-width: 900px) {
  .zl-powered { font-size:.74rem; margin-top:4px; padding-bottom:env(safe-area-inset-bottom); }
}