:root {
  --ink: #16312c;
  --muted: #687a74;
  --green: #176b5c;
  --green-dark: #115448;
  --line: #dce8e2;
  --paper: #f6fbf8;
  --white: #fff;
  --shadow: 0 18px 55px rgba(41, 74, 63, .08);
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--paper); }
body { min-height: 100vh; margin: 0; background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { border: 0; color: inherit; background: none; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(45, 151, 128, .25); outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .58; }
h1, h2, h3, p { margin: 0; }
.page-glow { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 78% 3%, rgba(84, 189, 211, .19), transparent 28rem), radial-gradient(circle at 6% 34%, rgba(248, 188, 76, .13), transparent 24rem); }

.topbar { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid rgba(255,255,255,.72); background: rgba(246,251,248,.88); backdrop-filter: blur(18px); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; width: min(1440px, 100%); height: 72px; margin: auto; padding: 0 40px; }
.brand { display: flex; align-items: center; gap: 11px; text-align: left; }
.brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 15px 15px 12px 12px; color: white; background: linear-gradient(145deg, #16806e, #11594d); box-shadow: 0 6px 16px rgba(23,107,92,.22); font-size: 26px; font-weight: 800; line-height: 1; }
.brand strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.main-nav { display: flex; gap: 4px; padding: 4px; border: 1px solid white; border-radius: 999px; background: rgba(255,255,255,.74); box-shadow: 0 3px 12px rgba(37, 72, 61, .06); }
.nav-button { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; color: #687772; font-size: 13px; font-weight: 750; transition: .18s ease; }
.nav-button:hover { color: var(--green); background: #edf7f3; }
.nav-button.active { color: white; background: var(--green); box-shadow: 0 5px 15px rgba(23,107,92,.2); }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.67); font-size: 18px; }
.icon-button:hover { background: white; }
.avatar { width: 38px; height: 38px; border: 3px solid white; border-radius: 50%; color: #60480c; background: #ffd966; box-shadow: 0 2px 10px rgba(32,70,59,.12); font-size: 10px; font-weight: 900; }
.mobile-nav { display: none; }

.shell { position: relative; width: min(1440px, 100%); margin: auto; padding: 34px 40px 100px; }
.intro { position: relative; display: flex; min-height: 255px; align-items: flex-end; justify-content: space-between; gap: 30px; overflow: hidden; margin-bottom: 22px; padding: 34px 36px; border-radius: 28px; color: white; background: linear-gradient(90deg,rgba(8,43,52,.82) 0%,rgba(8,43,52,.55) 47%,rgba(8,43,52,.08) 78%), url('/villa-saimaa.jpg') center 48%/cover no-repeat; box-shadow: 0 18px 45px rgba(24,64,74,.18); }
.kicker { margin-bottom: 8px; color: #277b6a; font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.intro .kicker { color: #c9f3e8; text-shadow: 0 1px 9px rgba(0,0,0,.25); }
.intro h1 { font-size: clamp(30px, 4vw, 43px); letter-spacing: -.045em; line-height: 1.08; text-shadow: 0 2px 18px rgba(0,0,0,.28); }
.intro p:last-child { max-width: 680px; margin-top: 10px; color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.6; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.intro .primary-button { color: var(--green-dark); background: rgba(255,255,255,.94); box-shadow: 0 9px 25px rgba(3,27,33,.24); }.intro .primary-button:hover { color: white; background: var(--green); }
.primary-button, .secondary-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 800; transition: .18s ease; }
.primary-button { color: white; background: var(--green); box-shadow: 0 9px 25px rgba(23,107,92,.23); }
.primary-button:hover { background: var(--green-dark); transform: translateY(-1px); }
.primary-button span { font-size: 20px; line-height: 1; }
.secondary-button { border: 1px solid var(--line); color: #566660; background: white; }
.rule-banner { position: relative; display: flex; align-items: center; gap: 14px; overflow: hidden; margin-bottom: 25px; padding: 15px 18px; border: 1px solid rgba(217,185,86,.38); border-radius: 20px; background: linear-gradient(100deg,#fff8db,#eff8dc); box-shadow: 0 8px 26px rgba(68,84,55,.06); }
.rule-banner::after { position: absolute; top: -80px; right: 7%; width: 140px; height: 140px; border: 26px solid rgba(255,255,255,.34); border-radius: 50%; content: ""; }
.rule-icon { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border-radius: 15px; color: #8d6c17; background: white; box-shadow: 0 4px 12px rgba(92,76,27,.1); font-size: 22px; }
.rule-banner h2 { font-size: 15px; }
.rule-banner p { margin-top: 4px; color: #58615d; font-size: 12px; line-height: 1.45; }
.days-chip { z-index: 1; flex: none; margin-left: auto; padding: 7px 11px; border-radius: 999px; color: var(--green); background: rgba(255,255,255,.76); font-size: 10px; font-weight: 850; }
.notice { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid #f0c5ca; border-radius: 15px; color: #8b2d38; background: #fff1f2; font-size: 13px; }
.notice span { flex: 1; }
.notice button { padding: 7px 10px; border-radius: 10px; color: white; background: #b7404e; font-size: 11px; font-weight: 800; }

.surface { min-height: 420px; padding: 25px; border: 1px solid rgba(218,232,225,.95); border-radius: 26px; background: rgba(255,255,255,.79); box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.loading-state { display: grid; min-height: 360px; place-items: center; align-content: center; color: var(--muted); }
.loading-state strong { margin-top: 12px; color: var(--ink); font-size: 15px; }
.loading-state small { margin-top: 5px; }
.spinner { width: 30px; height: 30px; border: 3px solid #d8e9e3; border-top-color: var(--green); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-heading p { margin-bottom: 3px; color: #2d8271; font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.panel-heading h2 { font-size: 22px; letter-spacing: -.03em; }
.filters { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #eff4f1; }
.filters button { min-width: 58px; padding: 7px 11px; border-radius: 999px; color: #76827e; font-size: 11px; font-weight: 800; }
.filters button.active { color: #174b42; background: white; box-shadow: 0 2px 8px rgba(46,75,66,.1); }
.soft-chip { padding: 7px 11px; border-radius: 999px; color: #3c6e63; background: #e7f3ee; font-size: 11px; font-weight: 800; }

.booking-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.booking-card { overflow: hidden; border: 1px solid #e3ece7; border-radius: 20px; background: white; box-shadow: 0 5px 16px rgba(38,65,56,.035); transition: .18s ease; }
.booking-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(38,65,56,.08); }
.booking-card.veto { border-color: #f4b5bd; box-shadow: inset 4px 0 #e34f61, 0 5px 16px rgba(38,65,56,.035); }
.booking-card.released { opacity: .83; background: #fffaf4; }
.booking-date { display: flex; align-items: center; gap: 6px; padding: 11px 15px; border-bottom: 1px solid #edf2ef; color: #52625d; background: #fbfdfc; font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.booking-date b { font-size: 18px; font-weight: 500; }
.booking-person { display: flex; align-items: center; gap: 11px; padding: 15px 15px 9px; }
.person-badge { display: grid; flex: none; width: 40px; height: 40px; place-items: center; border-radius: 14px; font-size: 10px; font-weight: 900; letter-spacing: .03em; }
.person-badge.large { width: 48px; height: 48px; border-radius: 17px; }
.person-badge.blue { color: #135b70; background: #bdeaf4; }
.person-badge.coral { color: #7a3440; background: #ffd0d4; }
.person-badge.yellow { color: #725313; background: #ffe7a1; }
.person-badge.mint { color: #235f51; background: #c9eee2; }
.person-badge.turquoise { color: #075e63; background: #b9ece9; }
.person-badge.navy { color: #f3f8ff; background: #315a88; }
.person-badge.violet { color: #56377b; background: #dfd0f5; }
.person-badge.rose { color: #7b3458; background: #f8cee2; }
.person-badge.orange { color: #7a4313; background: #ffd5aa; }
.person-badge.lime { color: #426113; background: #dcefa8; }
.booking-person h3, .person-card h3 { font-size: 15px; }
.booking-person p, .person-card header p { overflow: hidden; margin-top: 3px; color: #76827e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 8px; border-radius: 999px; font-size: 9px; font-weight: 850; white-space: nowrap; }
.status i, .legend i, .person-card li i { width: 7px; height: 7px; border-radius: 50%; }
.status.booked { color: #176545; background: #e4f6ea; }.status.booked i, .legend .booked, .person-card li i.booked { background: #4ab679; }
.status.proposed { color: #176545; background: #edf8ef; }.status.proposed i, .person-card li i.proposed { background: #81c997; }
.status.veto { color: #a12536; background: #fee7e9; }.status.veto i, .legend .veto, .person-card li i.veto { background: #e95768; }
.status.released { color: #9b5c11; background: #fff0da; }.status.released i, .legend .released, .person-card li i.released { background: #eba64e; }
.legend .open { background: #c9d1cd; }
.booking-note { margin: 3px 15px 12px 66px; color: #697873; font-size: 11px; font-style: italic; }
.booking-card footer { display: flex; min-height: 43px; align-items: center; gap: 13px; padding: 9px 15px; border-top: 1px solid #edf2ef; }
.booking-card footer button { color: #687570; font-size: 10px; font-weight: 850; }.booking-card footer .veto-action { color: #bb3f4f; }
.booking-card footer small { color: #9aa39f; font-weight: 500; }
.released-copy { color: #a26117; font-size: 10px; font-weight: 750; }
.empty { grid-column: 1/-1; display: grid; min-height: 270px; place-items: center; align-content: center; color: var(--muted); text-align: center; }.empty span { color: var(--green); font-size: 32px; }.empty h3 { margin-top: 8px; }.empty p { margin-top: 5px; font-size: 12px; }

.people-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.person-card { padding: 18px; border: 1px solid #e2ebe6; border-radius: 20px; background: white; }
.person-card header { display: flex; align-items: center; gap: 12px; }
.person-card ul { display: grid; gap: 10px; margin: 17px 0 0; padding: 16px 0 0; border-top: 1px solid #edf2ef; list-style: none; }
.person-card li > button { display: grid; width: 100%; grid-template-columns: 10px minmax(0,1fr) auto auto; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid #e4ece8; border-radius: 14px; color: #52635d; background: #f9fcfa; text-align: left; transition: .16s ease; }.person-card li > button:hover { border-color: #b8d8cc; background: white; box-shadow: 0 7px 18px rgba(37,72,61,.07); transform: translateY(-1px); }.person-card li > button > i { width: 9px; height: 9px; border-radius: 50%; }.person-card li > button > span { display: grid; gap: 4px; min-width: 0; }.person-card li > button strong { color: var(--ink); font-size: 13px; }.person-card li > button small { color: var(--muted); font-size: 10px; line-height: 1.35; }.person-card li > button .status { margin: 0; font-style: normal; }.person-card li > button em { color: var(--green); font-size: 9px; font-style: normal; font-weight: 850; white-space: nowrap; }.person-card li.muted { display: block; padding: 12px; color: #8a9691; font-size: 11px; text-align: center; }
.legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 13px; }.legend span { display: flex; align-items: center; gap: 5px; color: #6e7c77; font-size: 9px; font-weight: 750; }.legend i { display: inline-block; }
.summer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.month-card { padding: 16px; border: 1px solid #e0ebe5; border-radius: 20px; background: white; }
.month-card > header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 13px; }.month-card h3 { font-size: 16px; }.month-card > header span { color: #8a9691; font-size: 9px; font-weight: 750; }
.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }.weekday { padding-bottom: 4px; color: #93a09b; font-size: 8px; text-align: center; text-transform: uppercase; }
.day { position: relative; min-width: 0; aspect-ratio: 1; border-radius: 9px; color: #60706a; background: #eef2f0; font-size: 9px; font-weight: 850; transition: .14s; }.day:hover { z-index: 2; transform: scale(1.08); }.day b { position: absolute; right: 3px; bottom: 2px; font-size: 6px; }.day.booked { color: #14593f; background: #bde8cb; }.day.proposed { color: #1f664c; background: #d2eed9; box-shadow: inset 0 0 0 1px #96d1a7; }.day.veto { color: #8f2231; background: #ffc5cc; box-shadow: inset 0 0 0 1px #f37d8a; }.day.released { color: #92580f; background: repeating-linear-gradient(135deg,#ffe1b8,#ffe1b8 4px,#fff0dc 4px,#fff0dc 8px); }
.year-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.year-month { display: block; width: 100%; padding: 14px; border: 1px solid #e1eae5; border-radius: 17px; background: white; text-align: left; transition: .18s ease; }.year-month:hover { border-color: #afd2c5; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(32,71,60,.1); }.year-month header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.year-month h3 { font-size: 12px; }.year-month header span { color: #87938e; font-size: 8px; font-weight: 750; }.year-month > div { display: flex; gap: 2px; height: 28px; margin-top: 11px; }.year-month i { flex: 1; border-radius: 3px; background: #e7ece9; }.year-month i.booked { background: #74cf93; }.year-month i.proposed { background: #9ad9ae; }.year-month i.veto { background: #ef7180; }.year-month i.released { background: #f4b45f; }.year-month > small { display: block; margin-top: 9px; color: var(--green); font-size: 9px; font-weight: 850; }
.month-controls { display: flex; align-items: center; gap: 5px; padding: 4px; border-radius: 999px; background: #edf4f0; }.month-controls button { min-height: 34px; padding: 0 12px; border-radius: 999px; color: #4d6760; font-size: 10px; font-weight: 850; }.month-controls button:first-child, .month-controls button:last-child { width: 34px; padding: 0; background: white; box-shadow: 0 2px 8px rgba(35,70,60,.08); font-size: 20px; }.month-controls button:hover { color: var(--green-dark); background: white; }
.focused-month-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap: 16px; align-items: start; }.large-month-card { padding: 22px; }.large-month-card h3 { font-size: 20px; }.large-month-card .calendar-grid { gap: 8px; }.day.large-day { min-height: 62px; border-radius: 13px; font-size: 12px; }.day.large-day b { right: 7px; bottom: 6px; font-size: 8px; }.month-bookings { padding: 20px; border: 1px solid #e0ebe5; border-radius: 20px; background: rgba(255,255,255,.7); }.month-bookings > h3 { font-size: 16px; }.month-bookings > p { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }.month-bookings > div { display: grid; gap: 10px; margin-top: 15px; }
.booking-detail { padding: 14px; border: 1px solid #deebe5; border-left: 4px solid #75c996; border-radius: 16px; background: white; }.booking-detail.veto { border-left-color: #e95768; }.booking-detail.released { border-left-color: #eba64e; background: #fffaf4; }.booking-detail.proposed { border-left-color: #81c997; }.booking-detail > header { display: flex; align-items: center; gap: 10px; }.booking-detail > header > div { min-width: 0; }.booking-detail h3 { font-size: 13px; }.booking-detail header p { margin-top: 3px; color: var(--muted); font-size: 9px; }.booking-detail .status { margin-left: auto; }.booking-detail dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 12px 0 0; }.booking-detail dl div { padding: 8px; border-radius: 10px; background: #f3f7f5; }.booking-detail dt { color: var(--muted); font-size: 8px; font-weight: 750; text-transform: uppercase; }.booking-detail dd { margin: 2px 0 0; font-size: 13px; font-weight: 850; }.detail-note { display: grid; gap: 3px; margin-top: 10px; color: #53655f; font-size: 10px; line-height: 1.45; }.detail-note strong { color: var(--ink); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }.detail-note.muted { color: #89938f; }.month-empty { display: grid; min-height: 180px; place-items: center; align-content: center; color: var(--muted); text-align: center; }.month-empty span { color: var(--green); font-size: 28px; }.month-empty strong { margin-top: 5px; color: var(--ink); font-size: 13px; }.month-empty p { margin-top: 4px; font-size: 10px; }

.floating-book { display: none; position: fixed; z-index: 15; right: 18px; bottom: 18px; min-height: 48px; align-items: center; gap: 6px; padding: 0 18px; border-radius: 999px; color: white; background: var(--green); box-shadow: 0 10px 30px rgba(23,107,92,.32); font-size: 13px; font-weight: 850; }
.dialog { width: 100%; max-width: 560px; max-height: calc(100vh - 30px); padding: 0; border: 0; border-radius: 28px; color: var(--ink); background: transparent; overflow: visible; }.dialog::backdrop { background: rgba(13,43,36,.24); backdrop-filter: blur(5px); }
.dialog-card { position: relative; display: grid; gap: 17px; max-height: calc(100vh - 30px); padding: 25px; border-radius: 28px; background: white; box-shadow: 0 30px 90px rgba(21,55,47,.22); overflow-y: auto; }
.dialog-close { position: absolute; top: 14px; right: 14px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: #74817d; background: #f2f5f3; font-size: 22px; }
.dialog-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 15px; color: var(--green); background: #e7f6f1; font-size: 21px; }.dialog-icon.amber { color: #826018; background: #fff0bd; }
.dialog header h2 { font-size: 24px; letter-spacing: -.03em; }.dialog header p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.dialog label:not(.switch-row) { display: grid; gap: 7px; color: #3f514b; font-size: 12px; font-weight: 800; }.dialog label small { color: #8c9994; font-weight: 500; }
.dialog input:not([type="checkbox"]), .dialog select, .dialog textarea { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid #d5e1db; border-radius: 11px; color: var(--ink); background: #fff; }.dialog textarea { resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin: 4px -25px -25px; padding: 16px 25px; border-top: 1px solid #e7eeea; background: #f8faf9; }
.form-error { padding: 10px 12px; border-radius: 11px; color: #9b2f3c; background: #ffedef; font-size: 12px; }
.settings-card { gap: 18px; }.switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: #fbfaf5; cursor: pointer; }.switch-row strong { display: block; font-size: 14px; }.switch-row small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.5; }
.switch-row input { position: relative; flex: 0 0 36px; width: 36px; height: 21px; margin: 1px 0 0; appearance: none; border-radius: 999px; background: #cdd6d2; transition: .2s; cursor: pointer; }.switch-row input::after { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.2); content: ""; transition: .2s; }.switch-row input:checked { background: var(--green); }.switch-row input:checked::after { transform: translateX(15px); }
.info-box { padding: 14px; border-radius: 15px; color: #23546b; background: #eaf7fc; font-size: 11px; line-height: 1.55; }
.branding-admin, .cutoff-admin, .user-admin { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }.branding-admin > header h3, .cutoff-admin > header h3, .user-admin > header h3, .create-user-form h3 { font-size: 16px; }.branding-admin > header p, .cutoff-admin > header p, .user-admin > header p { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.branding-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 15px; border: 1px solid #dce9e3; border-radius: 17px; background: #f8fbf9; }.branding-form .form-error { grid-column: 1/-1; }.branding-form .primary-button { grid-column: 1/-1; justify-self: end; }
.cutoff-form { display: grid; grid-template-columns: minmax(180px,1fr) auto; align-items: end; gap: 12px; padding: 15px; border: 1px solid #dce9e3; border-radius: 17px; background: #f8fbf9; }.cutoff-form .form-error { grid-column: 1/-1; }
.user-list { display: grid; gap: 7px; }.user-list article { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e3ece7; border-radius: 14px; background: #fbfdfc; }.user-list article > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }.user-list article strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.user-list article small { color: var(--muted); font-size: 10px; }.user-list article i { margin-left: auto; color: #9a4c55; font-size: 9px; font-style: normal; font-weight: 850; }.user-list article i.active { color: #267153; }
.reset-user-password { flex: none; padding: 7px 9px; border: 1px solid #d7e5de; border-radius: 10px; color: #3e645a; background: white; font-size: 9px; font-weight: 850; }.reset-user-password:hover { border-color: #9fcbbb; color: var(--green-dark); background: #eef8f4; }.reset-password-card { max-width: 470px; }
.create-user-form { display: grid; gap: 12px; padding: 15px; border: 1px solid #dce9e3; border-radius: 17px; background: #f8fbf9; }.create-user-form .primary-button { justify-self: end; }
.profile-card { max-width: 430px; }.profile-card > .secondary-button { justify-self: start; }.password-form { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }.password-form h3 { font-size: 16px; }.password-form .primary-button { justify-self: end; }.guest-profile-note { padding: 14px; border-radius: 14px; color: #4f5f5a; background: #f1f5f3; font-size: 11px; line-height: 1.5; }.booking-details-card { max-width: 560px; }.booking-details-list { display: grid; gap: 11px; }
.login-dialog { max-width: 880px; }.login-card { grid-template-columns: 1.15fr .85fr; gap: 0; min-height: 520px; padding: 0; overflow: hidden; }.login-visual { position: relative; min-height: 520px; background: linear-gradient(180deg,rgba(7,44,57,.02) 38%,rgba(7,35,45,.78) 100%), url('/villa-saimaa.jpg') center/cover no-repeat; }.login-visual > div { position: absolute; right: 34px; bottom: 32px; left: 34px; color: white; text-shadow: 0 2px 14px rgba(0,0,0,.38); }.login-visual strong, .login-visual small { display: block; }.login-visual strong { margin-top: 15px; font-size: 22px; letter-spacing: -.03em; }.login-visual small { margin-top: 4px; color: rgba(255,255,255,.78); font-size: 10px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.login-panel { display: grid; align-content: center; gap: 16px; padding: 34px; background: white; }.login-mark { width: 48px; height: 48px; }.login-card .primary-button { width: 100%; }.demo-login { padding: 10px 12px; border-radius: 12px; color: #725313; background: #fff5d3; font-size: 11px; line-height: 1.5; }
.toast { position: fixed; z-index: 50; right: 20px; bottom: 20px; max-width: min(390px, calc(100vw - 40px)); padding: 13px 16px; border: 1px solid #bfe4d6; border-radius: 14px; color: #175746; background: white; box-shadow: 0 15px 45px rgba(34,69,58,.18); font-size: 12px; font-weight: 750; }.toast.error { border-color: #efbec4; color: #972f3c; }
noscript { position: fixed; inset: auto 20px 20px; padding: 12px; color: #8b2d38; background: white; }

@media (max-width: 1080px) {
  .booking-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .topbar-inner { padding: 0 24px; }.shell { padding-right: 24px; padding-bottom: 112px; padding-left: 24px; }
  .main-nav { display: none; }.mobile-nav { position: fixed; z-index: 30; right: 16px; bottom: max(12px,env(safe-area-inset-bottom)); left: 16px; display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; padding: 7px 10px; border: 1px solid rgba(215,229,222,.95); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 14px 38px rgba(26,59,50,.2); backdrop-filter: blur(18px); }.mobile-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 11px; color: #78857f; font-size: 9px; font-weight: 800; }.mobile-nav button span { font-size: 16px; }.mobile-nav button.active { color: var(--green); background: #e7f3ee; }
  .summer-grid { grid-template-columns: 1fr; }.month-card { width: min(560px,100%); margin: auto; }.year-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.focused-month-layout { grid-template-columns: 1fr; }.month-bookings { width: min(560px,100%); margin: auto; }
}
@media (max-width: 640px) {
  .topbar-inner { height: 66px; padding: 0 14px; }.brand-mark { width: 36px; height: 36px; }.brand strong { font-size: 15px; }.brand small { font-size: 8px; }
  .shell { padding: 24px 14px 92px; }.intro { min-height: 280px; align-items: flex-end; margin-bottom: 18px; padding: 24px 21px; background-position: 57% center; }.intro h1 { font-size: 30px; }.intro p:last-child { font-size: 13px; }.desktop-book { display: none; }
  .rule-banner { align-items: flex-start; padding: 14px; }.rule-icon { flex-basis: 38px; height: 38px; }.rule-banner::after, .days-chip { display: none; }
  .surface { padding: 15px; border-radius: 21px; }.panel-heading { align-items: flex-start; flex-direction: column; }.panel-heading h2 { font-size: 19px; }.filters { width: 100%; }.filters button { flex: 1; }
  .booking-grid, .people-grid { grid-template-columns: 1fr; }.booking-person { flex-wrap: wrap; }.status { margin-left: 51px; }.booking-note { margin-left: 15px; }.booking-card footer { justify-content: space-between; }.booking-card footer small { display: none; }
  .person-card li > button { grid-template-columns: 9px minmax(0,1fr) auto; padding: 12px; }.person-card li > button .status { grid-column: 2; justify-self: start; }.person-card li > button em { grid-column: 3; grid-row: 1/3; }.cutoff-form { grid-template-columns: 1fr; }.cutoff-form .form-error { grid-column: 1; }.cutoff-form .primary-button { width: 100%; }
  .legend { justify-content: flex-start; }.year-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.year-month { padding: 11px; }.year-month header { display: block; }.year-month header span { display: block; margin-top: 2px; }.year-month > div { height: 21px; gap: 1px; }.month-controls { width: 100%; justify-content: space-between; }.large-month-card { padding: 13px; }.large-month-card .calendar-grid { gap: 5px; }.day.large-day { min-height: 42px; border-radius: 9px; }.month-bookings { padding: 15px; }.booking-detail .status { flex-basis: auto; margin-left: auto; }.password-form .primary-button { width: 100%; }
  .floating-book { display: flex; bottom: calc(92px + env(safe-area-inset-bottom)); }.dialog { max-width: calc(100% - 20px); }.dialog-card { padding: 21px; border-radius: 23px; }.dialog footer { margin: 3px -21px -21px; padding: 14px 21px; }.form-grid { gap: 9px; }.branding-form { grid-template-columns: 1fr; }.branding-form .form-error, .branding-form .primary-button { grid-column: 1; }.branding-form .primary-button { width: 100%; }
  .user-list article { flex-wrap: wrap; }.user-list article i { margin-left: auto; }.reset-user-password { flex-basis: 100%; margin-left: 50px; }
  .login-card { grid-template-columns: 1fr; min-height: 0; padding: 0; }.login-visual { min-height: 170px; background-position: center 55%; }.login-visual > div { right: 20px; bottom: 18px; left: 20px; }.login-visual strong { margin-top: 9px; font-size: 17px; }.login-mark { width: 38px; height: 38px; }.login-panel { gap: 13px; padding: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}