/* ===================== Fonts ===================== */
@font-face {
  font-family: "Bootshaus";
  src: url("../assets/fonts/Bootshaus/Bootshaus-Regular.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Proto Sans";
  src: url("../assets/fonts/ProtoSans56.otf") format("opentype");
  font-weight: normal;
  font-display: swap;
}

/* ===================== Theme tokens ===================== */
:root {
  --display: "Bootshaus", "Proto Sans", "Arial Narrow", Impact, sans-serif;
  --proto: "Proto Sans", "Arial Narrow", Impact, sans-serif;
  --ui: "Segoe UI", Roboto, system-ui, sans-serif;

  --cyan: #4fd6ff;
  --cyan-deep: #1f9fd6;
  --mk: #d65aff;
  --bg-dark: #0a0e1a;
  --panel: rgba(18, 30, 56, 0.62);
  --panel-edge: rgba(120, 190, 255, 0.45);

  --d-green: #2ecc40;
  --d-yellow: #ffdc00;
  --d-orange: #ff851b;
  --d-red: #ff3b30;

  --t-f: #3dd435;
  --t-s: #b32ed9;
  --t-m: #e0218a;
  --t-p: #f2b01e;
  --t-gp: #c0392b;
  --t-cr: #2e86ff;
}

* { box-sizing: border-box; }

/* Атрибут hidden должен реально прятать элемент, даже если класс задаёт
   display:flex (иначе .tb-group / .tb-admin-badge перебивают hidden). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: #05070d;
  color: #eaf4ff;
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
}

/* ===================== Toolbar ===================== */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 150px 10px 16px; /* справа оставляем место под плавающую кнопку входа */
  background: linear-gradient(180deg, #0c1426, #0a0f1d);
  border-bottom: 1px solid rgba(120, 190, 255, 0.18);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.tb-brand {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(79, 214, 255, 0.5);
}
.tb-brand span { color: var(--mk); margin-left: 6px; }
.tb-group { display: flex; gap: 8px; align-items: center; }
.tb-label { font-size: 12px; font-weight: 600; color: #8fb0dc; }
.tb-saved { margin-left: auto; font-size: 12px; color: #6f86ad; min-width: 90px; text-align: right; }
.tb-admin-badge { display: flex; align-items: center; gap: 6px; }
.tb-admin-text { font-size: 13px; font-weight: 700; color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,.5); }

/* ===================== Floating auth control ===================== */
/* Кнопка «Войти» / надпись «Админ» — закреплена в правом верхнем углу,
   видна всегда, в т.ч. при прокрутке. */
.auth-dock {
  position: fixed;
  top: 9px;
  right: 14px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===================== Floating like button ===================== */
/* Кнопка лайка — закреплена в правом нижнем углу, видна всем посетителям.
   Лайки общие (Firebase /likes). Кнопка вне #stage, поэтому в PNG не попадает. */
.like-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  color: #dce9ff;
  background: rgba(40, 64, 110, 0.62);
  border: 1px solid rgba(120, 190, 255, 0.40);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform .12s ease, background .15s, border-color .15s, box-shadow .2s;
}
.like-fab:hover {
  background: rgba(60, 96, 160, 0.72);
  border-color: var(--cyan);
  box-shadow: 0 10px 32px rgba(79, 214, 255, 0.30);
}
.like-fab:active { transform: scale(0.94); }
.like-fab.liked {
  color: #fff;
  border-color: #6fd6ff;
  background: linear-gradient(180deg, rgba(79, 214, 255, 0.30), rgba(40, 64, 110, 0.62));
  box-shadow: 0 0 0 1px rgba(79, 214, 255, 0.55), 0 8px 28px rgba(79, 214, 255, 0.45);
}
.like-heart { font-size: 18px; line-height: 1; display: inline-block; }
.like-count { min-width: 14px; text-align: left; font-variant-numeric: tabular-nums; letter-spacing: .3px; }

@keyframes likePop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.like-fab.pop .like-heart { animation: likePop .35s ease; }

/* Кнопка доната — над кнопкой лайка, тот же стиль в фиолетовых тонах */
.donate-fab {
  position: fixed;
  right: 18px;
  bottom: 74px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  color: #f0e2ff;
  text-decoration: none;
  background: rgba(88, 48, 132, 0.62);
  border: 1px solid rgba(196, 140, 255, 0.45);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  transition: transform .12s ease, background .15s, border-color .15s, box-shadow .2s;
}
.donate-fab:hover {
  background: rgba(120, 72, 176, 0.75);
  border-color: #c48cff;
  box-shadow: 0 10px 32px rgba(196, 140, 255, 0.30);
}
.donate-fab:active { transform: scale(0.94); }
.donate-heart { font-size: 18px; line-height: 1; display: inline-block; }

/* Баннер с UID для не-админов (показывается на странице, а не через alert) */
.uid-banner {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  width: min(460px, 92vw);
  background: linear-gradient(180deg, #14213f, #0e1830);
  border: 1px solid rgba(120, 190, 255, .45);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .7);
  padding: 16px 18px;
  color: #eaf4ff;
}
.uid-banner-title { font-family: var(--display); font-size: 19px; color: var(--cyan); letter-spacing: .5px; margin-bottom: 4px; }
.uid-banner-sub { font-size: 13px; color: #9fc2ee; margin-bottom: 12px; line-height: 1.3; padding-right: 18px; }
.uid-banner-row { display: flex; gap: 8px; }
.uid-banner-input {
  flex: 1; min-width: 0;
  background: rgba(8, 16, 32, .8);
  border: 1px solid rgba(120, 190, 255, .3);
  border-radius: 8px; padding: 10px 11px;
  color: #eaf4ff; font-size: 13px;
  font-family: "Consolas", "Courier New", monospace;
}
.uid-banner-input:focus { outline: none; border-color: var(--cyan); }
.uid-banner-copy { flex: none; white-space: nowrap; }
.uid-banner-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none;
  color: #9fc2ee; font-size: 16px; line-height: 1; cursor: pointer;
}
.uid-banner-close:hover { color: #fff; }
/* баннер живой синхронизации (свежие правки другого админа) */
.sync-banner { top: 72px; border-color: rgba(120,190,255,.6); box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(42,166,224,.35); }
.sync-banner .uid-banner-row { margin-top: 4px; }

.btn {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  color: #dCe9ff;
  background: rgba(40, 64, 110, 0.55);
  border: 1px solid rgba(120, 190, 255, 0.28);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform .08s, background .15s, border-color .15s;
  white-space: nowrap;
}
.btn:hover { background: rgba(60, 96, 160, 0.7); border-color: var(--cyan); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #2aa6e0, #1c7bb5); border-color: #6fd6ff; color: #fff; }
.btn.primary:hover { background: linear-gradient(180deg, #36b8f0, #2189c6); }
.btn.danger { background: rgba(120, 36, 36, 0.5); border-color: rgba(255, 90, 80, 0.5); }
.btn.danger:hover { background: rgba(160, 44, 44, 0.7); border-color: #ff6b5e; }
.btn.small { font-size: 12px; padding: 6px 10px; }
.btn.ghost { background: transparent; }

/* ----- Кнопка «Сохранить» (публикация изменений) ----- */
.save-btn { font-weight: 700; min-width: 124px; transition: background .15s, border-color .15s, box-shadow .2s, transform .08s; }
/* есть несохранённые изменения — зовём нажать (янтарное свечение + пульс) */
.save-btn.dirty {
  background: linear-gradient(180deg, #ffd05a, #f5a623);
  border-color: #ffe08a;
  color: #3a2600;
  box-shadow: 0 0 0 1px rgba(245,166,35,.55), 0 0 14px rgba(245,166,35,.55);
  animation: savePulse 1.6s ease-in-out infinite;
}
.save-btn.dirty:hover { background: linear-gradient(180deg, #ffda73, #ffb02e); border-color: #ffe9b0; }
@keyframes savePulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(245,166,35,.5),  0 0 10px rgba(245,166,35,.4); }
  50%      { box-shadow: 0 0 0 1px rgba(245,166,35,.75), 0 0 20px rgba(245,166,35,.85); }
}
/* всё опубликовано */
.save-btn.clean {
  background: rgba(46,160,67,.16);
  border-color: rgba(80,200,120,.5);
  color: #8ff0b0;
  cursor: default;
  box-shadow: none;
}
.save-btn.clean:hover { background: rgba(46,160,67,.22); border-color: rgba(80,200,120,.6); }
/* идёт сохранение */
.save-btn.saving {
  background: rgba(40,64,110,.55);
  border-color: rgba(120,190,255,.4);
  color: #cfe2ff;
  cursor: progress;
  box-shadow: none;
}

/* filter chips */
.chip {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  color: #7e94b8;
  background: rgba(20, 34, 62, 0.6);
  border: 1px solid rgba(120, 190, 255, 0.2);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.chip:hover { border-color: var(--cyan); color: #cfe2ff; }
.chip.active {
  color: #fff;
  background: rgba(42, 166, 224, 0.4);
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(79, 214, 255, 0.25);
}
.chip.all { border-style: dashed; }

/* toggle switch */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track {
  width: 40px; height: 22px; border-radius: 12px;
  background: rgba(40, 64, 110, 0.8);
  border: 1px solid rgba(120, 190, 255, 0.3);
  position: relative; transition: background .2s;
}
.switch .thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #8fa9cc; transition: left .2s, background .2s;
}
.switch input:checked + .track { background: rgba(42, 166, 224, 0.7); }
.switch input:checked + .track .thumb { left: 20px; background: #eaf6ff; }
.switch-label { font-size: 13px; font-weight: 600; color: #cfe2ff; }

/* ===================== Stage ===================== */
.stage-wrap {
  display: flex;
  justify-content: center;
  padding: 26px 16px 60px;
}
.stage {
  position: relative;
  width: min(1040px, 96vw);
  min-height: 540px;
  border-radius: 14px;
  overflow: hidden;
  background-image: url("../assets/bg.png");
  background-color: #091640;
  background-blend-mode: multiply;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(120, 190, 255, 0.15);
  /* internal layout uses container query units for proportional scaling */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  padding: 2.4cqw 2.6cqw 1.6cqw;
}
.stage::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,8,18,0.45) 0%, rgba(6,8,18,0.12) 30%, rgba(6,8,18,0.35) 100%);
  pointer-events: none;
}
.petals {
  position: absolute; inset: 0;
  background-image: url("../assets/petals.png");
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.stage > *:not(.petals) { position: relative; z-index: 2; }

/* ===================== Header ===================== */
.tl-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  margin-bottom: 1.6cqw;
}
.bf-logo { width: 12cqw; height: auto; justify-self: start; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.title-block { text-align: center; }
.date {
  font-family: var(--display);
  font-size: 2.7cqw;
  letter-spacing: 2px;
  color: #eaf6ff;
  text-shadow: 0 0 8px rgba(79,214,255,.6);
  outline: none;
  display: inline-block;
  padding: 0 .6cqw;
  border-radius: 4px;
}
.editing .date { cursor: text; box-shadow: inset 0 0 0 1px rgba(79,214,255,.35); }
.editing .date:hover { background: rgba(79,214,255,.10); }
.date:focus { background: rgba(79,214,255,.12); }
.tl-title {
  font-family: var(--display);
  font-size: 8.6cqw;
  line-height: .9;
  margin: .2cqw 0 0;
  color: #fff;
  letter-spacing: .2cqw;
  text-shadow: 0 0 16px rgba(79,214,255,.55), 0 .3cqw 0 rgba(0,0,0,.35);
}
.brand-logo {
  justify-self: end;
  width: 17cqw;
  height: auto;
  margin-top: .8cqw;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7));
}

/* ===================== Tiers ===================== */
.tiers { display: flex; flex-direction: column; gap: 1.2cqw; flex: 1; }

.tier { position: relative; display: flex; flex-direction: column; gap: 1cqw; }
/* группа «плашка + ряд предметов». При переполнении тир показывает несколько
   таких групп — каждая отдельный ряд со своей плашкой и небольшим отступом
   (через gap у .tier), а не один «удвоенный» по высоте блок. */
.tier-rowgroup { display: flex; flex-direction: column; gap: .7cqw; }

/* --- label band: halftone dots fading to clear center, light edge lines --- */
.tier-band {
  position: relative;
  height: 4.6cqw;
  border-radius: 2.3cqw;
  background: linear-gradient(180deg, rgba(175,212,255,.58), rgba(106,152,222,.48));
  border-top: .22cqw solid rgba(236,246,255,.90);
  border-bottom: .22cqw solid rgba(236,246,255,.90);
  box-shadow: 0 .3cqw 1.4cqw rgba(0,0,0,.32), inset 0 0 2cqw rgba(100,162,240,.42);
  display: flex; align-items: center; justify-content: center;
}
.tier-band::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("../assets/dots-band.png");
  background-size: 100% 100%;
  opacity: .75;
  pointer-events: none;
}
.tier-band > * { position: relative; }
.band-logo {
  height: 3.2cqw;
  width: auto;
  filter: drop-shadow(0 .15cqw .3cqw rgba(0,0,0,.6));
  pointer-events: none;
}
.tier-label {
  font-family: var(--display);
  font-size: 2.6cqw;
  color: #fff;
  letter-spacing: .15cqw;
  text-shadow: 0 0 8px rgba(79,214,255,.6), 0 .15cqw .3cqw rgba(0,0,0,.5);
  outline: none;
  min-width: 2cqw;
  text-align: center;
}
.tier-label:focus { background: rgba(79,214,255,.18); border-radius: 4px; }
.tier-tools { position: absolute; right: .8cqw; display: flex; gap: .4cqw; }

/* --- items track: translucent panel with halftone tile --- */
.tier-items {
  display: flex; flex-wrap: wrap;
  column-gap: .55cqw; row-gap: .9cqw;
  align-content: flex-start;
  min-height: 10cqw;
  border-radius: 1.4cqw;
  padding: .9cqw .8cqw .7cqw;
  background-image:
    url("../assets/dots-tile.png"),
    linear-gradient(180deg, rgba(32,68,148,.68), rgba(10,26,80,.80));
  background-size: 2.4cqw 2.4cqw, 100% 100%;
  border: 1px solid rgba(88,156,255,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -2px 12px rgba(0,0,0,.32);
}
.tier.drag-over .tier-items { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan), inset 0 1px 0 rgba(255,255,255,.22); }

/* ===================== Item cell ===================== */
.cell {
  position: relative;
  width: 8.2cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: grab;
  user-select: none;
  transition: transform .14s ease;
}
.cell.dragging { opacity: .4; }
/* наведение на предмет — подсвечиваем всю ячейку со всеми элементами */
.cell:hover { transform: translateY(-.35cqw) scale(1.06); z-index: 8; }
.cell:hover .cell-value { color: #fff; text-shadow: 0 0 .5cqw rgba(79,214,255,.9), 0 1px 2px rgba(0,0,0,.95); }
.cell-icon {
  width: 100%; height: 6.4cqw;
  display: flex; align-items: center; justify-content: center;
  border-radius: 1cqw;
  transition: background .15s;
}
.cell:hover .cell-icon {
  background: radial-gradient(circle at 50% 45%, rgba(79,214,255,.28), rgba(79,214,255,0) 72%);
}
.cell:hover .cell-icon img {
  filter: drop-shadow(0 0 .6cqw rgba(79,214,255,.95)) drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.cell-icon img {
  max-width: 92%; max-height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
  image-rendering: auto;
  pointer-events: none;
}
/* value + type badge row (без тёмной подложки — цифры лежат прямо на дорожке) */
.cell-strip {
  position: relative;
  margin-top: .15cqw;
  width: 100%;
  height: 2.5cqw;
  display: flex; align-items: center; justify-content: center;
  gap: .35cqw;
}
.cell-value {
  font-family: var(--display);
  font-size: 2cqw;
  color: #fff;
  letter-spacing: .04cqw;
  /* без подложки нужна более плотная тень, чтобы белые цифры читались на дорожке */
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.7), 0 0 1px rgba(0,0,0,.9);
  line-height: 1;
  white-space: nowrap;
}

/* type badge — coloured chip next to the value (как в макете) */
.cell .tbadge { flex: none; }
/* demand dot — right of the icon, near the strip (как в макете) */
.cell .dot {
  position: absolute; top: 4.6cqw; right: .1cqw;
  z-index: 3;
}
/* trend arrow — mirrors the dot on the left */
.cell .trend {
  position: absolute; top: 4.7cqw; left: .1cqw;
  z-index: 3;
}

/* per-cell edit controls */
.cell-edit {
  position: absolute; top: -.4cqw; right: -.4cqw;
  display: none; gap: .3cqw; z-index: 5;
}
.editing .cell:hover .cell-edit { display: flex; }
.cell-edit button {
  width: 2.4cqw; height: 2.4cqw;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(15,25,45,.92);
  color: #fff; font-size: 1.4cqw; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.cell-edit button:hover { background: var(--cyan-deep); }

/* значок NEW — новый / изменённый предмет */
.cell-new {
  position: absolute; top: -.4cqw; left: -.5cqw; z-index: 7;
  font-family: var(--ui); font-weight: 800; font-size: 1.15cqw; line-height: 1;
  color: #fff; letter-spacing: .04cqw;
  background: linear-gradient(180deg, #ff5a5a, #e0218a);
  border: .12cqw solid rgba(255,255,255,.9);
  border-radius: .55cqw; padding: .28cqw .4cqw .22cqw;
  box-shadow: 0 .2cqw .6cqw rgba(0,0,0,.5);
  transform: rotate(-12deg);
  pointer-events: none;
}

/* всплывающая подсказка предмета (название + описание) при наведении */
.cell-tip {
  position: absolute;
  bottom: calc(100% + .3cqw);
  left: 50%;
  transform: translateX(-50%) translateY(.3cqw);
  width: max-content; max-width: 24cqw;
  background: linear-gradient(180deg, #14213f, #0e1830);
  border: 1px solid rgba(120,190,255,.5);
  border-radius: .8cqw;
  padding: .6cqw .8cqw;
  box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.6);
  opacity: 0; visibility: hidden;
  transition: opacity .15s, transform .15s;
  pointer-events: none;
  z-index: 30;
  text-align: center;
}
.cell:hover .cell-tip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tip-name { font-family: var(--display); font-size: 1.8cqw; color: var(--cyan); letter-spacing: .04cqw; }
.tip-desc { font-family: var(--ui); font-size: 1.35cqw; color: #dbeaff; margin-top: .25cqw; line-height: 1.25; white-space: normal; }
/* в режиме редактирования подсказку не показываем — мешает кнопкам/перетаскиванию */
.editing .cell-tip { display: none; }

/* add-item ghost cell */
.cell-add {
  width: 8.2cqw; height: 9cqw;
  border: 1px dashed rgba(150,200,255,.45);
  border-radius: 1cqw;
  background: rgba(30,50,90,.25);
  color: #9fc2ee;
  font-size: 3.5cqw;
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.editing .cell-add { display: flex; }
.cell-add:hover { background: rgba(50,80,140,.4); border-color: var(--cyan); color: #fff; }

/* Фильтры теперь применяются в JS (render): скрытые типы не рендерятся,
   предметы переупаковываются, а пустые тиры не отображаются. */

/* ===================== Badges / dots / trends (shared) =====================
   Оригинальные пиксельные иконки из макета (assets/badge-*.png, dot-*.png,
   trend-*.png) — извлечены из nav-legend.png 1-в-1. */
.tbadge {
  height: 2cqw; width: auto;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.dot {
  display: inline-block;
  width: 1.5cqw; height: 1.5cqw;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.trend {
  display: inline-block;
  width: 1.5cqw; height: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.trend.tr-swap { width: 2.2cqw; }

/* colour tokens — используются кнопками категорий в модалке */
.t-f { --bc: var(--t-f); }
.t-s { --bc: var(--t-s); }
.t-m { --bc: var(--t-m); }
.t-p { --bc: var(--t-p); }
.t-gp { --bc: var(--t-gp); }
.t-cr { --bc: var(--t-cr); }

/* ===================== Ad block ===================== */
.ad-block {
  position: relative;
  border-radius: 1.2cqw;
  background: linear-gradient(180deg, rgba(12,22,48,.78), rgba(10,16,36,.7));
  border: 1px solid rgba(120,190,255,.4);
  box-shadow: inset 0 0 2cqw rgba(60,130,220,.18), 0 .3cqw 1.2cqw rgba(0,0,0,.3);
  padding: .9cqw 1cqw .8cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4cqw;
  overflow: hidden;
}
.ad-chip {
  position: absolute; top: 0; left: 0;
  font-family: var(--display);
  font-size: 1.2cqw;
  letter-spacing: .1cqw;
  color: #0a1226;
  background: linear-gradient(180deg, #6fd6ff, #2aa6e0);
  padding: .2cqw .8cqw .15cqw;
  border-radius: 0 0 .8cqw 0;
}
.ad-text {
  font-family: var(--display);
  font-size: 2.4cqw;
  color: #fff;
  letter-spacing: .08cqw;
  text-align: center;
  text-shadow: 0 0 10px rgba(79,214,255,.5);
  outline: none;
  min-width: 8cqw;
}
.editing .ad-text { cursor: text; }
.ad-text:focus { background: rgba(79,214,255,.12); border-radius: 4px; }
.ad-img-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.ad-img { max-width: 100%; max-height: 12cqw; border-radius: .6cqw; display: block; }
.ad-tools { display: flex; gap: .5cqw; flex-wrap: wrap; justify-content: center; }

/* скрытая ссылка рекламы: вся карточка кликабельна (курсор-рука) + значок 🔗 */
.stage:not(.editing) .ad-block.has-link,
.stage:not(.editing) .ad-block.has-link * { cursor: pointer; }
.ad-link-badge {
  position: absolute; top: .6cqw; right: .6cqw; z-index: 4;
  width: 2.7cqw; height: 2.7cqw; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5cqw; line-height: 1;
  background: linear-gradient(180deg, #6fd6ff, #2aa6e0);
  box-shadow: 0 .2cqw .6cqw rgba(0,0,0,.55), 0 0 0 .2cqw rgba(255,255,255,.25);
}

/* ===================== Legend ===================== */
.legend {
  margin-top: 1.4cqw;
  padding: 1cqw 1.2cqw;
  border-radius: 1.2cqw;
  background: var(--panel);
  border: 1px solid rgba(120,190,255,.25);
}
.legend-title {
  font-family: var(--display);
  text-align: center;
  font-size: 2.4cqw;
  margin: 0 0 .8cqw;
  color: #eaf6ff;
  letter-spacing: .1cqw;
  text-shadow: 0 0 8px rgba(79,214,255,.5);
}
.legend-grid { display: flex; justify-content: space-between; gap: 1cqw; }
.legend-col { display: flex; flex-direction: column; gap: .5cqw; }
.lg {
  display: flex; align-items: center; gap: .7cqw;
  font-family: var(--display);
  letter-spacing: .03cqw;
  font-size: 1.7cqw; color: #dbeaff; white-space: nowrap;
}
.lg .tbadge, .lg .dot, .lg .trend { flex: none; }

/* ===================== Footer ===================== */
.tl-footer {
  margin-top: 1cqw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6cqw 1.4cqw;
  padding: .6cqw .4cqw 0;
}
.flink { position: relative; display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; }
.fl-title { font-family: var(--display); font-size: 1.7cqw; color: var(--cyan); letter-spacing: .5px; text-shadow: 0 0 6px rgba(79,214,255,.4); }
.fl-sub { font-family: var(--display); letter-spacing: .03cqw; font-size: 1.4cqw; color: #aecbff; }
.flink:hover .fl-title { color: #fff; }
/* в режиме редактирования у ссылки видны кнопки: 🔗 (URL) и ✕ (удалить) */
.editing .flink .fl-title, .editing .flink .fl-sub { cursor: text; }
.flink-tools { position: absolute; top: -1.1cqw; right: -.2cqw; display: none; gap: .3cqw; z-index: 5; }
.editing .flink:hover .flink-tools { display: flex; }
.flink-tools button {
  width: 2.1cqw; height: 2.1cqw; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(15,25,45,.95); color: #fff;
  font-size: 1cqw; line-height: 1; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.flink-tools button:hover { background: var(--cyan-deep); }
.flink-tools button.danger:hover { background: rgba(160,44,44,.9); border-color: #ff6b5e; }
.flink-add {
  align-self: center;
  font-family: var(--ui); font-size: 1.4cqw; font-weight: 700;
  color: #9fc2ee; cursor: pointer;
  border: 1px dashed rgba(150,200,255,.5);
  border-radius: .8cqw; background: rgba(30,50,90,.3);
  padding: .5cqw 1cqw;
}
.flink-add:hover { border-color: var(--cyan); color: #fff; }

/* ===================== Credits / team ===================== */
.credits {
  margin-top: 1cqw;
  padding: .7cqw 1cqw;
  border-top: 1px solid rgba(120,190,255,.25);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5cqw 2.2cqw;
}
.credit { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.cr-role {
  font-family: var(--display);
  font-size: 1.35cqw;
  letter-spacing: .08cqw;
  color: var(--cyan);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(79,214,255,.4);
  outline: none;
}
.cr-name { font-family: var(--display); letter-spacing: .03cqw; font-size: 1.5cqw; color: #eaf4ff; font-weight: 600; outline: none; }
.editing .cr-role, .editing .cr-name { cursor: text; }
.cr-role:focus, .cr-name:focus { background: rgba(79,214,255,.12); border-radius: 3px; }
.credit-del {
  position: absolute; top: -.9cqw; right: -1.4cqw;
  width: 1.8cqw; height: 1.8cqw;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(15,25,45,.92);
  color: #fff; font-size: 1cqw; line-height: 1;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.credit-del:hover { background: rgba(160,44,44,.9); }
.credit-add {
  width: 2.6cqw; height: 2.6cqw;
  border-radius: 50%;
  border: 1px dashed rgba(150,200,255,.5);
  background: rgba(30,50,90,.3);
  color: #9fc2ee; font-size: 1.6cqw;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.credit-add:hover { border-color: var(--cyan); color: #fff; }

/* ===================== Modal ===================== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 8, 16, 0.7);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: min(420px, 96vw);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #14213f, #0e1830);
  border: 1px solid rgba(120,190,255,.35);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
  overflow: hidden;
}
.modal-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(120,190,255,.18); }
.modal-head h3 { margin: 0; font-family: var(--display); font-size: 20px; color: var(--cyan); letter-spacing: 1px; }
.icon-btn { background: none; border: none; color: #9fc2ee; font-size: 18px; cursor: pointer; }
.icon-btn:hover { color: #fff; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12px; color: #8fb0dc; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.field input[type="text"] {
  background: rgba(8, 16, 32, .8);
  border: 1px solid rgba(120,190,255,.3);
  border-radius: 8px; padding: 10px 12px; color: #eaf4ff; font-size: 15px; font-family: var(--ui);
}
.field input[type="text"]:focus { outline: none; border-color: var(--cyan); }
.field textarea {
  background: rgba(8, 16, 32, .8);
  border: 1px solid rgba(120,190,255,.3);
  border-radius: 8px; padding: 10px 12px; color: #eaf4ff; font-size: 14px;
  font-family: var(--ui); resize: vertical; min-height: 64px; line-height: 1.35;
}
.field textarea:focus { outline: none; border-color: var(--cyan); }
.field .new-switch { flex-direction: row; }

.icon-field { flex-direction: row; align-items: center; gap: 14px; }
.icon-preview {
  width: 72px; height: 72px; flex: none;
  border-radius: 10px;
  background: rgba(8,16,32,.6);
  border: 1px solid rgba(120,190,255,.25);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.icon-preview img { max-width: 90%; max-height: 80%; }
.icon-actions { display: flex; flex-direction: column; gap: 8px; }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  min-width: 38px; height: 38px; padding: 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(120,190,255,.25);
  background: rgba(8,16,32,.6);
  color: #cfe2ff; cursor: pointer;
  font-family: var(--ui); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.seg button:hover { border-color: var(--cyan); }
.seg button.active { background: rgba(42,166,224,.35); border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.seg .dot { width: 16px; height: 16px; position: static; }
.seg .trend { position: static; width: 16px; }
.seg .trend.tr-swap { width: 22px; }
/* badge-coloured segment buttons keep readable text on dark */
.seg button.t-s, .seg button.t-m, .seg button.t-gp, .seg button.t-cr {
  background: rgba(8,16,32,.6); color: #cfe2ff; min-width: auto; height: 38px;
  box-shadow: inset 0 -3px 0 var(--bc);
}
.seg button.t-s.active, .seg button.t-m.active, .seg button.t-gp.active, .seg button.t-cr.active {
  background: rgba(42,166,224,.35);
}

/* Regular / Permanent toggle */
.seg-toggle { display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(8,16,32,.6); border: 1px solid rgba(120,190,255,.25); }
.seg-toggle button {
  flex: 1; height: 46px; min-width: 0; padding: 0 10px;
  border: none; border-radius: 9px;
  background: transparent; color: #cfe2ff;
  font-family: var(--ui); font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.seg-toggle button small { font-family: var(--display); font-size: 13px; opacity: .8; }
.seg-toggle button:hover { color: #fff; }
.seg-toggle button.active {
  background: linear-gradient(180deg, #b06cff, #8a3fff);
  color: #fff; box-shadow: 0 0 0 1px #b06cff, 0 5px 16px rgba(150,80,255,.45);
}
.seg-toggle button.active small { opacity: 1; }

.modal-foot { flex: none; display: flex; justify-content: space-between; padding: 14px 16px; border-top: 1px solid rgba(120,190,255,.18); }

/* ===================== Item VIEW modal ===================== */
.vmodal {
  width: min(380px, 94vw);
  position: relative;
  padding: 8px;
}
.vmodal-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font-size: 18px; line-height: 1;
}
.vmodal-body {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 12px;
  padding: 22px 22px 26px;
  overflow-y: auto;
}
.vmodal-icon {
  width: 120px; height: 120px; flex: none;
  border-radius: 16px;
  background: rgba(8,16,32,.6);
  border: 1px solid rgba(120,190,255,.3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
}
.vmodal-icon img { max-width: 84%; max-height: 84%; }
.vmodal-name {
  font-family: var(--display); font-size: 26px; color: var(--cyan);
  letter-spacing: .5px; line-height: 1.1;
}
.vmodal-price {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(8,16,32,.7);
  border: 1px solid rgba(120,190,255,.25);
  border-radius: 999px; padding: 6px 14px;
}
.vmodal-price-val { font-family: var(--ui); font-weight: 800; font-size: 18px; color: #eaf4ff; }
.vmodal-price .tbadge { height: 16px; position: static; }
.vmodal-desc {
  font-family: var(--ui); font-size: 15px; color: #dbeaff; line-height: 1.45;
  max-width: 100%; white-space: pre-wrap; word-break: break-word;
}
.vmodal-desc.empty { color: #7f9bc4; font-style: italic; }

/* ===================== Донат-модалка ===================== */
.dmodal { width: min(360px, 94vw); position: relative; padding: 8px; }
.dmodal-close { position: absolute; top: 10px; right: 12px; z-index: 2; font-size: 18px; line-height: 1; }
.dmodal-body {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; padding: 24px 22px 26px;
}
.dmodal-title { font-family: var(--display); font-size: 24px; color: #d9b6ff; letter-spacing: .5px; }
.dmodal-sub { font-family: var(--ui); font-size: 14px; color: #cdbce8; line-height: 1.4; max-width: 280px; }
.dmodal-links { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.dmodal-link { justify-content: center; text-align: center; text-decoration: none; padding: 11px 16px; font-size: 15px; }
.dmodal-qr {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 4px; padding: 12px; border-radius: 16px;
  background: #fff; box-shadow: 0 8px 26px rgba(0,0,0,.45);
}
.dmodal-qr img { width: 168px; height: 168px; display: block; image-rendering: pixelated; }
.dmodal-qr-cap { font-family: var(--ui); font-size: 12px; color: #2a1840; font-weight: 700; }

/* ===================== View (non-edit) mode ===================== */
.stage:not(.editing) .cell { cursor: default; }

/* ===================== Responsive (телефоны) ===================== */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }

  /* --- панель: ничего не обрезается, чипы переносятся --- */
  .toolbar { gap: 10px 10px; padding: 10px 12px; }
  .tb-brand { width: 100%; padding-right: 92px; font-size: 20px; } /* место под «Войти» */
  .tb-saved { display: none; }
  .tb-group.filters { flex-wrap: wrap; width: 100%; gap: 6px; }
  .filters .tb-label { width: 100%; margin-bottom: 2px; }
  .chip { padding: 7px 12px; }                 /* чуть крупнее под палец */
  .btn { padding: 9px 12px; }

  /* кнопка лайка — компактнее и ближе к углу на телефоне */
  .like-fab { right: 12px; bottom: 12px; padding: 9px 14px; font-size: 14px; }
  .donate-fab { right: 12px; bottom: 62px; padding: 9px 14px; font-size: 14px; }

  /* --- тирлист во всю ширину экрана (крупнее) --- */
  .stage-wrap { padding: 10px 0 34px; }
  .stage { width: 100vw; border-radius: 0; padding: 3cqw 2.6cqw 2cqw; }

  /* --- крупнее предметы и текст: меньше штук в ряд, но читаемо ---
     (itemsPerRow меряет ячейку зондом, поэтому разбивка на ряды подстроится) */
  .cell { width: 14cqw; }
  .cell-icon { height: 10.5cqw; }
  .cell-strip { height: 4cqw; margin-top: .3cqw; }
  .cell-value { font-size: 3.3cqw; }
  .cell .dot   { top: 7.5cqw; }
  .cell .trend { top: 7.6cqw; }
  .cell-add { width: 14cqw; height: 15cqw; font-size: 6cqw; }

  /* иконки-бейджи/точки/тренды крупнее (в ячейках и в легенде) */
  .tbadge { height: 3.3cqw; }
  .dot { width: 2.5cqw; height: 2.5cqw; }
  .trend { width: 2.5cqw; }
  .trend.tr-swap { width: 3.7cqw; }

  /* плашки тиров */
  .tier-band { height: 7.2cqw; border-radius: 3.6cqw; }
  .band-logo { height: 5cqw; }
  .tier-label { font-size: 4cqw; }
  .tier-items { min-height: 14cqw; border-radius: 2cqw; }

  /* шапка */
  .date { font-size: 3.4cqw; }

  /* легенда / подвал / титры — крупнее, чтобы читались */
  .legend-title { font-size: 3.6cqw; }
  .lg { font-size: 2.7cqw; gap: 1cqw; }
  .fl-title { font-size: 2.7cqw; }
  .fl-sub { font-size: 2.3cqw; }
  .cr-role { font-size: 2.3cqw; }
  .cr-name { font-size: 2.5cqw; }
  .ad-text { font-size: 3.6cqw; }
  .ad-chip { font-size: 2cqw; }

  /* подсказка и значок NEW крупнее под палец/экран */
  .cell-new { font-size: 2cqw; border-radius: 1cqw; padding: .45cqw .65cqw .35cqw; }
  .cell-tip { max-width: 40cqw; border-radius: 1.4cqw; padding: 1cqw 1.2cqw; }
  .tip-name { font-size: 3cqw; }
  .tip-desc { font-size: 2.3cqw; }
}