@import url("fonts.css");

/* Lutella design system: Obsidian/Stone/Champagne, light and dark glass. */
:root {
  --obsidian: #0B0B0C; --charcoal: #1A1A1C; --stone: #EDEAE6; --sand: #D7CEC3; --champagne: #C9B487; --gold: #D4B370;
  --ambient: #E9E3DA; --ink-2: #5C574F; --ink-3: #6F6A62; --ink-body: #3A3631; --bronze: #8A6F3A;
  --dk-2: #A8A297; --dk-3: #8D877D; --dk-label: #9B958C; --dk-strong: #D8D2C7;
  --sage: #7E9A72; --sage-2: #9DB58F; --amber: #C2853F; --amber-bg: #F6EFE3; --amber-ink: #8A5A22; --brick: #9A4B3F;
  --hair: rgb(11 11 12 / .05); --hair-dk: rgb(237 234 230 / .12);
  --font: Satoshi, ui-sans-serif, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; font-family: var(--font); font-weight: 400; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; isolation: isolate; }
strong, b { font-weight: 500; }
h1, h2, h3 { margin: 0; font-weight: 300; }
p { margin: 0; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, pre, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- themes ---------- */
body.light {
  color: var(--obsidian);
  background: radial-gradient(38% 32% at 88% 6%, rgb(212 179 112 / .42), transparent 72%), radial-gradient(42% 38% at 4% 46%, rgb(201 180 135 / .34), transparent 72%), radial-gradient(36% 30% at 62% 92%, rgb(132 108 80 / .22), transparent 72%), radial-gradient(30% 26% at 30% 4%, rgb(255 255 255 / .7), transparent 70%), var(--ambient);
  background-attachment: scroll;
}
body.light a { color: var(--bronze); }
body.light a:hover { color: var(--obsidian); }
body.dark { color: var(--stone); background: radial-gradient(80% 60% at 50% 0%, #2c261e 0%, #121112 50%, var(--obsidian) 80%) var(--obsidian); }
body.dark a { color: var(--gold); }
body.dark a:hover { color: var(--stone); }
body.light .muted { color: var(--ink-3); }
body.dark .muted { color: var(--dk-2); }
.faint { color: var(--dk-3); }
body.light .faint { color: var(--ink-3); }

/* ---------- type ---------- */
.lbl { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 400; }
body.dark .lbl { letter-spacing: .32em; }
.lbl.sm { font-size: 10px; }
body.light .lbl { color: var(--bronze); }
body.dark .lbl { color: var(--champagne); }
.lbl.quiet { color: var(--ink-3); }
body.dark .lbl.quiet { color: var(--dk-3); }
.h-page { font-size: clamp(34px, 9vw, 52px); line-height: 1.05; font-weight: 300; letter-spacing: -.02em; }
.h-signin { font-size: clamp(48px, 15vw, 84px); line-height: 1; font-weight: 300; letter-spacing: -.02em; }
.h-card { font-size: clamp(28px, 7vw, 38px); line-height: 1.1; font-weight: 300; letter-spacing: -.015em; }
.h2-home { font-size: 32px; font-weight: 300; letter-spacing: -.015em; }
.h2-signin { font-size: 30px; font-weight: 300; letter-spacing: -.01em; }
.h2-panel { font-size: 26px; font-weight: 300; }
.h2-small { font-size: 22px; font-weight: 300; }
.lead { font-size: 17px; font-weight: 300; color: var(--ink-2); }
body.dark .lead, .copy-dk { font-size: 15px; line-height: 1.6; color: var(--dk-2); }

/* ---------- glass ---------- */
.glass {
  border-radius: 28px;
  background: linear-gradient(150deg, rgb(255 255 255 / .74) 0%, rgb(255 255 255 / .36) 100%);
  border: 1px solid rgb(255 255 255 / .75);
  box-shadow: 0 30px 60px -32px rgb(70 52 28 / .35), inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(11 11 12 / .04);
  -webkit-backdrop-filter: blur(32px) saturate(170%); backdrop-filter: blur(32px) saturate(170%);
}
.glass-dark {
  border-radius: 32px; padding: 36px;
  background: rgb(32 30 28 / .55);
  border: 1px solid var(--hair-dk);
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .08);
}
.glass-dark.r28 { border-radius: 28px; }
.glass-dark.gold { border-color: rgb(212 179 112 / .3); }
.ink-panel { border-radius: 28px; padding: 28px; color: var(--stone); background: radial-gradient(120% 100% at 100% 100%, #3d3122 0%, var(--charcoal) 50%, var(--obsidian) 90%); box-shadow: 0 30px 60px -30px rgb(11 11 12 / .55); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 11px 20px; border-radius: 999px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 14px; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:disabled { opacity: .55; cursor: default; }
.btn svg { flex: none; }
a.btn, a.btn:hover { text-decoration: none; }
.btn-stone, body .btn-stone, body.light a.btn-stone, body.light a.btn-stone:hover, body.dark a.btn-stone, body.dark a.btn-stone:hover { background: var(--stone); color: var(--obsidian); font-weight: 500; }
.btn-stone.wide { display: flex; width: 100%; height: 54px; padding: 0 22px 0 18px; justify-content: space-between; font-size: 15px; }
.btn-stone .g { display: flex; align-items: center; gap: 12px; }
.btn-gold, body.dark a.btn-gold, body.dark a.btn-gold:hover { background: var(--gold); color: var(--obsidian); font-weight: 500; }
.btn-gold.wide { display: flex; width: 100%; height: 54px; padding: 0 22px; justify-content: space-between; font-size: 15px; }
.btn-ink, body.light a.btn-ink, body.light a.btn-ink:hover { background: var(--obsidian); color: var(--stone); font-weight: 500; }
.btn-ghost { border-color: rgb(11 11 12 / .15); color: var(--obsidian); }
body.light a.btn-ghost, body.light a.btn-ghost:hover { color: var(--obsidian); }
body.dark .btn-ghost, .on-dark .btn-ghost, body.dark a.btn-ghost, body.dark a.btn-ghost:hover { border-color: rgb(237 234 230 / .2); color: var(--stone); }
.btn-ghost.tall { height: 50px; font-size: 15px; }
.btn-ghost.dashed { border-style: dashed; }
.btn-danger { color: var(--brick); }
.btn-danger.outline { border-color: rgb(154 75 63 / .35); }
.btn-danger.fill { background: var(--brick); color: var(--stone); font-weight: 500; }
.btn-text { padding: 7px 12px; min-height: 0; font-size: 13px; color: var(--bronze); }
body.dark .btn-text { color: var(--gold); }
.btn-text.btn-danger { color: var(--brick); }
.btn.sm { padding: 8px 16px; min-height: 0; font-size: 13px; }
.btn-icon { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid rgb(11 11 12 / .08); background: transparent; display: inline-grid; place-items: center; color: var(--ink-2); flex: none; }
body.dark .btn-icon, .on-dark .btn-icon { border-color: rgb(237 234 230 / .18); color: var(--stone); }
.btn-icon[aria-expanded="true"] svg { transform: rotate(90deg); }
.btn-icon svg { transition: transform .2s; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row > .grow2 { flex: 2 1 200px; }
.btn-row > .grow1 { flex: 1 1 120px; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field-pill { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: rgb(11 11 12 / .5); border: 1px solid var(--hair-dk); min-width: 0; }
.field-pill input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 0; background: transparent; font-size: 15px; color: inherit; outline: none; border-radius: 999px; }
.field-pill button { height: 42px; min-height: 0; padding: 0 18px; border-radius: 999px; border: 1px solid rgb(212 179 112 / .5); background: transparent; font-size: 14px; color: var(--gold); flex: none; }
body.light .field-pill { background: rgb(255 255 255 / .5); border-color: rgb(255 255 255 / .8); box-shadow: inset 0 1px 2px rgb(11 11 12 / .06); }
body.light .field-pill button { border: 0; background: var(--obsidian); color: var(--stone); font-weight: 500; padding: 0 20px; }
.field-pill:focus-within { outline: 2px solid rgb(212 179 112 / .55); outline-offset: 2px; }
input[type=email], input[type=text], input[type=password], input[type=date], input[type=datetime-local], input[type=url], input:not([type]), select, textarea {
  min-width: 0; max-width: 100%; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid rgb(11 11 12 / .14); background: rgb(255 255 255 / .45); font-size: 15px; color: var(--obsidian);
}
textarea { height: auto; min-height: 92px; padding: 14px 18px; border-radius: 20px; }
select { padding-right: 34px; }
.field-pill input { border: 0; background: transparent; height: 42px; }
body.dark input, body.dark select, body.dark textarea, .on-dark input, .on-dark select, .on-dark textarea { border-color: rgb(237 234 230 / .16); background: rgb(237 234 230 / .06); color: var(--stone); }
body.dark .field-pill input, .on-dark .field-pill input { background: transparent; border: 0; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid rgb(212 179 112 / .7); outline-offset: 2px; }
.field-pill input:focus-visible { outline: none; }
input.big { height: 64px; text-align: center; font-size: 26px; letter-spacing: .14em; text-transform: uppercase; }
label { font-size: 14px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--gold); margin: 0; flex: none; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- status, badges, notes ---------- */
.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status.online { background: rgb(126 154 114 / .12); color: #4f6a45; }
.status.online::before { background: var(--sage); }
.status.offline { background: var(--amber-bg); color: var(--amber-ink); }
.status.offline::before { background: var(--amber); }
.on-dark .status.online, body.dark .status.online { background: rgb(237 234 230 / .08); border: 1px solid var(--hair-dk); color: var(--dk-strong); }
.on-dark .status.online::before, body.dark .status.online::before { background: var(--sage-2); }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; background: var(--ink-3); }
.dot.online { background: var(--sage); }
.dot.offline { background: var(--amber); }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; line-height: 1.3; background: rgb(11 11 12 / .06); color: var(--ink-2); white-space: nowrap; }
body.dark .badge, .on-dark .badge { background: rgb(237 234 230 / .08); color: var(--dk-strong); }
.badge.warn { background: var(--amber-bg); color: var(--amber-ink); }
.badge.gold { background: rgb(212 179 112 / .16); color: var(--bronze); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.note { padding: 14px 18px; border-radius: 18px; font-size: 14px; line-height: 1.55; }
.note.amber { background: var(--amber-bg); color: var(--amber-ink); }
body.dark .note.amber { background: rgb(194 133 63 / .14); color: #e2b98a; }
.note.brick { border: 1px solid rgb(154 75 63 / .35); background: rgb(154 75 63 / .06); color: var(--ink-body); }
body.dark .note.brick { background: rgb(154 75 63 / .16); color: #e6c3bb; }
.note.gold { border: 1px solid rgb(212 179 112 / .45); background: rgb(212 179 112 / .1); color: var(--ink-body); }
body.dark .note.gold { color: var(--dk-strong); }
#banner { display: flex; align-items: center; gap: 18px; padding: 14px 22px; font-size: 15px; overflow-wrap: anywhere; }
#banner::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgb(212 179 112 / .18); flex: none; }
body.light #banner { color: var(--ink-body); border-radius: 22px; }
body.dark #banner { border-radius: 20px; padding: 12px 18px; color: var(--dk-strong); background: rgb(11 11 12 / .45); border: 1px solid var(--hair-dk); }
#banner:empty { display: none; }

/* ---------- header and layout ---------- */
.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px 40px; position: relative; }
.site-header .left { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; min-width: 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
body.light a.brand, body.light a.brand:hover { color: var(--obsidian); }
.brand img { width: 24px; height: 27px; display: block; }
.brand span { font-size: 22px; font-weight: 300; letter-spacing: -.01em; }
.brand.dark img { width: 26px; height: 30px; }
.brand.dark span { font-size: 24px; color: var(--stone); }
.brand.dark.small img { width: 22px; height: 25px; }
.brand.dark.small span { font-size: 20px; }
.nav { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 999px; }
.nav a { padding: 8px 18px; border-radius: 999px; text-decoration: none; font-size: 14px; }
body.light .nav a { color: var(--ink-2); }
body.light .nav a:hover { color: var(--obsidian); }
body.light .nav a[aria-current="page"] { background: var(--obsidian); color: var(--stone); font-weight: 500; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--obsidian); display: grid; place-items: center; text-decoration: none; font-size: 14px; font-weight: 500; flex: none; }
body.light a.avatar, body.light a.avatar:hover, .avatar { color: var(--gold); }
.page { position: relative; max-width: 1120px; margin: 0 auto; padding: 40px 32px 72px; display: flex; flex-direction: column; gap: 40px; }
.page.home { max-width: 1160px; padding-top: 24px; gap: 32px; }
.page.narrow { max-width: 760px; padding-top: 32px; gap: 24px; }
.page.dev { max-width: 820px; padding-top: 32px; gap: 24px; }
.intro { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 24px 28px 14px; }
.section-body { padding: 0 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.glass.pad { padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.glass.list { overflow: hidden; }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 28px; border-top: 1px solid var(--hair); flex-wrap: wrap; min-width: 0; }
.row > .grow { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .name { font-size: 16px; font-weight: 500; }
.row .detail { font-size: 13px; color: var(--ink-3); }
.wrap-any, .row .detail, .row .name, .email { overflow-wrap: anywhere; }
.initials { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 500; flex: none; background: #e8e2d8; color: var(--ink-body); }
.initials.owner { background: var(--obsidian); color: var(--gold); }
.initials.tile { border-radius: 12px; background: var(--charcoal); color: var(--gold); }
.stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stack.lg { gap: 22px; }
.cols { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.cols > .main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.cols > aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
dl.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; font-size: 14px; }
dl.facts dt { color: var(--ink-3); }
dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fp { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.hr { height: 1px; background: rgb(11 11 12 / .06); border: 0; margin: 0; }

/* ---------- scene layers ---------- */
.villa-canvas, .site-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.osm-attr { font-size: 11px; letter-spacing: .02em; color: var(--ink-3); }
.on-dark .osm-attr, body.dark .osm-attr { color: var(--dk-3); }
.scene { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.scene-band { position: absolute; left: 0; right: 0; top: 0; height: 560px; z-index: -2; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
.scrim-band { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(233 227 218 / .85) 0%, rgb(233 227 218 / .35) 45%, rgb(233 227 218 / 0) 75%); }
.scrim-signin { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(11 11 12 / .78) 0%, rgb(11 11 12 / .25) 38%, rgb(11 11 12 / 0) 60%), linear-gradient(0deg, rgb(11 11 12 / .55) 0%, rgb(11 11 12 / 0) 30%); }
.glow-signin { position: absolute; inset: auto -10% -30% 40%; height: 70%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgb(212 179 112 / .22), transparent); filter: blur(20px); }
.scrim-dim { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgb(11 11 12 / .42); }
.scrim-dim.deep { background: rgb(11 11 12 / .5); }
body.light .signin-scene, body.dark .scene-band, body.dark .scrim-band { display: none; }

/* ---------- dark centred screens (invite, link, consent, interstitials) ---------- */
.dark-screen { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 48px 24px; overflow: hidden; isolation: isolate; }
.dark-screen.invite { gap: 36px; background: radial-gradient(90% 70% at 50% 110%, #4a3a26 0%, #1f1a14 40%, var(--obsidian) 75%); }
.dark-screen > .card { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 28px; }
.dark-screen > .card.wide { max-width: 520px; }
.dark-screen > .card.mid { max-width: 500px; gap: 26px; }
.card-head { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---------- sign-in (Main) ---------- */
.signin { position: relative; min-height: 100vh; overflow: hidden; isolation: isolate; background: radial-gradient(120% 80% at 78% 100%, #4a3a26 0%, #1f1a14 38%, var(--obsidian) 72%); }
.signin-layer { position: relative; pointer-events: none; display: flex; flex-direction: column; min-height: 100vh; padding: 36px 48px; }
.signin-rule { display: flex; align-items: center; gap: 24px; }
.signin-rule .lbl, body.dark .signin-rule .lbl { color: var(--dk-label); }
.signin-rule .line { flex: 1; height: 1px; background: var(--hair-dk); }
.signin-body { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 56px; padding: 48px 0; }
.signin-hero { flex: 1 1 420px; display: flex; flex-direction: column; gap: 36px; min-width: 0; }
.app-icon { width: 128px; height: 128px; border-radius: 30px; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8); display: block; }
.signin-card { pointer-events: auto; flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 26px; padding: 36px; }
.signin-card form { display: flex; flex-direction: column; gap: 10px; }
.signin-card .lbl { color: var(--dk-3); }
.footnote { font-size: 13px; line-height: 1.55; color: var(--dk-3); }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .site-header { padding: 16px; gap: 14px 16px; }
  .site-header .left { display: contents; }
  .site-header .brand { flex: 1 1 auto; }
  .site-header .nav { order: 3; gap: 2px; }
  .nav a { padding: 8px 12px; }
  .page, .page.home, .page.narrow, .page.dev { padding: 24px 16px 56px; gap: 24px; }
  .glass-dark, .signin-card { padding: 24px; }
  .dark-screen { padding: 32px 16px; gap: 24px; }
  .signin-layer { padding: 24px 16px; }
  .signin-body { gap: 32px; padding: 32px 0; }
  .signin-hero { gap: 24px; flex-basis: 100%; }
  .app-icon { width: 88px; height: 88px; border-radius: 22px; }
  .section-head { padding: 20px 20px 12px; }
  .section-body { padding: 0 20px 20px; }
  .row { padding: 14px 20px; }
  .glass.pad, .ink-panel { padding: 22px 20px; }
  .btn { white-space: normal; }
}

/* ---------- script-built lists ---------- */
ul.rows { list-style: none; margin: 0; padding: 0; }
ul.rows > li { display: flex; align-items: center; gap: 8px 12px; padding: 16px 28px; border-top: 1px solid var(--hair); flex-wrap: wrap; min-width: 0; }
ul.rows > li .grow { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
ul.rows > li.muted { font-size: 14px; }
ul.rows .muted { font-size: 13px; color: var(--ink-3); }
.badge.ok { background: rgb(126 154 114 / .14); color: #4f6a45; }
.badge.pending { background: var(--amber-bg); color: var(--amber-ink); }
.badge.primary { background: none; padding: 0 4px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--bronze); }
.err { color: var(--brick); font-size: 13px; margin: 0; }
.err:empty { display: none; }
.prov { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid rgb(11 11 12 / .08); display: grid; place-items: center; flex: none; color: var(--ink-2); }
@media (max-width: 640px) { ul.rows > li { padding: 14px 20px; } }