:root { --paper: #102f35; --ink: #17352f; --green: #176b5c; --green-dark: #0f5146; }
html { background: #102f35; }
body { position: relative; background: transparent; }
body::before { position: fixed; z-index: -2; inset: 0; background: linear-gradient(135deg,rgba(4,28,35,.52),rgba(4,28,35,.08) 60%,rgba(4,28,35,.35)),url('/villa-saimaa.jpg') center/cover no-repeat; content: ""; }
.page-glow { background: linear-gradient(180deg,rgba(3,24,30,.05),rgba(3,24,30,.24)); }
.topbar { border-color: rgba(255,255,255,.16); background: rgba(6,35,42,.5); box-shadow: 0 8px 25px rgba(2,22,28,.12); }
.brand strong { color: white; }.brand small { color: rgba(255,255,255,.66); }.brand-mark { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.16); box-shadow: none; backdrop-filter: blur(12px); }
.main-nav { border-color: rgba(255,255,255,.16); background: rgba(5,31,38,.25); box-shadow: none; }.nav-button { color: rgba(255,255,255,.72); }.nav-button:hover { color: white; background: rgba(255,255,255,.12); }.nav-button.active { color: #17473e; background: rgba(255,255,255,.94); box-shadow: 0 5px 18px rgba(0,0,0,.16); }
.icon-button { color: white; background: rgba(255,255,255,.14); }.icon-button:hover { background: rgba(255,255,255,.24); }.avatar { border-color: rgba(255,255,255,.7); }
.shell { padding-top: 28px; }
.intro { min-height: 220px; padding: 38px 8px 30px; border-radius: 0; background: transparent; box-shadow: none; }.intro > div { max-width: 760px; }.intro h1 { font-size: clamp(38px,5vw,60px); }.intro .kicker { color: #c8f4e8; }.intro p:last-child { color: rgba(255,255,255,.82); }.intro .primary-button { border: 1px solid rgba(255,255,255,.35); color: white; background: rgba(8,47,55,.36); backdrop-filter: blur(14px); }.intro .primary-button:hover { color: #17473e; background: white; }
.rule-banner { border-color: rgba(255,255,255,.3); background: rgba(255,250,218,.82); box-shadow: 0 14px 36px rgba(0,0,0,.12); backdrop-filter: blur(18px); }
.surface { border-color: rgba(255,255,255,.48); background: rgba(250,255,253,.86); box-shadow: 0 24px 70px rgba(0,0,0,.2); backdrop-filter: blur(24px); }
.booking-card,.person-card,.month-card,.year-month { background: rgba(255,255,255,.87); }.booking-date { background: rgba(246,251,248,.7); }
.test-switcher { position: fixed; z-index: 60; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 5px; padding: 6px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: white; background: rgba(5,30,37,.7); box-shadow: 0 12px 35px rgba(0,0,0,.22); backdrop-filter: blur(16px); }.test-switcher strong,.test-switcher a { padding: 7px 10px; font-size: 9px; font-weight: 850; }.test-switcher a { border-radius: 999px; color: #17473e; background: white; text-decoration: none; }
.login-dialog { max-width: 490px; }.login-card { grid-template-columns: 1fr; min-height: 650px; align-content: end; padding: 28px; background: linear-gradient(180deg,rgba(3,27,34,.06) 28%,rgba(3,27,34,.68) 100%),url('/villa-saimaa.jpg') center/cover no-repeat; }.login-visual { display: none; }.login-panel { gap: 14px; padding: 24px; border: 1px solid rgba(255,255,255,.5); border-radius: 22px; background: rgba(255,255,255,.84); box-shadow: 0 20px 55px rgba(0,0,0,.2); backdrop-filter: blur(24px); }
@media (max-width: 900px) { .topbar { background: rgba(6,35,42,.72); }.mobile-nav { right: max(12px,env(safe-area-inset-right)); bottom: max(12px,env(safe-area-inset-bottom)); left: max(12px,env(safe-area-inset-left)); background: rgba(255,255,255,.92); }.shell { padding-top: 18px; }.test-switcher { top: 76px; right: 12px; bottom: auto; }.test-switcher strong { display: none; } }
@media (max-width: 640px) { .intro { min-height: 330px; padding: 82px 8px 24px; }.intro h1 { font-size: clamp(31px,10vw,38px); }.login-card { min-height: min(720px,calc(100vh - 20px)); padding: 14px; }.login-panel { padding: 20px; } }