:root { --ink:#173b33; --muted:#64736f; --line:#d9e3df; --primary:#0b5d56; --paper:#f8faf9; }
* { box-sizing:border-box; letter-spacing:0; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:var(--primary); text-underline-offset:3px; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:1px solid var(--primary); color:white; background:var(--primary); border-radius:6px; padding:10px 16px; min-height:42px; }
button.secondary { background:white; color:var(--primary); border-color:var(--line); }
button:disabled { opacity:.55; cursor:wait; }
button.danger { color:#a13b34; background:#fff; border-color:#e7bdb9; }
input,select,textarea { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px; color:var(--ink); background:#fff; min-height:44px; min-width:0; }
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible { outline:2px solid #3e9882; outline-offset:2px; }
label { display:grid; gap:7px; font-weight:600; font-size:14px; }
label.check { display:flex; align-items:center; gap:10px; line-height:1.6; font-weight:400; }
.check input { width:18px; min-height:18px; height:18px; flex:none; }
[hidden] { display:none !important; }
.family-header { background:white; border-bottom:1px solid var(--line); padding:18px max(20px,calc((100% - 1100px)/2)); display:flex; gap:20px; align-items:center; justify-content:space-between; }
.family-header nav { display:flex; flex-wrap:wrap; gap:18px; }
.family-header a { text-decoration:none; }
.family-header [aria-current] { font-weight:700; }
.family-brand { font-size:20px; font-weight:700; white-space:nowrap; }
.family-page { max-width:1100px; padding:30px 20px 70px; margin:auto; }
.family-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
h1 { font-size:30px; margin:8px 0; }
h2 { font-size:22px; margin:0 0 12px; }
h3 { font-size:18px; margin:0; }
.eyebrow,.muted { color:var(--muted); font-size:14px; line-height:1.7; }
.family-form { display:grid; gap:18px; padding:20px 0; }
.family-form > button { justify-self:start; }
.narrow { max-width:480px; }
.family-inline { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:end; }
.family-inline button { justify-self:start; }
.family-tabs { display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line); padding-bottom:10px; margin:22px 0; }
.family-tabs button { background:transparent; color:var(--muted); border-color:transparent; }
.family-tabs button.active { color:var(--primary); background:#e7f2ed; font-weight:700; }
.family-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; }
.booking-list { display:grid; gap:14px; }
.booking-record { border:1px solid var(--line); border-radius:8px; background:white; padding:20px; overflow-wrap:anywhere; }
.booking-record p { line-height:1.65; margin:9px 0; }
.booking-record .booking-head { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.booking-state { background:#e4f3ea; color:#185939; padding:5px 10px; border-radius:4px; font-size:13px; white-space:nowrap; }
.booking-state.waiting { background:#fff0d8; color:#885b17; }
.booking-state.cancelled,.booking-state.expired { background:#ebedef; color:#646970; }
.booking-code { font-family:ui-monospace,monospace; font-size:14px; }
.family-details { margin-top:24px; border-top:1px solid var(--line); padding:20px 0; }
summary { cursor:pointer; font-weight:600; }
.guest-booking { margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }
#guestBookingResult { margin-top:20px; }
#familyMessage { color:var(--primary); line-height:1.7; min-height:24px; overflow-wrap:anywhere; }
#familyMessage.error { color:#a13b34; }
.family-member { display:grid; grid-template-columns:minmax(0,1fr) 110px auto; gap:10px; align-items:end; margin-bottom:12px; }
.family-notice { padding:20px 0; border-bottom:1px solid var(--line); }
.family-notice.unread { border-left:3px solid #da9367; padding-left:16px; }
.family-notice p { line-height:1.7; }
dialog { max-width:480px; width:calc(100% - 32px); border:1px solid var(--line); border-radius:8px; padding:24px; }
dialog::backdrop { background:#173b3355; }
@media(max-width:600px) { .family-header { align-items:start; flex-direction:column; gap:14px; } .family-inline { grid-template-columns:1fr; } .family-heading { flex-wrap:wrap; } .booking-record .booking-head { flex-direction:column; } .family-member { grid-template-columns:minmax(0,1fr) 80px; } .family-member button { grid-column:1 / -1; justify-self:start; } h1 { font-size:28px; } }