*{box-sizing:border-box}
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#253044;background:#edf5ff}
html,body{margin:0;min-height:100%;background:#edf5ff}
body{background-image:radial-gradient(#cfe0fa 1px,transparent 1px);background-size:18px 18px}
button,input{font:inherit}
button{cursor:pointer}
.topbar{height:58px;background:#4b8ff2;color:#fff;display:flex;align-items:center;padding:0 14px;box-shadow:0 2px 8px #356db64d;position:sticky;top:0;z-index:20}
.brand{font-size:21px;font-weight:800;letter-spacing:-.5px}.brand span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0 2px;background:#fff;color:#4b8ff2;border-radius:50%;font-size:12px}.brand-mark{font-size:25px;margin-left:7px;opacity:.75}.lang{margin-left:auto;font-size:12px;font-weight:700;opacity:.85}
.app-shell{width:min(100%,760px);margin:0 auto;padding:28px 18px 48px}
.hero{text-align:center}.hero h1{font-size:23px;margin:0 0 8px;font-weight:800;letter-spacing:-.4px}.hero p{margin:0;color:#8090a9;font-size:14px}.counter-row{margin:12px auto 24px;display:flex;align-items:center;justify-content:center;gap:9px;color:#8290a8;font-size:13px}.counter-row strong{padding:6px 13px;border:2px solid #86b2fa;border-radius:999px;color:#3c4c65;background:#e7f0ff;font-size:13px}
.slots{width:min(100%,450px);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.slot{aspect-ratio:140/190;border:2px dashed #a9cdfc;border-radius:11px;background:rgba(255,255,255,.92);position:relative;overflow:hidden;transition:.18s;box-shadow:0 1px 4px #a7c4e91c}.slot:hover{border-color:#76aaf6;transform:translateY(-1px)}.slot.empty{display:flex;align-items:center;justify-content:center;flex-direction:column;color:#9db0ca}.plus{font-size:33px;line-height:1;color:#79aaf5;font-weight:300}.slot-number{font-size:11px;margin-top:8px}.slot img{width:100%;height:100%;display:block;object-fit:cover}.slot .slot-overlay{position:absolute;left:0;right:0;bottom:0;padding:30px 7px 7px;background:linear-gradient(transparent,rgba(15,23,42,.9));color:#fff;text-align:left}.slot-name{font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-costume{font-size:9px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.slot-remove{position:absolute;right:5px;top:5px;width:24px;height:24px;border:0;border-radius:50%;background:#ffffffdd;color:#34445b;font-weight:800;line-height:1}
.share-button{display:block;width:min(100%,450px);margin:25px auto 0;border:0;border-radius:12px;padding:13px 18px;background:#4b8ff2;color:#fff;font-size:14px;font-weight:800;box-shadow:0 7px 18px #4b8ff23d}.share-button:disabled{background:#b7c7dd;box-shadow:none;cursor:not-allowed}.share-hint{text-align:center;color:#8b9bb3;font-size:12px;margin:10px 0}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}.modal.hidden{display:none}.modal-backdrop{position:absolute;inset:0;background:#15223899;backdrop-filter:blur(3px)}.modal-card{position:relative;width:min(100%,760px);max-height:min(88vh,760px);background:#f8fbff;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px #172b4d33;overflow:hidden;display:flex;flex-direction:column}.modal-head{display:flex;align-items:center;gap:9px;padding:16px 16px 10px}.modal-head h2{font-size:18px;margin:0}.modal-head p{font-size:12px;color:#8a99b0;margin:3px 0 0}.icon-button{width:36px;height:36px;border:0;border-radius:10px;background:#e9f1fc;color:#41516b;font-size:20px}.icon-button.hidden{visibility:hidden}.search-wrap{padding:0 16px 12px}.search-wrap input{width:100%;border:1px solid #c9d8eb;border-radius:12px;padding:11px 13px;background:#fff;outline:none}.search-wrap input:focus{border-color:#7daef3;box-shadow:0 0 0 3px #7daef326}.picker-grid{overflow:auto;padding:0 16px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.picker-card{border:1px solid #d7e3f2;border-radius:12px;background:#fff;overflow:hidden;text-align:left;padding:0;box-shadow:0 1px 4px #8fa8c91a}.picker-card:hover{border-color:#85b5f8}.picker-image{width:100%;aspect-ratio:1/1.2;object-fit:cover;display:block}.picker-info{padding:8px}.picker-name{font-size:12px;font-weight:800;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.picker-meta{font-size:9px;color:#8b9ab0;margin-top:3px;display:flex;gap:5px;align-items:center}.badge{display:inline-block;padding:2px 5px;border-radius:999px;background:#fff0c7;color:#9a6c00;font-weight:700}.empty-state{grid-column:1/-1;text-align:center;padding:40px 15px;color:#8c9bb0;font-size:13px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);background:#26354b;color:#fff;padding:10px 15px;border-radius:999px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:430px){.app-shell{padding-left:12px;padding-right:12px}.slots{gap:9px}.hero h1{font-size:21px}.picker-grid{grid-template-columns:repeat(2,1fr)}}