/* AXIS Finanças: desafios e sequência (Frente 30, rodada 5). Tudo com prefixo j30-, sobre os tokens do fin.css. */

/* ---------- herói da sequência: painel escuro de marca em camadas ---------- */
.j30-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:calc(var(--r) + 4px);padding:22px 20px 18px;margin:0 0 14px;color:#F4F1FF;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,154,61,.20),transparent 55%),radial-gradient(90% 80% at 100% 10%,rgba(132,54,254,.55),transparent 60%),
    linear-gradient(160deg,#1B1A4A 0%,#141534 55%,#0E0F2A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(255,255,255,.06) inset,0 24px 48px -18px rgba(20,21,52,.55),0 6px 16px rgba(20,21,52,.18);
  display:grid;grid-template-columns:auto 1fr;gap:6px 16px;align-items:center}
.j30-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.j30-hero::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,181,71,.0) 8%,rgba(255,196,120,.85) 50%,rgba(167,119,255,.0) 92%,transparent);
  box-shadow:0 0 18px 2px rgba(255,170,90,.35)}
.j30-hero small{font-size:12px;letter-spacing:.04em;color:rgba(244,241,255,.68)}
.j30-hero-c p{margin:4px 0 0;font-size:13.5px;color:rgba(244,241,255,.78)}
.j30-hero-n{display:flex;align-items:flex-end;gap:10px;line-height:1}
.j30-hero-n b{font-size:64px;font-weight:700;letter-spacing:-.04em;background:linear-gradient(180deg,#FFFFFF 30%,#E5D9FF);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.j30-hero-n span{font-size:13.5px;line-height:1.25;padding-bottom:9px;color:rgba(244,241,255,.82)}
.j30-hero-m,.j30-hero-a,.j30-hero-cal{grid-column:1 / -1;min-width:0}
.j30-hero-m{margin-top:10px;display:grid;gap:10px}
.j30-marco{display:grid;gap:7px;font-size:13px;color:rgba(244,241,255,.85)}
.j30-hero-i{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:rgba(244,241,255,.75)}
.j30-hero-i b{color:#fff;font-weight:600;margin-left:4px}
.j30-folgas{display:inline-flex;align-items:center;gap:5px}
.j30-folgas small{margin-left:3px}
.j30-folga{width:24px;height:26px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.10) inset}
.j30-folga svg{width:15px;height:15px;fill:none;stroke:rgba(255,255,255,.38);stroke-width:1.8}
.j30-folga.tem{background:linear-gradient(160deg,#7FB6FF,#3D6FE0);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 4px 10px rgba(61,111,224,.45)}
.j30-folga.tem svg{stroke:#fff;fill:rgba(255,255,255,.18)}
.j30-hero-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.j30-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 18px;border:0;border-radius:14px;cursor:pointer;font-weight:600;font-size:14.5px;color:#fff;
  background:linear-gradient(180deg,#9A5BFF,#7128F0);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 20px rgba(113,40,240,.45);transition:transform var(--t),box-shadow var(--t),filter var(--t)}
.j30-btn:hover{filter:brightness(1.07);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 12px 26px rgba(113,40,240,.55)}
.j30-btn:active{transform:translateY(1px) scale(.99)}
.j30-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.j30-btn.sec{background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;color:#F4F1FF}
.j30-btn.sec:hover{background:rgba(255,255,255,.13)}
.j30-btn:disabled{opacity:.6;cursor:default}
.j30-feito{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;border-radius:14px;font-size:14px;font-weight:600;color:#BDF5DA;background:rgba(79,209,160,.12);box-shadow:0 0 0 1px rgba(79,209,160,.28) inset}
.j30-feito svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* chama */
.j30-chama{position:relative;display:inline-grid;place-items:center;width:var(--t);height:calc(var(--t) * 1.2);flex:none}
.j30-chama svg{position:relative;width:100%;height:100%;overflow:visible}
.j30-chama-halo{position:absolute;inset:12% 6% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,140,60,.55),rgba(229,72,107,.18) 60%,transparent);filter:blur(6px)}
.j30-chama.apagada .j30-chama-halo{background:radial-gradient(closest-side,rgba(160,156,190,.30),transparent);opacity:.7}
.j30-chama-corpo{transform-origin:50% 100%}
.j30-chama.acesa .j30-chama-corpo{animation:j30-vela 3.2s ease-in-out infinite}
.j30-chama.acesa .j30-chama-miolo{transform-origin:50% 100%;animation:j30-miolo 2.1s ease-in-out infinite}
.j30-chama.acesa .j30-chama-halo{animation:j30-halo 3.2s ease-in-out infinite}
@keyframes j30-vela{0%,100%{transform:scale(1,1) skewX(0)}30%{transform:scale(.985,1.025) skewX(-1.2deg)}65%{transform:scale(1.01,.985) skewX(1deg)}}
@keyframes j30-miolo{0%,100%{transform:scale(1)}50%{transform:scale(.94,1.06)}}
@keyframes j30-halo{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* calendário de 5 semanas com peças em relevo */
.j30-hero-cal{margin-top:16px;padding:14px 12px 10px;border-radius:18px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px rgba(255,255,255,.07) inset}
.j30-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.j30-cal-h{text-align:center;font-size:11px;color:rgba(244,241,255,.5);padding-bottom:2px}
.j30-dia{min-width:0;height:clamp(34px,9vw,42px);display:grid;place-items:center;border-radius:10px;font-size:12px;color:rgba(244,241,255,.42);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 -1px 0 rgba(0,0,0,.25) inset;transition:transform var(--t)}
.j30-dia svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.j30-dia.j30-e-registro{color:#fff;background:linear-gradient(160deg,#B184FF,#7330EE 60%,#5A1FCC);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.22) inset,0 5px 12px rgba(115,48,238,.42)}
.j30-dia.j30-e-sem_gasto{color:#fff;background:linear-gradient(160deg,#5FE0AE,#139A68);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.2) inset,0 5px 12px rgba(19,154,104,.38)}
.j30-dia.j30-e-folga{color:#fff;background:linear-gradient(160deg,#7FB6FF,#3D6FE0);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.2) inset,0 5px 12px rgba(61,111,224,.38)}
.j30-dia.j30-e-futuro{opacity:.35}
.j30-dia.eh-hoje{box-shadow:0 0 0 2px #FFB547,0 0 16px rgba(255,181,71,.45)}
.j30-dia.j30-e-hoje{color:#FFD9A0}
.j30-dia.eh-hoje.j30-e-hoje{animation:j30-pulsa 2.4s ease-in-out infinite}
@keyframes j30-pulsa{0%,100%{box-shadow:0 0 0 2px #FFB547,0 0 10px rgba(255,181,71,.3)}50%{box-shadow:0 0 0 2px #FFB547,0 0 20px rgba(255,181,71,.6)}}
.j30-leg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:11.5px;color:rgba(244,241,255,.6)}
.j30-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:rgba(255,255,255,.12)}
.j30-leg i.j30-e-registro{background:#8E4DFA}.j30-leg i.j30-e-sem_gasto{background:#2FBF86}.j30-leg i.j30-e-folga{background:#5A8DF0}

/* barras */
.j30-barra{position:relative;display:block;height:8px;border-radius:99px;overflow:hidden;background:var(--bg-2);box-shadow:0 1px 2px rgba(0,0,0,.08) inset}
.j30-barra i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));
  box-shadow:0 0 10px color-mix(in srgb,var(--c) 45%,transparent);transition:width .6s cubic-bezier(.2,.7,.2,1);animation:j30-enche .9s cubic-bezier(.2,.7,.2,1) both}
.j30-barra i::after{content:"";position:absolute;inset:0 0 50% 0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.45),transparent)}
.j30-barra.clara{background:rgba(255,255,255,.12);box-shadow:none}
.j30-barra.grossa{height:12px}
@keyframes j30-enche{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}

/* nível e pontos */
.j30-nivel{display:grid;gap:12px}
.j30-nivel-t{display:flex;align-items:center;gap:12px}
.j30-nivel-t small{display:block;font-size:12px;color:var(--mudo)}
.j30-nivel-t b{font-size:17px;font-weight:600}
.j30-nv-selo{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;color:#fff;font-weight:700;font-size:19px;
  background:linear-gradient(160deg,#A777FF,#6E25E0 60%,#4B159F);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -3px 0 rgba(0,0,0,.18) inset,0 8px 18px rgba(110,37,224,.35)}
.j30-nivel-p{margin-left:auto;text-align:right}
.j30-nivel-p b{font-size:24px;font-weight:700;letter-spacing:-.02em}
.j30-nivel .nota{margin:-4px 0 0}
.j30-comp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.j30-comp span{padding:10px 12px;border-radius:14px;background:var(--card-2);box-shadow:0 0 0 1px var(--linha) inset}
.j30-comp b{display:block;font-size:17px;font-weight:600}
.j30-comp small{font-size:11.5px;color:var(--mudo)}

/* seções */
.j30-sec h2{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.j30-sec h2 .nota,.j30-sec h2 a{margin-left:auto;font-size:12.5px;font-weight:500}
.j30-lista,.j30-cats{display:grid;gap:10px}
.j30-tile{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;color:#fff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 62%,#fff),var(--c) 58%,color-mix(in srgb,var(--c) 78%,#000));
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -3px 0 rgba(0,0,0,.16) inset,0 8px 16px color-mix(in srgb,var(--c) 35%,transparent)}
.j30-tile svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.j30-tile.mini{width:36px;height:36px;border-radius:11px}
.j30-tile.mini svg{width:18px;height:18px}
.j30-des,.j30-cat{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:var(--card-2);
  box-shadow:0 0 0 1px var(--linha) inset,0 1px 2px rgba(22,22,46,.04);transition:transform var(--t),box-shadow var(--t)}
.j30-des.cumprido{background:linear-gradient(160deg,color-mix(in srgb,var(--ok) 9%,var(--card-2)),var(--card-2) 70%);box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 28%,transparent) inset}
.j30-des.falhou{opacity:.75}
.j30-des-c,.j30-cat-c{flex:1;min-width:0;display:grid;gap:7px}
.j30-des-t{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.j30-des-t b,.j30-cat-c b{font-size:15px;font-weight:600}
.j30-des-m{margin:0;font-size:13.5px;color:var(--fg-2)}
.j30-des-m b{color:var(--fg);font-weight:600}
.j30-des-a{margin:0;font-size:12.5px;color:var(--at)}
.j30-des-r,.j30-cat-r{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.j30-cat-r small{font-size:12px;color:var(--mudo)}
.j30-cat p{margin:0;font-size:13px;color:var(--mudo)}
.j30-cat:not(.off):hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--linha-2) inset,0 10px 24px rgba(22,22,46,.08)}
.j30-cat.off .j30-tile{filter:saturate(.35);opacity:.7}
.j30-pts{font-size:12.5px;font-weight:600;color:var(--roxo);padding:4px 9px;border-radius:99px;background:var(--roxo-s)}
.j30-pill{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:3px 9px;border-radius:99px;color:var(--mudo);background:var(--bg-2)}
.j30-pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.j30-pill.ok{color:var(--ok);background:var(--ok-s)}.j30-pill.cr{color:var(--cr);background:var(--cr-s)}.j30-pill.at{color:var(--at);background:var(--at-s)}.j30-pill.ro{color:var(--roxo);background:var(--roxo-s)}
.j30-link{border:0;background:none;padding:4px 2px;font-size:12.5px;color:var(--mudo);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.j30-link:hover{color:var(--cr)}
.j30-aceitar{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 14px;border:0;border-radius:11px;cursor:pointer;font-weight:600;font-size:13.5px;color:#fff;
  background:linear-gradient(180deg,#9A5BFF,#7128F0);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 5px 12px rgba(113,40,240,.32);transition:filter var(--t),transform var(--t)}
.j30-aceitar:hover{filter:brightness(1.08)}.j30-aceitar:active{transform:scale(.98)}
.j30-aceitar svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.j30-vazio{display:flex;align-items:center;gap:14px;padding:6px 2px}
.j30-vazio p{margin:3px 0 0;font-size:13px;color:var(--mudo)}

/* medalhas */
.j30-meds{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.j30-med{display:grid;justify-items:center;gap:6px;text-align:center;padding:14px 10px;border-radius:18px;background:var(--card-2);box-shadow:0 0 0 1px var(--linha) inset}
.j30-med b{font-size:14px;font-weight:600}
.j30-med small{font-size:12px;color:var(--mudo)}
.j30-med .j30-barra{width:80%;height:6px}
.j30-med-s{min-height:98px;display:grid;place-items:center}
.j30-rodape{text-align:center;margin:6px 12px 18px}

/* cartão do Início */
.j30-ini{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:12px 16px;transition:transform var(--t),box-shadow var(--t)}
.j30-ini:hover{transform:translateY(-1px)}
.j30-ini-t{flex:1;min-width:0;display:grid}
.j30-ini-t b{font-size:15.5px;font-weight:600}
.j30-ini-t b .num{font-size:19px;font-weight:700}
.j30-ini-t small{font-size:12.5px;color:var(--mudo)}
.j30-ini-d{display:flex;gap:4px}
.j30-ini-d i{width:9px;height:22px;border-radius:5px;background:var(--bg-2);box-shadow:0 1px 1px rgba(0,0,0,.06) inset}
.j30-ini-d i.j30-e-registro{background:linear-gradient(180deg,#B184FF,#6E25E0)}
.j30-ini-d i.j30-e-sem_gasto{background:linear-gradient(180deg,#5FE0AE,#139A68)}
.j30-ini-d i.j30-e-folga{background:linear-gradient(180deg,#7FB6FF,#3D6FE0)}
.j30-ini-d i.j30-e-hoje{box-shadow:0 0 0 1.5px #FFB547 inset}
.j30-ini-s{font-size:22px;color:var(--mudo)}

/* o app é uma coluna central (até uns 540 px) também no computador: o herói fica empilhado, só as grades abrem */
@media (min-width:500px){
  .j30-cats{grid-template-columns:repeat(2,1fr)}
  .j30-meds{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:380px){.j30-ini-d i:nth-child(-n+2){display:none}}
@media (prefers-reduced-motion:reduce){
  .j30-chama *,.j30-chama-halo,.j30-dia,.j30-barra i{animation:none!important;transition:none!important}
}