@font-face { font-family: Geist; src: url('./assets/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root { color-scheme: light; --bg:#f2f3f7; --surface:#fff; --surface2:#f2f3f7; --primary:#1c1c1e; --secondary:#62636b; --tertiary:#6b6d75; --accent:#0066d6; --red:#c52e26; --green:#187c3b; --orange:#966000; --separator:#d9dbe2; font-family:Geist,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--primary); background:var(--bg); -webkit-font-smoothing:antialiased; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; min-height:100dvh; }
h1,h2,h3,p { margin:0; }
button,input,select,textarea { font:inherit; color:inherit; }
button { border:0; background:none; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
a { color:var(--accent); text-decoration:none; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
input,select,textarea { min-width:0; caret-color:var(--accent); }
input::placeholder,textarea::placeholder { color:var(--tertiary); opacity:1; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline-offset:-2px; border-radius:4px; }
::selection { color:#15335c; background:#cce3ff; }
* { scrollbar-color:#b5b8c2 transparent; scrollbar-width:thin; }
[hidden] { display:none !important; }
.muted { color:var(--secondary); }
.error,.danger-button { color:var(--red); }
.strong { font-weight:600; }
.text-button { color:var(--accent); padding:0; }
.text-button:active,.icon-button:active { opacity:.55; }
.primary-button { background:var(--accent); color:white; padding:10px 16px; border-radius:9px; font-size:14px; font-weight:600; }
.primary-button:hover { background:#0054b5; }
.site-header { position:sticky; top:0; z-index:10; background:var(--surface); border-bottom:1px solid var(--separator); }
.nav-inner { max-width:512px; margin:auto; height:44px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nav-inner h1 { font-size:17px; font-weight:600; }
.nav-inner nav { display:flex; align-items:center; gap:16px; font-size:15px; }
.calendar-main { max-width:512px; margin:auto; padding-bottom:112px; }
.month-header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; padding:20px 16px 12px; }
.month-header h2 { font-size:28px; font-weight:700; line-height:1; letter-spacing:-.03em; }
.month-header .year { display:block; font-size:14px; font-weight:500; margin-top:4px; color:var(--secondary); letter-spacing:0; }
.month-navigation { display:flex; gap:4px; flex-shrink:0; }
.icon-button { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--accent); }
.icon-button:hover { background:#e3edfc; }
.weekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin:0 8px 4px; padding:4px 0 8px; border-bottom:1px solid var(--separator); text-align:center; font-size:12px; font-weight:600; color:var(--secondary); }
.weekdays span:nth-last-child(-n+2) { color:var(--red); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); padding:0 8px; }
.calendar-cell { min-width:0; min-height:80px; padding:4px 2px; border-bottom:1px solid var(--separator); border-right:1px solid var(--separator); text-align:left; display:flex; flex-direction:column; align-items:stretch; gap:4px; }
.calendar-cell:nth-child(7n) { border-right:0; }
.calendar-cell.selected { background:#e3edfc; }
.day-number { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; margin:0 auto; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.past .day-number { color:var(--tertiary); }
.weekend .day-number { color:var(--red); }
.selected .day-number { background:var(--accent); color:white; }
.today .day-number { background:var(--red); color:white; }
.calendar-events { display:flex; flex-direction:column; gap:2px; padding:0 2px; min-width:0; }
.event-pill { background:var(--accent); color:white; height:16px; line-height:16px; padding:0 4px; border-radius:4px; font-size:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.event-completed { background:var(--tertiary); }.event-cancelled { background:var(--red); }
.event-overflow { font-size:10px; line-height:14px; color:var(--secondary); padding-left:4px; }
.fab { position:fixed; bottom:24px; right:24px; width:56px; height:56px; display:grid; place-items:center; color:white; background:var(--accent); border-radius:50%; z-index:10; box-shadow:0 4px 16px #0066d659; transition:transform .15s; }
.fab:active { transform:scale(.95); }
.modal { margin:auto; width:calc(100% - 32px); max-width:384px; max-height:90dvh; padding:0; border:0; border-radius:16px; color:var(--primary); background:var(--surface); box-shadow:0 20px 65px #18233233; overflow-y:auto; }
.modal::backdrop { background:#0f172a40; backdrop-filter:blur(4px); }
.modal[open] { animation:dialog-in .16s ease-out; }
@keyframes dialog-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.modal-header { padding:12px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--separator); font-size:16px; }
.modal-header h2 { font-size:16px; font-weight:600; }
.booking-form { padding-bottom:24px; }
.form-error { padding:16px 16px 0; font-size:14px; line-height:1.45; }
.group-label { padding:20px 16px 6px; color:var(--secondary); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.025em; }
.form-group { background:var(--surface2); border-radius:12px; margin:0 16px; overflow:hidden; }
.form-row { display:flex; align-items:center; padding:0 16px; border-bottom:1px solid var(--separator); min-height:45px; }
.form-row:last-child { border-bottom:0; }
.form-row>span { width:80px; flex-shrink:0; font-size:15px; color:var(--secondary); }
.form-row input,.form-row select { flex:1; width:0; padding:10px 0; border:0; background:transparent; font-size:16px; line-height:24px; }
.form-row select { appearance:none; }
.form-row option { background:var(--surface); }
.form-group textarea { width:100%; display:block; padding:12px 16px; border:0; background:transparent; font-size:16px; line-height:24px; resize:vertical; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 16px; border-bottom:1px solid var(--separator); font-size:16px; }
.switch { position:relative; flex-shrink:0; width:51px; height:31px; border-radius:18px; background:var(--tertiary); transition:background .2s; padding:0; }
.switch[aria-checked=true] { background:var(--green); }
.switch>span { position:absolute; top:2px; left:0; width:27px; height:27px; border-radius:50%; background:white; box-shadow:0 2px 4px #0002; transform:translateX(2px); transition:transform .2s; }
.switch[aria-checked=true]>span { transform:translateX(22px); }
.day-header { padding:16px 16px 12px; display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px solid var(--separator); }
.day-header h2 { font-size:22px; line-height:1.2; }.day-header p { margin-top:3px; font-size:13px; text-transform:capitalize; color:var(--secondary); }
.close-button { width:32px; height:32px; background:var(--surface2); border-radius:50%; display:grid; place-items:center; color:var(--secondary); }
.day-sections { padding:8px 0; }
.resource-section + .resource-section { border-top:1px solid var(--separator); margin-top:6px; }
.resource-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 16px; }
.resource-heading h3 { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--secondary); font-weight:600; }
.resource-heading button { font-size:13px; color:var(--accent); font-weight:500; min-height:32px; display:flex; align-items:center; gap:4px; }
.free-time { padding:0 16px 12px; font-size:14px; color:var(--tertiary); }
.day-bookings { padding:0 12px 8px; display:flex; flex-direction:column; gap:6px; }
.day-booking { padding:10px 12px; border-radius:12px; background:var(--surface2); display:flex; align-items:center; gap:12px; text-align:left; width:100%; }
.status-line { width:3px; height:36px; border-radius:4px; flex-shrink:0; background:var(--green); }
.status-completed { background:var(--tertiary); }.status-cancelled { background:var(--red); }
.day-booking-copy { min-width:0; flex:1; }.day-booking-copy strong { font-size:15px; font-weight:500; }
.day-booking-copy p { margin-top:2px; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--secondary); }
.special-star { color:var(--orange); font-size:12px; margin-left:5px; }
.details-body { padding-bottom:24px; }.details-status { display:flex; align-items:center; gap:8px; padding:16px 16px 8px; font-size:15px; font-weight:500; color:var(--green); }
.details-status.completed { color:var(--secondary); }.details-status.cancelled { color:var(--red); }
.status-dot { width:10px; height:10px; background:currentColor; border-radius:50%; }
.detail-row { display:flex; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--separator); font-size:15px; line-height:1.5; }.detail-row:last-child { border-bottom:0; }
.detail-row dt { color:var(--secondary); width:96px; flex-shrink:0; }.detail-row dd { margin:0; min-width:0; overflow-wrap:anywhere; }
dl.form-group { margin-top:0; margin-bottom:0; }
.details-actions { padding:16px 16px 0; display:flex; flex-direction:column; gap:12px; }
.action-group { border-radius:12px; background:var(--surface2); overflow:hidden; }
.action-group button { padding:14px 16px; width:100%; text-align:left; font-size:17px; border-bottom:1px solid var(--separator); }.action-group button:last-child { border-bottom:0; }.action-group .danger-button { text-align:center; }
.owner-help { padding:16px 16px 0; font-size:14px; color:var(--secondary); line-height:1.5; }
.empty-state,.loading { padding:32px 20px; text-align:center; font-size:14px; color:var(--secondary); }
.empty-state strong { display:block; color:var(--primary); margin-bottom:6px; }.empty-state button { margin-top:16px; }
.skeleton { background:linear-gradient(90deg,#e7e8ed 25%,#f8f9fb 50%,#e7e8ed 75%); background-size:800px 100%; animation:shimmer 1.5s linear infinite; border-radius:8px; }
.calendar-loading { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; margin:0 8px; }.calendar-loading>div { height:80px; }
@keyframes shimmer { from { background-position:-400px 0; } to { background-position:400px 0; } }
.toasts { position:fixed; bottom:16px; left:16px; right:16px; z-index:100; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { padding:12px 16px; border-radius:12px; font-size:14px; font-weight:500; color:white; background:#1d4ed8; box-shadow:0 8px 18px #0002; pointer-events:auto; }.toast-success { background:#047857; }.toast-error { background:#b91c1c; }.toast-warning { background:#92400e; }
.admin-header { position:sticky; top:0; background:white; border-bottom:1px solid var(--separator); z-index:10; }
.admin-nav { max-width:1152px; height:56px; }.admin-nav nav { font-size:12px; }.admin-nav h1 { font-size:14px; }
.admin-main { max-width:1152px; margin:auto; padding:32px 16px; }
.login-wrap { min-height:100dvh; display:grid; place-items:center; padding:16px; }.login-panel { width:100%; max-width:384px; }.login-panel h1 { font-size:20px; font-weight:600; text-align:center; }.login-panel p { font-size:14px; margin-top:4px; text-align:center; }
.login-icon { margin:0 auto 16px; display:grid; place-items:center; width:48px; height:48px; background:var(--accent); color:white; border-radius:16px; }.login-form { margin-top:32px; display:flex; flex-direction:column; gap:12px; }.login-form input { padding:12px 16px; border:1px solid var(--separator); border-radius:12px; background:white; width:100%; }.login-form button { padding:12px; border-radius:12px; }.login-panel>a,.login-back { display:block; text-align:center; margin-top:16px; font-size:12px; color:var(--secondary); }
.admin-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:32px; }.stat-card { background:white; border:1px solid var(--separator); border-radius:12px; padding:16px; }.stat-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--secondary); margin-bottom:4px; }.stat-value { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; }.stat-value.active { color:var(--green); }.stat-value.cancelled { color:var(--red); }
.admin-filters { background:white; border:1px solid var(--separator); border-radius:12px; padding:16px; margin-bottom:16px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }.field { display:flex; flex-direction:column; gap:4px; min-width:0; }.field label { font-size:11px; font-weight:600; color:var(--secondary); text-transform:uppercase; letter-spacing:.06em; }.field input,.field select { padding:8px 12px; border:1px solid var(--separator); border-radius:8px; background:var(--surface2); font-size:14px; }
.table-panel { background:white; border:1px solid var(--separator); border-radius:12px; overflow:hidden; }.table-scroll { overflow-x:auto; }.admin-table { border-collapse:collapse; width:100%; font-size:14px; }.admin-table th,.admin-table td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--separator); white-space:nowrap; }.admin-table tr:last-child td { border-bottom:0; }.admin-table th { color:var(--secondary); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }.admin-table th button { padding:4px 0; font:inherit; }.admin-table tbody tr:hover { background:#f8f9fb; }.admin-table td button { font-size:12px; padding:4px 8px; }.admin-table small { display:block; color:var(--secondary); font-size:12px; }.badge { padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }.badge-active { color:#047857; background:#d1fae5; }.badge-completed { color:#52525b; background:#f4f4f5; }.badge-cancelled { color:#b91c1c; background:#fee2e2; }
.admin-brand { display:flex; align-items:center; gap:12px; font-size:14px; font-weight:600; color:var(--primary); }.admin-brand-icon { display:grid; place-items:center; background:var(--accent); color:white; width:28px; height:28px; border-radius:8px; }.admin-nav-actions { display:flex; align-items:center; gap:12px; font-size:12px; }.stat-label,.stat-value,.contact-name,.contact-phone { display:block; }.stat-active { color:var(--green); }.stat-completed { color:var(--secondary); }.stat-cancelled { color:var(--red); }.contact-phone { font-size:12px; color:var(--secondary); }.cell-date,.cell-time,.cell-apartment { font-variant-numeric:tabular-nums; }.cell-actions { text-align:right!important; }.table-panel>.error { padding:24px; font-size:14px; }.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.admin-table th { position:relative; }
@media(min-width:640px) { .month-header h2 { font-size:34px; }.form-row>span { width:96px; }.modal-header { padding-inline:16px; }.admin-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }.toasts { left:auto; right:24px; bottom:24px; width:384px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }