.okads{margin:10px 0 12px;padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.okads-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.okads-head h3{margin:0;font-size:16px}.okads-head small{color:var(--muted);white-space:nowrap}
.okads-list{display:grid;gap:8px;margin-bottom:10px}
.okad{display:block;position:relative;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(127,160,180,.07);color:var(--text);font:inherit;cursor:pointer}
.okad-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.okad-top b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okad-badge{flex:none;font-size:11px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.okad-text{margin:6px 0 8px;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.okad.open .okad-text,.okad-text.open{display:block;-webkit-line-clamp:unset}
.okad-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.okad-meta .btn{margin-left:auto;padding:6px 12px;font-size:13px;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okad-flag{border:0;background:none;color:var(--muted);font-size:16px;padding:4px 6px;cursor:pointer}
.okad.free{width:100%;border-style:dashed;color:var(--muted);text-align:center;padding:9px 12px;font-size:13px}
.okad-mine{display:block;width:100%;margin-top:8px;border:0;background:none;color:var(--mint);font:inherit;font-size:13px;text-align:center;cursor:pointer}
#okAdDialog{max-width:440px;width:calc(100% - 28px);max-height:88dvh;overflow:auto;border:1px solid var(--line);border-radius:20px;padding:18px;background:var(--card);color:var(--text)}
#okAdDialog::backdrop{background:rgba(0,0,0,.6)}
#okAdDialog h3{margin:0 0 8px}
.okad-x{float:right;padding:6px 12px}
.okad-form{display:grid;gap:10px}
.okad-f{display:grid;gap:4px;font-size:13px;color:var(--muted)}
.okad-f input,.okad-f textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.okad-count{display:block;text-align:right;color:var(--muted)}
.okad-rules{font-size:13px;color:var(--muted)}.okad-rules ul{padding-left:18px;margin:6px 0}.okad-rules li{margin:4px 0}
.okad-agree{display:flex;gap:8px;align-items:flex-start;font-size:14px}.okad-agree input{width:auto;margin-top:3px}
.okad-err{margin:0;color:var(--danger);font-size:14px;min-height:1em}
.okad-amount{font-size:22px;color:var(--mint)}
.okad-addr{display:block;word-break:break-all;padding:10px;border:1px dashed var(--line);border-radius:12px;margin:8px 0;font-size:14px;user-select:all}
.okad-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}.okad-row .btn{flex:1}
.okad-notes{padding-left:18px;font-size:13px;color:var(--muted)}.okad-notes li{margin:5px 0}
.okad-wait{margin:10px 0;font-size:14px}.okad-stat{font-size:15px}
#okAdDialog details{margin:8px 0}#okAdDialog details input{width:100%;box-sizing:border-box;margin:6px 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);font-size:16px}
#okMapSlot:empty{display:none}

/* v71: clearly labelled fictional examples and touch-friendly vacant slot */
.okad-example{width:100%;min-height:112px;box-sizing:border-box;touch-action:manipulation}
.okad-example .okad-text{display:block;-webkit-line-clamp:unset;color:var(--text)}
.okad-example-note{display:block;font-size:12px;line-height:1.45;color:var(--muted)}
.okad-example .okad-top{align-items:flex-start;flex-wrap:wrap}
.okad-example .okad-top b{white-space:normal;line-height:1.4}
.okad-example .okad-badge{color:var(--text);border-style:dashed}
.okad.free{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:112px;color:var(--text);border-width:2px;touch-action:manipulation}
.okad-free-icon{font-size:28px;line-height:1;color:var(--text)}
.okad-free-price{font-size:13px;color:var(--text)}
.okad-example:focus-visible,.okad.free:focus-visible{outline:3px solid var(--text);outline-offset:3px}

.okad-event{border-color:#a78bfa;background:linear-gradient(135deg,#8b5cf619,#22d3ee12)}.okad-event h4{margin:10px 0 6px;font-size:16px}.okad-event .okad-text{display:block;overflow:visible;-webkit-line-clamp:unset;max-height:none}.okad-event-when,.okad-event-venue{font-size:12px;line-height:1.5;margin:6px 0}.okad-event-links{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.okad-event .btn{font-size:12px!important;min-height:44px}.okad-event>.btn{width:100%;margin-top:8px}

/* okok-personal-invitation-v1 */
html body #okAds .okads-list{margin-bottom:0}
html body .hint.okad-oki-underlay-hidden{opacity:0;pointer-events:none}
html body #okAds .okad-invitation-wrap{--oki-rise:88px;position:relative;padding:0;isolation:isolate;min-width:0;scroll-margin-block:110px}
html body #okAds .okad-oki-peek{position:absolute;left:0;right:0;top:calc(-1 * var(--oki-rise));height:var(--oki-rise);overflow:hidden;pointer-events:none;z-index:2}
html body #okAds .okad-oki-peek[hidden]{display:none}
html body #okAds .okad-oki-rig{--oki-look-x:0;--oki-look-y:0;position:absolute;right:22px;top:0;height:calc(var(--oki-rise) + 6px);aspect-ratio:384/324;display:block;pointer-events:none;transform:translateY(105%);animation:okad-oki-rise .6s cubic-bezier(.2,.8,.2,1) forwards,okad-oki-retreat .5s 6.4s ease-in forwards}
html body #okAds :is(.okad-oki-portrait,.okad-oki-head,.okad-oki-hand){position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;pointer-events:none;background-image:var(--oki-portrait);background-size:100% 100%;background-repeat:no-repeat}
html body #okAds .okad-oki-portrait{clip-path:polygon(36% 70%,65% 70%,70% 77%,70% 94%,30% 94%,31% 77%)}
html body #okAds .okad-oki-head{clip-path:polygon(0 0,100% 0,100% 71.5%,0 71.5%);transform-origin:50% 69%;translate:calc(var(--oki-look-x) * 2px) calc(var(--oki-look-y) * 1px);rotate:calc(var(--oki-look-x) * 5deg);transition:translate .16s ease-out,rotate .16s ease-out;animation:okad-oki-greet 5.2s .6s ease-in-out both}
html body #okAds .okad-oki-hand-left{clip-path:polygon(0 71.5%,36% 71.5%,40% 86%,42% 100%,0 100%);transform-origin:34% 74%;animation:okad-oki-point-left 1.15s 1.3s ease-in-out 2}
html body #okAds .okad-oki-hand-right{clip-path:polygon(65% 71.5%,100% 71.5%,100% 100%,61% 100%,60% 86%);transform-origin:66% 74%;animation:okad-oki-point-right 1.15s 1.45s ease-in-out 2}
html body #okAds .okad-oki-speech{position:absolute;left:0;right:140px;top:4px;padding:7px 9px;border:1px solid var(--toy-rim);border-radius:15px 15px 3px 15px;background:var(--card);color:var(--text);box-shadow:inset 0 1px 0 #ffffff66,0 4px 10px #0002;font-size:12px;font-weight:750;line-height:1.35;opacity:0;animation:okad-oki-say .25s .45s ease forwards}
html body #okAds button.okad-oki-close{position:absolute;right:0;top:0;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;font-size:22px;pointer-events:auto;z-index:2}
@keyframes okad-oki-rise{to{transform:translateY(0)}}
@keyframes okad-oki-retreat{to{transform:translateY(108%)}}
@keyframes okad-oki-greet{0%,100%{transform:rotate(0deg)}12%{transform:rotate(-4deg)}25%,68%{transform:rotate(0deg)}44%{transform:rotate(3deg)}78%{transform:rotate(-2deg)}}
@keyframes okad-oki-point-left{0%,100%{transform:rotate(0deg) translateY(0)}45%,62%{transform:rotate(-9deg) translateY(3px)}}
@keyframes okad-oki-point-right{0%,100%{transform:rotate(0deg) translateY(0)}45%,62%{transform:rotate(9deg) translateY(3px)}}
@keyframes okad-oki-say{to{opacity:1}}
html body #okAds .okad.okad-invitation{
 position:relative;z-index:1;width:100%;
 display:grid;grid-template-columns:52px minmax(0,1fr) 30px;gap:12px;align-items:center;
 min-height:128px;padding:18px 16px;box-sizing:border-box;text-align:left;isolation:isolate;overflow:hidden;
 border:1px solid var(--toy-rim)!important;border-radius:20px;
 background:radial-gradient(ellipse at 0% 100%,#57efc329,transparent 65%),radial-gradient(ellipse at 100% 0%,#ff936b33,transparent 65%),linear-gradient(135deg,var(--card),var(--bg))!important;
 color:var(--text)!important;box-shadow:inset 0 2px 1px #ffffff66,inset 0 -2px 1px #00000026,0 8px 18px #00000024!important;
 transition:transform .18s ease,border-color .18s ease;
}
html body #okAds .okad-invitation::before{content:'';position:absolute;inset:7px;border:1px solid #ffffff24;border-radius:14px;pointer-events:none;z-index:-1}
html body #okAds .okad-invite-icon{position:relative;display:grid;place-items:center;width:48px;height:44px;border-radius:15px;transform:rotate(-8deg);font-size:21px;letter-spacing:1px;font-weight:800;color:#082c29;background:radial-gradient(ellipse at 25% 0%,#ffffffcc,transparent 70%),linear-gradient(145deg,#98ffe0,#28c8ae);box-shadow:inset 0 2px 1px #ffffffcc,inset 0 -3px 3px #048e8980,0 6px 10px #00000026}
html body #okAds .okad-invite-icon::after{content:'';position:absolute;width:12px;height:12px;left:10px;bottom:-5px;background:#38d1b6;clip-path:polygon(0 0,100% 0,0 100%)}
html body #okAds .okad-invite-copy{display:grid;gap:6px;min-width:0}
html body #okAds .okad-invite-copy b{font-size:19px;line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere}
html body #okAds .okad-invite-note{font-size:12px;line-height:1.45;font-weight:500;color:var(--muted);overflow-wrap:anywhere}
html body #okAds .okad-invite-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(145deg,#ffc18f,#ff8b71);box-shadow:inset 0 1px 1px #ffffffb3,0 3px 7px #00000026;color:#40241e;font-size:20px;font-weight:700}
@media(hover:hover){html body #okAds .okad-invitation:hover{transform:translateY(-2px)}}
html body #okAds .okad-invitation:active{transform:scale(.985)}
@media(max-width:350px){html body #okAds .okad.okad-invitation{grid-template-columns:40px minmax(0,1fr) 26px;gap:9px;padding:16px 12px}html body #okAds .okad-invite-icon{width:37px;height:38px;font-size:18px;border-radius:12px}html body #okAds .okad-invite-copy b{font-size:17px}html body #okAds .okad-invite-arrow{width:26px;height:26px;font-size:18px}}
@media(prefers-reduced-motion:reduce){html body #okAds .okad.okad-invitation{transition:none;transform:none}html body #okAds :is(.okad-oki-rig,.okad-oki-head,.okad-oki-hand){animation:none;transition:none;transform:none;translate:none;rotate:none}html body #okAds .okad-oki-speech{animation:none;opacity:1}}
