*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f2eb;color:#191919;font-family:Inter,system-ui,-apple-system,sans-serif}button,a{font:inherit}button{touch-action:manipulation}.app{max-width:760px;margin:auto;padding:18px 16px 104px}.top{display:flex;justify-content:space-between;align-items:center;padding:4px 0 18px}.brand{display:flex;align-items:center;gap:10px;font-weight:1000;letter-spacing:-.04em}.mark{width:42px;height:42px;border-radius:14px;background:#17181b;color:#f5ca69;display:grid;place-items:center;box-shadow:0 10px 24px #17181b20}.tag{font-size:.7rem;color:#777;text-decoration:none}.hero{background:linear-gradient(145deg,#17181b,#252833);color:white;border-radius:30px;padding:30px 24px;position:relative;overflow:hidden;box-shadow:0 28px 60px #17181b24}.hero:after{content:'✦';position:absolute;right:-16px;bottom:-58px;font-size:11rem;color:#ffffff08;animation:floatStar 5s ease-in-out infinite}.hero small{font-weight:900;letter-spacing:.14em;color:#f5ca69}.hero h1{font-size:clamp(3rem,12vw,5.2rem);line-height:.86;letter-spacing:-.075em;margin:12px 0 16px}.hero p{max-width:520px;color:#c6c6c6;line-height:1.55}.switcher{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 4px}.switcher button,.program-tab{border:0;border-radius:14px;padding:12px;font-weight:900;background:#e7e1d5;color:#6f685d;cursor:pointer;transition:.2s ease}.switcher button.active,.program-tab.active{background:#17181b;color:#fff;box-shadow:0 8px 20px #17181b20}.screen,.program-panel{display:none}.screen.active,.program-panel.active{display:block;animation:screenIn .28s ease}.section{padding:28px 0}.section.compact{padding-top:6px}.section h2{font-size:1.8rem;letter-spacing:-.05em;margin:0 0 8px}.sub{color:#777;line-height:1.5;margin:0 0 18px}.program-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:4px}.program-tab{white-space:nowrap}.loyalty-card{background:linear-gradient(145deg,#5a2ea6,#7b4cce);color:white;border-radius:26px;padding:22px;box-shadow:0 24px 60px #5a2ea62c;position:relative;overflow:hidden}.loyalty-card.cafe-card{background:linear-gradient(145deg,#6d452e,#a66a43);box-shadow:0 24px 60px #6d452e2d}.loyalty-card.pet-card{background:linear-gradient(145deg,#245b49,#3e8a70);box-shadow:0 24px 60px #245b492c}.loyalty-card:after{content:'';position:absolute;width:170px;height:170px;border-radius:50%;right:-70px;top:-90px;background:#ffffff0d}.loyalty-card small{opacity:.8;font-weight:800}.loyalty-card h3{font-size:1.6rem;margin:8px 0 4px}.progress{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0}.progress.seven{grid-template-columns:repeat(4,1fr)}.progress.five{grid-template-columns:repeat(5,1fr)}.stamp{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#ffffff15;border:1px solid #ffffff30;font-weight:1000;transition:.2s ease}.stamp.on{background:#f5ca69;color:#35215e;border-color:#f5ca69;transform:scale(1.04);box-shadow:0 7px 18px #2e175633}.cafe-card .stamp.on{color:#53301f}.pet-card .stamp.on{background:#d9f38a;color:#1d4d3d;border-color:#d9f38a}.reward{display:flex;justify-content:space-between;gap:16px;align-items:center;background:#fff;border-radius:20px;padding:18px;border:1px solid #0000000e;box-shadow:0 12px 30px #00000008}.reward b{display:block}.reward span{color:#777;font-size:.82rem}.pill{padding:8px 10px;border-radius:999px;background:#f0e8ff;color:#6032a5;font-size:.72rem;font-weight:900}.cafe-pill{background:#f4e6db;color:#75482f}.pet-pill{background:#e5f4eb;color:#245b49}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.card{background:#fff;border:1px solid #0000000e;border-radius:20px;padding:18px;transition:.18s ease}.card:hover{transform:translateY(-2px);box-shadow:0 10px 24px #0000000b}.card h3{margin:0 0 6px}.card p{color:#777;font-size:.84rem;line-height:1.45;margin:0}.admin{background:#151d24;color:#fff;border-radius:26px;padding:22px;box-shadow:0 22px 50px #151d2425}.admin p{color:#b8c0c6}.customer{background:#202b35;border-radius:18px;padding:16px;margin:14px 0}.customer small{color:#8fa0ad}.customer strong{display:block;font-size:1.1rem;margin:4px 0}.row{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:13px;padding:12px 14px;font-weight:900;cursor:pointer;transition:.18s ease}.btn:active{transform:scale(.97)}.btn.primary{background:#f5ca69;color:#1d2329}.btn.ghost{background:#ffffff12;color:white;border:1px solid #ffffff18}.scan-box{margin-top:14px;padding:16px;border:1px dashed #ffffff25;border-radius:16px;color:#c8d0d6;font-size:.84rem}.scan-code{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:12px 13px;border-radius:13px;background:#0f151b}.scan-code b{letter-spacing:.14em;color:#f5ca69}.history{display:grid;gap:10px}.event{display:flex;justify-content:space-between;gap:14px;background:#fff;border-radius:17px;padding:15px;border:1px solid #0000000d}.event span{color:#777;font-size:.8rem}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);background:#17181b;color:#fff;padding:12px 16px;border-radius:14px;font-size:.82rem;font-weight:800;opacity:0;pointer-events:none;transition:.25s ease;z-index:30;box-shadow:0 15px 34px #0003}.toast.show{opacity:1;transform:translate(-50%,0)}.bottom{position:fixed;bottom:0;left:0;right:0;background:#f5f2ebe8;backdrop-filter:blur(14px);border-top:1px solid #00000010}.bottom div{max-width:760px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);padding:11px}.bottom a{text-align:center;text-decoration:none;color:#6d665c;font-size:.7rem;font-weight:900}.bottom strong{display:block;font-size:1.1rem;margin-bottom:2px}@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes floatStar{50%{transform:translateY(-8px) rotate(8deg)}}@media(max-width:520px){.grid{grid-template-columns:1fr}.progress{gap:7px}.hero{padding:27px 20px}.reward{align-items:flex-start;flex-direction:column}.pill{align-self:flex-start}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}