@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');
:root { --ink:#22324D; --muted:#4A5568; --pink:#D83C82; --blue:#50A0D4; --yellow:#E1C643; --green:#4EAE68; --grey:#F2F4F7; }
* { box-sizing: border-box; }
body { margin:0; background:#fff; color:var(--ink); font-family:Quicksand,Nunito,Poppins,sans-serif; font-weight:500; line-height:1.45; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
[hidden] { display:none !important; }
.stripe { display:grid; grid-template-columns:repeat(4,1fr); height:8px; }
.stripe i:nth-child(1){background:var(--pink)} .stripe i:nth-child(2){background:var(--blue)} .stripe i:nth-child(3){background:var(--yellow)} .stripe i:nth-child(4){background:var(--green)}

/* Manager */
.phone { max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
.head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px 10px; }
.head img { width:130px; height:57px; object-fit:contain; }
.head div { font-weight:700; text-align:right; line-height:1.25; }
main.screen { padding:10px 20px 20px; display:flex; flex-direction:column; gap:14px; flex-grow:1; }
h1 { margin:0; font-size:30px; line-height:1.2; }
.lead { margin:0; font-size:19px; }
.tile { width:100%; min-height:84px; padding:12px 20px; border-radius:18px; border:3px solid; font-size:23px; font-weight:700; text-align:left; }
.pink { background:#F4D6E8; border-color:var(--pink); } .blue { background:#CBE8FF; border-color:var(--blue); }
.yellow { background:#FFF7C7; border-color:var(--yellow); } .green { background:#D9F7E3; border-color:var(--green); }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ghost { min-height:44px; padding:0 14px; border-radius:22px; border:2px solid var(--ink); background:#fff; font-size:15px; font-weight:700; }
.dateBar { background:var(--grey); border-radius:14px; padding:8px 8px 8px 16px; font-size:18px; font-weight:600; }
.link { min-height:44px; padding:0 12px; border:0; background:none; font-size:15px; font-weight:700; text-decoration:underline; }
label.field { display:flex; flex-direction:column; gap:6px; font-weight:600; }
.field input,.field select { min-height:48px; padding:0 12px; border-radius:12px; border:2px solid var(--ink); background:#fff; width:100%; }
.count { border-radius:20px; padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.count.free { background:#D9F7E3; } .count.paid { background:#FFF7C7; } .count.staff { background:#CBE8FF; }
.count label b { display:block; font-size:21px; line-height:1.2; }
.count label span { display:block; font-size:15px; color:#3A4557; }
.stepper { display:grid; grid-template-columns:68px minmax(0,1fr) 68px; gap:10px; align-items:center; }
.stepper button { height:68px; border-radius:34px; border:2px solid var(--ink); background:#fff; font-size:34px; font-weight:700; }
.stepper button.plus { background:var(--ink); color:#fff; }
.stepper input { height:68px; width:100%; border-radius:16px; border:2px solid var(--ink); background:#fff; font-size:38px; font-weight:700; text-align:center; -moz-appearance:textfield; }
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.primary { width:100%; min-height:66px; border:0; border-radius:33px; background:var(--pink); font-size:22px; font-weight:700; color:#fff; }
.primary:disabled { opacity:.6; }
.secondary { width:100%; min-height:56px; border:2px solid var(--ink); border-radius:28px; background:#fff; font-size:18px; font-weight:700; }
.note { margin:0; font-size:15px; color:var(--muted); text-align:center; }
.error { background:#FDE8E8; border:2px solid #B42318; border-radius:14px; padding:12px 14px; font-weight:600; }
.warn { background:#FFF7C7; border-radius:14px; padding:12px 14px; font-weight:600; }
.done { align-items:center; text-align:center; padding-top:30px; }
.tick { width:112px; height:112px; border-radius:56px; background:#B1FFCA; display:flex; align-items:center; justify-content:center; }
.summary { width:100%; background:var(--grey); border-radius:20px; padding:16px 20px; display:flex; flex-direction:column; gap:10px; font-size:19px; font-weight:600; }
.summary div { display:flex; justify-content:space-between; }
.foot { padding:10px 20px 14px; text-align:center; font-size:13px; color:var(--muted); }

/* Office */
.office { background:#F7F8FA; min-height:100vh; }
.topbar { background:#fff; padding:12px 32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.topbar .brand { display:flex; flex-wrap:wrap; align-items:center; gap:20px; font-size:20px; font-weight:700; }
.topbar img { width:130px; height:57px; object-fit:contain; }
.actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.btn { min-height:48px; padding:0 22px; border-radius:24px; border:2px solid var(--ink); background:#fff; font-size:17px; font-weight:700; }
.btn.go { border:0; background:var(--pink); color:#fff; }
.wrap { max-width:1160px; margin:0 auto; padding:28px 24px 40px; display:flex; flex-direction:column; gap:24px; }
.card { background:#fff; border-radius:20px; padding:24px; }
.card h1,.card h2 { margin:0; } .card h1 { font-size:26px; } .card h2 { font-size:24px; }
.cardHead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.small { font-size:15px; font-weight:600; color:var(--muted); }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:17px; }
th,td { padding:14px 16px; text-align:right; white-space:nowrap; }
th:first-child,td:first-child { text-align:left; font-weight:700; }
thead th { font-size:14px; font-weight:700; border-bottom:2px solid var(--ink); }
tbody td { border-bottom:1px solid #DDE2E9; }
tr.missing { background:#FFF7C7; }
.formGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; align-items:end; margin-top:12px; }
.login { max-width:420px; margin:60px auto; display:flex; flex-direction:column; gap:16px; }
.login img { width:150px; }
.clubRow { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; align-items:end; padding:14px 0; border-bottom:1px solid #DDE2E9; }
.clubRow h3 { margin:0; font-size:18px; align-self:center; }
.check { flex-direction:row !important; align-items:center; gap:8px; min-height:48px; }
.check input { width:22px; min-height:22px; height:22px; }
@media (max-width:600px) { .topbar { padding:12px 16px; } .wrap { padding:16px; } .card { padding:16px; } }
.contents { display:contents; }
.card h2.sub { margin-top:24px; font-size:20px; }