/* One narrow column: a single membership card, a few lines under it. rushph.com look: near-black, hairline edges, Bebas headlines, teal as light, pill buttons. */
:root{
  --bg:#050505;
  --card:#0a0a0a;
  --teal:#3ec1c8;
  --teal-hi:#6fdce1;
  --white:#ffffff;
  --text:#e8e8e8;
  --muted:#8a8a8a;
  --dim:#767676;
  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.16);
  --display:'Bebas Neue','Arial Narrow',Impact,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-block:24px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{max-width:400px;margin:0 auto}
[hidden]{display:none!important}

/* the card */
.card{position:relative;border-radius:28px;padding:22px 16px 16px;overflow:hidden;
  background:radial-gradient(120% 70% at 100% 0%,rgba(62,193,200,.16),rgba(62,193,200,0) 62%),var(--card);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px var(--hair-2),0 30px 60px rgba(0,0,0,.85)}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;display:block}
.brand span{font-family:var(--display);font-size:30px;line-height:1;letter-spacing:.03em;color:var(--white)}
.count{font-family:var(--display);font-size:34px;line-height:1;color:var(--white)}
.count i{font-style:normal;color:var(--muted)}
.stamps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:start}
.st{width:100%;min-width:0;overflow:hidden;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--display);font-size:20px;line-height:1;color:var(--dim);background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--hair-2)}
.st svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st.done{background:var(--teal);color:var(--bg);box-shadow:0 0 14px rgba(62,193,200,.45)}
.st.lock{background:none;color:var(--teal);box-shadow:none;border:1.5px dashed var(--teal);font-size:15px;letter-spacing:.03em}
.offer{margin:18px 0 0;padding:14px 16px;border-radius:20px;border:1.5px dashed var(--teal);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;line-height:1.35}
.offer b{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;color:var(--teal);white-space:nowrap}
.st.prize{background:rgba(62,193,200,.08);color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal);font-size:13px;letter-spacing:0}
.st.prize.done{background:var(--teal);color:var(--bg);box-shadow:0 0 14px rgba(62,193,200,.45)}
.card-foot{display:flex;justify-content:space-between;gap:12px;margin:18px 6px 0;padding-top:12px;border-top:1px solid var(--hair);font-size:12px;color:var(--muted)}

/* under the card */
.status{margin:30px 0 0;font-family:var(--display);font-weight:400;font-size:clamp(44px,13vw,56px);line-height:.95;color:var(--white)}
.sub{margin:10px 0 0;font-size:16px;color:var(--text);max-width:36ch}
.sub .t{color:var(--teal)}
.key{margin:14px 0 0;font-size:13px;color:var(--muted)}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:15px 28px;border-radius:999px;border:0;background:var(--white);color:var(--bg);font-size:18px;font-weight:600;line-height:1.1;transition:background .3s ease}
.pill:hover{background:var(--teal-hi)}
.cta{margin-top:22px;width:100%}
.cta+.cta{margin-top:10px}
.note{margin:12px 0 0;font-size:14px;color:var(--teal)}

h2{margin:34px 0 4px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--hair);font-size:16px}
.row:first-of-type{border-top:0}
.nm{display:block;min-width:0}
.nm em{display:block;font-style:normal;font-size:13px;line-height:1.35;color:var(--muted);margin-top:2px}
.row .v{font-family:var(--display);font-size:28px;line-height:1;color:var(--teal)}
.fine{margin:22px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}

/* admin */
.label{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:16px;font-weight:600;color:var(--white)}
.label::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(62,193,200,.8)}
h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(56px,17vw,80px);line-height:.9;color:var(--white)}
.adds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.add{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:84px;padding:14px 16px;border-radius:20px;border:0;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair-2);text-align:left;font-size:15px;transition:box-shadow .3s ease}
.add:hover{box-shadow:inset 0 0 0 1px var(--teal)}
.add .v{font-family:var(--display);font-size:32px;line-height:1;color:var(--teal)}
.gift{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;margin-top:10px;padding:12px 18px;border-radius:22px;border:0;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair-2);font-size:16px;text-align:left}
.gift .v{font-family:var(--display);font-size:26px;line-height:1;color:var(--teal)}
.gift:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--teal)}
.gift:disabled{opacity:.35;cursor:not-allowed}
.hist div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--hair);font-size:15px}
.hist div:first-child{border-top:0}
.hist span+span{font-family:var(--display);font-size:24px;line-height:1;color:var(--teal)}

.st.two{flex-direction:column;gap:3px}
.st.two small{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1}
.st.two b{font-weight:400;font-size:13px;line-height:1;letter-spacing:.01em}
button.st{border:0;padding:0;cursor:pointer;font:inherit}
button.st:active{transform:scale(.95)}
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.panel{position:relative;width:100%;max-width:440px;max-height:92%;overflow-y:auto;background:#0b0b0b;border-radius:28px 28px 0 0;padding:26px 22px calc(26px + env(safe-area-inset-bottom,0px));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px var(--hair-2);animation:sheet-up .4s cubic-bezier(.22,1,.36,1)}
@keyframes sheet-up{from{transform:translateY(48px);opacity:0}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}
.panel h3{margin:6px 44px 0 0;font-family:var(--display);font-weight:400;font-size:38px;line-height:.98;color:var(--white)}
.panel .what{margin:14px 0 0;font-size:16px;color:var(--text)}
.panel .extra{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.panel .info{margin:18px 0 0}
.panel .info div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--hair);font-size:15px}
.panel .info b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1;color:var(--teal)}
.panel .snote{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}
.xbtn{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);color:var(--white);display:flex;align-items:center;justify-content:center}
.xbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* ---- pages added for the real card ---- */
.wrap{max-width:440px}
body.admin .wrap{max-width:600px}
.center{text-align:center}
.lead{margin:14px 0 0;font-size:17px;color:var(--text);max-width:36ch}
.back{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none;font-size:15px}
.field{display:block;margin-top:16px}
.field>span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],select{width:100%;min-height:52px;padding:12px 16px;border-radius:16px;border:0;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--white);font:inherit;font-size:16px}
select option{background:#111;color:#fff}
input:focus,select:focus{outline:2px solid var(--teal);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:15px;line-height:1.45;color:var(--text)}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--teal);flex:none}
.check small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{margin:18px 0 0;padding:12px 16px;border-radius:16px;background:rgba(229,72,77,.13);color:#ffa3a6;font-size:15px}
.okmsg{margin:18px 0 0;padding:12px 16px;border-radius:16px;background:rgba(62,193,200,.12);color:var(--teal-hi);font-size:15px}
.small{margin:18px 4px 0;font-size:13px;line-height:1.6;color:var(--muted)}
.small a{color:var(--teal)}
a.pill{text-decoration:none}
.pill.ghost{background:none;color:var(--white);box-shadow:inset 0 0 0 1px var(--hair-2)}
.pill.ghost:hover{background:rgba(255,255,255,.08)}
.pill.sm{min-height:44px;padding:10px 18px;font-size:15px}
.banner{margin:18px 0 0;padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--hair-2);font-size:15px;line-height:1.45}
.expnote{margin:10px 0 0;font-size:13px;color:var(--muted)}

/* admin */
.atop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.atop .brand img{width:40px;height:40px}
.alinks{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:none;box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--text);text-decoration:none;font:inherit;font-size:14px;cursor:pointer}
.chip.on{box-shadow:inset 0 0 0 1px var(--teal);color:var(--teal)}
.chip:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.crow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 4px;border-top:1px solid var(--hair);color:var(--text);text-decoration:none}
.crow:first-child{border-top:0}
.crow small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.crow .v{font-family:var(--display);font-size:30px;line-height:1;color:var(--teal);white-space:nowrap}
.tag{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;font-size:12px;line-height:1.6;background:rgba(62,193,200,.14);color:var(--teal-hi);vertical-align:middle}
.tag.warn{background:rgba(255,184,76,.14);color:#ffcf85}
.tag.bad{background:rgba(229,72,77,.14);color:#ffa3a6}
.bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.bar form{margin:0}
.facts{margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--muted)}
.linkbox{margin-top:14px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--hair-2);font-size:13px;color:var(--muted);word-break:break-all}
.claimrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;padding:14px 16px;border-radius:20px;background:rgba(62,193,200,.08);box-shadow:inset 0 0 0 1px var(--teal)}
.hist .undo{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;padding:6px 0 6px 12px;text-decoration:underline}
.hist div{align-items:center}
.hist .d{display:block;color:var(--muted);font-size:12px}
.three2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
table.t{width:100%;border-collapse:collapse;font-size:14px}

/* admin forms inside grids */
.adds form{display:flex;margin:0}
.adds .add{width:100%}
form .gift{width:100%}
.claimrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;padding:14px 16px;border-radius:20px;background:rgba(62,193,200,.08);box-shadow:inset 0 0 0 1px var(--teal);font-size:15px}
.claimrow small{color:var(--muted)}
.hist form{margin:0}

/* badge and claim box */
.badge{display:flex;align-items:center;gap:14px;width:100%;margin:18px 0 0;padding:14px 16px;border-radius:22px;border:0;text-align:left;font:inherit;color:var(--text);background:rgba(62,193,200,.1);box-shadow:inset 0 0 0 1.5px var(--teal);cursor:pointer}
.badge .pct{font-family:var(--display);font-size:34px;line-height:1;color:var(--teal);white-space:nowrap}
.badge .bt{display:block;font-size:14px;line-height:1.35;color:var(--muted)}
.badge .bt b{display:block;font-weight:600;color:var(--white);font-size:15px}
.claimbox{margin:22px 0 0;padding:22px 20px;border-radius:28px;background:#0a0a0a;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px var(--teal)}
.cb-title{margin:0;font-family:var(--display);font-size:34px;line-height:1;color:var(--white)}
.cb-text{margin:8px 0 0;font-size:15px;color:var(--text)}

/* red badge inside the card */
.badge{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:10px 14px;min-height:52px;border-radius:18px;border:0;text-align:left;font:inherit;color:var(--text);background:rgba(229,72,77,.14);box-shadow:inset 0 0 0 1.5px #e5484d;cursor:pointer}
.badge:active{transform:scale(.99)}
.badge .pct{font-family:var(--display);font-size:30px;line-height:1;color:#ff7478;white-space:nowrap}
.badge .bt{flex:1;min-width:0;display:block;font-size:13px;line-height:1.3;color:var(--text)}
.badge .bt b{display:block;font-weight:600;color:var(--white);font-size:14px}
.badge .bi{flex:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #ff7478;color:#ff7478;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* ---- language switch (same pill as rushph.com) ---- */
.langbar{display:flex;justify-content:flex-end;margin:0 0 14px;direction:ltr}
.lang-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;box-sizing:border-box;height:44px;min-width:104px;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:500 13px/1 'DM Sans',system-ui,sans-serif;color:#8a8a8a;text-decoration:none;direction:ltr;-webkit-user-select:none;user-select:none;transition:box-shadow .3s ease,transform .3s ease}
.lang-switch:hover{color:#8a8a8a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.lang-switch span{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:0 14px;line-height:1;transition:color .5s ease,transform .75s cubic-bezier(.65,0,.35,1)}
.lang-switch .ls-en{letter-spacing:.04em}
.lang-switch .ls-ar{font-family:'Noto Sans Arabic','DM Sans',system-ui,sans-serif;font-size:15px;padding-bottom:3px}
.lang-switch .ls-thumb{box-sizing:border-box;position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);padding:0;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 10px rgba(0,0,0,.35);transition:transform .75s cubic-bezier(.65,0,.35,1)}
.lang-switch[data-lang="ar"] .ls-thumb{transform:translateX(100%)}
.lang-switch[data-lang="en"] .ls-en,.lang-switch[data-lang="ar"] .ls-ar{color:#fff;transform:scale(1.06)}
.lang-switch:active{transform:scale(.96)}

/* ---- Arabic (right to left), the same approach as the website ---- */
body.ar{font-family:'Noto Sans Arabic','DM Sans',system-ui,sans-serif}
.ar *{letter-spacing:0!important}
.ar .status,.ar h1,.ar .panel h3,.ar .cb-title,.ar .brand span,.ar .badge .pct{font-family:'Noto Kufi Arabic','Noto Sans Arabic',system-ui,sans-serif;font-weight:700;text-transform:none;line-height:1.3}
.ar .status{font-size:clamp(30px,9vw,40px)}
.ar h1{font-size:clamp(38px,11vw,52px)}
.ar .panel h3{font-size:28px;margin:6px 0 0 44px}
.ar .cb-title{font-size:28px}
.ar .brand span{font-size:22px}
.ar .badge .pct{font-size:20px}
.ar .badge .bt{line-height:1.45}
.ar h2{text-transform:none;font-size:15px;letter-spacing:0}
.ar .st.two b,.ar .st.two small{font-family:'Noto Sans Arabic',system-ui,sans-serif;line-height:1.15}
.ar .st.two small{font-size:11px;font-weight:500}
.ar .st.two b{font-size:12px;font-weight:600}
.ar .lead,.ar .sub{line-height:1.7}
.ar .count,.ar .stamps,.ar .row .v{direction:ltr}
.ar .xbtn{right:auto;left:14px}
.ar input[type=tel],.ar input[type=email]{direction:ltr;text-align:right}
.ar .nm em{line-height:1.5}

/* small red badge in the card's bottom row */
.card-foot{align-items:center}
.card-foot .fname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-mini{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 6px 0 11px;border-radius:999px;border:0;background:rgba(229,72,77,.16);box-shadow:inset 0 0 0 1.5px #e5484d;color:#ff7478;font-family:var(--display);font-size:18px;line-height:1;white-space:nowrap;cursor:pointer}
.badge-mini::after{content:"";position:absolute;inset:-9px -6px}
.badge-mini i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #ff7478;font-family:var(--body);font-size:11px;font-weight:600}
.badge-mini:active{transform:scale(.96)}
.ar .badge-mini{font-family:'Noto Kufi Arabic','Noto Sans Arabic',system-ui,sans-serif;font-weight:700;font-size:13px;padding:0 11px 0 6px}

/* sign-up and lost-link header: logo + name on the left, language switch on the right, one tidy row */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 34px;direction:ltr}
.hdr .bn{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;color:var(--white);letter-spacing:.03em}
.ar .hdr .bn{font-size:26px;letter-spacing:0}
.hdr .brand img{width:44px;height:44px}
.hdr+h1{margin-top:0}
h1+.lead{margin-top:18px}

/* the 50% off badge always sits in the exact middle of the card footer, whatever the name length */
.card-foot{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}
.card-foot .fsite{justify-self:end}

/* admin: short message at the bottom after a stamp button */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);max-width:min(92vw,420px);padding:12px 18px;border-radius:999px;background:#0b0b0b;color:var(--teal-hi);box-shadow:inset 0 0 0 1px rgba(62,193,200,.5),0 12px 30px rgba(0,0,0,.7);font-size:15px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:50;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.bad{color:#ffa3a6;box-shadow:inset 0 0 0 1px rgba(229,72,77,.6),0 12px 30px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}

/* the free-stamp counter above the card; tapping it opens the explanation */
.offer-pill{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin:0 0 14px;padding:10px 18px;border-radius:999px;border:1.5px dashed var(--teal);background:rgba(62,193,200,.06);color:var(--text);font:inherit;font-size:15px;line-height:1.2}
.offer-pill .od{flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px rgba(62,193,200,.8)}
.offer-pill b{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.03em;color:var(--teal-hi)}
.offer-pill i{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--teal);color:var(--teal-hi);font-style:normal;font-size:12px;font-weight:600}
.ar .offer-pill b{font-family:'Noto Kufi Arabic','Noto Sans Arabic',system-ui,sans-serif;font-weight:700;font-size:15px;letter-spacing:0}

/* the free-stamp circle is a countdown: a ring that shrinks every day, the days left inside, tap to read the explanation */
.st.lock.cd{border:0;overflow:visible;position:relative;flex-direction:column;gap:1px;padding:0;font-family:var(--display);color:var(--teal);background:rgba(62,193,200,.05)}
.st.lock.cd .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.st.lock.cd .ring circle{fill:none;stroke-width:4.5;stroke-linecap:round}
.st.lock.cd .trk{stroke:rgba(62,193,200,.2)}
.st.lock.cd .arc{stroke:var(--teal)}
.st.lock.cd small{position:relative;font-family:var(--body);font-size:8px;font-weight:700;letter-spacing:.08em;line-height:1;color:var(--teal)}
.st.lock.cd .num{position:relative;font-family:var(--display);font-size:28px;line-height:.95;color:var(--white);letter-spacing:.01em}
.st.lock.cd .unit{position:relative;font-family:var(--body);font-size:8px;font-weight:700;letter-spacing:.06em;line-height:1;color:var(--teal-hi)}
.ar .st.lock.cd small,.ar .st.lock.cd .unit{font-family:'Noto Sans Arabic',system-ui,sans-serif;font-size:9px;letter-spacing:0;line-height:1.1}
.ar .st.lock.cd .num{font-family:var(--display)}

/* countdown circle: keep all three lines inside the ring */
.st.lock.cd{padding:8px 0;gap:0}
.st.lock.cd small{font-size:7.5px}
.st.lock.cd .num{font-size:25px;line-height:1}
.st.lock.cd .unit{font-size:7.5px}
.ar .st.lock.cd small,.ar .st.lock.cd .unit{font-size:8.5px}

/* ---- tidier page (preview) ---- */
.status{font-size:clamp(40px,12vw,50px);margin-top:26px}
.sub{margin-top:8px}
.key,.expnote{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.earn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.et{border-radius:18px;background:#0a0a0a;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px var(--hair);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.et b{font-family:var(--display);font-weight:400;font-size:36px;line-height:.9;color:var(--teal)}
.et span{font-size:14.5px;line-height:1.3;color:var(--text)}
.et em{font-style:normal;font-size:12px;line-height:1.3;color:var(--muted)}
.endblock{margin-top:26px;padding-top:18px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.endblock .fine{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.wabtn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--hair-2);color:var(--white);text-decoration:none;font-size:15px;font-weight:500}
.tipline{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.card-foot .fname{white-space:normal;overflow:visible;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}

/* status block: a progress bar to the next gift, and two tidy facts */
.status{margin-bottom:0;position:relative;z-index:1}
.goal{margin:14px 0 0;padding:16px 18px;border-radius:22px;background:linear-gradient(160deg,#0c1112,#080808);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(62,193,200,.28)}
.goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.goal-k{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--teal)}
.goal-n{font-family:var(--display);font-size:24px;line-height:1;color:var(--white);letter-spacing:.03em}
.goal-row{display:flex;align-items:center;gap:12px;margin-top:12px}
.goal-bar{flex:1;height:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.goal-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2a9da3,#6fdce1);box-shadow:0 0 16px rgba(62,193,200,.6)}
.goal-gift{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(62,193,200,.1);box-shadow:inset 0 0 0 1.5px var(--teal)}
.goal-gift svg{width:18px;height:18px;fill:none;stroke:var(--teal);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.goal-name{margin:12px 0 0;font-size:16px;line-height:1.35;color:var(--white)}
.facts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.facts li{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.5;color:var(--muted)}
.facts svg{flex:none;width:17px;height:17px;margin-top:1px;fill:none;stroke:var(--teal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* smaller sizes for the status block and tiles */
.status{font-size:clamp(30px,9vw,38px);margin-top:20px}
.goal{margin-top:10px;padding:12px 14px;border-radius:18px}
.goal-k{font-size:10.5px}
.goal-n{font-size:19px}
.goal-row{margin-top:9px;gap:10px}
.goal-bar{height:8px}
.goal-gift{width:28px;height:28px}
.goal-gift svg{width:15px;height:15px}
.goal-name{margin-top:9px;font-size:14.5px}
.facts{margin-top:10px;gap:6px}
.facts li{font-size:12.5px}
.facts svg{width:15px;height:15px}
h2{margin-top:26px}
.earn{gap:8px}
.et{padding:11px 13px;border-radius:15px;gap:3px}
.et b{font-size:28px}
.et span{font-size:13.5px}

.ar .status{font-size:clamp(26px,7.4vw,32px);line-height:1.25}

/* ready state: say clearly it is ONE gift to claim, the next one is only a quiet option */
.goal.ready{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1.5px var(--teal),0 0 24px rgba(62,193,200,.18)}
.goal.ready .goal-bar i{width:100%}
.goal-gift.on{background:var(--teal);box-shadow:0 0 14px rgba(62,193,200,.6)}
.goal-gift.on svg{stroke:var(--bg)}
.goal-name em{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.goal-note{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.keepgoing{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.goal.ready .goal-name+.goal-name{margin-top:7px}

/* "or keep collecting": a second, lighter card so it clearly reads as a separate option */
.goal.later{margin-top:16px;background:transparent;box-shadow:inset 0 0 0 1.5px var(--hair-2);border:0}
.goal.later .goal-k{color:var(--white);font-size:11.5px}
.goal.later .goal-name{font-size:15.5px}
.goal.later .goal-name em.togo{display:block;font-style:normal;font-size:14px;font-weight:600;color:var(--teal);margin-top:3px}
.goal.later .goal-bar{height:10px}
.goal.later .goal-gift{box-shadow:inset 0 0 0 1.5px var(--hair-2);background:transparent}
.goal.later .goal-gift svg{stroke:var(--text)}

/* Recording hours: the next stamp fills one third per paid hour */
.st.part{position:relative}
.st.prize{position:relative}
.st svg.hring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hring circle{fill:none;stroke-width:7;stroke-linecap:round}
.hring .off{stroke:rgba(255,255,255,.18)}
.hring .on{stroke:var(--teal);filter:drop-shadow(0 0 3px rgba(62,193,200,.8))}
.hours-line{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}