/* ============================================================================
   px-learn.css — Learn v2 home / inner level page / glossary (§9.2 / §9.3 / §6).
   Requires px-tokens + px-base (PxFoundationAsset). Tokens only; mobile-first;
   §2.9 breakpoints only.
   ============================================================================ */

.ps-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Top HUD (display only, §9.1) --------------------------------------- */
.pxl-hud {
  position: sticky; top: 0; z-index: var(--px-z-sticky);
  display: flex; align-items: center; gap: var(--px-space-3);
  padding: var(--px-space-3) var(--px-space-5);
  background: var(--px-surface-0);
  border-bottom: 1px solid var(--px-surface-200);
}
.pxl-hud__brand { font: var(--px-text-h3); color: var(--px-brand); text-decoration: none; }
.pxl-hud__spacer { flex: 1 1 auto; }
.pxl-counter {
  display: inline-flex; align-items: center; gap: var(--px-space-2);
  padding: 7px var(--px-space-3);
  background: #F8F8F8; color: #1B1B1B;
  border-radius: var(--px-radius-pill); font: var(--px-text-caption);font-size:1rem; font-weight: 600;
}
/* .pxl-tip .pxl-counter__icon { width:24px; height:24px; object-fit: contain; } */
.pxl-streak {
  display: inline-flex; align-items: center; gap: var(--px-space-1);
  padding: 7px var(--px-space-3);
  background: #F8F8F8; color: #1B1B1B;
  border-radius: var(--px-radius-pill); font: var(--px-text-caption); font-weight: 600;
}
.pxl-streak__flame.is-dormant { filter: grayscale(1); opacity: 0.6; }

.pxl-main { max-width: 1200px; margin: 0 auto; padding: var(--px-space-8) var(--px-space-5); }

/* ---- Crowns (shared) --------------------------------------------------- */
.pxl-crown { color: var(--px-ink-300); line-height: 0; display: inline-flex; }
.pxl-crown.is-on { color: var(--px-streak); }
.pxl-crownmeter { display: inline-flex; gap: 2px; }
.pxl-crownpill {
  display: inline-flex; align-items: center; gap: var(--px-space-1);
  padding: var(--px-space-1) var(--px-space-3);
  background: var(--px-bamboo-on); color: var(--px-ink-700);
  border-radius: var(--px-radius-pill); font: var(--px-text-caption); font-weight: 600;
  white-space: nowrap;
}

/* ---- Learn home (§9.2) ------------------------------------------------- */
/* Light-blue learner backdrop (reference). The global header/footer keep their own bg. */
.page-wrapper.learn-v2 { background: var(--px-info-subtle, #EEF3FB); min-height: 60vh; }
.pxl-home { max-width: 1240px; margin: 0 auto; padding: var(--px-space-6) var(--px-space-6) var(--px-space-8); }
/* The global header is taller (fixed) when signed in — clear it on desktop. */
@media (min-width: 992px) { .pxl-home { padding-top: calc(var(--px-space-8) + var(--px-space-6)); } }
.pxl-home__title { margin: 0; }
.pxl-home__sub { margin: var(--px-space-1) 0 var(--px-space-6); color: var(--px-ink-500); }
.pxl-levelband--mobile { display: none; }
.pxl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--px-space-5);
}
.pxl-levelcard {
  display: flex; flex-direction: column;
  background: var(--px-surface-0);
  border-radius: var(--px-radius-md);          /* level card (§6.2) */
  box-shadow: var(--px-shadow-card);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow var(--px-dur-fast) var(--px-ease-out),
              transform var(--px-dur-fast) var(--px-ease-out);
}
.pxl-levelcard:hover { box-shadow: var(--px-shadow-md); transform: translateY(-3px); }
.pxl-levelcard__media {
  aspect-ratio: 4 / 3;                          /* room for the portrait illustration */
  background: var(--px-surface-50) center / contain no-repeat;  /* full illustration, light panel */
  padding: var(--px-space-4);
  display: grid; place-items: center;
}
.pxl-levelcard__num { font: var(--px-text-display); color: var(--px-brand); opacity: 0.85; }
.pxl-levelcard__body { padding: var(--px-space-5); display: flex; flex-direction: column; gap: var(--px-space-3); }
.pxl-levelcard__title { margin: 0; }
.pxl-levelcard__tagline { margin: 0; color: var(--px-ink-700); font-weight: 600; line-height: 1.35; }
.pxl-levelcard__desc{color: var(--px-ink-500);}
.pxl-levelcard__difficulty {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--px-info-subtle, #EEF3FB);
  color: var(--px-ink-700);
  border: 1px solid var(--px-info-subtle, #EEF3FB);
  font-size: 14px;
  font-weight: 600;
}
.pxl-levelcard__meta { display: flex; align-items: center; gap: var(--px-space-3); }
.pxl-levelcard__progress { flex: 1 1 auto; }

/* Mobile (§9.2): the same 8 as a compact vertical list (icon + title + progress). */
@media (max-width: 480px) {            /* --px-bp-sm */
  .pxl-levelband--mobile {
    display: block;
    margin-bottom: calc(var(--px-space-8) - 2px);
    padding: 18px 16px;
    background: var(--px-surface-0);
    border: 1px solid rgba(224, 230, 234, 0.85);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  }
  .pxl-levelband__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--px-space-3);
    margin-bottom: 19px;
  }
  .pxl-levelband__title,
  .pxl-levelband__range {
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: 0;
  }
  .pxl-levelband__title {
    color: rgba(38, 44, 48, 1);
    font-weight: 600;
  }
  .pxl-levelband__range {
    color: rgba(38, 44, 48, 0.7);
    font-weight: 400;
    white-space: nowrap;
    font-size:14px;
  }
  .pxl-levelband__progress {
    height: 8px;
  }
  .pxl-grid { grid-template-columns: 1fr; gap: var(--px-space-3); }
  .pxl-levelcard { flex-direction: row; align-items: center; border-radius: var(--px-radius-lg); }
  .pxl-levelcard__media { width: 68px; height: 86px; aspect-ratio: auto; flex: none; }
  .pxl-levelcard__num { font: var(--px-text-h2); }
  .pxl-levelcard__body { padding:0; flex: 1 1 auto; min-width: 0; gap:6px}
  .pxl-levelcard__desc { font-size: 12px; line-height: 1.35; }
  .pxl-levelcard__tagline { font-size: 13px; }

  /* New */
  .pxl-levelcard{padding:12px 8px;gap:8px}
  .pxl-levelcard__difficulty{display:none;}
  .pxl-levelcard .px-text-h3{font-size:1rem;}
  .pxl-levelcard__desc{color: rgba(38, 44, 48, 0.7);margin-bottom:9.6375px;}
  .pxl-levelcard__meta{align-items:end;}
  .pxl-crownpill{padding-block:0;}
}

/* ---- Inner level page (§9.3) ------------------------------------------ */
.pxl-inner { max-width: 900px; margin: 0 auto; padding: var(--px-space-6) var(--px-space-6) var(--px-space-8); }
@media (min-width: 992px) { .pxl-inner { padding-top: calc(var(--px-space-8) + var(--px-space-6)); } }
.pxl-inner__header { display: flex; align-items: center; gap: var(--px-space-3); margin-bottom: var(--px-space-6); background:transparent !important;}
.pxl-back {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none;
  border-radius: var(--px-radius-pill); color: var(--px-ink-700);
  text-decoration: none; font-size: 22px;
}
.pxl-back:hover { background: var(--px-surface-100); }
.pxl-inner__title { flex: 1 1 auto; margin: 0; min-width: 0; }

.pxl-group { margin-bottom: var(--px-space-8); }
.pxl-group__title { margin: 0 0 var(--px-space-4); }
.pxl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--px-space-3); }

.pxl-row {
  display: flex; align-items: center; gap: var(--px-space-4);
  padding: calc(var(--px-space-5) - 1px) var(--px-space-5);
  background: var(--px-surface-0);
  /* border: 1px solid var(--px-surface-200, #f3f4f6); */
  border: 1px solid var(--px-surface-20, #f3f4f6);
  border-radius: var(--px-radius-md);
  /* box-shadow: var(--px-shadow-card); */
  /* box-shadow: 0 0 0 0 calc(2px + 0px) var(--tw-ring-color , #f3f4f6); */
  transition: box-shadow var(--px-dur-fast) var(--px-ease-out);
}
/* .pxl-row:hover { box-shadow: var(--px-shadow-md); } */
/* Circular character avatar (host) — reference rows. Crop to the head. */
.pxl-row__avatar {
  width: 60px; height: 60px; flex: none; overflow: hidden;
  border-radius: var(--px-radius-pill); background: var(--px-brand-subtle);
  display: grid; place-items: center; font-size: 26px; line-height: 1;
}
.pxl-row__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pxl-row__avatar--finale { background: var(--px-bamboo-subtle); }
/* Legacy emoji icon (glossary link) — sized to match the avatars. */
.pxl-row__icon {
  width: 56px; height: 56px; flex: none; display: grid; place-items: center;
  background: var(--px-brand-subtle); border-radius: var(--px-radius-pill); font-size: 24px;
}
.pxl-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--px-space-1); }
.pxl-row__title { margin: 0; }
/* Completion tick — grey circle, turns green when the lesson is passed. */
.pxl-row__tick {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: var(--px-radius-pill);
  color: var(--px-streak-dormant);
  font-size: 22px; line-height: 1;
}
.pxl-row.is-done .pxl-row__tick {color: #52B8DB; }
.pxl-row__action { flex: none; min-height: 40px; padding: 0 var(--px-space-5); min-width:96px;}

.pxl-glossarylink {
  display: flex; align-items: center; gap: var(--px-space-4);
  padding: var(--px-space-4) var(--px-space-5);
  background: var(--px-surface-0); border: 1px solid var(--px-surface-200);
  border-radius: var(--px-radius-lg); box-shadow: var(--px-shadow-card);
  text-decoration: none; color: inherit;
  transition: box-shadow var(--px-dur-fast) var(--px-ease-out);
}
.pxl-glossarylink:hover { box-shadow: var(--px-shadow-md); }
.pxl-glossarylink__count { margin-left: auto; color: var(--px-ink-500); }
.pxl-row__chev { color: var(--px-ink-400); flex: none; }
.pxl-empty { color: var(--px-ink-500); }

/* ---- Glossary (§9.3) -------------------------------------------------- */
.pxl-glossary__search { max-width: 520px; margin: 0 0 var(--px-space-4); }
.pxl-glossary__summary {
  display:flex; align-items:baseline; gap:12px; margin:0 0 var(--px-space-5);
  color:var(--px-ink-500); font-size:14px;
}
.pxl-glossary__summary strong { color:var(--px-ink-900); font-size:16px; }
.pxl-termlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--px-space-3); }
.pxl-term {
  background: var(--px-surface-0); border: 1px solid var(--px-surface-200);
  border-radius: var(--px-radius-md); overflow:hidden;
}
.pxl-term__link {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:20px 22px; color:inherit; text-decoration:none;
  transition:background var(--px-dur-fast) var(--px-ease-out), border-color var(--px-dur-fast) var(--px-ease-out);
}
.pxl-term__link:hover { background:var(--px-surface-50, #fbfcfd); }
.pxl-term__link > span:first-child { min-width:0; display:grid; gap:5px; }
.pxl-term__name { color:var(--px-ink-900); font-size:19px; line-height:1.3; }
.pxl-term__def {
  display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  color:var(--px-ink-600); font-size:15px; line-height:1.55;
}
.pxl-term__arrow { flex:none; color:var(--px-brand); font-size:22px; }

.pxl-glossary-detail {
  width:min(820px, calc(100% - 32px)); margin:0 auto; padding:48px 0 80px;
}
.pxl-glossary-detail__back {
  display:inline-flex; gap:8px; align-items:center; color:var(--px-ink-600);
  text-decoration:none; font-size:14px; font-weight:650;
}
.pxl-glossary-detail__header { margin:34px 0 26px; }
.pxl-glossary-detail__level {
  margin:0 0 8px; color:var(--px-brand); font-size:13px; font-weight:750;
  letter-spacing:.04em; text-transform:uppercase;
}
.pxl-glossary-detail__header h1 {
  margin:0; color:var(--px-ink-900); font-size:clamp(36px, 6vw, 54px);
  line-height:1.08; letter-spacing:-.035em;
}
.pxl-glossary-detail__definition,
.pxl-glossary-detail__example {
  border:1px solid var(--px-surface-200); border-radius:18px; padding:28px 30px;
  background:var(--px-surface-0);
}
.pxl-glossary-detail__definition h2,
.pxl-glossary-detail__example h2,
.pxl-glossary-detail__related h2 {
  margin:0 0 12px; color:var(--px-ink-900); font-size:16px; line-height:1.3;
}
.pxl-glossary-detail__definition div {
  color:var(--px-ink-800); font-size:21px; line-height:1.65;
}
.pxl-glossary-detail__example {
  margin-top:16px; border-color:#fed7bd; background:#fff8f3;
}
.pxl-glossary-detail__example p {
  margin:0; color:var(--px-ink-700); font-size:17px; line-height:1.65;
}
.pxl-glossary-detail__related { margin-top:30px; }
.pxl-glossary-detail__related > div { display:flex; flex-wrap:wrap; gap:10px; }
.pxl-glossary-detail__related a {
  padding:9px 14px; border:1px solid var(--px-surface-200); border-radius:999px;
  color:var(--px-ink-700); background:var(--px-surface-0); text-decoration:none;
  font-size:14px; font-weight:650;
}
.pxl-glossary-detail__related a:hover { border-color:var(--px-brand); color:var(--px-brand); }

@media (max-width: 480px) {
  /* Reference: keep the row on one line; tighten avatar/padding to fit. */
  .pxl-row { gap:15px; padding: 19px 14px 29px; }
  .pxl-row__avatar, .pxl-row__icon { width: 60px; height: 60px; }
  .pxl-row__action { padding: 0 var(--px-space-4); }
  .pxl-row__body{gap:12px;}
  .pxl-glossary__summary { align-items:flex-start; flex-direction:column; gap:2px; }
  .pxl-term__link { padding:17px 16px; gap:14px; }
  .pxl-term__name { font-size:17px; }
  .pxl-term__def { font-size:14px; }
  .pxl-glossary-detail { padding-top:30px; }
  .pxl-glossary-detail__header { margin:26px 0 20px; }
  .pxl-glossary-detail__definition,
  .pxl-glossary-detail__example { padding:22px 20px; border-radius:15px; }
  .pxl-glossary-detail__definition div { font-size:18px; }
  .pxl-glossary-detail__example p { font-size:16px; }
}
.pxl-row__title{color:#262C30;}

/* ============================================================================
   §8 Gamification — bamboo hover tip, streak flame button, streak modal.
   ============================================================================ */
.pxl-counter { position: relative; cursor: default; }
.pxl-tip {
  position: absolute; top: calc(100% + var(--px-space-2)); right: 0;
  display: none;
  /* flex-direction: column; */
   gap: var(--px-space-1);
  width: 240px; padding: var(--px-space-4);
  background: var(--px-surface-0); color: var(--px-ink-700);
  border-radius: var(--px-radius-md); box-shadow: var(--px-shadow-lg);
  z-index: var(--px-z-dropdown); text-align: left; font-weight: 400;
}
.pxl-tip strong { color: var(--px-ink-900); }
.pxl-counter:hover .pxl-tip,
.pxl-counter:focus-within .pxl-tip { display: flex; }

.pxl-streak { border: 0; cursor: pointer; font: inherit; }
.pxl-streak:focus-visible { outline: 2px solid var(--px-info); outline-offset: 1px; }

/* ---- Streak modal (one responsive component, §8.3) --------------------- */
.pxl-modal { position: fixed; inset: 0; z-index: var(--px-z-modal); display: flex; align-items: center; justify-content: center; }
.pxl-modal__scrim { position: absolute; inset: 0; background: var(--px-overlay); }
.pxl-modal__card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px; max-height: 90vh; overflow: auto;
  margin: var(--px-space-4);
  background: var(--px-surface-0); border-radius: var(--px-radius-lg);
  box-shadow: var(--px-shadow-lg);
  /* padding: var(--px-space-6); */
  display: flex; flex-direction: column; gap: var(--px-space-5);
}
.pxl-modal__close {
  position: absolute; top: var(--px-space-3); right: var(--px-space-3);
  width: 36px; height: 36px; border: 0; background: transparent;
  color: var(--px-ink-500); font-size: 22px; cursor: pointer; border-radius: var(--px-radius-pill);
}
.pxl-modal__close:hover { background: var(--px-surface-100); }

/* Hero */
/* .pxl-streakhero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--px-space-3); padding: var(--px-space-6) var(--px-space-4);
  border-radius: var(--px-radius-lg);
} */
.pxl-streakhero.is-active { background: var(--px-brand-subtle); }
.pxl-streakhero.is-zero   { background: var(--px-surface-100); }
.pxl-streakhero__flame { max-width: 60px;}
.pxl-streakhero.is-zero .pxl-streakhero__flame { filter: grayscale(1); opacity: 0.5; }

/* Saver */
.pxl-saver { border: 1px solid var(--px-surface-200); border-radius: var(--px-radius-md); padding: var(--px-space-4); display: flex; flex-direction: column; gap: var(--px-space-2); }
.pxl-saver__head { display: flex; align-items: baseline; justify-content: space-between; }
.pxl-saver__count { font: var(--px-text-h3); color: var(--px-streak); }
.pxl-saver__hint { color: var(--px-ink-500); margin: 0; }
.pxl-saver__offer { margin-top: var(--px-space-2); display: flex; flex-direction: column; gap: var(--px-space-2); padding: var(--px-space-3); background: var(--px-warning-subtle); border-radius: var(--px-radius-sm); }
.pxl-saver__ok { color: var(--px-success); margin: 0; }

/* Calendar */
.pxl-cal__month { color: var(--px-ink-500); text-align: center; margin: 0 0 var(--px-space-2); text-transform: uppercase; letter-spacing: 0.04em; }
.pxl-cal__dow, .pxl-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--px-space-1); }
.pxl-cal__dow { margin-bottom: var(--px-space-1); }
.pxl-cal__dow span { text-align: center; font: var(--px-text-caption); color: var(--px-ink-400); }
.pxl-cal__pad { aspect-ratio: 1; }
.pxl-cal__cell {
  aspect-ratio: 1; display: grid; place-items: center;
  font: var(--px-text-caption); color: var(--px-ink-700);
  border-radius: var(--px-radius-pill); position: relative;
}
.pxl-cal__cell.is-active { background: var(--px-streak-subtle); color: var(--px-streak); font-weight: 600; }
.pxl-cal__cell.is-today  { box-shadow: inset 0 0 0 2px var(--px-info); }   /* today ringed (--px-info) */
.pxl-cal__cell.is-saver::after {
  content: ""; position: absolute; bottom: 2px; width: 6px; height: 6px;
  border-radius: var(--px-radius-pill); background: var(--px-brand);       /* saver token */
}

/* Mobile: streak modal reads as a bottom-sheet. */
@media (max-width: 480px) {
  .pxl-modal { align-items: flex-end; }
  .pxl-modal__card { max-width: none; margin: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}

/* ============================================================================
   §9.4 Dashboard + Achievements page.
   ============================================================================ */
/* Late cascade for the redesigned streak popup. Keep this after the legacy modal rules. */
.pxl-modal__scrim { background: rgba(9, 12, 17, 0.82); }
.pxl-modal__card {
  width: min(100% - 32px, 480px); max-width: 480px; max-height: 86vh;
  padding: 0; gap: 0;margin:0px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.28);
}
.pxl-modal__close {
  position: static; width: 36px; height: 36px;
  color: var(--px-ink-700); font-size: 32px; line-height: 1;
  display: grid; place-items: center;
}
.pxl-streakhero {
  margin: var(--px-space-6);
  display: grid; grid-template-columns:calc(60px + 4px) 1fr; align-items: start;
  min-height: 180px; gap: var(--px-space-5);
  padding: var(--px-space-6) 28px;
  border-radius: 14px; text-align: left;
  color: var(--px-brand-on);
}
.pxl-streakhero.is-active { background: linear-gradient(180deg, #ffad3d 0%, #ff9a1f 100%); }
.pxl-streakhero.is-zero { color: var(--px-ink-700); background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);min-height:234px; }
/* .pxl-streakhero__flame {
  width: 56px; height: 56px; display: grid; place-items: center;
  font-size: 34px; line-height: 1; border: 4px solid currentColor;
  border-radius: 48% 52% 54% 46% / 62% 62% 38% 38%;
} */
.pxl-streakhero__flame svg{width:60px;height:60px;stroke: var(--px-surface-50);stroke-width:4px;}
.pxl-streakhero.is-zero .pxl-streakhero__flame { color: var(--px-streak-dormant); filter: grayscale(1); opacity: 0.9; }
.pxl-streakhero.is-active .pxl-streakhero__flame {
  display: inline-flex;
  transform-origin: 50% 100%;
  animation: px-streak-fire 1.35s ease-in-out infinite;
}
@keyframes px-streak-fire {
  0%, 100% { transform: translateY(0) scale(1) rotate(-1deg); }
  50% { transform: translateY(-2px) scale(1.04, 1.08) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pxl-streakhero.is-active .pxl-streakhero__flame { animation: none; }
}
.pxl-saver {
  min-height: 110px; padding: var(--px-space-4);
  display: grid; grid-template-columns: 48px 1fr; gap: var(--px-space-4);
  border-radius: var(--px-radius-sm);
}
.pxl-saver__head { align-items: center; }
.pxl-saver__hint { line-height: 1.45; }
.pxl-saver__ok { font-weight: 700; }
.pxl-cal {
  border: 1px solid var(--px-surface-200); border-radius: var(--px-radius-md);
  padding: var(--px-space-6) var(--px-space-4) var(--px-space-5);
}
.pxl-cal__month {
  color: var(--px-ink-900); text-align: center; margin: 0;
  font-size: 17px; line-height: 1.3; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.pxl-cal__dow, .pxl-cal__grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: var(--px-space-2); row-gap: var(--px-space-2);
}
.pxl-cal__dow { margin-bottom: var(--px-space-3); }
.pxl-cal__dow span {
  font-size: 13px; line-height: 1; font-weight: 600; color: var(--px-ink-900);
}
.pxl-cal__cell { min-width: 0; font-size: 15px; line-height: 1; color: #020617; }
.pxl-cal__cell.is-active { background: #ff9500; color: #fff; font-weight: 700; }
.pxl-cal__cell.is-today { box-shadow: none; }
.pxl-cal__cell.is-today::before {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 18px; height: 2px; transform: translateX(-50%);
  border-radius: var(--px-radius-pill); background: var(--px-info);
}
.pxl-cal__cell.is-saver::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 22px; height: 18px; transform: translate(-50%, 60%);
  border: 2px solid #d989ff; border-radius: 5px;
  background: linear-gradient(#f7e7ff, #f0d4ff);
}

@media (max-width: 480px) {
  .pxl-modal__card {
    width: 100%; max-width: none; max-height: 92vh; margin: 0;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  .pxl-streakhero {
    grid-template-columns: 54px 1fr; min-height: 148px;
    margin: var(--px-space-5); padding: var(--px-space-5);
  }
  .pxl-streakhero__flame { width: 46px; height: 46px; font-size: 28px; border-width: 3px; }
  .pxl-streakhero__number { font-size: 40px; }
  .pxl-saver { grid-template-columns: 40px 1fr; gap: var(--px-space-3); }
  .pxl-cal { padding-left: var(--px-space-3); padding-right: var(--px-space-3); }
  .pxl-cal__dow, .pxl-cal__grid { column-gap: var(--px-space-1); }
  .pxl-cal__cell { font-size: 14px; }
}

.pxl-modal__header {
  min-height: 62px; padding: 0 var(--px-space-6);
  border-bottom: 1px solid var(--px-surface-200);
}
.pxl-modal__header h5 {
  margin: 0; color: var(--px-ink-900);
  font-size: 20px; line-height: 1.2; font-weight: 700;
}
.pxl-modal__section { padding: 0 var(--px-space-6) var(--px-space-6); }
.pxl-modal__section-title {
  margin: 0 0 var(--px-space-3);
  color: var(--px-ink-900); font-size: 18px; line-height: 1.25; font-weight: 700;
}
.pxl-streakhero__copy { min-width: 0; display: flex; flex-direction: column; gap: var(--px-space-3); }
.pxl-streakhero__metric { display: flex;flex-direction:column; column-gap: var(--px-space-3); row-gap: var(--px-space-1); }
.pxl-streakhero__number { font-size: 48px; line-height: 0.9; font-weight: 700; color: inherit; }
.pxl-streakhero__label {font-size: 16px; line-height: 1.2; font-weight: 600; color: inherit; }
.pxl-streakhero p { max-width: 280px; margin: 0; color: inherit; font-weight: 400; line-height: 1.65; }
.pxl-streakhero__zero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--px-space-3); }
.pxl-saver__badge {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 12px; color: #c46cff; background: #f6e8ff;
  box-shadow: inset 0 0 0 3px #d989ff;
}
.pxl-saver__badge span { font-size: 20px; filter: hue-rotate(60deg) saturate(1.5); }
.pxl-saver__body { min-width: 0; display: flex; flex-direction: column; gap: var(--px-space-2); }
.pxl-saver__title { color: var(--px-ink-900); font-size: 14px; line-height: 1.3; font-weight: 700; }
.pxl-saver__title strong { color: var(--px-info); font-weight: 900; }
.pxl-saver__info {
  width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center;
  border: 2px solid #b8c9d8; border-radius: var(--px-radius-pill);
  background: transparent; padding: 0; cursor: pointer;
  color: #8da6b8; font-size: 12px; line-height: 1; font-weight: 700;
}
.pxl-saver__info:hover { border-color: #8da6b8; color: var(--px-ink-700); }
.pxl-saver__info:focus-visible { outline: 2px solid var(--px-info); outline-offset: 2px; }
.pxl-saver__track { display: flex; align-items: center; gap: var(--px-space-2); margin-top: var(--px-space-1); }
.pxl-saver__slot {
  width: 24px; height: 20px; border: 2px solid var(--px-surface-200);
  border-radius: 6px; background: var(--px-surface-50); position: relative;
}
.pxl-saver__slot::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: -5px; height: 6px;
  border: 2px solid inherit; border-bottom: 0; border-radius: 5px 5px 0 0;
}
.pxl-saver__slot.is-filled {
  border-color: #d989ff; background: #f6e8ff;
  box-shadow: inset 0 -5px 0 rgba(217, 137, 255, 0.28);
}
.pxl-saver__offer p { margin: 0; color: var(--px-ink-700); }
.pxl-cal__nav {
  display: grid; grid-template-columns: 36px 1fr 36px; align-items: center;
  margin-bottom: var(--px-space-5);
}
.pxl-cal__chev {
  color: var(--px-ink-400); font-size: 34px; line-height: 1; text-align: center;
}
@media (max-width: 480px) {
  .pxl-modal__header { padding: 0 var(--px-space-5); }
  .pxl-modal__section { padding-left: var(--px-space-5); padding-right: var(--px-space-5); }
  .pxl-streakhero__number { font-size: 40px; }
}

.pxl-muted { color: var(--px-ink-500); }
.pxl-link { color: var(--px-brand); text-decoration: none; }
.pxl-card {
  background: var(--px-surface-0); border-radius: var(--px-radius-lg);
  box-shadow: var(--px-shadow-card); padding: var(--px-space-5);
}
.pxl-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--px-space-3); margin-bottom: var(--px-space-3); }
.pxl-card__head h2 { margin: 0; }

/* Popup-only streak lifecycle: overview, full month, repair and questions. */
.pxl-modal__card{width:min(calc(100% - 28px),560px);max-width:560px;max-height:92dvh;overflow:hidden}
.pxl-modal__scroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.pxl-modal__header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center}
.pxl-modal__header h5{text-align:left;grid-column:2}
.pxl-modal__back{grid-column:1;grid-row:1;width:36px;height:36px;border:0;background:transparent;color:#52606a;font-size:34px}
.pxl-modal__close{grid-column:3;grid-row:1}
.pxl-streakhero{min-height:168px;margin:24px;padding:24px;align-items:center}
.pxl-streakhero.is-at-risk{background:linear-gradient(135deg,#fff5e8,#ffe7c2);color:#8f3d00;box-shadow:inset 0 0 0 2px #ffb15c}
.pxl-streakhero.is-at-risk .pxl-streakhero__flame{color:#f56b0f;filter:saturate(.75)}
.pxl-streakhero__flame{position:relative;color:#fff}
.pxl-streakhero__warning{position:absolute;right:-5px;top:-7px;display:grid;place-items:center;width:23px;height:23px;border:3px solid #fff;border-radius:50%;background:#d92d20;color:#fff;font:800 13px/1 sans-serif}
.pxl-streakhero__status{font-size:15px;line-height:1.25}
.pxl-repair{margin:0 24px 24px;padding:20px!important;border:1px solid #ffd09b;border-radius:16px;background:#fffaf4}
.pxl-repair__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pxl-repair__head span{color:#d95500;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.pxl-repair__head h6{margin:3px 0 0;color:#182033;font-size:18px}
.pxl-repair__head time{white-space:nowrap;padding:5px 8px;border-radius:999px;background:#fff0df;color:#b54708;font-size:11px;font-weight:800}
.pxl-repair>p{margin:8px 0 14px;color:#667078;font-size:13px}
.pxl-repair__options{display:grid;gap:9px}
.pxl-repair__option{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;width:100%;padding:11px;border:1px solid #e0e5e9;border-radius:12px;background:#fff;color:#182033;text-align:left}
.pxl-repair__option:hover{border-color:#f56b0f}.pxl-repair__option.is-primary{border-color:#ffc483;background:#fff7ee}
.pxl-repair__option-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#e9f8e4;color:#248a20;font-weight:900}
.pxl-repair__option-icon.is-saver{background:#f6e8ff}.pxl-repair__option-icon.is-bamboo{background:#eef8e8}
.pxl-repair__option span:nth-child(2){display:flex;flex-direction:column}.pxl-repair__option strong{font-size:13px}.pxl-repair__option small{color:#77818a;font-size:11px}.pxl-repair__option b{color:#e65f08;font-size:12px}
.pxl-repair__error{margin:12px 0 0!important;color:#b42318!important;font-size:12px!important;font-weight:700}
.pxl-cal{transition:opacity .15s}.pxl-cal.is-loading{opacity:.5;pointer-events:none}
.pxl-cal__chev{display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
.pxl-cal__chev:disabled{opacity:.25;cursor:not-allowed}
.pxl-cal__cell.is-missed{color:#b42318;background:#fff1f0}
.pxl-cal__cell.is-repaired{background:#e8f7ff;color:#0675a8;font-weight:800}
.pxl-cal__legend{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:16px;color:#77818a;font-size:10px}
.pxl-cal__legend span{display:flex;align-items:center;gap:5px}.pxl-cal__legend i{width:8px;height:8px;border-radius:50%}
.pxl-cal__legend .is-complete{background:#ff9500}.pxl-cal__legend .is-protected{background:#d989ff}.pxl-cal__legend .is-missed{background:#d92d20}
.pxl-quiz,.pxl-confirm{padding:30px 28px 36px}
.pxl-quiz__progress{height:7px;margin-bottom:18px;overflow:hidden;border-radius:99px;background:#e8ecef}.pxl-quiz__progress span{display:block;height:100%;border-radius:inherit;background:#f56b0f;transition:width .2s}
.pxl-quiz__step,.pxl-confirm__eyebrow{color:#f56b0f;font-size:11px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.pxl-quiz h6,.pxl-confirm h6{margin:10px 0 20px;color:#182033;font-size:22px;line-height:1.35}
.pxl-quiz__options{display:grid;gap:10px}.pxl-quiz__options label{display:flex;gap:11px;padding:14px;border:1px solid #dfe5e9;border-radius:12px;color:#344054;font-size:14px;cursor:pointer}.pxl-quiz__options label.is-selected{border-color:#f56b0f;background:#fff7ee}.pxl-quiz__options label.is-wrong{border-color:#f04438;background:#fff5f4}
.pxl-quiz__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.pxl-btn-primary,.pxl-btn-quiet{min-height:44px;padding:0 18px;border-radius:11px;font-size:13px;font-weight:800}
.pxl-btn-primary{border:0;background:#f56b0f;color:#fff}.pxl-btn-primary:disabled{opacity:.5}.pxl-btn-quiet{border:1px solid #dfe5e9;background:#fff;color:#52606a}
.pxl-confirm{text-align:center}.pxl-confirm__icon{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 14px;border-radius:22px;background:#fff1e6;font-size:34px}.pxl-confirm p{max-width:380px;margin:0 auto 22px;color:#667078;line-height:1.55}.pxl-confirm button{display:flex;justify-content:center;width:100%;margin-top:9px}.pxl-confirm.is-success .pxl-confirm__icon{background:#e9f8e4}
.pxl-streak__count{color:inherit;font-variant-numeric:tabular-nums}
.pxl-streak__flame{position:relative}
.pxl-streak__risk-badge{
  position:absolute;right:-6px;bottom:-4px;z-index:1;
  display:grid;place-items:center;width:15px;height:15px;
  border:2px solid #fff;border-radius:50%;
  color:#fff;background:#d92d20;
  font:900 9px/1 Arial,sans-serif;
  box-sizing:border-box
}
.pxl-streak__risk-badge::before{
  content:"";position:absolute;inset:-3px;z-index:-1;
  border:2px solid rgba(217,45,32,.55);border-radius:50%;
  animation:px-streak-risk-ripple 1.65s ease-out infinite
}
.pxl-streak.is-at-risk{
  color:#1769aa!important;
  border:1px solid #9ccbf0!important;
  background:#edf7ff!important;
  box-shadow:0 2px 9px rgba(23,105,170,.10)
}
.pxl-streak.is-at-risk .pxl-streak__flame{filter:none!important;opacity:1!important}
.pxl-streak.is-at-risk .pxl-streak__flame svg path:first-child{fill:#2f80d0!important}
.pxl-streak.is-at-risk .pxl-streak__flame svg path:nth-child(2){fill:#82cfff!important}
.pxl-streak.is-at-risk:hover{
  border-color:#5ba7df!important;
  background:#e2f2ff!important;
  box-shadow:0 6px 16px rgba(23,105,170,.14)
}
@keyframes px-streak-risk-ripple{
  0%{transform:scale(.75);opacity:.9}
  75%,100%{transform:scale(1.75);opacity:0}
}
@media(prefers-reduced-motion:reduce){.pxl-streak__risk-badge::before{animation:none}}
@media(max-width:480px){.pxl-modal__card{max-height:96dvh}.pxl-streakhero{margin:18px;padding:20px}.pxl-repair{margin:0 18px 18px}.pxl-modal__section{padding-left:18px;padding-right:18px}.pxl-quiz,.pxl-confirm{padding:24px 18px 30px}.pxl-quiz h6,.pxl-confirm h6{font-size:19px}}

/* Dashboard grid — single column (mobile, source order); 2-col on desktop. */
.pxl-dash { display: grid; grid-template-columns: 1fr; gap: var(--px-space-5); }
@media (min-width: 1024px) {           /* --px-bp-lg */
  .pxl-dash {
    grid-template-columns: 1fr 320px;
    align-items: start;
    grid-template-areas:
      "resume  streak"
      "lb      streak"
      "comm    streak"
      "stats   streak"
      "ach     streak"
      "battles streak"
      "logout  logout";
  }
}

/* Resume */
.pxl-dash__resume { display: flex; align-items: center; gap: var(--px-space-4); }
.pxl-resume__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--px-space-1); }
.pxl-resume__body p { margin: 0; }
.pxl-ring {
  position: relative; width: 72px; height: 72px; flex: none;
  border-radius: var(--px-radius-pill);
  background: conic-gradient(var(--px-brand) calc(var(--pct) * 1%), var(--px-surface-200) 0);
  display: grid; place-items: center;
}
.pxl-ring::before { content: ""; position: absolute; width: 56px; height: 56px; border-radius: var(--px-radius-pill); background: var(--px-surface-0); }
.pxl-ring span { position: relative; font: var(--px-text-caption); font-weight: 600; color: var(--px-ink-900); }

/* Streak panel */
.pxl-dash__streak { display: flex; flex-direction: column; gap: var(--px-space-4); }
.pxl-streakpanel__head { display: flex; align-items: baseline; gap: var(--px-space-2); }
.pxl-streakpanel__head .pxl-streak__flame { font-size: 28px; }
.pxl-weekdots { display: flex; gap: var(--px-space-2); justify-content: space-between; }
.pxl-weekdot { width: 16px; height: 16px; border-radius: var(--px-radius-pill); background: var(--px-surface-200); }
.pxl-weekdot.is-on { background: var(--px-streak); }
.pxl-weekdot.is-today { box-shadow: inset 0 0 0 2px var(--px-info); }
.pxl-saverline { display: flex; align-items: baseline; justify-content: space-between; }
.pxl-prog__top { display: flex; justify-content: space-between; margin-bottom: var(--px-space-1); }
.pxl-streakpanel__btn { width: 100%; }

/* Leaderboard */
.pxl-lblist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--px-space-1); }
.pxl-lbrow { display: flex; align-items: center; gap: var(--px-space-3); padding: var(--px-space-2) var(--px-space-3); border-radius: var(--px-radius-sm); }
.pxl-lbrow.is-me { background: var(--px-brand-subtle); }
.pxl-lbrow__rank { width: 24px; text-align: center; font-weight: 600; color: var(--px-ink-500); }
.pxl-lbrow__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxl-lbrow__val { font-weight: 600; color: var(--px-bamboo-hover); }

/* Community */
.pxl-commlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--px-space-2); }
.pxl-commrow { display: flex; flex-direction: column; gap: 2px; padding: var(--px-space-3); border: 1px solid var(--px-surface-200); border-radius: var(--px-radius-md); text-decoration: none; color: inherit; }
.pxl-commrow:hover { box-shadow: var(--px-shadow-md); }
.pxl-commrow__title { font-weight: 500; }

/* Stats */
.pxl-dash__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--px-space-3); }
.pxl-stat { background: var(--px-surface-100); border-radius: var(--px-radius-md); padding: var(--px-space-4); display: flex; flex-direction: column; gap: var(--px-space-1); text-align: center; }
.pxl-stat__v { font: var(--px-text-h2); color: var(--px-ink-900); }
.pxl-stat__l { font: var(--px-text-caption); color: var(--px-ink-500); }

/* Achievements (dashboard block) */
.pxl-badgerow { display: flex; flex-wrap: wrap; gap: var(--px-space-4); }
.pxl-badgechip { display: flex; flex-direction: column; align-items: center; gap: var(--px-space-1); width: 84px; text-align: center; }
.pxl-badgechip__art { width: 56px; height: 56px; display: grid; place-items: center; font-size: 30px; background: var(--px-brand-subtle); border-radius: var(--px-radius-pill); }
.pxl-badgechip__art img { width: 100%; height: 100%; object-fit: contain; }

.pxl-dash__logout { text-align: center; padding: var(--px-space-4) 0; }

/* Achievements page */
.pxl-ach {
  min-height: 60vh;
  padding: calc(var(--px-space-8) + var(--px-space-5)) var(--px-space-4) var(--px-space-10);
  background: var(--px-surface-0);
}
.pxl-ach__header {
  max-width: 816px;
  margin: 0 auto var(--px-space-5);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--px-space-3);
  align-items: center;
}
.pxl-ach__back {
  background: var(--px-surface-0);
  /* border: 1px solid #DDE5EC; */
}
.pxl-ach__back:hover {
  background: var(--px-surface-200);
  /* border: 1px solid #DDE5EC; */
}
.pxl-ach__page-title {
  margin: 0;
  color: #21364A;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}
.pxl-ach__count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  background: #F7F9FB;
  border: 1px solid #DDE5EC;
  color: #456985;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: none;
}
.pxl-ach__list {
  max-width: 816px;
  margin: 0 auto;
  background: var(--px-surface-0);
  border: 2px solid #DDE5EC;
  border-radius: 17px;
  overflow: hidden;
}
.pxl-achrow {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 101px;
  padding: 18px 16px;
  background: var(--px-surface-0);
}
.pxl-achrow + .pxl-achrow {
  border-top: 1px solid #DDE5EC;
}
.pxl-achrow__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  color: var(--ach-color, #58AEEF);
  font-size: 30px;
  line-height: 1;
}
.pxl-achrow__icon img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}
.pxl-achrow__icon span {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* background:radial-gradient(circle, #fff 0 46%, transparent 47%),repeating-conic-gradient(from 8deg, currentColor 0deg 6deg, transparent -14deg 0deg); */
  font-size: 28px;
  /* radial-gradient(circle, #fff 0 46%, transparent 47%), repeating-conic-gradient(from 8deg, currentColor 0deg 12deg, transparent 12deg 24deg); */
}
.pxl-achrow__main {
  min-width: 0;
}
.pxl-achrow__title {
  margin: 0 0 5px;
  color: #21364A;
  font-size: 16px;
  line-height: 21px;
  font-weight: 700;
  letter-spacing: 0;
}
.pxl-achrow__desc {
  margin: 0;
  color: #456985;
  font-size: 14px;
  line-height: 19px;
  font-weight: 400;
}
.pxl-achrow__progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}
.pxl-achrow__track {
  height: 8px;
  border-radius: 999px;
  background: #F7F9FB;
  overflow: hidden;
}
.pxl-achrow__fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: #48AEF8;
}
.pxl-achrow__count {
  min-width: 58px;
  color: #8497A8;
  font-size: 13px;
  line-height: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pxl-achrow.is-earned .pxl-achrow__progress {
  display: none;
}
.pxl-achrow.is-locked .pxl-achrow__icon {
  filter: grayscale(1);
  opacity: .62;
}
.pxl-achrow.is-locked {
    display: none;
}
.pxl-achrow--empty {
  display: block;
  margin: 0;
  color: #456985;
}

@media (max-width: 640px) {
  .pxl-ach {
    padding: var(--px-space-5) var(--px-space-3) var(--px-space-8);
  }
  .pxl-ach__header {
    margin-bottom: var(--px-space-4);
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }
  .pxl-ach__page-title {
    font-size: 21px;
    line-height: 28px;
  }
  .pxl-ach__list {
    border-radius: 14px;
  }
  .pxl-achrow {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    min-height: 96px;
    padding: 16px 14px;
  }
  .pxl-achrow__icon,
  .pxl-achrow__icon img,
  .pxl-achrow__icon span {
    width: 52px;
    height: 52px;
  }
  .pxl-achrow__icon span {
    font-size: 23px;
  }
  .pxl-achrow__progress {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .pxl-achrow__count {
    min-width: 0;
    text-align: left;
  }
}

@media(max-width:767px){
  .pxl-home,
  .pxl-inner{padding:30px 1rem;}

  .page-learn-v2-level .site-header{border:0px;}
  .page-learn-v2-level .pxl-inner.__m{padding-block:calc(20px - 15px) 8px !important;background: rgba(255, 255, 255, 1);border-bottom: 1px solid #E0E6EA;}
  .pxl-levelcard .pxl-crownpill{display:none !important;}
  .pxl-list{gap:var(var(--px-space-4));}
  /* .pxl-list li.pxl-row.is-done .pxl-row__action{display:none !important;} */
  /* .page-learn-v2-level .pxl-inner.__m .pxl-inner__header{align-items:flex-start;} */
  .page-learn-v2-level .pxl-inner.__m .pxl-inner__header .pxl-crownpill,
  .page-learn-v2-level .pxl-inner.__m .pxl-inner__header .__dash{display:none !important;}
  .page-learn-v2-level .pxl-inner.__m .pxl-inner__header .pxl-back{height:14px;width:calc(14px + 19px);margin-top:6px;display:flex;align-items:flex-start;justify-content:center;}
  .page-learn-v2-level .pxl-inner.__m .pxl-inner__header .__level{display:block;font-weight:600;font-size:16px;line-height: 23px;text-transform: capitalize;color:#262C30;}
  .page-learn-v2-level .pxl-inner.__m .pxl-inner__header .__name{display:block;font-weight:500;font-size:14px;line-height:18px;text-transform:capitalize;color:#262C30;margin-top:3px;}

  .pxl-group .pxl-group__title{font-size:18px !important;margin-bottom:30px;}
  .pxl-row__action{min-width:66px;}
}