.xrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 16px}
.xchip{border:2px solid var(--p100);background:#fff;color:var(--p700);border-radius:999px;padding:6px 16px;font:inherit;font-weight:700;cursor:pointer}
.xchip.on{background:var(--p700);color:#fff;border-color:var(--p700)}
.xcard{border:2px solid var(--p100);border-radius:16px;padding:16px;background:#fff;cursor:pointer;transition:box-shadow .2s}
.xcard:hover{box-shadow:0 6px 18px rgba(74,44,143,.12)}
.xcard b{display:block;font-size:18px;color:var(--p900)}.xcard small{color:var(--muted)}
.xform{display:grid;gap:10px;max-width:520px}.xform input,.xform select,.xform textarea{font:inherit;padding:10px 12px;border:2px solid var(--p100);border-radius:12px;width:100%;box-sizing:border-box}
.podium{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:10px;align-items:end;margin:16px 0}
.pod{border-radius:16px;padding:14px 8px;text-align:center;color:#fff;font-weight:900}
.pod span{display:block;font-size:30px}.pod small{display:block;font-weight:500;opacity:.9}
.p1{background:linear-gradient(#d9a400,#b58500);padding-top:28px}.p2{background:linear-gradient(#9aa3ad,#737d88)}.p3{background:linear-gradient(#c27a3b,#9a5a24)}
.qlog{background:var(--p50);border-radius:16px;padding:14px;margin:16px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.qlog input,.qlog select{font:inherit;padding:9px 12px;border:2px solid var(--p100);border-radius:12px}
.xfab{position:fixed;inset-inline-start:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;box-shadow:0 6px 18px rgba(74,44,143,.35)}
.xart p{line-height:2;white-space:pre-wrap}.xbtns{display:flex;gap:8px;flex-wrap:wrap}

/* dropdown menu from the 3-dot button */
.scrim{background:rgba(29,21,51,.14)}
.drawer{top:calc(60px + env(safe-area-inset-top,0px));bottom:auto;inset-inline-start:12px;width:min(88vw,290px);max-height:calc(100vh - 84px - env(safe-area-inset-top,0px));overflow-y:auto;border-radius:18px;padding:10px;box-shadow:0 14px 40px rgba(44,23,99,.25);transform:scale(.96) translateY(-8px);transform-origin:top right;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s}
.drawer.on{transform:none;opacity:1;visibility:visible}
.drawer .logo,.drawer .sp{display:none}
.drawer .nav{font-size:16px;padding:10px 14px}
.drawer .btn{width:100%;margin-top:8px}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:640px){.doors{grid-template-columns:1fr}}
.door{border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:6px}
.door b{font-size:20px;font-weight:900}.door p{margin:0 0 10px;opacity:.9;line-height:1.8}
.door.d1{background:linear-gradient(135deg,var(--p700),var(--p500));color:#fff}
.door.d1 .btn{background:#fff;color:var(--p700)}
.door.d2{background:var(--p50);border:2px solid var(--p100);color:var(--p900)}
.hstrip{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}.hstrip .xcard{flex:0 0 220px}

.xbackbar{position:sticky;top:calc(58px + env(safe-area-inset-top,0px));z-index:14;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);padding:6px 0}