/* =====================================================================
   FourFam — design system
   Colour tokens live in theme.php (:root, [data-theme]). This file must
   NEVER redeclare them, or dark mode breaks. Only shape/shadow here,
   plus aliases that map legacy names onto the live theme tokens.
   ===================================================================== */
:root{
  --r:14px; --r-lg:22px; --r-sm:10px;
  --shadow-sm:0 1px 2px color-mix(in srgb,var(--shadow-color) 30%,transparent),
              0 4px 14px color-mix(in srgb,var(--shadow-color) 25%,transparent);
  --shadow:0 14px 34px -20px var(--shadow-color);
  --shadow-lg:0 40px 80px -44px var(--shadow-color);
}
/* Legacy aliases -> theme tokens (kept so older rules stay correct) */
:root,[data-theme="light"],[data-theme="dark"]{
  --ink-60: var(--ink-70);
  --ink-45: var(--ink-50);
  --line: var(--hairline);
  --tint: var(--surface-2);
  --on-primary: var(--on-brand);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body,system-ui,sans-serif);color:var(--ink);
  background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-heading,sans-serif);line-height:1.08;margin:0 0 .4em;font-weight:700;letter-spacing:-.02em}
p{margin:0 0 1rem}
a{color:var(--color-primary);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.muted{color:var(--ink-60)}
.small{font-size:.82rem}
.nowrap{white-space:nowrap}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:var(--color-primary);margin:0 0 14px}
.eyebrow--light{color:var(--color-accent)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:1.5px solid transparent;
  border-radius:999px;padding:.72em 1.4em;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;
  transition:transform .08s ease,background .18s ease,box-shadow .18s ease,color .18s ease,border-color .18s;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--color-primary);color:var(--on-primary);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--color-primary) 80%,transparent)}
.btn--primary:hover{filter:brightness(1.05)}
.btn--dark{background:var(--color-secondary);color:#fff}
.btn--dark:hover{background:#000}
.btn--accent{background:var(--color-accent);color:var(--on-primary)}
.btn--accent:hover{filter:brightness(1.04)}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--color-text)}
.btn--ghost:hover{border-color:var(--color-text)}
.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}
.btn--block{width:100%}
.btn--lg{padding:.95em 1.9em;font-size:1.05rem}
.btn--sm{padding:.5em 1.05em;font-size:.86rem}
:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}

/* ---------- Forms / alerts ---------- */
.alert{border-radius:var(--r-sm);padding:.8em 1.1em;margin:0 0 16px;font-size:.95rem}
.alert--error{background:color-mix(in srgb,#c0392b 14%,var(--surface));color:#c0392b;border:1px solid color-mix(in srgb,#c0392b 34%,transparent)}
.alert--warn{background:color-mix(in srgb,var(--color-accent-2) 18%,var(--surface));color:color-mix(in srgb,var(--color-accent-2) 70%,var(--ink));border:1px solid color-mix(in srgb,var(--color-accent-2) 40%,transparent)}
.alert--warn ul{margin:8px 0 6px 18px;padding:0}
.alert--ok{background:color-mix(in srgb,var(--color-accent) 16%,var(--surface));color:color-mix(in srgb,var(--color-accent) 78%,var(--ink));border:1px solid color-mix(in srgb,var(--color-accent) 38%,transparent)}
.checkline{display:flex;align-items:center;gap:8px;margin-top:6px;font-weight:600}
.form{display:flex;flex-direction:column;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field__label{font-size:.8rem;font-weight:600;color:var(--ink-60)}
.field__input{border:1px solid var(--hairline);border-radius:var(--r-sm);padding:.72em .85em;font:inherit;
  background:var(--surface);color:var(--ink);width:100%}
.field__input::placeholder{color:var(--ink-50)}
.field__input option{background:var(--surface);color:var(--ink)}
[data-theme="dark"] .field__input{background:var(--surface-2)}
[data-theme="dark"] input[type=date].field__input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7}
[data-theme="dark"] input[type=file].field__input{color:var(--ink)}
[data-theme="dark"] input[type=file].field__input::file-selector-button{background:var(--surface);color:var(--ink);border:1px solid var(--hairline);border-radius:6px;padding:4px 10px;margin-right:10px}
.field__input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 20%,transparent)}

/* ---------- Auth ---------- */
.auth-page{display:grid;place-items:center;min-height:100vh;background:
  radial-gradient(1000px 460px at 50% -10%, color-mix(in srgb,var(--color-primary) 16%,transparent), transparent),var(--color-bg)}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:38px 34px;width:min(410px,92vw);box-shadow:var(--shadow-lg)}
.auth-card__brand{margin-bottom:16px;font-family:var(--font-heading);font-weight:700;font-size:1.3rem}
.auth-card__title{font-size:1.5rem;margin-bottom:18px}
.auth-card__back{display:inline-block;margin-top:16px;font-size:.9rem;color:var(--ink-60)}

/* =====================================================================
   PUBLIC SITE — warm hospitality, glass + line art, light & dark
   Brand hues come from Settings; surfaces flip via [data-theme].
   ===================================================================== */
.site{background:var(--bg);color:var(--ink);transition:background .4s ease,color .4s ease}
.site main{position:relative;z-index:1}

/* Ambient wash — four brand hues, kept soft so no single colour dominates */
.site::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 34% at 84% 2%,  color-mix(in srgb,var(--color-accent-2) 22%,transparent), transparent 64%),
    radial-gradient(34% 32% at 6% 30%,  color-mix(in srgb,var(--color-accent) 20%,transparent), transparent 66%),
    radial-gradient(42% 36% at 74% 88%, color-mix(in srgb,var(--color-primary) 15%,transparent), transparent 64%),
    radial-gradient(30% 28% at 22% 96%, color-mix(in srgb,var(--color-accent-3) 16%,transparent), transparent 66%);
  opacity:.85;transition:opacity .4s ease}
[data-theme="dark"] .site::before{opacity:.5}
.site::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(125% 92% at 50% 0%, #000 32%, transparent 76%);
          mask-image:radial-gradient(125% 92% at 50% 0%, #000 32%, transparent 76%)}

/* Glass primitive */
.glass{background:var(--glass-bg);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(20px) saturate(1.25);backdrop-filter:blur(20px) saturate(1.25);
  border-radius:var(--r-lg);
  box-shadow:0 26px 60px -38px var(--shadow-color), inset 0 1px 0 var(--glass-shine);
  transition:background .4s ease,border-color .4s ease}
.glass--soft{background:color-mix(in srgb,var(--glass-bg) 70%,transparent)}

/* Line-art helpers */
.lineart{width:100%;height:auto;display:block;overflow:visible}
.lineart [stroke]{vector-effect:non-scaling-stroke}
.la-draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
  transition:stroke-dashoffset 1.7s cubic-bezier(.25,.8,.3,1)}
[data-reveal].is-visible .la-draw{stroke-dashoffset:0}

/* Per-item hue rotation — the multicolour system */
.hue-1{--hue:var(--color-primary)}
.hue-2{--hue:var(--color-accent)}
.hue-3{--hue:var(--color-accent-2)}
.hue-4{--hue:var(--color-accent-3)}

/* Brand button (uses the terracotta sparingly) */
.btn--brand{background:var(--color-primary);color:var(--on-brand);border-color:transparent}
.btn--brand:hover{filter:brightness(1.06)}
.btn--outline{background:transparent;border-color:var(--hairline);color:var(--ink)}
.btn--outline:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}

/* ---------- Contact top bar ---------- */
.topbar{position:relative;z-index:51;background:var(--color-secondary);color:rgba(243,236,224,.82);font-size:.84rem}
.topbar__row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;flex-wrap:wrap}
.topbar__loc,.topbar__phone,.topbar__wa{display:inline-flex;align-items:center;gap:7px}
.topbar__loc svg,.topbar__phone svg{width:15px;height:15px;flex:none;color:var(--color-accent-2)}
.topbar__links{display:inline-flex;align-items:center;gap:20px}
.topbar__phone{color:#fff;font-weight:700;letter-spacing:.01em}
.topbar__phone:hover{color:var(--color-accent-2)}
.topbar__wa{color:var(--color-accent);font-weight:600}
.topbar__wa:hover{color:#fff}
.nav{top:0}
@media (max-width:620px){
  .topbar{font-size:.78rem}
  .topbar__row{justify-content:center;gap:10px;padding-top:6px;padding-bottom:6px}
  .topbar__links{gap:14px}
}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;padding:12px 0;transition:background .3s,box-shadow .3s}
.nav__row{display:flex;align-items:center;justify-content:space-between;height:58px;gap:20px}
.nav__brand{font-family:var(--font-heading);font-weight:700;font-size:1.45rem;letter-spacing:-.02em;color:var(--ink)}
.nav__brand em{font-style:normal;color:var(--color-primary)}
.brand-logo{max-height:42px;width:auto}
.nav__links{display:flex;align-items:center;gap:26px}
.nav__links a{color:var(--ink-70);font-weight:500;font-size:.95rem;transition:color .2s}
.nav__links a:hover{color:var(--ink)}
.nav__links .nav__cta{color:var(--on-brand)}
.nav.is-scrolled{background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 1px 0 var(--hairline)}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px}

/* Theme toggle */
.themetoggle{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid var(--hairline);color:var(--ink-70);padding:0;
  transition:color .2s,border-color .2s,background .2s}
.themetoggle:hover{color:var(--ink);border-color:var(--ink-50);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.themetoggle svg{width:19px;height:19px;grid-area:1/1}
.themetoggle__moon{display:none}
[data-theme="dark"] .themetoggle__sun{display:none}
[data-theme="dark"] .themetoggle__moon{display:block}

/* ---------- Hero ---------- */
.hero{position:relative;margin-top:-82px;padding:150px 0 92px;overflow:hidden}
.hero__frame{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.hero__inner{position:relative;z-index:1;max-width:900px}
.hero__badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-70);margin-bottom:26px}
.hero__badge i{width:7px;height:7px;border-radius:50%;background:var(--color-accent);display:block}
.hero__title{font-size:clamp(2.7rem,6.6vw,5.1rem);line-height:1.04;letter-spacing:-.03em;font-weight:600;color:var(--ink);margin-bottom:22px}
.hero__title em{font-style:italic;color:var(--color-primary);font-weight:500}
.hero__lead{font-size:1.2rem;color:var(--ink-70);max-width:53ch;margin:0 0 36px}

/* Glass search bar */
.searchbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px;max-width:770px;border-radius:18px}
.searchbar__field{flex:1 1 132px;display:flex;flex-direction:column;gap:3px;padding:10px 16px;border-radius:12px;transition:background .2s}
.searchbar__field:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.searchbar__field+.searchbar__field{box-shadow:inset 1px 0 0 var(--hairline)}
.searchbar__field span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-50)}
.searchbar__field input,.searchbar__field select{border:0;background:none;font:inherit;font-weight:600;color:var(--ink);padding:2px 0;outline:none}
.searchbar__field select option{background:var(--surface);color:var(--ink)}
[data-theme="dark"] .searchbar__field input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.6}
.searchbar__field input::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}
.searchbar__go{flex:1 1 auto;border-radius:12px}
.searchbar__note{font-size:.82rem;color:var(--ink-50);margin:14px 0 0}

/* ---------- Amenities strip ---------- */
.amenities{padding:6px 0 0}
.amenities__row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:24px 14px;border-radius:var(--r-lg)}
.amenity{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:8px 6px;position:relative}
.amenity+.amenity::before{content:"";position:absolute;left:0;top:18%;height:64%;width:1px;background:var(--hairline)}
.amenity svg{width:26px;height:26px;color:var(--hue,var(--color-primary))}
.amenity span{font-size:.8rem;font-weight:600;color:var(--ink-70);letter-spacing:.01em}

/* ---------- Sections ---------- */
.section{padding:92px 0;position:relative}
.section__head{max-width:660px;margin:0 0 50px}
.section__head--center{margin:0 auto 54px;text-align:center}
.section__title{font-size:clamp(2rem,4.1vw,3rem);letter-spacing:-.025em;color:var(--ink);margin-bottom:16px;font-weight:600}
.section__intro{font-size:1.06rem;color:var(--ink-70)}
.eyebrow{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:var(--color-primary);margin:0 0 14px}
.eyebrow--alt{color:var(--color-accent)}
.eyebrow--light{color:var(--color-accent)}

/* ---------- Stays ---------- */
.stay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.stay{overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.stay:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--hue) 45%,transparent)}
.stay__media{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(155deg, color-mix(in srgb,var(--hue) 16%,transparent), transparent 70%)}
.stay__art{position:absolute;inset:0;color:color-mix(in srgb,var(--hue) 78%,var(--ink));opacity:.75;transition:opacity .3s}
.stay:hover .stay__art{opacity:1}
.stay__art svg{width:100%;height:100%}
.stay__badge{position:absolute;top:14px;left:14px;z-index:1;background:var(--hue);color:var(--on-brand);
  font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:999px}
.stay__body{padding:22px 24px 24px}
.stay__name{font-size:1.3rem;margin-bottom:4px;color:var(--ink)}
.stay__loc{color:var(--ink-50);font-size:.9rem;margin:0 0 16px}
.stay__tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.stay__tag{font-size:.72rem;font-weight:600;color:var(--ink-70);padding:3px 10px;border-radius:999px;
  border:1px solid var(--hairline)}
.stay__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:16px;border-top:1px solid var(--hairline)}
.stay__price{font-family:var(--font-heading);font-size:1.3rem;font-weight:600;color:var(--ink)}
.stay__price small{font-size:.78rem;color:var(--ink-50);font-weight:400}
.stay__link{font-weight:700;color:var(--hue,var(--color-primary))}

/* ---------- Features ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:20px}
.feature{padding:30px 26px;transition:transform .3s,border-color .3s}
.feature:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--hue) 42%,transparent)}
.feature__icon{width:54px;height:54px;margin-bottom:20px;color:var(--hue,var(--color-primary))}
.feature__icon svg{width:100%;height:100%}
.feature h3{font-size:1.16rem;margin-bottom:8px;color:var(--ink)}
.feature p{color:var(--ink-70);margin:0;font-size:.95rem}

/* ---------- Hosts (four friends) ---------- */
.hosts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.host{padding:26px 22px;text-align:center;transition:transform .3s,border-color .3s}
.host:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--hue) 45%,transparent)}
.host__art{width:76px;height:76px;margin:0 auto 16px;color:var(--hue)}
.host__art svg{width:100%;height:100%}
.host h3{font-size:1.08rem;margin-bottom:2px;color:var(--ink)}
.host__role{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--hue);font-weight:700;margin-bottom:10px}
.host p{font-size:.9rem;color:var(--ink-70);margin:0}

/* ---------- Split / experience ---------- */
.split{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.split__media{position:relative;padding:32px;border-radius:var(--r-lg);color:var(--color-primary)}
.split__media svg{width:100%;height:auto}
.split__text p{color:var(--ink-70)}
.ticks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:0}
.ticks li{position:relative;padding:14px 0 14px 38px;color:var(--ink);font-weight:500;border-bottom:1px solid var(--hairline)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";position:absolute;left:2px;top:19px;width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--tick,var(--color-accent));
  background:linear-gradient(var(--tick,var(--color-accent)),var(--tick,var(--color-accent))) no-repeat center/7px 7px}
.ticks li:nth-child(1){--tick:var(--color-primary)}
.ticks li:nth-child(2){--tick:var(--color-accent)}
.ticks li:nth-child(3){--tick:var(--color-accent-2)}
.ticks li:nth-child(4){--tick:var(--color-accent-3)}

/* ---------- Steps ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{padding:30px 26px;position:relative}
.step__no{font-family:var(--font-heading);font-size:.9rem;font-weight:700;color:var(--hue,var(--color-primary));letter-spacing:.16em}
.step__rule{height:1px;margin:16px 0 18px;background:linear-gradient(90deg,var(--hue,var(--color-primary)),transparent)}
.step h3{font-size:1.26rem;margin:0 0 10px;color:var(--ink)}
.step p{color:var(--ink-70);margin:0;font-size:.95rem}

/* ---------- Neighbourhood ---------- */
.hood{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hood__item{padding:24px 24px;display:flex;gap:16px;align-items:flex-start}
.hood__icon{width:34px;height:34px;flex:none;color:var(--hue)}
.hood__icon svg{width:100%;height:100%}
.hood__item h3{font-size:1.02rem;margin:0 0 4px;color:var(--ink)}
.hood__item p{margin:0;font-size:.9rem;color:var(--ink-70)}
.hood__item span{display:block;font-size:.78rem;color:var(--hue);font-weight:700;margin-top:6px}

/* ---------- Quotes ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:20px}
.quote{padding:30px 28px;margin:0}
.quote__stars{color:var(--color-accent-2);letter-spacing:.18em;font-size:.85rem;margin-bottom:14px}
.quote blockquote{margin:0 0 18px;font-family:var(--font-heading);font-size:1.16rem;line-height:1.48;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.quote figcaption{font-size:.86rem;color:var(--ink-50);font-weight:600;padding-top:16px;border-top:1px solid var(--hairline)}

/* ---------- Stay details ---------- */
.details{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:8px;border-radius:var(--r-lg)}
.detail{padding:22px 24px;position:relative}
.detail+.detail::before{content:"";position:absolute;left:0;top:20%;height:60%;width:1px;background:var(--hairline)}
.detail dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-50);font-weight:700;margin-bottom:6px}
.detail dd{margin:0;font-family:var(--font-heading);font-size:1.15rem;font-weight:600;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{max-width:840px}
.accordion{display:flex;flex-direction:column;gap:12px}
.ac{padding:2px 24px;border-radius:var(--r)}
.ac summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;font-size:1.02rem;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:18px}
.ac summary::-webkit-details-marker{display:none}
.ac summary::after{content:"";width:13px;height:13px;flex:none;
  background:linear-gradient(var(--color-primary),var(--color-primary)) no-repeat center/100% 1.5px,
             linear-gradient(var(--color-primary),var(--color-primary)) no-repeat center/1.5px 100%;
  transition:transform .25s}
.ac[open] summary::after{transform:rotate(45deg)}
.ac p{color:var(--ink-70);margin:0 0 20px;padding-top:16px;border-top:1px solid var(--hairline)}

/* ---------- CTA ---------- */
.cta-band{padding:36px 0 96px}
.cta-band__inner{position:relative;overflow:hidden;text-align:center;padding:68px 40px;border-radius:28px}
.cta-band__art{position:absolute;inset:0;pointer-events:none;opacity:.4}
.cta-band__content{position:relative;z-index:1;max-width:640px;margin:0 auto}
.cta-band h2{font-size:clamp(2rem,4.2vw,3rem);color:var(--ink);margin-bottom:14px;letter-spacing:-.025em;font-weight:600}
.cta-band p{color:var(--ink-70);margin:0 0 30px;font-size:1.08rem}
.cta-band__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{position:relative;z-index:1;padding:60px 0 28px;border-top:1px solid var(--hairline);
  background:var(--glass-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink-70)}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:40px}
.footer__mark{font-family:var(--font-heading);font-weight:700;font-size:1.45rem;color:var(--ink);margin-bottom:14px}
.footer__tag{max-width:34ch;color:var(--ink-70)}
.footer__wa{display:inline-block;margin-top:8px;color:var(--color-accent);font-weight:700}
.footer__col h4{color:var(--ink);font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px;font-weight:700}
.footer__col a{display:block;color:var(--ink-70);padding:5px 0}
.footer__col a:hover{color:var(--ink)}
.footer__muted{color:var(--ink-50)}
.footer__base{display:flex;justify-content:space-between;align-items:center;margin-top:42px;padding-top:22px;
  border-top:1px solid var(--hairline);font-size:.84rem;color:var(--ink-50)}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ---------- Public responsive ---------- */
@media (max-width:980px){
  .hosts{grid-template-columns:repeat(2,1fr)}
  .hood{grid-template-columns:1fr}
  .amenities__row{grid-template-columns:repeat(3,1fr);gap:14px 0}
  .amenity:nth-child(4)::before{display:none}
  .details{grid-template-columns:repeat(2,1fr)}
  .detail:nth-child(3)::before{display:none}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:34px}
  .steps{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .hero{padding:126px 0 74px}
  .nav__toggle{display:flex}
  .nav__links{position:absolute;top:100%;left:12px;right:12px;flex-direction:column;align-items:flex-start;gap:2px;
    padding:18px 22px 22px;border-radius:18px;background:var(--surface);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--hairline);
    box-shadow:0 26px 60px -38px var(--shadow-color);
    clip-path:inset(0 0 100% 0);transition:clip-path .28s ease}
  .nav.is-open .nav__links{clip-path:inset(0 0 0 0)}
  .nav__links a{width:100%;padding:10px 0}
  .nav__links .nav__cta{width:auto;margin-top:12px;align-self:flex-start;
    background:var(--color-primary);color:var(--on-brand)!important;
    padding:.7em 1.5em;border-radius:999px}
  .nav__links .nav__cta:hover{filter:brightness(1.06);color:var(--on-brand)!important}
  .themetoggle{position:absolute;right:64px;top:22px}
  .searchbar__field+.searchbar__field{box-shadow:none;border-top:1px solid var(--hairline)}
  .amenities__row{grid-template-columns:repeat(2,1fr)}
  .amenity::before{display:none!important}
  .hosts{grid-template-columns:1fr}
  .details{grid-template-columns:1fr}
  .detail::before{display:none!important}
  .cta-band__inner{padding:46px 24px}
  .book-hero__inner{padding:32px 24px}
}

/* ---------- Property photo gallery ---------- */
.gallery{position:absolute;inset:0;overflow:hidden}
.gallery__track{display:flex;height:100%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.gallery__slide{flex:0 0 100%;height:100%}
.gallery__slide img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;font-size:1.2rem;line-height:1;
  background:var(--glass-bg);border:1px solid var(--glass-edge);color:var(--ink);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  opacity:0;transition:opacity .25s,background .2s}
.stay:hover .gallery__nav,.gallery:focus-within .gallery__nav{opacity:1}
.gallery__nav:hover{background:var(--surface)}
.gallery__nav--prev{left:10px}
.gallery__nav--next{right:10px}
.gallery__dots{position:absolute;bottom:10px;left:0;right:0;z-index:2;display:flex;justify-content:center;gap:6px}
.gallery__dot{width:7px;height:7px;padding:0;border-radius:50%;cursor:pointer;border:0;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15);transition:width .25s,background .25s}
.gallery__dot.is-active{width:20px;border-radius:999px;background:#fff}
.stay__desc{color:var(--ink-70);font-size:.92rem;margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:760px){.gallery__nav{opacity:1}}

/* ---------- Booking page ---------- */
.bookpage{padding:130px 0 90px;position:relative}
.bookhead{max-width:640px;margin:0 0 26px}
.bookhead__title{font-size:clamp(2rem,4.2vw,3rem);color:var(--ink);letter-spacing:-.025em;margin-bottom:12px;font-weight:600}
.bookhead__lead{font-size:1.08rem;color:var(--ink-70);margin:0}

.datebar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px;border-radius:18px;max-width:820px}
.datebar__step{width:30px;height:30px;flex:none;margin:0 6px 0 8px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-primary);color:#fff;font-weight:800;font-size:.85rem}
.datebar .searchbar__field{flex:1 1 130px}

.bookhint{margin:16px 0 0;color:var(--ink-50)}
.bookhint--warn{color:var(--color-primary);font-weight:600}

.bookstep{display:flex;align-items:center;gap:14px;margin:44px 0 20px}
.bookstep__no{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--color-primary);color:#fff;font-weight:800;font-size:.85rem}
.bookstep__title{font-size:1.35rem;margin:0;color:var(--ink);font-weight:600;letter-spacing:-.015em}

.bookempty{padding:34px 30px;text-align:center;border-radius:var(--r-lg)}
.bookempty p{margin:0 0 8px;color:var(--ink)}
.bookempty .btn{margin-top:14px}

.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.pick{overflow:hidden;transition:transform .25s,border-color .25s}
.pick:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--hue) 45%,transparent)}
.pick.is-chosen{border-color:var(--hue);box-shadow:0 0 0 2px color-mix(in srgb,var(--hue) 40%,transparent),
  0 22px 50px -36px var(--shadow-color)}
.pick__media{aspect-ratio:16/10;background:color-mix(in srgb,var(--hue) 14%,transparent)}
.pick__media img{width:100%;height:100%;object-fit:cover}
.pick__noimg{display:grid;place-items:center;height:100%;color:var(--ink-50);font-size:.88rem}
.pick__body{padding:18px 20px 20px}
.pick__body h3{font-size:1.14rem;margin:0 0 2px;color:var(--ink)}
.pick__loc{color:var(--ink-50);font-size:.86rem;margin:0 0 12px}
.pick__price{margin:0 0 14px;display:flex;flex-direction:column;gap:2px}
.pick__price strong{font-family:var(--font-heading);font-size:1.3rem;color:var(--ink);font-weight:600}
.pick__price span{font-size:.82rem;color:var(--ink-50)}

.bookform{padding:28px 28px 26px;border-radius:var(--r-lg);display:flex;flex-direction:column;gap:16px;max-width:900px}
.bookform__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.field__hint{font-size:.8rem;color:var(--ink-50);margin-top:4px;display:block}
.booksummary{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  padding:18px 20px;border-radius:var(--r);border:1px dashed var(--hairline);
  background:color-mix(in srgb,var(--color-primary) 5%,transparent)}
.booksummary__label{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-50);font-weight:700}
.booksummary strong{display:block;font-family:var(--font-heading);font-size:1.15rem;color:var(--ink);font-weight:600}
.booksummary__dates{font-size:.88rem;color:var(--ink-70)}
.booksummary__total{text-align:right}
.booksummary__total span{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-50);font-weight:700}
.booksummary__total strong{font-size:1.5rem}
.bookform__actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bookform__note{font-size:.86rem;color:var(--ink-50)}

/* Success */
.bookdone{max-width:660px;margin:0 auto;padding:44px 40px;border-radius:26px;text-align:center}
.bookdone__tick{width:74px;height:74px;margin:0 auto 20px;color:var(--color-accent)}
.bookdone__tick svg{width:100%;height:100%}
.bookdone h1{font-size:clamp(1.7rem,3.6vw,2.4rem);color:var(--ink);margin-bottom:10px;letter-spacing:-.02em;font-weight:600}
.bookdone__lead{color:var(--ink-70);margin:0 0 26px}
.bookdone__lead strong{color:var(--color-primary);font-weight:700;letter-spacing:.04em}
.bookdone__summary{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0 0 22px;
  border:1px solid var(--hairline);border-radius:var(--r);overflow:hidden;text-align:left}
.bookdone__summary>div{padding:14px 18px;border-bottom:1px solid var(--hairline)}
.bookdone__summary>div:nth-child(odd){border-right:1px solid var(--hairline)}
.bookdone__summary>div:nth-last-child(-n+2){border-bottom:0}
.bookdone__summary dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-50);font-weight:700;margin-bottom:3px}
.bookdone__summary dd{margin:0;color:var(--ink);font-weight:600}
.bookdone__next{font-size:.92rem;color:var(--ink-50);margin:0 0 24px}
.bookdone__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Document list in the dashboard */
.doclist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.doclist li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
  border:1px solid var(--hairline);border-radius:var(--r-sm);background:var(--surface);font-size:.9rem}

/* Booking status tags */
.tag--status-inquiry{background:color-mix(in srgb,var(--color-accent-2) 24%,transparent);color:var(--color-accent-2)}
[data-theme="light"] .tag--status-inquiry{color:#a8630a}
.tag--status-confirmed{background:color-mix(in srgb,var(--color-accent) 20%,transparent);color:var(--color-accent)}
.tag--status-checked_in{background:color-mix(in srgb,var(--color-accent-3) 22%,transparent);color:var(--color-accent-3)}
.tag--status-checked_out{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink-70)}
.tag--status-cancelled{background:color-mix(in srgb,#c0392b 15%,transparent);color:#c0392b}

@media (max-width:760px){
  .bookpage{padding:110px 0 70px}
  .bookform__grid{grid-template-columns:1fr}
  .bookdone__summary{grid-template-columns:1fr}
  .bookdone__summary>div:nth-child(odd){border-right:0}
  .bookdone__summary>div{border-bottom:1px solid var(--hairline)}
  .bookdone__summary>div:last-child{border-bottom:0}
  .bookdone{padding:34px 24px}
  .booksummary__total{text-align:left}
}

/* =====================================================================
   DASHBOARD — same glass language as the website
   ===================================================================== */
body.app{background:var(--bg);color:var(--ink);position:relative;min-height:100vh}
body.app::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(34% 30% at 88% 0%,  color-mix(in srgb,var(--color-accent-2) 16%,transparent), transparent 64%),
    radial-gradient(30% 30% at 4% 26%,  color-mix(in srgb,var(--color-accent) 15%,transparent), transparent 66%),
    radial-gradient(36% 32% at 72% 92%, color-mix(in srgb,var(--color-primary) 12%,transparent), transparent 64%),
    radial-gradient(26% 26% at 26% 96%, color-mix(in srgb,var(--color-accent-3) 12%,transparent), transparent 66%)}
[data-theme="dark"] body.app::before{opacity:.55}

.layout{display:grid;grid-template-columns:252px 1fr;min-height:100vh;position:relative;z-index:1}
.sidebar{background:var(--color-secondary);color:#f3ece0;display:flex;flex-direction:column;padding:20px 14px;
  position:sticky;top:0;height:100vh}
.sidebar__brand{padding:6px 10px 22px;display:block}
.sidebar__brand .brand-logo{max-height:44px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.sidebar__brand .brand-word{font-family:var(--font-heading);font-weight:700;font-size:1.35rem;color:#fff;letter-spacing:-.02em}
.sidebar__nav{display:flex;flex-direction:column;gap:2px;flex:1}
.navlink{color:rgba(243,236,224,.66);padding:.66em .9em;border-radius:10px;font-weight:500;font-size:.95rem;
  transition:background .15s,color .15s}
.navlink:hover{background:rgba(255,255,255,.08);text-decoration:none;color:#fff}
.navlink.is-active{background:var(--color-primary);color:#fff;font-weight:600}
.sidebar__foot{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:12px;display:flex;flex-direction:column;gap:12px}
.who{display:flex;flex-direction:column;line-height:1.3}
.who__name{font-weight:700;color:#fff}
.who__role{font-size:.78rem;color:rgba(243,236,224,.5)}
.sidebar__row{display:flex;align-items:center;gap:10px}
.sidebar__row .btn{flex:1}
.sidebar__foot .themetoggle{border-color:rgba(255,255,255,.28);color:#f3ece0;flex:none}
.sidebar__foot .themetoggle:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.sidebar__foot .btn--outline{border-color:rgba(255,255,255,.28);color:#f3ece0}
.sidebar__foot .btn--outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.sidebar__foot .btn--ghost{border-color:rgba(255,255,255,.28);color:#f3ece0}
.sidebar__foot .btn--ghost:hover{background:rgba(255,255,255,.1)}
.main{overflow:auto}
.main__inner{padding:36px clamp(20px,4vw,46px);max-width:1280px}
.main__inner > .card,
.main__inner > section.card,
.main__inner > form.card,
.main__inner > .kpi-grid,
.main__inner > .chart-row,
.main__inner > .prop-grid,
.main__inner > .alert,
.main__inner > .bform{margin-bottom:18px}
.main__inner > *:last-child{margin-bottom:0}

.page-head{margin-bottom:24px}
.page-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-head__title{font-size:2rem;margin:0;letter-spacing:-.025em;font-weight:600;color:var(--ink)}
.page-head__actions{display:flex;align-items:center;gap:14px}
.page-head__meta{color:var(--ink-70);font-weight:600}

/* Cards are glass everywhere */
.card{background:var(--glass-bg);border:1px solid var(--glass-edge);border-radius:var(--r);padding:22px;
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 22px 50px -36px var(--shadow-color), inset 0 1px 0 var(--glass-shine)}
.card--empty{display:grid;place-items:center;min-height:220px}
.card__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px;gap:10px}
.card__title{font-size:1.12rem;margin:0;color:var(--ink)}
.card__hint{font-size:.72rem;color:var(--ink-50);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.chart-box{position:relative;height:300px}
.chart-box--sm{height:260px}
.empty-note{color:var(--ink-70);text-align:center;padding:20px 0}

/* KPI */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}
.kpi{grid-column:span 2;background:var(--glass-bg);border:1px solid var(--glass-edge);border-radius:var(--r);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  box-shadow:0 22px 50px -36px var(--shadow-color), inset 0 1px 0 var(--glass-shine);
  padding:18px 20px;display:flex;flex-direction:column;gap:7px;min-height:116px;
  border-top:3px solid var(--hue,var(--color-primary))}
.kpi:nth-child(1){--hue:var(--color-primary)}
.kpi:nth-child(2){--hue:var(--color-accent)}
.kpi:nth-child(3){--hue:var(--color-accent-2)}
.kpi:nth-child(4){--hue:var(--color-accent-3)}
.kpi:nth-child(5){--hue:var(--color-primary)}
.kpi:nth-child(6){--hue:var(--color-accent)}
.kpi__label{font-size:.76rem;color:var(--ink-50);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.kpi__value{font-family:var(--font-heading);font-size:1.95rem;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em}
.kpi__value--warn{color:var(--color-primary)}
.kpi__sub{font-size:.8rem;color:var(--ink-50)}
.kpi--feature .kpi__value{font-size:2.3rem}
.kpi__spark-wrap{position:relative;height:44px;margin-top:auto}
.kpi__spark-wrap canvas{position:absolute;inset:0}
.delta{font-size:.78rem;font-weight:700;width:max-content;padding:2px 9px;border-radius:999px}
.delta--up{color:#1a7a4c;background:color-mix(in srgb,#1a7a4c 14%,transparent)}
.delta--down{color:#c0392b;background:color-mix(in srgb,#c0392b 14%,transparent)}

.chart-row{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-bottom:18px}

/* Occupancy bars */
.bars{display:flex;flex-direction:column;gap:16px}
.bar__top{display:flex;justify-content:space-between;font-size:.92rem;margin-bottom:6px;color:var(--ink)}
.bar__top strong{color:var(--color-primary)}
.bar__track{height:9px;border-radius:999px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.bar__fill{height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent-2),var(--color-accent))}

/* Mini list */
.mini-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.mini-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.mini-list li:last-child{border-bottom:0}
.mini-list__main{font-weight:600;color:var(--ink)}
.mini-list__meta{font-size:.85rem;color:var(--ink-70);display:flex;align-items:center;gap:8px}

/* Table */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.92rem;color:var(--ink)}
.table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-50);
  font-weight:700;padding:0 14px 12px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.table td{padding:13px 14px;border-bottom:1px solid var(--hairline);vertical-align:middle}
.table tbody tr:hover{background:color-mix(in srgb,var(--color-primary) 5%,transparent)}
.table tr.is-cancelled{opacity:.5;text-decoration:line-through}
.table tr.is-cancelled .pill,.table tr.is-cancelled .tag{text-decoration:none}
.rowlink{font-weight:700;color:var(--ink);display:block}
.rowlink:hover{color:var(--color-primary)}
td .small{display:block}

/* Pills + tags */
.pill{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap;display:inline-block;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}
.pill--airbnb{background:color-mix(in srgb,#e0566f 18%,transparent);color:#c0395a}
.pill--booking_com{background:color-mix(in srgb,#3f6fd8 16%,transparent);color:#2c5aa0}
.pill--other_ota{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink-70)}
.pill--direct{background:color-mix(in srgb,var(--color-primary) 18%,transparent);color:var(--color-primary)}
.pill--caretaker{background:color-mix(in srgb,var(--color-accent-3) 20%,transparent);color:var(--color-accent-3)}
.pill--referral{background:color-mix(in srgb,var(--color-accent) 22%,transparent);color:var(--color-accent)}
.tag{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:6px;display:inline-block}
.tag--paid{background:color-mix(in srgb,#2fa96b 20%,transparent);color:#2fa96b}
[data-theme="light"] .tag--paid{background:color-mix(in srgb,#1a7a4c 14%,transparent);color:#1a7a4c}
.tag--pending{background:color-mix(in srgb,var(--color-accent-2) 22%,transparent);color:var(--color-accent-2)}
[data-theme="light"] .tag--pending{color:#a8630a}
.tag--offline{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink-70)}
.tag--refunded{background:color-mix(in srgb,#c0392b 15%,transparent);color:#b23b3b}

/* Filters */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.filters .field__input{width:auto;min-width:150px;flex:0 1 auto}
.filters input[type=text]{flex:1 1 200px}

/* Forms */
.bform{display:flex;flex-direction:column;gap:16px}
.bform__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.fieldset{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--hairline);
  border-radius:var(--r);background:color-mix(in srgb,var(--surface) 55%,transparent)}
.fieldset__title{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--color-primary);
  margin:0 0 4px;font-family:var(--font-body);font-weight:700}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.net-preview{margin-top:2px;font-size:.95rem;color:var(--ink-70);background:var(--surface);
  border:1px dashed var(--hairline);border-radius:var(--r-sm);padding:10px 14px}
.net-preview strong{font-family:var(--font-heading);font-size:1.2rem;color:var(--ink);margin-left:6px}
.bform__actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
/* A button straight after a table or list needs breathing room */
.table-wrap + .bform__actions,
.table-wrap + .expform,
.card > form > .table-wrap + .bform__actions{margin-top:20px}
.card > form:last-child > .bform__actions:last-child{margin-bottom:2px}
.field__input.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
.hidden-form{display:none}

/* Row actions */
.row-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.inline{display:inline}
.iconbtn{border:1px solid var(--hairline);background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:8px;
  padding:5px 10px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;color:var(--ink);
  text-decoration:none;transition:border-color .15s,color .15s,background .15s;white-space:nowrap}
.iconbtn:hover{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.iconbtn:hover{border-color:var(--ink);text-decoration:none}
.iconbtn--ok:hover{border-color:#1a7a4c;color:#1a7a4c}
.iconbtn--danger:hover{border-color:#c0392b;color:#c0392b}

/* Properties grid */
.prop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.prop-card{padding:0;overflow:hidden;border-top:3px solid var(--hue,var(--color-primary))}
.prop-card__media{position:relative;aspect-ratio:16/10;background:color-mix(in srgb,var(--hue) 12%,transparent)}
.prop-card__media img{width:100%;height:100%;object-fit:cover}
.prop-card__placeholder{display:grid;place-items:center;height:100%;color:var(--ink-50);font-size:.9rem}
.prop-card__count{position:absolute;bottom:10px;left:10px;font-size:.72rem;font-weight:700;padding:3px 9px;
  border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-edge);color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.prop-card__status{position:absolute;top:10px;right:10px}
.prop-card__body{padding:18px 20px 20px}
.prop-card__body h3{font-size:1.15rem;margin:0 0 2px;color:var(--ink)}
.prop-card__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 16px;font-size:.85rem;color:var(--ink-70)}
.prop-card__actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--hairline)}

/* Photo manager */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.photo{position:relative;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--hairline);aspect-ratio:4/3}
.photo.is-cover{border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 30%,transparent)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo__badge{position:absolute;top:8px;left:8px;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px;
  background:var(--color-primary);color:#fff}
.photo__tools{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;padding:8px;justify-content:center;
  background:linear-gradient(transparent,rgba(0,0,0,.55));opacity:0;transition:opacity .2s}
.photo:hover .photo__tools{opacity:1}
.photo__tools .iconbtn{padding:3px 8px;font-size:.74rem}

/* Brand settings */
.brand-uploads{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brand-upload{display:flex;flex-direction:column;gap:8px}
.brand-upload__preview{padding:14px;border:1px solid var(--hairline);border-radius:var(--r-sm);
  background:var(--surface);display:grid;place-items:center;min-height:92px}
.brand-upload__preview img{max-height:64px;width:auto}
.brand-upload__preview--sm img{max-height:32px}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.swatch{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--hairline);
  border-radius:var(--r-sm);background:var(--surface)}
.swatch__picker{width:46px;height:46px;flex:none;padding:0;border:1px solid var(--hairline);border-radius:10px;
  background:none;cursor:pointer}
.swatch__meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.swatch__label{font-weight:700;font-size:.88rem;color:var(--ink)}
.swatch__hex{border:0;background:none;font:inherit;font-size:.8rem;color:var(--ink-70);padding:0;width:9ch}
.swatch__hint{font-size:.76rem;color:var(--ink-50);line-height:1.35}

/* ---------- Dashboard responsive ---------- */
@media (max-width:1000px){
  .chart-row{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi,.kpi--feature{grid-column:span 1}
  .kpi--feature{grid-column:span 2}
  .bform__grid{grid-template-columns:1fr}
  .brand-uploads{grid-template-columns:1fr}
}
@media (max-width:760px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;padding:12px}
  .sidebar__brand{padding:0 6px}
  .sidebar__nav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;order:3}
  .sidebar__foot{border-top:0;margin:0;padding:0;flex-direction:row;align-items:center;gap:12px;margin-left:auto}
  .kpi-grid{grid-template-columns:1fr}
  .kpi,.kpi--feature{grid-column:span 1}
  .field-row{grid-template-columns:1fr}
  .row-actions{flex-wrap:wrap;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}[data-reveal]{opacity:1;transform:none}}

/* =====================================================================
   CALENDAR
   ===================================================================== */
.cal-nav{display:inline-flex;align-items:center;gap:8px}
.cal-nav__label{min-width:150px;text-align:center;font-family:var(--font-heading);font-size:1.05rem;color:var(--ink)}
.cal-stat{margin-left:auto;color:var(--ink-70);font-size:.9rem}
.cal-stat strong{color:var(--color-primary)}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal__head{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-50);
  font-weight:700;text-align:center;padding:0 0 8px}
.cal__cell{position:relative;min-height:86px;border-radius:10px;padding:8px 9px;
  border:1px solid var(--hairline);background:var(--surface);overflow:hidden;
  transition:border-color .15s,background .15s}
.cal__cell--empty{border:0;background:none;min-height:0}
.cal__date{font-size:.82rem;font-weight:700;color:var(--ink-70);position:relative;z-index:2}
.cal__cell.is-past{opacity:.5}
.cal__cell.is-today{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary) inset}
.cal__cell.is-free{background:var(--surface)}
.cal__cell.is-booked{border-color:transparent}
.cal__cell.is-booked .cal__date{color:var(--ink)}
.cal__cell.src-airbnb{background:color-mix(in srgb,#e0566f 22%,var(--surface))}
.cal__cell.src-booking_com{background:color-mix(in srgb,#3f6fd8 20%,var(--surface))}
.cal__cell.src-other_ota{background:color-mix(in srgb,var(--ink) 12%,var(--surface))}
.cal__cell.src-direct{background:color-mix(in srgb,var(--color-primary) 24%,var(--surface))}
.cal__cell.src-caretaker{background:color-mix(in srgb,var(--color-accent-3) 26%,var(--surface))}
.cal__cell.src-referral{background:color-mix(in srgb,var(--color-accent) 26%,var(--surface))}
.cal__cell.is-blocked{background:repeating-linear-gradient(45deg,
  color-mix(in srgb,var(--ink) 9%,var(--surface)) 0 7px, var(--surface) 7px 14px)}
.cal__event{position:absolute;inset:0;z-index:1;display:block;text-decoration:none}
.cal__guest{position:absolute;left:9px;right:9px;top:28px;font-size:.78rem;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal__pip{position:absolute;bottom:8px;width:8px;height:8px;border-radius:50%;z-index:2}
.cal__pip--in{left:9px;background:var(--color-accent)}
.cal__pip--out{right:9px;background:var(--color-primary)}
.cal__blockedlabel{position:absolute;left:9px;top:28px;font-size:.74rem;font-weight:600;color:var(--ink-50)}
.cal__unblock{position:absolute;right:5px;bottom:5px;z-index:2}
.cal__unblock button{border:0;background:none;cursor:pointer;color:var(--ink-50);font-size:1.05rem;line-height:1;padding:2px 5px;border-radius:6px}
.cal__unblock button:hover{color:#c0392b;background:color-mix(in srgb,#c0392b 12%,transparent)}
.cal__legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--hairline);font-size:.82rem;color:var(--ink-70)}
.cal__legend span{display:inline-flex;align-items:center;gap:7px}
.sw{width:13px;height:13px;border-radius:4px;display:inline-block;border:1px solid var(--hairline)}
.sw--free{background:var(--surface)}
.sw--airbnb{background:color-mix(in srgb,#e0566f 40%,var(--surface))}
.sw--booking_com{background:color-mix(in srgb,#3f6fd8 38%,var(--surface))}
.sw--direct{background:color-mix(in srgb,var(--color-primary) 45%,var(--surface))}
.sw--other{background:color-mix(in srgb,var(--ink) 20%,var(--surface))}
.sw--blocked{background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ink) 20%,var(--surface)) 0 4px,var(--surface) 4px 8px)}
.blockform{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.blockform .field{flex:0 1 190px}

/* =====================================================================
   AUTOMATIONS
   ===================================================================== */
.auto-block{margin-bottom:18px}
.auto-block>.muted{max-width:70ch}
.setup{list-style:none;counter-reset:st;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:22px}
.setup>li{counter-increment:st;position:relative;padding-left:46px}
.setup>li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:var(--color-primary);color:#fff;font-weight:800;font-size:.85rem}
.setup h3{font-size:1.02rem;margin:4px 0 6px;color:var(--ink)}
.setup p{margin:0 0 10px;color:var(--ink-70);font-size:.94rem;max-width:66ch}
.setup--tight{gap:16px}
.secretbox{display:flex;gap:8px;align-items:center;max-width:620px}
.secretbox .field__input{font-family:ui-monospace,Menlo,monospace;font-size:.82rem}
.codewrap{position:relative;max-width:100%}
.codecopy{position:absolute;top:10px;right:10px;z-index:2}
.codeblock{margin:0;padding:18px 18px;border-radius:var(--r);overflow:auto;max-height:400px;
  background:var(--color-secondary);color:#e8e2d6;font-family:ui-monospace,Menlo,monospace;
  font-size:.78rem;line-height:1.55;white-space:pre;border:1px solid var(--hairline)}
.auto-note{margin-top:22px;padding:14px 16px;border-radius:var(--r-sm);font-size:.9rem;color:var(--ink-70);
  background:color-mix(in srgb,var(--color-accent-2) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--color-accent-2) 30%,transparent)}
.auto-note strong{color:var(--ink)}
.inlinecode{font-family:ui-monospace,Menlo,monospace;font-size:.84rem;padding:2px 6px;border-radius:5px;
  background:color-mix(in srgb,var(--ink) 8%,transparent);word-break:break-all}
.linklist{list-style:none;padding:0;margin:6px 0 12px;display:flex;flex-direction:column;gap:10px}
.linklist li{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.linklist__name{font-weight:700;min-width:190px;color:var(--ink)}
.linklist .field__input{flex:1 1 320px;font-family:ui-monospace,Menlo,monospace;font-size:.78rem}
.mb{margin-bottom:14px}

@media (max-width:820px){
  .cal{gap:4px}
  .cal__cell{min-height:64px;padding:5px 6px;border-radius:8px}
  .cal__guest{display:none}
  .cal-stat{margin-left:0;width:100%}
  .setup>li{padding-left:38px}
  .linklist__name{min-width:0;flex:1 1 100%}
}

/* ---------- Finance forms ---------- */
.expform{display:flex;flex-wrap:wrap;gap:14px;align-items:end}
.expform .field{flex:0 1 165px;gap:6px}
.expform .field--grow{flex:1 1 240px}
.expform .btn{flex:0 0 auto}
/* Every control the same height so labels and buttons line up on one baseline */
.expform .field__input,
.filters .field__input,
.expform .btn,
.filters .btn{height:46px}
.expform textarea.field__input,
.filters textarea.field__input{height:auto}
.expform .field__label,
.filters .field__label{min-height:1.1em;line-height:1.1}
.filters{align-items:end}
.filters .field{gap:6px}
.filters .checkline{height:46px;align-items:center;margin:0}
/* Selects carry their own arrow, keep the text clear of it */
select.field__input{padding-right:2.2em}
.table tfoot td{padding:14px;border-top:2px solid var(--hairline);font-size:.95rem}

/* ---------- Guest messages ---------- */
.msglist{display:flex;flex-direction:column;gap:14px}
.msg{border:1px solid var(--hairline);border-radius:var(--r);padding:16px 18px;background:var(--surface)}
.msg__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.msg__head strong{display:block;color:var(--ink)}
.msg__actions{display:flex;gap:8px;align-items:center}
.msg__text{margin:0;padding:12px 14px;border-radius:var(--r-sm);font-size:.92rem;color:var(--ink-70);
  background:color-mix(in srgb,var(--color-accent) 10%,transparent);border:1px solid var(--hairline)}
.tplform{display:flex;gap:12px;align-items:flex-end;margin-bottom:14px}
.tplform .field{flex:1}

/* ---------- Inline fee entry ---------- */
.feeform{display:flex;gap:8px;align-items:center}
.feeform .field__input{width:120px;height:38px}
.feein{width:130px;height:38px}

/* ---------------------------------------------------------------
   Dashboard density. Everything here is about 20% smaller than the
   public site, because this is a working tool rather than a shop
   window and more should fit on one screen.
   --------------------------------------------------------------- */
body.app{font-size:14px}
body.app .page-head__title{font-size:1.6rem}
body.app .card__title{font-size:1rem}
body.app .kpi{min-height:96px;padding:15px 16px;gap:5px}
body.app .kpi__label{font-size:.68rem}
body.app .kpi__value{font-size:1.55rem}
body.app .kpi--feature .kpi__value{font-size:1.85rem}
body.app .kpi__sub{font-size:.72rem}
body.app .kpi__spark-wrap{height:36px}
body.app .delta{font-size:.7rem;padding:1px 7px}
body.app .table{font-size:.84rem}
body.app .table th{font-size:.64rem;padding:0 11px 10px}
body.app .table td{padding:10px 11px}
body.app .pill,body.app .tag{font-size:.66rem;padding:2px 8px}
body.app .field__label{font-size:.72rem}
body.app .field__input{padding:.6em .7em;font-size:.88rem}
body.app .expform .field__input,
body.app .filters .field__input,
body.app .expform .btn,
body.app .filters .btn,
body.app .filters .checkline{height:38px}
body.app .btn{padding:.6em 1.15em;font-size:.88rem}
body.app .btn--sm{padding:.42em .9em;font-size:.78rem}
body.app .iconbtn{font-size:.74rem;padding:4px 9px}
body.app .fieldset{padding:16px}
body.app .fieldset__title{font-size:.68rem}
body.app .card{padding:18px}
body.app .card__hint{font-size:.66rem}
body.app .eyebrow{font-size:.64rem;margin-bottom:8px}
body.app .main__inner{padding:28px clamp(16px,3vw,36px)}
body.app .sidebar__brand{font-size:1.15rem;padding:4px 8px 18px}
body.app .navlink{font-size:.86rem;padding:.55em .8em}
body.app .who__name{font-size:.88rem}
body.app .who__role{font-size:.7rem}
body.app .empty-note{font-size:.88rem}
body.app .muted.small,body.app .small{font-size:.75rem}
body.app .chart-box{height:250px}
body.app .chart-box--sm{height:215px}
body.app .msg__text{font-size:.85rem}
body.app .cal__cell{min-height:74px}
body.app .cal__date{font-size:.76rem}
body.app .cal__guest{font-size:.72rem;top:24px}
body.app .codeblock{font-size:.72rem}
body.app .setup h3{font-size:.94rem}
body.app .setup p{font-size:.86rem}
@media (max-width:760px){
  body.app{font-size:14px}
  body.app .kpi__value{font-size:1.45rem}
}