:root{--bg:#fbfbfd;--card:#fff;--ink:#1d1d1f;--mute:#6e6e73;--line:#e5e5ea;--blue:#0071e3;--blue2:#0062c4;--green:#1d9f4f;--orange:#e08a00;--red:#d70015;--r:20px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","Heebo",Arial,sans-serif;line-height:1.55}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:12px max(20px,env(safe-area-inset-right));background:rgba(251,251,253,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.top a{color:var(--ink);text-decoration:none;font-weight:600}.top nav a{font-weight:400;color:var(--blue)}
.logo{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--ink);margin-inline-end:6px}
main{max-width:1000px;margin:0 auto;padding:28px 20px 60px;animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
h1{font-size:clamp(30px,6vw,52px);letter-spacing:-.02em;line-height:1.1;margin:.2em 0 .3em}
h2{font-size:clamp(22px,4vw,30px);margin:1.6em 0 .6em;letter-spacing:-.01em}h3{margin:.2em 0}
.lead{color:var(--mute);font-size:clamp(17px,2.5vw,21px);max-width:640px}
.hero{padding:30px 0 10px;text-align:center}.hero .lead{margin:0 auto}
.btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:22px 0}
.btn{appearance:none;border:0;border-radius:980px;padding:12px 24px;font:inherit;font-size:17px;cursor:pointer;background:var(--blue);color:#fff;text-decoration:none;display:inline-block;transition:.2s}
.btn:hover{background:var(--blue2)}.btn.sec{background:#e8e8ed;color:var(--ink)}.btn.sec:hover{background:#dcdce1}.btn.sm{padding:6px 14px;font-size:14px}.btn.danger{background:#fff;color:var(--red);border:1px solid var(--line)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.card{background:var(--card);border-radius:var(--r);padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.05),0 8px 30px rgba(0,0,0,.04);transition:transform .25s}
.grid .card:hover{transform:translateY(-2px)}
.num{font-size:54px;font-weight:700;letter-spacing:-.03em;line-height:1}.num small{display:block;margin-top:6px;font-size:15px;color:var(--mute);font-weight:400;letter-spacing:0}
.full{color:var(--red);font-weight:600}
.bar{height:10px;border-radius:6px;background:#ececf0;overflow:hidden;display:flex;margin:14px 0 8px;direction:rtl}
.bar i{display:block;height:100%;transition:width .6s}.b-used{background:#1d1d1f}.b-proc{background:var(--blue)}.b-res{background:var(--orange)}
.legend{display:flex;gap:12px;flex-wrap:wrap;color:var(--mute);font-size:13px}.legend b{font-weight:600;color:var(--ink)}
.seg{display:inline-flex;background:#e8e8ed;border-radius:980px;padding:3px;margin:8px 0}.seg button{border:0;background:none;padding:6px 18px;border-radius:980px;font:inherit;cursor:pointer}.seg .on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.steps .card:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;margin-bottom:10px;font-weight:600}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:640px){form .row{grid-template-columns:1fr}}
label{display:block;font-size:14px;color:var(--mute);margin:12px 0 4px}label .req{color:var(--red)}
input,select,textarea{width:100%;font:inherit;font-size:17px;padding:12px 14px;border:1px solid #d2d2d7;border-radius:12px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(0,113,227,.25);border-color:var(--blue)}
input.miss,select.miss{border-color:var(--orange);background:#fffaf0}
.pill{display:inline-block;padding:3px 12px;border-radius:980px;font-size:13px;font-weight:600;background:#eee;color:#444;white-space:nowrap}
.s-reservation{background:#fff3d6;color:#8a5a00}.s-missing{background:#ffe4e1;color:#b3261e}.s-submitted{background:#e1efff;color:#0b5cc4}.s-approved{background:#e6e1ff;color:#4a35b8}.s-completed{background:#dcf5e5;color:#17703b}.s-cancelled{background:#eee;color:#777}
.notice{padding:14px 18px;border-radius:14px;background:#fff6e5;color:#7a5200;margin:14px 0}.notice.err{background:#ffe9e7;color:#9c1c14}.notice.ok{background:#e4f6ea;color:#17703b}
.stores img{width:100%;border-radius:var(--r);border:1px solid var(--line);background:#fff}
table{width:100%;border-collapse:collapse;font-size:15px}th,td{text-align:start;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}th{color:var(--mute);font-weight:500;font-size:13px}
tr.click{cursor:pointer}tr.click:hover{background:#f5f5f7}.tw{overflow-x:auto}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}.filters input,.filters select{padding:9px 10px;font-size:15px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.tabs button{border:0;background:#e8e8ed;border-radius:980px;padding:8px 18px;font:inherit;cursor:pointer}.tabs .on{background:var(--ink);color:#fff}
.hist li{margin:6px 0;color:var(--mute);font-size:14px}.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px}.kv dt{color:var(--mute)}.kv dd{margin:0;word-break:break-word}
.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline input{width:90px;padding:8px}
footer{text-align:center;color:var(--mute);font-size:13px;padding:30px}
#toast{position:fixed;bottom:24px;inset-inline:0;margin:auto;width:max-content;max-width:90vw;background:#1d1d1f;color:#fff;padding:12px 22px;border-radius:980px;opacity:0;transform:translateY(20px);transition:.3s;pointer-events:none}#toast.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}