@keyframes lm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.lm-icon-spin { animation: lm-spin 1s linear infinite; display: inline-block; }

/* =========================================================
   Pozostałe style bloków LM (detale widoków)
   Baza + wspólne reguły znajdują się teraz w assets/css/blocks/root.css
   ========================================================= */

/* ====== HEROES ====== */
.LM_BLOCK_PRIMARY_HEROES {
    grid-column: 2 !important;
    grid-row: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: .2rem var(--lm-gutter) !important;
    font-family: var(--lm-font) !important;
}

.LM_BLOCK_PRIMARY_HEROES .LM_HERO_TILE {
    position: relative !important;
    width: 3.2rem !important;
    height: 3.2rem !important;
    margin: .18rem !important;
    flex: 0 0 auto !important;
}

.LM_BLOCK_PRIMARY_HEROES .LM_HERO_TILE {
    position: relative !important;
}

/* ramka pełny obszar */
.LM_BLOCK_PRIMARY_HEROES .LM_HERO_TILE_FRAME {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2 !important;
    object-fit: contain !important;
}

/* bohater 86% WYŚRODKOWANY absolutem */
.LM_BLOCK_PRIMARY_HEROES .LM_HERO_TILE_IMG {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 86% !important;
    height: 86% !important;
    object-fit: contain !important;
    cursor: pointer !important;
    z-index: 1 !important;
}

/* Elementy sterowane globalnie */
.toggle-img,
.toggle-frame {
  transition: filter .15s linear;
}

/* IMG: domyślnie szaro, po zaznaczeniu kolor */
.toggle-img { filter: grayscale(1); }
.toggle-img.is-selected { filter: grayscale(0); }

/* FRAME: domyślnie pół-szaro (.5), po zaznaczeniu kolor */
.toggle-frame { filter: grayscale(.7); }
.toggle-frame.is-selected-frame { filter: grayscale(0); }

/* Preferencje dostępności */
@media (prefers-reduced-motion: reduce) {
  .toggle-img, .toggle-frame { transition: none; }
}





/* ====== CHOOSE IMAGE – ikona w kolumnie 1 (secondary / tertiary) ====== */
.LM_BLOCK_SECONDARY_ITEM_CHOOSE_IMAGE_COL01_ICON,
.LM_BLOCK_TERTIARY_ITEM_CHOOSE_IMAGE_COL01_ICON {
    display: grid !important;
    place-items: center !important;
    width: var(--lm-col-icon) !important;
    height: var(--lm-col-icon) !important;
    line-height: 0 !important;
    font-size: .8rem !important;
}






















/* =========================================================
   Kolory grade + font + obwódka tekstu
   (wkleić na koniec istniejącego CSS)
   ========================================================= */
/* Wszystkie napisy w drugim modalu (kuźni) – font + obwódka */
.Forge_Content,
.Forge_Content * {
    font-family: var(--lm-font);
    /* Safari/iOS (primary) */
    /* -webkit-text-stroke: var(--text-outline-w) #000; */
    -webkit-text-fill-color: currentColor;
    /* Fallback (pozostałe przeglądarki) */
    text-shadow:
        0 0.025px 0 #000, 0 -0.025px 0 #000,
        0.025px 0 0 #000, -0.025px 0 0 #000,
        0.025px 0.025px 0 #000, -0.025px 0.025px 0 #000,
        0.025px -0.025px 0 #000, -0.025px -0.025px 0 #000;
}

/* Nazwa itemu – domyślnie kolor Common */
/*  */

/* Przełączanie koloru nazwy po grade (sterowane data-grade na .Forge_Content) */
.Forge_Content[data-grade="Common"] .Item_Name {
    color: var(--grade-color-default);
}

.Forge_Content[data-grade="Uncommon"] .Item_Name {
    color: var(--grade-color-uncommon);
}

.Forge_Content[data-grade="Rare"] .Item_Name {
    color: var(--grade-color-rare);
}

.Forge_Content[data-grade="Epic"] .Item_Name {
    color: var(--grade-color-epic);
}

.Forge_Content[data-grade="Legendary"] .Item_Name {
    color: var(--grade-color-legendary);
}

.Forge_Content[data-grade="Mythic"] .Item_Name {
    color: var(--grade-color-mythic);
}



.HEROES_LIST,
.FAMILIARS_LIST {
    /* border: 1px dashed #CCC; */
    position: relative;
    margin-right: 50px;
}

.HEROES_LIST>div,
.FAMILIARS_LIST>div {
    display: flex;
    background: transparent;
    position: absolute;
    height: 60px;
    width: 60px;
    font-size: 0.7em;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.HEROES_LIST>div>div,
.FAMILIARS_LIST>div>div {
    display: flex;
    position: absolute;
    height: 50px;
    width: 50px;
    align-items: end;
    align-content: center;
    justify-content: center;
    justify-items: center;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;

}

/* tylko dla podpisów pod familiarsami */
.FAMILIARS_LIST > div > div > span{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif !important;
  font-weight: 700;
  font-size: 0.55rem;
  color: #000;                           /* czarny tekst */
  -webkit-text-stroke: 0.4px rgba(0, 0, 0, 0.95);  /* bardzo cienki biały obrys (Safari/Chromium) */
  text-shadow:
    0 0 0.6px rgba(255,255,255,.95),     /* subtelne białe halo */
    0 0 1.2px rgba(255,255,255,.65);     /* leciutkie wzmocnienie */
  margin: 0;
}

/* Fallback dla przeglądarek bez -webkit-text-stroke (np. Firefox) */
@supports not (-webkit-text-stroke: 1px black){
  .FAMILIARS_LIST > div > div > span{
    text-shadow:
      0 0 0.6px rgba(255,255,255,.95),
      0 0 1.2px rgba(255,255,255,.65),
      .25px .25px 0 rgba(255,255,255,.85),
      -.25px .25px 0 rgba(255,255,255,.85),
      .25px -.25px 0 rgba(255,255,255,.85),
      -.25px -.25px 0 rgba(255,255,255,.85);
  }
}


.FAMILIARS_LIST > div > div > span{
  background: rgba(255, 255, 255, 0.75);   /* kolor + przezroczystość */
  padding: 0 .38em;              /* marginesy w poziomie */
  border-radius: .35em;          /* lekko zaokrąglone */
  display: inline-block;         /* żeby tło trzymało się tekstu */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* ładnie zawija na 2 linie */
}




.HEROES_LIST>.ss-placeholder-child,
.FAMILIARS_LIST>.ss-placeholder-child {
    background: transparent;
    border: 0.5px dotted rgba(0, 17, 255, 0.788);
}


/* ukrycie niezależne od cudzych !important */
.lm-hidden {
    display: none !important;
}

/* Stała animacja (zostaje na elemencie na stałe) */
.lm-fade {
    transition: filter .15s linear, opacity .15s linear;
    will-change: filter, opacity;
}

/* Stan wygaszony (włącz/wyłącz – to będzie animowane dzięki .lm-fade) */
.lm-dim {
    filter: grayscale(100%);
    opacity: .55 !important;
}


.LM_BLOCK_TRAPS {
    grid-template-columns: repeat(2, var(--lm-col-icon)) repeat(3, calc(var(--lm-col-icon) / 1.2)) calc(var(--lm-col-icon) / 1.6) 1fr var(--lm-col-end) !important;
    grid-template-rows: repeat(4, var(--lm-col-icon)) !important;
    column-gap: calc(var(--lm-col-icon) / 10) !important;
    padding-left: 0 !important;
}





/* ====================================================================== */
/* PANEL Z TABELĄ – akordeon + „TV”                                      */
/* ====================================================================== */
.gf_mission_info_primary_div {
    display: grid;
    grid-template-columns: repeat(3, 1fr) repeat(5, var(--gf-league-w));
    column-gap: 0;
    row-gap: 0;

    box-sizing: border-box;
    padding: var(--lm-padY) var(--lm-padX) !important;
    margin: .2rem var(--lm-gutter) !important;

    /* animowane marginesy (by odstęp zmieniał się natychmiast) */
    margin-top: .6rem !important;
    margin-bottom: .8rem !important;

    font-family: var(--lm-font) !important;
    border-radius: var(--lm-rad) !important;
    background: var(--lm-primary-bg-enabled);
    border: .05rem solid var(--lm-primary-border-enabled);
    border-left-width: .45rem;
    box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .35), 0 0 0 .09375rem rgba(0, 0, 0, .35);

    /* stan zamknięty */
    max-height: 0;
    /* animowane w keyframes */
    opacity: 0;
    transform: translateY(-.5rem);
    overflow: hidden;

    will-change: max-height, opacity, transform;
    contain: layout paint;

    /* nie animujemy tu max-height – robią to keyframes TV */
    transition: opacity .25s ease, transform .5s cubic-bezier(.16, 1, .3, 1);

    z-index: 1;
}

.gf_mission_info_primary_div.--show {
    max-height: var(--gf-open-max);
    opacity: 1;
    transform: translateY(0);
}

/* Komórki tabeli */
.cell {
    background-color: var(--gf-cell-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
}

.header {
    font-weight: 800;
    min-height: var(--gf-header-h);
}

.body {
    font-weight: 500;
    text-align: center;
}

/* kolumny 1..3 */
.points {
    border-left: var(--gf-bw) solid var(--gf-border);
}

.amount,
.time {
    border-left: var(--gf-bw) dotted var(--gf-border);
}

.body.points,
.body.amount,
.body.time {
    border-bottom: var(--gf-bw) solid var(--gf-border);
}

.header.points,
.header.amount,
.header.time {
    border-top: var(--gf-bw) solid var(--gf-border);
    border-bottom: var(--gf-bw) solid var(--gf-border);
}

/* kolumny lig */
.league {
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    border-left: var(--gf-bw) solid var(--gf-border);
}

.header.league {
    border-top: var(--gf-bw) solid var(--gf-border);
    border-bottom: var(--gf-bw) solid var(--gf-border);
}

.body.league {
    border-bottom: var(--gf-bw) solid var(--gf-border);
}

.league.master {
    border-right: var(--gf-bw) solid var(--gf-border);
}

.league.noimage {
    border-right: var(--gf-bw) solid var(--gf-border);
}

/* ikony nagłówków lig */
.header.league.beginner {
    background-image: url('../assets/images/guildFest/league/01.webp');
}

.header.league.intermediate {
    background-image: url('../assets/images/guildFest/league/02.webp');
}

.header.league.advanced {
    background-image: url('../assets/images/guildFest/league/03.webp');
}

.header.league.expert {
    background-image: url('../assets/images/guildFest/league/04.webp');
}

.header.league.master {
    background-image: url('../assets/images/guildFest/league/05.webp');
}

/* „check” w wierszach */
.body.league.active {
    background-image: url('../assets/images/guildFest/league/00.webp');
}

/* zaokrąglenie dolnego prawego rogu */
.body.league.master.last {
    border-bottom-right-radius: var(--lm-rad);
}

.league.noimage.last {
    border-right: var(--gf-bw) solid var(--gf-border);
}

.gf_mission_info_primary_div .cell.header.league,
.gf_mission_info_primary_div .cell.body.league {
  box-sizing: border-box;
  padding: var(--lm-league-icon-pad, 2%); /* 5% z każdej strony ≈ 90% pola */
  background-origin: content-box;         /* liczenie od content-box (bez paddingu) */
  background-clip: content-box;           /* nie maluj pod paddingiem */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;               /* zachowaj proporcje */
  display: flex;                          /* jeśli jeszcze nie masz */
  align-items: center;
  justify-content: center;
}
.gf_mission_info_primary_div .cell.header.league {
  box-sizing: border-box;
  padding: var(--lm-league-icon-pad, 5%); /* 5% z każdej strony ≈ 90% pola */
  background-origin: content-box;         /* liczenie od content-box (bez paddingu) */
  background-clip: content-box;           /* nie maluj pod paddingiem */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;               /* zachowaj proporcje */
  display: flex;                          /* jeśli jeszcze nie masz */
  align-items: center;
  justify-content: center;
}


/* rog i klipowanie na krawędzi */
.gf_mission_info_primary_div .header.points          { border-top-left-radius: var(--lm-rad); }
.gf_mission_info_primary_div .header.league.master   { border-top-right-radius: var(--lm-rad); }
.gf_mission_info_primary_div .body.points.last       { border-bottom-left-radius: var(--lm-rad); }
/* RB już masz, ale dla spójności zostawiamy: */
.gf_mission_info_primary_div .body.league.master.last{ border-bottom-right-radius: var(--lm-rad); }

.gf_mission_info_primary_div .header.points,
.gf_mission_info_primary_div .header.league.master,
.gf_mission_info_primary_div .body.points.last,
.gf_mission_info_primary_div .body.league.master.last {
  overflow: hidden;
  background-clip: padding-box;
}







/* ====================================================================== */
/* KLASY ANIMACJI                                                         */
/* ====================================================================== */
.animate__animated {
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* TV ON – rośnie max-height i marginesy */
@-webkit-keyframes tvOn {
    0% {
        max-height: 0;
        opacity: 0;
        /* margin-top: 0; */
        /* margin-bottom: 0; */
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform: translateY(-.5rem) scaleY(0) scaleX(.6);
    }

    35% {
        max-height: calc(var(--gf-open-max) * .15);
        opacity: .5;
        /* margin-top: .2rem; */
        /* łagodny start marginesów */
        /* margin-bottom: .25rem; */
        -webkit-transform: translateY(0) scaleY(.02) scaleX(.4);
    }

    65% {
        max-height: calc(var(--gf-open-max) * .75);
        opacity: .75;
        /* margin-top: .45rem; */
        /* margin-bottom: .65rem; */
        -webkit-transform: scaleY(1.08) scaleX(1.02);
    }

    100% {
        max-height: var(--gf-open-max);
        opacity: 1;
        /* margin-top: .6rem; */
        /* twoje docelowe wartości */
        /* margin-bottom: .8rem; */
        -webkit-transform: scaleY(1) scaleX(1);
    }
}

@keyframes tvOn {
    0% {
        max-height: 0;
        opacity: 0;
        /* margin-top: 0; */
        /* margin-bottom: 0; */
        transform-origin: 50% 0%;
        transform: translateY(-.5rem) scaleY(0) scaleX(.6);
    }

    35% {
        max-height: calc(var(--gf-open-max) * .15);
        opacity: .5;
        /* margin-top: .2rem; */
        /* margin-bottom: .25rem; */
        transform: translateY(0) scaleY(.02) scaleX(.4);
    }

    65% {
        max-height: calc(var(--gf-open-max) * .75);
        opacity: .75;
        /* margin-top: .45rem; */
        /* margin-bottom: .65rem; */
        transform: scaleY(1.08) scaleX(1.02);
    }

    100% {
        max-height: var(--gf-open-max);
        opacity: 1;
        /* margin-top: .6rem; */
        /* margin-bottom: .8rem; */
        transform: scaleY(1) scaleX(1);
    }
}



.animate__tvOn {
    -webkit-animation-name: tvOn;
    animation-name: tvOn;
}

/* TV OFF – maleje max-height i marginesy równocześnie */
@-webkit-keyframes tvOff {
    0% {
        max-height: var(--gf-open-max);
        opacity: 1;
        /* margin-top: .6rem;
        margin-bottom: .8rem; */
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translateY(0) scaleY(1) scaleX(1);
    }

    40% {
        max-height: 0;
        /* margin-top: 0;
        margin-bottom: 0; */
        -webkit-transform: translateY(-.5rem) scaleY(.02) scaleX(.4);
    }

    100% {
        max-height: 0;
        opacity: 0;
        /* margin-top: 0;
        margin-bottom: 0; */
        -webkit-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
        -webkit-transform: translateY(-.9rem) scaleY(0) scaleX(.2);
    }
}

@keyframes tvOff {
    0% {
        max-height: var(--gf-open-max);
        opacity: 1;
        /* margin-top: .6rem;
        margin-bottom: .8rem; */
        transform-origin: 50% 50%;
        transform: translateY(0) scaleY(1) scaleX(1);
    }

    40% {
        max-height: 0;
        /* margin-top: 0;
        margin-bottom: 0; */
        transform: translateY(-.5rem) scaleY(.02) scaleX(.4);
    }

    100% {
        max-height: 0;
        opacity: 0;
        /* margin-top: 0;
        margin-bottom: 0; */
        transform-origin: 50% 0%;
        transform: translateY(-.9rem) scaleY(0) scaleX(.2);
    }
}

.animate__tvOff {
    -webkit-animation-name: tvOff;
    animation-name: tvOff;
}


/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .animate__animated {
        -webkit-animation: none !important;
        animation: none !important;
    }
}


.gf_mission_info_primary_div {
    display: none;
}

.gf_mission_info_primary_div.--show {
    display: grid;
}

.no-grid-rows {
    grid-auto-rows: 1fr !important;
}



/* bazowa legenda */
.ee-range-legend {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    /* max-width:880px; */
    margin: 0;
    /* w kaflu nie chcemy dodatkowych marginesów */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ee-range-legend *,
.ee-bar-container *,
.ee-bar * {
    border: none !important;
    outline: none !important;
}

.ee-top {
    position: relative;
    width: 100%;
}

.ee-top__ticks {
    display: none;
}

/* było 22px → wyżej, czytelniej */
.ee-top__tick {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    text-align: center;
    font-size: .8rem;
    line-height: 1.1;
    color: #ffffff;
    padding-bottom: 10px;
}

.ee-top__tick::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 8px;
    background: #94a3b8;
    opacity: .9;
}

.ee-top__tick.--start {
    text-align: left;
    transform: none;
    padding-left: 0;
    padding-right: 6px;
}

.ee-top__tick.--start::after {
    left: 0;
    transform: none;
}

.ee-top__tick.--end {
    text-align: right;
    transform: translateX(-100%);
    padding-right: 0;
    padding-left: 6px;
}

.ee-top__tick.--end::after {
    left: auto;
    right: 0;
    transform: none;
}

/* pasek zakresów (kolumny ustawiasz inline w PHP przez --ee-left/mid/right) */
.ee-bar {
    display: grid;
    grid-template-columns: var(--ee-left) var(--ee-mid) var(--ee-right);
    width: 100%;
    height: 12px;
    border-radius: 999px;
    overflow: visible;
    margin: 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ee-seg {
    height: 100%;
    overflow: visible;
}

.ee-seg--left {
    background: #ef4444;
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

.ee-seg--mid {
    background: #16a34a;
    position: relative;
    color: #16a34a;
    /* currentColor dla nawiasów SVG */
}

.ee-seg--right {
    background: #ef4444;
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

/* nawiasy otaczające zielony zakres */
.ee-parens {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 40px;
    /* większe, żeby nie wchodziły w bar */
    pointer-events: none;
}

/* podpisy pod paskiem */
.ee-labels {
    display: grid;
    grid-template-columns: var(--ee-left) var(--ee-mid) var(--ee-right);
    width: 100%;
    margin-top: .15rem;
}

.ee-label {
    font-size: .65rem;
    text-align: center;
    line-height: 1.15;
}

.ee-label--red {
    color: #000000;
}

.ee-label--green {
    color: #000000;
    font-weight: 600;
}



/* 2) więcej miejsca na ticki + dwupoziomowe etykiety */
.ee-top__tick {
    font-size: .65rem;
    line-height: 1.1;
}

.ee-top__tick.--up {
    top: -4px;
}

/* górny rząd */
.ee-top__tick.--down {
    top: 18px;
}

/* dolny rząd */
/* pasek półprzezroczysty */
.ee-seg {
    opacity: .75;
}

/* ticki: dwa warianty wyrównania przy tym samym X */
.ee-top__ticks {
    height: 14px;
}

/* więcej miejsca na opisy nad barem */
.ee-top__tick.--left {
    transform: translateX(-100%);
    text-align: right;
    padding-right: 4px;
    padding-bottom: 10px;
}

.ee-top__tick.--left::after {
    right: 0;
    left: auto;
    transform: none;
}

.ee-top__tick.--right {
    transform: translateX(0%);
    text-align: left;
    padding-left: 4px;
    padding-bottom: 10px;
}

.ee-top__tick.--right::after {
    left: 0;
    right: auto;
    transform: none;
}

/* Tylko min/max zielone, wszystkie na tym samym poziomie */
.ee-top__tick.ee-tick-min,
.ee-top__tick.ee-tick-max {
    color: #16a34a !important;
}

/* Min/max NIE mają kreseczek - tylko niebieskie suwaki */
.ee-top__tick.ee-tick-min::after,
.ee-top__tick.ee-tick-max::after {
    display: none;
}

/* Ukryj czerwone wartości 79 i 141 */
.ee-top__tick.ee-tick-lcut,
.ee-top__tick.ee-tick-rcut {
    display: none;
}

/* Kontener dla paska i suwaków */
.ee-bar-container {
    position: relative;
    width: 100%;
    height: 12px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ee-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: baseline;
    line-height: 1;
}

/* --start i --end zostają jak masz (na krawędziach) */

.LM_RG_IMG {
    cursor: pointer !important;
    display: inline-block !important;
    inline-size: var(--lm-col-icon, 3rem) !important;
    block-size: var(--lm-col-icon, 3rem) !important;
    --g: 0 !important;
    --s: 1 !important;
    --b: 1 !important;
    --o: 1 !important;

    filter: grayscale(var(--g)) saturate(var(--s)) brightness(var(--b)) !important;
    opacity: var(--o) !important;

    transition: filter .25s ease, opacity .25s ease !important;
    will-change: filter, opacity !important;
    user-select: none !important;
}

.LM_RG_IMG.is-off {
    --g: 1 !important;
    --s: .6 !important;
    --b: .95 !important;
    --o: .65 !important;
}

.LM_RG_IMG.is-on {
    --g: 0 !important;
    --s: 1 !important;
    --b: 1 !important;
    --o: 1 !important;
}

.LM_RG_IMG:focus-visible {
    outline: .14rem solid var(--lm-primary-border, #6cf) !important;
    outline-offset: .12rem !important;
    border-radius: .35rem !important;
}



/* ===== MONSTERS — full CSS (mirror HEROES, stany is-on/is-off + auto-sync) ===== */

/* Kontener + tokeny rozmiaru i przygaszenia */
.LM_BLOCK_PRIMARY_MONSTERS {
  /* gdzie w siatce + typowy wygląd listy */
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: .2rem var(--lm-gutter) !important;
  font-family: var(--lm-font) !important;

  /* lokalne tokeny (zmieniaj bez ruszania reszty) */
  --mon-tile: 3.2rem;
  --mon-gap:  .18rem;

  /* dimming */
  --mon-dim-gray:    1;      /* 0..1  — skala szarości */
  --mon-dim-sat:     .25;    /* 0..n  — nasycenie OFF */
  --mon-dim-bright:  .85;    /* 0..n  — jasność OFF */
  --mon-dim-opacity: .80;    /* 0..1  — przezroczystość OFF */
  --mon-dim-scale:   .99;    /* skala OFF (oba elementy) */
  --mon-dim-dur:     180ms;  /* czas przejść */
}

/* Pojedynczy kafel */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE {
  position: relative !important;
  width: var(--mon-tile) !important;
  height: var(--mon-tile) !important;
  margin: var(--mon-gap) !important;
  flex: 0 0 auto !important;
}

/* Ramka — pełny obszar */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 2 !important;
  object-fit: contain !important;
  transform-origin: center center !important;
}

/* Obraz — 86% i wyśrodkowany absolutem */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 86% !important;
  height: 86% !important;
  object-fit: contain !important;
  cursor: pointer !important;
  z-index: 1 !important;
  transform-origin: center center !important;
}

/* Płynne przejścia dla obu warstw */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG,
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME {
  transition:
    filter    var(--mon-dim-dur) ease,
    opacity   var(--mon-dim-dur) ease,
    transform var(--mon-dim-dur) ease !important;
  will-change: filter, opacity, transform;
}

/* === Fallback: ręczne stany na elementach (działa wszędzie) === */
/* OFF: przygaszone + delikatna skala (oba elementy) */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG.is-off {
  filter: grayscale(var(--mon-dim-gray))
          saturate(var(--mon-dim-sat))
          brightness(var(--mon-dim-bright)) !important;
  opacity: var(--mon-dim-opacity) !important;
  transform: translate(-50%, -50%) scale(var(--mon-dim-scale)) !important; /* centrowanie zostaje */
}
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME.is-off {
  filter: grayscale(var(--mon-dim-gray))
          saturate(var(--mon-dim-sat))
          brightness(var(--mon-dim-bright)) !important;
  opacity: var(--mon-dim-opacity) !important;
  transform: scale(var(--mon-dim-scale)) !important; /* bez translate na ramce */
}

/* ON: pełny kolor, brak skali */
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG.is-on {
  filter: none !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}
.LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME.is-on {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Preferencje dostępności (wyłącza animacje) */
@media (prefers-reduced-motion: reduce) {
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG,
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME {
    transition: none !important;
  }
}

/* ===== Auto-sync IMG ⇄ FRAME — jeśli przeglądarka wspiera :has() ===== */
@supports selector(.x:has(.y)) {

  /* Domyślnie ON (zmienne na kaflu) */
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE {
    --mon__filter: none;
    --mon__opacity: 1;
    --mon__scale-img: 1;
    --mon__scale-frame: 1;
  }

  /* Jeśli JAKAKOLWIEK warstwa ma .is-off → obie OFF */
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE:has(.LM_MONSTER_TILE_IMG.is-off),
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE:has(.LM_MONSTER_TILE_FRAME.is-off) {
    --mon__filter: grayscale(var(--mon-dim-gray))
                   saturate(var(--mon-dim-sat))
                   brightness(var(--mon-dim-bright));
    --mon__opacity: var(--mon-dim-opacity);
    --mon__scale-img: var(--mon-dim-scale);
    --mon__scale-frame: var(--mon-dim-scale);
  }

  /* (opcjonalnie) Gdy któraś warstwa ma .is-on — wymuś ON */
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE:has(.LM_MONSTER_TILE_IMG.is-on),
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE:has(.LM_MONSTER_TILE_FRAME.is-on) {
    --mon__filter: none;
    --mon__opacity: 1;
    --mon__scale-img: 1;
    --mon__scale-frame: 1;
  }

  /* Zastosuj zmienne do warstw (nadpisuje fallback dzięki kolejności) */
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_IMG {
    filter: var(--mon__filter) !important;
    opacity: var(--mon__opacity) !important;
    transform: translate(-50%, -50%) scale(var(--mon__scale-img)) !important;
  }
  .LM_BLOCK_PRIMARY_MONSTERS .LM_MONSTER_TILE_FRAME {
    filter: var(--mon__filter) !important;
    opacity: var(--mon__opacity) !important;
    transform: scale(var(--mon__scale-frame)) !important;
  }
}















.FAMILIAR_DETAILS_PANEL {
    margin-top: .6rem;
    padding: .6rem .8rem;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: .8rem;
    background: rgba(0,0,0,.20);
    backdrop-filter: blur(3px);
}

.FAMILIAR_DETAILS_HDR {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.FAMILIAR_DETAILS_CLOSE {
    cursor: pointer;
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    opacity: .8;
}
.FAMILIAR_DETAILS_CLOSE:hover { opacity: 1; }

.FAMILIAR_DETAILS_BODY {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: center;
}
.FAMILIAR_DETAILS_IMG {
    width: 64px; height: 64px; object-fit: contain; image-rendering: auto;
}
.FAMILIAR_DETAILS_TXT div { margin: .1rem 0; }

.FAMILIARS_LIST div[data-familiar-id].is-selected {
    outline: 2px solid rgba(255,255,255,.25);
    outline-offset: 2px;
    border-radius: .5rem;
}






/* Wnętrze modala z chowańcem */
.fam-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}

.fam-portrait {
  width: 144px;
  height: 144px;
  position: relative;
  border-radius: 16px;
  background: center/contain no-repeat var(--fam-frame, none);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}

.fam-portrait-img {
  position: absolute;
  inset: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 12px;
}

.fam-meta > div { margin: 4px 0; }

.lm-fam-overlay {
  position: fixed;
  inset: 0;
  background: var(--lm-eq-overlay-bg);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

code.bank-cmd-usage { 
    color: rgb(238, 241, 51) !important;
    -webkit-text-fill-color:  rgb(238, 241, 51) !important;
    -webkit-text-stroke: .1px rgb(238, 241, 51) !important;    
} /* tekst komendy nadal żółty */
code.bank-cmd-usage .bracket,
code.bank-cmd-usage .cmd-prefix {
    color: rgb(2, 255, 107) !important;
    -webkit-text-fill-color:  rgb(2, 255, 107) !important;
    -webkit-text-stroke: .1px rgb(2, 255, 107) !important;
}

/* ── 22_BLOCK_BANK – clear buttons ── */
.LM_BLOCK_BANK_CLEAR_BTN { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.LM_BLOCK_BANK_CLEAR_BTN__BTN {
    padding: 5px 14px; border: none; border-radius: 6px; cursor: pointer;
    font-size: .85rem; font-weight: 600; transition: opacity .2s;
}
.LM_BLOCK_BANK_CLEAR_BTN__BTN:hover { opacity: .85; }
.LM_BLOCK_BANK_CLEAR_BTN__BTN--danger  { background: #c0392b; color: #fff; }
.LM_BLOCK_BANK_CLEAR_BTN__BTN--warning { background: #e67e22; color: #fff; }

/* ── 22_BLOCK_BANK – admins panel ── */
.LM_BLOCK_BANK_ADMINS_PANEL { margin-top: 8px; }
.LM_BLOCK_BANK_ADMINS_ADD { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.LM_BLOCK_BANK_ADMINS_ADD__INPUT_WRAP { position: relative; flex: 1 1 200px; }
.LM_BLOCK_BANK_ADMINS_ADD__INPUT {
    width: 100%; padding: 10px 14px; border-radius: 6px;
    border: .0425rem solid var(--lm-white-75); background: var(--lm-white-25); color: var(--lm-ink); font-size: .9rem;
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
@supports (-webkit-touch-callout: none) {
    .LM_BLOCK_BANK_ADMINS_ADD__INPUT { font-size: 16px; }
}
.LM_BLOCK_BANK_ADMINS_ADD__INPUT:focus-visible {
    box-shadow: var(--lm-focus-ring);
}
.LM_BLOCK_BANK_ADMINS_ADD__SUGGESTIONS {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
    background: #252540; border: 1px solid #555; border-radius: 0 0 6px 6px;
    max-height: 200px; overflow-y: auto; display: none;
}
.LM_BLOCK_BANK_ADMINS_ADD__SUGGESTIONS.open { display: block; }
.bank-admin-suggestion {
    padding: 6px 10px; cursor: pointer; font-size: .82rem; color: #ddd;
}
.bank-admin-suggestion:hover { background: #333360; }
.bank-rss-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; flex-shrink: 0; }
.bank-users-list { display: flex; flex-direction: column; gap: 6px; }
.bank-users-header { display: none; }
.bank-user-row {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--lm-primary-bg); border: .05rem solid var(--lm-primary-border); border-radius: 8px;
    padding: 8px 12px; cursor: pointer; user-select: none;
    transition: background .12s, border-color .12s;
}
.bank-user-row:hover { filter: brightness(1.15); }
.bank-user-row.is-expanded { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.bank-user-identity { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.bank-user-identity__top { display: flex; align-items: baseline; gap: 6px; }
.bank-user-identity__rss { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bank-user-rss { display: flex; align-items: center; gap: 3px; white-space: nowrap; font-size: .8rem; flex: 0 0 110px; background: rgba(17,14,179,0.35); border: .05rem solid var(--lm-primary-border); border-radius: 5px; padding: 2px 6px; }
.bank-user-rss img { width: 16px; height: 16px; flex-shrink: 0; }
.bank-user-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-shrink: 0; margin-left: 12px; }
.bank-admin-detail-row { background: var(--lm-primary-bg); border: .05rem solid var(--lm-primary-border); border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 0; }
.bank-admin-name { color: #000; font-weight: 400; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-admin-igg  { color: #fff; font-size: .72rem; white-space: nowrap; }
.bank-admin-toggle-btn {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    background: rgba(30,80,200,0.35); border: .05rem solid rgba(20,50,150,0.7); color: #7ab4ff;
    border-radius: 6px; cursor: pointer;
    transition: filter .15s;
}
.bank-admin-toggle-btn svg { width: 18px; height: 18px; }
.bank-admin-toggle-btn.is-admin { background: rgba(20,120,50,0.35); border-color: rgba(10,80,30,0.7); color: #5dcc7a; }
.bank-admin-toggle-btn:hover { filter: brightness(1.3); }
.bank-delete-client-btn {
    width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
    background: rgba(180,30,30,0.35); border: .05rem solid rgba(120,15,15,0.7); color: #e74c3c;
    border-radius: 6px; cursor: pointer;
    transition: filter .15s;
}
.bank-delete-client-btn svg { width: 18px; height: 18px; }
.bank-delete-client-btn:hover { filter: brightness(1.3); }
.LM_BLOCK_BANK_ADMINS_ADD__BTN {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: #27ae60; color: #fff; border: none;
    border-radius: 6px; cursor: pointer; font-size: 1rem;
    transition: opacity .2s; flex-shrink: 0;
}
.LM_BLOCK_BANK_ADMINS_ADD__BTN:hover { opacity: .85; }

/* ── 22_BLOCK_BANK – data panels (accounts / incoming / outgoing / logs) ── */
.LM_BLOCK_BANK_DATA_PANEL { margin-top: 8px; }
.LM_BLOCK_BANK_DATA_PANEL__TABLE_WRAP { overflow-x: auto; }
.LM_BLOCK_BANK_DATA_PANEL__TABLE {
    width: 100%; border-collapse: collapse; font-size: .82rem; color: #ddd;
}
.LM_BLOCK_BANK_DATA_PANEL__TABLE th {
    background: #1a1a2e; color: #8ab4f8; padding: 6px 10px;
    text-align: left; border-bottom: 1px solid #333; white-space: nowrap;
}
.LM_BLOCK_BANK_DATA_PANEL__TABLE td {
    padding: 5px 10px; border-bottom: 1px solid #252540; vertical-align: middle;
}
.LM_BLOCK_BANK_DATA_PANEL__TABLE tr:hover td { background: #1e1e38; }

.bank-account-row { cursor: pointer; user-select: none; }
.bank-account-row:hover td { background: #1e1e40 !important; }
.bank-account-row.is-expanded td { background: #1a1a3a; }
.bank-account-detail-row td { padding: 0 !important; background: #12122a; }
.bank-client-detail { display: flex; flex-direction: column; gap: 0; }
.bank-client-detail__section { border-bottom: .05rem solid var(--lm-primary-border); }
.bank-client-detail__section:last-child { border-bottom: none; }
.bank-client-detail__title {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 400; color: #000;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 6px 14px; background: rgba(17,14,179,0.35); border-bottom: .05rem solid var(--lm-primary-border);
    cursor: pointer; user-select: none;
}
.bank-client-detail__title .bank-detail-chevron { margin-left: auto; transition: transform .2s ease; font-size: .7rem; opacity: .7; }
.bank-client-detail__section.is-collapsed .bank-detail-chevron { transform: rotate(-90deg); }
.bank-client-detail__section.is-collapsed .bank-client-detail__table-wrap { display: none; }
.bank-client-detail__table { width: 100%; border-collapse: collapse; font-size: .81rem; }
.bank-client-detail__table th { background: rgba(17,14,179,0.18); color: #aaa; font-weight: 600; padding: 4px 14px; text-align: center; font-size: .72rem; border-bottom: .05rem solid var(--lm-primary-border); }
.bank-client-detail__table th.bank-th-time { text-align: center; width: 1%; white-space: nowrap; }
.bank-client-detail__table .bank-td-time  { text-align: left; }
.bank-client-detail__table td { padding: 5px 14px; color: #bbb; border-bottom: .05rem solid var(--lm-primary-border); text-align: center; }
.bank-client-detail__table tbody tr:last-child td { border-bottom: none; }
.bank-client-detail__table tbody tr:hover td { background: rgba(17,14,179,0.18); }
.bank-td-name    { font-weight: 600; color: #eee; white-space: nowrap; }
.bank-td-rss     { text-align: right; white-space: nowrap; }
.bank-td-rss--food,  .bank-client-detail__table .bank-td-rss--food  { color: #d4b800; }
.bank-td-rss--stone, .bank-client-detail__table .bank-td-rss--stone { color: #909090; }
.bank-td-rss--wood,  .bank-client-detail__table .bank-td-rss--wood  { color: #8b5e3c; }
.bank-td-rss--ore,   .bank-client-detail__table .bank-td-rss--ore   { color: #b5541a; }
.bank-td-rss--gold,  .bank-client-detail__table .bank-td-rss--gold  { color: #d4a017; }
.bank-td-time    { color: #7a8a9a; white-space: nowrap; font-size: .79rem; }
.bank-td-resource{ color: #80cbc4; }
.bank-td-num     { text-align: center; white-space: nowrap; }
.bank-td-final   { text-align: center; color: #a5d6a7; white-space: nowrap; }
.bank-table-empty { padding: 16px 10px; color: #666; font-style: italic; }

.LM_BLOCK_BANK_DATA_PANEL__LOG_WRAP { }
#BLOCK_22_BANK_LOGS_LIST { display: flex; flex-direction: column; gap: 6px; }
.bank-log-line {
    display: flex; align-items: center; gap: 4px; padding: 8px 12px; font-size: .8rem;
    background: var(--lm-primary-bg); border: .05rem solid var(--lm-primary-border); border-radius: 8px;
    transition: filter .12s;
}
.bank-log-line:hover { filter: brightness(1.15); }
.bank-log-time { color: #000; white-space: nowrap; flex-shrink: 0; font-size: .72rem; }
.bank-log-name { color: #ddd; font-weight: 400; white-space: nowrap; flex-shrink: 0; }
.bank-log-rank-img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.bank-log-rank-badge { background: rgba(17,14,179,0.35); border: .05rem solid var(--lm-primary-border); border-radius: 4px; padding: 1px 6px; font-size: .7rem; color: #aac; white-space: nowrap; flex-shrink: 0; }
.bank-log-icon { font-size: .7rem; color: #7a8a9a; flex-shrink: 0; }
.bank-log-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; background: rgba(17,14,179,0.35); border: .05rem solid var(--lm-primary-border); color: #aac; font-size: .65rem; flex-shrink: 0; }
.bank-log-icon-badge--up   { background: rgba(20,120,50,0.35);  border-color: rgba(10,80,30,0.7);  color: #5dcc7a; }
.bank-log-icon-badge--down { background: rgba(180,30,30,0.35);  border-color: rgba(120,15,15,0.7); color: #e74c3c; }
.bank-log-name--old { color: #bbb; text-decoration: line-through; text-decoration-color: #000; }
.bank-log-name--new { color: #bbb; }
.bank-log-name--system { color: #0a1a6e; font-style: normal; white-space: nowrap; flex-shrink: 0; font-weight: 600; text-transform: uppercase; }
.bank-log-subtype { font-size: .65rem; font-weight: 600; color: #0a1a6e; opacity: .6; white-space: nowrap; flex-shrink: 0; }
.bank-log-sep  { color: #aaa; flex-shrink: 0; }
.bank-log-name--user { color: #0a1a6e; font-weight: 600; }
.bank-log-cmd  { color: #f0c040; font-family: monospace; word-break: break-all; }
.bank-log-raw  { color: #ccc; word-break: break-all; }
.bank-log-empty { padding: 16px 8px; color: #666; font-style: italic; }


/* ====== BUILDING TARGET ====== */
.LM_BLOCK_BUILDING_TARGET_ROW.LM_BLOCK.LM_BLOCK--item {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.3rem !important;
    padding: 0.2rem 0.5rem !important;
}

.LM_BLOCK_BUILDING_TARGET_ROW_ID {
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3.3rem !important;
    height: 3.3rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #000 !important;
}

.LM_BLOCK_BUILDING_TARGET_OPTION {
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.LM_BLOCK_BUILDING_TARGET_OPTION input[type="radio"] {
    display: none !important;
}

.LM_BLOCK_BUILDING_TARGET_IMG {
    display: block !important;
    width: 3.3rem !important;
    height: 3.3rem !important;
    object-fit: contain !important;
    filter: grayscale(100%) !important;
    opacity: 0.75 !important;
    transition: filter 0.15s ease, opacity 0.15s ease !important;
}

/* Wybrany = kolor + pełna opacity + saturacja + cień */
.LM_BLOCK_BUILDING_TARGET_OPTION:has(input:checked) .LM_BLOCK_BUILDING_TARGET_IMG {
    filter: grayscale(0%) saturate(1.4) drop-shadow(0 2px 4px rgba(0,0,0,0.4)) !important;
    opacity: 1 !important;
}

/* Hover = kolor + pełna opacity + saturacja (tylko dla urządzeń z myszką) */
@media (hover: hover) {
    .LM_BLOCK_BUILDING_TARGET_OPTION:hover .LM_BLOCK_BUILDING_TARGET_IMG {
        filter: grayscale(0%) saturate(1.4) !important;
        opacity: 1 !important;
    }
}

/* ====== CASTLE CARDS RESPONSIVE ====== */
/* Kontener grid - bazowy gap */
#castle-blocks-grid {
    gap: 16px;
}

/* Bazowe style dla wszystkich kart (desktop) */
#castle-blocks-grid > .toggle-card {
    flex: 0 1 180px;
    max-width: 180px;
    min-width: 0;
}

/* Bardzo małe ekrany do 400px - 2 karty, mniejszy gap */
@media (max-width: 400px) {
    #castle-blocks-grid > .toggle-card {
        flex: 0 1 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }
    #castle-blocks-grid {
        gap: 12px !important;
    }
}

/* Małe ekrany 401-576px - 2 karty na wiersz */
@media (min-width: 401px) and (max-width: 576px) {
    #castle-blocks-grid > .toggle-card {
        flex: 0 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

/* Średnie telefony i małe tablety 577-767px - 2-3 karty */
@media (min-width: 577px) and (max-width: 767px) {
    #castle-blocks-grid > .toggle-card {
        flex: 0 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

/* Tablety 768-991px - 3 karty na wiersz */
@media (min-width: 768px) and (max-width: 991px) {
    #castle-blocks-grid > .toggle-card {
        flex: 0 1 calc(33.333% - 11px) !important;
        max-width: calc(33.333% - 11px) !important;
    }
}

/* ====== WELCOME ACCOUNTS GRID RESPONSIVE ====== */
/* Kontener welcome grid - bazowy gap */
#welcome-accounts-grid {
    gap: 16px;
}

/* Bazowe style dla welcome account cards (desktop) */
#welcome-accounts-grid > .welcome-account-card {
    flex: 0 1 180px;
    max-width: 180px;
    min-width: 0;
}

/* Bardzo małe ekrany do 400px - 2 karty, mniejszy gap */
@media (max-width: 400px) {
    #welcome-accounts-grid > .welcome-account-card {
        flex: 0 1 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }
    #welcome-accounts-grid {
        gap: 12px !important;
    }
}

/* Małe ekrany 401-576px - 2 karty na wiersz */
@media (min-width: 401px) and (max-width: 576px) {
    #welcome-accounts-grid > .welcome-account-card {
        flex: 0 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

/* Średnie telefony i małe tablety 577-767px - 2-3 karty */
@media (min-width: 577px) and (max-width: 767px) {
    #welcome-accounts-grid > .welcome-account-card {
        flex: 0 1 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

/* Tablety 768-991px - 3 karty na wiersz */
@media (min-width: 768px) and (max-width: 991px) {
    #welcome-accounts-grid > .welcome-account-card {
        flex: 0 1 calc(33.333% - 11px) !important;
        max-width: calc(33.333% - 11px) !important;
    }
}

/* ============================================
   Stats Dates List - Date Links (Block 24)
   ============================================ */

.stats-dates-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0;
}

.stats-date-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.4) 0%, rgba(30, 41, 59, 0.2) 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    color: #e2e8f0;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 14px;
}

.stats-date-link:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
    transform: translateX(2px);
}

.stats-date-link.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(59, 130, 246, 0.15) 100%);
    border-color: #3b82f6;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

.stats-date-link.active:hover {
    transform: none;
}

.stats-date-text {
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-right: auto;
}

.stats-date-badge {
    font-size: 12px;
    padding: 3px 8px;
    margin-right: 5px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 4px;
    color: #cbd5e1;
    font-weight: 500;
}

.stats-date-link.active .stats-date-badge {
    background: rgba(59, 130, 246, 0.3);
    color: #dbeafe;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
    .stats-date-link {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .stats-date-badge {
        font-size: 11px;
        padding: 2px 6px;
    }
}

/* ============================================
   Stats Accordion Items
   ============================================ */

.stats-date-item {
    margin-bottom: 8px;
}

.stats-date-content {
    margin-top: 8px;
    padding: 12px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 6px;
    overflow-x: auto;
    scroll-margin-top: 140px;
}

.stats-accordion-table {
    width: 100%;
    margin: 0;
    background: transparent;
}

.stats-accordion-table th {
    background: rgba(30, 41, 59, 0.5);
    color: #e2e8f0;
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.3);
    cursor: pointer;
    user-select: none;
}

.stats-accordion-table th:hover {
    background: rgba(30, 41, 59, 0.7);
    color: #93c5fd;
}

.stats-accordion-table td {
    padding: 8px 12px;
    color: #cbd5e1;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.stats-accordion-table tr:hover td {
    background: rgba(59, 130, 246, 0.05);
}

/* Stats Date Trash Icon */
.stats-date-trash {
    margin-left: 12px;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    padding: 8px 8px;
    border-radius: 4px;
}

@media (hover: hover) {
    .stats-date-trash:hover {
        opacity: 1;
        background: rgba(239, 68, 68, 0.2);
        transform: scale(1.1);
    }
}

/* Stats Date Excel Icon */
.stats-date-excel {
    margin-left: 12px;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    padding: 8px 8px;
    border-radius: 4px;
}

@media (hover: hover) {
    .stats-date-excel:hover {
        opacity: 1;
        background: rgba(34, 197, 94, 0.2);
        transform: scale(1.1);
    }
}

/* Stats Date PDF Icon */
.stats-date-pdf {
    margin-left: 12px;
    font-size: 16px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    padding: 8px 8px;
    border-radius: 4px;
}

@media (hover: hover) {
    .stats-date-pdf:hover {
        opacity: 1;
        background: rgba(239, 68, 68, 0.2);
        transform: scale(1.1);
    }
}

/* Wiersz Total - wyróżnienie */
.stats-total-row {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.2)) !important;
    font-weight: 700;
    border-top: 3px solid #f59e0b;
    border-bottom: 3px solid #f59e0b;
    box-shadow: 0 2px 6px rgba(251, 191, 36, 0.2);
}

.stats-total-row td {
    font-weight: 700;
    color: #92400e;
    text-shadow: 0 0 1px rgba(251, 191, 36, 0.3);
}

/* ========== STATS CARD TOGGLE (DESKTOP) ========== */
@media (min-width: 769px) {
    .stats-card-toggle.stats-card-closed {
        flex: 1 !important;
        min-width: auto !important;
    }
}

/* ========== Desktop styles for sorting ========== */
@media (min-width: 769px) {
    .stats-sort-panel span {
        font-size: 10px !important;
    }

    .stats-sort-btn {
        font-size: 10px !important;
    }
}

/* ========== RESPONSIVE: Mobile styles for GIFT_STATS grid ========== */
@media (max-width: 768px) {
    /* Panel sortowania */
    .stats-sort-panel {
        padding: 8px !important;
        gap: 6px !important;
    }

    .stats-sort-panel span {
        font-size: 10px !important;
        margin-right: 5px !important;
    }

    .stats-sort-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }

    /* Karty GIFT_STATS */
    .stats-gift-card {
        padding: 5px !important;
        margin-bottom: 10px !important;
    }

    /* Główny layout karty - zmiana z row na column */
    .stats-gift-card > div:first-child {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Lewa kolumna (nazwa, IGG, procent) */
    .stats-gift-card > div:first-child > div:first-child {
        min-width: auto !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .stats-gift-card .stats-card-name {
        font-size: 14px !important;
    }

    .stats-gift-card .stats-card-percent,
    .stats-gift-card .stats-card-total {
        font-size: 14px !important;
    }

    .stats-gift-card .stats-card-id {
        font-size: 11px !important;
    }

    .stats-gift-card .stats-card-dates {
        font-size: 10px !important;
    }

    /* Prawa kolumna (POLOWANIE i ZAKUPY) - stack */
    .stats-gift-card > div:first-child > div:nth-child(2) {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Sekcje POLOWANIE/ZAKUPY - scroll horyzontalny */
    .stats-gift-card > div:first-child > div:nth-child(2) > div {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Tabele w kartach */
    .stats-gift-card table {
        font-size: 10px !important;
        min-width: 100% !important;
        white-space: nowrap !important;
    }

    .stats-gift-card table td {
        padding: 2px 4px !important;
    }

    /* Nagłówki POLOWANIE/ZAKUPY */
    .stats-gift-card > div:first-child > div:nth-child(2) > div > div:first-child {
        font-size: 11px !important;
        padding: 3px !important;
        margin-bottom: 5px !important;
    }
}

/* Extra small screens (max-width: 480px) */
@media (max-width: 480px) {
    .stats-gift-card {
        padding: 5px !important;
    }

    .stats-gift-card .stats-card-name {
        font-size: 14px !important;
    }

    .stats-gift-card .stats-card-percent,
    .stats-gift-card .stats-card-total {
        font-size: 14px !important;
    }

    .stats-gift-card .stats-card-id {
        font-size: 11px !important;
    }

    .stats-gift-card .stats-card-dates {
        font-size: 10px !important;
    }

    .stats-gift-card table {
        font-size: 10px !important;
    }

    .stats-sort-btn {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }
}

/* ── Block 25 LOGS ── */
.log-entry {
    border: .05rem solid var(--lm-primary-border);
    border-radius: 8px;
    padding: 7px 12px;
    margin-bottom: 6px;
}
.log-entry:last-child { margin-bottom: 0; }
.log-entry__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.80rem;
    color: #111;
    margin-bottom: 3px;
}
.log-entry__content { color: #111; font-size: 0.80rem; }

#BLOCK_25_LOGS_COUNT { color: #111 !important; }
.flatpickr-day.has-logs {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--bs-primary, #0d6efd);
    text-underline-offset: 2px;
    text-decoration-thickness: 2px;
}

/* równa wysokość wszystkich pól filtru */
#BLOCK_25_LOGS_FILTERS .flatpickr-input,
#BLOCK_25_LOGS_FILTERS .form-select,
#BLOCK_25_LOGS_FILTERS .form-control {
    height: 31px !important;
    min-height: 31px !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: .875rem !important;
    line-height: 1.5 !important;
}

#BLOCK_25_LOGS_BTN_SEARCH {
    width: 31px !important;
    height: 31px !important;
    padding: 0 !important;
    flex-shrink: 0;
}

#BLOCK_25_LOGS_PAGINATION_TOP,
#BLOCK_25_LOGS_PAGINATION {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
    justify-content: center !important;
}
#BLOCK_25_LOGS_PAGINATION_TOP .page-item .page-link,
#BLOCK_25_LOGS_PAGINATION .page-item .page-link {
    min-width: 36px;
    width: 36px;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    background: var(--lm-primary-bg);
    border-color: var(--lm-primary-border);
    color: #111;
}
#BLOCK_25_LOGS_PAGINATION_TOP .page-item .page-link:hover,
#BLOCK_25_LOGS_PAGINATION .page-item .page-link:hover {
    filter: brightness(1.2);
    color: #111;
}
#BLOCK_25_LOGS_PAGINATION_TOP .page-item.active .page-link,
#BLOCK_25_LOGS_PAGINATION .page-item.active .page-link {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}
#BLOCK_25_LOGS_PAGINATION_TOP .page-item.disabled .page-link,
#BLOCK_25_LOGS_PAGINATION .page-item.disabled .page-link {
    background: var(--lm-primary-bg);
    border-color: var(--lm-primary-border);
    color: #888;
    opacity: 0.5;
}