/* v202 (z5a): coloured cards with white text. Colours are FIXED per card type (signals green, Premium gold, groups blue); the Look only changes the background and the buttons.
   Mixin .z5c sets white text variables inside the card; --z1/--z2 = gradient, --zh = heading colour, --zg = glow (r,g,b). Loaded last. */
.z5c{--z1:color-mix(in srgb,var(--acc) 46%,#05070a);--z2:color-mix(in srgb,var(--acc) 22%,#05070a);--zh:color-mix(in srgb,var(--acc) 62%,#fff);
 --tx:#fff;--mut:rgba(255,255,255,.82);--line:rgba(255,255,255,.34);--bg:rgba(0,0,0,.28);--card2:rgba(0,0,0,.24);--sell:#ffc2bd;
 position:relative;color:#fff;border:1.5px solid color-mix(in srgb,var(--zh) 55%,transparent)!important;
 background:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.14),transparent 55%),linear-gradient(135deg,color-mix(in srgb,var(--z1) 60%,transparent),color-mix(in srgb,var(--z2) 72%,transparent))!important;-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
 box-shadow:0 10px 26px color-mix(in srgb,var(--acc) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.20)!important;border-radius:18px}
html[data-mode="light"] .z5c{box-shadow:0 8px 20px color-mix(in srgb,var(--acc) 28%,transparent),inset 0 1px 0 rgba(255,255,255,.20)!important}
.z5c.soon{--z1:color-mix(in srgb,var(--warn) 50%,#05070a);--z2:color-mix(in srgb,var(--warn) 24%,#05070a);--zh:color-mix(in srgb,var(--warn) 60%,#fff)}

/* signal card */
article.card.z5c[data-sym]::after{background:#fff;opacity:.13;width:78px;height:78px;right:14px;top:10px}
.z5c .pair,.z5c .pairb{color:#fff;font-size:19px;font-weight:800;letter-spacing:.01em}
.z5c .pairb .ic,.z5c .pair .ic,.z5c .pairb svg,.z5c .pair svg{width:26px;height:26px;vertical-align:-.3em;margin-right:6px;color:var(--zh)}
.z5c .badge{background:#fff;border-color:#fff;padding:4px 12px;font-size:12px;letter-spacing:.08em;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.z5c .badge.BUY{color:#0b6b3d}.z5c .badge.SELL{color:#b3261e}
.z5c .st{color:var(--mut);align-items:center}
.z5c .st.ACTIVE,.z5c .st.WIN,.z5c .st.LOSS,.z5c .st.DRAFT,.z5c .st.BREAKEVEN{color:var(--mut)}
.z5bd{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.z5bd i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.34);color:#fff;border:1px solid rgba(255,255,255,.35);line-height:1.2}
.z5bd i.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:.05em;box-shadow:0 0 8px #fff}
.z5bd i.new{background:#fff;color:#0b5a37;border-color:#fff}
.z5bd i.prem{background:#ffd27a;color:#3d2600;border-color:#ffd27a}
.z5bd i.win{background:#fff;color:#0b5a37;border-color:#fff}
.z5bd i.loss{background:#c0272f;border-color:#ffb3ad}
.z5bd i.be{background:#8a5a00;border-color:#ffd27a}
.z5bd i.draft{background:#475569;border-color:#cbd5e1}
/* bigger, clearer numbers */
.z5c .grid{gap:10px}
.z5c .grid div,.z5c .grid .cv{background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 11px;color:#fff}
.z5c .grid .cv{font-size:22px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.z5c .grid div{font-size:15px}
.z5c .grid small,.z5c .grid .cv small{color:var(--zh);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.z5c .grid .cv[data-lbl="Stop loss"]{border-left:4px solid #ff8f88}.z5c .grid .cv[data-lbl="Stop loss"] small{color:#ffc2bd}
.z5c .grid .cv[data-lbl^="TP"]{border-left:4px solid #a6f3c8}
.z5c .grid .cv[data-lbl="Entry"]{border-left:4px solid #bfe0ff}.z5c .grid .cv[data-lbl="Entry"] small{color:#cfe8ff}
.z5c .grid .cv.used,.z5c .grid .cv.used small{color:#fff}.z5c .grid .cv.used{opacity:.7;border-color:rgba(255,255,255,.3)}
.z5c .grid .cv.used small{color:var(--zh)}
.z5c .rr{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px;color:var(--mut);font-size:13px}
.z5c .rr b{color:#fff;font-size:15px}
.z5c .help{color:var(--mut)}
.z5c .hint{background:rgba(0,0,0,.28);border-color:#ffd27a;color:#ffe7ae}
.z5c details.rc{background:rgba(0,0,0,.26)}
.z5c details.rc summary{color:var(--zh)}
.z5c input,.z5c select,.z5c textarea{color:#fff}
.z5c .btn.sec{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
.z5c .btn.sec.danger{border-color:#ffb3ad;color:#ffe0dd}
.z5c .btn:not(.sec){box-shadow:0 4px 14px rgba(0,0,0,.28)}
.z5c .copied{opacity:.75}

/* Premium bar */
.promo.z5c{padding:16px;border-radius:18px;gap:14px}
.promo.z5c b{color:var(--zh);font-size:18px;font-weight:800}
.promo.z5c b .ic{font-size:24px;vertical-align:-.28em;margin-right:6px;color:var(--zh)}
.promo.z5c small{color:var(--mut);font-size:14px;margin-top:4px}
.promo.z5c small.nxt{color:#fff;font-weight:700}
.promo.z5c .perks li::before{color:var(--zh)}
.promo.z5c .perks{color:#fff}
.promo.z5c .btn{box-shadow:0 4px 14px rgba(0,0,0,.30)}

/* Quick approvals (admin) */
.adqc.z5c{margin:0 0 10px;padding:14px}
.adqc.z5c b{color:#fff}
.adqc.z5c .price{font-size:22px;font-weight:800;color:var(--zh);font-variant-numeric:tabular-nums}
#adq{background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 46%,#05070a),color-mix(in srgb,var(--acc) 22%,#05070a));border-color:var(--acc);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--acc) 40%,transparent)}
#adq .adqn{background:#d6303a;color:#fff;border:2px solid #fff;box-sizing:content-box;min-width:18px;height:18px;line-height:18px;top:-8px;right:-8px}
.adqh{margin:12px 0 6px;font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.adqh.pay,.adqh.grp,.adqh.cht{color:var(--acc)}

/* tap and slide animations: only when the app animations are on (Follow my phone, or Always on); Reduce motion = none */
html.fx-mot .z5c{transition:transform .14s ease,box-shadow .2s ease}
html.fx-mot .z5c:active{transform:scale(.985)}
html.fx-mot .z5c .btn:active:not(:disabled){transform:scale(.97)}
html.fx-mot #v.dd.fx-in article.z5c{animation:z5in .34s cubic-bezier(.2,.8,.2,1) both}
html.fx-mot #v.dd.fx-in article.z5c:nth-of-type(2){animation-delay:.05s}
html.fx-mot #v.dd.fx-in article.z5c:nth-of-type(3){animation-delay:.1s}
html.fx-mot #v.dd.fx-in article.z5c:nth-of-type(n+4){animation-delay:.14s}
html.fx-mot .z5bd i.live::before{animation:z5pulse 1.6s ease-in-out infinite}
@keyframes z5in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes z5pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){html.fx-mot .z5c,html.fx-mot #v.dd.fx-in article.z5c,html.fx-mot .z5bd i.live::before{animation:none!important;transition:none!important}}

/* v214: glass look like the carousel: see-through in dark; in light mode the colour stays strong (about 90 percent) so white text stays readable */
html[data-mode="light"] .z5c{background:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.14),transparent 55%),linear-gradient(135deg,color-mix(in srgb,var(--z1) 92%,transparent),color-mix(in srgb,var(--z2) 95%,transparent))!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.z5c{background:linear-gradient(135deg,var(--z1),var(--z2))!important}}
html[data-mode="light"] .z5c{--z1:color-mix(in srgb,var(--acc) 40%,#05070a);--z2:color-mix(in srgb,var(--acc) 20%,#05070a);--zh:color-mix(in srgb,var(--acc) 50%,#fff)}
html[data-mode="light"] .z5c.soon{--z1:color-mix(in srgb,var(--warn) 42%,#05070a);--z2:color-mix(in srgb,var(--warn) 22%,#05070a)}

/* v216: Copy Signal bright on every Look; Risk calculator and Track it as glass buttons; cancelled signals dimmed */
.z5c>.btn:not(.sec):not(.copied)[data-copy]{background:linear-gradient(135deg,#fff,color-mix(in srgb,var(--acc) 30%,#fff))!important;color:#10131a!important;box-shadow:0 0 18px color-mix(in srgb,var(--acc) 45%,transparent),0 4px 14px rgba(0,0,0,.28);font-size:16px}
.z5c .btn.copied{background:rgba(0,0,0,.28)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)}
.z5c .rc-track,.z5c summary.rc-summary-btn{background:rgba(255,255,255,.12)!important;border:1px solid color-mix(in srgb,var(--zh) 55%,transparent)!important;border-radius:14px}
.z5c .rc-track{color:#fff!important}
.z5c summary.rc-summary-btn{color:#fff!important;font-weight:800}.z5c summary.rc-summary-btn::after{color:var(--zh)}.z5c summary.rc-summary-btn .ic{color:var(--zh)}
.z5c:has(.st.CANCELLED){filter:saturate(.3) brightness(.92);--zh:#d5d9de}
.z5c:has(.st.CANCELLED) .z5bd i:first-child{background:#475569;border-color:#cbd5e1}
.z5c .rc-wrap details.rc{background:transparent!important}

/* v217 (z5b): payment request cards (member Your payment requests, admin payment list) */
.z5c .pst{background:rgba(0,0,0,.34);color:#fff;border:1px solid rgba(255,255,255,.4);font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 11px}
.z5c .pst.APPROVED{background:#fff;color:#0b5a37;border-color:#fff}
.z5c .pst.PENDING{background:#ffd27a;color:#3d2600;border-color:#ffd27a}
.z5c .pst.REJECTED,.z5c .pst.CANCELLED{background:#c0272f;color:#fff;border-color:#ffb3ad}
.z5c .z5amt{font-size:20px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;vertical-align:-.08em}
.z5c .ok{color:var(--zh);font-weight:700}
.z5c .row>b,.z5c .row>.pair{font-size:16px}

/* v218 (z5c): Tracker (recommended lot, level cards, risk card) and the chapter rows of the Books. Notes keep their own note colours; the Book reading page is not touched. */
.trk-rec.z5c,.trk-row.z5c,.trk-rcard.z5c{border-radius:18px}
.trk-rec.z5c{padding:14px 12px}
.z5c .trk-recv{color:#fff;font-size:40px;font-weight:800;text-shadow:0 0 18px color-mix(in srgb,var(--zh) 55%,transparent)}
.trk-rec.z5c.trk-recw .trk-recv{color:#ffd27a}
.trk-rec.z5c.trk-recw{border-color:#ffd27a!important}
.trk-rec.z5c small{color:var(--zh);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.z5c .trk-recs,.z5c .trk-recn,.z5c .trk-recx{color:var(--mut)}
.z5c .trk-recs b{color:#fff}
.trk-row.z5c .row b{font-size:16px}
.trk-row.z5c .st{color:var(--zh);font-weight:800}
.trk-row.z5c.cur{box-shadow:0 0 24px color-mix(in srgb,var(--acc) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.2)!important}
.trk-row.z5c .grid div{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.trk-row.z5c .grid small{font-weight:800}
.trk-rcard.z5c b{color:#fff}
.bk-row.z5c{border-radius:14px;padding:12px 14px}
.bk-row.z5c .bk-tx b{color:#fff;font-size:15.5px}.bk-row.z5c .bk-tx span{color:var(--mut);opacity:1}
.bk-row.z5c .bk-n{color:#fff;border-color:var(--zh)}.bk-row.z5c .bk-n.done{background:var(--zh);color:#10131a}
.trk-row.z5c.done{opacity:.82}

/* v219 (z5d): Settings (Account, Notifications, About, Risk disclosure) and the Login and sign-up form as glass cards. Inputs stay plain (white field, dark text) so typing is easy. Not changed: the Look and feel pickers, admin cards, forms in dialogs. */
.setgrid>.z5c>h3,#af.z5c>h2{color:#fff}
.setgrid>.z5c>h3{font-size:17px;font-weight:800;letter-spacing:.01em}
.setgrid>.z5c>h3::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--zh);margin-right:9px;vertical-align:.12em;box-shadow:0 0 10px var(--zh)}
#af.z5c{padding:18px 16px;border-radius:18px}
.z5c label{color:#fff}
.z5c input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),.z5c select,.z5c textarea{background:#fff;color:#10131a;border-color:rgba(255,255,255,.75)}
.z5c input::placeholder,.z5c textarea::placeholder{color:#5b6470}
.z5c .pwt{color:#10131a;font-weight:700}.z5c .pwt:hover{background:rgba(16,19,26,.08)}
.z5c .link{color:#fff;font-weight:700}
.z5c .err{color:#ffc2bd;font-weight:600}
.z5c .tcrow{color:#fff}
.z5c .sw input,.z5c .tcrow input{accent-color:var(--zh)}
.z5c .kv div{border-bottom-color:rgba(255,255,255,.22)}
.z5c .kv dt{color:var(--mut)}
.z5c details.acc summary{color:var(--zh);font-weight:800}
.z5c details.acc{background:rgba(0,0,0,.26)}
.z5c .acts .btn:not(.sec):not(.danger){background:#fff;color:#10131a;border-color:#fff}
.z5c .vpay{background:rgba(6,20,45,.58);border-color:#7cbcff}
html .z5c .vpt,html .z5c .tick.pay{color:#a8d4ff}
.z5c .vpn,.z5c .vpp{color:#fff}

/* v220: new vector FHG FX logo (icons/logo-fhg-bright.svg for dark surfaces, logo-fhg-deep.svg for light). The black box behind the old picture in light mode is gone. The Login card is always dark glass, so it always uses the bright logo. */
picture{display:contents}
html[data-mode="light"][data-theme="plain"] header .logo-img,html[data-mode="light"][data-theme="plain"] .lg-clear{background:none!important;padding:0!important;border-radius:0!important;box-shadow:none!important}
header .logo-img{height:34px;width:auto;filter:none}
@media(max-width:640px){header .logo-img{height:32px}}
html[data-theme="premium"] .logo-img{filter:none}
.lg-clear{width:100%;height:auto}
/* v220: the main button on the glass cards (Log in, Create account, Subscribe to Premium) is a bright white pill with dark text on every Look, dark and light */
html #af.z5c .btn:not(.sec),html .z5c .acts .btn:not(.sec):not(.danger){background:#fff!important;color:#10131a!important;border:1px solid #fff!important;box-shadow:0 0 16px color-mix(in srgb,var(--acc) 40%,transparent),0 4px 14px rgba(0,0,0,.28)!important;font-weight:800}

/* v269: FLOATING SEE-THROUGH CARDS. The frosted blur is off and the fill is very thin, so the trading doodles show through the Plans cards, the perk cards and the Books and Tracker cards. The coloured edge and glow stay, plus a soft shadow so the cards float. Text stays white (dark) or dark (light) for contrast. */
.pgl,.plan,.pk,.vpay,#bk2>section.card:not(.bk-ch),#trk>section.card:first-child{-webkit-backdrop-filter:none;backdrop-filter:none}
.pgl,.plan{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 18%,transparent),color-mix(in srgb,var(--cc) 4%,transparent) 80%),color-mix(in srgb,var(--card) 12%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--cc) 24%,transparent),0 12px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16)}
.pk{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 22%,transparent),color-mix(in srgb,var(--cc) 4%,transparent) 85%),color-mix(in srgb,var(--card) 10%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--cc) 30%,transparent),0 8px 18px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.18)}
.vpay{background:linear-gradient(145deg,color-mix(in srgb,#3b9cff 14%,transparent),color-mix(in srgb,#3b9cff 3%,transparent) 85%),color-mix(in srgb,var(--card) 10%,transparent);box-shadow:0 0 14px color-mix(in srgb,#3b9cff 22%,transparent),0 8px 18px rgba(0,0,0,.2)}
#bk2>section.card:not(.bk-ch),#trk>section.card:first-child{background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 12%,transparent),color-mix(in srgb,var(--acc) 3%,transparent) 85%),color-mix(in srgb,var(--card) 12%,transparent);border:1.5px solid color-mix(in srgb,var(--acc) 45%,var(--line));box-shadow:0 0 14px color-mix(in srgb,var(--acc) 20%,transparent),0 10px 22px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.14)}
html[data-mode="light"] .pgl,html[data-mode="light"] .plan{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 14%,transparent),color-mix(in srgb,var(--cc) 3%,transparent) 80%),color-mix(in srgb,var(--card) 26%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--cc) 20%,transparent),0 8px 18px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.6)}
html[data-mode="light"] .pk,html[data-mode="light"] .vpay{background:linear-gradient(145deg,color-mix(in srgb,var(--cc,#3b9cff) 14%,transparent),color-mix(in srgb,var(--cc,#3b9cff) 3%,transparent) 85%),color-mix(in srgb,var(--card) 24%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--cc,#3b9cff) 20%,transparent),0 6px 14px rgba(0,0,0,.08)}
html[data-mode="light"] #bk2>section.card:not(.bk-ch),html[data-mode="light"] #trk>section.card:first-child{background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 10%,transparent),color-mix(in srgb,var(--acc) 2%,transparent) 85%),color-mix(in srgb,var(--card) 28%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--acc) 16%,transparent),0 8px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6)}
@media(max-width:759px){.pgrid .pk:last-child:nth-child(odd){grid-column:1/-1}}

/* v270: FLOATING MOTION. The perk cards and the plan cards drift up and down about 4 px, slowly, each card a little out of step with the next. Off when the phone has Remove animations / Reduce motion on. */
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:no-preference){
.pk,.plans .plan{animation:fxFloat 5.2s ease-in-out infinite;will-change:transform}
.pgrid .pk:nth-child(2n){animation-duration:5.8s;animation-delay:-1.3s}
.pgrid .pk:nth-child(3n){animation-duration:6.4s;animation-delay:-2.6s}
.pgrid .pk:nth-child(5n){animation-delay:-3.9s}
.plans .plan:nth-child(2n){animation-duration:5.9s;animation-delay:-1.7s}
.plans .plan:nth-child(3n){animation-duration:6.5s;animation-delay:-3.1s}
}

/* v271: perk cards are buttons that open what they describe */
button.pk{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
button.pk::after{content:"\203A";position:absolute;right:12px;top:8px;font-size:24px;line-height:1;color:var(--cc);opacity:.9}
button.pk:active{filter:brightness(1.18)}
button.pk:focus-visible{outline:2px solid var(--cc);outline-offset:2px}

/* v272: SEE-THROUGH CARDS EVERYWHERE + FLOATING CAROUSEL. The carousel cards, the signal cards, Unlock Premium card, Settings cards and payment request cards get the same look as the Plans cards: no blur, thin fill so the doodles show, soft shadow. In light mode the .z5c cards keep their fill (white text needs it) and only lose the blur. The carousel cards also drift up and down 4 px (off with Reduce motion). */
.z5c,.car-c{-webkit-backdrop-filter:none;backdrop-filter:none}
html:not([data-mode="light"]) .z5c{background:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.10),transparent 55%),linear-gradient(145deg,color-mix(in srgb,var(--z1) 36%,transparent),color-mix(in srgb,var(--z2) 24%,transparent))!important;box-shadow:0 0 16px color-mix(in srgb,var(--acc) 26%,transparent),0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18)!important}
.car-c{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 22%,transparent),color-mix(in srgb,var(--cc) 4%,transparent) 80%),color-mix(in srgb,var(--card) 12%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--cc) 28%,transparent),0 12px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.16)}
html[data-mode="light"] .car-c{background:linear-gradient(145deg,color-mix(in srgb,var(--cc) 16%,transparent),color-mix(in srgb,var(--cc) 3%,transparent) 80%),color-mix(in srgb,var(--card) 26%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--cc) 22%,transparent),0 8px 18px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.6)}
.car-s{padding-top:8px;padding-bottom:12px;margin:-6px 0 -10px}
@media(prefers-reduced-motion:no-preference){
/* v279: the carousel cards float 7 px (was 4, barely seen); the perk and plan cards keep fxFloat at 4 px */
@keyframes carFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.car-c{animation:carFloat 5.4s ease-in-out infinite;will-change:transform}
.car-s .car-c:nth-child(2n){animation-duration:6s;animation-delay:-1.4s}
.car-s .car-c:nth-child(3n){animation-duration:6.6s;animation-delay:-2.8s}
.car-s .car-c:nth-child(5n){animation-delay:-4.1s}
}

/* v273: ALL Tracker cards are see-through like the Plans cards (v269 only did the first one). No float. */
#trk>section.card{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 12%,transparent),color-mix(in srgb,var(--acc) 3%,transparent) 85%),color-mix(in srgb,var(--card) 12%,transparent);border:1.5px solid color-mix(in srgb,var(--acc) 45%,var(--line));box-shadow:0 0 14px color-mix(in srgb,var(--acc) 20%,transparent),0 10px 22px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.14)}
html[data-mode="light"] #trk>section.card{background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 10%,transparent),color-mix(in srgb,var(--acc) 2%,transparent) 85%),color-mix(in srgb,var(--card) 28%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--acc) 16%,transparent),0 8px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6)}

/* v279: the Look and Feel cards in Settings get the same see-through Plans look as the Account card */
section.card#look,section.card#feel{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 12%,transparent),color-mix(in srgb,var(--acc) 3%,transparent) 85%),color-mix(in srgb,var(--card) 12%,transparent);border:1.5px solid color-mix(in srgb,var(--acc) 45%,var(--line));box-shadow:0 0 14px color-mix(in srgb,var(--acc) 20%,transparent),0 10px 22px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.14)}
html[data-mode="light"] section.card#look,html[data-mode="light"] section.card#feel{background:linear-gradient(145deg,color-mix(in srgb,var(--acc) 10%,transparent),color-mix(in srgb,var(--acc) 2%,transparent) 85%),color-mix(in srgb,var(--card) 28%,transparent);box-shadow:0 0 12px color-mix(in srgb,var(--acc) 16%,transparent),0 8px 16px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6)}