:root{color-scheme:light;
    --ink:#243b35;
    --muted:#52665e;
    --green:#215c50;
    --line:#dce4de;
    --paper:#fffefa;
    --bg:#f5f3ec}
*{box-sizing:border-box}
body{margin:0;
    background:var(--bg);
    color:var(--ink);
    font:16px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.app-shell{max-width:760px;
    margin:auto;
    padding:28px 24px;
    padding: max(28px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.brand{display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:30px}
.brand img{border-radius:14px}
.brand strong{display:block;
    font-size:22px;
    letter-spacing:-.5px}
.brand span{display:block;
    color:var(--muted);
    font-size:14px}
h1{font-size:clamp(24px,5vw,32px);
    line-height:1.25;
    letter-spacing:-.8px}
h2{font-size:26px}
h3{font-size:21px}
h4{font-size:19px}
h1,h2,h3,h4{margin:0 0 18px}
p{margin:8px 0 16px}
.intro{color:var(--muted);
    margin-bottom:24px}
a{color:var(--green);
    text-underline-offset:3px}
form{margin:0}
label{display:block;
    font-weight:600;
    font-size:15px;
    margin-bottom:7px}
input:not([type=hidden]):not([type=checkbox]),select{display:block;
    width:100%;
    min-width:0;
    min-height:50px;
    margin:0 0 20px;
    padding:12px 14px;
    border:1px solid #9eafa5;
    border-radius:10px;
    background:white;
    color:var(--ink);
    font:inherit;
    font-size:16px}
input[type=checkbox]{width:22px;
    height:22px;
    accent-color:var(--green)}
label:has(input[type=checkbox]){display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px}
button,.btn-logout,.btn-back,.header a{display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:12px 18px;
    border:0;
    border-radius:10px;
    background:var(--green);
    color:white;
    font:inherit;
    font-weight:650;
    text-decoration:none;
    cursor:pointer;
    touch-action:manipulation}
button{width:100%}
button:hover{background:#17483e}
button:active{transform:translateY(1px)}
:focus-visible{outline:3px solid #b96b22;
    outline-offset:4px}
.header{display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:24px}
.header h3{margin:0}
.header>div{display:flex;
    gap:8px;
    flex-wrap:wrap}
.header a{background:#e4ebe5;
    color:var(--green);
    font-size:14px}
.panel,.booking-form,.settings-form,.user-card,.view-login>form,.view-admin_login>form{background:var(--paper);
    border:1px solid var(--line);
    border-radius:18px;
    padding:24px;
    margin-bottom:24px;
    box-shadow:0 4px 18px #213a3010}
.view-login>form,.view-admin_login>form{max-width:480px;
    margin-left:auto;
    margin-right:auto}
.view-login>h1,.view-login>.intro,.view-admin_login>h2{text-align:center}
.view-login form br,.view-admin_login form br{display:none}
.upcoming-container{margin-top:32px}
.booking-list{list-style:none;
    margin:0 0 28px;
    padding:0}
.booking-item{display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:18px 20px;
    border:1px solid var(--line);
    border-left:4px solid #b1bfb6;
    background:var(--paper);
    border-radius:12px;
    margin-bottom:12px}
.my-booking{border-left-color:var(--green);
    background:#edf5ed}
.booking-info{flex:1;
    min-width:0}
.date-badge{font-weight:700}
.time-badge{font-size:16px}
.owner-badge{font-size:14px;
    color:var(--muted);
    overflow-wrap:anywhere}
.delete-form{flex-shrink:0}
.btn-delete{width:auto;
    color:#8c302c;
    background:#f8e6e2;
    font-size:14px}
.btn-delete:hover{background:#f0d5ce}
.flash-message,.error,.success,.info-box,.availability{padding:16px 20px;
    border:1px solid #c4d9c9;
    border-radius:12px;
    margin-bottom:22px;
    background:#eaf3e8;
    color:#254f38}
.error,.flash-error{background:#fff0e8;
    border-color:#e0bca5;
    color:#813d24}
.info-box{font-size:14px}
.info-box p{margin:0}
.availability{background:#f1edda;
    border-color:#dcd2a9}
.availability>div:first-child{float:left;
    margin-right:14px;
    font-size:26px}
.quick-booking form{margin-top:10px}
.quick-booking button{justify-content:space-between;
    background:#ecf1e9;
    color:var(--green);
    border:1px solid #cbd8cd;
    text-align:left}
.quick-booking button:hover{background:#dde8da}
.empty-state{text-align:center;
    color:var(--muted);
    padding:24px;
    border:1px dashed #b6c5ba;
    border-radius:12px}
.admin-link,.back-link{display:block;
    text-align:center;
    padding:12px}
.install-help{margin:24px 0;
    padding:16px 20px;
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--muted);
    font-size:14px}
summary{cursor:pointer;
    font-weight:600;
    color:var(--green);
    min-height:32px}
footer{text-align:center;
    font-size:12px;
    color:var(--muted);
    margin-top:36px}
.skip-link{position:absolute;
    left:12px;
    top:-100px;
    background:white;
    padding:12px;
    z-index:2}
.skip-link:focus{top:12px}
@media(min-width:1000px){.view-admin_dashboard{display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 20px}
.view-admin_dashboard>.header,.view-admin_dashboard>h4,.view-admin_dashboard>.success,.view-admin_dashboard>.booking-list{grid-column:1/-1}
}
@media(max-width:480px){.app-shell{padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
    padding-top:max(20px,env(safe-area-inset-top))}
.panel,.booking-form,.settings-form,.user-card,.view-login>form,.view-admin_login>form{padding:20px}
.header{align-items:flex-start}
.booking-item{padding:16px;
    flex-wrap:wrap}
.booking-item>.delete-form{margin-left:auto}
.date-badge{font-size:15px}
.brand{margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){button:active{transform:none}
}


.view-login .booking-item {display:block}

.view-admin_dashboard .booking-item>div {min-width:0;
    overflow-wrap:anywhere}

.view-admin_dashboard .booking-item>form {flex-shrink:0}