/* @import MUST be the very first rule in the stylesheet (CSS spec: nothing but @charset may precede it) or a spec-compliant parser is required to drop it entirely. It used to sit after ~75 lines of :root rules — some engines are lenient about that and loaded the fonts anyway, which is exactly why this looked fine on desktop while silently falling back to system fonts on stricter mobile engines (notably iOS WebKit). Moved here so every browser loads it the same way. */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;650;700&family=Onest:wght@400;450;500;550;600;650;700&family=JetBrains+Mono:wght@400;500&display=swap"); :root{ /* Dark canvas + one loud accent (lime) for every primary action/brand moment, off-white text, and a small set of jewel-tone chip colours for tags/badges/notes — each with a near-black "on" pair for contrast, same pattern as before, just flipped for a dark surface. */ --bg:#0e0f13; --card:#15171c; --raised:#1b1e24; --ink:#f5f7ec; /* 17.7:1 on --bg */ --ink2:#a7adb8; /* 8.5:1 on --bg */ --ink3:#7a8190; /* 4.9:1 on --bg */ --line:#262933; --line2:#565d6b; --lime:#d7ff3f; --lime-d:#b9e62a; --on-lime:#10120a; --lime-rgb:215,255,63; --shadow-card:0 2px 10px rgba(0,0,0,.3); --green:#5eead4; --green-d:#2dd4bf; --on-green:#063a36; --rose:#fb7185; --rose-d:#f43f5e; --on-rose:#3f0d14; --cream:#fde68a; --on-cream:#422006; --sky:#7dd3fc; --on-sky:#082f49; --lilac:#c4b5fd; --on-lilac:#2e1065; --good:#4ade80; --bad:#ff6b6b; --navh:80px; /* glass-panel recipe — lifted from a Figma glassmorphism dashboard kit (dark translucent gradient + backdrop blur + a faint cool-toned border + an inset shadow for depth) and re-based onto our own dark palette. Used sparingly: chrome/navigation and marketing cards, never on the data-bearing colour-fill tiles where it would fight legibility. */ --glass-bg:linear-gradient(180deg, rgba(21,23,28,.72), rgba(14,15,19,.72)); --glass-border:rgba(140,150,190,.22); --glass-shadow:inset 0 1px 14px rgba(0,0,0,.22), 0 8px 28px rgba(0,0,0,.4); /* the toast stays a dark solid pill in BOTH themes per the design (a light-glass toast on a light canvas reads as a ghost) */ --toast-bg:rgba(30,33,41,.95); --toast-fg:#f5f7ec; } /* ── light theme — tokens lifted directly from the final design's `theme('light', ...)` function, mapped onto the same variable names so every existing component just recomputes instead of needing its own light-mode rules. Applied via [data-theme="light"] on , toggled and persisted from Settings (see app.js theme handling). Contrast pairs (ink/ink2/ink3 on bg) were already measured >=7:1 by the design pass. */ :root[data-theme="light"]{ --bg:#f4f4f1; --card:#ffffff; --raised:#eaeae4; --ink:#15170f; --ink2:#42463a; --ink3:#54584b; --line:rgba(21,23,15,.12); --line2:rgba(21,23,15,.22); --lime:#cdf03c; --lime-d:#b9d92e; --on-lime:#151a04; --lime-rgb:205,240,60; --shadow-card:0 2px 10px rgba(21,23,15,.07); --glass-bg:linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,244,241,.86)); --glass-border:rgba(21,23,15,.14); --glass-shadow:inset 0 1px 10px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.08); --toast-bg:#15170f; --toast-fg:#f7f7f0; } /* the design explicitly removed the ambient lime glow in light mode ("faded green everywhere" — see CoHost-Design-Documentation.md §9) */ :root[data-theme="light"] .bgglow{display:none} /* fixed rotation of pastel slots so any number of apartments (up to the limit) gets a colour without a human ever picking one */ .palette-green{--fill:var(--green);--on:var(--on-green);--edge:var(--green-d)} .palette-rose{--fill:var(--rose);--on:var(--on-rose);--edge:var(--rose-d)} .palette-sky{--fill:var(--sky);--on:var(--on-sky);--edge:var(--sky)} .palette-lilac{--fill:var(--lilac);--on:var(--on-lilac);--edge:var(--lilac)} .palette-cream{--fill:var(--cream);--on:var(--on-cream);--edge:var(--cream)} /* Final pick from the comparison page: Space Grotesk for headings/display (big numbers, screen titles, sheet headers) + Onest for everything else. The weight SCALE stays exactly what it already was here — heading/CTA weight (650–700), label weight (500–600), body weight (400–450) — that hierarchy was already right; only the typefaces change. The comparison page went uniformly light/thin because that's what was asked of it as a font-shape comparison; the real app was never actually flattened that far — .big/.huge/h2/.btn were already sitting at 650–700, not 300–400. (the actual @import lives at the top of this file — see note there) */ :root{--font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --font-body:'Onest',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif} *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{background:var(--bg)} html,body{margin:0;color:var(--ink); font:15px/1.55 var(--font-body); -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased} /* body itself stays transparent on purpose — html carries the canvas background instead, so the negative-z-index .bgglow div (a child of body) isn't painted over by body's own background box. Two elements both claiming an opaque background is what was hiding the glow. */ .big,.huge,h2,.hero h1,.authcard h1,.sheet h3,.brand b,.ctaband b,.step i, .onb-steps,.pl .tot{font-family:"Space Grotesk",var(--font-body)} body.lock{overflow:hidden} .app{max-width:460px;margin:0 auto;min-height:100vh;min-height:100dvh; padding:calc(env(safe-area-inset-top) + 16px) 16px calc(var(--navh) + env(safe-area-inset-bottom) + 24px)} .hide{display:none!important} button{font-family:inherit} a{color:inherit} /* ── background glow + glass utility ──── */ /* Two ambient blobs, lime only — no second hue. The source design (see CoHost-Design-Documentation.md's motion section, "drifting ambient glow in dark mode") actually pairs the accent glow with a cool blue counter- glow for depth, and animates both slowly drifting. We deliberately drop the second colour (this app is lime-only, full stop) but keep the real technique instead of a flat blurred circle: a radial-gradient fading to transparent reads as a deliberate light source rather than a smudge, which is what a flat-colour circle at low opacity turns into once it's blurred and mostly off-screen. Blob A sits behind the header (top-left, the same spot as before). Blob B used to be stranded alone off the right edge with nothing else going on there, which is exactly why it read as a stray leftover instead of a choice — it now sits behind the bottom nav instead, so it bleeds through the nav's own frosted glass as a soft green wash right around the lit-up FAB, tying the two glows (ambient + button) into one light source instead of two disconnected effects. Both drift slowly; motion collapses under prefers-reduced-motion via the global rule further down this file. */ .bgglow{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .bgglow i{position:absolute;display:block;border-radius:50%;filter:blur(70px); animation:bgdrift 27s ease-in-out infinite} .bgglow i:nth-child(1){width:300px;height:300px;top:-90px;left:-70px; background:radial-gradient(circle, rgba(var(--lime-rgb),.5), transparent 70%)} .bgglow i:nth-child(2){width:280px;height:280px;bottom:-70px;left:calc(50% - 140px); background:radial-gradient(circle, rgba(var(--lime-rgb),.34), transparent 70%); animation-duration:34s;animation-direction:reverse} .bgglow i:nth-child(3){display:none} @keyframes bgdrift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(16px,-18px) scale(1.1)}100%{transform:translate(0,0) scale(1)}} .glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);border:.5px solid var(--glass-border); box-shadow:var(--glass-shadow)} /* ── type ─────────────────────────────── */ /* mono for data + micro-labels per the design's typography rule — times, amounts, uppercase eyebrows/tags all get JetBrains Mono with tabular numerals; body/headline text stays Onest/Space Grotesk, untouched */ .eyebrow,.lbl,.tag,.mlab,.adate,.act-r .mt,.amt,.huge,.kv span:first-child, .rl,.sbadge,.ut .nm,.dhd i,.trk .ab,.ruler .sc span{font-family:var(--font-mono); font-variant-numeric:tabular-nums} /* .mini carries both short meta AND longer help sentences — mono only suits it when short, so leave it the body font by default and opt in per-use with .mono-mini where a call site is genuinely a short data line */ .mini.mono-mini{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .eyebrow{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.02em;margin:0 0 5px} .big{font-size:33px;font-weight:700;letter-spacing:-.045em;line-height:1.02;margin:0} .big .thin{font-weight:400;color:var(--ink3)} h2{font-size:19px;font-weight:650;letter-spacing:-.03em;margin:26px 0 11px} h2 .c{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:-.01em;margin-left:5px} /* ── header row ───────────────────────── */ .hd{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px} .hd .t{flex:1;min-width:0} .stack{display:flex;align-items:center;cursor:pointer} .stack .av{margin-left:-9px;border:2.5px solid var(--bg)} .stack .av:first-child{margin-left:0} .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center; font-size:12.5px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:-.03em;border:0; cursor:pointer;font-family:inherit;overflow:hidden} .av.xs{width:22px;height:22px;font-size:9px} .av.sm{width:28px;height:28px;font-size:10.5px} .av.lg{width:48px;height:48px;font-size:16px} .plus{width:36px;height:36px;border-radius:50%;background:var(--lime);color:var(--on-lime); border:2.5px solid var(--bg);margin-left:-9px;font-size:19px;font-weight:400; display:grid;place-items:center;cursor:pointer;line-height:1;padding:0 0 2px} /* ── tiles ────────────────────────────── */ /* Was 24px with no border at all — a big, borderless, very-round rectangle floating on a plain dark canvas is exactly what reads as "generic bubble UI." Tightened the radius and gave the neutral tile a real hairline edge so it looks like a considered surface rather than a soft blob; brand-fill tiles (.col) skip the border since the colour itself is enough contrast against the dark canvas, and a dark line on top of a bright fill just looks muddy. */ .tile{border-radius:16px;padding:17px 18px;background:var(--card); border:1px solid var(--line);box-shadow:var(--shadow-card); width:100%;text-align:left;color:var(--ink);display:block;position:relative} .t2{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:11px} .tile.col{background:var(--fill);color:var(--on);border:0} .tile.plain{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);border:.5px solid var(--glass-border)} .tile.flat{background:var(--raised);border:1px solid var(--line)} .tile.dark{background:var(--raised);color:var(--ink);border:1px solid var(--line)} .tile.disabled{opacity:.5;pointer-events:none} .lbl,.huge,.sub,.ut .nm,.ut .g,.ut .d,.act .n,.act .h{display:block} .lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em; color:var(--ink3)} .tile.col .lbl{color:var(--on);opacity:.92} .tile.dark .lbl{color:var(--ink3)} .huge{font-size:32px;font-weight:700;letter-spacing:-.045em;line-height:1.06;margin-top:8px; font-variant-numeric:tabular-nums} .huge.sm{font-size:22px;letter-spacing:-.035em} .sub{font-size:12.5px;color:var(--ink2);margin-top:6px;font-weight:500} .tile.col .sub{color:var(--on);opacity:.88} .tile.dark .sub{color:var(--ink2)} .circ{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.55); display:grid;place-items:center;position:absolute;right:15px;top:15px} .tile.plain .circ,.tile.flat .circ{background:var(--bg)} .tile.dark .circ{background:rgba(255,255,255,.16)} .circ svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.7;fill:none; stroke-linecap:round;stroke-linejoin:round} .act{min-height:96px;cursor:pointer;padding-right:54px} .act .n{font-size:18px;font-weight:650;letter-spacing:-.035em;line-height:1.15} .act .h{font-size:12.5px;font-weight:500;margin-top:5px;opacity:.88} .ut{min-height:124px;cursor:pointer;background:var(--fill);color:var(--on);overflow:hidden} .ut .nm{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em; opacity:.92} .ut .g{font-size:21px;font-weight:700;letter-spacing:-.04em;margin-top:9px;line-height:1.1; word-break:break-word} .ut .d{font-size:12.5px;font-weight:500;opacity:.88;margin-top:5px} .ut.free{background:var(--card);color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line2), inset 0 6px 0 -1px var(--fill)} /* not var(--fill): the identity swatch is a solid brand colour meant for a filled tile with a matching --on text, and several of the swatches read too close to --card to work as free-floating text of their own — the underline stripe above still carries the per-apartment colour, this label just needs to always be legible */ .ut.free .nm{color:var(--ink2);opacity:1} .ut.free .g{color:var(--ink3)} .ut.free .d{color:var(--ink3);opacity:1} /* ── pills / segmented control ───────── */ .seg2{display:flex;background:var(--bg);border-radius:16px;padding:4px;gap:4px} .seg2 button{flex:1;border:0;background:none;padding:13px 4px;border-radius:12px;font:inherit; font-size:15px;font-weight:650;color:var(--ink3);cursor:pointer;letter-spacing:-.02em; min-height:48px} .seg2 button.on{background:var(--green);color:var(--on-green);box-shadow:0 1px 3px rgba(0,0,0,.1)} .seg2 button.on.due{background:var(--rose);color:var(--on-rose)} .pills{display:flex;gap:7px;overflow-x:auto;padding:2px 0 4px;margin-bottom:13px; scrollbar-width:none} .pills::-webkit-scrollbar{display:none} .pill{border:1.5px solid var(--line);background:transparent;border-radius:22px; padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer; white-space:nowrap;letter-spacing:-.01em} .pill.on{background:var(--lime);border-color:var(--lime);color:var(--on-lime)} /* Calendar's date-range control — replaced a permanent row of Past month/Next 4 weeks/Next 3 months/Everything pills (always on screen, most of them picked once in a blue moon) with just the month name plus one small button. Tapping it opens the same short list of jumps as a sheet instead, which is where an infrequent choice belongs. */ .calbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px} .calbar-lbl{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink)} .calbar-btn{display:flex;align-items:center;gap:5px;border:1px solid var(--line2); background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600; padding:8px 12px;border-radius:12px;cursor:pointer} .calbar-btn svg{opacity:.65;flex-shrink:0} /* ── list rows ────────────────────────── */ .grp{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 16px;box-shadow:var(--shadow-card)} .row{display:flex;align-items:center;gap:12px;padding:14px 0; border-bottom:1px solid var(--line);width:100%;background:none;border-left:0; border-right:0;border-top:0;font:inherit;color:inherit;text-align:left;cursor:pointer} .row.static{cursor:default} .row:last-child{border-bottom:0} .sq{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex-shrink:0; font-size:11.5px;font-weight:700;letter-spacing:.01em;line-height:1.05;text-align:center; color:#fff} .who{flex:1;min-width:0} .who b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .who span{font-size:12.5px;color:var(--ink2);display:block;font-weight:450;margin-top:1px} .amt{font-size:14.5px;font-weight:650;letter-spacing:-.03em;white-space:nowrap; font-variant-numeric:tabular-nums} .chev{width:7px;height:12px;flex-shrink:0;opacity:.28;stroke:currentColor;stroke-width:2.4;fill:none} .tag{display:inline-block;font-size:10px;font-weight:700;padding:4px 9px; border-radius:20px;text-transform:uppercase;letter-spacing:.06em} .t-local{background:var(--green);color:var(--on-green)} .t-referred{background:var(--lilac);color:var(--on-lilac)} .t-unpaid{background:var(--rose);color:var(--on-rose)} .t-paid{background:var(--green);color:var(--on-green)} .empty{color:var(--ink3);font-size:13.5px;padding:14px 0;font-weight:500} .mini{font-size:12px;color:var(--ink3);line-height:1.55;font-weight:450} /* ── calendar ─────────────────────────── */ .legend{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap} .legend span{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;color:var(--ink2)} .legend i{width:11px;height:11px;border-radius:4px;display:block} .mlab{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em; color:var(--ink3);margin:20px 0 10px} /* Was a flat, plain var(--bg) rectangle pinned at the top of the scroll — same colour as the page behind it, so it read as a bare strip with no depth at all. Now uses the same frosted-glass treatment as the nav bar and toast, so it actually looks like a panel floating over the day rows scrolling underneath it, not a solid colour block. */ .ruler{display:flex;align-items:center;gap:9px;margin-bottom:8px; position:sticky;top:0;background:var(--glass-bg);-webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);border-bottom:.5px solid var(--glass-border); margin-left:-16px;margin-right:-16px;padding:6px 16px 5px;z-index:5} .ruler .pad{width:36px;flex-shrink:0} .ruler .sc{flex:1;position:relative;height:13px} .ruler .sc span{position:absolute;top:0;font-size:9px;font-weight:700;color:var(--ink3); letter-spacing:.03em;transform:translateX(-50%);white-space:nowrap} .ruler .sc span:first-child{transform:none} .ruler .sc span:last-child{transform:translateX(-100%)} .dblk{margin-bottom:13px} .dhd{display:flex;align-items:baseline;gap:7px;margin-bottom:6px} .dhd b{font-size:13px;font-weight:700;letter-spacing:-.025em} .dhd i{font-size:11.5px;font-weight:600;color:var(--ink3);font-style:normal} .dblk.now .dhd b{color:var(--ink)} .dblk.now{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 12px 8px;margin:0 -12px 13px;box-shadow:var(--shadow-card)} .dblk.past{opacity:.62} .dblk.past .dhd b{font-weight:600} .dhd{align-items:center} .trk{display:flex;align-items:center;gap:9px;margin-bottom:5px} .trk .ab{width:36px;flex-shrink:0;font-size:9.5px;font-weight:700;letter-spacing:.03em; text-align:center;padding:4px 0;border-radius:7px} .lane{flex:1;position:relative;height:30px;border-radius:9px;background:var(--card); overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)} .dblk.now .lane{background:var(--raised)} .lane .tick{position:absolute;top:0;bottom:0;width:1px;background:var(--line)} .lane .noon{background:var(--line2)} .bar{position:absolute;top:3px;bottom:3px;border-radius:7px;border:0;font:inherit; font-size:11px;font-weight:700;letter-spacing:-.01em;padding:0 7px;text-align:left; overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer; min-width:12px;display:flex;align-items:center} .bar.l{border-top-left-radius:2px;border-bottom-left-radius:2px} .bar.r{border-top-right-radius:2px;border-bottom-right-radius:2px} .lane .fr{position:absolute;left:9px;top:0;bottom:0;display:flex;align-items:center; font-size:11px;font-weight:550;color:var(--ink3)} .gapmark{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg, transparent,transparent 3px,var(--rose) 3px,var(--rose) 4px);opacity:.55} /* ── forms ────────────────────────────── */ label{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase; letter-spacing:.08em;display:block;margin-bottom:6px} input,select,textarea{width:100%;padding:14px 15px;border:1.5px solid var(--line); border-radius:16px;font:inherit;font-size:16px;background:var(--card);color:var(--ink); -webkit-appearance:none;appearance:none;font-weight:500} input:focus,select:focus,textarea:focus{outline:0;border-color:var(--lime)} input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{ outline:2.5px solid var(--lime);outline-offset:2px} input.err,select.err{border-color:var(--bad)} textarea{min-height:78px;resize:vertical;line-height:1.55;font-size:15px} select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a7adb8' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 15px center;padding-right:36px} .f2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .fld{margin-bottom:12px} .btn{width:100%;background:var(--lime);color:var(--on-lime);border:0;padding:16px;border-radius:14px; font:inherit;font-size:16px;font-weight:650;cursor:pointer;letter-spacing:-.02em;margin-top:4px; transition:transform .1s ease, opacity .15s ease} .btn.acc{background:var(--lime);color:var(--on-lime)} .btn.o{background:transparent;color:var(--ink);border:1.5px solid var(--line2)} .btn.r{background:#3f0d14;color:#ffb4bb} .btn.sm{padding:13px;font-size:14.5px;border-radius:12px} .btn:active{transform:scale(.985)} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .btn.loading{position:relative;color:transparent!important} .btn.loading::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px; margin:-9px 0 0 -9px;border-radius:50%;border:2.5px solid rgba(16,18,10,.35); border-top-color:var(--on-lime);animation:spin .7s linear infinite} .btn.o.loading::after{border-color:var(--line2);border-top-color:var(--ink)} @keyframes spin{to{transform:rotate(360deg)}} .brow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .sw{display:flex;align-items:center;justify-content:space-between;padding:13px 2px} .sw label{margin:0;font-size:15px;font-weight:600;text-transform:none;letter-spacing:-.02em;color:var(--ink)} .sw input{width:52px;height:31px;border-radius:16px;background:var(--line2);border:0; position:relative;flex-shrink:0;transition:background .16s;padding:0} .sw input:checked{background:var(--ink)} .sw input::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px; border-radius:50%;background:#fff;transition:transform .16s} .sw input:checked::after{transform:translateX(21px)} .chip{background:transparent;border:1.5px solid var(--line);border-radius:22px; padding:8px 13px;font-size:11.5px;font-family:ui-monospace,Menlo,monospace; cursor:pointer;color:var(--ink2);display:inline-block;margin:0 6px 6px 0} .note{border-radius:14px;padding:15px 17px;font-size:14px;margin-bottom:11px; line-height:1.5;font-weight:500;background:var(--cream);color:var(--on-cream)} .note b{font-weight:700} .note.ok{background:var(--green);color:var(--on-green)} .note.no{background:var(--rose);color:var(--on-rose)} .note.info{background:var(--sky);color:var(--on-sky)} /* ── money ────────────────────────────── */ .pl>div{display:flex;justify-content:space-between;gap:10px;padding:11px 0; border-bottom:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:-.02em} .pl>div:last-child{border-bottom:0} .pl .s{color:var(--ink2);font-size:13.5px;padding-left:2px;font-weight:500} .pl .tot{font-weight:700;font-size:18px;border-top:2px solid var(--ink); border-bottom:0;margin-top:6px;padding-top:14px;letter-spacing:-.04em} .pos{color:var(--good)} .neg{color:var(--bad)} .bar-track{height:9px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:7px} .bar-track i{display:block;height:100%;border-radius:5px} .cat{margin-bottom:14px;font-size:14px;font-weight:600} .cat .t{display:flex;justify-content:space-between;gap:8px;letter-spacing:-.02em} .cat .t span{font-weight:500;color:var(--ink2);font-size:13px} /* ── activity ─────────────────────────── */ .adate{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em; color:var(--ink3);margin:20px 0 9px 2px} .adate:first-child{margin-top:4px} .act-r{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);align-items:flex-start} .act-r:last-child{border-bottom:0} .act-r .b{flex:1;min-width:0} .act-r .tx{font-size:14.5px;line-height:1.4;font-weight:500;letter-spacing:-.01em} .act-r .tx b{font-weight:700} .act-r .mt{font-size:12.5px;color:var(--ink3);margin-top:2px;font-weight:500} .ico{width:30px;height:30px;border-radius:11px;display:grid;place-items:center;flex-shrink:0} .ico svg{width:15px;height:15px;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round} /* ── sheet / modal ────────────────────── */ .scrim{position:fixed;inset:0;background:rgba(19,21,29,.5);z-index:60;opacity:0; pointer-events:none;transition:opacity .22s} .scrim.on{opacity:1;pointer-events:auto} .sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--bg); border-radius:22px 22px 0 0;max-width:460px;margin:0 auto; padding:8px 18px calc(env(safe-area-inset-bottom) + 24px); transform:translateY(103%);transition:transform .3s cubic-bezier(.32,.72,0,1); max-height:90vh;overflow-y:auto} .sheet.on{transform:translateY(0)} .grab{width:40px;height:4.5px;border-radius:3px;background:var(--line2);margin:7px auto 18px} .sheet h3{font-size:26px;margin:0 0 4px;letter-spacing:-.045em;font-weight:700;line-height:1.08} .sheet .sh{font-size:13.5px;color:var(--ink2);margin:0 0 18px;font-weight:500} .kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0; border-bottom:1px solid var(--line);font-size:14.5px} .kv:last-of-type{border-bottom:0} .kv span:first-child{color:var(--ink3);font-weight:600} .kv span:last-child{font-weight:600;text-align:right;letter-spacing:-.02em} .pick{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line); width:100%;background:none;border-left:0;border-right:0;border-top:0;font:inherit; text-align:left;cursor:pointer;color:inherit} .pick:last-of-type{border-bottom:0} .pick .n{flex:1;font-size:16px;font-weight:650;letter-spacing:-.02em} .pick .rl{font-size:12.5px;color:var(--ink3);font-weight:500;letter-spacing:0} .tick-ico{width:21px;height:21px;stroke:var(--good);stroke-width:3;fill:none} .sheet h4{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em; color:var(--ink3);margin:26px 0 10px} /* ── save confirmation toast ──────────── */ .toast{position:fixed;left:50%;z-index:70; bottom:calc(var(--navh) + env(safe-area-inset-bottom) + 22px); background:var(--toast-bg);color:var(--toast-fg);padding:14px 20px;border-radius:99px; font-size:15px;font-weight:650;letter-spacing:-.02em; display:flex;align-items:center;gap:10px;white-space:nowrap; box-shadow:0 10px 30px rgba(0,0,0,.35); opacity:0;transform:translate(-50%,14px) scale(.94);pointer-events:none; transition:opacity .18s ease, transform .26s cubic-bezier(.22,1.2,.36,1)} .toast.on{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto} .toast.err{background:#3f0d14;border-color:#5c1620} .toast.err .tk{display:none} .toast .tk{width:22px;height:22px;border-radius:50%;background:var(--lime); display:grid;place-items:center;flex-shrink:0} .toast .tk svg{width:13px;height:13px;stroke:var(--on-lime);stroke-width:3.4;fill:none; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:20;stroke-dashoffset:20} .toast.on .tk svg{animation:draw .34s .08s ease forwards} @keyframes draw{to{stroke-dashoffset:0}} @keyframes flash{0%{background:var(--lime)}100%{background:transparent}} .row.flash,.act-r.flash{animation:flash 1.9s ease-out;border-radius:12px} @keyframes pop{0%{transform:scale(.9);opacity:.4}55%{transform:scale(1.04)}100%{transform:scale(1)}} .bar.flash{animation:pop .5s cubic-bezier(.22,1.2,.36,1);box-shadow:0 0 0 2px var(--ink)} .sbadge{font-size:10.5px;font-weight:700;padding:5px 10px;border-radius:20px; background:var(--bg);color:var(--ink3);white-space:nowrap} .sbadge.ok{background:var(--green);color:var(--on-green)} .sbadge.bad{background:var(--rose);color:var(--on-rose)} .sbadge.busy{background:var(--sky);color:var(--on-sky)} /* ── floating nav ─────────────────────── */ nav{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 14px);left:16px;right:16px; z-index:50;max-width:428px;margin:0 auto;background:var(--glass-bg);border-radius:24px; -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); border:.5px solid var(--glass-border); display:flex;align-items:center;padding:9px 10px; box-shadow:var(--glass-shadow), 0 10px 34px rgba(0,0,0,.5)} nav button{flex:1;border:0;background:none;padding:8px 0;cursor:pointer;min-height:48px; display:flex;flex-direction:column;align-items:center;gap:4px; font-size:10.5px;font-weight:600;color:var(--ink3);letter-spacing:.01em} nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} nav button.on{color:var(--lime);font-weight:700} nav button.on svg{stroke-width:2.7} nav .fab{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:var(--lime); color:var(--on-lime);margin:-18px 8px 0;display:grid;place-items:center;padding:0;min-height:56px; box-shadow:0 4px 12px color-mix(in srgb, var(--lime) 28%, transparent)} nav .fab svg{width:25px;height:25px;stroke-width:2.8} /* ── compact money summary ─────────────── */ .mini-hero .huge{font-size:27px;margin-top:5px} .mh{display:flex;align-items:flex-start;gap:12px} .mh>div{flex:1;min-width:0} .mhb{border:0;background:var(--card);color:var(--ink);font:inherit; font-size:12.5px;font-weight:650;padding:9px 14px;border-radius:99px;cursor:pointer; white-space:nowrap;flex-shrink:0;letter-spacing:-.01em} .mhb:active{opacity:.75} .mh2{display:flex;justify-content:space-between;align-items:center; margin-top:13px;padding-top:11px;border-top:1px solid var(--line); font-size:13.5px;font-weight:600} .mh2 b{font-weight:700;font-variant-numeric:tabular-nums} /* ══════════════════════════════════════════════════════════════════ NEW: auth screens, onboarding funnel, apartment-limit / upgrade, danger zone, invites, account switcher, skeletons ══════════════════════════════════════════════════════════════════ */ /* full-screen centred card used by landing / signup / login / accept-invite */ .authwrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center; padding:32px 18px} .authcard{width:100%;max-width:400px} .brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:28px} .brand img{width:40px;height:40px;border-radius:12px} .brand b{font-size:19px;font-weight:700;letter-spacing:-.03em} .authcard h1{font-size:26px;font-weight:700;letter-spacing:-.04em;margin:0 0 6px;text-align:center} .authcard p.sub-c{font-size:14px;color:var(--ink2);text-align:center;margin:0 0 24px;font-weight:500} .authswitch{text-align:center;margin-top:18px;font-size:14px;color:var(--ink2);font-weight:500} .authswitch a,.linklike{color:var(--ink);font-weight:650;text-decoration:none;cursor:pointer; border-bottom:1.5px solid var(--line2)} /* marketing landing */ .hero{padding:56px 20px 40px;text-align:center;max-width:640px;margin:0 auto} .hero h1{font-size:44px;font-weight:700;letter-spacing:-.045em;line-height:1.05;margin:22px 0 14px} .hero p.lead{font-size:17px;color:var(--ink2);font-weight:500;line-height:1.5;margin:0 0 28px} .herobtns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .herobtns .btn,.herobtns .btn.o{width:auto;padding:15px 26px} .pricepill{display:inline-flex;align-items:center;gap:8px;background:var(--card); border:1.5px solid var(--line);border-radius:99px;padding:8px 16px;font-size:13px; font-weight:600;color:var(--ink2);margin-top:20px} .featuregrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:640px; margin:36px auto 0;padding:0 20px} @media (max-width:520px){.featuregrid{grid-template-columns:1fr}} .featuregrid .tile{padding:20px} .featuregrid .tile svg{width:26px;height:26px;stroke:var(--ink);stroke-width:2;fill:none; margin-bottom:10px} .featuregrid .tile b{display:block;font-size:15.5px;font-weight:650;margin-bottom:4px} .featuregrid .tile span{font-size:13px;color:var(--ink2);font-weight:500;line-height:1.4} .seclabel{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em; color:var(--ink3);margin:0 0 18px} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:900px; margin:0 auto;padding:0 20px} @media (max-width:820px){.steps{grid-template-columns:1fr 1fr}} @media (max-width:520px){.steps{grid-template-columns:1fr}} .step{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);border:.5px solid var(--glass-border); border-radius:14px;padding:18px} .step i{display:flex;align-items:center;justify-content:center;width:30px;height:30px; border-radius:50%;background:var(--lime);color:var(--on-lime);font-size:14px;font-weight:700; font-style:normal;margin-bottom:10px} .step b{display:block;font-size:15px;font-weight:650;margin-bottom:4px} .step span{font-size:13px;color:var(--ink2);font-weight:500;line-height:1.4} .faq{max-width:640px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;gap:10px} .faq details{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);border:.5px solid var(--glass-border); border-radius:14px;padding:4px 18px} .faq summary{padding:14px 0;font-size:14.5px;font-weight:650;cursor:pointer; list-style:none;position:relative;padding-right:26px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:20px; font-weight:500;color:var(--ink3);transition:transform .2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{margin:0 0 16px;font-size:13.5px;color:var(--ink2);font-weight:500;line-height:1.55} .ctaband{max-width:640px;margin:48px auto 0;padding:34px 24px;background:var(--lime); border-radius:16px;text-align:center;display:flex;flex-direction:column; align-items:center;gap:16px} .ctaband b{color:var(--on-lime);font-size:19px;font-weight:700;letter-spacing:-.02em} .ctaband .btn.acc{background:var(--on-lime);color:var(--lime)} /* onboarding funnel — step progress + card */ .onb-steps{display:flex;gap:6px;justify-content:center;margin-bottom:22px} .onb-steps i{width:26px;height:4px;border-radius:3px;background:var(--line2);display:block} .onb-steps i.on{background:var(--lime)} .onb-steps i.done{background:var(--ink3)} .onb-skip{text-align:center;margin-top:14px} /* apartment list / manage */ .proprow{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)} .proprow:last-child{border-bottom:0} .proprow .sq{cursor:default} .limitbar-wrap{margin:6px 0 16px} .limitbar-wrap .row-label{display:flex;justify-content:space-between;font-size:12.5px; font-weight:600;color:var(--ink2);margin-bottom:6px} .addpropbtn{width:100%;border:1.5px dashed var(--line2);background:transparent; border-radius:14px;padding:16px;font:inherit;font-weight:650;font-size:15px;color:var(--ink); cursor:pointer;text-align:center} .addpropbtn:disabled{opacity:.5;cursor:not-allowed} /* apartment photo grid (Team → an apartment → Photos) */ .photogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px} .photocell{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--raised)} .photocell img{width:100%;height:100%;object-fit:cover;display:block} .photox{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:0; background:rgba(0,0,0,.55);color:#fff;font-size:15px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center} /* contact / upgrade card, shown once at the apartment cap */ .upgradecard{background:var(--raised);color:var(--ink);border:1.5px solid var(--line2); border-radius:16px;padding:22px} .upgradecard b{font-size:18px;font-weight:700;display:block;margin-bottom:6px;letter-spacing:-.02em; color:var(--lime)} .upgradecard p{font-size:13.5px;color:var(--ink2);margin:0 0 16px;font-weight:500;line-height:1.5} /* danger zone: type-to-confirm */ .dangerzone{border:1.5px solid var(--rose);border-radius:14px;padding:18px} .dangerzone h4{color:var(--bad);margin-top:0} .confirmphrase{font-family:ui-monospace,Menlo,monospace;background:var(--bg); padding:3px 8px;border-radius:8px;font-weight:650} /* trash / recently deleted */ .trashrow{opacity:.75} .trashrow .amt{opacity:.7} /* invites list */ .inviterow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)} .inviterow:last-child{border-bottom:0} .inviterow .who{flex:1} .inviterow .rl{font-size:12px;color:var(--ink3);font-weight:500} /* account switcher */ .acctrow{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid var(--line); cursor:pointer;width:100%;background:none;border-left:0;border-right:0;border-top:0; text-align:left;font:inherit;color:inherit} .acctrow:last-child{border-bottom:0} /* skeleton loaders */ .skel{background:linear-gradient(90deg,var(--line) 25%,var(--raised) 37%,var(--line) 63%); background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:12px} @keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}} .skel-tile{height:124px;border-radius:16px;margin-bottom:11px} .skel-row{height:60px;border-radius:14px;margin-bottom:8px} /* fade-in for freshly rendered views */ .viewfade{animation:viewfade .22s ease} @keyframes viewfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* generic spinner (auth buttons reuse .btn.loading above) */ .spinner{width:16px;height:16px;border-radius:50%;border:2.2px solid var(--line2); border-top-color:var(--ink);display:inline-block;animation:spin .7s linear infinite; vertical-align:middle} /* ════════════════ DESKTOP ════════════════ */ @media (min-width:900px){ .app{max-width:1120px;padding:34px 40px 60px 216px} nav{top:0;bottom:0;left:0;right:auto;width:176px;max-width:none;margin:0; border-radius:0;flex-direction:column;align-items:stretch;justify-content:flex-start; padding:26px 14px;gap:5px;box-shadow:none} nav button{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:13px; padding:13px 15px;border-radius:14px;font-size:14.5px;font-weight:600;letter-spacing:-.02em; min-height:auto} nav button:hover{background:var(--raised);color:var(--ink)} nav button.on{background:rgba(215,255,63,.14);color:var(--lime)} nav svg{width:20px;height:20px} nav .fab{order:-1;width:auto;height:auto;border-radius:14px;margin:0 0 18px; padding:14px 15px;justify-content:flex-start;gap:13px;box-shadow:none; flex-direction:row;font-size:14.5px;font-weight:650;min-height:auto} nav .fab::after{content:"New booking"} nav .fab svg{width:20px;height:20px} .big{font-size:38px} .hd{margin-bottom:26px} h2{font-size:20px;margin:30px 0 13px} .t2{grid-template-columns:1fr 1fr;gap:14px} .ut{min-height:150px} .huge{font-size:36px} #v-today .cols,#v-money .cols{display:grid;grid-template-columns:1fr 1fr; gap:14px;align-items:start} #v-money .cols h2:first-child{margin-top:0} .trk .ab{width:52px;font-size:11px} .lane{height:36px} .bar{font-size:12.5px;padding:0 10px} .ruler .pad{width:52px} .ruler .sc span{font-size:10.5px} .dblk{margin-bottom:15px} .dblk.now{margin:0 -14px 15px;padding:13px 14px 10px} .sheet{left:50%;right:auto;bottom:auto;top:50%;max-width:560px; border-radius:16px;transform:translate(-50%,-46%) scale(.97); max-height:86vh;padding:10px 26px 28px;opacity:0} .sheet.on{transform:translate(-50%,-50%) scale(1);opacity:1} .grab{display:none} .sheet h3{font-size:28px} .toast{bottom:32px;left:calc(50% + 88px)} input,select,textarea{font-size:15px} .btn{font-size:15px} .row{padding:15px 0} } @media (min-width:1240px){ .app{max-width:1280px;padding-left:236px} nav{width:196px} } /* respect the system's reduced-motion preference — decorative animation (shimmer, flash, pop, fades) collapses to instant; nothing depends on motion to convey information, so this never hides state */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } .toast .undo{background:none;border:0;color:#fff;font:inherit;font-weight:700; text-decoration:underline;cursor:pointer;padding:0;margin-left:4px;flex-shrink:0} /* ── install-to-home-screen banner ────── */ .installbar{position:fixed;top:0;left:0;right:0;z-index:80; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px; background:var(--glass-bg);border-bottom:.5px solid var(--glass-border); -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%); display:flex;align-items:center;gap:11px; box-shadow:0 8px 24px rgba(0,0,0,.35)} .installbar-ico{width:34px;height:34px;border-radius:10px;background:var(--lime); color:var(--on-lime);display:grid;place-items:center;flex-shrink:0} .installbar-ico svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none; stroke-linecap:round;stroke-linejoin:round} .installbar-txt{flex:1;min-width:0} .installbar-txt b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.01em} .installbar-txt span{display:block;font-size:11.5px;color:var(--ink2);font-weight:500; line-height:1.35;margin-top:1px} .installbar .btn.sm{padding:9px 15px;font-size:13px;border-radius:12px;flex-shrink:0} .installbar-x{background:none;border:0;color:var(--ink3);font-size:22px;line-height:1; padding:4px 2px;cursor:pointer;flex-shrink:0} @media (min-width:900px){.installbar{padding-top:10px}} /* ══════════════════════════════════════════════════════════════════ Settings family — full-screen router views (Claude Design v3 handoff: Settings/Team/Apartments/Apartment detail/Notifications/Help are destinations you navigate to, each with a back arrow, not sheets stacked on top of Today) — plus the Today header's search/team/gear trio and the full-screen guest search overlay that go with it. ══════════════════════════════════════════════════════════════════ */ /* Today header: search — team stack — gear, matching the design's trio. Other views keep their existing bare avatar stack (unchanged). */ .hdactions{display:flex;align-items:center;gap:10px;flex:0 0 auto} .iconbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2); background:var(--card);color:var(--ink2);display:grid;place-items:center;cursor:pointer; flex-shrink:0;transition:transform .16s ease} .iconbtn:active{transform:scale(.9)} .iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} /* contextual walkthrough card on Today, toggled from Help & data */ .walkcard{margin-top:18px;border:1.5px solid var(--line2);border-left:3px solid var(--lime); border-radius:14px;padding:16px 17px;background:var(--card)} .walkcard .wk-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .walkcard .wk-skip{border:0;background:none;font:inherit;font-size:11.5px;font-weight:500; color:var(--ink3);cursor:pointer;padding:4px 2px} .walkcard .wk-title{font-size:15.5px;font-weight:650;letter-spacing:-.02em;color:var(--ink);margin-top:9px} .walkcard .wk-body{font-size:12.5px;font-weight:450;line-height:1.55;color:var(--ink2);margin-top:6px} .walkcard .wk-row{display:flex;align-items:center;gap:10px;margin-top:14px} .walkcard .wk-dots{flex:1;display:flex;align-items:center;gap:5px} .walkcard .wk-dots i{display:block;height:5px;border-radius:3px;background:var(--line2)} .walkcard .wk-dots i.on{background:var(--lime);width:16px} .walkcard .wk-dots i:not(.on){width:5px} .walkcard .wk-btn{border:1px solid var(--line2);background:transparent;color:var(--ink2); font:inherit;font-size:12.5px;font-weight:600;padding:10px 14px;border-radius:11px; cursor:pointer;min-height:40px} .walkcard .wk-next{border:0;background:var(--lime);color:var(--on-lime);font:inherit; font-size:12.5px;font-weight:650;padding:10px 18px;border-radius:11px;cursor:pointer;min-height:40px} /* full-screen settings-family view header: back chevron + title + sub */ .vhd{display:flex;align-items:center;gap:12px;margin-bottom:18px} /* Was a "‹" text glyph — most fonts don't center that character in its own box (side-bearings differ per typeface), so it drifted visually even though the button itself was perfectly centered. An SVG chevron centers exactly regardless of font, same as every other icon in the app. */ .vhd .back{width:32px;height:32px;border-radius:50%;border:1px solid var(--line2); background:var(--card);color:var(--ink);display:grid; place-items:center;cursor:pointer;flex:0 0 32px} .vhd .back svg{display:block} .vhd .vt{flex:1;min-width:0} .vhd h1{font-size:23px;font-weight:650;letter-spacing:-.035em;line-height:1.1;margin:0} .vhd .vsub{font-family:var(--font-mono);font-size:10px;margin-top:3px;color:var(--ink3)} /* Settings hub: account card + theme control + Manage nav list */ .acctcard{display:flex;align-items:center;gap:11px;border:1px solid var(--line2); background:var(--card);border-radius:14px;padding:12px 13px;margin-bottom:8px;box-shadow:var(--shadow-card)} .acctcard img{width:34px;height:34px;border-radius:10px;flex:0 0 34px;object-fit:cover;display:block} .acctcard .n{flex:1;min-width:0} .acctcard .n b{display:block;font-size:14px;font-weight:600;letter-spacing:-.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acctcard .n span{display:block;font-family:var(--font-mono);font-size:9.5px;margin-top:3px;color:var(--ink3)} /* .planbadge nested inside that subtitle (profile row: name + "business · plan") is still a span, so the generic ".acctcard .n span" rule above would otherwise win on specificity and force it to display:block full width — this scoped override is what keeps it a small inline pill. */ .acctcard .n span.planbadge{display:inline-block;font-family:var(--font-mono); font-size:9px;margin-top:0;color:var(--ink2)} .planbadge{display:inline-block;vertical-align:1px;font-family:var(--font-mono);font-size:9px; letter-spacing:.1em;padding:2px 7px;border-radius:99px;background:var(--raised); color:var(--ink2);flex-shrink:0} .themerow{display:flex;align-items:center;gap:11px;border:1px solid var(--line2); background:var(--card);border-radius:14px;padding:0 13px;min-height:48px;margin-bottom:18px} .themerow .n{flex:1;font-size:13.5px;font-weight:500;color:var(--ink)} .themeseg{display:flex;background:var(--raised);border-radius:10px;padding:3px;gap:2px} .themeseg button{border:0;background:none;color:var(--ink3);border-radius:8px;padding:0 13px; height:30px;font:inherit;font-size:12px;font-weight:600;cursor:pointer} .themeseg button.on{background:var(--ink);color:var(--bg)} .navlist{border:1px solid var(--line2);background:var(--card);border-radius:14px;overflow:hidden} .navrow{display:flex;align-items:center;gap:11px;width:100%;padding:0 14px;min-height:50px; background:none;border:0;border-bottom:1px solid var(--line);font:inherit;text-align:left; cursor:pointer;color:inherit} .navrow:last-child{border-bottom:0} .navrow .n{flex:1;min-width:0;font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--ink)} .navrow .badge{font-family:var(--font-mono);font-size:10.5px;color:var(--ink2); background:var(--raised);border-radius:6px;padding:2px 6px} .navrow .badge.hot{background:var(--lime);color:var(--on-lime)} .navrow .chev2{font-size:12px;color:var(--ink3)} .dangerrow{display:flex;align-items:center;gap:11px;width:100%;margin-top:22px; border:1px solid var(--line2);background:transparent;border-radius:14px;padding:0 14px; min-height:48px;font:inherit;text-align:left;cursor:pointer;color:inherit} .dangerrow .n{flex:1;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink2)} .dangerrow .tag2{font-family:var(--font-mono);font-size:9.5px;color:var(--ink3)} .verfoot{text-align:center;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em; color:var(--ink3);margin-top:22px} .sectionlab{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--ink3);margin:22px 0 8px} .sectionlab:first-child{margin-top:18px} /* Team & access: join-code card, request cards, roster with Remove */ .joincard{border:1px solid var(--line2);background:var(--card);border-radius:14px; padding:13px 14px;margin-bottom:4px} .joincard .jc-row{display:flex;align-items:center;gap:10px} .joincard .jc-code{flex:1;min-width:0} .joincard .jc-code b{display:block;font-family:var(--font-mono);font-size:9px; letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)} .joincard .jc-code span{display:block;font-family:var(--font-mono);font-size:20px; font-weight:500;letter-spacing:.14em;margin-top:4px;color:var(--ink)} .joincard .jc-btn{flex:0 0 auto;border:1px solid var(--line2);background:transparent; color:var(--ink);border-radius:10px;padding:0 13px;height:36px;font:inherit;font-size:12.5px; font-weight:500;cursor:pointer} .joincard .jc-note{font-size:11.5px;font-weight:450;line-height:1.45;margin-top:10px;color:var(--ink3)} .reqcard{border:1px solid var(--line2);background:var(--card);border-radius:14px; padding:12px 14px;margin-bottom:7px} .reqcard .rq-top{display:flex;align-items:baseline;gap:8px} .reqcard .rq-top b{flex:1;min-width:0;font-size:14px;font-weight:600;letter-spacing:-.015em} .reqcard .rq-top span{font-family:var(--font-mono);font-size:9.5px;color:var(--ink3);white-space:nowrap} .reqcard .rq-note{font-size:12px;font-weight:450;line-height:1.45;margin-top:6px} .reqcard .rq-limit{font-size:11px;font-weight:500;line-height:1.4;margin-top:6px;color:var(--ink2)} .reqcard .rq-btns{display:flex;gap:7px;margin-top:11px} .reqcard .rq-btns button{border:0;background:var(--lime);color:var(--on-lime);border-radius:10px; padding:0 16px;height:38px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer} .reqcard .rq-btns button.o{border:1px solid var(--line2);background:transparent;color:var(--ink3);font-weight:500} .reqcard .rq-btns button:disabled{background:var(--raised);color:var(--ink3);cursor:not-allowed} .emptydash{border:1px dashed var(--line2);border-radius:14px;padding:20px 16px;text-align:center; color:var(--ink2);font-size:13px;font-weight:500} .teamrow{display:flex;align-items:center;gap:11px;padding:0 14px;min-height:48px; border-bottom:1px solid var(--line)} .teamrow:last-child{border-bottom:0} .teamrow .av{width:26px;height:26px;font-size:9px;flex-shrink:0} .teamrow .n{flex:1;min-width:0;font-size:13.5px;font-weight:500;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)} .teamrow .sub{font-family:var(--font-mono);font-size:9.5px;color:var(--ink3);white-space:nowrap} .teamrow .rm{border:0;background:none;font:inherit;font-size:11.5px;font-weight:500; color:var(--ink3);cursor:pointer;padding:8px 0 8px 4px;flex-shrink:0} /* Apartments list + Apartment detail */ .aptrow{display:flex;align-items:center;gap:11px;width:100%;padding:0 14px;min-height:48px; background:none;border:0;border-bottom:1px solid var(--line);font:inherit;text-align:left; cursor:pointer;color:inherit} .aptrow:last-child{border-bottom:0} .aptrow .n{flex:1;min-width:0;font-size:13.5px;font-weight:500;letter-spacing:-.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)} .aptrow .meta{font-family:var(--font-mono);font-size:9.5px;white-space:nowrap;color:var(--ink3)} .tplrow{display:flex;align-items:center;gap:11px;width:100%;padding:0 14px;min-height:46px; background:none;border:0;border-bottom:1px solid var(--line);font:inherit;text-align:left; cursor:pointer;color:inherit} .tplrow:last-child{border-bottom:0} .tplrow .n{flex:1;min-width:0;font-size:13.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink)} .tplrow .origin{font-family:var(--font-mono);font-size:9.5px} /* full-screen guest search overlay */ .searchov{position:fixed;inset:0;z-index:65;background:var(--bg);display:flex; flex-direction:column;padding:calc(env(safe-area-inset-top) + 20px) 20px 20px} .searchov-bar{display:flex;align-items:center;gap:10px} .searchov-input{flex:1;display:flex;align-items:center;gap:9px;border:1px solid var(--line2); background:var(--card);border-radius:14px;padding:12px 14px} .searchov-input svg{width:15px;height:15px;flex:0 0 15px;stroke:var(--ink3);fill:none; stroke-width:1.9;stroke-linecap:round} .searchov-input input{flex:1;border:0;background:transparent;font:inherit;font-size:15px; font-weight:450;outline:none;padding:0;color:var(--ink)} .linklike-btn{border:0;background:none;font:inherit;font-size:13.5px;font-weight:500; color:var(--ink2);cursor:pointer;padding:6px 2px} .guestrow{display:flex;align-items:center;gap:12px;width:100%;padding:14px 4px; background:none;border:0;border-bottom:1px solid var(--line);font:inherit;text-align:left;cursor:pointer} .guestrow .n{flex:1;min-width:0} .guestrow .n b{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.015em;color:var(--ink)} .guestrow .n span{display:block;font-size:11.5px;font-weight:450;margin-top:2px;color:var(--ink3)} .guestrow .r{text-align:right;white-space:nowrap} .guestrow .r b{display:block;font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--ink)} .guestrow .r span{display:block;font-size:10px;font-weight:600;margin-top:3px} @media (min-width:900px){ .searchov{left:216px;max-width:1120px;margin:0 auto;right:0} }