/* Upscale Squad: hero moments and the time-of-day sky. Staff only. */

/* ---------- Sky on the My day panel ---------- */
.hero > .sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero.part-morning, .hero.part-afternoon, .hero.part-evening, .hero.part-night { isolation: isolate; }
.hero[class*="part-"]::before { z-index: 0; opacity: .35; }
.hero[class*="part-"]::after { z-index: 1; }
.hero[class*="part-"] > *:not(.sky) { z-index: 2; }
.sky::before { content: ""; position: absolute; inset: 0; }
.sky-morning::before { background: linear-gradient(180deg, rgba(255, 170, 90, .0) 0%, rgba(255, 140, 70, .16) 55%, rgba(255, 196, 120, .32) 100%); }
.sky-afternoon::before { background: linear-gradient(180deg, rgba(60, 170, 255, .20), rgba(255, 220, 140, .10) 70%, rgba(255, 210, 120, .18)); }
.sky-evening::before { background: linear-gradient(180deg, rgba(110, 60, 200, .18), rgba(255, 70, 110, .20) 60%, rgba(255, 150, 70, .30)); }
.sky-night::before { background: linear-gradient(180deg, rgba(20, 40, 110, .35), rgba(10, 14, 30, .2)); }

.sky .orb { position: absolute; border-radius: 50%; }
.sky-morning .orb { width: 90px; height: 90px; right: 270px; top: 34px; background: radial-gradient(circle, #FFE9A8 0 35%, #FFB347 60%, rgba(255, 140, 60, 0) 72%);
  box-shadow: 0 0 80px 30px rgba(255, 170, 70, .35); animation: sunrise 2.6s cubic-bezier(.2, .7, .2, 1) both; }
.sky-afternoon .orb { width: 70px; height: 70px; right: 280px; top: 22px; background: radial-gradient(circle, #FFFBE6 0 40%, #FFE07A 62%, rgba(255, 224, 122, 0) 72%);
  box-shadow: 0 0 90px 40px rgba(255, 230, 140, .25); animation: pulse 4s ease-in-out infinite; }
.sky-evening .orb { width: 110px; height: 110px; right: 250px; top: 70px; background: radial-gradient(circle, #FFD9A0 0 30%, #FF7A4D 58%, rgba(255, 90, 80, 0) 72%);
  box-shadow: 0 0 90px 30px rgba(255, 100, 80, .35); animation: sunset 3s ease-out both; }
.sky-night .orb { width: 54px; height: 54px; right: 290px; top: 26px; background: radial-gradient(circle at 35% 35%, #F4F7FF 0 45%, #C9D3EA 70%);
  box-shadow: 0 0 40px 10px rgba(200, 215, 255, .25), inset -12px -6px 0 rgba(150, 165, 200, .35); }
.sky .stars { position: absolute; inset: 0 0 40% 0;
  background-image: radial-gradient(1.4px 1.4px at 10% 30%, #fff, transparent), radial-gradient(1.2px 1.2px at 24% 70%, #fff, transparent), radial-gradient(1.6px 1.6px at 38% 20%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 52% 55%, #fff, transparent), radial-gradient(1.4px 1.4px at 66% 25%, #fff, transparent), radial-gradient(1.2px 1.2px at 80% 60%, #fff, transparent), radial-gradient(1.6px 1.6px at 92% 15%, #fff, transparent);
  animation: twinkle 3s ease-in-out infinite alternate; }
.sky-afternoon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(0deg, rgba(255, 220, 150, .12), transparent);
  animation: shimmer 2.2s ease-in-out infinite; }

.sky .skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; fill: rgba(5, 8, 14, .55); }
.sky-morning .skyline, .sky-afternoon .skyline { fill: rgba(10, 14, 22, .38); }
.sky .wins { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; }
.sky .wins i { position: absolute; width: 4px; height: 4px; background: #FFD27A; box-shadow: 0 0 6px #FFC14D; opacity: .2; animation: blink 3.2s ease-in-out infinite; }

/* The hero's entrance follows the time of day. */
.hero.part-morning::after { animation: rise 1.6s cubic-bezier(.2, .8, .2, 1) both, floaty 5s 1.6s ease-in-out infinite; }
.hero.part-evening::after { animation: land 1.1s cubic-bezier(.3, 1.4, .5, 1) both, floaty 5s 1.1s ease-in-out infinite; }
.hero.part-night::after { filter: drop-shadow(0 0 34px rgba(47, 164, 255, .55)); }
.hero .quip { margin-top: 10px; display: inline-block; font: 600 13.5px/1.4 var(--body, inherit); color: #FFD9A0; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1); padding: 6px 12px; animation: quipIn .7s .4s both; }

@keyframes sunrise { from { transform: translateY(200px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sunset { from { transform: translateY(-60px); } to { transform: translateY(0); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
@keyframes shimmer { 50% { transform: translateY(-3px) scaleY(1.06); opacity: .6; } }
@keyframes blink { 0%, 100% { opacity: .15; } 40%, 60% { opacity: .95; } }
@keyframes rise { from { transform: translateY(160px); opacity: 0; } to { transform: none; opacity: .95; } }
@keyframes land { 0% { transform: translateY(-260px) scale(.9); opacity: 0; } 70% { transform: translateY(8px) scaleY(.96); opacity: 1; } 100% { transform: none; } }
@keyframes quipIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Birthday banner and badges ---------- */
.card.party { display: flex; gap: 14px; align-items: center; background: linear-gradient(120deg, rgba(255, 196, 60, .16), rgba(255, 43, 58, .10)); }
.card.party .pe { font-size: 34px; animation: wiggle 1.4s ease-in-out infinite; }
.card.party b { display: block; margin-bottom: 6px; }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.bdg { text-align: center; padding: 10px 6px; border: 1px solid var(--edge); background: rgba(255, 255, 255, .03); }
.bdg span { display: block; font-size: 28px; line-height: 1.1; }
.bdg b { display: block; font-size: 11.5px; margin-top: 4px; }
.bdg small { color: var(--muted); font-size: 10.5px; }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }

/* ---------- Hero moments ---------- */
.moment { position: fixed; right: 18px; bottom: 18px; z-index: 9000; width: 330px; max-width: calc(100vw - 32px); pointer-events: none; animation: mSlide .45s cubic-bezier(.2, 1.2, .4, 1) both; }
.moment.out { animation: mSlide .3s reverse both; }
.m-box { pointer-events: auto; position: relative; background: #FFFFFF; color: #14161B; border: 1px solid #E3E7EE; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  overflow: hidden; box-shadow: 0 18px 50px rgba(18, 30, 60, .22); }
.m-box::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, #2FA4FF, #FF2B3A); transform-origin: left; animation: mTimer 7s linear both; }
.moment:hover .m-box::after { animation-play-state: paused; }
.m-stage { position: relative; height: 170px; overflow: hidden; background: radial-gradient(circle at 50% 118%, rgba(47, 164, 255, .30), transparent 60%), linear-gradient(180deg, #DDEEFF 0%, #F3F8FF 70%, #FFFFFF 100%); }
.m-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: linear-gradient(90deg, transparent, rgba(47, 107, 255, .35), transparent); }
.m-sky { position: absolute; inset: 0; background-image: linear-gradient(rgba(18, 62, 133, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 62, 133, .05) 1px, transparent 1px); background-size: 24px 24px; }
.m-text { padding: 12px 14px 14px; }
.m-text b { display: block; font: 800 14.5px/1.25 var(--display, inherit); letter-spacing: -.01em; text-transform: uppercase; }
.m-text p { margin: 5px 0 0; color: #5B6473; font-size: 12.5px; line-height: 1.45; }
.m-off { margin-left: auto; align-self: center; font-size: 11px; color: #8A92A2; text-decoration: underline; }
.m-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.m-text { animation: mUp .4s .2s both; }
.m-changes .m-text { animation-delay: .3s; }

/* the poster card */
.m-card { position: absolute; width: 70px; height: 90px; left: 60%; bottom: 26px; background: #fff; border: 2px solid #CBD5E6; box-shadow: 0 6px 16px rgba(18, 30, 60, .15); padding: 8px 7px; }
.m-card i { display: block; height: 6px; background: #E3E9F3; margin-bottom: 8px; }
.m-card i:first-child { height: 28px; background: linear-gradient(135deg, #2F6BFF, #D0111B); }
.m-card i:last-of-type { width: 60%; }
.m-card .stamp { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) rotate(-14deg); font: 900 11px/1 var(--display, inherit); letter-spacing: .06em;
  padding: 4px 5px; border: 2px solid currentColor; animation: stamp .35s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.m-changes .stamp { color: #E0202E; background: rgba(255, 255, 255, .92); }
.m-approved .stamp { color: #13A15B; background: rgba(255, 255, 255, .92); }

/* CHANGES: the hero dashes in and kicks the old version away */
.m-changes .m-card .stamp { animation-delay: .1s; }
.m-pow { position: absolute; left: 56%; top: 20%; z-index: 3; font: 900 32px/1 var(--display, inherit); color: #FFD23F; -webkit-text-stroke: 2px #D0111B; text-shadow: 3px 3px 0 #D0111B;
  transform: rotate(-12deg) scale(0); animation: pow 2.2s both; }
.m-pow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; z-index: -1;
  background: conic-gradient(from 0deg, #FFD23F 0 10deg, transparent 10deg 30deg, #FFD23F 30deg 40deg, transparent 40deg 60deg, #FFD23F 60deg 70deg, transparent 70deg 90deg, #FFD23F 90deg 100deg, transparent 100deg 120deg, #FFD23F 120deg 130deg, transparent 130deg 150deg, #FFD23F 150deg 160deg, transparent 160deg 180deg, #FFD23F 180deg 190deg, transparent 190deg 210deg, #FFD23F 210deg 220deg, transparent 220deg 240deg, #FFD23F 240deg 250deg, transparent 250deg 270deg, #FFD23F 270deg 280deg, transparent 280deg 300deg, #FFD23F 300deg 310deg, transparent 310deg 330deg, #FFD23F 330deg 340deg, transparent 340deg);
  border-radius: 50%; opacity: .55; }

/* APPROVED: card stamped, hero flies up past it */
.m-approved .m-card { left: 16%; animation: mUp .4s both; }

/* LEVEL UP: rings of power */
.m-ring { position: absolute; left: 50%; bottom: 44px; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; border: 3px solid #2FA4FF;
  box-shadow: 0 0 24px #2FA4FF, inset 0 0 24px #2FA4FF; animation: ring 1.6s ease-out infinite; }
.m-ring.r2 { border-color: #FF2B3A; box-shadow: 0 0 24px #FF2B3A, inset 0 0 24px #FF2B3A; animation-delay: .8s; }
@keyframes ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(5); opacity: 0; } }

/* BADGE: the medal spins in */
.m-medal { position: absolute; left: 18%; top: 30px; width: 74px; height: 74px; display: grid; place-items: center; font-size: 38px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #F5B53D 55%, #B9801A); box-shadow: 0 0 30px rgba(245, 181, 61, .6), inset 0 -6px 0 rgba(0, 0, 0, .2);
  animation: medal 1.2s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes medal { 0% { transform: rotateY(0) scale(0); } 70% { transform: rotateY(720deg) scale(1.15); } 100% { transform: rotateY(720deg) scale(1); } }

/* BIRTHDAY: balloons */
.m-balloons span { position: absolute; bottom: -50px; font-size: 32px; animation: balloon 4s ease-in infinite; }
.m-balloons span:nth-child(1) { left: 12%; } .m-balloons span:nth-child(2) { left: 30%; animation-delay: .7s; font-size: 34px; }
.m-balloons span:nth-child(3) { left: 72%; animation-delay: 1.2s; } .m-balloons span:nth-child(4) { left: 86%; animation-delay: .3s; font-size: 36px; }
@keyframes balloon { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-230px) rotate(8deg); } }
@keyframes wave { 0%, 100% { transform: translateX(-50%) rotate(0); } 50% { transform: translateX(-50%) rotate(3deg); } }

/* ALL CLEAR: karak time */
.m-cup { position: absolute; left: 20%; bottom: 26px; font-size: 40px; animation: mUp .5s .3s both; }
.m-cup::after { content: "〰"; position: absolute; left: 14px; top: -26px; font-size: 22px; color: rgba(255, 255, 255, .5); animation: steam 2s ease-in-out infinite; }
@keyframes steam { 0% { transform: translateY(6px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }

@keyframes mSlide { from { transform: translateY(30px) scale(.94); opacity: 0; } }
@keyframes mTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes mPop { from { transform: scale(.8) translateY(20px); opacity: 0; } }
@keyframes mUp { from { transform: translateY(16px); opacity: 0; } }
@keyframes stamp { from { transform: translate(-50%, -50%) rotate(-14deg) scale(2.4); opacity: 0; } }

@media (max-width: 880px) { .hero > .sky .orb { right: 24px; top: 18px; bottom: auto; width: 54px; height: 54px; } }
@media (max-width: 480px) { .moment { right: 16px; left: 16px; bottom: 16px; width: auto; } .m-stage { height: 120px; } }
@media (prefers-reduced-motion: reduce) {
  .sky *, .hero[class*="part-"]::after, .moment *, .card.party .pe { animation: none !important; }
  .m-changes .m-card { opacity: 0; } .m-changes .chibi { left: 30%; } .m-pow { transform: rotate(-8deg); opacity: 1; }
}

/* ---------- The little Squad hero (chibi SVG) ---------- */
.chibi { position: absolute; bottom: -6px; height: 168px; width: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(18, 30, 60, .25)) drop-shadow(0 0 12px rgba(47, 164, 255, .35)); }
.chibi .c-all, .chibi .c-leg, .chibi .c-arm, .chibi .c-head, .chibi .c-body { transform-box: view-box; }
.chibi .c-leg-l { transform-origin: 62px 122px; } .chibi .c-leg-r { transform-origin: 77px 122px; }
.chibi .c-arm-l { transform-origin: 49px 99px; } .chibi .c-arm-r { transform-origin: 91px 99px; }
.chibi .c-head { transform-origin: 70px 92px; } .chibi .c-all { transform-origin: 70px 170px; }
.chibi .c-eye { animation: cBlink 4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
/* idle breathing for every moment */
.chibi .c-head { animation: cNod 2.4s ease-in-out infinite; }
@keyframes cNod { 50% { transform: rotate(3deg) translateY(1px); } }

/* CHANGES: runs in, jumps and kicks the poster away */
.m-changes .chibi { left: 2%; }
.m-changes .chibi .c-all { animation: cRunIn 2.4s cubic-bezier(.4, 0, .2, 1) both; }
.m-changes .chibi .c-leg-l { animation: cRunL 2.4s linear both; }
.m-changes .chibi .c-leg-r { animation: cKick 2.4s linear both; }
.m-changes .chibi .c-arm-l { animation: cArmBack 2.4s linear both; }
.m-changes .chibi .c-arm-r { animation: cArmFwd 2.4s linear both; }
@keyframes cRunIn { 0% { transform: translateX(-160px); } 38% { transform: translateX(70px); } 46% { transform: translateX(84px) translateY(-18px) rotate(-8deg); }
  56% { transform: translateX(90px) translateY(-22px) rotate(-14deg); } 70% { transform: translateX(86px) translateY(0) rotate(0); } 100% { transform: translateX(70px); } }
@keyframes cRunL { 0%, 8%, 16%, 24%, 32% { transform: rotate(28deg); } 4%, 12%, 20%, 28%, 36% { transform: rotate(-28deg); } 46%, 60% { transform: rotate(20deg); } 72%, 100% { transform: none; } }
@keyframes cKick { 0%, 8%, 16%, 24%, 32% { transform: rotate(-28deg); } 4%, 12%, 20%, 28%, 36% { transform: rotate(28deg); } 46% { transform: rotate(30deg); }
  54%, 62% { transform: rotate(-105deg); } 74%, 100% { transform: none; } }
@keyframes cArmBack { 0%, 8%, 16%, 24%, 32% { transform: rotate(-35deg); } 4%, 12%, 20%, 28%, 36% { transform: rotate(35deg); } 54%, 62% { transform: rotate(60deg); } 76%, 100% { transform: none; } }
@keyframes cArmFwd { 0%, 8%, 16%, 24%, 32% { transform: rotate(35deg); } 4%, 12%, 20%, 28%, 36% { transform: rotate(-35deg); } 54%, 62% { transform: rotate(-70deg); } 76%, 100% { transform: rotate(-150deg); } }
.m-changes .m-card { animation: kicked 2.4s cubic-bezier(.6, 0, .4, 1) both; }
.m-changes .m-pow { animation: pow 2.4s both; }
@keyframes kicked { 0%, 52% { transform: none; opacity: 1; } 56% { transform: translate(20px, -8px) rotate(25deg); opacity: 1; } 100% { transform: translate(170px, -120px) rotate(540deg) scale(.5); opacity: 0; } }
@keyframes pow { 0%, 52% { transform: rotate(-12deg) scale(0); opacity: 0; } 60% { transform: rotate(-12deg) scale(1.3); opacity: 1; } 72%, 100% { transform: rotate(-8deg) scale(1); opacity: 1; } }

/* APPROVED: jumps for joy, both arms up */
.m-approved .chibi { left: 52%; }
.m-approved .chibi .c-all { animation: cJump .9s .3s cubic-bezier(.3, 0, .3, 1) 2 both; }
.m-approved .chibi .c-arm-l { animation: cCheerL .9s .3s ease-in-out 2 both; }
.m-approved .chibi .c-arm-r { animation: cCheerR .9s .3s ease-in-out 2 both; }
.m-approved .chibi .c-leg-l { animation: cTuckL .9s .3s ease-in-out 2 both; }
.m-approved .chibi .c-leg-r { animation: cTuckR .9s .3s ease-in-out 2 both; }
@keyframes cJump { 0%, 100% { transform: none; } 20% { transform: scaleY(.9); } 55% { transform: translateY(-34px); } }
@keyframes cCheerL { 0%, 100% { transform: rotate(150deg); } 50% { transform: rotate(175deg); } }
@keyframes cCheerR { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-175deg); } }
@keyframes cTuckL { 50% { transform: rotate(25deg); } } @keyframes cTuckR { 50% { transform: rotate(-25deg); } }

/* LEVEL UP: crouch, power up, float */
.m-levelup .chibi { left: 50%; margin-left: -65px; }
.m-levelup .chibi .c-all { animation: cPower 1.4s cubic-bezier(.3, 1.4, .5, 1) both, cHover 2s 1.4s ease-in-out infinite; }
.m-levelup .chibi .c-arm-l { animation: cFistL 1.4s both; } .m-levelup .chibi .c-arm-r { animation: cFistR 1.4s both; }
@keyframes cPower { 0% { transform: scale(.7) translateY(10px); filter: brightness(2.5); } 40% { transform: scaleY(.85); } 100% { transform: translateY(-14px); } }
@keyframes cHover { 50% { transform: translateY(-20px); } 0%, 100% { transform: translateY(-14px); } }
@keyframes cFistL { 60%, 100% { transform: rotate(160deg); } } @keyframes cFistR { 60%, 100% { transform: rotate(-30deg); } }

/* BADGE: holds the medal up */
.m-badge .chibi { left: 50%; }
.m-badge .chibi .c-arm-r { animation: cHoldUp 1s .3s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes cHoldUp { to { transform: rotate(-165deg); } }
.m-badge .chibi .c-medal { animation: cShine 1.2s 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes cShine { to { filter: brightness(1.5) drop-shadow(0 0 6px #FFD23F); } }

/* BIRTHDAY: party hat and a happy wave */
.m-birthday .chibi { left: 50%; margin-left: -65px; }
.m-birthday .chibi .c-arm-r { animation: cWave .5s ease-in-out infinite alternate; }
.m-birthday .chibi .c-all { animation: cBounce .6s ease-in-out infinite alternate; }
@keyframes cWave { from { transform: rotate(-140deg); } to { transform: rotate(-175deg); } }
@keyframes cBounce { to { transform: translateY(-6px); } }

/* ALL CLEAR: karak sip */
.m-clear .chibi { left: 50%; margin-left: -65px; }
.m-clear .chibi .c-arm-r { animation: cSip 2.4s ease-in-out infinite; }
.m-clear .chibi .c-head { animation: cSipHead 2.4s ease-in-out infinite; }
@keyframes cSip { 0%, 30%, 100% { transform: rotate(-20deg); } 50%, 75% { transform: rotate(-115deg); } }
@keyframes cSipHead { 50%, 75% { transform: rotate(6deg); } }
.m-clear .m-cup { display: none; }
@media (max-width: 480px) { .chibi { height: 140px; } }
@media (prefers-reduced-motion: reduce) { .chibi * { animation: none !important; } }

/* ---------- Operations page ---------- */
.q-list .task { position: relative; padding-left: 22px; }
.q-dot { position: absolute; left: 4px; top: 18px; width: 9px; height: 9px; border-radius: 50%; background: #9AA3B2; }
.q-3 .q-dot { background: #E0202E; box-shadow: 0 0 0 4px rgba(224, 32, 46, .15); animation: qPulse 1.6s ease-in-out infinite; }
.q-2 .q-dot { background: #F5A524; }
@keyframes qPulse { 50% { box-shadow: 0 0 0 7px rgba(224, 32, 46, 0); } }
.ppl .who { display: flex; gap: 10px; align-items: center; } .ppl .who small { display: block; color: var(--muted); font-size: 11.5px; }
.ppl td.late { color: #E0202E; font-weight: 700; }
.pill { display: inline-block; padding: 3px 9px; font-size: 11.5px; font-weight: 700; border-radius: 99px; white-space: nowrap; }
.p-bad { background: rgba(224, 32, 46, .12); color: #C81E2A; } .p-warn { background: rgba(245, 165, 36, .16); color: #A86A00; }
.p-ok { background: rgba(19, 161, 91, .12); color: #0F8A4C; } .p-free { background: rgba(47, 107, 255, .12); color: #2459D6; }
.loadbar { width: 120px; height: 7px; background: rgba(128, 140, 160, .18); margin-bottom: 3px; } .loadbar i { display: block; height: 100%; background: linear-gradient(90deg, #2FA4FF, #FF2B3A); }
.speed { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.speed > div { padding: 12px; border: 1px solid var(--edge); } .speed b { display: block; font: 800 22px/1.1 var(--display, inherit); }
.speed span { display: block; font-size: 12.5px; margin-top: 4px; } .speed small { color: var(--muted); font-size: 11px; }
.feed { list-style: none; margin: 0; padding: 0; } .feed li { padding: 8px 0 8px 14px; border-bottom: 1px solid var(--edge); position: relative; }
.feed li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: #9AA3B2; }
.feed .f-approved::before, .feed .f-done::before, .feed .f-published::before { background: #13A15B; } .feed .f-changes::before { background: #E0202E; } .feed .f-review::before, .feed .f-sent::before { background: #2F6BFF; }
.feed a { display: block; font-size: 13.5px; } .feed small { color: var(--muted); font-size: 11.5px; }