:root { --green:#126a59; --ink:#17342e; --muted:#63746f; --line:#dce7e3; --paper:#fffefa; --bg:#f3f7f5; --coral:#e87e64; font-family:Inter, ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); }
* { box-sizing:border-box; } body { margin:0; background:var(--bg); } .topbar { height:70px; padding:0 max(20px,calc((100vw - 1100px)/2)); display:flex; align-items:center; justify-content:space-between; background:var(--paper); border-bottom:1px solid var(--line); } .brand { display:flex; gap:10px; align-items:center; } .brand>span,.user-icon { display:grid; place-items:center; color:white; background:var(--green); border-radius:11px; width:39px; height:39px; font-size:26px; } .brand strong,.brand small { display:block; } .brand strong { font-size:16px; } .brand small { color:var(--muted); font-size:12px; margin-top:1px; } .top-actions { display:flex; align-items:center; } main { max-width:1100px; margin:auto; padding:40px 20px 64px; } .intro { max-width:600px; margin:0 0 30px; } h1 { font-size:clamp(30px,5vw,46px); line-height:1.04; letter-spacing:-1.4px; margin:6px 0 12px; } h2 { margin:4px 0 0; font-size:21px; letter-spacing:-.4px; } p { line-height:1.5; } .intro>p:last-child { color:var(--muted); margin:0; } .eyebrow { font-weight:800; letter-spacing:1.2px; color:var(--green); font-size:11px; margin:0; } .panel { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 8px 30px #1741360a; margin-top:20px; } .schedule-head,.section-title { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; } label { display:grid; gap:6px; font-size:13px; font-weight:700; color:#365149; } input,textarea { font:inherit; font-weight:500; color:var(--ink); padding:10px 11px; background:#fff; border:1px solid #cbdad5; border-radius:9px; min-height:42px; width:100%; } textarea { resize:vertical; } .date-picker { min-width:150px; } .date-strip { display:flex; gap:8px; overflow:auto; padding:22px 0 15px; } .day-pill { border:1px solid var(--line); background:white; color:var(--ink); padding:9px 14px; min-width:86px; border-radius:10px; cursor:pointer; font:inherit; } .day-pill small,.day-pill strong { display:block; } .day-pill small { color:var(--muted); font-size:11px; margin-bottom:2px; } .day-pill.active { color:white; background:var(--green); border-color:var(--green); } .day-pill.active small { color:#d9eee8; } .machine-legend { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; color:var(--muted); margin-bottom:13px; } .machine-legend span::before { content:""; display:inline-block; width:9px; height:9px; border-radius:99px; background:var(--machine-color); margin-right:5px; } .table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:11px; } table { width:100%; border-collapse:collapse; min-width:550px; } th { text-align:left; background:#f3f8f6; font-size:12px; color:#496158; font-weight:750; padding:12px; } td { padding:9px 12px; border-top:1px solid var(--line); } td:first-child { font-size:13px; font-weight:750; white-space:nowrap; } .slot { border:0; border-radius:8px; padding:8px 9px; width:100%; text-align:left; font:inherit; font-size:12px; cursor:pointer; min-height:37px; } .slot.free { background:#e4f4ed; color:#08613e; font-weight:750; } .slot.taken { background:#f4eeeb; color:#725e57; cursor:default; } .slot.mine { background:#fff0ca; color:#775100; } .hint { color:var(--muted); font-size:12px; margin:14px 0 0; } .lookup-form { display:flex; align-items:end; gap:10px; margin:18px 0; max-width:440px; } .lookup-form label { flex:1; } button { font:inherit; cursor:pointer; } .primary,.secondary,.link-button { border-radius:9px; min-height:42px; padding:9px 14px; font-weight:750; } .primary { background:var(--green); color:white; border:1px solid var(--green); } .secondary { background:white; color:var(--green); border:1px solid #a8c6bc; } .link-button { background:none; border:0; color:var(--green); } .empty { color:var(--muted); background:#f7faf8; border-radius:10px; padding:15px; font-size:14px; } .booking-card { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14px; } .booking-card:last-child { border:0; } .booking-card small { color:var(--muted); display:block; margin-top:3px; } .cancel { color:#ad3f2e; border:0; background:transparent; text-decoration:underline; font-weight:700; } dialog { border:0; padding:0; border-radius:18px; width:min(460px,calc(100vw - 30px)); box-shadow:0 22px 70px #102e2570; } dialog::backdrop { background:#14372d80; } dialog form { padding:27px; position:relative; } dialog h2 { margin-bottom:19px; } .close { position:absolute; right:15px; top:12px; font-size:27px; line-height:1; color:var(--muted); background:transparent; border:0; } .booking-details { background:#f1f7f4; border-radius:9px; padding:12px; font-size:14px; margin-bottom:17px; } .reservation-apartment { color:var(--green); background:#e4f4ed; border-radius:9px; padding:10px 12px; font-size:14px; font-weight:750; margin:0; } .dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:21px; } .form-message { color:#b34231; font-size:13px; min-height:18px; margin:8px 0 0; } .user-icon { margin-bottom:17px; width:46px; height:46px; } .user-copy { color:var(--muted); font-size:14px; margin:-8px 0 18px; } .full-width { width:100%; margin-top:15px; } .admin-dialog { width:min(660px,calc(100vw - 30px)); } .admin-tabs { display:flex; gap:5px; border-bottom:1px solid var(--line); margin:0 -27px 20px; padding:0 27px; } .tab { background:transparent; border:0; padding:10px 8px; margin-right:8px; color:var(--muted); font-weight:750; } .tab.active { color:var(--green); border-bottom:2px solid var(--green); } .two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; } .tab-panel>label { margin:14px 0; } #adminBookings { max-height:380px; overflow:auto; } #toast { position:fixed; left:50%; bottom:24px; translate:-50% 100px; opacity:0; padding:11px 16px; background:#17342e; color:white; border-radius:9px; font-size:14px; transition:.25s; box-shadow:0 8px 28px #0003; } #toast.show { translate:-50% 0; opacity:1; }
@media (max-width:600px) { main { padding:28px 14px 44px; } .topbar { padding:0 14px; } .panel { padding:17px; border-radius:14px; } .schedule-head { align-items:flex-end; } .date-picker { min-width:136px; } .lookup-form { align-items:stretch; flex-direction:column; } .lookup-form button { width:100%; } .two-col { grid-template-columns:1fr; } dialog form { padding:22px; } .admin-tabs { margin:0 -22px 16px; padding:0 22px; } }