*{box-sizing:border-box}
:root{--active:#E53935;--muted:#d7d7d7;--glass:rgba(255,255,255,.22);--glass-border:rgba(255,255,255,.35)}
html,body{height:100%}
body{margin:0;font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,'Noto Sans Arabic','Noto Kufi Arabic',sans-serif}
.animated-bg{background:linear-gradient(120deg,#8ec5fc,#e0c3fc,#fcb69f,#ffecd2);background-size:300% 300%;animation:gradientShift 14s ease-in-out infinite;min-height:100vh}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.topbar{position:fixed;top:0;left:0;right:0;padding:10px 14px;display:flex;gap:10px;justify-content:center;backdrop-filter:blur(8px);background:rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.25);z-index:5;overflow-x:auto}
.step{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:700;cursor:pointer;background:#fff;color:#333;border:2px solid var(--muted);transition:.2s;flex:0 0 auto}
.step.active{border-color:var(--active);color:#fff;background:var(--active)}
.stage{min-height:100vh;padding-top:70px;display:grid;place-items:center;gap:18px}
.glass{max-width:min(92vw,1200px);max-height:min(78vh,900px);padding:clamp(10px,2vw,22px);background:var(--glass);border:1px solid var(--glass-border);border-radius:24px;backdrop-filter:blur(18px) saturate(140%);box-shadow:0 20px 60px rgba(0,0,0,.25);display:grid;place-items:center}
.glass img{max-width:100%;max-height:calc(min(78vh,900px) - 40px);display:block;border-radius:14px}
.controls{position:fixed;bottom:22px;inset-inline:0;display:flex;justify-content:center}
.next-btn{padding:14px 28px;border:none;border-radius:999px;background:#111;color:#fff;font-size:18px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.next-btn:disabled{opacity:.5;cursor:not-allowed}