/* =========================================================
   Qadiyah Rewards — profile, HUD, toasts
   ========================================================= */

#qrew-app, #qrew-app * { box-sizing: border-box; }
#qrew-app [hidden] { display: none !important; }

#qrew-app {
    --gold-1:#ffe27a; --gold-2:#f5b342; --gold-3:#b8791b;
    --navy-1:#06091a; --navy-2:#0d1330; --navy-3:#131b46;
    --blue:#6c8eff;   --green:#16c784;  --red:#e63946;
    --text:#f5f6ff;   --muted:#b9bdd9;

    color: var(--text);
    font-family: "Tajawal","Cairo","Segoe UI",system-ui,sans-serif;
    padding: 28px 16px 60px;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(95,58,220,.5) 0%, rgba(13,19,48,0) 55%),
        radial-gradient(ellipse at 50% 110%, rgba(245,179,66,.2) 0%, rgba(13,19,48,0) 60%),
        linear-gradient(180deg, var(--navy-1) 0%, var(--navy-2) 50%, var(--navy-3) 100%);
    border-radius: 20px;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- Login CTA ---------- */
.qrew-login-cta {
    text-align: center; padding: 60px 24px;
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
    border: 1px solid rgba(255,226,122,.3);
    border-radius: 20px;
}
.qrew-login-cta__icon { font-size: 60px; }
.qrew-login-cta h2    { margin: 12px 0 6px; color: #fff; }
.qrew-login-cta p     { color: var(--muted); margin: 0 0 18px; }

.qrew-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 28px; border-radius: 999px;
    border: 0; cursor: pointer; font-weight: 900; font-size: 15px;
    font-family: inherit;
    transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.qrew-btn:hover  { transform: translateY(-2px); }
.qrew-btn:active { transform: translateY(0); }
.qrew-btn--gold {
    background: linear-gradient(180deg, #fff7d1 0%, var(--gold-1) 30%, var(--gold-2) 70%, var(--gold-3) 100%);
    color: #2a1700;
    box-shadow: 0 12px 28px rgba(245,179,66,.4), inset 0 1px 0 rgba(255,255,255,.65);
}
.qrew-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- Hero ---------- */
.qrew-hero {
    position: relative;
    padding: 24px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
    border: 1px solid rgba(255,226,122,.3);
    overflow: hidden;
    margin-bottom: 18px;
}
.qrew-hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 90% 0%, rgba(108,142,255,.35) 0%, transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(245,179,66,.3) 0%, transparent 55%);
    pointer-events: none;
}
.qrew-hero__inner { position: relative; z-index: 1; }

.qrew-id { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.qrew-id__avatar img {
    width: 72px; height: 72px; border-radius: 50%;
    border: 3px solid var(--gold-1);
    box-shadow: 0 8px 24px rgba(245,179,66,.45);
}
.qrew-id__name { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 6px; }
.qrew-id__sub { display: flex; gap: 8px; flex-wrap: wrap; }
.qrew-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 800;
}
.qrew-chip--gold { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: #2a1700; }
.qrew-chip--blue { background: rgba(108,142,255,.25); color: #cfd6ff; border: 1px solid rgba(108,142,255,.4); }

.qrew-stats {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 18px;
}
.qrew-stat {
    text-align: center;
    padding: 14px 8px; border-radius: 14px;
    background: rgba(13,19,48,.6);
    border: 1px solid rgba(255,255,255,.08);
}
.qrew-stat__icon { font-size: 22px; }
.qrew-stat__num  { font-size: 22px; font-weight: 900; color: #fff; }
.qrew-stat__lbl  { font-size: 12px; color: var(--muted); }
@media (max-width: 540px) { .qrew-stats { grid-template-columns: repeat(2,1fr); } }

.qrew-progress__head {
    display: flex; justify-content: space-between; color: var(--muted);
    font-size: 13px; margin-bottom: 6px; font-weight: 700;
}
.qrew-progress__bar {
    height: 14px; border-radius: 999px;
    background: rgba(13,19,48,.7); overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}
.qrew-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-2), var(--gold-1));
    box-shadow: 0 0 16px rgba(255,226,122,.6);
    transition: width .6s cubic-bezier(.2,.8,.2,1);
}

/* ---------- Daily bonus banner ---------- */
.qrew-bonus {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px; border-radius: 16px;
    background: linear-gradient(135deg, rgba(245,179,66,.18), rgba(108,142,255,.18));
    border: 1px solid rgba(255,226,122,.35);
    margin-bottom: 18px;
}
.qrew-bonus__icon { font-size: 36px; }
.qrew-bonus__body { flex: 1; }
.qrew-bonus__body h3 { margin: 0 0 2px; color: #fff; font-size: 18px; }
.qrew-bonus__body p  { margin: 0; color: var(--muted); font-size: 13px; }

/* ---------- CTA cards row ---------- */
.qrew-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
@media (max-width: 720px) { .qrew-cta-row { grid-template-columns: 1fr; } }
.qrew-cta-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 16px;
    text-decoration: none !important; color: #fff;
    background: rgba(13,19,48,.6);
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .2s ease, border-color .2s ease;
}
.qrew-cta-card:hover { transform: translateY(-3px); border-color: rgba(255,226,122,.5); }
.qrew-cta-card__ico { font-size: 28px; }
.qrew-cta-card strong { display: block; color: #fff; font-size: 16px; margin-bottom: 2px; }
.qrew-cta-card span   { color: var(--muted); font-size: 12px; }
.qrew-cta-card__arrow { margin-right: auto; color: var(--gold-1); font-size: 22px; font-weight: 900; }
.qrew-cta-card--gold { border-color: rgba(255,226,122,.35); }
.qrew-cta-card--blue { border-color: rgba(108,142,255,.35); }
.qrew-cta-card--blue .qrew-cta-card__arrow { color: var(--blue); }

/* ---------- Sections ---------- */
.qrew-section { margin-bottom: 22px; }
.qrew-section__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.qrew-section__head h2 {
    margin: 0; font-size: 19px; color: #fff; font-weight: 900;
}
.qrew-mini { color: var(--muted); font-size: 13px; font-weight: 700; }

/* ---------- Achievements ---------- */
.qrew-ach-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 12px;
}
.qrew-ach {
    position: relative;
    padding: 16px 12px;
    border-radius: 16px;
    text-align: center;
    background: rgba(13,19,48,.55);
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .15s ease;
}
.qrew-ach:hover { transform: translateY(-2px); }
.qrew-ach__icon { font-size: 38px; line-height: 1; }
.qrew-ach__name { margin: 8px 0 4px; font-size: 14px; font-weight: 900; color: #fff; }
.qrew-ach__desc { font-size: 12px; color: var(--muted); line-height: 1.5; min-height: 32px; }
.qrew-ach__reward {
    display: inline-flex; gap: 8px; margin-top: 8px;
    font-size: 11px; color: var(--gold-1); font-weight: 800;
}
.qrew-ach--locked { opacity: .35; filter: grayscale(80%); }
.qrew-ach--unlocked {
    border-color: rgba(255,226,122,.55);
    background: linear-gradient(160deg, rgba(245,179,66,.18), rgba(13,19,48,.55));
    box-shadow: 0 8px 22px rgba(245,179,66,.18);
}
.qrew-ach__badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--green); color: #00130a;
    padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 900;
}

/* ---------- Leaderboard ---------- */
.qrew-leader {
    border-radius: 16px;
    background: rgba(13,19,48,.6);
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
.qrew-leader__row {
    display: grid; grid-template-columns: 40px 48px 1fr auto auto;
    align-items: center; gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.qrew-leader__row:first-child { border-top: 0; }
.qrew-leader__rank {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); color: #cfd6ff;
    font-weight: 900; font-size: 13px;
}
.qrew-leader__row.top-1 .qrew-leader__rank { background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); color: #2a1700; }
.qrew-leader__row.top-2 .qrew-leader__rank { background: linear-gradient(180deg,#e0e3ee,#a8adbf); color: #1e2235; }
.qrew-leader__row.top-3 .qrew-leader__rank { background: linear-gradient(180deg,#d8a37a,#a3633e); color: #2a1700; }
.qrew-leader__avatar img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); }
.qrew-leader__name { font-weight: 800; color: #fff; }
.qrew-leader__lvl { color: var(--muted); font-size: 12px; }
.qrew-leader__xp { color: var(--gold-1); font-weight: 900; }

/* ---------- Toast ---------- */
.qrew-toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    padding: 12px 18px; border-radius: 999px;
    background: rgba(13,19,48,.95);
    color: #fff; font-weight: 700;
    border: 1px solid rgba(255,226,122,.4);
    box-shadow: 0 14px 40px rgba(0,0,0,.6);
    z-index: 9999;
    animation: qrew-toast-in .3s ease both;
}
@keyframes qrew-toast-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================================================
   HUD — overlay shown on top of the challenge game
   ========================================================= */
.qrew-hud {
    position: fixed; left: 16px; bottom: 16px;
    display: flex; gap: 10px; align-items: center;
    padding: 10px 14px;
    background: rgba(6,9,26,.8);
    border: 1px solid rgba(255,226,122,.4);
    border-radius: 999px;
    color: #fff; font-family: "Tajawal","Cairo",system-ui,sans-serif;
    font-weight: 800; font-size: 14px;
    box-shadow: 0 14px 40px rgba(0,0,0,.5);
    z-index: 9998; direction: rtl;
    backdrop-filter: blur(8px);
}
.qrew-hud__ring {
    --p: 0;
    width: 36px; height: 36px; border-radius: 50%;
    background: conic-gradient(#ffe27a calc(var(--p) * 1%), rgba(255,255,255,.1) 0);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #2a1700; font-weight: 900;
    position: relative;
}
.qrew-hud__ring::before {
    content: ''; position: absolute; inset: 4px; border-radius: 50%;
    background: #06091a;
}
.qrew-hud__ring span { position: relative; z-index: 1; color: #ffe27a; }
.qrew-hud__chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    background: rgba(255,255,255,.06);
}
.qrew-hud__chip--coins { color: #ffe27a; }
.qrew-hud__chip--streak { color: #ff8a4c; }

/* Floating XP gain animation */
.qrew-pop {
    position: fixed; pointer-events: none;
    color: #ffe27a; font-weight: 900; font-size: 18px;
    text-shadow: 0 2px 6px rgba(0,0,0,.7);
    z-index: 9999;
    animation: qrew-pop 1.2s ease-out forwards;
}
@keyframes qrew-pop {
    0%   { opacity: 0; transform: translateY(0) scale(.6); }
    20%  { opacity: 1; transform: translateY(-12px) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(1); }
}

/* End-of-run rewards modal */
.qrew-modal {
    position: fixed; inset: 0; background: rgba(6,9,26,.86);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; padding: 16px;
    animation: qrew-fade .3s ease both;
}
@keyframes qrew-fade { from { opacity: 0; } to { opacity: 1; } }
.qrew-modal__card {
    max-width: 460px; width: 100%;
    padding: 28px 22px; border-radius: 22px;
    background: linear-gradient(160deg, #131b46, #0d1330);
    border: 1px solid rgba(255,226,122,.45);
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    color: #fff; text-align: center;
    direction: rtl; font-family: "Tajawal","Cairo",system-ui,sans-serif;
}
.qrew-modal__icon { font-size: 56px; }
.qrew-modal__title {
    margin: 8px 0 4px; font-size: 26px; font-weight: 900;
    background: linear-gradient(180deg, #fff7d1, #ffe27a, #f5b342);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.qrew-modal__sub { color: #b9bdd9; margin: 0 0 18px; font-size: 14px; }
.qrew-modal__rows {
    display: grid; gap: 8px; margin-bottom: 18px;
}
.qrew-modal__row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 14px; border-radius: 12px;
    background: rgba(255,255,255,.06);
    font-weight: 800;
}
.qrew-modal__row .v { color: #ffe27a; }
.qrew-modal__unlocked {
    margin: 12px 0 18px; padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(245,179,66,.2), rgba(108,142,255,.18));
    border: 1px solid rgba(255,226,122,.4);
}
.qrew-modal__unlocked h4 { margin: 0 0 8px; color: #fff; font-size: 14px; }
.qrew-modal__unlocked-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.qrew-modal__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: rgba(13,19,48,.6); border: 1px solid rgba(255,255,255,.1);
    font-size: 13px;
}
.qrew-modal__actions { display: flex; gap: 10px; justify-content: center; }
.qrew-modal__btn {
    flex: 1; padding: 12px 20px; border-radius: 999px;
    border: 0; cursor: pointer; font-weight: 900;
    font-family: inherit; font-size: 14px;
    transition: transform .15s ease;
}
.qrew-modal__btn:hover { transform: translateY(-2px); }
.qrew-modal__btn--primary {
    background: linear-gradient(180deg, #fff7d1, #ffe27a, #f5b342);
    color: #2a1700;
}
.qrew-modal__btn--ghost {
    background: rgba(255,255,255,.08); color: #fff;
    border: 1px solid rgba(255,255,255,.15);
}

/* Confetti dots */
.qrew-confetti {
    position: fixed; pointer-events: none; z-index: 10001;
    width: 8px; height: 12px; border-radius: 2px;
    animation: qrew-confetti 1.6s linear forwards;
}
@keyframes qrew-confetti {
    0%   { transform: translate(0,0) rotate(0); opacity: 1; }
    100% { transform: translate(var(--dx, 0), 100vh) rotate(720deg); opacity: 0; }
}
/* Qadiyah Rewards - profile + HUD */
.qrew-app{max-width:980px;margin:32px auto;padding:0 16px;font-family:"Tajawal","Cairo",sans-serif;color:#1c2540}
.qrew-card{background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(15,23,42,.08);padding:22px;margin-bottom:22px}

/* Header */
.qrew-header{display:flex;gap:22px;align-items:center;background:linear-gradient(135deg,#11214a 0%,#1f3a8a 100%);color:#fff}
.qrew-header__avatar{position:relative;flex:0 0 auto}
.qrew-header__avatar img{width:96px;height:96px;border-radius:50%;border:3px solid #f5c542;box-shadow:0 0 0 4px rgba(245,197,66,.2)}
.qrew-header__level{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:#f5c542;color:#11214a;padding:3px 12px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.qrew-header__info{flex:1;min-width:0}
.qrew-header__name{margin:0 0 12px;font-size:24px}
.qrew-xpbar{position:relative;height:18px;background:rgba(255,255,255,.15);border-radius:999px;overflow:hidden}
.qrew-xpbar__fill{height:100%;background:linear-gradient(90deg,#f5c542,#ffe071);border-radius:999px;transition:width .8s ease}
.qrew-xpbar__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#11214a;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.qrew-header__meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.qrew-chip{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600}
.qrew-chip--coins{background:rgba(245,197,66,.18);border-color:#f5c542}
.qrew-chip--streak{background:rgba(255,99,71,.18);border-color:#ff6347}

/* Daily */
.qrew-daily{display:flex;align-items:center;gap:18px}
.qrew-daily__icon{font-size:48px;filter:drop-shadow(0 4px 8px rgba(245,197,66,.5))}
.qrew-daily[data-available="1"] .qrew-daily__icon{animation:qrewPulse 1.6s infinite}
@keyframes qrewPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.qrew-daily__body{flex:1}
.qrew-daily__body h2{margin:0 0 4px;font-size:18px}
.qrew-daily__body p{margin:0;color:#5a6480;font-size:14px}

/* Buttons */
.qrew-btn{appearance:none;border:none;cursor:pointer;font-family:inherit;font-weight:700;padding:12px 22px;border-radius:12px;font-size:14px;transition:transform .15s,box-shadow .15s}
.qrew-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
.qrew-btn:disabled{opacity:.5;cursor:not-allowed}
.qrew-btn--primary{background:linear-gradient(135deg,#f5c542,#e8a91a);color:#11214a}

/* Stats */
.qrew-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;text-align:center}
.qrew-stats div{background:#f7f8fc;border-radius:14px;padding:16px}
.qrew-stats strong{display:block;font-size:24px;color:#11214a}
.qrew-stats span{display:block;color:#5a6480;font-size:13px;margin-top:4px}

/* Achievements */
.qrew-achievements h2,.qrew-leaderboard h2{margin:0 0 16px;font-size:20px;color:#11214a}
.qrew-ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.qrew-ach{display:flex;gap:12px;padding:14px;border-radius:14px;background:#f7f8fc;border:2px solid transparent;transition:transform .2s}
.qrew-ach:hover{transform:translateY(-2px)}
.qrew-ach__icon{font-size:32px;width:48px;height:48px;display:grid;place-items:center;background:#fff;border-radius:12px;flex:0 0 auto}
.qrew-ach__body{display:flex;flex-direction:column;gap:2px;font-size:13px;min-width:0}
.qrew-ach__body strong{color:#11214a}
.qrew-ach__body span{color:#5a6480;line-height:1.4}
.qrew-ach__body em{color:#e8a91a;font-style:normal;font-weight:700;font-size:12px;margin-top:4px}
.qrew-ach.is-unlocked{background:linear-gradient(135deg,#fff7dd,#ffe9a8);border-color:#f5c542;box-shadow:0 4px 12px rgba(245,197,66,.25)}
.qrew-ach.is-locked{filter:grayscale(.85);opacity:.55}

/* Leaderboard */
.qrew-lb{list-style:none;margin:0;padding:0}
.qrew-lb__row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;margin-bottom:6px;background:#f7f8fc}
.qrew-lb__row.is-me{background:linear-gradient(135deg,#fff7dd,#ffe9a8);border:1px solid #f5c542}
.qrew-lb__rank{width:28px;height:28px;display:grid;place-items:center;background:#11214a;color:#fff;border-radius:50%;font-weight:800;font-size:13px}
.qrew-lb__row:nth-child(1) .qrew-lb__rank{background:#f5c542;color:#11214a}
.qrew-lb__row:nth-child(2) .qrew-lb__rank{background:#cdd5e2;color:#11214a}
.qrew-lb__row:nth-child(3) .qrew-lb__rank{background:#d4a574;color:#fff}
.qrew-lb__avatar{width:36px;height:36px;border-radius:50%}
.qrew-lb__name{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrew-lb__lvl{background:#11214a;color:#fff;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.qrew-lb__xp{color:#5a6480;font-size:13px;font-weight:600}
.qrew-lb__empty{text-align:center;color:#5a6480;padding:20px}

/* Login wall */
.qrew-login-wall{max-width:520px;margin:60px auto;text-align:center;padding:32px;background:#fff;border-radius:18px;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.qrew-login-wall h2{margin:0 0 8px;color:#11214a}
.qrew-login-wall p{color:#5a6480;margin:0 0 18px}

/* HUD - floating reward popups */
.qrew-hud{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.qrew-hud[hidden]{display:none}
.qrew-toast{background:linear-gradient(135deg,#11214a,#1f3a8a);color:#fff;padding:14px 22px;border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.25);font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px;border:2px solid #f5c542;animation:qrewToastIn .4s ease, qrewToastOut .4s ease 4.2s forwards}
.qrew-toast--levelup{background:linear-gradient(135deg,#f5c542,#e8a91a);color:#11214a}
.qrew-toast--ach{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff}
@keyframes qrewToastIn{from{opacity:0;transform:translateY(-20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes qrewToastOut{to{opacity:0;transform:translateY(-20px) scale(.9)}}

/* Mobile */
@media (max-width:600px){
    .qrew-header{flex-direction:column;text-align:center}
    .qrew-daily{flex-direction:column;text-align:center}
}

/* ---------- Daily missions ---------- */
.qrew-missions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.qrew-mission {
    padding: 14px 14px 12px;
    border-radius: 14px;
    background: rgba(13,19,48,.58);
    border: 1px solid rgba(255,255,255,.1);
}
.qrew-mission__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.qrew-mission__top strong {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}
.qrew-mission__top span {
    font-size: 11px;
    color: #cfd6ff;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(108,142,255,.2);
    border: 1px solid rgba(108,142,255,.4);
}
.qrew-mission p {
    margin: 0 0 8px;
    color: #b9bdd9;
    font-size: 12px;
    line-height: 1.6;
}
.qrew-mission__reward {
    color: #ffe27a;
    font-size: 12px;
    font-weight: 800;
}
.qrew-mission.is-done {
    border-color: rgba(22,199,132,.5);
    background: linear-gradient(160deg, rgba(22,199,132,.16), rgba(13,19,48,.55));
}
.qrew-mission.is-done .qrew-mission__top span {
    color: #052114;
    background: rgba(22,199,132,.9);
    border-color: transparent;
}
.qrew-mission--empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #b9bdd9;
}

/* Make rewards modal buttons work for both <button> and <a> */
.qrew-modal__actions a.qrew-modal__btn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}