/* Quick Menu link-page — 6 templates. Set data-t on .qm. Vars: --b blur, --d dim, --a accent */
.qm{--b:18px;--d:.35;--a:#c9a45c;position:relative;overflow:hidden;min-height:inherit;color:#fff;font-family:"Tajawal","Cairo",system-ui,sans-serif;isolation:isolate}
.qm *{box-sizing:border-box}
.qm-bg{position:absolute;inset:-4%;z-index:-3;background:#20303a center/cover no-repeat;animation:qm-drift 28s ease-in-out infinite alternate}
.qm-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,calc(var(--d)*.6)),rgba(0,0,0,var(--d)) 45%,rgba(0,0,0,calc(var(--d)*1.5)))}
.qm-aurora{display:none;position:absolute;inset:0;z-index:-1;overflow:hidden}
.qm-aurora i{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;filter:blur(60px);opacity:.55;animation:qm-blob 16s ease-in-out infinite alternate}
.qm-aurora i:nth-child(1){background:var(--a);top:-15%;left:-20%}
.qm-aurora i:nth-child(2){background:#5b6cff;bottom:5%;right:-25%;animation-delay:-5s}
.qm-aurora i:nth-child(3){background:#ff5fa2;top:40%;left:15%;animation-delay:-9s;opacity:.35}
.qm-wrap{max-width:520px;margin:0 auto;padding:44px 20px 56px;display:flex;flex-direction:column;align-items:center;text-align:center}
.qm-logo{width:132px;height:132px;border-radius:50%;object-fit:cover;border:4px solid #fff;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.qm-name{font-size:2rem;font-weight:800;margin:18px 0 6px;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.qm-tag{margin:0;opacity:.92;line-height:1.7;white-space:pre-line;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.qm-mini{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:24px 0 8px}
.qm-m{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;color:#fff;text-decoration:none;background:rgba(255,255,255,.22);backdrop-filter:blur(var(--b));-webkit-backdrop-filter:blur(var(--b));border:1px solid rgba(255,255,255,.3);transition:transform .2s,background .2s}
.qm-m:hover,.qm-m:focus-visible{transform:translateY(-3px) scale(1.06);background:rgba(255,255,255,.34)}
.qm-main{width:100%;display:flex;flex-direction:column;gap:14px;margin-top:20px}
.qm-btn{direction:ltr;display:flex;align-items:center;gap:12px;min-height:62px;padding:8px 10px 8px 22px;border-radius:999px;color:#fff;text-decoration:none;background:rgba(255,255,255,.16);backdrop-filter:blur(var(--b)) saturate(1.3);-webkit-backdrop-filter:blur(var(--b)) saturate(1.3);border:1.5px solid rgba(255,255,255,.55);box-shadow:0 8px 28px rgba(0,0,0,.18);transition:transform .2s,background .2s,box-shadow .2s;animation:qm-in .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*70ms + 150ms)}
.qm-btn:hover,.qm-btn:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.26)}
.qm-btn:focus-visible,.qm-m:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.qm-t{flex:1;unicode-bidi:plaintext;text-align:center;display:flex;flex-direction:column;line-height:1.35}
.qm-t b{font-size:1.2rem;font-weight:800}
.qm-t small{font-size:.9rem;opacity:.85;font-weight:400}
.qm-i{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;background:#fff;color:#1b1b1b}
.qm-btn.menu{min-height:70px}
.qm-btn.menu .qm-i{width:52px;height:52px}
/* 2 glass-soft */
[data-t=glass-soft] .qm-btn{border-radius:20px;border:1px solid rgba(255,255,255,.28);background:rgba(15,20,25,.32);padding-left:14px}
[data-t=glass-soft] .qm-t{text-align:start}
[data-t=glass-soft] .qm-i{border-radius:14px;background:var(--a);color:#111}
/* 3 aurora */
[data-t=aurora] .qm-aurora{display:block}
[data-t=aurora] .qm-shade{background:rgba(8,8,20,.55)}
[data-t=aurora] .qm-btn{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border-color:rgba(255,255,255,.35);border-radius:22px}
[data-t=aurora] .qm-i{background:linear-gradient(135deg,var(--a),#ff5fa2);color:#fff}
/* 4 neon */
[data-t=neon] .qm-shade{background:rgba(3,4,10,.72)}
[data-t=neon] .qm-btn{background:rgba(0,0,0,.35);border:1.5px solid var(--a);box-shadow:0 0 18px color-mix(in srgb,var(--a) 55%,transparent),inset 0 0 14px color-mix(in srgb,var(--a) 22%,transparent);border-radius:16px;animation-name:qm-in,qm-pulse;animation-duration:.6s,3.6s;animation-iteration-count:1,infinite;animation-delay:calc(var(--i)*70ms + 150ms),1s}
[data-t=neon] .qm-i{background:transparent;color:var(--a);border:1.5px solid var(--a);text-shadow:0 0 10px var(--a)}
[data-t=neon] .qm-m{border-color:var(--a);color:var(--a);background:rgba(0,0,0,.4)}
/* 5 luxe */
[data-t=luxe]{font-family:"Amiri","Tajawal",serif}
[data-t=luxe] .qm-shade{background:rgba(10,8,4,.62)}
[data-t=luxe] .qm-logo{border-color:var(--a)}
[data-t=luxe] .qm-btn{border-radius:4px;background:rgba(20,16,8,.45);border:1px solid var(--a);box-shadow:none}
[data-t=luxe] .qm-btn:hover{background:color-mix(in srgb,var(--a) 22%,rgba(20,16,8,.5))}
[data-t=luxe] .qm-i{background:transparent;color:var(--a);border-radius:0;border-inline-start:1px solid var(--a);width:48px;height:48px}
[data-t=luxe] .qm-m{border-radius:4px;border-color:var(--a);color:var(--a)}
/* 6 clean-light */
[data-t=clean-light] .qm-shade{background:rgba(255,255,255,calc(var(--d)*.9))}
[data-t=clean-light] .qm{color:#15202b}
[data-t=clean-light]{color:#15202b}
[data-t=clean-light] .qm-name,[data-t=clean-light] .qm-tag{text-shadow:none}
[data-t=clean-light] .qm-btn{background:rgba(255,255,255,.62);color:#15202b;border:1px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 6px 24px rgba(20,30,50,.12)}
[data-t=clean-light] .qm-i{background:var(--a);color:#fff;border-radius:14px}
[data-t=clean-light] .qm-m{color:#15202b;background:rgba(255,255,255,.65)}
@keyframes qm-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes qm-drift{from{transform:scale(1)}to{transform:scale(1.08) translate(-1%,1%)}}
@keyframes qm-blob{from{transform:translate(0,0) scale(1)}to{transform:translate(12%,10%) scale(1.25)}}
@keyframes qm-pulse{50%{box-shadow:0 0 30px color-mix(in srgb,var(--a) 75%,transparent),inset 0 0 18px color-mix(in srgb,var(--a) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){.qm *,.qm{animation:none!important;transition:none!important}}