/* New look, being tried on Home first (designs A, B, C). Applies when body has class "nl".
   Feel: MyGate / Swiggy. Light grey page, white cards, small coloured icon chips, one blue for actions.
   Text never smaller than 16px, except tab labels and tiny tags (14px). */

.nl {
  --n-bg: #F2F4F7; --n-card: #FFFFFF; --n-line: #E7EAEE;
  --n-ink: #111827; --n-ink2: #374151; --n-muted: #5F6B7A;
  --n-blue: #00658F; --n-blue-d: #004E6F; --n-blue-s: #E0F1F8;
  --n-green: #18794E; --n-green-s: #E5F5EC;
  --n-orange: #B54708; --n-orange-s: #FEF0E3;
  --n-red: #C0262D; --n-red-s: #FDECEC;
  --n-purple: #6941C6; --n-purple-s: #F1ECFC;
  --n-font: "Noto Sans", "Noto Sans Tamil", "Nirmala UI", system-ui, sans-serif;
  --n-r: 16px; --n-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 0 0 1px var(--n-line);
}
.nl .screen, .nl .scroll { background: var(--n-bg); font-family: var(--n-font); }
.nl .scroll { padding: 0 16px 28px; }

/* Bottom tabs: plain, active tab in blue with a short bar on top. */
.nl .tabs { border-top: 1px solid var(--n-line); background: #fff; font-family: var(--n-font); }
.nl .tabs button { min-height: 60px; font-size: 14px; font-weight: 600; color: #6B7280; gap: 4px; }
.nl .tabs button::before { top: 0; width: 32px; height: 3px; margin-left: -16px; border-radius: 0 0 3px 3px; background: var(--n-blue); }
.nl .tabs button[aria-current="page"] { color: var(--n-blue); font-weight: 700; }
.nl .tabs svg { width: 24px; height: 24px; }

/* ---------- Shared pieces ---------- */
.hl { display: flex; flex-direction: column; gap: 12px; color: var(--n-ink); font-size: 16px; }
.hl button { font-family: inherit; }
.hl small { font-size: 16px; }

.hl-top { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 14px 0 4px; }
.hl-name { display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; min-height: 36px; color: var(--n-ink); text-align: left; min-width: 0; }
.hl-name .b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-name svg { width: 22px; height: 22px; flex: none; color: var(--n-muted); }
.hl-area { grid-column: 1; margin: 0; color: var(--n-muted); font-size: 16px; }
.hl-avatar { grid-row: 1; grid-column: 2; align-self: center; /* lines up with the building name (founder, 21-10-2026) */ position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--n-blue-s); color: var(--n-blue-d); font-weight: 800; font-size: 16px; }
.hl-avatar.dot::after { content: ""; position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--n-red); box-shadow: 0 0 0 2px var(--n-bg); }

.hl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 10px 2px -4px; }
.hl-head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.hl-head .cnt { font-size: 14px; font-weight: 700; color: #fff; background: var(--n-ink2); border-radius: 99px; min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; }
.hl-head button { background: none; border: 0; color: var(--n-blue); font-weight: 700; font-size: 16px; padding: 6px 0; min-height: 40px; }

.hl-card { background: var(--n-card); border-radius: var(--n-r); box-shadow: var(--n-shadow); border: 0; width: 100%; text-align: left; color: inherit; }
.hl-list > * + *::before { content: ""; position: absolute; left: 68px; right: 0; top: 0; height: 1px; background: var(--n-line); }

.ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.ic svg { width: 22px; height: 22px; }
.ic-blue { background: var(--n-blue-s); color: var(--n-blue); }
.ic-green { background: var(--n-green-s); color: var(--n-green); }
.ic-orange { background: var(--n-orange-s); color: var(--n-orange); }
.ic-red { background: var(--n-red-s); color: var(--n-red); }
.ic-purple { background: var(--n-purple-s); color: var(--n-purple); }

.hl-row { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; min-height: 64px; background: none; border: 0; text-align: left; color: inherit; }
.hl-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hl-row b { font-weight: 600; font-size: 16px; line-height: 1.35; }
.hl-row b.amt { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.hl-row small { color: var(--n-muted); line-height: 1.35; }
.hl .late { color: var(--n-red); font-weight: 600; }
.hl .chev { color: #9AA3AF; }

.hl-btn { flex: none; min-height: 44px; padding: 0 20px; border-radius: 12px; border: 0; background: var(--n-blue); color: #fff; font-weight: 700; font-size: 16px; }
.hl-btn:active { background: var(--n-blue-d); }
.hl-btn.full { width: 100%; }
.hl-btn.white { background: #fff; color: var(--n-blue-d); }
.hl-link { flex: none; background: none; border: 0; color: var(--n-blue); font-weight: 700; font-size: 16px; min-height: 44px; padding: 0 4px; }

.hl-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px 12px; color: var(--n-purple); font-size: 16px; border-top: 1px solid var(--n-line); }
.hl-note svg { width: 18px; height: 18px; flex: none; }
.hl-later { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px 12px; border-top: 1px solid var(--n-line); color: var(--n-ink2); }
.hl-later b { font-weight: 700; white-space: nowrap; }
.hl-foot { margin: 0 4px; color: var(--n-muted); font-size: 16px; }
.hl-empty { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.hl-empty b { font-weight: 600; }

.bar { display: block; height: 6px; border-radius: 99px; background: #E9EDF2; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--n-blue); border-radius: 99px; }

/* Alerts: a slim red strip, not a big box. */
.hl-alerts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.hl-alert { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px 10px 14px; border-radius: 14px; border: 1px solid #F6C9C9; background: var(--n-red-s); color: var(--n-ink); }
.hl-alert > svg { width: 22px; height: 22px; color: var(--n-red); flex: none; }
.hl-alert .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hl-alert b { font-weight: 700; line-height: 1.3; }
.hl-alert small { color: var(--n-red); font-weight: 500; }

/* Rows that come from older screens (To do, requests) inside the new cards. */
.hl-legacy .row { background: none; box-shadow: none; border-radius: 0; padding: 12px 14px; min-height: 64px; gap: 14px; font-family: var(--n-font); }
.hl-legacy .row .t { font-size: 16px; font-weight: 600; }
.hl-legacy .row .s { font-size: 16px; color: var(--n-muted); }
.hl-legacy .lead { width: 40px; height: 40px; border-radius: 12px; }
.hl-legacy .lead svg { width: 22px; height: 22px; }
.hl-legacy .lead.tone-teal { background: var(--n-blue-s); color: var(--n-blue); }
.hl-legacy .lead.tone-wait, .hl-legacy .lead.tone-silk { background: var(--n-purple-s); color: var(--n-purple); }
.hl-legacy .lead.tone-bad { background: var(--n-red-s); color: var(--n-red); }
.hl-legacy .lead.tone-due { background: var(--n-orange-s); color: var(--n-orange); }
.hl-legacy .lead.tone-ok { background: var(--n-green-s); color: var(--n-green); }
.hl-legacy .btn.b-small { min-height: 40px; border-radius: 10px; padding: 0 14px; font-size: 15px; background: var(--n-blue); }
.hl-legacy .btn.b-small svg { width: 18px; height: 18px; }
.hl-legacy .row + .row::before { content: ""; position: absolute; left: 68px; right: 0; top: 0; height: 1px; background: var(--n-line); }

/* ---------- A: Compact list ---------- */
.hl-coll { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.hl-coll .l1 { display: flex; justify-content: space-between; align-items: center; }
.hl-coll .l1 b { font-size: 17px; font-weight: 700; }
.hl-coll small { color: var(--n-muted); }

/* ---------- B: Summary tiles ---------- */
.hl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.hl-tiles.one { grid-template-columns: 1fr; }
.hl-tile { background: var(--n-card); border: 0; border-radius: var(--n-r); box-shadow: var(--n-shadow); padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; color: inherit; min-height: 168px; }
.hl-tile > small { color: var(--n-muted); font-weight: 600; }
.hl-tile b { font-size: 17px; font-weight: 700; line-height: 1.25; }
.hl-tile b.big { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.hl-tile .of { font-size: 18px; color: var(--n-muted); font-weight: 700; }
.hl-tile > span { color: var(--n-muted); }
.hl-tile .bar { width: 100%; margin-top: auto; }
.hl-tile .hl-btn { margin-top: auto; }
.hl-tag { font-size: 14px !important; font-weight: 700; color: var(--n-purple) !important; }
.hl-swipe { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; }
.hl-swipe::-webkit-scrollbar { display: none; }
.hl-scard { flex: none; width: 220px; scroll-snap-align: start; background: var(--n-card); border: 0; border-radius: var(--n-r); box-shadow: var(--n-shadow); padding: 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; color: inherit; }
.hl-scard b { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hl-scard small { color: var(--n-muted); margin-top: auto; }

/* ---------- C: Blue summary card + shortcuts ---------- */
.hl-blue { background: var(--n-blue); color: #fff; border-radius: 20px; padding: 4px 16px; margin-top: 6px; box-shadow: 0 8px 20px -10px rgba(0, 101, 143, .6); }
.hl-blue .bsec { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; width: 100%; background: none; border: 0; color: inherit; text-align: left; }
.hl-blue .bsec + .sec { border-top: 1px solid rgba(255, 255, 255, .22); }
.hl-blue small { color: #CDE6F0; font-weight: 600; }
.hl-blue .l1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hl-blue .l1 b { font-size: 18px; font-weight: 700; }
.hl-blue .l1 b.big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.hl-blue .l1 svg { width: 22px; height: 22px; flex: none; }
.hl-blue span { color: #E0EEF4; }
.hl-blue .bar { background: rgba(255, 255, 255, .25); margin: 6px 0 2px; }
.hl-blue .bar i { background: #fff; }
.hl-short { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; background: var(--n-card); border-radius: var(--n-r); box-shadow: var(--n-shadow); padding: 12px 6px; }
.hl-short button { display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--n-ink2); font-size: 14px; font-weight: 600; line-height: 1.2; text-align: center; min-height: 80px; padding: 2px; }
.hl-short .ic { width: 48px; height: 48px; border-radius: 50%; }
.hl-short .ic svg { width: 24px; height: 24px; }

/* =====================================================================
   APP-WIDE LAYER for design C (founder chose C on 21-10-2026).
   Action colour #00658F (founder, 21-10-2026). Same look on every screen: new font, light grey page, white 16px cards,
   small coloured icon chips, blue only for actions, blue summary card as the
   one "hero" per screen. Status colours: green done, purple waiting,
   orange due, red overdue or problem.
   ===================================================================== */
.nl {
  --bg: #F2F4F7; --bg-2: #EAEDF1; --surface: #FFFFFF; --line: #E7EAEE; --line-2: #D0D5DD;
  --ink: #111827; --ink-2: #374151; --muted: #5F6B7A;
  --ok: #18794E; --ok-deep: #11603D; --ok-soft: #E5F5EC; --ok-line: #A6DDBE;
  --wait: #6941C6; --wait-soft: #F1ECFC; --wait-line: #CDBEF3;
  --due: #B54708; --due-soft: #FEF0E3; --due-line: #F5C79E;
  --bad: #C0262D; --bad-soft: #FDECEC; --bad-line: #F6C9C9;
  --peacock: #00658F; --peacock-deep: #004E6F; --peacock-soft: #E0F1F8; --peacock-line: #A8D3E5;
  --zari: #00658F; --zari-bright: #00658F; --zari-soft: #E0F1F8; --zari-ink: #004E6F; --zari-line: #A8D3E5;
  --pay: #00658F; --pay-ink: #FFFFFF; --pay-press: #004E6F;
  --display: "Noto Sans", "Noto Sans Tamil", "Nirmala UI", system-ui, sans-serif;
  --body: "Noto Sans", "Noto Sans Tamil", "Nirmala UI", system-ui, sans-serif;
  --fs-row: 16px; --fs-h3: 18px; --fs-h1: 26px; --fs-hero: 34px;
  --r-btn: 12px; --r-field: 12px; --r-row: 16px; --r-card: 16px; --r-hero: 20px;
  --e1: 0 0 0 1px var(--line); --e2: 0 1px 2px rgba(17, 24, 39, .05), 0 0 0 1px var(--line);
}
.nl .screen, .nl .scroll, .nl .sheet { font-family: var(--body); }

/* Pushed screens: a white top bar with a plain back arrow, then the title. */
.nl .backbar { background: #fff; border-bottom: 1px solid var(--line); padding: 4px 8px; margin: 0 -16px; }
.nl .back { background: none; box-shadow: none; color: var(--ink); font-size: 16px; font-weight: 600; min-height: 48px; padding: 0 12px 0 4px; }
.nl .back svg { color: var(--ink); }
.nl .title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 16px 2px 12px; }
.nl .eyebrow { font-size: 14px; letter-spacing: .06em; color: var(--muted); }
.nl .subtitle { font-size: 16px; margin: -6px 2px 14px; }

/* Section headings: plain bold text, "See all" link in blue without an arrow. */
.nl .sec, .nl .slot { margin: 10px 2px -4px; align-items: baseline; }
.nl .sec h2, .nl .slot > span { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.nl .sec button::after, .nl .slot button::after { content: none; }
.nl .slot > span .n { font-size: 14px; background: var(--ink-2); min-width: 22px; height: 22px; padding: 0 7px; }
.nl .stack { gap: 12px; }

/* Cards and grouped lists */
.nl .card { border-radius: 16px; padding: 16px; box-shadow: var(--e2); }
.nl .card h3 { font-size: 18px; font-weight: 700; }
.nl .list:has(> .row:first-child):not(:has(> :not(.row))) { border-radius: 16px; box-shadow: var(--e2); }
.nl .list:has(> .row:first-child):not(:has(> :not(.row))) > .row + .row::before { left: 68px; background: var(--line); }
.nl .row { padding: 12px 14px; min-height: 64px; gap: 14px; border-radius: 16px; box-shadow: var(--e2); }
.nl button.row:active, .nl a.row:active { background: #F7F8FA; }
.nl .row .t { font-size: 16px; font-weight: 600; }
.nl .row .s { font-size: 16px; color: var(--muted); }
.nl .chev { color: #9AA3AF; }
.nl .lead { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; font-weight: 800; background: #E0F1F8; color: #00658F; }
.nl .lead svg { width: 22px; height: 22px; }
.nl .lead.soft, .nl .lead.tone-teal { background: #E0F1F8; color: #00658F; }
.nl .lead.tone-wait, .nl .lead.tone-silk { background: var(--wait-soft); color: var(--wait); }
.nl .lead.tone-bad { background: var(--bad-soft); color: var(--bad); }
.nl .lead.tone-due { background: var(--due-soft); color: var(--due); }
.nl .lead.tone-ok { background: var(--ok-soft); color: var(--ok); }
.nl .row .avatar { box-shadow: none; }
.nl .row.urgent { background: var(--bad-soft); box-shadow: 0 0 0 1px var(--bad-line); }
.nl .alert-tag { font-size: 14px; letter-spacing: .03em; }
.nl .empty { border: 1.5px dashed var(--line-2); background: #fff; border-radius: 16px; }
.nl .alert { border-radius: 14px; }
.nl .avatar { background: #E0F1F8; color: #004E6F; box-shadow: none; font-weight: 800; }
.nl .prof .avatar { box-shadow: none; }
.nl .prof h2 { font-size: 26px; font-weight: 800; }

/* Buttons: blue for the main action, white with a grey outline for the rest. */
.nl .btn { min-height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; box-shadow: none; }
.nl .b-ghost { background: #fff; color: #00658F; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.nl .b-danger { background: #fff; color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad-line); }
.nl .b-small { min-height: 44px; font-size: 15px; border-radius: 10px; }

/* The one summary card per screen is blue (same as the Home card). */
.nl .hero, .nl .hero.ok, .nl .hero.leaf, .nl .hero.peacock { background: #00658F; color: #fff; border: 0; border-radius: 20px; padding: 18px 16px; box-shadow: 0 8px 20px -10px rgba(0, 101, 143, .6); }
.nl .hero .lbl, .nl .hero .sub, .nl .hero .dline small, .nl .hero .meta, .nl .hero .hint { color: #CDE6F0; }
.nl .hero .amt { color: #fff; font-size: 34px; font-weight: 800; }
.nl .hero .amt small { color: #CDE6F0; }
.nl .hero .warn { background: rgba(255, 255, 255, .14); color: #fff; }
.nl .hero .dlines { background: rgba(255, 255, 255, .12); }
.nl .hero .dline + .dline { border-top-color: rgba(255, 255, 255, .18); }
.nl .hero .dline .late { color: #FFD3D3; }
.nl .hero .later { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); }
.nl .hero .later .lbl { color: #CDE6F0; }
.nl .hero .btn.b-pay, .nl .hero .btn.b-primary { background: #fff; color: #004E6F; }
.nl .hero .btn.b-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.nl .hero .dues-chip { background: rgba(255, 255, 255, .16); color: #fff; }
.nl .hero .progress, .nl .hero .meter { background: rgba(255, 255, 255, .25); }
.nl .hero .progress i, .nl .hero .meter i { background: #fff; }
.nl .hero a { color: #fff; }
.nl .meter, .nl .progress { height: 6px; }
.nl .progress i, .nl .meter i { background: #00658F; }

/* "All paid" card: a small green tick instead of the big seal. */
.nl .paidcard.leafy { background: #fff; box-shadow: var(--e2); }
.nl .seal { width: 40px; height: 40px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); box-shadow: none; }
.nl .seal svg { width: 22px; height: 22px; }
.nl .seal.wait { background: var(--wait-soft); color: var(--wait); box-shadow: none; }
.nl .paidrow b { font-size: 16px; font-weight: 700; }
.nl .collect .head b { font-size: 18px; font-weight: 700; }

/* Shortcut tiles, number tiles */
.nl .quick button, .nl .attn button, .nl .stat { border-radius: 16px; box-shadow: var(--e2); }
.nl .quick svg { color: #00658F; }
.nl .stat .v, .nl .attn .n { font-weight: 800; }
.nl .big { font-weight: 800; }

/* Forms */
.nl .field > label, .nl .field > .flabel, .nl .flabel { font-size: 16px; font-weight: 700; }
.nl .field input:not([type=radio]):not([type=checkbox]), .nl .field textarea, .nl .field select { border: 1.5px solid var(--line-2); border-radius: 12px; min-height: 52px; font-size: 17px; }
.nl .field input:focus, .nl .field textarea:focus, .nl .field select:focus { border-color: #00658F; box-shadow: 0 0 0 3px #E0F1F8; }
.nl .phonein { border: 1.5px solid var(--line-2); border-radius: 12px; }
.nl .phonein .cc { border-right: 1.5px solid var(--line-2); background: var(--bg); }
.nl .chip { box-shadow: inset 0 0 0 1.5px var(--line-2); min-height: 44px; font-size: 16px; }
.nl .chip:has(input:checked), .nl .chip[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px #00658F; background: #E0F1F8; color: #004E6F; }
.nl .toggle { border-radius: 12px; }
.nl .toggle button { border-radius: 10px; min-height: 44px; }
.nl .switch input:checked { background: #00658F; }
.nl .check input, .nl .found input { accent-color: #00658F; }

/* Sheets and toasts */
.nl .sheet { background: #fff; border-radius: 20px 20px 0 0; }
.nl .sheet-h h2 { font-size: 20px; font-weight: 800; }
.nl .toast { border-radius: 14px; }

/* Services */
.nl .svctile { border-radius: 16px; box-shadow: var(--e2); min-height: 112px; }
.nl .svctile::after { content: none; }
.nl .svctile .nm { font-size: 16px; }
.nl .svcicon { width: 44px; height: 44px; border-radius: 12px; }
.nl .svcicon svg { width: 24px; height: 24px; }
.nl .g-repairs { --g-soft: #E0F1F8; --g-ink: #00658F; }
.nl .g-cleaning { --g-soft: #E5F5EC; --g-ink: #18794E; }
.nl .g-care { --g-soft: #FEF0E3; --g-ink: #B54708; }
.nl .g-head b { font-size: 18px; font-weight: 700; }
.nl .g-head i { background: var(--line); height: 1px; }
.nl .svc-hero, .nl .qstep, .nl .timeline, .nl .qr, .nl .tablewrap { border-radius: 16px; box-shadow: var(--e2); }
.nl .qstep > .qh { font-size: 18px; }
.nl .day, .nl .slotc { background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); border-radius: 14px; }
.nl .day:has(input:checked) { background: #00658F; box-shadow: none; }
.nl .slotc:has(input:checked) { background: #E0F1F8; box-shadow: inset 0 0 0 1.5px #00658F; }

/* Receipt and flats */
.nl .receipt { border-radius: 16px 16px 6px 6px; box-shadow: var(--e2); }
.nl .receipt .rhead b { font-weight: 800; }
.nl .bldg { border-radius: 16px; box-shadow: var(--e2); }
.nl .person { box-shadow: 0 0 0 1px var(--line); }
.nl .person .av { background: #E0F1F8; color: #004E6F; }
.nl .person .av.t { background: var(--wait-soft); color: var(--wait); }

/* Sign-in: blue top (same blue as the Home summary card), white text. */
.nl .auth-hero { background: #00658F; color: #fff; border: 0; border-radius: 0 0 24px 24px; }
.nl .auth-hero h1, .nl .auth-hero .brand b { color: #fff; }
.nl .auth-hero p { color: #CDE6F0; }
.nl .auth-hero .logo { background: #fff; color: #00658F; }
.nl .auth-hero .toggle { background: rgba(255, 255, 255, .18); }
.nl .auth-hero .toggle button { color: #fff; }
.nl .auth-hero .toggle button[aria-pressed="true"] { background: #fff; color: #004E6F; }

/* Number tiles: no coloured side stripe; the number's colour carries the meaning. */
.nl .attn button::before { content: none; }

/* Keyboard focus ring in the action colour. */
.nl :focus-visible { outline-color: #00658F; }


/* ---------- Alerts on Home: white card, red outline, red icon circle, two lines ---------- */
.nl { --al-solid: #C0262D; --al-on: #FFFFFF; --al-text: #C0262D; --al-line: #F6C9C9; --al-soft: #FDECEC; }
.al { width: 100%; text-align: left; border: 0; color: var(--n-ink); font-family: inherit; display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 12px 14px; min-height: 68px; box-sizing: border-box; box-shadow: 0 0 0 1px var(--al-line); }
.al .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--al-soft); color: var(--al-text); }
.al .ic svg { width: 22px; height: 22px; }
.al .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al b { font-weight: 700; font-size: 16px; line-height: 1.3; }
.al small { font-size: 16px; line-height: 1.3; color: var(--al-text); font-weight: 600; }

/* ---------- Notice page: one label line, then the event date block ---------- */
.nt-label { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--n-ink2); margin-top: -4px; }
.nt-label .ic { width: 32px; height: 32px; border-radius: 10px; }
.nt-label .ic svg { width: 18px; height: 18px; }
.nt-label.urgent { color: var(--al-text); }
.nt-label.urgent .ic { background: var(--al-soft); color: var(--al-text); }
.nt-when { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 12px; box-shadow: var(--e2); }
.nt-when .dt { width: 56px; min-height: 60px; flex: none; border-radius: 12px; background: #00658F; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.nt-when.urgent .dt { background: var(--al-solid); color: var(--al-on); }
.nt-when .dt small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.nt-when .dt b { font-size: 24px; font-weight: 800; }
.nt-when .grow { display: flex; flex-direction: column; gap: 2px; }
.nt-when .grow b { font-size: 16px; }
.nt-when .rel { color: var(--n-muted); }
.nt-when.urgent .rel { color: var(--al-text); font-weight: 700; }

/* ---------- Summary card ---------- */
.hl-blue .l1 .unit { font-size: 16px; font-weight: 600; color: #CDE6F0; letter-spacing: 0; }
/* Shortcut status badge on "Pay dues" */
.hl-short .sc { position: relative; display: inline-flex; }
.sc-badge { position: absolute; top: -3px; right: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px #fff; }
.sc-badge svg { width: 13px; height: 13px; stroke-width: 3; }
.sc-badge.due { background: #C0262D; }
.sc-badge.wait { background: #6941C6; }
.sc-badge.ok { background: #18794E; }
.hl-short .sc-due { color: #C0262D; font-weight: 700; }
.hl-short .sc-ok { color: #18794E; font-weight: 700; }
/* D: "You have … due" strip inside the collection card (a lighter band so it reads as your own line). */
.hl-blue .bsec.mine { width: auto; margin: 0 -16px; padding: 12px 16px 14px; background: rgba(255, 255, 255, .12); border-top: 0; }
.hl-blue .bsec.mine:last-child { border-radius: 0 0 20px 20px; margin-bottom: -4px; }
.hl-blue .bsec.mine .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hl-blue .bsec.mine b { font-size: 17px; }

/* ---------- One-line rows (To do, Announcements): headline + summary, each cut with "…" if too long ---------- */
.hl-row.one { cursor: pointer; }
.hl-row.one b, .hl-row.one small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-row.one small { color: var(--n-muted); }
.hl-btn.sm { min-height: 40px; padding: 0 14px; font-size: 15px; border-radius: 10px; display: inline-flex; align-items: center; text-decoration: none; }
.hl-btn.ghost { background: #fff; color: #00658F; box-shadow: inset 0 0 0 1.5px var(--line-2, #D0D5DD); }
.hl-row.one b:has(.keep) { display: flex; min-width: 0; }
.hl-row.one b .cut { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-row.one b .keep { flex: none; white-space: nowrap; }

/* ---------- Blue summary cards: soft gradient with faint rings (founder chose option 4, 21-10-2026) ---------- */
.nl .hl-blue, .nl .hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #00577C 0%, #00658F 50%, #137BA3 100%); }
.nl .hl-blue::before, .nl .hero::before { content: ""; position: absolute; z-index: -1; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%; display: block; opacity: 1;
  background: radial-gradient(circle, transparent 0 38%, rgba(255, 255, 255, .09) 38% 39%, transparent 39% 56%, rgba(255, 255, 255, .08) 56% 57%, transparent 57% 74%, rgba(255, 255, 255, .07) 74% 75%, transparent 75%); }
/* Every one-part card has the same height; the content sits in the middle. */
.nl .hl-blue > .bsec:only-child { min-height: 132px; justify-content: center; }

/* ---------- Profile layouts ---------- */
.pf { gap: 12px; }
.pf-head { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 16px; padding: 14px; box-shadow: var(--e2); }
.pf-head .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pf-head b { font-size: 19px; font-weight: 800; }
.pf-head small { color: var(--n-muted); }
.pf-av { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--n-blue-s); color: var(--n-blue-d); font-weight: 800; font-size: 19px; flex: none; display: grid; place-items: center; font-family: inherit; }
.pf-av.white { background: #fff; color: #004E6F; }
.pf-edit { flex: none; background: none; border: 0; color: #00658F; font-weight: 700; font-size: 16px; min-height: 44px; padding: 0 4px; font-family: inherit; }
.pf-new { flex: none; background: var(--n-red); color: #fff; font-size: 13px; font-weight: 700; border-radius: 99px; padding: 2px 8px; }
.hl-head .pf-new { font-size: 13px; }
.pf-signout { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; color: var(--n-red); font-weight: 700; font-size: 16px; }
.pf-signout svg { width: 20px; height: 20px; }
.pf .hl-row b.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pf .hl-row small { color: var(--n-muted); }
.pf .hl-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* B: header card */
.pf-card { padding: 16px; }
.pf-cardtop { display: flex; align-items: center; gap: 14px; }
.pf-cardtop .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-cardtop b { font-size: 19px; font-weight: 800; }
.pf-cardtop span { color: #E0EEF4; }
.pf-cardrole { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .22); color: #E0EEF4; font-weight: 600; }
.pf-flats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pf-flat { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--e2); padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; font-family: inherit; color: inherit; }
.pf-flat b { font-size: 16px; }
.pf-flat small { font-size: 16px; font-weight: 600; }
.pf-flat small.due { color: var(--n-red); } .pf-flat small.ok { color: var(--n-green); }
/* C: tabs */
.pf-tabs { background: #EAEDF1; }
/* Profile rows follow the one-line rule: headline and summary each on one line. */
.pf .hl-row b, .pf .hl-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
/* Full profile */
.pf-tag { flex: none; font-size: 14px; font-weight: 700; color: #00658F; background: #E0F1F8; border-radius: 99px; padding: 2px 10px; }
.pf-sum { font-weight: 700; color: var(--n-ink2); }
.pf-switch { cursor: pointer; }
.pf-switch input { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 99px; background: #D0D5DD; position: relative; flex: none; margin: 0; cursor: pointer; transition: background .2s; }
.pf-switch input::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.pf-switch input:checked { background: #00658F; }
.pf-switch input:checked::after { transform: translateX(20px); }
.pf-danger b { color: var(--n-red); }
.pf-text { padding: 4px 16px; }
.pf-text p { margin: 12px 0; line-height: 1.5; }
.pf .hl-row small.wrap { white-space: normal; }
.pf .hl-row .hl-btn.sm { padding: 0 10px; }
.pf .hl-row .hl-btn.sm svg { width: 20px; height: 20px; }
.pf .hl-row .p-tbd, .pf .hl-head .p-tbd { font-size: 13px; }
/* Larger text option */
.big-text .scroll { zoom: 1.12; }
/* Personal details */
.pf-personal .pf-head { box-shadow: none; border-radius: 0; }
.pf-av img, .hl-avatar img, .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.hl-avatar, .avatar { overflow: hidden; }
.hl-avatar.dot { overflow: visible; }
.pf-av { overflow: hidden; }
.pf-av.big { width: 80px; height: 80px; font-size: 26px; }
.pf-photo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-photo-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pf-vis { display: inline-block; font-size: 14px; font-weight: 600; color: #00658F; background: #E0F1F8; border-radius: 99px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.pf-ec { display: grid; gap: 14px; }
/* Profile v3: flat page, notifications, person page */
.pf-flattop { display: flex; align-items: center; gap: 14px; padding: 16px; }
.pf-flattop .plate { min-width: 56px; height: 44px; font-size: 20px; display: inline-grid; place-items: center; border-radius: 10px; }
.pf-flattop .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-flattop b { font-size: 18px; }
.pf-flattop small { color: var(--n-muted); font-size: 16px; }
.pf-link { align-self: flex-end; background: none; border: 0; color: #00658F; font-weight: 700; font-size: 16px; min-height: 44px; padding: 0 2px; font-family: inherit; }
.pf .hl-row.unread b { font-weight: 800; }
.pf-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--n-red); flex: none; }
.pf-note { padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.pf-note p { margin: 0; font-size: 18px; line-height: 1.5; }
.pf-note small { color: var(--n-muted); font-size: 16px; }
.pf-person { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; text-align: center; }
.pf-person b { font-size: 22px; font-weight: 800; }
.pf-person small { color: var(--n-muted); font-size: 16px; }
.pf-av.xl { width: 88px; height: 88px; font-size: 28px; margin-bottom: 4px; }
.pf-av.sm { width: 40px; height: 40px; font-size: 15px; }
.pf .hl-head .pf-vis { font-size: 13px; }
/* Emergency contact flow */
.pf-ec-intro { display: flex; align-items: center; gap: 14px; padding: 16px; }
.pf-ec-intro p { margin: 0; line-height: 1.5; }
.pf-ec-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; text-align: center; }
.pf-ec-card b { font-size: 20px; font-weight: 800; }
.pf-ec-card small { color: var(--n-muted); font-size: 16px; }
.pf-ec-card .pf-av.big { background: var(--n-red-s); color: var(--n-red); }
/* Edit page: About you form inside a card */
.pf-form { padding: 16px; }
.pf-form .form { gap: 16px; }
.pf-personal { overflow: hidden; }
/* Edit page without pills: photo with a camera badge, locked mobile field, grey helper lines */
.pf-photo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pf-photo-pick { position: relative; cursor: pointer; display: inline-block; }
.pf-cam { position: absolute; right: -2px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%; background: #00658F; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; }
.pf-cam svg { width: 17px; height: 17px; }
.pf-textbtn { background: none; border: 0; color: #00658F; font-weight: 700; font-size: 16px; min-height: 40px; padding: 0 8px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; }
button.pf-textbtn[data-a="removePhoto"] { color: var(--n-red); }
.pf-locked { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 12px; background: #F2F4F7; border: 1.5px solid #E4E7EC; color: var(--n-ink2); font-size: 17px; }
.pf-locked svg { width: 18px; height: 18px; color: var(--n-muted); flex: none; }
.pf-under { margin: -4px 4px 0; }
.pf-tick { width: 28px; height: 28px; border-radius: 50%; background: #00658F; color: #fff; display: grid; place-items: center; flex: none; }
.pf-tick svg { width: 16px; height: 16px; stroke-width: 3; }
.pf-person .pf-pos { color: #00658F; font-weight: 700; }
/* Edit page: one form with three sections */
.pf-sections { display: flex; flex-direction: column; gap: 12px; }
.pf-form { display: flex; flex-direction: column; gap: 16px; }
.pf-textbtn svg { width: 18px; height: 18px; margin-right: 6px; }
.pf-textbtn.danger { color: var(--n-red); align-self: flex-start; padding: 0; }
.hl-head .pf-textbtn { min-height: 36px; padding: 0; font-size: 15px; }
.pf-flatsec { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.pf-flatid { display: flex; gap: 28px; }
.pf-flatid small { display: block; color: var(--n-muted); font-size: 14px; font-weight: 600; }
.pf-flatid b { font-size: 22px; font-weight: 800; }
.pf-line { margin: 0; font-size: 16px; }
/* Tenant fields appear only when "Rented out" is chosen. */
.pf-tenant { display: none; flex-direction: column; gap: 14px; padding: 14px; border-radius: 12px; background: #F7F8FA; }
.pf-flatsec:has(input[value="rented"]:checked) .pf-tenant { display: flex; }
.pf-wait { display: flex; gap: 10px; align-items: flex-start; color: #6941C6; font-weight: 600; }
.pf-wait svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.pf-flatsec .pf-textbtn { align-self: flex-start; padding: 0; }
/* My flat: one row with Change; the choices open inside the card (no pills) */
.pf-flatsec { padding: 0; gap: 0; }
.pf-flatrow { display: flex; align-items: center; gap: 14px; padding: 12px 14px; min-height: 68px; }
.pf-flatrow .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-flatrow b { font-size: 16px; font-weight: 700; }
.pf-flatrow small { color: var(--n-muted); font-size: 16px; }
.pf-flatrow .pf-textbtn { padding: 0 2px; }
.pf-waittext { color: #6941C6; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pf-waittext svg { width: 16px; height: 16px; }
.pf-fe { position: absolute; opacity: 0; pointer-events: none; }
.pf-flatedit { display: none; flex-direction: column; gap: 14px; padding: 4px 14px 16px; border-top: 1px solid var(--n-line); padding-top: 14px; }
.pf-flatsec:has(.pf-fe:checked) .pf-flatedit { display: flex; }
.pf-flatsec:has(.pf-fe:checked) .pf-flatrow .pf-textbtn { color: var(--n-muted); }
/* Segmented control: one row, three equal parts */
.pf-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: #EAEDF1; border-radius: 12px; }
.pf-seg label { position: relative; cursor: pointer; }
.pf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.pf-seg span { display: grid; place-items: center; min-height: 44px; border-radius: 9px; font-weight: 600; font-size: 15px; color: var(--n-ink2); text-align: center; line-height: 1.2; padding: 0 4px; }
.pf-seg input:checked + span { background: #fff; color: #004E6F; font-weight: 700; box-shadow: 0 1px 3px rgba(17, 24, 39, .15); }
.pf-seg input:focus-visible + span { outline: 3px solid #00658F; outline-offset: 1px; }
.pf-tenant { padding: 0; background: none; }
.pf-flatrow small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-waittext { display: inline; }
button.pf-locked { width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
/* Tenant invite */
.pf-invite { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 0 14px 14px; }
.pf-invite .btn { width: 100%; }
.pf-invite .hint { margin: 0; }
.pf-invbanner { display: flex; gap: 12px; align-items: flex-start; background: #E0F1F8; color: #004E6F; border-radius: 14px; padding: 12px 14px; font-weight: 600; line-height: 1.4; }
.pf-invbanner svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
/* Notification outcome line */
.pf-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-weight: 700; }
.pf-status svg { width: 20px; height: 20px; flex: none; }
.pf-status-green { background: #E5F5EC; color: #18794E; }
.pf-status-red { background: #FDECEC; color: #C0262D; }
.pf-status-orange { background: #FEF0E3; color: #B54708; }
.pf-status-blue { background: #E0F1F8; color: #004E6F; }
.pf .hl-row small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Notification row: ⋮ menu instead of the arrow */
.pf-noterow { cursor: pointer; padding-right: 4px; }
.pf-kebab { flex: none; width: 44px; height: 44px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: var(--n-muted); cursor: pointer; }
.pf-kebab svg { width: 22px; height: 22px; }
.pf-kebab:active { background: #EAEDF1; }
/* Swipe on notifications: left = delete (red), right = read (blue); locked requests show grey "Decide first" */
.pf-swipelist { overflow: hidden; }
.pf-swipe { position: relative; overflow: hidden; }
.pf-swipe-bg { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; font-weight: 700; color: #fff; background: #00658F; }
.pf-swipe-bg span { display: inline-flex; align-items: center; gap: 6px; }
.pf-swipe-bg svg { width: 20px; height: 20px; }
.pf-swipe-bg .r { visibility: hidden; }
.pf-swipe[data-dir="left"] .pf-swipe-bg { background: var(--n-red); }
.pf-swipe[data-dir="left"] .pf-swipe-bg .l { visibility: hidden; }
.pf-swipe[data-dir="left"] .pf-swipe-bg .r { visibility: visible; }
.pf-swipe.locked[data-dir="left"] .pf-swipe-bg { background: #98A2B3; }
.pf-noterow { background: #fff; position: relative; z-index: 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .2s ease; }
.pf-noterow.dragging { transition: none; }
.pf-disabled { opacity: .7; }
.pf-disabled small { color: var(--n-muted); }
.pf-swipelist > .pf-swipe::before { content: none; }
.pf-swipelist > .pf-swipe + .pf-swipe .pf-noterow { box-shadow: inset 0 1px 0 var(--n-line); }