.wrap{ width: min(980px, 94%); margin: 0 auto; padding: 18px 0 44px; position: relative; z-index: 3; } .panel{ width: min(820px, 100%); margin: 26px auto 0; padding: 26px 22px; border-radius: 22px; background: rgba(15, 15, 25, 0.82); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0 30px rgba(255, 0, 140, 0.22); text-align:center; } .panel h1{ margin: 0 0 10px; font-size: 44px; letter-spacing: 2px; } .sub{ margin: 0 0 18px; opacity: 0.9; font-family: Arial, sans-serif; font-size: 15px; } .cards{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 18px; } .card{ text-align:left; padding: 16px 14px; border-radius: 18px; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10); font-family: Arial, sans-serif; text-decoration:none; color:#fff; transition: transform .15s ease, background .15s ease; } .card:hover{ transform: scale(1.01); background: rgba(255,255,255,0.12); } .card-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 8px; } .tag{ font-size: 12px; opacity: .85; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); } .card.disabled{ opacity: .6; pointer-events:none; } .actions{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; } .hint{ margin-top: 14px; font-size: 13px; opacity: 0.85; font-family: Arial, sans-serif; } @media (max-width: 520px){ .panel{ padding: 20px 16px; } .panel h1{ font-size: 34px; } .cards{ grid-template-columns: 1fr; } .actions{ grid-template-columns: 1fr; } } /* ===== FORCE HEADER CENTER (add at the VERY END) ===== */ .topbar{ position: sticky !important; top: 16px !important; width: min(1100px, 92%) !important; margin: 0 auto 24px !important; padding: 14px 20px !important; border-radius: 22px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; background: rgba(18,18,30,0.78) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.45) !important; } .brand{ display:block !important; text-decoration:none !important; color:#fff !important; font-size:26px !important; letter-spacing:2px !important; white-space:nowrap !important; } .nav{ display:flex !important; gap:12px !important; flex-wrap:wrap !important; justify-content:flex-end !important; } .nav a{ font-family: Arial, sans-serif !important; text-decoration:none !important; color:#fff !important; padding:10px 16px !important; border-radius:14px !important; background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.14) !important; } @media (max-width: 640px){ .topbar{ flex-direction: column !important; align-items: center !important; gap: 12px !important; padding: 14px !important; } .nav{ width:100% !important; justify-content:center !important; } }