/* AOS Properties : one design, phone and desktop */

:root{
  /* Premium type system: Fraunces (display serif) reserved for the executive
     greeting/hero money figures only; Manrope carries everything else -
     nav, tables, forms, body text - and stays highly readable at small
     sizes, which a display face cannot do. */
  --font-display:'Fraunces',Georgia,serif;
  --font-sans:'Manrope',-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;

  /* FIXED company palette. These six colours are the whole app - every
     surface below uses one of them directly, at full strength or at a
     plain opacity of itself. Nothing here is sampled from a logo, nothing
     is generated at runtime, and nothing blends two of these together to
     invent a new "in-between" colour (e.g. green+black -> a new dark
     green-black) - nowhere in this file does color-mix() combine two
     different hues into a new identity colour. */
  --exec-black:#1c1a16;
  --emerald:#0b5335;
  --ivory-soft:#f7f4ee;
  --grey-secondary:#d7d7d7;
  --prussian:#0e2442;
  --white:#ffffff;

  --brand:var(--emerald);
  --brand-dark:var(--exec-black);
  --accent:#b8863a;
  --accent-blue:var(--prussian);

  --green:var(--brand);
  --green-600:var(--brand);
  --green-100:rgba(11,83,53,.10);
  --gold:var(--accent);

  /* Light washes/shadows below are the ONE approved emerald at a plain
     opacity - not a mix with any other colour, so the hue never shifts. */
  --brand-tint:rgba(11,83,53,.04);
  --brand-wash:rgba(11,83,53,.10);
  --brand-wash-2:rgba(11,83,53,.16);
  --gold-wash:rgba(184,134,58,.18);

  /* Text & surfaces - warm ivory body, pure white cards, executive-black
     ink; never harsh pure white/pure black anywhere. */
  --ink:var(--exec-black);
  --ink-2:#5b5a54;
  --muted:#8a8a84;
  --line:var(--grey-secondary);
  --line-soft:var(--grey-secondary);
  --bg:var(--ivory-soft);
  --surface:var(--white);
  --ok:#1b7a4d;      --ok-bg:#e6f3ea;
  --warn:#a3671a;    --warn-bg:#faf1de;
  --bad:#a12b1f;     --bad-bg:#fbeae7;
  --info:var(--prussian); --info-bg:rgba(14,36,66,.08);
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(28,31,28,.04), 0 8px 24px rgba(28,31,28,.05);
  --shadow-lg:0 24px 60px rgba(28,31,28,.14);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
  font-size:15px; line-height:1.45;
}
.hidden{display:none !important}
.muted{color:var(--ink-2); font-weight:400}
.grow{flex:1; min-width:0}
a{color:inherit; text-decoration:none}
/* Serif is reserved for a handful of executive moments (hero greeting,
   onboarding, empty states) - every ordinary heading uses the sans face,
   opting into serif explicitly where it belongs. */
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.01em; font-family:var(--font-sans)}

/* slim, quiet scrollbars everywhere an area can overflow */
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(28,26,22,.18); border-radius:8px}
*{scrollbar-width:thin}

/* ------------------------------- login -------------------------------- */
.login{
  min-height:100dvh; display:block; padding:0; position:relative; overflow:hidden;
  background:var(--bg);
}
.login-stage{
  min-height:100dvh; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  padding:0;
}
.login-panel{width:100%; display:flex; justify-content:center; background:var(--ivory-soft); padding:24px}
.login-card{
  width:100%; max-width:380px; background:var(--ivory-soft); border-radius:16px;
  padding:36px 30px 28px; box-shadow:0 1px 2px rgba(28,26,22,.03), 0 18px 44px rgba(28,26,22,.07);
  text-align:center; border:1px solid var(--grey-secondary);
}
.login-card h1{font-size:23px; margin-top:14px; font-weight:600}
.login-card h2{font-size:19px; margin:14px 0 0; font-weight:600}
.login-card p{margin:4px 0 22px; font-size:14px}
.login-heading{
  font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-.01em;
  margin-top:18px; color:var(--exec-black);
}
.login-sub{
  font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
  margin:6px 0 26px; font-weight:600;
}
.auth-swap-quiet{margin:14px 0 0; font-size:12.5px; color:var(--muted)}
.linkish-quiet{
  background:none; border:0; padding:0; font:inherit; font-weight:600;
  color:var(--ink-2); cursor:pointer; letter-spacing:.02em;
  border-bottom:1px solid var(--line); transition:color .15s ease, border-color .15s ease;
}
.linkish-quiet:hover{color:var(--brand); border-color:var(--brand)}
/* sign-in button: exact emerald green, white text, no gradient */
.login-card .btn-primary{
  background:var(--emerald); border-color:var(--emerald); box-shadow:none; color:#fff;
  height:48px; font-size:14.5px; font-weight:700; letter-spacing:.02em; border-radius:12px;
}
.login-card .btn-primary:hover{background:var(--emerald); filter:brightness(.92)}
.login-card .btn-primary:active{background:var(--emerald); filter:brightness(.85)}

/* left visual: a curated, slow crossfading slideshow of real M.A.R Abu
   Homes property photographs. Shown as a compact banner on phone (never
   hidden - item 13 of the design brief), and as ~60% of the desktop
   split-screen below. This panel is a separate DOM subtree from
   .login-panel/#login-form and #signup-form - slide changes never touch,
   re-render or steal focus from the sign-in form. */
.login-visual{
  display:flex; flex-direction:column; position:relative; overflow:hidden; flex:0 0 auto;
  width:100%; height:74vh; min-height:480px; max-height:820px; background:var(--exec-black);
}
/* the bounded media stage fills the whole .login-visual panel - the
   footer floats over its bottom edge, so this box is never shrunk to
   make room for it. The photo itself is always shown in full (contain) -
   never cropped, whatever the panel's aspect ratio ends up being at a
   given window width - with the blurred zoomed copy behind it (below)
   filling the edges so it still reads as edge-to-edge, not letterboxed. */
.login-stage-media{
  position:relative; flex:1 1 auto; min-height:0; overflow:hidden; background:var(--exec-black);
}
.login-slideshow{position:absolute; inset:0}
.login-slide{position:absolute; inset:0; opacity:0; transition:opacity 1s ease; display:flex; align-items:center; justify-content:center; background:var(--exec-black); overflow:hidden}
.login-slide.is-active{opacity:1; z-index:1}
/* always-on blurred/zoomed backdrop: with the real photo on object-fit:contain
   (never cropped), this fills whatever margin is left around it so the panel
   still reads as a full-bleed premium frame, and it also backs a broken-image/
   img-fallback slide instead of a blank void. */
.login-slide::before{
  content:''; position:absolute; inset:-20px; z-index:0;
  background-image:var(--bg); background-size:cover; background-position:center;
  filter:blur(38px) brightness(.5) saturate(1.15); transform:scale(1.12);
}
.login-slide img{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain; object-position:var(--focal-m, center);
  display:block;
}
/* broken image: fall back to a plain brand-toned panel, never a broken-image box */
.login-slide img{background:transparent}
.login-slide.img-fallback img{opacity:0}
.login-slide.img-fallback{background:linear-gradient(165deg, var(--emerald) 0%, var(--exec-black) 88%)}
.login-slide-video video{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain; object-position:var(--focal-m, center);
  display:block; background:transparent;
}
.ls-video-play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; z-index:2;
  display:none; align-items:center; justify-content:center; border-radius:50%;
  background:rgba(9,12,9,.45); border:1.5px solid rgba(255,255,255,.7); color:#fff;
  font-size:20px; cursor:pointer;
}
.login-slide-video.needs-play .ls-video-play{display:flex}
/* logo/tagline + controls float over the photo/video's bottom edge (a
   gradient scrim keeps them legible) so the photo itself fills the
   whole .login-visual panel - nothing carves height out of it. */
.login-visual-footer{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,0) 100%);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px;
}
.login-visual-content{
  position:static; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:0;
}
.login-visual-mark{width:92px; height:auto}
.login-visual-tag{
  font-family:var(--font-display); font-weight:500; font-size:12px; line-height:1.25;
  color:#fff; letter-spacing:.01em; margin:0;
}
.login-slideshow-controls{
  position:static; z-index:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto;
}
.ls-btn{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08); color:#fff; font-size:13px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.ls-btn:hover{background:rgba(255,255,255,.18)}
.ls-dots{display:flex; align-items:center; gap:5px}
.ls-dot{width:6px; height:6px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.4)}
.ls-dot.is-active{background:#fff}
@media (prefers-reduced-motion:reduce){
  .login-slide{transition:none}
}
.wordmark-compact{margin-top:12px}
.wordmark-compact + h2{margin-top:16px}
.login-card label{display:block; text-align:left; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:14px}
/* who you are signed in as, on the waiting-for-a-role screen */
.waiting-who{
  margin:16px 0; padding:12px; border-radius:12px; text-align:center;
  background:var(--green-100); color:var(--ink); font-size:14px; line-height:1.5;
}
#waiting .btn + .btn{margin-top:10px}
/* the owner's setup-key field, revealed only when they ask for it */
.setup-key{
  margin:14px 0 4px; padding:12px; border-radius:12px;
  background:var(--green-100); border:1px dashed var(--green-600);
}
.setup-key label{margin:0}
.setup-key .field-note{margin-top:6px}
/* the thin "or" rule between Sign in and Create an account */
.auth-or{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--ink-2); font-size:12px}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:var(--line)}
.login-card .auth-swap{margin:16px 0 0; font-size:13px; color:var(--ink-2)}
.linkish{
  background:none; border:0; padding:0; font:inherit; font-weight:650;
  color:var(--green); cursor:pointer; text-decoration:underline;
}
.brand-mark{width:54px; height:54px; margin:0 auto; display:grid; place-items:center}
.brand-mark svg{width:60%; height:60%}
.brand-mark img{width:100%; height:100%; object-fit:contain}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.brand-lockup{display:block; margin:0 auto; max-width:200px; width:60%; height:auto}
.brand-lockup-compact{max-width:150px; width:46%}
.brand-row{display:flex; align-items:center; justify-content:center; gap:14px; height:52px; margin:0 auto}
.brand-row-mark{height:100%; width:auto}
.brand-row-word{height:62%; width:auto}

.wordmark{
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.wordmark-main{font-size:21px; font-weight:500; letter-spacing:.14em; text-transform:uppercase}
.wordmark .dot{color:var(--accent); margin:0 1px; letter-spacing:0}
.wordmark-sub{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.32em; color:var(--ink-2);
  text-transform:uppercase; margin-top:2px;
}

/* ------------------------------- shell -------------------------------- */
.shell{min-height:100dvh; display:flex}
.sidebar{display:none}
.main{flex:1; min-width:0; display:flex; flex-direction:column}

.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:8px;
  padding:12px 14px; color:#fff; border-bottom:1px solid var(--gold-wash);
  background:var(--brand);
  padding-top:calc(12px + env(safe-area-inset-top,0px));
}
.topbar h1{font-size:17px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff}
.icon-btn{
  background:rgba(255,255,255,.16); border:0; color:#fff; width:34px; height:34px;
  border-radius:10px; font-size:17px; cursor:pointer; display:grid; place-items:center; flex:none;
}
.icon-btn:active{transform:scale(.94)}
.only-mobile{display:grid}
.only-desktop{display:none}

.view{padding:14px 14px calc(96px + var(--safe-b)); max-width:1180px; width:100%; margin:0 auto}

/* ------------------------------ tab bar ------------------------------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:grid;
  grid-template-columns:repeat(5,1fr); align-items:end;
  background:var(--surface); border-top:1px solid var(--line);
  padding:6px 4px calc(6px + var(--safe-b));
}
.tabbar a{
  display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px;
  color:var(--muted); padding:6px 2px; font-weight:600;
}
.tabbar a span{font-size:18px; line-height:1}
.tabbar a.active{color:var(--brand)}
.fab{
  width:54px; height:54px; border-radius:50%; border:0;
  background:var(--brand); color:#fff;
  font-size:28px; line-height:1; margin:0 auto 4px;
  box-shadow:0 10px 24px rgba(11,83,53,.5);
  cursor:pointer; transition:transform .15s ease;
}
.fab:active{transform:scale(.94)}

/* ------------------------------- cards -------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); margin-bottom:12px; transition:box-shadow .18s ease, transform .18s ease;
}
a.card:hover,[data-go].card:hover{box-shadow:0 2px 4px rgba(28,31,28,.05), 0 14px 32px rgba(28,31,28,.08); transform:translateY(-1px)}
.card-head{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.card-head h2{font-size:16px}
.card-head .link{font-size:13px; color:var(--brand); font-weight:600}
.section-title{font-size:12px; font-weight:700; color:var(--ink-2); text-transform:uppercase;
  letter-spacing:.1em; margin:24px 2px 12px; padding-bottom:9px; padding-left:11px; position:relative;
  border-bottom:1px solid var(--line-soft)}
.section-title::before{
  content:""; position:absolute; left:0; top:2px; bottom:10px; width:2px; background:var(--accent); border-radius:2px;
}
/* a quieter heading, for grouping tiles inside one section */
.sub-title{font-size:12px; font-weight:650; color:var(--muted); margin:14px 2px 6px}

/* two-up dashboard rows: a wider card beside a narrower companion */
.dash-row{display:grid; grid-template-columns:1fr; gap:12px}
.dash-row > .card{margin-bottom:0}

/* premium onboarding card for an empty portfolio - light and integrated
   with the rest of the ivory/white card system, brand green carried only
   by the icon, rule and button so it reads as part of the page, not a
   separate dark marketing banner. */
.onboard-card{
  background:linear-gradient(155deg, var(--brand-tint), var(--surface) 62%);
  border:1px solid var(--line-soft); border-top:3px solid var(--accent);
  color:var(--ink); padding:30px 24px 26px; text-align:center; position:relative; overflow:hidden;
}
.onboard-motif{
  position:absolute; left:0; right:0; bottom:0; height:46px; color:var(--brand); opacity:.07; pointer-events:none;
}
.onboard-motif svg{width:100%; height:100%; display:block}
.onboard-card .onboard-icon{
  width:44px; height:44px; margin:0 auto 16px; border-radius:13px; display:grid; place-items:center;
  background:var(--brand); color:#fff; font-size:19px;
  box-shadow:0 8px 20px rgba(11,83,53,.34); position:relative; z-index:1;
}
.onboard-card .onboard-icon svg{width:20px; height:20px}
.onboard-card h3{font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:-.005em; margin-bottom:2px; color:var(--ink); position:relative; z-index:1}
.onboard-card p{font-size:13px; color:var(--ink-2); max-width:380px; margin:0 auto 20px; line-height:1.6; position:relative; z-index:1}
.onboard-card .btn-primary{background:var(--brand); color:#fff; border-color:var(--brand); padding:11px 24px; font-size:13.5px; letter-spacing:.02em; font-weight:700; position:relative; z-index:1}
.onboard-card .btn-primary:hover{filter:brightness(1.06)}

.steps{display:flex; flex-direction:column; gap:20px}
.step{display:flex; align-items:flex-start; gap:16px; position:relative}
.step:not(:last-child)::before{
  content:''; position:absolute; left:14.5px; top:30px; bottom:-20px; width:1px;
  background:linear-gradient(180deg, rgba(11,83,53,.3), rgba(11,83,53,.08));
}
.step-n{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--brand-wash); color:var(--brand); font-weight:700; font-size:13px;
  border:1px solid rgba(11,83,53,.18); position:relative; z-index:1;
}
.step b{font-size:14px; font-weight:650; color:var(--ink); display:block; margin-bottom:2px}
.step .muted{line-height:1.5}

/* stat tiles */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.tiles.four{grid-template-columns:repeat(2,1fr)}
.tiles.six{grid-template-columns:repeat(2,1fr)}
.tile{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:18px; padding:22px 20px 20px;
  box-shadow:0 1px 2px rgba(28,31,28,.03); display:block; text-align:left; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; position:relative; overflow:hidden;
}
.tile:hover{transform:translateY(-3px); border-color:var(--brand); box-shadow:0 4px 8px rgba(28,31,28,.06), 0 20px 40px rgba(28,31,28,.09)}
.tile .tile-icon{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:18px;
  background:var(--brand-wash); color:var(--brand); font-size:16px; font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(11,83,53,.10);
}
.tile .tile-icon svg{width:18px; height:18px}
.tile .label{font-size:10.5px; color:var(--ink-2); font-weight:700; text-transform:uppercase; letter-spacing:.09em}
.tile .value{font-family:var(--font-sans); font-size:27px; font-weight:800; margin-top:8px; letter-spacing:-.02em; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums}
.tile .value.sm{font-size:19px}
.tile .sub{font-size:12px; color:var(--muted); margin-top:5px}
.tile.accent{background:var(--brand); border-color:var(--brand); color:#fff}
.tile.accent .label,.tile.accent .sub{color:rgba(255,255,255,.75)}
.tile.accent .value{color:#fff}
.tile.accent .tile-icon{background:rgba(255,255,255,.16); color:#fff}
.tile.ok .value{color:var(--ok)}
.tile.bad .value{color:var(--bad)}
.tile.warn .value{color:var(--warn)}
.tile.ok .tile-icon{background:var(--ok-bg); color:var(--ok)}
.tile.bad .tile-icon{background:var(--bad-bg); color:var(--bad)}
.tile.warn .tile-icon{background:var(--warn-bg); color:var(--warn)}
/* Financial-metric and attention-metric KPIs get their own quiet tonal
   surface so the eye groups "portfolio counts" vs "money" vs "needs a
   look" without resorting to a bright/rainbow status colour. */
.tile.finance{background:linear-gradient(155deg, var(--brand-tint), var(--surface) 68%); border-color:rgba(11,83,53,.14)}
.tile.finance .tile-icon{background:var(--brand-wash); color:var(--brand)}
.tile.attention{background:linear-gradient(155deg, var(--gold-wash), var(--surface) 72%); border-color:rgba(184,134,58,.22)}
.tile.attention .tile-icon{background:var(--gold-wash); color:var(--accent)}
.tile.attention .value{color:var(--accent)}
/* a thin foil edge on the money-grade tiles only - the one place a
   metallic accent earns its keep, never applied to plain counts */
.tile.finance::before,.tile.attention::before{content:""; position:absolute; left:0; right:0; bottom:0; height:3px}
.tile.finance::before{background:linear-gradient(90deg, var(--brand), var(--accent))}
.tile.attention::before{background:linear-gradient(90deg, var(--accent), var(--bad))}

/* three quiet tonal surfaces so a row of cards reads as one considered
   composition instead of identical white boxes repeated down the page */
.card.tone-a{background:linear-gradient(165deg, var(--bg), var(--surface) 72%)}
.card.tone-b{background:linear-gradient(165deg, var(--brand-tint), var(--surface) 70%); border-color:rgba(11,83,53,.10)}
.card.tone-c{background:linear-gradient(165deg, var(--gold-wash), var(--surface) 70%); border-color:rgba(184,134,58,.18)}

/* progress */
.bar{height:8px; border-radius:6px; background:var(--line); overflow:hidden; display:flex}
.bar i{display:block; height:100%}
.bar .fill-ok{background:var(--ok)}
.bar .fill-warn{background:var(--warn)}
.bar .fill-bad{background:var(--bad)}
.bar-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); margin-top:8px}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:5px}

/* --------------------------- logo library grid -------------------------- */
.logo-grid{display:grid; grid-template-columns:1fr; gap:12px}
.logo-card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:16px; padding:14px;
  box-shadow:0 1px 2px rgba(28,31,28,.03); display:flex; flex-direction:column; gap:10px;
}
.logo-card.is-active{border-color:var(--green); box-shadow:0 0 0 2px var(--green-100)}
.logo-card .logo-preview{
  height:90px; min-width:60%; align-self:center; border-radius:10px; display:flex;
  align-items:center; justify-content:center; overflow:hidden; padding:10px 18px; box-sizing:border-box;
}
.logo-card .logo-preview img{max-width:100%; max-height:100%; object-fit:contain}
.logo-card .logo-name{font-weight:650; font-size:14.5px}
.logo-card .logo-brand{font-size:12.5px; color:var(--muted)}

/* ------------------------------- chips -------------------------------- */
.chip{
  display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.chip-ok{background:var(--ok-bg); color:var(--ok)}
.chip-warn{background:var(--warn-bg); color:var(--warn)}
.chip-bad{background:var(--bad-bg); color:var(--bad)}
.chip-info{background:var(--info-bg); color:var(--info)}
.chip-grey{background:#f2f4f7; color:var(--ink-2)}
/* a chip you can press, e.g. dropping a variable into a message */
button.chip{border:0; cursor:pointer; font-family:inherit}

/* ------------------------------- rows --------------------------------- */
.row{
  display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line);
  cursor:pointer;
}
.row:last-child{border-bottom:0}
.row .title{font-weight:650; font-size:14.5px}
.row .sub{font-size:12.5px; color:var(--ink-2)}
.row .right{text-align:right; flex:none}
.row .amount{font-weight:700; font-size:14px; white-space:nowrap}
.avatar{
  width:38px; height:38px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--green-100); color:var(--green); font-weight:700; font-size:14px;
}
.avatar.vacant{background:#f2f4f7; color:var(--muted)}

/* unit grid */
.unit-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.unit{
  border:1px solid var(--line); border-radius:12px; padding:9px; cursor:pointer; background:#fff;
  border-left:4px solid var(--muted);
}
.unit .n{font-weight:700; font-size:14px}
.unit .who{font-size:11.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.unit .st{font-size:11px; font-weight:700; margin-top:3px}
.unit.occupied{border-left-color:var(--ok)}
.unit.vacant{border-left-color:var(--muted); background:#fafbfc}
.unit.due{border-left-color:var(--warn)}
.unit.expired{border-left-color:var(--bad)}
.unit.owing{border-left-color:var(--bad)}

/* ------------------------------ buttons ------------------------------- */
.btn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:650;
  padding:11px 14px; border-radius:12px; font-size:14.5px; cursor:pointer; font-family:inherit;
  transition:transform .1s ease, box-shadow .15s ease, filter .15s ease, border-color .15s ease;
}
.btn:hover{border-color:var(--brand)}
.btn:active{transform:scale(.985)}
.btn-primary{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 6px 16px rgba(11,83,53,.28);
}
.btn-primary:hover{border-color:var(--brand); filter:brightness(1.05)}
.btn-primary:active{filter:brightness(.95)}
.btn-ghost{background:transparent}
.btn-danger{background:var(--bad-bg); border-color:#f0cec7; color:var(--bad)}
.btn-block{width:100%; display:block}
.btn-sm{padding:7px 11px; font-size:13px; border-radius:10px}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}
.btn-row .btn{flex:1; min-width:120px}

.quick{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.quick button{
  display:flex; align-items:center; gap:10px; padding:14px; border-radius:14px; border:1px solid var(--line);
  background:#fff; font-weight:650; font-size:14px; cursor:pointer; text-align:left; font-family:inherit;
}
.quick button b{width:32px; height:32px; border-radius:10px; background:var(--green-100); color:var(--green);
  display:grid; place-items:center; font-size:16px; flex:none}

/* ------------------------------- forms -------------------------------- */
label{display:block; font-size:13px; font-weight:600; color:var(--ink-2); margin-bottom:12px}
input,select,textarea{
  width:100%; margin-top:5px; padding:11px 12px; border:1px solid var(--line); border-radius:11px;
  font-size:16px; font-family:inherit; background:#fff; color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-100); border-color:var(--green)}
textarea{min-height:74px; resize:vertical}
.form-2{display:grid; grid-template-columns:1fr 1fr; gap:0 10px}
/* No role yet: the shell is there, but nothing in it works, so hide the parts
   that would only lead to a "your role cannot do that". */
body.pending .tabbar, body.pending .fab, body.pending #search-btn{display:none}
.admin-check{margin:2px 0 12px; font-size:13.5px}

.pw-wrap{position:relative; display:block}
.pw-eye{
  position:absolute; right:5px; top:6px; bottom:1px; padding:0 12px; border:0; border-radius:9px;
  background:transparent; color:var(--muted); font-family:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer; letter-spacing:.2px;
}
.pw-eye:hover{background:var(--green-100); color:var(--green-600)}
.pw-eye.on{color:var(--green-600)}
.pw-wrap input{padding-right:64px}

.error{color:var(--bad); font-size:13px; min-height:18px; margin-bottom:6px; font-weight:600}
.hint{font-size:12px; color:var(--muted); font-weight:500; margin-top:4px}
.field-note{background:var(--green-100); color:var(--green-600); border-radius:10px; padding:9px 11px;
  font-size:12.5px; font-weight:600; margin-bottom:12px}

.unit-row{border:1px solid var(--line); border-radius:12px; padding:12px 12px 0; margin-bottom:10px}
.unit-row-head{font-weight:700; font-size:14px; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.unit-row-head .badge-filled{background:var(--green-100); color:var(--green-600); border-radius:999px;
  padding:2px 9px; font-size:11px; font-weight:700}
.pick-panel{border:1px solid var(--line); border-radius:10px; padding:8px; margin:8px 0; background:var(--bg)}
.pick-list{max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:4px 2px}
.pick-list .check{font-weight:500}

.filters{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; -webkit-overflow-scrolling:touch}
.filters button{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 13px; font-size:13px;
  font-weight:600; white-space:nowrap; cursor:pointer; color:var(--ink-2); font-family:inherit;
}
.filters button.active{background:var(--green); color:#fff; border-color:var(--green)}

.search-box{position:relative; margin-bottom:10px}
.search-box input{margin-top:0}

/* --------------------------------- chat --------------------------------- */
.chat-log{display:flex; flex-direction:column; gap:10px; min-height:200px; max-height:50vh; overflow-y:auto; padding:2px 2px 8px}
.chat-msg{max-width:86%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.45; white-space:pre-wrap}
.chat-msg.user{align-self:flex-end; background:var(--green); color:#fff; border-bottom-right-radius:4px}
.chat-msg.ai{align-self:flex-start; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:4px}
.chat-msg.ai.thinking{color:var(--ink-2); font-style:italic}
.chat-input-row{display:flex; gap:8px; margin-top:8px}
.chat-input-row input{margin-top:0; flex:1}
.chat-input-row button{flex-shrink:0}

/* ------------------------------- sheet -------------------------------- */
.sheet-wrap{position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end; justify-content:center}
.sheet-backdrop{position:absolute; inset:0; background:rgba(16,24,40,.45); animation:fade .15s ease}
.sheet{
  position:relative; background:var(--surface); width:100%; max-width:560px;
  border-radius:20px 20px 0 0; max-height:92dvh; display:flex; flex-direction:column;
  animation:rise .22s cubic-bezier(.2,.8,.3,1);
}
.sheet-handle{width:38px; height:4px; border-radius:3px; background:var(--line); margin:8px auto 0}
.sheet-head{display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:16px; flex:1}
.sheet-head .icon-btn{background:#f2f4f7; color:var(--ink-2)}
.sheet-body{padding:16px; overflow:auto; padding-bottom:calc(20px + var(--safe-b))}
@keyframes rise{from{transform:translateY(22px); opacity:.6}to{transform:none; opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ----------------------------- calculator ------------------------------- */
/* Mobile-first: a bottom sheet the user can reach from anywhere without it
   swallowing the whole screen (no backdrop, .calc-wrap itself lets clicks
   through outside the panel) so opening it never discards whatever form is
   open behind it. Desktop turns it into a small movable floating panel -
   see the one @media(min-width:900px) override below. */
.calc-wrap{position:fixed; left:0; right:0; bottom:0; z-index:65; display:flex; justify-content:center; pointer-events:none}
.calc-panel{
  position:relative; pointer-events:auto; background:var(--surface); width:100%; max-width:420px;
  border-radius:20px 20px 0 0; max-height:80dvh; display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); animation:rise .22s cubic-bezier(.2,.8,.3,1);
}
.calc-head{display:flex; align-items:center; gap:8px; padding:14px 14px 10px; border-bottom:1px solid var(--line); position:relative}
.calc-handle-bar{width:38px; height:4px; border-radius:3px; background:var(--line); position:absolute; top:8px; left:50%; transform:translateX(-50%)}
.calc-head h2{font-size:15px; flex:1; margin:0}
.calc-head .icon-btn{background:#f2f4f7; color:var(--ink-2)}
.calc-body{padding:14px; overflow:auto; padding-bottom:calc(16px + var(--safe-b))}
.calc-display{background:var(--bg); border-radius:var(--radius-sm); padding:14px; margin-bottom:12px; text-align:right}
.calc-expr{font-size:13px; color:var(--ink-2); min-height:18px; overflow-wrap:anywhere}
.calc-value{font-size:32px; font-weight:700; overflow-wrap:anywhere; line-height:1.2}
.calc-pad{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.calc-key{border:none; border-radius:var(--radius-sm); background:var(--bg); color:var(--ink); font-size:18px; font-weight:600; padding:14px 0; cursor:pointer}
.calc-key:active{transform:scale(.96)}
.calc-key-fn{background:var(--grey-secondary); color:var(--ink)}
.calc-key-op{background:var(--brand-wash); color:var(--brand)}
.calc-key-eq{background:var(--brand); color:#fff}
.calc-history{margin-top:12px; border-top:1px solid var(--line); padding-top:10px; max-height:160px; overflow:auto}
.calc-history-row{display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:13px; border-bottom:1px solid var(--line-soft)}
.calc-history-row .calc-h-expr{color:var(--ink-2)}
.calc-history-empty{color:var(--muted); text-align:center; padding:10px 0; font-size:13px}

/* The hero is the one place the whole brand gets to speak at full
   volume - deep-green signature panel (not another ivory card), a
   hairline gold edge, a faint concentric-arc glow and a line-art
   skyline watermark so it reads as "this company owns premium real
   estate" rather than "generic SaaS header". Every other panel on the
   page stays quiet so this one keeps its authority. */
.dash-hero{
  margin-bottom:22px; padding:32px 30px 28px; border-radius:22px; position:relative; overflow:hidden;
  background:linear-gradient(160deg, var(--brand) 0%, var(--brand-dark) 100%);
  border:1px solid var(--gold-wash);
  border-top:2px solid var(--accent);
  box-shadow:0 22px 48px rgba(11,83,53,.32), inset 0 1px 0 rgba(255,255,255,.05);
}
.dash-hero::after{
  content:""; position:absolute; top:-65%; right:-8%; width:340px; height:340px; pointer-events:none;
  background:
    repeating-radial-gradient(circle, transparent 0, transparent 26px, rgba(184,134,58,.16) 27px, transparent 28px),
    radial-gradient(circle, rgba(184,134,58,.12) 0%, transparent 72%);
  opacity:.55;
}
.dash-hero-motif{
  position:absolute; left:0; right:0; bottom:0; height:60px; color:var(--accent); opacity:.16; pointer-events:none;
}
.dash-hero-motif svg{width:100%; height:100%; display:block; animation:heroDrift 110s ease-in-out infinite alternate}
@media (prefers-reduced-motion: reduce){.dash-hero-motif svg{animation:none}}
@keyframes heroDrift{from{transform:translateX(0)}to{transform:translateX(-3%)}}
.dash-hero-kicker{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px; position:relative; z-index:1;
}
.dash-hero-greet{font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.72); position:relative; z-index:1}
.dash-hero-title{
  font-family:var(--font-display); font-weight:600; font-size:37px; color:#fff;
  margin:9px 0 15px; letter-spacing:-.008em; position:relative; z-index:1;
}
.hero-rule{width:46px; height:2px; background:var(--accent); margin-bottom:15px; position:relative; z-index:1}
.dash-hero-date{color:rgba(255,255,255,.62); font-size:13.5px; position:relative; z-index:1}

/* ------------------------------- misc --------------------------------- */
.toast{
  position:fixed; left:50%; bottom:calc(86px + var(--safe-b)); transform:translateX(-50%); z-index:90;
  background:var(--ink); color:#fff; padding:11px 16px; border-radius:12px; font-size:14px;
  font-weight:600; max-width:90vw; box-shadow:var(--shadow);
}
.toast.bad{background:var(--bad)}
.empty{
  text-align:center; padding:44px 22px; color:var(--muted);
}
.empty-icon{
  width:54px; height:54px; margin:0 auto 16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-wash);
  border:1px solid rgba(11,83,53,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
  color:var(--brand); font-size:22px; line-height:1;
}
.empty b{font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--ink)}
.empty p{font-size:13px; margin-top:5px}
.empty-icon svg{width:26px; height:26px}
.empty:not(:has(.empty-icon))::before{
  content:""; display:block; width:44px; height:44px; margin:0 auto 14px; border-radius:12px;
  background:var(--brand);
  box-shadow:0 6px 16px rgba(11,83,53,.30);
}
.empty b{display:block; color:var(--ink); font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:.01em}
.empty p{margin:8px auto 0; font-size:13.5px; color:var(--muted); max-width:340px; line-height:1.5}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:14px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--ink-2)}
.kv b{font-weight:650; text-align:right}
.list-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.skeleton{height:64px; border-radius:14px; background:linear-gradient(90deg,#eef0f3,#f7f8fa,#eef0f3);
  background-size:200% 100%; animation:sk 1.2s infinite; margin-bottom:10px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal .dow{font-size:11px; text-align:center; color:var(--muted); font-weight:700; padding:4px 0}
.cal .day{
  aspect-ratio:1; border:1px solid var(--line); border-radius:9px; padding:4px; font-size:12px;
  display:flex; flex-direction:column; gap:2px; background:#fff; cursor:pointer;
}
.cal .day.out{background:#fafbfc; color:var(--muted)}
.cal .day.today{border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green)}
.cal .day .marks{display:flex; gap:2px; flex-wrap:wrap}
.cal .day .marks i{width:6px; height:6px; border-radius:50%}
table.data{width:100%; border-collapse:collapse; font-size:13.5px}
table.data th{text-align:left; color:var(--ink-2); font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:9px 6px; border-bottom:2px solid var(--line)}
table.data td{padding:10px 6px; border-bottom:1px solid var(--line)}
table.data tbody tr{transition:background .12s ease}
table.data tbody tr:hover{background:var(--brand-tint)}
.scroll-x{overflow-x:auto}

/* ------------------------------ calendar ------------------------------- */
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.cal-head b{font-size:15px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-grid.head{margin-bottom:2px}
.cal-dow{font-size:11px; text-align:center; color:var(--muted); font-weight:700; padding:4px 0}
.cal-cell{
  min-height:56px; border:1px solid var(--line); border-radius:10px; padding:5px 6px;
  display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; background:var(--surface);
}
.cal-cell.blank{border:0; background:transparent; cursor:default}
.cal-cell .n{font-size:12.5px; font-weight:650; color:var(--ink-2)}
.cal-cell .dots{display:flex; gap:3px; flex-wrap:wrap}
.cal-cell.has{background:#fbfcfd}
.cal-cell.today{border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green)}
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-2); margin-top:10px}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)}
.dot.warn{background:var(--warn)} .dot.info{background:var(--info)}
.dot.grey{background:var(--muted)}

.money-hero{
  font-family:var(--font-sans); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(22px, 6.5vw, 32px); line-height:1.1; word-break:break-word; font-variant-numeric:tabular-nums;
}
.money-panel{
  background:var(--brand-dark); border-color:var(--brand-dark); color:#fff;
  border-top:2px solid var(--brand); position:relative; overflow:hidden;
  box-shadow:0 16px 36px rgba(11,83,53,.24);
}

/* ------------------------------- extras -------------------------------- */
.card.pad{padding:14px}
.card.flat{box-shadow:none; border:1px solid var(--line)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:0 10px}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.btn-row.tight{margin-top:8px}
.btn-row.tight .btn{flex:0 0 auto; min-width:0}
.section-title.sm{margin-top:14px; font-size:12px}
.row .title.done{text-decoration:line-through; color:var(--muted)}
.check{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); margin-bottom:10px; cursor:pointer}
.check input{width:18px; height:18px; margin:0; accent-color:var(--green)}
.check-grid{display:grid; grid-template-columns:1fr; gap:0}
.avatar.ok{background:var(--ok-bg); color:var(--ok)}
.avatar.bad{background:var(--bad-bg); color:var(--bad)}
.avatar.warn{background:var(--warn-bg); color:var(--warn)}
.avatar.info{background:var(--info-bg); color:var(--info)}
.avatar.grey{background:#f2f4f7; color:var(--ink-2)}

/* ----------------------------- desktop -------------------------------- */
@media (min-width:900px){
  .tabbar{display:none}
  .only-mobile{display:none}
  .only-desktop{display:inline-flex}
  .login-slide img, .login-slide-video video{object-position:var(--focal-d, center)}
  .sidebar{
    display:flex; flex-direction:column; width:272px; flex:none; color:#fff;
    background:var(--brand);
    border-right:0;
    position:sticky; top:0; height:100dvh; padding:28px 16px 18px;
  }
  .sidebar-brand{
    display:flex; align-items:center; margin-bottom:60px; padding:22px 14px 4px;
  }
  .sidebar-brand .brand-mark{
    width:100%; height:auto; margin:0; display:block; flex:none;
  }
  .sidebar-brand .brand-mark img{
    display:block; width:100%; max-width:228px; height:auto; object-fit:contain;
    filter:drop-shadow(0 4px 16px rgba(0,0,0,.28));
  }
  #side-nav{display:flex; flex-direction:column; gap:2px; flex:1; overflow:auto}
  .nav-group-label{
    font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(255,255,255,.42); margin:18px 12px 6px;
  }
  #side-nav > .nav-group-label:first-child{margin-top:4px}
  #side-nav a{
    display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
    color:rgba(255,255,255,.8); font-size:14px; font-weight:600; position:relative;
    transition:background .18s ease, color .18s ease;
  }
  #side-nav a span{width:20px; text-align:center; opacity:.8; font-size:15px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
  #side-nav a span svg{width:17px; height:17px}
  #side-nav a:hover{background:rgba(255,255,255,.08); color:#fff}
  #side-nav a:hover span{opacity:1}
  #side-nav a.active{background:rgba(255,255,255,.14); color:#fff}
  #side-nav a.active span{opacity:1}
  #side-nav a.active::before{
    content:""; position:absolute; left:-16px; top:9px; bottom:9px; width:3px;
    border-radius:0 3px 3px 0; background:var(--accent);
  }
  .sidebar-foot{display:flex; align-items:center; gap:10px; border-top:1px solid rgba(255,255,255,.14); padding-top:14px; margin-top:8px}
  .sidebar-foot strong{display:block; font-size:13px; color:#fff}
  .sidebar-foot .muted{color:rgba(255,255,255,.6); font-size:11.5px}
  .sidebar-foot .avatar{background:rgba(255,255,255,.14); color:#fff; width:34px; height:34px}
  .topbar{
    background:var(--surface); color:var(--ink);
    border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.02);
  }
  .topbar{gap:8px; padding:16px 28px}
  .topbar h1{font-size:20px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
  .topbar .icon-btn{
    background:var(--brand-tint); color:var(--brand); border:1px solid var(--line-soft);
    width:38px; height:38px; margin-left:2px; transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .topbar .icon-btn:hover{background:var(--brand-wash); border-color:var(--gold-wash); transform:translateY(-1px); box-shadow:0 4px 10px rgba(11,83,53,.12)}
  #quick-add-btn{padding:0 20px; height:38px; border-radius:10px; font-weight:700; letter-spacing:.01em; margin-left:10px}
  .topbar-divider{width:1px; height:24px; background:var(--line); margin:0 10px; flex:none}
  .topbar-profile{display:flex; align-items:center; margin-left:0; flex:none}
  .topbar-profile .avatar{
    width:38px; height:38px; border-radius:10px; background:var(--brand-wash); color:var(--brand);
    font-weight:700; font-size:13px; display:grid; place-items:center; border:1px solid var(--line-soft);
    transition:background .15s ease;
  }
  .topbar-profile:hover .avatar{background:var(--brand-wash-2)}
  .view{padding:24px 28px 44px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .tiles.four{grid-template-columns:repeat(4,1fr)}
  .dash-row{grid-template-columns:1.6fr 1fr}
  .dash-row.even{grid-template-columns:1fr 1fr}
  .dash-row.three{grid-template-columns:repeat(3,1fr)}
  .tiles.six{grid-template-columns:repeat(3,1fr)}
  .quick{grid-template-columns:repeat(4,1fr)}
  .sheet-wrap{align-items:center}
  .sheet{border-radius:18px; max-height:86dvh}
  .calc-wrap{left:auto; right:24px; bottom:auto; top:64px; justify-content:flex-end; align-items:flex-start}
  .calc-panel{width:320px; max-width:320px; border-radius:16px; max-height:min(560px,80dvh)}
  .calc-head{cursor:grab}
  .calc-head:active{cursor:grabbing}
  .calc-handle-bar{display:none}
  .split{display:grid; grid-template-columns:1.35fr 1fr; gap:16px; align-items:start}
  .toast{bottom:30px}
  .unit-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .cal-cell{min-height:84px}
  .check-grid{grid-template-columns:repeat(2,1fr)}
  .logo-grid{grid-template-columns:repeat(3,1fr)}

  /* login/home: luxury split-screen (photography ~60%, stationary sign-in
     panel ~40%). The sign-in panel's size/position never react to slide
     changes - only .login-visual and its own children animate. */
  .login-stage{
    flex-direction:row; align-items:stretch; justify-content:stretch; padding:0; min-height:100dvh;
  }
  .login-visual{
    display:flex; flex-direction:column; position:relative; overflow:hidden;
    flex:1 1 60%; min-width:0; width:auto; height:auto;
  }
  .login-visual-footer{
    padding:22px 40px; gap:24px;
  }
  .login-visual-content{
    display:flex; flex-direction:row; align-items:center; gap:18px;
  }
  .login-visual-mark{width:150px}
  .login-visual-tag{font-size:16px}
  .login-panel{
    flex:1 1 40%; min-width:420px; max-width:640px; background:var(--ivory-soft);
    display:flex; align-items:center; justify-content:center; padding:40px;
  }
  .login-card{border:0; box-shadow:none; max-width:400px; padding:0}
}