:root { --bg:#0b0c10; --card:#111318; --text:#e9eef6; --muted:#aab3c2; --line:#202431; --btn:#2a6df4; }

body { margin:0; background:var(--bg); color:var(--text); font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; }

.wrap { max-width:1200px; margin:28px auto; padding:0 16px; }
h1 { font-size:20px; margin:0 0 14px; font-weight:650; }

.toolbar { display:flex; gap:10px; align-items:center; margin: 0 0 14px; }
.status { color:var(--muted); }

button {
  background:var(--btn); color:white; border:0; padding:10px 14px; border-radius:12px;
  font-weight:600; cursor:pointer; box-shadow: 0 8px 24px rgba(42,109,244,.22);
}
button:disabled { opacity:.6; cursor:not-allowed; }

.card { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }

table { width:100%; border-collapse:collapse; }
thead th {
  text-align:left; font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted); padding:12px 12px; border-bottom:1px solid var(--line);
}
tbody td { padding:12px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:hover { background: rgba(255,255,255,.02); }

.imgcell { width: 86px; }
.thumb {
  width:56px; height:56px; object-fit:cover; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, box-shadow .12s ease;
  background:#0f1117;
}
.thumb:hover {
  transform: scale(3);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  position: relative;
  z-index: 999;
}

.pill { display:inline-block; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:var(--muted); }
.right { text-align:right; white-space:nowrap; }
.nowrap { white-space:nowrap; }
.small { font-size:12px; color:var(--muted); }

/* --- Overlay preview (центр экрана) --- */
.overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
}
.overlay.is-open { display: block; }

.overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.overlay__img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: min(92vw, 900px);
  max-height: 86vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  background: #0f1117;
}

/* Убираем прежний zoom-on-hover в ячейке */
.thumb:hover {
  transform: none;
  box-shadow: none;
  position: static;
  z-index: auto;
}

/* --- Checkbox column --- */
.checkcell { width: 90px; }
.rowcheck {
  width: 18px;
  height: 18px;
  accent-color: var(--btn);
  cursor: pointer;
}

/* --- Highlight checked rows --- */
tr.is-checked td {
  background: rgba(42,109,244,.10);
}
tr.is-checked:hover td {
  background: rgba(42,109,244,.14);
}

.namecell{
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select{
  padding: 10px 40px 10px 12px;          /* место под стрелку справа */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  outline: none;
  line-height: 1.2;
  cursor: pointer;

  /* убираем дефолтную стрелку и рисуем свою */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(233,238,246,.9) 50%),
    linear-gradient(135deg, rgba(233,238,246,.9) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.12), rgba(255,255,255,.12));
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%,
    calc(100% - 34px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 60%;
  background-repeat: no-repeat;

  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.select:hover{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
}

.select:focus{
  border-color: rgba(42,109,244,.85);
  box-shadow: 0 0 0 4px rgba(42,109,244,.22);
}

.select option{
  background: #111318; /* чтобы список не был белым */
  color: var(--text);
}