/* =====================================================================
   ITEM MODAL V3 — Obsidian Codex (2026-05-30)
   Rediseño completo del modal de items del inventario.
   Prefix: .icm-* (Item Codex Modal)
   - Hero más cinematográfico con halo de rareza
   - Stats grid 2-col uniforme
   - Acciones bien distribuidas: primary full-width / secondary 2-col / drop separado
   - Mobile-first: stacks naturalmente, padding reducido en <420px
   ===================================================================== */
.icm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5,3,2,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: 16px;
  /* 2026-06-03 mobile fix: overlay NO scrollea — el scroll vive dentro del modal.
     Antes con overflow-y:auto el scroll del body filtraba a la página de fondo
     (Si Lo Equipas movía el inventario en vez del modal). */
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.icm-modal {
  --icm-bg: #0e0a07;
  --icm-bg-2: #1a120a;
  --icm-border: rgba(212,180,131,0.22);
  --icm-border-strong: rgba(212,180,131,0.4);
  --icm-gold: #d4b483;
  --icm-gold-grad: linear-gradient(135deg,#d4b483 0%,#b08c5a 60%,#8c6837 100%);
  --icm-text: #ece2cd;
  --icm-text-soft: #b8a884;
  --icm-text-dim: #7a6850;
  --icm-emerald: #4cb87a;
  --icm-cyan: #5fcfff;
  --icm-arcane: #9d6cf0;
  --icm-ember: #ff8a4c;
  --icm-blood: #ff4757;

  --icm-rarity: #b8a884; /* default common */

  width: min(94vw, 460px);
  max-height: 92vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(157,108,240,0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--icm-bg-2) 0%, var(--icm-bg) 100%);
  border: 1px solid var(--icm-border);
  border-radius: 16px;
  box-shadow:
    0 40px 100px -24px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--icm-text);
  font-family: 'Inter', system-ui, sans-serif;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Tinte de rareza */
.icm-modal.r-common    { --icm-rarity: #b8a884; }
.icm-modal.r-uncommon  { --icm-rarity: #6fc26a; }
.icm-modal.r-rare      { --icm-rarity: #5fcfff; }
.icm-modal.r-epic      { --icm-rarity: #b97aff; }
.icm-modal.r-legendary { --icm-rarity: #ffb84a; }
.icm-modal.r-mythic    { --icm-rarity: #ff6a4c; }

/* Halo sutil de rareza pegado al borde */
.icm-modal::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icm-rarity) 28%, transparent);
  z-index: 1;
}

.icm-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid var(--icm-border);
  color: var(--icm-text-soft); display: grid; place-items: center;
  font-size: 16px; cursor: pointer; transition: all .15s;
}
.icm-close:hover { color: var(--icm-rarity); border-color: var(--icm-rarity); }

/* ============== HERO ============== */
/* Section label (shield + yellow line, estilo .iv2-panel-title)
   2026-05-30: ahora alineado a la izquierda (no centrado) — el hero pasa a
   layout horizontal con icono izq + info der. */
.icm-sec-label {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif; font-size: 11px;
  font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--icm-gold);
  text-shadow: 0 0 8px rgba(212,180,131,0.25);
  margin: 0 0 6px;
}
.icm-sec-label i { color: var(--icm-gold); font-size: 14px; }
.icm-sec-label::after {
  content: ""; flex: 1;
  height: 1px; margin-left: 4px; max-width: 60px;
  background: linear-gradient(90deg, var(--icm-gold), transparent);
}

/* Hero horizontal: icono izq + info der */
.icm-hero {
  position: relative;
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px 16px;
  text-align: left;
  border-bottom: 1px solid var(--icm-border);
  background:
    radial-gradient(60% 100% at 0% 50%, color-mix(in srgb, var(--icm-rarity) 18%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 70%);
}
.icm-hero-info { flex: 1; min-width: 0; }
.icm-hero-imgwrap {
  width: 120px; height: 120px;
  position: relative; flex-shrink: 0;
  display: grid; place-items: center;
}
.icm-hero-imgwrap::before {
  content: ''; position: absolute; inset: -16px;
  background: radial-gradient(circle, color-mix(in srgb, var(--icm-rarity) 18%, transparent) 0%, transparent 60%);
  filter: blur(14px);
  z-index: 0;
}
.icm-hero-img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--icm-rarity) 35%, transparent));
}
.icm-hero-img-real {
  width: 100%; height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  image-rendering: -webkit-optimize-contrast;
}
.icm-hero-img i { font-size: 76px; color: var(--icm-rarity); }
.icm-hero-img iconify-icon,
.icm-hero-img .gi {
  display: block;
  width: 90px !important;
  height: 90px !important;
  font-size: 90px !important;
  color: var(--icm-rarity);
  line-height: 1;
}
.icm-hero-img svg,
.icm-hero-img img,
.icm-hero-img .item-icon-svg { width: 90px !important; height: 90px !important; }

.icm-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 17px; letter-spacing: 1.2px;
  color: var(--icm-rarity);
  margin-bottom: 6px;
  text-shadow: 0 2px 12px color-mix(in srgb, var(--icm-rarity) 25%, transparent);
  line-height: 1.2;
}
/* ID tag — pequeño chip mostrando #inventoryId al lado del nombre */
.icm-id-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--icm-text-dim);
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--icm-border);
  padding: 1px 6px;
  border-radius: 5px;
  vertical-align: middle;
  margin-left: 4px;
  text-shadow: none;
}
.icm-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.icm-pill {
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--icm-border);
  color: var(--icm-text-soft); font-weight: 600;
}
.icm-pill.is-rarity { color: var(--icm-rarity); border-color: color-mix(in srgb, var(--icm-rarity) 50%, transparent); background: color-mix(in srgb, var(--icm-rarity) 10%, transparent); }
.icm-pill.is-unique { color: var(--icm-cyan); border-color: rgba(95,207,255,0.5); background: rgba(95,207,255,0.1); }
.icm-pill.is-broken { color: var(--icm-blood); border-color: rgba(255,71,87,0.5); background: rgba(255,71,87,0.1); }
.icm-pill.is-lock { color: var(--icm-ember); border-color: rgba(255,138,76,0.5); background: rgba(255,138,76,0.1); }
.icm-pill.is-qty { color: var(--icm-gold); border-color: rgba(212,180,131,0.5); background: rgba(212,180,131,0.08); font-family: 'JetBrains Mono', monospace; }

/* ============== BODY ============== */
.icm-body {
  flex: 1 1 auto;
  /* 2026-06-09 CRITICAL: min-height:0 es necesario para que un flex child
     respete el max-height del padre. Sin esto, cuando el contenido se expande
     (ej. "Si lo equipas"), el body crece fuera del modal y el scroll no
     funciona (al hacer scroll se mueve la página de fondo). */
  min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--icm-border) transparent;
  /* 2026-06-03 mobile fix: aislar scroll para que no bubble a la página.
     touch-action:pan-y permite el scroll vertical normal pero evita gestos
     bug-prone que mueven la página detrás. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.icm-body::-webkit-scrollbar { width: 6px; }
.icm-body::-webkit-scrollbar-thumb { background: var(--icm-border); border-radius: 3px; }

/* Banners (expiry, broken) */
.icm-banner {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; border-radius: 9px;
  font-size: 12.5px; line-height: 1.45;
}
.icm-banner i { margin-top: 1px; font-size: 16px; flex-shrink: 0; }
.icm-banner.is-expiry { background: rgba(95,207,255,0.07); border: 1px solid rgba(95,207,255,0.28); color: var(--icm-cyan); }
.icm-banner.is-expiry.is-urgent { background: rgba(255,138,76,0.1); border-color: rgba(255,138,76,0.4); color: var(--icm-ember); }
.icm-banner.is-broken { background: rgba(255,71,87,0.08); border: 1px solid rgba(255,71,87,0.32); color: var(--icm-blood); }
.icm-banner .icm-banner-text { color: var(--icm-text); }

/* Stats grid */
.icm-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.icm-stat {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18));
  border: 1px solid var(--icm-border);
  border-radius: 8px;
}
.icm-stat i { color: var(--icm-rarity); font-size: 15px; flex-shrink: 0; }
.icm-stat-val { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 600; color: var(--icm-text); }
.icm-stat.is-gold { background: linear-gradient(180deg, rgba(212,180,131,0.1), rgba(0,0,0,0.18)); }
.icm-stat.is-gold i, .icm-stat.is-gold .icm-stat-val { color: var(--icm-gold); }

/* Comparison "if you equip" — collapsible */
.icm-compare {
  border: 1px solid var(--icm-border);
  border-radius: 9px;
  background: rgba(0,0,0,0.22);
  overflow: hidden;
}
.icm-compare-head {
  width: 100%; padding: 9px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  color: var(--icm-text); font-family: inherit; font-size: 11.5px;
  letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
}
.icm-compare-head i:first-child { color: var(--icm-cyan); font-size: 14px; }
.icm-compare-head .icm-caret { margin-left: auto; transition: transform .2s; font-size: 14px; color: var(--icm-text-soft); }
.icm-compare.is-open .icm-caret { transform: rotate(180deg); }
.icm-compare-body { display: none; padding: 6px 12px 12px; }
.icm-compare.is-open .icm-compare-body { display: flex; flex-direction: column; gap: 4px; }
.icm-cmp-row {
  display: grid;
  grid-template-columns: 18px 1fr auto 12px auto auto;
  gap: 6px; align-items: center;
  font-size: 11.5px; padding: 4px 0;
}
.icm-cmp-row > i:first-child { color: var(--icm-text-soft); font-size: 14px; }
.icm-cmp-label { color: var(--icm-text-soft); font-weight: 500; }
.icm-cmp-cur, .icm-cmp-nxt { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--icm-text); }
.icm-cmp-cur { opacity: 0.65; }
.icm-cmp-arrow { color: var(--icm-text-dim); font-size: 11px; }
.icm-cmp-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 999px;
  margin-left: 4px;
}
.icm-cmp-row.is-up   .icm-cmp-delta { color: #6fc26a; background: rgba(111,194,106,0.13); }
.icm-cmp-row.is-down .icm-cmp-delta { color: #ff7b7b; background: rgba(255,123,123,0.13); }

/* Buffs card */
.icm-buffs {
  border: 1px solid color-mix(in srgb, var(--icm-arcane) 30%, transparent);
  background: linear-gradient(180deg, rgba(157,108,240,0.06), rgba(0,0,0,0.18));
  border-radius: 9px;
  padding: 10px 12px;
}
.icm-buffs-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--icm-arcane); font-weight: 700;
  margin-bottom: 8px;
}
.icm-buffs-head i { font-size: 14px; }
.icm-buffs-list { display: flex; flex-direction: column; gap: 5px; }
.icm-buff {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 7px;
  background: rgba(0,0,0,0.22);
}
.icm-buff-icon {
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center;
  background: rgba(157,108,240,0.16);
  color: var(--icm-arcane); font-size: 13px;
}
.icm-buff-name { flex: 1; font-size: 12px; color: var(--icm-text); }
.icm-buff-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--icm-arcane); }

/* Info button per buff + expandible desc (2026-06-24) */
.icm-buff-info-btn {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(157,108,240,0.12);
  border: 1px solid rgba(157,108,240,0.32);
  color: var(--icm-arcane);
  cursor: pointer;
  padding: 0; margin-left: 4px;
  transition: background 0.15s, transform 0.15s, color 0.15s;
}
.icm-buff-info-btn i { font-size: 12px; }
.icm-buff-info-btn:hover { background: rgba(157,108,240,0.24); transform: scale(1.08); }
.icm-buff-info-btn.is-open {
  background: var(--icm-arcane);
  color: #1a0f2e;
  border-color: var(--icm-arcane);
}
.icm-buff-desc {
  margin: -2px 4px 4px;
  padding: 8px 11px;
  font-size: 11.5px; line-height: 1.45;
  color: color-mix(in srgb, var(--icm-text) 88%, transparent);
  background: rgba(0,0,0,0.32);
  border-left: 2px solid var(--icm-arcane);
  border-radius: 0 6px 6px 0;
}

/* Gold split — ORO/DÍA | ORO/MES (reemplaza el ROI card antiguo) */
.icm-goldsplit {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background:
    radial-gradient(140% 120% at 50% 50%, color-mix(in srgb, var(--icm-gold) 10%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgba(212,180,131,0.06), rgba(0,0,0,0.20));
  border: 1px solid color-mix(in srgb, var(--icm-gold) 32%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.icm-goldsplit-half {
  display: flex; flex-direction: column; gap: 3px; align-items: center;
  text-align: center;
  min-width: 0;
}
.icm-goldsplit-sep {
  align-self: stretch;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--icm-gold) 30%, transparent), transparent);
  margin: 6px 0;
}
.icm-goldsplit-label {
  font-family: 'Cinzel', serif; font-size: 9.5px;
  font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--icm-text-soft);
  opacity: 0.85;
}
.icm-goldsplit-val {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-family: 'Cinzel', serif;
  font-weight: 700; font-size: 18px;
  color: var(--icm-gold);
  letter-spacing: 0.5px;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--icm-gold) 25%, transparent);
  line-height: 1;
}
.icm-goldsplit-val i {
  font-size: 14px;
  color: var(--icm-gold);
  opacity: 0.78;
  transform: translateY(1px);
}
@media (max-width: 420px) {
  .icm-goldsplit { padding: 9px 12px; }
  .icm-goldsplit-val { font-size: 16px; }
  .icm-goldsplit-val i { font-size: 13px; }
}

/* ROI card */
.icm-roi {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 9px;
  background: linear-gradient(180deg, rgba(212,180,131,0.1), rgba(0,0,0,0.18));
  border: 1px solid color-mix(in srgb, var(--icm-gold) 30%, transparent);
}
.icm-roi > i:first-child { font-size: 22px; color: var(--icm-gold); }
.icm-roi-label { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--icm-text-soft); font-weight: 600; }
.icm-roi-text { font-size: 12px; color: var(--icm-text); margin-top: 1px; }

/* Description */
.icm-desc {
  font-size: 12.5px; line-height: 1.55;
  color: var(--icm-text-soft);
  font-style: italic;
  padding: 8px 12px;
  border-left: 2px solid var(--icm-border);
  background: rgba(0,0,0,0.18);
  border-radius: 0 6px 6px 0;
}

/* ============== ACTIONS FOOTER ============== */
.icm-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--icm-border);
  background: rgba(0,0,0,0.22);
  display: flex; flex-direction: column; gap: 8px;
}
.icm-btn {
  height: 42px; padding: 0 14px;
  border-radius: 9px; border: 1px solid var(--icm-border);
  background: rgba(0,0,0,0.32); color: var(--icm-text);
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase;
  cursor: pointer; transition: all .18s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%;
}
.icm-btn i { font-size: 15px; }
.icm-btn:hover:not(:disabled) { border-color: var(--icm-border-strong); color: #fff; transform: translateY(-1px); }
.icm-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.icm-btn-primary {
  background: var(--icm-gold-grad);
  border-color: transparent; color: #1a120a;
  box-shadow: 0 6px 18px -8px rgba(212,180,131,0.55);
}
.icm-btn-primary:hover:not(:disabled) { filter: brightness(1.1); color: #1a120a; transform: translateY(-1px); }

/* Row of 2 secondary actions */
.icm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.icm-row .icm-btn { font-size: 11px; height: 38px; }
@media (max-width: 380px) {
  .icm-row { grid-template-columns: 1fr; }
}

/* Drop — separado y tenue. 2026-06-14: ahora puede contener Desmantelar +
   Tirar lado a lado; usamos flex para repartir parejo cuando hay 2 botones. */
.icm-row-drop {
  margin-top: 4px; padding-top: 10px;
  border-top: 1px dashed rgba(255,71,87,0.18);
  display: flex; gap: 8px;
}
.icm-row-drop > .icm-btn { flex: 1; }
.icm-btn-danger {
  background: rgba(255,71,87,0.08);
  border-color: rgba(255,71,87,0.32);
  color: #ff8a93;
  font-size: 11px; height: 36px;
  letter-spacing: 1.2px;
}
.icm-btn-danger:hover:not(:disabled) {
  background: rgba(255,71,87,0.18);
  border-color: rgba(255,71,87,0.5);
  color: #fff;
}

/* Box quantity selector */
.icm-box-qty {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 4px;
  padding: 8px;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--icm-border);
  border-radius: 8px;
}
.icm-qty-btn {
  width: 30px; height: 30px; border-radius: 6px;
  background: rgba(0,0,0,0.4); border: 1px solid var(--icm-border);
  color: var(--icm-text); display: grid; place-items: center; cursor: pointer;
}
.icm-qty-btn:hover { border-color: var(--icm-gold); color: var(--icm-gold); }
.icm-qty-input {
  width: 50px; height: 30px; text-align: center;
  background: rgba(0,0,0,0.45); border: 1px solid var(--icm-border);
  border-radius: 6px; color: var(--icm-text);
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
}
.icm-qty-quick {
  height: 28px; padding: 0 8px; border-radius: 6px;
  background: rgba(212,180,131,0.1); border: 1px solid var(--icm-border);
  color: var(--icm-gold); cursor: pointer;
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 11px;
  letter-spacing: 1px;
}
.icm-qty-quick:hover { background: rgba(212,180,131,0.2); }
.icm-qty-input::-webkit-outer-spin-button,
.icm-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.icm-qty-input { -moz-appearance: textfield; }

/* ============== MOBILE ============== */
@media (max-width: 600px) {
  .icm-overlay { padding: 8px; place-items: center; }
  /* 2026-06-09: height ahora es AUTO con max-height — antes era 78vh fijo, lo
     que hacía que items con poco contenido tuvieran un gran espacio vacío abajo
     ("se ve agrandada la parte de abajo"). Ahora el modal se ajusta al contenido. */
  .icm-modal,
  .icm-modal:not(.bzp-modal):not(.pbt-modal) {
    width: 100%;
    max-width: 420px;
    height: auto !important;
    max-height: calc(100vh - 16px) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    clip-path: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Hero compacto */
  .icm-hero { padding: 10px 10px 8px; gap: 10px; flex-shrink: 0; }
  .icm-hero-imgwrap { width: 72px; height: 72px; }
  .icm-hero-img-real { width: 100%; height: 100%; }
  .icm-hero-img i { font-size: 48px; }
  .icm-hero-img iconify-icon,
  .icm-hero-img .gi {
    width: 52px !important; height: 52px !important; font-size: 52px !important;
  }
  .icm-hero-img svg,
  .icm-hero-img img,
  .icm-hero-img .item-icon-svg { width: 52px !important; height: 52px !important; }
  .icm-title { font-size: 14px; }
  /* Body: scroll interno SOLO si el contenido no entra; sino se ajusta. */
  .icm-body {
    padding: 10px 12px !important;
    gap: 7px;
    flex: 0 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Footer compacto sin padding excesivo */
  .icm-footer,
  .icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-footer {
    padding: 8px 12px 10px !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
  }
  .icm-btn { height: 38px; font-size: 11px; }
  .icm-row .icm-btn { height: 34px; font-size: 10.5px; }
  /* Stats grid: 2 cols pero más compactos en mobile */
  .icm-stat { padding: 7px 9px; }
  .icm-stat-val { font-size: 12px; }

  /* Forge card más compacta para no estirar el modal */
  .icm-forge-card {
    padding: 14px 10px 10px !important;
    margin-top: 4px !important;
  }
  .icm-forge-btn { padding: 8px 8px !important; font-size: 11.5px !important; }

  /* 2026-06-09: ocultar "Si lo equipas" en mobile — el contenido expansible
     causa overflow issues con el modal scroll y la mejor solución es
     simplemente no mostrarlo en mobile. Los stats principales ya están
     visibles arriba; el usuario puede ver la comparación en PC. */
  .icm-compare,
  .icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-compare {
    display: none !important;
  }
}
@media (max-width: 360px) {
  .icm-stats { grid-template-columns: 1fr; }
}

/* =====================================================================
   BAZAR PUBLISH MODAL (.bzp-*)
   Reusa los tokens del .icm-modal — incluso comparte algunas clases.
   Diferencias: header glyph megaphone, item summary card, fields + summary.
   ===================================================================== */
.bzp-modal {
  --bzp-emerald: #4cb87a;
  --bzp-emerald-soft: rgba(76,184,122,0.16);
  --bzp-blood: #ff4757;
}

/* Compact horizontal header (icon izq + title/sub der) */
.bzp-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--icm-border);
  text-align: left;
  background:
    radial-gradient(40% 100% at 0% 50%, color-mix(in srgb, var(--icm-gold) 14%, transparent) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 70%);
}
.bzp-head-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  color: var(--icm-gold); font-size: 36px;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--icm-gold) 40%, transparent));
  flex-shrink: 0;
}
.bzp-head-text { flex: 1; min-width: 0; }
.bzp-head-title {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 16px; letter-spacing: 1.4px;
  color: var(--icm-gold);
  margin-bottom: 3px;
  text-shadow: 0 1px 8px color-mix(in srgb, var(--icm-gold) 25%, transparent);
}
.bzp-head-sub {
  font-size: 12px; line-height: 1.45;
  color: var(--icm-text-soft);
}

/* Item summary card */
.bzp-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.18));
  border: 1px solid var(--icm-border);
}
.bzp-item-img {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--icm-rarity) 32%, transparent));
}
.bzp-item-img iconify-icon,
.bzp-item-img .gi,
.bzp-item-img svg,
.bzp-item-img img,
.bzp-item-img .item-icon-svg {
  display: block;
  width: 56px !important; height: 56px !important; font-size: 56px !important;
  color: var(--icm-rarity);
  line-height: 1;
}
.bzp-item-img .bzp-item-img-real {
  width: 100%; height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.bzp-item-info { flex: 1; min-width: 0; }
.bzp-item-name {
  font-family: 'Cinzel', serif; font-weight: 600;
  font-size: 14px; letter-spacing: 0.5px;
  color: var(--icm-rarity);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bzp-item-meta { display: flex; flex-wrap: wrap; gap: 4px; }

/* Field block (qty + price) */
.bzp-field { display: flex; flex-direction: column; gap: 6px; }
.bzp-field-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--icm-text-soft); font-weight: 600;
}
.bzp-field-label > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.bzp-field-label i { color: var(--icm-gold); font-size: 14px; }
.bzp-field-hint {
  text-transform: none; letter-spacing: normal;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--icm-text-dim); font-weight: 500;
}
.bzp-field-hint b { color: var(--icm-gold); }

/* Quantity stepper */
.bzp-qty-row {
  display: grid; grid-template-columns: 36px 1fr 36px;
  gap: 4px; align-items: stretch;
}
.bzp-stepper {
  height: 38px;
  background: rgba(0,0,0,0.32); border: 1px solid var(--icm-border);
  border-radius: 7px; color: var(--icm-text);
  display: grid; place-items: center; cursor: pointer;
  transition: all .15s;
}
.bzp-stepper:hover { background: rgba(212,180,131,0.12); border-color: var(--icm-gold); color: var(--icm-gold); }
.bzp-stepper:active { transform: scale(0.96); }
.bzp-qty-input {
  height: 38px; text-align: center;
  background: rgba(0,0,0,0.45); border: 1px solid var(--icm-border);
  border-radius: 7px; color: var(--icm-text);
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px;
}
.bzp-qty-input:focus { outline: none; border-color: var(--icm-gold); }
.bzp-qty-input::-webkit-outer-spin-button,
.bzp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bzp-qty-input { -moz-appearance: textfield; }

/* Price input */
.bzp-price-row {
  position: relative;
  display: flex; align-items: center;
}
.bzp-price-input {
  flex: 1; height: 42px;
  padding: 0 38px 0 12px;
  background: rgba(0,0,0,0.45); border: 1px solid var(--icm-border);
  border-radius: 8px; color: var(--icm-text);
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px;
  transition: border-color .15s;
}
.bzp-price-input:focus { outline: none; border-color: var(--icm-gold); }
.bzp-price-input.invalid { border-color: var(--bzp-blood); color: #ff7b7b; }
.bzp-price-input::-webkit-outer-spin-button,
.bzp-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bzp-price-input { -moz-appearance: textfield; }
.bzp-price-icon {
  position: absolute; right: 12px;
  color: var(--icm-arcane); font-size: 18px;
  pointer-events: none;
}

/* Warning below price (shown when invalid) */
.bzp-warning {
  display: none;
  align-items: flex-start; gap: 7px;
  padding: 7px 10px; border-radius: 7px;
  background: rgba(255,71,87,0.08);
  border: 1px solid rgba(255,71,87,0.32);
  font-size: 11.5px; color: #ff8a93; line-height: 1.4;
}
.bzp-warning.show { display: flex; }
.bzp-warning i { font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.bzp-warning b { color: #ff7b7b; font-family: 'JetBrains Mono', monospace; }

/* Min-price hint (always visible, more subtle than warning) */
.bzp-minhint {
  font-size: 11px; color: var(--icm-text-dim);
  display: flex; align-items: center; gap: 5px;
}
.bzp-minhint b { color: var(--icm-gold); font-family: 'JetBrains Mono', monospace; }

/* Summary card */
.bzp-summary {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.22));
  border: 1px solid var(--icm-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.bzp-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px;
}
.bzp-summary-row > span:first-child {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--icm-text-soft);
}
.bzp-summary-row > span:last-child {
  font-family: 'JetBrains Mono', monospace; font-weight: 600;
  color: var(--icm-text);
}
.bzp-summary-row i { font-size: 13px; }
.bzp-summary-row.is-tax > span:last-child { color: #ff8a93; }
.bzp-summary-row.is-tax i { color: #ff8a93; }
.bzp-summary-divider {
  border-top: 1px dashed var(--icm-border);
  margin: 2px 0;
}
.bzp-summary-row.is-net {
  font-size: 14px;
}
.bzp-summary-row.is-net > span:first-child {
  color: var(--icm-gold);
  font-family: 'Cinzel', serif; font-weight: 600;
  letter-spacing: 0.8px;
}
.bzp-summary-row.is-net > span:last-child {
  color: var(--icm-gold); font-size: 15px; font-weight: 700;
}
.bzp-summary-row.is-net i { color: var(--icm-arcane); }

/* Tip */
.bzp-tip {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 12px; border-radius: 9px;
  background: rgba(95,207,255,0.06);
  border: 1px solid rgba(95,207,255,0.22);
  color: var(--icm-text-soft); font-size: 11.5px; line-height: 1.5;
}
.bzp-tip i { color: var(--icm-cyan); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.bzp-tip b { color: var(--icm-text); }

/* Footer 2-col on bazar */
.bzp-footer-row {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px;
}
@media (max-width: 380px) {
  .bzp-footer-row { grid-template-columns: 1fr; }
}

/* =====================================================================
   POTION BELT MODAL (.pbt-*) — Obsidian Codex + horizontal PC
   ===================================================================== */
.pbt-modal { width: min(94vw, 720px); }
.pbt-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 640px) {
  .pbt-grid { grid-template-columns: 1fr; }
  .pbt-modal { width: min(94vw, 460px); }
}

/* Sección de slots */
.pbt-section {
  display: flex; flex-direction: column; gap: 10px;
}
.pbt-section-head {
  font-family: 'Cinzel', serif; font-size: 11px;
  font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--icm-gold);
  display: flex; align-items: center; gap: 8px;
}
.pbt-section-head::after {
  content: ""; flex: 1; height: 1px; max-width: 70px;
  background: linear-gradient(90deg, var(--icm-gold), transparent);
}

/* Slots grid de pociones */
.pbt-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.pbt-slot {
  position: relative;
  padding: 14px 10px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.22));
  border: 1px solid var(--icm-border);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color .15s, background .15s;
}
.pbt-slot.is-filled {
  border-color: color-mix(in srgb, var(--icm-arcane) 50%, transparent);
  background: linear-gradient(180deg, rgba(157,108,240,0.10), rgba(0,0,0,0.22));
}
.pbt-slot.is-empty { border-style: dashed; }
.pbt-slot-num {
  position: absolute; top: 6px; left: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--icm-text-dim); font-weight: 700;
}
.pbt-slot-icon, .pbt-slot-empty-icon {
  font-size: 30px; color: var(--icm-arcane);
}
.pbt-slot.is-empty .pbt-slot-empty-icon { color: var(--icm-text-dim); }
.pbt-slot-name {
  font-size: 11.5px; color: var(--icm-text);
  text-align: center; line-height: 1.2;
  font-weight: 600;
}
.pbt-slot.is-empty .pbt-slot-name { color: var(--icm-text-dim); }
.pbt-slot-action {
  margin-top: auto; width: 100%;
  height: 30px; padding: 0 8px;
  border-radius: 7px; border: 1px solid var(--icm-border);
  background: rgba(0,0,0,0.32); color: var(--icm-text);
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: 1.2px; text-transform: uppercase;
  cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.pbt-slot-action.is-equip {
  background: var(--icm-gold-grad);
  border-color: transparent; color: #1a120a;
}
.pbt-slot-action.is-equip:hover { filter: brightness(1.1); }
.pbt-slot-action.is-unequip:hover {
  border-color: rgba(255,71,87,0.45);
  color: #ff8a93;
}

/* Locked card */
.pbt-locked {
  padding: 18px 14px;
  border: 1px dashed var(--icm-border);
  background: rgba(0,0,0,0.22);
  border-radius: 10px;
  text-align: center;
  color: var(--icm-text-soft);
  font-size: 12.5px;
  line-height: 1.5;
}
.pbt-locked i { display: block; font-size: 32px; color: var(--icm-text-dim); margin-bottom: 8px; }

/* Sección upgrade (col derecha PC) */
.pbt-upgrade {
  padding: 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(212,180,131,0.10), rgba(0,0,0,0.22));
  border: 1px solid color-mix(in srgb, var(--icm-gold) 35%, transparent);
  display: flex; flex-direction: column; gap: 10px;
}
.pbt-upgrade-head {
  font-family: 'Cinzel', serif; font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--icm-gold); font-weight: 700;
  display: flex; align-items: center; gap: 6px;
}
.pbt-upgrade-head i { font-size: 14px; }
.pbt-upgrade-target {
  font-size: 11.5px; color: var(--icm-text-soft); line-height: 1.45;
}
.pbt-upgrade-target b { color: var(--icm-text); font-weight: 600; }
.pbt-upgrade-costs { display: flex; flex-direction: column; gap: 5px; }
.pbt-cost {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--icm-border);
  border-radius: 7px;
  font-size: 12px;
  color: var(--icm-text);
}
.pbt-cost-label { display: inline-flex; align-items: center; gap: 6px; color: var(--icm-text-soft); }
.pbt-cost-label i { font-size: 14px; color: var(--icm-gold); }
.pbt-cost-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; }

/* Level pill */
.pbt-level {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: rgba(212,180,131,0.14);
  border: 1px solid color-mix(in srgb, var(--icm-gold) 40%, transparent);
  color: var(--icm-gold);
  border-radius: 999px;
  font-family: 'Cinzel', serif; font-size: 10.5px;
  letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 700;
}

/* =====================================================================
   ORNATE STYLE — itemModal del inventario (2026-05-30)
   Clip-path notched corners + double-frame + magic circle + pergamino btn.
   Solo aplica al itemModal del inventario (.icm-modal:not(.bzp-modal):not(.pbt-modal))
   ===================================================================== */
.icm-modal:not(.bzp-modal):not(.pbt-modal) {
  --icm-notch: 16px;
  border: none;
  border-radius: 0;
  overflow: visible;
  clip-path: polygon(
    var(--icm-notch) 0, calc(100% - var(--icm-notch)) 0,
    100% var(--icm-notch), 100% calc(100% - var(--icm-notch)),
    calc(100% - var(--icm-notch)) 100%, var(--icm-notch) 100%,
    0 calc(100% - var(--icm-notch)), 0 var(--icm-notch)
  );
  /* Triple inset = doble frame (gold-thin / dark-gap / rarity-glow) */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--icm-rarity) 50%, transparent),
    inset 0 0 0 4px rgba(0,0,0,0.55),
    inset 0 0 0 5px color-mix(in srgb, var(--icm-rarity) 22%, transparent),
    inset 0 0 0 6px color-mix(in srgb, var(--icm-rarity) 12%, transparent),
    0 0 30px -6px color-mix(in srgb, var(--icm-rarity) 35%, transparent);
}
.icm-modal:not(.bzp-modal):not(.pbt-modal)::before {
  display: none; /* el rarity halo se hace ahora con el box-shadow */
}

/* Close button: ajustado para no caer en la zona del notch */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-close {
  top: 18px; right: 18px;
}

/* Hero — sin border-bottom (lo daremos con shadow line abajo) */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-hero {
  border-bottom: 1px solid color-mix(in srgb, var(--icm-rarity) 22%, transparent);
  padding: 20px 24px 18px;
}

/* 2026-05-30: magic circle / spiral detrás del item removido — el user
   prefirió el item flotando libre sin la decoración circular. */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-hero-imgwrap::before,
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-hero-imgwrap::after {
  display: none;
}

/* STATS — cada cell con notched corners + double frame */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-stat {
  --st-notch: 9px;
  border: none;
  clip-path: polygon(
    var(--st-notch) 0, calc(100% - var(--st-notch)) 0,
    100% var(--st-notch), 100% calc(100% - var(--st-notch)),
    calc(100% - var(--st-notch)) 100%, var(--st-notch) 100%,
    0 calc(100% - var(--st-notch)), 0 var(--st-notch)
  );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--icm-rarity) 35%, transparent),
    inset 0 0 0 2px rgba(0,0,0,0.5),
    inset 0 0 0 3px color-mix(in srgb, var(--icm-rarity) 14%, transparent);
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.25));
  padding: 11px 14px 11px 16px;
  gap: 10px;
  border-radius: 0;
}
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-stat i {
  font-size: 18px;
  color: var(--icm-rarity);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--icm-rarity) 40%, transparent));
}
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--icm-text);
}

/* GOLD SPLIT — notched + frame doble dorado */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-goldsplit {
  border: none;
  clip-path: polygon(
    12px 0, calc(100% - 12px) 0,
    100% 12px, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 12px 100%,
    0 calc(100% - 12px), 0 12px
  );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--icm-gold) 45%, transparent),
    inset 0 0 0 3px rgba(0,0,0,0.5),
    inset 0 0 0 4px color-mix(in srgb, var(--icm-gold) 15%, transparent);
  padding: 12px 18px;
  border-radius: 0;
}

/* "SI LO EQUIPAS" — banner horizontal con notch */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-compare {
  border: none;
  clip-path: polygon(
    10px 0, calc(100% - 10px) 0,
    100% 10px, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 10px 100%,
    0 calc(100% - 10px), 0 10px
  );
  box-shadow:
    inset 0 0 0 1px rgba(95,207,255,0.32),
    inset 0 0 0 2px rgba(0,0,0,0.4);
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.42), rgba(0,0,0,0.28));
}

/* FOOTER — sin border-top hardline, usar shadow */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-footer {
  border-top: 1px solid color-mix(in srgb, var(--icm-rarity) 22%, transparent);
  background: rgba(0,0,0,0.30);
  padding: 16px 24px 20px;
}

/* PRIMARY BUTTON (Equipar) — forma pergamino con puntas a los lados */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-btn-primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--icm-rarity) 38%, transparent),
    color-mix(in srgb, var(--icm-rarity) 18%, transparent));
  color: #e8d4a0; /* soft gold cream */
  border: none;
  border-radius: 0;
  height: 48px;
  font-size: 13px;
  clip-path: polygon(
    18px 0, calc(100% - 18px) 0,
    100% 50%,
    calc(100% - 18px) 100%, 18px 100%,
    0 50%
  );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--icm-rarity) 75%, transparent),
    inset 0 0 0 3px rgba(0,0,0,0.5),
    inset 0 0 0 4px color-mix(in srgb, var(--icm-rarity) 28%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--icm-rarity) 30%, transparent);
  text-shadow: 0 0 12px rgba(212,180,131,0.55);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--icm-rarity) 25%, transparent));
}
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-btn-primary i {
  color: #e8d4a0;
}
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-btn-primary:hover:not(:disabled) {
  filter: brightness(1.15) drop-shadow(0 0 14px color-mix(in srgb, var(--icm-rarity) 50%, transparent));
  color: #f2dfaf;
}

/* SECONDARY BUTTONS (Bazar/Almacén) — rectángulo con esquinas cortadas + texto gold sutil */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-btn:not(.icm-btn-primary):not(.icm-btn-danger):not(.icm-btn-shop) {
  --btn-notch: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.28));
  border: none;
  border-radius: 0;
  height: 40px;
  color: #d8c590; /* soft gold cream */
  clip-path: polygon(
    var(--btn-notch) 0, calc(100% - var(--btn-notch)) 0,
    100% var(--btn-notch), 100% calc(100% - var(--btn-notch)),
    calc(100% - var(--btn-notch)) 100%, var(--btn-notch) 100%,
    0 calc(100% - var(--btn-notch)), 0 var(--btn-notch)
  );
  box-shadow:
    inset 0 0 0 1px rgba(212,180,131,0.32),
    inset 0 0 0 2px rgba(0,0,0,0.4),
    inset 0 0 0 3px rgba(212,180,131,0.12);
}
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-btn:not(.icm-btn-primary):not(.icm-btn-danger):not(.icm-btn-shop) i {
  color: #d8c590;
}
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-btn:not(.icm-btn-primary):not(.icm-btn-danger):not(.icm-btn-shop):hover:not(:disabled) {
  color: #efdca5;
}
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-btn:not(.icm-btn-primary):not(.icm-btn-danger):not(.icm-btn-shop):hover:not(:disabled) i {
  color: #efdca5;
}

/* DANGER BUTTON (Tirar) — mismo notched style pero rojo */
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-btn-danger {
  --btn-notch: 10px;
  background: linear-gradient(180deg, rgba(255,71,87,0.16), rgba(255,71,87,0.06));
  border: none;
  border-radius: 0;
  height: 42px;
  clip-path: polygon(
    var(--btn-notch) 0, calc(100% - var(--btn-notch)) 0,
    100% var(--btn-notch), 100% calc(100% - var(--btn-notch)),
    calc(100% - var(--btn-notch)) 100%, var(--btn-notch) 100%,
    0 calc(100% - var(--btn-notch)), 0 var(--btn-notch)
  );
  box-shadow:
    inset 0 0 0 1px rgba(255,71,87,0.5),
    inset 0 0 0 2px rgba(0,0,0,0.4),
    inset 0 0 0 3px rgba(255,71,87,0.15);
}
.icm-modal:not(.bzp-modal):not(.pbt-modal) .icm-row-drop {
  border-top: none;
  padding-top: 12px;
}