/* ── PROFILE CUSTOMIZATION (avatar-click + identity pencil) ─────────────────── */
.profile-identity { position: relative; }   /* anchor for the edit pencil */
.profile-avatar-wrap.is-editable { cursor: pointer; }
.avatar-edit-hint {
  position: absolute; inset: 0; z-index: 4; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.1rem;
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.profile-avatar-wrap.is-editable:hover .avatar-edit-hint { opacity: 1; }
.profile-identity-edit {
  position: absolute; top: 12px; right: 12px; z-index: 4;
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  cursor: pointer; transition: background .15s, color .15s, transform .1s;
}
.profile-identity-edit:hover { background: var(--surface-3); color: var(--text-1); border-color: var(--border-hi); }
.profile-identity-edit:active { transform: scale(.92); }

/* ── PROFILE BACKGROUND BANNER (Valorant-style cosmetic) ───────────────────────
   A background image that decorates the RIGHT side of the identity card, masked so
   it fades into the card's own (themed) surface on the left. Because the fade uses
   the card surface, it integrates with any profile frame and stays legible in
   light/dark. Left-aligned content is layered above; the edit pencil is z-index 4. */
.profile-identity-bg {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  opacity: 0; pointer-events: none;
  background-image: var(--pbg-url, none);
  background-size: cover; background-position: right center; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 26%, rgba(0,0,0,.55) 52%, #000 82%);
          mask-image: linear-gradient(90deg, transparent 0, transparent 26%, rgba(0,0,0,.55) 52%, #000 82%);
  transition: opacity .25s ease;
}
.profile-identity-bg.is-active { opacity: 1; }
.profile-identity > .profile-avatar-wrap,
.profile-identity > .profile-identity-details { position: relative; z-index: 1; }
/* Legibility halo in the card's own surface color — only with an active banner, and
   only for text that could reach the image zone. Harmless where :has is unsupported. */
.profile-identity:has(> .profile-identity-bg.is-active) .profile-identity-name,
.profile-identity:has(> .profile-identity-bg.is-active) .profile-identity-title,
.profile-identity:has(> .profile-identity-bg.is-active) .profile-identity-motto,
.profile-identity:has(> .profile-identity-bg.is-active) .profile-identity-role {
  text-shadow: 0 1px 8px var(--surface-1), 0 0 3px var(--surface-1);
}

/* Mini previews of a profile background (shop card + customization swatch). */
.shop-prev-pbg.has-bg { position: relative; overflow: hidden; }
.profile-identity.mini.mini-has-bg { position: relative; }
.shop-prev-pbg.has-bg::after,
.profile-identity.mini.mini-has-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background-image: var(--pbg-url, none);
  background-size: cover; background-position: right center; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 18%, #000 78%);
          mask-image: linear-gradient(90deg, transparent 0, transparent 18%, #000 78%);
}
.shop-prev-pbg.has-bg > *,
.profile-identity.mini.mini-has-bg > * { position: relative; z-index: 1; }

/* Modal customization sections */
.cust-section { margin-bottom: 20px; }
.cust-section:last-child { margin-bottom: 0; }
.cust-section-title {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.cust-loading { color: var(--text-3); font-style: italic; padding: 8px 2px; }

/* Swatch grid (avatar / frame / decoration / profile frame).
   Columnas de ancho fijo + justify-content:start: las cards se alinean a la
   izquierda con un gap uniforme, sin importar si hay 1, 2 o 30 (no se centran
   ni dejan huecos enormes cuando hay pocas). Las filas incompletas quedan
   alineadas a las columnas (no se descuadran). */
.cust-swatches {
  display: grid; gap: 12px 14px; justify-content: start;
  grid-template-columns: repeat(auto-fit, 100px);
}
.cust-swatch {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-sizing: border-box; padding: 12px 8px;
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: border-color .15s, transform .1s, background .15s;
}
.cust-swatch:hover { border-color: var(--border-hi); }
.cust-swatch:active { transform: scale(.95); }
.cust-swatch.selected { border-color: var(--gold); background: rgba(212,160,23,.08); }
.cust-swatch-prev {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 50px;
}
.cust-swatch-label {
  width: 100%; min-height: 1.25em; /* reserva una línea aunque esté vacío */
  font-size: .68rem; color: var(--text-2); text-align: center; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Marcos de perfil: la preview es una mini-tarjeta más ancha → columnas más
   grandes y más gap para que contornos y sombras de vecinos no se sobrepongan. */
.cust-swatches--frames {
  gap: 20px;
  grid-template-columns: repeat(auto-fit, 172px);
}
.cust-swatch--profileFrame { padding: 18px 16px; }

/* Mini previews reuse the real frame / profile-frame cssClass at small scale */
.profile-avatar.mini { width: 40px; height: 40px; font-size: 1.5rem; border-width: 2px; }
.profile-avatar-wrap.mini { padding: 2px; }
/* Decoration picker swatch: the real overlay scaled to the 40px mini avatar so it
   matches how it looks equipped (60px → --deco-k 1.3, here 40/46 ≈ .87). */
.cust-swatch--decoration .avatar-decoration { --deco-k: .87; }
.avatar-decoration.mini {
  top: -10px; left: 50%; transform: translateX(-50%);
  font-size: calc(13px * var(--ds)); filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.profile-identity.mini {
  display: flex; align-items: center; gap: 7px; padding: 9px 11px;
  width: 122px; height: 52px; margin: 0; border-radius: 10px; box-shadow: none;
  overflow: hidden;
}
/* Zero-specificity surface fill so .pframe-* gradient borders win in the picker
   too (mirrors the .shop-prev-pcard fix). "Sin marco" keeps the surface. */
:where(.profile-identity.mini) { background: var(--surface-1); }
.mini-card-av { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); flex-shrink: 0; }
.mini-card-lines { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.mini-card-lines i { display: block; height: 5px; border-radius: 3px; background: var(--surface-3); }
.mini-card-lines i:first-child { width: 70%; }
.mini-card-lines i:last-child  { width: 45%; }

/* Title / motto selectable lists */
.cust-list { display: flex; flex-direction: column; gap: 6px; }
.cust-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 9px; text-align: left;
  background: var(--surface-2); border: 1.5px solid var(--border); color: var(--text-1);
  font-size: .85rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.cust-list-row:hover { border-color: var(--border-hi); }
.cust-list-row.selected { border-color: var(--gold); background: rgba(212,160,23,.08); font-weight: 600; }
.cust-list-row.selected::after { content: "✓"; color: var(--gold); font-weight: 800; }

/* ── ITEM RARITY ──────────────────────────────────────────────────────────────
   Border color by rarity: común = normal · poco común = azul · raro = morado ·
   mítico = rojo · legendario = dorado. Applied to shop cards (student + manage),
   the form preview, customization swatches/rows and the achievement unlock chip. */
:root {
  --rar-common:    var(--text-2);   /* común = neutral/plata (no dorado) */
  --rar-uncommon:  #3b82f6;
  --rar-rare:      #a855f7;
  --rar-mythic:    #ef4444;
  --rar-legendary: #e0a826;
}
.shop-card.rarity-uncommon,  .shop-form-preview.rarity-uncommon  { --rc: var(--rar-uncommon);  border-color: var(--rar-uncommon); }
.shop-card.rarity-rare,      .shop-form-preview.rarity-rare      { --rc: var(--rar-rare);      border-color: var(--rar-rare); }
.shop-card.rarity-mythic,    .shop-form-preview.rarity-mythic    { --rc: var(--rar-mythic);    border-color: var(--rar-mythic); }
.shop-card.rarity-legendary, .shop-form-preview.rarity-legendary { --rc: var(--rar-legendary); border-color: var(--rar-legendary); }

/* Swatches & list rows: rarity tints the border, but a selected item keeps gold. */
.cust-swatch.rarity-uncommon:not(.selected),  .cust-list-row.rarity-uncommon:not(.selected)  { border-color: var(--rar-uncommon); }
.cust-swatch.rarity-rare:not(.selected),      .cust-list-row.rarity-rare:not(.selected)      { border-color: var(--rar-rare); }
.cust-swatch.rarity-mythic:not(.selected),    .cust-list-row.rarity-mythic:not(.selected)    { border-color: var(--rar-mythic); }
.cust-swatch.rarity-legendary:not(.selected), .cust-list-row.rarity-legendary:not(.selected) { border-color: var(--rar-legendary); }

/* "Unlocks a product" chip on achievement cards (hover shows the item name). */
.achievement-unlock {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; font-size: .95rem; line-height: 1; border-radius: 8px;
  background: var(--surface-2); border: 1.5px solid var(--border); cursor: help;
}
.achievement-unlock.rarity-uncommon  { border-color: var(--rar-uncommon); }
.achievement-unlock.rarity-rare      { border-color: var(--rar-rare); }
.achievement-unlock.rarity-mythic    { border-color: var(--rar-mythic); }
.achievement-unlock.rarity-legendary { border-color: var(--rar-legendary); }
.ach-mgmt-card .achievement-unlock { width: 30px; height: 30px; }

/* ── DETAIL MODAL (collection contents / lootbox drops) ───────────────────────────
   Shared #bundleModal opened by clicking a collection or lootbox card. */
.is-clickable { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.is-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-hi); }
.shop-card.is-clickable:hover { border-color: var(--gold); }

/* Rarity tiers (lootbox drops grouped by rarity, each with its odds) */
.bundle-tiers { display: flex; flex-direction: column; gap: 18px; }
.bundle-tier-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1.5px solid var(--border);
}
.bundle-tier-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: .04em; color: var(--text-1); }
.bundle-tier-odds {
  font-size: .76rem; font-weight: 800; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px;
}
.bundle-tier-head.rarity-uncommon  { border-color: var(--rar-uncommon); }
.bundle-tier-head.rarity-rare      { border-color: var(--rar-rare); }
.bundle-tier-head.rarity-mythic    { border-color: var(--rar-mythic); }
.bundle-tier-head.rarity-legendary { border-color: var(--rar-legendary); }
.bundle-tier-head.rarity-uncommon  .bundle-tier-name { color: var(--rar-uncommon); }
.bundle-tier-head.rarity-rare      .bundle-tier-name { color: var(--rar-rare); }
.bundle-tier-head.rarity-mythic    .bundle-tier-name { color: var(--rar-mythic); }
.bundle-tier-head.rarity-legendary .bundle-tier-name { color: var(--rar-legendary); }

/* Item grid + row (preview · name/rarity · tag) */
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.bundle-item {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 12px; background: var(--surface-2);
  border: 1.5px solid var(--border); border-radius: 12px;
}
.bundle-item.is-owned { opacity: .72; }
.bundle-item.rarity-uncommon  { border-color: var(--rar-uncommon); }
.bundle-item.rarity-rare      { border-color: var(--rar-rare); }
.bundle-item.rarity-mythic    { border-color: var(--rar-mythic); }
.bundle-item.rarity-legendary { border-color: var(--rar-legendary); }
/* Landscape preview box — wide cosmetics (profile frames, titles, mottos) and
   top decorations need horizontal room, so this mirrors the shop card preview
   sizing (46px avatar = the decoration reference) instead of a tiny square. */
.bundle-item-prev {
  width: 96px; min-height: 60px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bundle-item-prev > * { max-width: 100%; }
.bundle-item-prev .profile-avatar { width: 46px; height: 46px; font-size: 1.7rem; }
.bundle-item-prev .profile-avatar-wrap[class*="frame-"] { padding: 3px; }
.bundle-item-prev .shop-prev-ava { width: 44px; height: 44px; font-size: 1.5rem; }
.bundle-item-prev .shop-prev-ava.sm { width: 30px; height: 30px; font-size: 1.1rem; }
.bundle-item-prev .shop-prev-pcard { padding: 6px 9px; gap: 6px; }
.bundle-item-prev .shop-prev-title { font-size: .68rem; padding: 3px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bundle-item-prev .shop-prev-motto { font-size: .66rem; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.bundle-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bundle-item-name { font-size: .86rem; color: var(--text-1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bundle-item-rarity { font-size: .68rem; font-weight: 700; color: var(--text-3); }
.bundle-item-rarity.rarity-uncommon  { color: var(--rar-uncommon); }
.bundle-item-rarity.rarity-rare      { color: var(--rar-rare); }
.bundle-item-rarity.rarity-mythic    { color: var(--rar-mythic); }
.bundle-item-rarity.rarity-legendary { color: var(--rar-legendary); }
.bundle-item-tag { flex-shrink: 0; font-size: .76rem; font-weight: 700; color: var(--text-2); white-space: nowrap; }
.bundle-item.is-owned .bundle-item-tag { color: var(--green, #2e9e5b); }

.bundle-empty { color: var(--text-3); font-style: italic; padding: 8px 0; }

/* Footer: combo price / box count + the action button */
.bundle-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border);
}
.bundle-count { font-size: .9rem; font-weight: 700; color: var(--text-2); }

/* ── SHOP FILTER BAR (type / rarity / sort) ───────────────────────────────────── */
.shop-filters {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-md, 13px);
}
.shop-filter { display: flex; flex-direction: column; gap: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.shop-filter select {
  height: 32px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 10px; color: var(--text-1); font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, box-shadow .2s;
}
.shop-filter select:hover { border-color: var(--border-hi); }
.shop-filter select:focus-visible { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); }
/* "Hide hidden products" toggle (teacher management view) — shares the selects'
   explicit height so it lines up exactly, and resets the column's uppercase. */
.shop-filter-checkbox {
  display: inline-flex; align-items: center; gap: 7px; height: 32px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 9px;
  padding: 0 10px; color: var(--text-1); font-size: .85rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; cursor: pointer; transition: border-color .15s;
}
.shop-filter-checkbox:hover { border-color: var(--border-hi); }
.shop-filter-checkbox input { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; }

/* Per-category sub-sections inside the "Productos" grid (type filter = Todos) */
.shop-subsection { margin-bottom: 22px; }
.shop-subsection:last-child { margin-bottom: 0; }
.shop-subsection-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.shop-subsection-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.shop-subsection-head h4 {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.05rem; letter-spacing: .04em;
  color: var(--text-1); margin: 0;
}
.shop-subsection-head .shop-section-icon svg { width: 1.05rem; height: 1.05rem; }
.shop-subsection-count {
  font-size: .72rem; font-weight: 700; color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px;
}

/* Achievement "unlocks a product" picker: kind filter + name search */
.ach-item-filters { display: flex; gap: 8px; margin-bottom: 8px; }
.ach-item-filters #achItemKind { flex: 0 0 auto; min-width: 140px; max-width: 50%; }
/* override .form-input's 320px cap so the search fills the row like the pass picker */
.ach-item-filters #achItemSearch { flex: 1; min-width: 0; max-width: none; }

/* ── LOOTBOXES ─────────────────────────────────────────────────────────────────
   Box product (kind 'lootbox'): a shop preview, a teacher pool picker, the student
   "Abrir cajas" sub-view and the CSGO-style opening carousel + reveal. */

/* Shop card preview for a box */
.shop-prev-lootbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.shop-prev-lootbox-box { font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.shop-prev-lootbox-n { font-size: .62rem; font-weight: 700; color: var(--text-3); letter-spacing: .02em; }

/* Header row holds the open-boxes button next to the coin balance */
/* align-items:stretch makes the "Abrir cajas" button match the coin balance height. */
.shop-actions { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.lootbox-open-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 14px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(212,160,23,.16));
  border: 1px solid rgba(168,85,247,.4); color: var(--text-1);
  font-size: .9rem; font-weight: 600; transition: transform .1s, box-shadow .15s, border-color .15s;
}
.lootbox-open-btn:hover { transform: translateY(-1px); border-color: rgba(168,85,247,.7); box-shadow: 0 4px 16px rgba(168,85,247,.25); }
.lootbox-open-icon { font-size: .9rem; line-height: 1; }
.lootbox-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1;
}

/* Sub-view header — mirrors the profile view's header-to-content spacing (22px). */
.lootbox-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.lootbox-title { flex: 1; min-width: 0; margin-bottom: 0; }
.lootbox-back {
  flex: 0 0 auto; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  padding: 7px 13px; border-radius: 10px; font-size: .82rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.lootbox-back:hover { border-color: var(--border-hi); color: var(--text-1); }
.lootbox-sub { font-size: .85rem; color: var(--text-3); margin: 0 0 22px; }

/* Box grid (student's unopened boxes by type) */
.lootbox-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.lootbox-card {
  --rc: var(--border-hi);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 18px 14px; border-radius: var(--radius-lg, 17px);
  background:
    radial-gradient(80% 55% at 50% -10%, color-mix(in srgb, var(--rc) 12%, transparent), transparent 65%),
    var(--surface-1);
  border: 1.5px solid var(--border);
  transition: transform .25s var(--ease-out), border-color .2s, box-shadow .3s var(--ease-out);
}
.lootbox-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 0 30px -6px color-mix(in srgb, var(--rc) 50%, transparent);
}
.lootbox-card.rarity-uncommon  { --rc: var(--rar-uncommon);  border-color: var(--rar-uncommon); }
.lootbox-card.rarity-rare      { --rc: var(--rar-rare);      border-color: var(--rar-rare); }
.lootbox-card.rarity-mythic    { --rc: var(--rar-mythic);    border-color: var(--rar-mythic); }
.lootbox-card.rarity-legendary { --rc: var(--rar-legendary); border-color: var(--rar-legendary); }
.lootbox-card-box {
  position: relative; font-size: 3rem; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.45));
  transition: transform .3s var(--ease-spring);
}
/* The box itself wiggles when you eye it — begging to be opened */
.lootbox-card:hover .lootbox-card-box { transform: rotate(-7deg) scale(1.12); }
.lootbox-card-count {
  position: absolute; right: -10px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--gold); color: #1a1205; font-size: .74rem; font-weight: 800; border: 2px solid var(--surface-1);
}
.lootbox-card-name { font-weight: 700; font-size: .95rem; color: var(--text-1); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lootbox-card-peek { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; min-height: 30px; }
.lootbox-peek-item {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; font-size: .9rem;
}
.lootbox-peek-item.rarity-uncommon  { border-color: var(--rar-uncommon); }
.lootbox-peek-item.rarity-rare      { border-color: var(--rar-rare); }
.lootbox-peek-item.rarity-mythic    { border-color: var(--rar-mythic); }
.lootbox-peek-item.rarity-legendary { border-color: var(--rar-legendary); }
.lootbox-peek-item .shop-prev-title, .lootbox-peek-item .shop-prev-motto { display: none; }
.lootbox-peek-more { font-size: .72rem; font-weight: 700; color: var(--text-3); }
.lootbox-card-open { width: 100%; margin-top: 2px; }
/* Box actions row: Abrir (fills) + 🎁 Regalar (compact). */
.lootbox-card-actions { display: flex; gap: 6px; width: 100%; margin-top: 2px; }
.lootbox-card-actions .lootbox-card-open { width: auto; flex: 1; margin-top: 0; }
.lootbox-card-gift { flex-shrink: 0; }

.lootbox-empty { text-align: center; padding: 50px 16px; color: var(--text-3); }
.lootbox-empty-icon { font-size: 3rem; margin-bottom: 10px; }
.lootbox-empty p { margin: 0 0 16px; font-style: italic; }

/* Opening overlay + carousel */
.lootbox-opener {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(6,8,14,.82); backdrop-filter: blur(4px);
}
.lootbox-opener-card {
  width: min(680px, 96vw); background: var(--surface-1); border: 1px solid var(--border-hi);
  border-radius: 20px; padding: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.6); text-align: center;
}
.lootbox-opener-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: .04em; color: var(--text-1); margin-bottom: 16px; }

.lootbox-reel-window {
  position: relative; overflow: hidden; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.lootbox-reel-marker {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold), #fff, var(--gold)); border-radius: 2px; z-index: 3;
  box-shadow: 0 0 12px 2px rgba(212,160,23,.7);
}
.lootbox-reel-marker::before, .lootbox-reel-marker::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
}
.lootbox-reel-marker::before { top: -1px;    border-top: 9px solid var(--gold); }
.lootbox-reel-marker::after  { bottom: -1px; border-bottom: 9px solid var(--gold); }
.lootbox-reel { display: flex; gap: 8px; padding: 0 8px; will-change: transform; }
.lootbox-reel-cell {
  flex: 0 0 88px; width: 88px; height: 88px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--surface-3); border: 2px solid var(--border); overflow: hidden;
}
.lootbox-reel-cell.rarity-uncommon  { border-color: var(--rar-uncommon); }
.lootbox-reel-cell.rarity-rare      { border-color: var(--rar-rare); }
.lootbox-reel-cell.rarity-mythic    { border-color: var(--rar-mythic); }
.lootbox-reel-cell.rarity-legendary { border-color: var(--rar-legendary); }
.lootbox-reel-cell .shop-prev-title, .lootbox-reel-cell .shop-prev-motto {
  font-size: .58rem; padding: 3px 5px; max-width: 84px; white-space: normal; line-height: 1.1; overflow: hidden;
}
.lootbox-reel-cell .profile-avatar { width: 42px; height: 42px; font-size: 1.5rem; }

/* Reveal card */
.lootbox-reveal {
  margin-top: 16px; padding: 18px; border-radius: 16px;
  background: var(--surface-2); border: 2px solid var(--border);
  animation: lootboxRevealIn .35s cubic-bezier(.2,1.1,.3,1) both;
}
@keyframes lootboxRevealIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.lootbox-reveal.rarity-uncommon  { border-color: var(--rar-uncommon);  box-shadow: 0 0 30px -4px var(--rar-uncommon); }
.lootbox-reveal.rarity-rare      { border-color: var(--rar-rare);      box-shadow: 0 0 30px -4px var(--rar-rare); }
.lootbox-reveal.rarity-mythic    { border-color: var(--rar-mythic);    box-shadow: 0 0 30px -4px var(--rar-mythic); }
.lootbox-reveal.rarity-legendary { border-color: var(--rar-legendary); box-shadow: 0 0 34px -2px var(--rar-legendary); }
.lootbox-reveal-prev { display: inline-flex; align-items: center; justify-content: center; min-height: 64px; margin-bottom: 8px; }
.lootbox-reveal-prev .profile-avatar { width: 58px; height: 58px; font-size: 2rem; }
.lootbox-reveal-name { font-weight: 800; font-size: 1.15rem; color: var(--text-1); }
.lootbox-reveal-rarity { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-top: 2px; }
.lootbox-reveal-rarity.rarity-uncommon  { color: var(--rar-uncommon); }
.lootbox-reveal-rarity.rarity-rare      { color: var(--rar-rare); }
.lootbox-reveal-rarity.rarity-mythic    { color: var(--rar-mythic); }
.lootbox-reveal-rarity.rarity-legendary { color: var(--rar-legendary); }
.lootbox-reveal-new { margin-top: 10px; font-size: .85rem; font-weight: 600; color: var(--green); }
.lootbox-reveal-dup { margin-top: 10px; font-size: .85rem; color: var(--text-2); }
.lootbox-reveal-dup strong { color: var(--gold); }
.lootbox-reveal-dup .coin-icon { font-size: .9rem; }

/* "Doble apertura" bonus item shown under the main reveal. */
.lootbox-reveal-bonus { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.lootbox-bonus-head { font-size: .82rem; font-weight: 800; color: var(--gold); margin-bottom: 8px; }
.lootbox-bonus-row { display: flex; align-items: center; gap: 12px; justify-content: center; }
.lootbox-bonus-prev { width: 54px; height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; border-radius: 12px; background: var(--surface-1); border: 1.5px solid var(--rc, var(--border)); }
.lootbox-bonus-info { text-align: left; }
.lootbox-bonus-name { font-weight: 700; font-size: .92rem; color: var(--text-1); }
.lootbox-bonus-rarity { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rc, var(--text-3)); margin-left: 4px; }
.lootbox-bonus-status { font-size: .78rem; color: var(--text-2); margin-top: 2px; }

.lootbox-opener-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.lootbox-skip {
  background: transparent; border: 1px solid var(--border); color: var(--text-2);
  padding: 9px 18px; border-radius: 10px; font-size: .85rem; cursor: pointer; transition: border-color .15s, color .15s;
}
.lootbox-skip:hover { border-color: var(--border-hi); color: var(--text-1); }
.lootbox-claim {
  background: var(--red); border: 1px solid var(--red); color: #fff;
  padding: 9px 22px; border-radius: 10px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: background .15s, box-shadow .15s;
}
.lootbox-claim:hover { background: var(--red-dark); box-shadow: var(--shadow-red); }
/* "Abrir otra" — secondary action, SAME size as the claim button. */
.lootbox-again {
  background: transparent; border: 1px solid var(--border-hi); color: var(--text-1);
  padding: 9px 22px; border-radius: 10px; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.lootbox-again:hover { border-color: var(--gold); background: var(--surface-2); }

/* Teacher box config (pool picker + weights) inside the shop item modal */
.lb-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 4px 0 2px; }
.lb-weight { display: flex; flex-direction: column; gap: 3px; }
.lb-weight-name { font-size: .72rem; font-weight: 700; color: var(--text-2); }
.lb-weight-name.rarity-uncommon  { color: var(--rar-uncommon); }
.lb-weight-name.rarity-rare      { color: var(--rar-rare); }
.lb-weight-name.rarity-mythic    { color: var(--rar-mythic); }
.lb-weight-name.rarity-legendary { color: var(--rar-legendary); }
.lb-weight input { padding: 6px 8px; }
/* Pool picker filter bar: type dropdown + name search (filters in place) */
.lb-pool-filters { display: flex; gap: 8px; margin-bottom: 8px; }
.lb-pool-filters #lbPoolKind { flex: 0 0 auto; min-width: 150px; max-width: 50%; }
.lb-pool-filters #lbPoolSearch { flex: 1; min-width: 0; }
.lb-pool-none { font-size: .82rem; color: var(--text-3); font-style: italic; margin-top: 8px; }
.lb-pool {
  display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto;
  padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-1);
}
.lb-pool-group-head { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 5px; }
.lb-pool-group-head.rarity-uncommon  { color: var(--rar-uncommon); }
.lb-pool-group-head.rarity-rare      { color: var(--rar-rare); }
.lb-pool-group-head.rarity-mythic    { color: var(--rar-mythic); }
.lb-pool-group-head.rarity-legendary { color: var(--rar-legendary); }
.lb-pool-items { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-pool-item {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: .78rem; color: var(--text-2); cursor: pointer;
}
.lb-pool-item:hover { border-color: var(--border-hi); }
.lb-pool-item.rarity-uncommon  { border-left: 3px solid var(--rar-uncommon); }
.lb-pool-item.rarity-rare      { border-left: 3px solid var(--rar-rare); }
.lb-pool-item.rarity-mythic    { border-left: 3px solid var(--rar-mythic); }
.lb-pool-item.rarity-legendary { border-left: 3px solid var(--rar-legendary); }
.lb-pool-cb { accent-color: var(--gold); cursor: pointer; }

/* Teacher simulator (infinite boxes in student preview) */
.lootbox-open-btn.is-sim {
  background: linear-gradient(135deg, rgba(59,130,246,.2), rgba(168,85,247,.18));
  border-color: rgba(59,130,246,.5);
}
.lootbox-open-btn.is-sim .lootbox-badge { background: var(--rar-uncommon); }
.lootbox-sim-banner {
  margin-bottom: 16px; padding: 10px 14px; border-radius: 10px; font-size: .8rem; line-height: 1.4;
  background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.35); color: var(--text-2);
}
.lootbox-reveal-sim { margin-top: 10px; font-size: .82rem; font-weight: 600; color: var(--rar-uncommon); }
.lootbox-reveal.is-sim { box-shadow: 0 0 26px -6px var(--rar-uncommon); }

/* ── PETS (mascotas) ───────────────────────────────────────────────────────────
   Shop preview emoji, the profile "Mi mascota" card (portrait + 6 stat bars +
   personality + switcher) and the teacher stat-range editor. Rarity tints the
   border / accent via --rc, same vars as the shop cards. */
.shop-prev-pet { font-size: 2.6rem; line-height: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
.shop-pet-owned { font-size: .68rem; font-weight: 600; color: var(--text-3); text-align: center; margin: 2px 0 -2px; }
.shop-pet-owned.rarity-uncommon  { color: var(--rar-uncommon); }
.shop-pet-owned.rarity-rare      { color: var(--rar-rare); }
.shop-pet-owned.rarity-mythic    { color: var(--rar-mythic); }
.shop-pet-owned.rarity-legendary { color: var(--rar-legendary); }
.shop-pet-prog { opacity: .85; }

.profile-pet-section { margin-bottom: 28px; }

/* Daily-login streak chip — flame + number, pinned to the bottom-right of the identity
   card (public on any profile). The unified "días seguidos" counter that also feeds pet XP. */
.profile-streak {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; line-height: 1; color: var(--text-1);
  background: color-mix(in srgb, #ff7a18 20%, var(--surface-2));
  border: 1px solid color-mix(in srgb, #ff7a18 48%, transparent);
}
.profile-streak-flame { font-size: .9rem; }

.pet-card {
  --rc: var(--rar-common);   /* común (sin clase de rareza) usa el color neutral */
  display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
  padding: 16px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.pet-card.rarity-uncommon  { --rc: var(--rar-uncommon);  border-color: var(--rar-uncommon); }
.pet-card.rarity-rare      { --rc: var(--rar-rare);      border-color: var(--rar-rare); }
.pet-card.rarity-mythic    { --rc: var(--rar-mythic);    border-color: var(--rar-mythic); }
.pet-card.rarity-legendary { --rc: var(--rar-legendary); border-color: var(--rar-legendary); }
.pet-portrait {
  flex-shrink: 0; width: 84px; height: 84px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-1); border: 1.5px solid var(--rc);
  box-shadow: 0 0 22px -10px var(--rc);
}
.pet-emoji { font-size: 3rem; line-height: 1; }
.pet-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.pet-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pet-name { font-size: 1.15rem; font-weight: 700; color: var(--text-1); }
.pet-rarity-chip {
  font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; color: var(--rc);
  border: 1px solid var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent);
}
.pet-species { font-size: .82rem; color: var(--text-3); margin-top: -2px; }
.pet-traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.pet-trait {
  font-size: .72rem; font-weight: 600; color: var(--text-2);
  padding: 2px 9px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border);
}
.pet-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 18px; margin-top: 4px; }
.pet-stat { display: grid; grid-template-columns: 74px 1fr 24px; align-items: center; gap: 8px; }
.pet-stats .pet-stat:last-child { grid-column: 1 / -1; }   /* Vínculo (5th stat) spans both columns */
.pet-stat-name { font-size: .74rem; color: var(--text-3); }
.pet-stat-bar { display: block; height: 7px; background: var(--surface-3); border-radius: 20px; overflow: hidden; }
.pet-stat-fill { display: block; height: 100%; min-width: 3px; border-radius: 20px; background: linear-gradient(90deg, var(--rc, var(--gold)), color-mix(in srgb, var(--rc, var(--gold)) 55%, #fff)); transition: width .5s ease; }
.pet-stat-val { font-size: .78rem; font-weight: 700; color: var(--text-2); text-align: right; }

.pet-switch-wrap { margin-top: 14px; }
.pet-switch-label { font-size: .74rem; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
.pet-switcher { display: flex; flex-wrap: wrap; gap: 8px; }
.pet-switch {
  width: 46px; height: 46px; border-radius: 12px; font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-1); border: 1.5px solid var(--border); transition: border-color .15s, transform .1s;
}
.pet-switch:hover { transform: translateY(-2px); }
.pet-switch:active { transform: scale(.94); }
.pet-switch.rarity-uncommon  { border-color: var(--rar-uncommon); }
.pet-switch.rarity-rare      { border-color: var(--rar-rare); }
.pet-switch.rarity-mythic    { border-color: var(--rar-mythic); }
.pet-switch.rarity-legendary { border-color: var(--rar-legendary); }
.pet-switch.selected { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 40%, transparent); }

.pet-empty { text-align: center; padding: 18px 12px; color: var(--text-2); }
.pet-empty-emoji { font-size: 2.4rem; margin-bottom: 6px; }
.pet-empty p { margin: 0 0 8px; font-size: .9rem; }

/* Species + personality line, personality effect chip. */
.pet-sub { font-size: .82rem; color: var(--text-3); margin-top: -2px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pet-pers { font-weight: 600; color: var(--text-2); }
.pet-pers-eff { font-weight: 600; color: var(--rc); font-size: .72rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); }

/* Friendship (level) meter — 10 discrete segments so it reads as a progression path. */
.pet-friendship { margin: 8px 0 2px; }
.pet-friendship-head { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
.pet-friendship-segs { display: grid; gap: 3px; }
.pet-friendship-seg { height: 9px; border-radius: 3px; background: var(--surface-3); transition: background .3s ease; }
.pet-friendship-seg.on { background: linear-gradient(90deg, #e0a826, #f4d35e); }
/* XP progress toward the next level (earned, not manual). */
.pet-xp { margin-top: 6px; }
.pet-xp-bar { height: 5px; border-radius: 20px; background: var(--surface-3); overflow: hidden; }
.pet-xp-fill { display: block; height: 100%; border-radius: 20px; background: color-mix(in srgb, var(--rc, var(--gold)) 70%, #fff); transition: width .5s ease; }
.pet-xp-text { font-size: .68rem; color: var(--text-3); margin-top: 3px; }
.pet-xp-max { font-size: .74rem; font-weight: 700; color: var(--rar-legendary); }

/* Pettable portrait (+ floating heart on tap). */
.pet-portrait.is-pettable { cursor: pointer; transition: transform .1s ease; }
.pet-portrait.is-pettable:hover { transform: scale(1.05); }
.pet-portrait.is-pettable:active { transform: scale(.92); }
.pet-heart-float { position: fixed; transform: translate(-50%, -50%); font-size: 1.6rem; pointer-events: none; z-index: 9999;
  animation: petHeartFloat 1.1s ease-out forwards; }
@keyframes petHeartFloat {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  20%  { opacity: 1; transform: translate(-50%, -90%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -240%) scale(1); }
}

/* Special ability row (every pet; "activa" tag when equipped). */
.pet-ability { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 9px 11px; border-radius: 11px;
  background: var(--surface-3); border: 1px solid var(--border); }
.pet-ability.is-active { border-color: color-mix(in srgb, var(--rc) 55%, transparent); background: color-mix(in srgb, var(--rc) 8%, var(--surface-3)); }
.pet-ability-icon { font-size: 1.25rem; line-height: 1.2; }
.pet-ability-text { font-size: .8rem; color: var(--text-1); }
.pet-ability-on { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rc);
  border: 1px solid var(--rc); border-radius: 999px; padding: 0 6px; margin-left: 4px; vertical-align: middle; }
.pet-ability-desc { color: var(--text-3); font-size: .75rem; }

/* Pet species detail modal (shop): stat ranges + ability. Reuses #bundleModal. */
.pet-detail { margin-top: 4px; }
.pet-detail-section-label { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin: 14px 0 8px; }
.pet-detail-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; }
.pet-detail-stat { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px; border-radius: 9px; background: var(--surface-1); border: 1px solid var(--border); }
.pet-detail-stat-name { font-size: .78rem; color: var(--text-2); }
.pet-detail-stat-range { font-size: .82rem; font-weight: 700; color: var(--text-1); font-variant-numeric: tabular-nums; }
.pet-detail-ability { display: flex; gap: 10px; align-items: flex-start; padding: 11px; border-radius: 11px; background: var(--surface-1); border: 1px solid var(--border); }
.pet-detail-ability-icon { font-size: 1.4rem; line-height: 1.1; }
.pet-detail-ability-text { font-size: .84rem; color: var(--text-1); }
.pet-detail-ability-desc { color: var(--text-3); font-size: .77rem; }

/* Passive bonuses of the equipped pet. */
.pet-bonuses-wrap { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.pet-bonuses-label { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
.pet-bonuses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.pet-bonus { display: flex; align-items: baseline; gap: 6px; font-size: .76rem; }
.pet-bonus-stat { font-weight: 600; color: var(--text-2); }
.pet-bonus-val { font-weight: 700; color: var(--rc); font-variant-numeric: tabular-nums; }
.pet-bonus-txt { color: var(--text-3); font-size: .72rem; }

/* Combine progress hint + level-up / reset actions. */
.pet-combine { margin-top: 8px; font-size: .76rem; color: var(--text-3); }
.pet-combine strong { color: var(--rc); }
.pet-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.pet-actions .btn { padding: 7px 14px; font-size: .82rem; }
.pet-maxlvl { font-size: .82rem; font-weight: 600; color: var(--rar-legendary); }
.pet-btn-sell { color: var(--rar-mythic); border-color: color-mix(in srgb, var(--rar-mythic) 45%, transparent); }
.pet-btn-sell:hover { background: color-mix(in srgb, var(--rar-mythic) 12%, transparent); }

/* Fusion modal: pet picker + note. Stat rows reuse the level-up modal styles. */
.pet-fuse-pick { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pet-fuse-label { font-size: .82rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pet-fuse-select { flex: 1; padding: 8px 10px; border-radius: 10px; background: var(--surface-1); color: var(--text-1); border: 1px solid var(--border); font-size: .86rem; }
.pet-fuse-intro { font-size: .86rem; color: var(--text-2); margin: 4px 0 10px; }
.pet-fuse-note { font-size: .76rem; color: var(--text-3); margin: 12px 0 0; text-align: center; }

/* Level-up modal: emoji + per-stat growth rows with animated bars. */
.pet-lvl-emoji { font-size: 3.2rem; text-align: center; line-height: 1; margin: 4px 0 8px; }
.pet-lvl-intro { text-align: center; font-size: .9rem; color: var(--text-2); margin: 0 0 14px; }
.pet-lvl-stats { display: flex; flex-direction: column; gap: 8px; }
.pet-lvl-row { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 10px; }
.pet-lvl-name { font-size: .8rem; color: var(--text-2); }
.pet-lvl-val { font-size: .82rem; font-weight: 700; color: var(--text-1); text-align: right; }
.pet-lvl-up { color: #2e9e5b; font-size: .76rem; }
.pet-lvl-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* Teacher: 6 stat-range rows (min–max) in the shop item form. */
.pet-range-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 6px 0 4px; }
.pet-range { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; }
.pet-range-name { font-size: .78rem; color: var(--text-2); }
.pet-range .form-input { width: 56px; padding: 5px 6px; text-align: center; }
.pet-range-dash { color: var(--text-3); }

@media (max-width: 560px) {
  .pet-stats, .pet-range-grid { grid-template-columns: 1fr; }
}