/* ============================================================================
   /go — Smart Links — unified a7 design system (contact/leagues idiom).
   Prefix .a7g-. Theme-aware via color-mix(in oklch, hsl(var(--base-content)) …)
   + hsl(var(--primary)). ⛔ NEVER a bare var(--base-content) inside color-mix
   (HSL triplet → invalid-color trap that silently drops the property).
   ⛔ NO hardcoded hex accents, NO `.dark` twins — the DaisyUI token IS the theme.
   Bilingual visibility driven by the shell's body.font-english; reading DIRECTION
   pinned in JS (never inherited from dir=auto).
   ========================================================================== */

:root { --a7g-muted: color-mix(in oklch, hsl(var(--base-content)) 72%, hsl(var(--base-100))); }

/* bilingual — Arabic default, English when the shell sets body.font-english */
.a7g-wrap .t-en { display: none; }
body.font-english .a7g-wrap .t-ar { display: none; }
body.font-english .a7g-wrap .t-en { display: inline; }

.a7g-wrap {
  max-width: 560px; margin: 0 auto; padding: 10px 20px 56px;
  color: hsl(var(--base-content)); font-variant-numeric: tabular-nums; overflow-x: clip;
}
@media (max-width: 480px) { .a7g-wrap { padding: 6px 14px 40px; } }

/* ── section identity (breadcrumb + titlerow + fade divider) — P1 ─────────── */
.a7g-bc { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 2px 0 16px; flex-wrap: wrap; }
.a7g-bc__a { color: color-mix(in oklch, hsl(var(--base-content)) 72%, transparent); text-decoration: none; transition: color .18s ease-out; }
@media (hover: hover) { .a7g-bc__a:hover { color: hsl(var(--base-content)); } }
.a7g-bc__sep { opacity: .5; }
.a7g-bc__cur { font-weight: 600; }

.a7g-titlerow { display: flex; align-items: center; gap: 16px; margin: 6px 0 10px; }
.a7g-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; margin: 0; color: hsl(var(--base-content)); }
.a7g-titlerow__line { flex: 1; height: 1px; }
.a7g-titlerow__line:first-child { background: linear-gradient(to left,  color-mix(in oklch, hsl(var(--base-content)) 22%, transparent), transparent); }
.a7g-titlerow__line:last-child  { background: linear-gradient(to right, color-mix(in oklch, hsl(var(--base-content)) 22%, transparent), transparent); }
[dir="rtl"] .a7g-titlerow__line:first-child { background: linear-gradient(to right, color-mix(in oklch, hsl(var(--base-content)) 22%, transparent), transparent); }
[dir="rtl"] .a7g-titlerow__line:last-child  { background: linear-gradient(to left,  color-mix(in oklch, hsl(var(--base-content)) 22%, transparent), transparent); }
.a7g-sub { text-align: center; font-size: 14px; line-height: 1.5; color: var(--a7g-muted); margin: 0 auto; max-width: 440px; }

.a7g-rule { border: 0; height: 1px; width: min(440px, 100%); margin: 22px auto;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, hsl(var(--base-content)) 22%, transparent), transparent); }

/* ── form rhythm ─────────────────────────────────────────────────────────── */
.a7g-form { display: flex; flex-direction: column; gap: 16px; }
.a7g-f { display: flex; flex-direction: column; gap: 6px; }
.a7g-lbl { font-size: 13.5px; font-weight: 600; color: hsl(var(--base-content)); }

/* ── app picker (radiogroup of tiles) ────────────────────────────────────── */
/* fixed 4-per-row so the picker reads as even rows (8 apps → 2 rows of 4). */
/* ⛔ THREE columns, at every width — owner's call 2026-08-03, and it is what
   the measurements pointed at anyway. Four columns left a 79px tile on a
   375px phone: «متجر التطبيقات» wants 98px, so it wrapped to two lines while
   every other label stayed on one. Three columns give 109px on a phone and
   167px on desktop, and the 9 apps lay out an even 3/3/3 instead of 4/4/1
   with one orphan. Widen this back to 4 and the long-name wrap returns. */
.a7g-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.a7g-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px;
  border-radius: 12px; cursor: pointer; font: inherit;
  background: color-mix(in oklch, hsl(var(--base-content)) 4%, transparent);
  border: 1.5px solid color-mix(in oklch, hsl(var(--base-content)) 10%, transparent);
  transition: background .18s ease-out, border-color .18s ease-out, transform .22s cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) { .a7g-tile:hover { transform: translateY(-2px);
  border-color: color-mix(in oklch, hsl(var(--base-content)) 22%, transparent); } }
.a7g-tile:active { transform: scale(.97); }
.a7g-tile.is-on {
  background: color-mix(in oklch, hsl(var(--primary)) 8%, transparent);
  border-color: hsl(var(--primary));
}
.a7g-tile__ic { width: 36px; height: 36px; display: grid; place-items: center; }
.a7g-tile__ic svg, .a7g-tile__ic img { width: 100%; height: 100%; display: block; }
.a7g-tile__n { font-size: 13px; font-weight: 600; line-height: 1.15; text-align: center;
  color: color-mix(in oklch, hsl(var(--base-content)) 62%, transparent); }
.a7g-tile.is-on .a7g-tile__n { color: hsl(var(--base-content)); }

/* ── the value field ─────────────────────────────────────────────────────── */
.a7g-field {
  display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 12px;
  background: hsl(var(--base-100));
  border: 1.5px solid color-mix(in oklch, hsl(var(--base-content)) 14%, transparent);
  transition: border-color .18s ease-out, box-shadow .18s ease-out;
}
@media (hover: hover) { .a7g-field:hover { border-color: color-mix(in oklch, hsl(var(--base-content)) 24%, transparent); } }
.a7g-field:focus-within { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px color-mix(in oklch, hsl(var(--primary)) 22%, transparent); }
.a7g-field.is-err { border-color: hsl(var(--error)); box-shadow: 0 0 0 3px color-mix(in oklch, hsl(var(--error)) 20%, transparent); }
.a7g-field__ic { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; }
.a7g-field__ic svg, .a7g-field__ic img { width: 26px; height: 26px; display: block; }
.a7g-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  font: inherit; font-size: .9375rem; font-weight: 600; color: hsl(var(--base-content)); }
.a7g-input::placeholder { color: var(--a7g-muted); font-weight: 500; }

.a7g-hint { min-height: 18px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 0 2px; }
.a7g-hint__t { color: var(--a7g-muted); }
.a7g-hint.is-err .a7g-hint__t { color: hsl(var(--error)); font-weight: 700; }
.a7g-hint__ic { display: inline-flex; color: hsl(var(--error)); }
.a7g-hint__ic svg { width: 14px; height: 14px; display: block; }

/* ── primary button (contact .a7c-btn idiom) ─────────────────────────────── */
.a7g-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 50px; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 15px;
  background: hsl(var(--primary)); color: hsl(var(--primary-content, var(--base-100)));
  box-shadow: 0 6px 18px -4px color-mix(in oklch, hsl(var(--primary)) 55%, transparent);
  transition: background .18s ease-out, transform .1s ease-out, opacity .18s;
}
@media (hover: hover) { .a7g-btn:hover { background: color-mix(in oklch, hsl(var(--primary)) 82%, #000); } }
.a7g-btn:active { transform: scale(.97); }
/* the empty/no-value state: muted surface fill, not a hardcoded grey */
.a7g-btn.is-empty {
  background: color-mix(in oklch, hsl(var(--base-content)) 8%, transparent);
  /* 72% (not 40%) so the primary CTA's default-state label clears WCAG AA
     contrast on its 8% surface while still reading as de-emphasized. */
  color: color-mix(in oklch, hsl(var(--base-content)) 72%, transparent);
  box-shadow: none; cursor: default;
}
.a7g-btn:disabled { cursor: wait; }
.a7g-btn__ic svg { width: 19px; height: 19px; display: block; }
.a7g-btn.is-loading .a7g-btn__ic svg { animation: a7gSpin .8s linear infinite; }
@keyframes a7gSpin { to { transform: rotate(360deg); } }

/* ── result card ─────────────────────────────────────────────────────────── */
.a7g-result {
  background: color-mix(in oklch, hsl(var(--base-content)) 4%, transparent);
  border: 1px solid color-mix(in oklch, hsl(var(--base-content)) 10%, transparent);
  border-radius: var(--a7-radius-card, 14px); padding: 18px 16px;
  animation: a7gRise .34s cubic-bezier(.16,1,.3,1);
}
@keyframes a7gRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.a7g-result__h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.a7g-result__h svg { width: 16px; height: 16px; color: hsl(var(--success)); }
.a7g-result__ht { font-size: 14px; font-weight: 700; color: hsl(var(--base-content)); }
.a7g-pill { display: flex; align-items: center; gap: 10px; height: 48px; border-radius: 12px;
  padding-inline-start: 14px; padding-inline-end: 8px;
  background: hsl(var(--base-100)); border: 1px solid color-mix(in oklch, hsl(var(--base-content)) 8%, transparent); }
.a7g-pill__u { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: hsl(var(--base-content)); }
.a7g-copy { flex: 0 0 auto; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 13.5px; background: hsl(var(--primary)); color: hsl(var(--primary-content, var(--base-100)));
  transition: background .18s ease-out, transform .1s ease-out; }
.a7g-copy:active { transform: scale(.96); }
.a7g-copy.is-ok { background: hsl(var(--success)); }
.a7g-preview { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px; margin-top: 10px; border-radius: 12px; text-decoration: none;
  font: inherit; font-weight: 700; font-size: 13.5px; color: hsl(var(--primary));
  background: transparent; border: 1.5px solid color-mix(in oklch, hsl(var(--primary)) 45%, transparent);
  transition: background .18s ease-out, border-color .18s ease-out; }
@media (hover: hover) { .a7g-preview:hover { background: color-mix(in oklch, hsl(var(--primary)) 8%, transparent);
  border-color: hsl(var(--primary)); } }
.a7g-preview svg { width: 16px; height: 16px; }

/* ── turnstile ───────────────────────────────────────────────────────────── */
.a7g-ts { display: flex; justify-content: center; min-height: 66px; }

/* ── /go/<app>/<value> redirect page ─────────────────────────────────────── */
.a7g-rd { max-width: 440px; margin: 0 auto; padding: 10px 20px; min-height: 78vh;
  display: flex; flex-direction: column; color: hsl(var(--base-content)); }
.a7g-rd__top { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 8px; }
.a7g-ring { position: relative; width: 116px; height: 116px; }
.a7g-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.a7g-ring__track { fill: none; stroke: color-mix(in oklch, hsl(var(--base-content)) 12%, transparent); }
.a7g-ring__bar { fill: none; stroke: hsl(var(--primary)); stroke-linecap: round; transition: stroke-dashoffset .12s linear; }
.a7g-ring__ic { position: absolute; inset: 12px; display: grid; place-items: center; }
/* Our own eight /icons/*.png are already circular artwork on a transparent
   square, so the radius below is a no-op for them. An App Store artwork comes
   off Apple's CDN as a FULL SQUARE (iOS applies the rounding at display time,
   the file itself has none) and sat as a hard-edged square inside the round
   countdown ring. `border-radius:50%` makes both cases read the same.
   object-fit:cover guards a non-square artwork against being stretched. */
.a7g-ring__ic img, .a7g-ring__ic svg { width: 92px; height: 92px; display: block;
  border-radius: 50%; object-fit: cover; }
.a7g-rd__t { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-top: 24px; color: hsl(var(--base-content)); }
.a7g-rd__s { font-size: 14px; margin-top: 8px; color: var(--a7g-muted); }
.a7g-rd__cta-wrap { margin-top: auto; padding-top: 32px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
.a7g-rd__alt { display: block; text-align: center; font-size: 13.5px; font-weight: 600; margin-top: 10px; padding: 8px;
  text-decoration: none; color: color-mix(in oklch, hsl(var(--base-content)) 58%, transparent);
  transition: color .18s ease-out; }
@media (hover: hover) { .a7g-rd__alt:hover { color: hsl(var(--base-content)); } }
/* growth loop — turn the visitor into a creator */
.a7g-grow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 16px 0 8px;
  border-top: 1px solid color-mix(in oklch, hsl(var(--base-content)) 10%, transparent); }
.a7g-grow__tx { min-width: 0; }
.a7g-grow__t { font-size: 14px; font-weight: 700; color: hsl(var(--base-content)); }
.a7g-grow__s { font-size: 12px; margin-top: 2px; color: var(--a7g-muted); }
.a7g-grow__btn { flex: 0 0 auto; height: 40px; padding: 0 16px; display: inline-flex; align-items: center;
  border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 13.5px; color: hsl(var(--primary));
  background: transparent; border: 1.5px solid color-mix(in oklch, hsl(var(--primary)) 45%, transparent);
  transition: background .18s ease-out, border-color .18s ease-out; }
@media (hover: hover) { .a7g-grow__btn:hover { background: color-mix(in oklch, hsl(var(--primary)) 8%, transparent); border-color: hsl(var(--primary)); } }

/* ── ad shown during the redirect countdown (native banner / Google) ──────── */
[x-cloak] { display: none !important; }
.a7g-rd__ad { margin-top: 18px; width: 100%; border-radius: var(--a7-radius-card, 14px); overflow: hidden; }
/* Horizontal (16:9) banner strip — object-fit:cover crops any art to landscape. */
.a7g-rd__ad-native { position: relative; display: block; width: 100%; aspect-ratio: 32 / 9; border-radius: var(--a7-radius-card, 14px); overflow: hidden;
  border: 1px solid color-mix(in oklch, hsl(var(--base-content)) 10%, transparent);
  background: color-mix(in oklch, hsl(var(--base-content)) 4%, transparent); text-decoration: none; }
.a7g-rd__ad-native img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.a7g-rd__ad-native img.is-on { opacity: 1; }
/* Bottom scrim ("شدو") so the CTA stays readable over any image — canonical (cards/leagues). */
.a7g-rd__ad-native::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 46%; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent); pointer-events: none; }
/* CTA pill — the «الاسم» the admin set, IDENTICAL to the other sections' banners. */
.a7g-rd__ad-cta { position: absolute; inset-inline: 0; bottom: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 0 auto; width: max-content; max-width: 88%;
  padding: 5px 14px; border-radius: 999px;
  font-weight: 700; font-size: 12px; line-height: 1.1; color: #fff;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(6px) saturate(1.4); backdrop-filter: blur(6px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.28); box-shadow: 0 2px 6px rgba(0,0,0,.3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: transform .15s ease, background .15s, border-color .15s; }
/* Hover effect ("تأثير") — the pill scales up, matching cards/leagues. */
.a7g-rd__ad-native:hover .a7g-rd__ad-cta { transform: scale(1.06);
  background: rgba(0,0,0,.62); border-color: rgba(255,255,255,.55); }
.a7g-rd__ad-cta svg { flex: 0 0 auto; width: 14px; height: 14px; }
/* «إعلان» disclosure — small tag, top-start corner (matches cards). */
.a7g-rd__ad-badge { position: absolute; top: 6px; inset-inline-start: 6px; z-index: 2;
  font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: .02em;
  padding: 3px 6px; border-radius: 5px; pointer-events: none;
  background: color-mix(in oklch, #000 55%, transparent); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* Google clip: adsbygoogle.js forces height:auto!important inline on the <ins> —
   an OUTER cell it never touches caps the footprint and hides the overflow. */
.a7g-rd__ad-gclip { position: relative; width: 100%; max-height: 280px; overflow: hidden; border-radius: var(--a7-radius-card, 14px); }
.a7g-rd__ad-gclip .adsbygoogle { display: block; width: 100%; }

/* ── shared a11y + motion ────────────────────────────────────────────────── */
/* keyboard focus ring, scoped to our surfaces so the site's nav/footer keep
   their own focus styles. */
.a7g-wrap :focus-visible, .a7g-rd :focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
/* the text input sits inside .a7g-field, which already shows a focus ring via
   :focus-within — so the input must NOT draw its own outline too (that double
   ring looked like a stray rectangle). The field wrapper is the a11y indicator. */
.a7g-wrap .a7g-input:focus, .a7g-wrap .a7g-input:focus-visible { outline: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .a7g-tile, .a7g-field, .a7g-btn, .a7g-copy, .a7g-preview, .a7g-bc__a, .a7g-grow__btn, .a7g-rd__alt { transition: none; }
  .a7g-btn.is-loading .a7g-btn__ic svg { animation: none; }
  .a7g-result { animation: none; }
  .a7g-ring__bar { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Section-closed «.a7cs-» screen — the Card Designer closure standard,
   server-rendered by main.py::_closure_fragment(). Theme-aware via the shell
   DaisyUI vars; bilingual via .t-ar/.t-en (its own .a7cs-wrap-scoped toggle,
   since the closure is NOT nested in .a7g-wrap).
   ───────────────────────────────────────────────────────────────────────── */
.a7cs-wrap .t-en { display: none; }
body.font-english .a7cs-wrap .t-ar { display: none; }
body.font-english .a7cs-wrap .t-en { display: inline; }
.a7cs-wrap {
  --cs-accent: hsl(var(--primary));
  --cs-accent-press: color-mix(in oklch, hsl(var(--primary)) 82%, #000);
  --cs-accent-soft: color-mix(in oklch, hsl(var(--primary)) 12%, transparent);
  --cs-text: hsl(var(--base-content));
  --cs-muted: color-mix(in oklch, hsl(var(--base-content)) 62%, transparent);
  --cs-faint: color-mix(in oklch, hsl(var(--base-content)) 60%, transparent);
  --cs-surface-2: hsl(var(--base-200));
  --cs-border: color-mix(in oklch, hsl(var(--base-content)) 12%, transparent);
  --cs-border-strong: color-mix(in oklch, hsl(var(--base-content)) 18%, transparent);
  min-height: 66vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 22px; font-family: inherit; color: var(--cs-text);
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in oklch, hsl(var(--base-content)) 5%, transparent), transparent 60%);
}
.a7cs-card { width: 100%; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.a7cs-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--cs-accent-soft); color: var(--cs-accent); font-size: 13px; font-weight: 700; margin-bottom: 30px; border: 1px solid color-mix(in oklch, hsl(var(--primary)) 22%, transparent); }
.a7cs-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cs-accent); position: relative; }
.a7cs-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cs-accent); animation: a7cs-pulse 1.8s cubic-bezier(.22,.61,.36,1) infinite; }
@keyframes a7cs-pulse { 0% { transform: scale(1); opacity: .6 } 70% { transform: scale(3); opacity: 0 } 100% { opacity: 0 } }
.a7cs-iconwrap { position: relative; width: 128px; height: 128px; margin-bottom: 34px; display: flex; align-items: center; justify-content: center; }
.a7cs-ring { position: absolute; inset: 0; border-radius: 34px; border: 1.5px solid var(--cs-border-strong); animation: a7cs-floaty 5s ease-in-out infinite; }
.a7cs-ring--b { inset: -14px; border-radius: 42px; opacity: .5; animation-delay: .4s; }
.a7cs-iconbox { width: 96px; height: 96px; border-radius: 28px; background: linear-gradient(155deg, hsl(var(--primary)), var(--cs-accent-press)); display: flex; align-items: center; justify-content: center; color: hsl(var(--primary-content)); box-shadow: 0 14px 34px -10px color-mix(in oklch, hsl(var(--primary)) 45%, transparent); animation: a7cs-floaty 5s ease-in-out infinite; }
.a7cs-iconbox svg { width: 48px; height: 48px; }
@keyframes a7cs-floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
.a7cs-title { font-family: inherit; font-weight: 800; font-size: clamp(22px, 3.8vw, 28px); line-height: 1.3; margin: 0 0 14px; letter-spacing: -.3px; color: var(--cs-text); text-wrap: balance; }
.a7cs-sub { font-size: clamp(15px, 2.4vw, 18px); color: var(--cs-muted); line-height: 1.7; margin: 0 0 34px; max-width: 430px; }
.a7cs-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.a7cs-btn { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 24px; border-radius: 14px; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; font-family: inherit; transition: transform .08s, background .14s; }
.a7cs-btn svg { width: 18px; height: 18px; }
.a7cs-wrap[dir="rtl"] .a7cs-btn svg { transform: scaleX(-1); }
.a7cs-btn:active { transform: scale(.97); }
.a7cs-btn--primary { background: hsl(var(--primary)); color: hsl(var(--primary-content)); box-shadow: 0 6px 18px -4px color-mix(in oklch, hsl(var(--primary)) 55%, transparent); }
.a7cs-btn--primary:hover { background: var(--cs-accent-press); }
.a7cs-progress { margin-top: 40px; width: 100%; max-width: 300px; }
.a7cs-bar { height: 6px; border-radius: 999px; background: var(--cs-surface-2); overflow: hidden; border: 1px solid var(--cs-border); }
.a7cs-fill { height: 100%; width: var(--cs-progress, 68%); border-radius: 999px; background: linear-gradient(90deg, hsl(var(--primary)), var(--cs-accent-press)); animation: a7cs-grow 2.4s cubic-bezier(.22,.61,.36,1) both; }
@keyframes a7cs-grow { from { width: 0 } to { width: var(--cs-progress, 68%) } }
.a7cs-lbl { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--cs-faint); }
@media (prefers-reduced-motion: reduce) { .a7cs-ring, .a7cs-iconbox, .a7cs-pulse::after, .a7cs-fill { animation: none !important; } }