/* =========================
   Base / Layout / Typo
========================= */
:root{
  --bg-0:#0f172a;        /* основной фон */
  --bg-1:#0b1225;        /* панели/карточки */
  --bg-2:#0b1726;        /* панели тёмнее */
  --ink:#e2e8f0;         /* текст */
  --muted:#94a3b8;       /* приглушённый текст */
  --link:#8ab4ff;        /* ссылки */
  --border:#223342;      /* границы */
  --accent:#4f46e5;      /* синий акцент */
  --danger:#ef4444;      /* danger */
  --danger-2:#5a1e24;    /* тёмный danger для кнопок */
  --gold:#ffd700;        /* золото (избранное) */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg-0);
  color:var(--ink);
}

.container{max-width:1200px;margin:0 auto;padding:18px}
.topbar{
  position:sticky; top:0; z-index:10;
  background:var(--bg-1);
  border-bottom:1px solid var(--border);
  padding:10px 12px;
}
.brand{color:#fff;text-decoration:none;font-weight:700}

/* =========================
   Controls / Toolbar
========================= */
.toolbar{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; margin:12px 0 16px;
}
select,input,button{
  background:var(--bg-1);
  border:1px solid var(--border);
  color:var(--ink);
  padding:8px 12px;
  border-radius:8px;
  outline:none;
}
select:focus,input:focus,button:focus{box-shadow:0 0 0 2px rgba(138,180,255,.2)}

.btn{
  cursor:pointer; user-select:none;
  transition:filter .12s ease, transform .04s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}

.chip{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--muted);
}
.row{display:flex; gap:8px; align-items:center}

/* =========================
   Grid & Cards
========================= */
#grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
}
.card{
  background:#0d1a2b;
  border:1px solid #0f2238;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.28);
}
.thumbbox{position:relative}
.thumb{
  width:100%; height:260px; display:block; object-fit:cover; background:#0a1624;
}
.badge{
  position:absolute; left:10px; bottom:10px;
  background:rgba(0,0,0,.55); color:#e9f1ff;
  padding:2px 8px; border-radius:10px;
  font-size:12px; font-weight:700; letter-spacing:.2px;
  backdrop-filter:blur(2px);
}
.meta{padding:12px 14px 10px}
.title{
  font-weight:800; font-size:16px; margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.muted{color:var(--muted); opacity:.9; font-size:12px}
.small{font-size:12px}
.line{font-size:13px; margin:4px 0}
.link{color:var(--link); text-decoration:none}
.link:hover{text-decoration:underline}
.empty{
  padding:28px; border:1px dashed var(--border); border-radius:12px;
  text-align:center; color:var(--muted);
}

/* Кастомный вид для флажков (добавка к библиотеке flag-icons) */
.fi{
  width:1.15em; height:.85em;
  border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;
}

/* =========================
   Card actions row
========================= */
.card-actions{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px 12px;
  border-top:1px solid #0f2238;
  background:#0b1726;
}

/* Базовая кнопка на карточке (вариант с текстом оставлен на всякий случай) */
.btn-card{
  appearance:none;
  border:1px solid #203348;
  background:#102235;
  color:#e6f0ff;
  padding:8px 10px;
  border-radius:10px;
  font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; user-select:none;
  transition:filter .12s ease, transform .04s ease, border-color .12s ease;
}
.btn-card:hover{filter:brightness(1.08)}
.btn-card:active{transform:translateY(1px)}
.btn-card .icon{font-size:14px; line-height:1}
.btn-card .label{font-size:12px; opacity:.9}

/* ИКОНКА-КНОПКА: компактный квадрат, единый стиль для всех действий */
.btn-card.icon{
  width:36px; height:34px; padding:0;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
}
.btn-card.icon svg{width:18px; height:18px; fill:currentColor}

/* Опасная кнопка (скрыть) */
.btn-danger{background:var(--danger-2); border-color:#7a2b33}
.btn-danger:hover{filter:brightness(1.06)}

/* Раздвижка */
.flex-spacer{flex:1 1 auto}

/* Звезда (избранное) на карточке — иконка и активное состояние */
.btn-fav{
  border:1px solid #303f56; background:#0e1d2e;
  width:36px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1;
}
.btn-fav svg{width:18px; height:18px; fill:currentColor}
.btn-fav.active{
  color:var(--gold);
  border-color:rgba(255,215,0,.45);
  box-shadow:0 0 0 2px rgba(255,215,0,.08) inset;
  background:#162945;
}

/* Toolbar Favorites button + counter */
.btn-fav-open{
  appearance:none;
  border:1px solid #203348;
  background:#102235; color:#e6f0ff;
  padding:8px 10px; border-radius:10px;
  font-size:12px; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer;
}
.badge-count{
  display:inline-block; min-width:20px; padding:0 6px; height:18px; line-height:18px;
  border-radius:9px; background:#173458; color:#9fc1ff; font-size:12px; text-align:center;
  margin-left:4px; border:1px solid #26476b;
}

/* =========================
   Viewer / Carousel
========================= */
.viewer{position:fixed; inset:0; display:flex; flex-direction:column; background:rgba(0,0,0,.86); z-index:1000}
.viewer.hidden{display:none}
.vstage{flex:1; display:flex; align-items:center; justify-content:center; padding:16px}
.vimg{
  max-width:90vw; max-height:72vh; display:none;
  border-radius:10px; background:#0b1726; box-shadow:0 10px 30px rgba(0,0,0,.4)
}
.vmeta{padding:14px 18px 22px; background:#09131f; border-top:1px solid #0f2238}
.vtitle{font-size:18px; font-weight:800; margin-bottom:6px; display:flex; gap:8px; align-items:center}
.vrow{font-size:14px; margin:4px 0}
.vclose, .vnav{
  position:absolute; top:10px;
  background:#0c1a2a; border:1px solid #203348; color:#dbe8ff;
}
.vclose{right:10px; width:36px; height:36px; border-radius:10px; font-size:20px; line-height:1}
.vnav{
  top:calc(50% - 22px); width:44px; height:44px; border-radius:12px;
  font-size:26px; display:flex; align-items:center; justify-content:center;
}
.vnav.left{left:10px}
.vnav.right{right:10px}
.vind{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.5); color:#fff; padding:3px 8px; border-radius:8px;
  font-size:12px; font-weight:700;
}

/* Viewer actions bar */
.vactions{
  display:flex; gap:10px; padding:12px 18px 18px;
  background:#09131f; border-top:1px solid #0f2238;
}
.btn-action{
  appearance:none; border:1px solid #203348; padding:10px 14px; border-radius:10px;
  font-weight:700; font-size:14px; cursor:pointer; background:#12304b; color:#e6f0ff;
  transition:filter .12s ease, transform .04s ease;
}
.btn-action:hover{filter:brightness(1.1)}
.btn-action:active{transform:translateY(1px)}
.btn-danger-action{background:#5a1e24; border-color:#7a2b33}

/* Иконки во вьюере в том же стиле */
.btn-action.icon{
  width:36px; height:36px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px;
}
.btn-action.icon svg{width:18px; height:18px; fill:currentColor}
.btn-action.icon.fav.active{
  color:var(--gold);
  border-color:rgba(255,215,0,.45);
  box-shadow:0 0 0 2px rgba(255,215,0,.08) inset;
  background:#162945;
}

/* =========================
   Favorites Modal
========================= */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; z-index:1200}
.modal.hidden{display:none}
.modal-dialog{
  width:min(920px,92vw); max-height:86vh; overflow:auto;
  background:#0f1926; color:#eaeaea; border:1px solid #203348; border-radius:16px;
  padding:16px; box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.modal-title{margin:0 0 12px; font-size:18px; font-weight:800}
.modal-close{
  position:sticky; top:0; float:right; border:0; background:transparent; color:#aaa; font-size:24px; cursor:pointer;
}
.modal-close:hover{color:#fff}

.favorites-list{display:grid; gap:10px}
.fav-row{
  display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:center;
  padding:8px; border:1px solid #203348; border-radius:12px; background:#0b1726;
}
.fav-thumb{width:64px; height:64px; object-fit:cover; border-radius:8px; background:#122235}
.fav-meta{overflow:hidden}
.fav-title{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fav-sub{opacity:.7; font-size:12px}
.fav-actions{display:flex; gap:10px}
.btn-link{background:transparent; border:0; color:var(--link); cursor:pointer; padding:0; font:inherit; text-decoration:underline}
.btn-link.danger{color:#ff6b6b}

/* =========================
   Toast
========================= */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 12px);
  background:#0b1726; color:#d8e8ff; border:1px solid #243b55;
  padding:8px 12px; border-radius:10px; opacity:0; transition:opacity .2s ease, transform .2s ease;
  z-index:2000; font-size:13px;
}
.toast.show{opacity:1; transform:translate(-50%, 0)}

/* =========================
   Utilities
========================= */
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =========================
   Responsive tweaks
========================= */
@media (max-width:520px){
  .thumb{height:220px}
  .toolbar{gap:8px}
}