:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;background:#101b29;color-scheme:dark;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{position:relative;isolation:isolate}
.background{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#18202c}.background::before{content:"";position:absolute;inset:-48px;background:linear-gradient(180deg,#08132055,#08132099),url("randki7-tlo-wlasne.jpg") center/cover no-repeat;filter:blur(10px)}
.header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 4vw}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:24px;font-weight:750;letter-spacing:-1px}.brand-icon{display:grid;place-items:center;background:#ffb18c;color:#142331;width:32px;height:35px;border-radius:9px 9px 9px 2px;font-size:24px}.header-note{display:flex;align-items:center;gap:12px;font-size:14px;color:#e1e6eb}.header-note span{border:1px solid #ffffff40;border-radius:8px;padding:5px 8px}
main{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:80px 20px}
.card{position:relative;width:min(460px,100%);padding:28px 30px 24px;text-align:center;background:linear-gradient(145deg,#242e40f0,#151d2bed);border:1px solid #ffffff28;border-radius:25px;box-shadow:0 24px 70px #0005,0 0 28px #c45ad61c,inset 0 1px 0 #ffffff14;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.card-meta{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.age-badge,.result-icon{display:inline-block;font-size:13px;font-weight:750;color:#ffd2b0;background:#ffb18c18;border:1px solid #ffb18c50;border-radius:8px;padding:5px 9px}
.result-icon{margin-bottom:12px}
.online-count{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:650;color:#d7f5de;background:#1f3a2c88;border:1px solid #4ade8055;border-radius:8px;padding:5px 9px}
.online-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 5px #4ade8088;animation:onlinePulse 1.8s ease-in-out infinite}
h1{font-size:clamp(1.45rem,3vw,1.8rem);line-height:1.2;letter-spacing:-.7px;margin:0 0 14px}.intro{font-size:16px;line-height:1.6;color:#cbd0da;margin:0 0 23px}
.actions{display:grid;gap:0}.button{appearance:none;width:100%;font:inherit;cursor:pointer;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:17px 18px;min-height:90px;border:1px solid transparent;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease}.button span{font-size:13px;letter-spacing:.6px;font-weight:750}.button strong{font-size:23px;line-height:1.3;letter-spacing:-.4px;font-weight:800}.primary{position:relative;overflow:hidden;min-height:108px;background:linear-gradient(110deg,#ef8065,#c54f82 70%,#b45bb8);color:#fff;box-shadow:0 10px 22px #db617528,inset 0 1px 0 #ffffff30}.secondary{background:linear-gradient(120deg,#ffffff0c,#ffffff04);border-color:#ffffff30;color:#fff;box-shadow:inset 0 1px 0 #ffffff0c}.secondary span{color:#c8ced9}@media(hover:hover){.button:hover{transform:translateY(-2px);filter:brightness(1.04)}.primary:hover{box-shadow:0 12px 26px #df778540,inset 0 1px 0 #ffffff40}.secondary:hover{border-color:#e4a39466;background-color:#ffffff08}}.button:active{transform:translateY(0) scale(.99)}.button:focus-visible,.brand:focus-visible{outline:3px solid #ffbc99;outline-offset:5px}
.divider{display:flex;align-items:center;gap:12px;color:#a9b1c2;font-size:13px;margin:15px 0}.divider::before,.divider::after{content:"";height:1px;background:#ffffff22;flex:1}
.disclosure{font-size:14px;line-height:1.55;color:#aeb8c7;margin:21px 0 18px}.footer{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:12px;padding:17px 4vw;font-size:12px;color:#cad1db}
.result h2{font-size:25px;line-height:1.25;margin:6px 0 15px}.result p{color:#c3cad6;font-size:16px;line-height:1.6}.back{min-height:50px;margin-top:20px;background:#ffb18c;color:#142331;font-weight:700}[hidden]{display:none!important}
@media(max-width:600px){.header{padding:16px 20px}.brand{font-size:21px}.header-note{font-size:0;gap:0}.header-note span{font-size:13px}.card{padding:25px 24px 23px;border-radius:23px}main{padding:72px 16px 56px}.footer{justify-content:center;padding:15px 16px}.footer>span:last-child{display:none}.background::before{background-position:center}}
@media(max-height:700px){.card{padding:20px 24px}.card-meta{margin-bottom:8px}h1{margin-bottom:10px}.intro{margin-bottom:16px}.primary{min-height:88px}.secondary{min-height:76px}.button{padding:12px 16px}.divider{margin:11px 0}.disclosure{margin:15px 0 14px}main{padding-top:65px;padding-bottom:48px}.header{padding-top:14px;padding-bottom:14px}}
@media(max-height:520px) and (min-width:600px){.card-meta{display:none}.intro br,.disclosure br{display:none}.card{width:min(610px,100%);padding:18px 24px}.actions{grid-template-columns:1fr 30px 1fr;align-items:stretch}.divider{margin:0;justify-content:center}.divider::before,.divider::after{display:none}.primary,.secondary{min-height:86px}.intro{margin-bottom:12px}.disclosure{margin:12px 0 12px}}
@media(prefers-reduced-motion:reduce){.button{transition:none;transform:none!important}}

@keyframes onlinePulse{0%,100%{opacity:1}50%{opacity:.5}}
.message-banner{appearance:none;width:100%;font:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin-top:2px;padding:11px 18px;border-radius:999px;background:linear-gradient(90deg,#ff5d8f,#e14db8 48%,#9b4dff);border:1px solid #ffffff40;color:#fff;text-align:center;font-size:14px;font-weight:650;line-height:1.35;opacity:1;transform:translateY(0) scale(1);transition:opacity .4s ease,transform .4s ease,filter .2s ease;box-shadow:0 6px 18px #9b4dff33}
.message-banner strong{font-weight:800}
.message-banner:hover{filter:brightness(1.05)}
.message-banner.message-out{opacity:0;transform:translateY(10px) scale(.96);pointer-events:none}
.message-bell,.message-symbol{flex:none;font-size:16px}
#message-text{min-width:0}
.button.hint-glow{border-color:#86efac !important;box-shadow:0 0 0 1px #86efac77,0 0 16px #4ade8077 !important}
@media(prefers-reduced-motion:reduce){.message-banner,.online-dot{animation:none;transition:none;transform:none}}