/* Албумите — светъл, спокоен вид, същият като останалия сайт.
   Всичко тук е с представка .alb-, за да не се удари в темата. */

.alb-body { background: #f7f8fb; }
.alb-main { padding-top: 118px; padding-bottom: 60px; }

.alb-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
/* Екранът на матрицата е ШИРОК — цялата страница, като в генерирам. */
.alb-wrap--wide { max-width: none; padding: 0 24px; }

.alb-head { margin-bottom: 28px; }
.alb-head h1 { margin: 0 0 10px; font-size: 34px; line-height: 1.08; font-weight: 800; color: #111827; }
.alb-head p { margin: 0; font-size: 17px; line-height: 1.7; color: #4b5563; max-width: 720px; }

/* ── Решетката с темите ──────────────────────────────────────────────────── */
/* Картите са ХОРИЗОНТАЛНИ, както в генерирам: кориците са широки и носят
   заглавието нарисувано вътре в себе си. Изрежеш ли ги на портрет, режеш и
   надписа — точно това се случваше. */
/* Каталогът: ЧЕТИРИ карти на ред, както изглежда в генерирам. Мрежата е с
   фиксиран брой колони, не „колкото се съберат" — иначе на широк монитор
   картите ставаха огромни, а на средния екран падаха по две. */
.alb-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Каталогът е по-широк от останалите страници: четири карти с размера от
   генерирам искат място. Останалите страници (албум, поръчка) не се пипат. */
.alb-wrap.is-catalog { max-width: 1560px; }
@media (max-width: 1200px) { .alb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .alb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px)  { .alb-grid { grid-template-columns: 1fr; } }
/* Картата = САМО корицата, 16:9, с надписа и цената върху нея (както в
   генерирам). Тъмната ивица долу е само толкова, колкото текстът да се чете. */
.alb-card {
  position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden;
  display: block; text-decoration: none; color: inherit; background: #0a0e16;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
  transition: transform .18s ease, box-shadow .18s ease;
}
.alb-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, .16); color: inherit; }
.alb-card-media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.alb-card:hover .alb-card-media { transform: scale(1.04); }
/* Надписът и цената се ПОЯВЯВАТ при посочване — както в генерирам: корицата
   остава чиста, а щом мишката влезе, тъмната ивица и текстът изплуват нагоре. */
.alb-card-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .34s ease;
  background: linear-gradient(180deg, rgba(6, 10, 18, 0) 0%, rgba(6, 10, 18, .78) 100%);
}
.alb-card-name {
  position: absolute; left: 18px; right: 130px; bottom: 16px; z-index: 5;
  font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, .96);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(7px);
  transition: opacity .3s ease, transform .34s cubic-bezier(.2, .8, .2, 1);
}
.alb-card-tag {
  position: absolute; right: 16px; bottom: 14px; z-index: 6;
  font-size: 12.5px; font-weight: 800; color: #fff; white-space: nowrap;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px; padding: 6px 13px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(6px);
  transition: .32s cubic-bezier(.2, .8, .2, 1);
}
.alb-card:hover .alb-card-scrim,
.alb-card:focus-visible .alb-card-scrim { opacity: 1; }
.alb-card:hover .alb-card-name,
.alb-card:hover .alb-card-tag,
.alb-card:focus-visible .alb-card-name,
.alb-card:focus-visible .alb-card-tag { opacity: 1; transform: none; }
/* Телефон и таблет: няма мишка, затова надписите стоят винаги. */
@media (hover: none) {
  .alb-card-scrim { opacity: 1; }
  .alb-card-name, .alb-card-tag { opacity: 1; transform: none; }
}

/* ── Горният ред над картата ─────────────────────────────────────────────── */
.alb-topbar { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.alb-topbtn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; background: #fff; border: 1px solid #e2e6ee; color: #111827;
  font-size: 13.5px; font-weight: 700; text-decoration: none; transition: .15s ease;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}
.alb-topbtn:hover { background: #f3f5f9; color: #111827; }

/* ── Екранът за поръчка ───────────────────────────────────────────────────
   Подредбата е ЕДНО КЪМ ЕДНО с генерирам: тесен панел с полетата вляво,
   мострата вдясно. Разликата е само темата — там е тъмна, тук светла. */
.alb-shell {
  position: relative;   /* слоят с линията стъпва върху цялата карта */
  display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 0;
  min-height: calc(100vh - 220px);
  background: #fff; border: 1px solid #eceff5; border-radius: 22px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}
@media (max-width: 1199px) { .alb-shell { grid-template-columns: 1fr; } }

.alb-panel { padding: 22px; border-right: 1px solid #eceff5; }
@media (max-width: 991px) { .alb-panel { border-right: 0; border-bottom: 1px solid #eceff5; } }
.alb-panel h2 { font-size: 26px; font-weight: 850; margin: 0 0 14px; color: #111827; letter-spacing: -.02em; }

/* Поле: дребен главен надпис отгоре, както в генерирам. */
.alb-f { margin-bottom: 17px; }
.alb-f-label {
  font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #6b7280; margin-bottom: 8px;
}
.alb-f-hint { font-size: 12px; line-height: 1.6; color: #9ca3af; margin: -2px 0 8px; }
.alb-f-input, .alb-f input[type="text"], .alb-f input[type="file"], .alb-f select {
  width: 100%; border: 1px solid #d1d5db; border-radius: 12px; padding: 11px 13px;
  font-size: 14.5px; color: #111827; background: #fff; outline: none; transition: .18s ease;
  font-family: inherit;
}
.alb-f input:focus, .alb-f select:focus {
  border-color: #60bbe6; box-shadow: 0 0 0 3px rgba(96, 187, 230, .18);
}

/* Качването: пунктирана зона; след избор — миниатюра с ✕ за махане.
   Входът НЕ е display:none — иначе браузърът не може да покаже „попълни
   полето" при празно задължително качване. */
.alb-up { position: relative; border: 1.5px dashed #cfd6e1; border-radius: 14px;
  background: #f9fafb; padding: 24px 14px; text-align: center; color: #6b7280;
  font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.alb-up:hover { border-color: #60bbe6; background: #f2fafd; }
.alb-up-input { position: absolute; opacity: 0; width: 1px; height: 1px;
  pointer-events: none; bottom: 0; left: 50%; }
.alb-up-thumb { display: none; width: 100%; border-radius: 12px; }
.alb-up.has-img { padding: 0; border: 1px solid #eceff5; background: #fff; }
.alb-up.has-img .alb-up-thumb { display: block; }
.alb-up.has-img .alb-up-text { display: none; }
.alb-up-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
  border-radius: 50%; border: 0; background: rgba(17, 24, 39, .78); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer; display: none;
  align-items: center; justify-content: center; z-index: 2; }
.alb-up.has-img .alb-up-x { display: inline-flex; }

/* Брой страници — компактни бутони в редица, не карти. */
.alb-pages { display: flex; flex-wrap: wrap; gap: 8px; }
.alb-page {
  min-width: 46px; font-size: 15px; font-weight: 800; padding: 9px 14px; border-radius: 12px;
  cursor: pointer; font-family: inherit; background: #f3f5f9; border: 1px solid #e2e6ee;
  color: #111827; transition: background .15s, border-color .15s;
}
.alb-page:hover { background: #e9edf5; }
.alb-page.is-on { background: #e6f5fc; border-color: #60bbe6; color: #0b4a63; }
.alb-pages-hint { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: #8b93a1; }

/* Редът с цената и широкият бутон — както отсреща. */
.alb-price {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 14px; background: #f3f5f9; margin: 20px 0 13px;
}
.alb-price-l, .alb-price-v { font-size: 17px; font-weight: 850; color: #111827; }
/* Професионалист (фотограф): клиентската цена стои задраскана до неговата. */
.alb-price-old { color: #9ca3af; font-weight: 700; font-size: 14.5px; margin-right: 4px; }
.alb-card-tag s { opacity: .72; font-weight: 700; margin-right: 3px; }
.alb-gen {
  width: 100%; height: 50px; border: 0; border-radius: 14px; cursor: pointer; font-family: inherit;
  font-size: 16.5px; font-weight: 850; color: #fff; background: #60bbe6;
  box-shadow: 0 10px 26px -12px rgba(96, 187, 230, .9); transition: background .2s, transform .12s;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.alb-gen:hover { background: #4eaedb; color: #fff; }
.alb-gen:active { transform: translateY(1px); }

/* ── Мострената зона (както в генерирам, но светла) ───────────────────────
   Средна колона: референтната снимка и описанието. Дясна: голямата мостра с
   линия от лицето в снимката до лицето в сцената. */
.alb-mid { padding: 22px 0 22px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.alb-right { padding: 22px; min-width: 0; position: relative; background: #fbfcfe; }

.alb-ref { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid #eceff5; background: #fff; }
.alb-ref img { width: 100%; display: block; }
.alb-ref-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(255, 255, 255, .92); border: 1px solid #e2e6ee; color: #111827;
  font-size: 11.5px; font-weight: 800; padding: 6px 10px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

.alb-desc { border: 1px solid #eceff5; border-radius: 18px; background: #fff; padding: 16px 18px; }
.alb-desc-row { margin-bottom: 14px; }
.alb-desc-row:last-child { margin-bottom: 0; }
.alb-desc-l {
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #60bbe6; margin-bottom: 6px;
}
.alb-desc-v { font-size: 14px; line-height: 1.65; color: #374151; }
.alb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.alb-chip {
  font-size: 12.5px; font-weight: 600; color: #374151; background: #f3f5f9;
  border: 1px solid #e2e6ee; border-radius: 999px; padding: 6px 11px;
}

.alb-right { display: flex; flex-direction: column; }
.alb-stage { position: relative; flex: 1; display: flex;
  align-items: flex-start; justify-content: flex-end; padding-bottom: 56px; }

/* Рамката на мострата. При ДВОЙНА корица (един файл = две страници) се вижда
   само дясната половина — лявата е гърбът. Точките на лицето от вратата са
   смятани именно за дясната половина; покажем ли целия файл, кръгът увисва
   в средата. Ширината при двойна я нагласява скриптът. */
.alb-frame { position: relative; display: block; overflow: hidden;
  border-radius: 14px; border: 1px solid #eceff5; background: #fff; }
.alb-frame img { display: block; width: auto; max-width: none;
  max-height: calc(100vh - 300px); }

/* Пил „Албум · N стр." долу вляво и пейджърът долу вдясно — върху сцената. */
.alb-pill { position: absolute; left: 0; bottom: 8px; z-index: 4;
  background: #fff; border: 1px solid #e2e6ee; border-radius: 999px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 800; color: #374151;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .07); }
.alb-pager { position: absolute; right: 0; bottom: 4px; z-index: 4;
  display: flex; align-items: center; gap: 10px; }
.alb-pager-btn { width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #e2e6ee; background: #fff; color: #111827; font-size: 17px;
  line-height: 1; cursor: pointer; transition: background .15s; }
.alb-pager-btn:hover { background: #f3f5f9; }
.alb-pager-count { font-size: 13px; font-weight: 800; color: #374151; }

/* Линията между двете лица. Рисува се върху цялата зона, затова не бива да
   лови мишката. */
.alb-line { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

@media (max-width: 1199px) {
  .alb-mid { padding: 0 22px; }
  .alb-line { display: none; }   /* при преподреждане линията губи смисъл */
}

/* ── Готовият албум ──────────────────────────────────────────────────────── */
.alb-progress { height: 10px; border-radius: 999px; background: #e5e7eb; overflow: hidden; margin: 14px 0 8px; }
.alb-progress i { display: block; height: 100%; background: #60bbe6; transition: width .4s ease; }

.alb-thumbs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-top: 22px; }
.alb-thumb { border-radius: 14px; overflow: hidden; border: 1px solid #e5e7eb; background: #fff; aspect-ratio: 3 / 4; }
.alb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alb-thumb.is-waiting { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 13px; background: #f9fafb; }

.alb-state { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
             font-size: 13px; font-weight: 800; }
.alb-state.is-wait { background: #fef3c7; color: #92400e; }
.alb-state.is-run  { background: #dbeafe; color: #1d4ed8; }
.alb-state.is-done { background: #dcfce7; color: #166534; }
.alb-state.is-fail { background: #fee2e2; color: #991b1b; }


/* ── Бутоните в менюто ─────────────────────────────────────────────────────
   Взети едно към едно от останалите страници: там живеят в <style> на
   самия шаблон, а не в темата, затова тук трябва да се повторят. */
.navmenu .nav-auth-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 14px !important;
    border-radius: 12px;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1;
    margin-left: 6px;
}

.navmenu .nav-auth-dark {
    background: #111827;
    color: #ffffff !important;
    border: 1px solid #111827;
}

.navmenu .nav-auth-dark:hover,
.navmenu .nav-auth-dark.active {
    background: #000000;
    color: #ffffff !important;
    border-color: #000000;
}

.navmenu .nav-auth-red {
    background: #60bbe6;
    color: #ffffff !important;
    border: 1px solid #60bbe6;
}

.navmenu .nav-auth-red:hover,
.navmenu .nav-auth-red.active {
    background: #4eaedb;
    color: #ffffff !important;
    border-color: #4eaedb;
}

.navmenu .nav-auth-light {
    background: rgba(255, 255, 255, 0.72);
    color: #111827 !important;
    border: 1px solid rgba(209, 213, 219, 0.95);
}

.navmenu .nav-auth-light:hover,
.navmenu .nav-auth-light.active {
    background: #f9fafb;
    color: #111827 !important;
}

body.mobile-nav-active #navmenu a,
    body.mobile-nav-active #navmenu .nav-auth-btn,
    body.mobile-nav-active #navmenu .nav-auth-dark,
    body.mobile-nav-active #navmenu .nav-auth-red,
    body.mobile-nav-active #navmenu .nav-auth-light {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 18px 22px !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #111827 !important;
        text-align: left !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        box-shadow: none !important;
    }

body.mobile-nav-active #navmenu li + li > a,
    body.mobile-nav-active #navmenu li + li > .nav-auth-btn,
    body.mobile-nav-active #navmenu li + li > .nav-auth-dark,
    body.mobile-nav-active #navmenu li + li > .nav-auth-red,
    body.mobile-nav-active #navmenu li + li > .nav-auth-light {
        border-top: 1px solid rgba(17, 24, 39, 0.16) !important;
    }

body.mobile-nav-active #navmenu .nav-auth-dark,
    body.mobile-nav-active #navmenu .nav-auth-light {
        color: #111827 !important;
    }

body.mobile-nav-active #navmenu .nav-auth-red {
    color: #60bbe6 !important;
}


/* ══ МОСТРАТА — копие на .mxs от генерирам, в светлата тема ══════════════════
   Структурата, скриптът и анимациите са същите; сменени са само цветовете. */
.mxs{ position:relative; display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
      gap:18px; padding:20px; align-content:start; align-items:start; }
.mxs-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.mxs-card{ position:relative; border-radius:20px; background:#fff; overflow:hidden;
           border:1px solid #eceff5; box-shadow:0 10px 30px rgba(15,23,42,.05); }
.mxs-src img{ display:block; width:100%; height:auto; }
.mxs-badge{ position:absolute; left:10px; top:10px; z-index:2;
            max-width:calc(100% - 20px);
            background:rgba(255,255,255,.92); color:#111827;
            font-size:11.5px; font-weight:700; letter-spacing:.02em;
            padding:4px 9px; border-radius:999px;
            border:1px solid #e2e6ee; box-shadow:0 4px 14px rgba(15,23,42,.08); }
.mxs-text{ padding:17px 19px 19px; display:flex; flex-direction:column; gap:6px; }
.mxs-lbl{ font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
          color:#60bbe6; margin-top:13px; }
.mxs-lbl:first-child{ margin-top:0; }
.mxs-val{ margin:0; font-size:13px; line-height:1.78; color:#374151;
          text-wrap:pretty; overflow-wrap:break-word; }
.mxs-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:2px; }
.mxs-chip{ font-size:12px; line-height:1.45; color:#374151;
           background:#f3f5f9; border-radius:9px; padding:5px 10px;
           border:1px solid #e2e6ee; }
.mxs-media{ display:flex; align-items:center; justify-content:center; min-height:0; }
.mxs-media img, .mxs-media video{ display:block; width:100%; height:auto; }
.mxs-empty{ padding:40px 20px; text-align:center; font-size:13.5px; color:#9ca3af; }
.mxs-media.is-album{ flex-direction:column; align-items:stretch; }
/* Корицата е ЛИСТ — вижда се само дясната половина (лявата е гърбът). */
.mxs-cover{ position:relative; overflow:hidden; }
.mxs-cover img{ display:block; width:100%; height:auto; }
.mxs-cover.is-half img{ width:200%; margin-left:-100%; }
.mxs-book{ position:relative; display:flex; align-items:center; justify-content:center;
           padding:14px 12px 6px; }
.mxs-bookhost{ position:relative; }
.mxs-bookhost:empty{ display:none; }
.mxs-book.is-live [data-mx-sample-fallback]{ display:none; }
.mxs-bookhost .stf__parent{ margin:0 auto;
  filter:drop-shadow(0 18px 28px rgba(15,23,42,.28)) drop-shadow(0 4px 10px rgba(15,23,42,.18)); }
.mx-bpage{ background:#fffefb; overflow:hidden; }
.mx-bpage-in{ position:relative; width:100%; height:100%; }
.mx-bpage-in img{ display:block; width:100%; height:100%; object-fit:cover; }
/* Половин лист: показва лявата или дясната половина на широката снимка. */
.mx-bpage-in.is-half-l img, .mx-bpage-in.is-half-r img{ width:200%; max-width:none; }
.mx-bpage-in.is-half-r img{ margin-left:-100%; }
.mxs-album{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
            gap:10px; padding:4px 14px 13px; }
.mxs-badge-c{ position:static; justify-self:start; }
.mxs-pager{ justify-self:center; display:flex; align-items:center; gap:8px; }
.mxs-pager[hidden]{ display:none; }
.mx-book-nav{ width:34px; height:34px; border-radius:50%; border:1px solid #e2e6ee;
              background:#fff; color:#111827; font-size:17px; line-height:1; cursor:pointer;
              transition:background .15s; }
.mx-book-nav:hover{ background:#f3f5f9; }
.mx-book-nav:disabled{ opacity:.35; cursor:default; }
.mx-book-count{ font-size:13px; font-weight:800; color:#374151; }
/* Двете точки са невидими котви за краищата на линията. */
.mxs-dot, .mxs-target{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
/* Линията: над картите, не лови мишката. Същите анимации като в генерирам. */
.mxs-link{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
           z-index:5; overflow:visible; }
.mxs-link path{ fill:none; stroke:#64ceff; stroke-width:3.4; stroke-linecap:round;
                filter:drop-shadow(0 0 6px rgba(100,206,255,.55)); }
.mxs-link .mxs-head{ fill:#64ceff; filter:drop-shadow(0 0 6px rgba(100,206,255,.75)); }
.mxs-link circle{ fill:none; stroke:#64ceff; stroke-width:3;
                  transform-box:fill-box; transform-origin:center;
                  filter:drop-shadow(0 0 6px rgba(100,206,255,.5)); }
@keyframes mxsDraw{ from{ stroke-dashoffset:var(--len); } to{ stroke-dashoffset:0; } }
@keyframes mxsIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
@keyframes mxsPulse{ 0%,100%{ opacity:.85; } 50%{ opacity:.35; } }
.mxs-link.is-on path{ animation:mxsDraw 1.1s cubic-bezier(.3,.8,.3,1) .25s both; }
.mxs-link.is-on .mxs-head{ animation:mxsIn .45s cubic-bezier(.2,.9,.3,1.4) 1.2s both,
                           mxsPulse 2.2s ease-in-out 1.65s 3; }
/* Кръгчето пламва ДВА пъти в една анимация — ехо, не заекване. */
@keyframes mxsFlash{
  0%{   opacity:0; transform:scale(.5); stroke-width:3;
        filter:drop-shadow(0 0 6px rgba(100,206,255,.5)); }
  20%{  opacity:1; transform:scale(1.24); stroke:#dff4ff; stroke-width:7.5;
        filter:drop-shadow(0 0 20px rgba(120,205,255,1))
               drop-shadow(0 0 44px rgba(100,206,255,.85)); }
  42%{  opacity:1; transform:scale(1); stroke:#64ceff; stroke-width:3;
        filter:drop-shadow(0 0 6px rgba(100,206,255,.5)); }
  60%{  opacity:1; transform:scale(1.16); stroke:#dff4ff; stroke-width:6.5;
        filter:drop-shadow(0 0 16px rgba(120,205,255,.95))
               drop-shadow(0 0 36px rgba(100,206,255,.75)); }
  100%{ opacity:1; transform:scale(1); stroke:#64ceff; stroke-width:3;
        filter:drop-shadow(0 0 6px rgba(100,206,255,.5)); }
}
.mxs-link.is-on circle{ animation:mxsFlash 1.45s cubic-bezier(.25,.8,.3,1) 1.2s both; }
@media (prefers-reduced-motion: reduce){
  .mxs-link.is-on path, .mxs-link.is-on .mxs-head, .mxs-link.is-on circle{ animation:none; }
}
@media (max-width: 1199px){
  .mxs{ grid-template-columns:1fr; }
}

/* ── Чипът с предплатения баланс в лентата ─────────────────────────────────
   🔴 Стои ТУК, а не в отделните шаблони: страниците, които тръгват от
   albumes/_base.html, нямат свой <style> блок и без това правило мобилният
   чип оставаше видим и на широк екран — балансът се показваше два пъти. */
.nav-saldo{ background:#eff6ff !important; color:#1d4ed8 !important;
  border:1px solid #bfdbfe !important; font-variant-numeric:tabular-nums; }
.nav-saldo:hover{ background:#dbeafe !important; color:#1e40af !important; }

.nav-saldo-mob{ display:none; }
@media (max-width:1199px){
  .nav-saldo-mob{ display:inline-flex; align-items:center;
    margin-left:auto; margin-right:12px;
    padding:7px 12px; border-radius:999px; background:#eff6ff; color:#1d4ed8;
    border:1px solid #bfdbfe; font-size:14px; font-weight:800; line-height:1;
    text-decoration:none; white-space:nowrap; font-variant-numeric:tabular-nums; }
  .nav-saldo-mob:hover{ background:#dbeafe; color:#1e40af; }
}