/* ══════════════════════════════════════════════════════
   Admin Panel CSS — JargonBet v1.0
   ══════════════════════════════════════════════════════ */

/* ── Kök değişkenler ────────────────────────────────── */
:root {
  --adm-sidebar-w: 228px;
  --adm-bg:        #0a1220;
  --adm-surface:   #0d1829;
  --adm-card:      #131f33;
  --adm-border:    rgba(184,150,62,0.14);
  --adm-gold:      #B8963E;
  --adm-gold-glow: rgba(184,150,62,0.18);
  --adm-t1:        #dde4f0;
  --adm-t2:        #7a8aaa;
  --adm-danger:    #c0392b;
  --adm-success:   #27ae60;
  --adm-r:         8px;
}

/* ── GİRİŞ EKRANI ────────────────────────────────────── */
.adm-login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--adm-bg);
  padding: 24px;
}
.adm-login-box {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 18px;
  padding: 40px 32px;
  width: 100%; max-width: 340px;
  text-align: center;
  color: var(--adm-t1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.adm-login-logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 22px;
}
.adm-login-logo span { font-size: 1.2rem; font-weight: 800; color: var(--adm-gold); letter-spacing: 0.02em; }
.adm-login-box h2   { font-size: 1.4rem; margin: 0 0 6px; }
.adm-login-sub      { font-size: 0.82rem; color: var(--adm-t2); margin: 0 0 22px; }
.adm-login-hint     { font-size: 0.75rem; color: var(--adm-t2); margin-top: 14px; }

/* PIN noktaları */
.adm-pin-row { display: flex; justify-content: center; gap: 14px; margin-bottom: 22px; }
.pin-dot {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--adm-gold); background: transparent;
  transition: background .18s, transform .15s;
}
.pin-dot.filled { background: var(--adm-gold); transform: scale(1.2); }
.pin-dot.shake  { animation: adm-shake .45s ease; }
@keyframes adm-shake {
  0%,100%{ transform: translateX(0); }
  25%    { transform: translateX(-5px); }
  75%    { transform: translateX(5px); }
}

/* Numpad */
.adm-numpad { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; max-width: 228px; margin: 0 auto 14px; }
.numpad-btn {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 10px; color: var(--adm-t1);
  font-size: 1.15rem; font-weight: 600; padding: 13px;
  cursor: pointer; transition: background .14s, border-color .14s, transform .08s;
  line-height: 1;
}
.numpad-btn:hover  { background: var(--adm-gold-glow); border-color: var(--adm-gold); }
.numpad-btn:active { transform: scale(.92); }
.numpad-btn[data-val=""] { visibility: hidden; pointer-events: none; }
.adm-login-error { color: #e74c3c; font-size: 0.82rem; margin: 6px 0 0; }

/* ── KABUK ───────────────────────────────────────────── */
.adm-shell {
  display: flex; min-height: 100vh;
  background: var(--adm-bg); color: var(--adm-t1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Sidebar */
.adm-sidebar {
  width: var(--adm-sidebar-w);
  background: var(--adm-surface);
  border-right: 1px solid var(--adm-border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 300;
  transition: transform .25s ease;
  overflow-y: auto;
}
.adm-sidebar-head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--adm-border);
  flex-shrink: 0;
}
.adm-sidebar-head strong { display: block; font-size: 0.95rem; color: var(--adm-gold); line-height: 1.2; }
.adm-sidebar-head small  { font-size: 0.65rem; color: var(--adm-t2); font-weight: 400; }

.adm-nav { flex: 1; padding: 10px 8px; overflow-y: auto; }
.adm-nav-group { margin-bottom: 14px; }
.adm-nav-group:last-child { margin-bottom: 0; }
.adm-nav-group-label {
  padding: 6px 12px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--adm-t2);
  opacity: 0.55;
}
.adm-nav-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 11px;
  background: none; border: none; border-radius: var(--adm-r);
  color: var(--adm-t2); font-size: 0.85rem; font-weight: 500;
  cursor: pointer; text-align: left; margin-bottom: 2px;
  transition: background .14s, color .14s;
}
.adm-nav-btn .adm-ico svg { width: 17px; height: 17px; flex-shrink: 0; }
.adm-nav-btn:hover { background: var(--adm-gold-glow); color: var(--adm-t1); }
.adm-nav-btn.active {
  background: var(--adm-gold-glow); color: var(--adm-gold);
  border-left: 3px solid var(--adm-gold); padding-left: 8px;
}
.adm-logout {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 14px 16px;
  background: none; border: none; border-top: 1px solid var(--adm-border);
  color: #e74c3c; font-size: 0.85rem; font-weight: 500;
  cursor: pointer; transition: background .14s;
  flex-shrink: 0;
}
.adm-logout .adm-ico svg { width: 17px; height: 17px; }
.adm-logout:hover { background: rgba(231,76,60,.1); }

/* Body */
.adm-body {
  flex: 1; margin-left: var(--adm-sidebar-w);
  display: flex; flex-direction: column; min-height: 100vh;
}
.adm-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 56px;
  background: var(--adm-surface);
  border-bottom: 1px solid var(--adm-border);
  position: sticky; top: 0; z-index: 100;
}
.adm-ham {
  display: none; background: none; border: none;
  color: var(--adm-t2); cursor: pointer; padding: 4px;
}
.adm-ham .adm-ico svg { width: 20px; height: 20px; }
.adm-page-title { font-size: 0.95rem; font-weight: 600; flex: 1; margin: 0; }
.adm-back-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--adm-border);
  border-radius: 6px; color: var(--adm-gold);
  font-size: 0.78rem; font-weight: 600;
  padding: 6px 11px; cursor: pointer;
  transition: background .14s;
}
.adm-back-btn .adm-ico svg { width: 14px; height: 14px; }
.adm-back-btn:hover { background: var(--adm-gold-glow); }

.adm-content { flex: 1; padding: 22px; overflow-y: auto; }

/* ── DASHBOARD ───────────────────────────────────────── */
.adm-stat-row {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px;
}
.adm-stat-card {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 12px; padding: 18px 16px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.adm-stat-ico .adm-ico svg { width: 24px; height: 24px; color: var(--adm-gold); }
.adm-stat-card strong { font-size: 1.6rem; font-weight: 700; color: var(--adm-t1); }
.adm-stat-card small  { font-size: 0.72rem; color: var(--adm-t2); }

.adm-quick-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; margin-bottom: 20px;
}
.adm-quick-card {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 10px; color: var(--adm-t1);
  padding: 14px 14px; font-size: 0.84rem; font-weight: 500;
  cursor: pointer; display: flex; align-items: center; gap: 9px;
  transition: background .14s, border-color .14s;
  text-align: left;
}
.adm-quick-card .adm-qico .adm-ico svg { width: 18px; height: 18px; color: var(--adm-gold); }
.adm-quick-card:hover { background: var(--adm-gold-glow); border-color: var(--adm-gold); }

.adm-guide-box {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 12px; padding: 18px 20px;
}
.adm-guide-box h3 {
  font-size: 0.88rem; margin: 0 0 11px; color: var(--adm-gold);
  display: flex; align-items: center; gap: 7px;
}
.adm-guide-box h3 .adm-ico svg { width: 16px; height: 16px; }
.adm-guide-box ul { margin: 0; padding-left: 16px; color: var(--adm-t2); font-size: 0.82rem; line-height: 1.9; }
.adm-guide-box b  { color: var(--adm-t1); }
.adm-guide-box .adm-ico svg { width: 13px; height: 13px; vertical-align: middle; }

/* ── OYUN LİSTESİ ────────────────────────────────────── */
.adm-list-header { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.adm-search {
  flex: 1; padding: 9px 13px;
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: var(--adm-r); color: var(--adm-t1); font-size: 0.85rem;
  outline: none; transition: border-color .18s;
}
.adm-search:focus { border-color: var(--adm-gold); }
.adm-count { font-size: 0.78rem; color: var(--adm-t2); white-space: nowrap; }

.adm-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px,1fr));
  gap: 13px;
}
.adm-gc {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 11px; overflow: hidden;
  transition: border-color .18s, transform .15s;
  display: flex; flex-direction: column;
  position: relative;
}
.adm-gc:hover { border-color: rgba(184,150,62,.45); transform: translateY(-2px); }
.adm-gc.edited { border-color: rgba(39,174,96,.4); }

.adm-gc-thumb {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  background: #0d1829;
}
.adm-gc-img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-gc-letter {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 900; font-family: Georgia,serif;
  color: rgba(184,150,62,.35);
}
.adm-gc-badge {
  position: absolute; top: 6px; right: 6px;
  background: var(--adm-success); color: #fff;
  font-size: 0.6rem; font-weight: 700; padding: 2px 6px; border-radius: 4px;
}

.adm-gc-info { padding: 9px 10px 6px; flex: 1; }
.adm-gc-name { font-size: 0.8rem; font-weight: 600; color: var(--adm-t1); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-gc-prov { font-size: 0.68rem; color: var(--adm-t2); margin-bottom: 5px; }
.adm-gc-tags { display: flex; gap: 3px; flex-wrap: wrap; }
.adm-tag { font-size: 0.62rem; padding: 2px 5px; border-radius: 4px; font-weight: 600; }
.adm-tag-popular { background: rgba(139,26,26,.55); color: #f9a8a8; }
.adm-tag-new     { background: rgba(13,74,40,.55);  color: #7de8a8; }
.adm-tag-jackpot { background: rgba(122,94,24,.55); color: #f5d98a; }

.adm-gc-edit {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 7px; font-size: 0.75rem; font-weight: 600;
  background: none; border: none; border-top: 1px solid var(--adm-border);
  color: var(--adm-gold); cursor: pointer; transition: background .14s;
}
.adm-gc-edit .adm-ico svg { width: 13px; height: 13px; }
.adm-gc-edit:hover { background: var(--adm-gold-glow); }

/* ── DÜZENLEME MODALİ ────────────────────────────────── */
.adm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  z-index: 999; display: flex; align-items: center; justify-content: center;
  padding: 16px; animation: adm-fin .2s ease;
}
.adm-overlay.closing { animation: adm-fout .2s ease forwards; }
@keyframes adm-fin  { from{ opacity:0 } to{ opacity:1 } }
@keyframes adm-fout { from{ opacity:1 } to{ opacity:0 } }

.adm-modal {
  background: var(--adm-surface); border: 1px solid var(--adm-border);
  border-radius: 15px; width: 100%; max-width: 740px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: adm-slide .22s ease;
}
@keyframes adm-slide { from{ opacity:0;transform:translateY(18px) } to{ opacity:1;transform:none } }

.adm-mhd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--adm-border);
  font-size: 0.95rem; font-weight: 700;
}
.adm-mhd .adm-ico svg { width: 16px; height: 16px; color: var(--adm-gold); }
.adm-mclose {
  background: none; border: none; color: var(--adm-t2);
  font-size: 1.1rem; cursor: pointer; padding: 3px 8px; border-radius: 5px;
  transition: background .14s; line-height: 1;
}
.adm-mclose:hover { background: rgba(231,76,60,.15); color: #e74c3c; }

.adm-mbody {
  display: grid; grid-template-columns: 170px 1fr;
  overflow-y: auto; flex: 1;
}

/* Sol: önizleme */
.adm-mprev {
  padding: 18px 14px; border-right: 1px solid var(--adm-border);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--adm-bg);
}
.adm-prev-label { font-size: 0.68rem; color: var(--adm-t2); text-transform: uppercase; letter-spacing: .06em; }
.adm-prev-card  { width: 120px; }
.adm-prev-thumb {
  position: relative; aspect-ratio: 3/4; border-radius: 9px;
  overflow: hidden; background: var(--adm-card);
}
.adm-prev-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#prev-letter {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; font-weight: 900; font-family: Georgia,serif; color: rgba(184,150,62,.3);
}
.adm-prev-over {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  padding: 20px 7px 7px;
}
.adm-prev-over b     { display: block; font-size: 0.7rem; font-weight: 700; color: #fff; }
.adm-prev-over small { font-size: 0.6rem; color: rgba(255,255,255,.55); }

.adm-media-info { width: 100%; }
.adm-mi-meta { font-size: 0.68rem; color: var(--adm-t2); line-height: 1.7; margin-bottom: 7px; }
.adm-mi-meta span { display: block; }
.adm-no-med  { font-size: 0.7rem; color: var(--adm-t2); font-style: italic; }
.adm-del-med {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; padding: 6px 8px; border-radius: 6px;
  background: rgba(231,76,60,.1); border: 1px solid rgba(231,76,60,.3);
  color: #e74c3c; font-size: 0.7rem; font-weight: 600; cursor: pointer;
  transition: background .14s;
}
.adm-del-med .adm-ico svg { width: 12px; height: 12px; }
.adm-del-med:hover { background: rgba(231,76,60,.2); }

/* Sağ: form */
.adm-mform { padding: 18px 22px; overflow-y: auto; }

/* ── FORM ELEMANLARI ────────────────────────────────── */
.adm-fg { margin-bottom: 13px; }
.adm-fg label {
  display: block; font-size: 0.72rem; font-weight: 600;
  color: var(--adm-t2); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .04em;
}
.adm-fg input[type="text"],
.adm-fg input[type="number"],
.adm-fg input[type="password"],
.adm-fg select,
.adm-fg textarea {
  width: 100%; padding: 9px 11px;
  background: var(--adm-bg); border: 1px solid var(--adm-border);
  border-radius: var(--adm-r); color: var(--adm-t1); font-size: 0.86rem;
  outline: none; transition: border-color .18s; box-sizing: border-box;
  font-family: inherit;
}
.adm-fg input:focus,
.adm-fg select:focus,
.adm-fg textarea:focus { border-color: var(--adm-gold); }
.adm-fg select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8aaa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 32px; cursor: pointer; }

.adm-chk-row { display: flex; gap: 14px; flex-wrap: wrap; }
.adm-chk { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--adm-t1); cursor: pointer; }
.adm-chk input { accent-color: var(--adm-gold); cursor: pointer; }

/* Yükleme alanı */
.adm-drop {
  border: 2px dashed var(--adm-border); border-radius: 10px;
  padding: 20px 16px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color .18s, background .18s;
}

/* GIF URL Input ve Önizleme */
.adm-gif-preview {
  padding: 12px;
  background: var(--adm-bg2);
  border-radius: 10px;
  border: 2px solid var(--adm-gold);
  text-align: center;
}

.adm-gif-preview img {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

.adm-gif-preview img:hover {
  transform: scale(1.05);
}

.adm-btn-small {
  padding: 6px 12px;
  font-size: 0.8rem;
  background: var(--adm-danger);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.adm-btn-small:hover {
  background: var(--adm-danger-dark);
  transform: translateY(-1px);
}

.adm-drop .adm-ico svg { width: 26px; height: 26px; color: var(--adm-gold); }
.adm-drop strong { font-size: 0.83rem; color: var(--adm-t1); }
.adm-drop small  { font-size: 0.73rem; color: var(--adm-t2); }
.adm-drop:hover,
.adm-drop.over  { border-color: var(--adm-gold); background: var(--adm-gold-glow); }

.adm-prog {
  display: flex; align-items: center; gap: 9px;
  margin-top: 9px; background: var(--adm-card);
  border-radius: 7px; padding: 7px 11px;
}
.adm-prog-bar { flex: 1; height: 4px; background: var(--adm-gold); border-radius: 2px; transition: width .12s; }
#adm-ptxt { font-size: 0.72rem; color: var(--adm-t2); white-space: nowrap; }

/* Modal butonlar */
.adm-mbtns { display: flex; gap: 9px; margin-top: 4px; flex-wrap: wrap; }

/* ── BUTONLAR ────────────────────────────────────────── */
.adm-btn-gold {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--adm-gold); color: #0a1220;
  border: none; border-radius: 8px; padding: 9px 18px;
  font-size: 0.84rem; font-weight: 700; cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.adm-btn-gold .adm-ico svg { width: 14px; height: 14px; }
.adm-btn-gold:hover  { opacity: .87; }
.adm-btn-gold:active { transform: scale(.97); }

.adm-btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--adm-border);
  border-radius: 8px; color: var(--adm-t2); padding: 9px 15px;
  font-size: 0.84rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.adm-btn-ghost .adm-ico svg { width: 14px; height: 14px; }
.adm-btn-ghost:hover { background: var(--adm-gold-glow); color: var(--adm-t1); }

.adm-btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(192,57,43,.15); border: 1px solid rgba(192,57,43,.3);
  border-radius: 8px; color: #e74c3c; padding: 9px 16px;
  font-size: 0.84rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.adm-btn-danger .adm-ico svg { width: 14px; height: 14px; }
.adm-btn-danger:hover { background: rgba(192,57,43,.25); }

.adm-actions-bar { display: flex; gap: 10px; padding-top: 14px; flex-wrap: wrap; }
.adm-desc { font-size: 0.83rem; color: var(--adm-t2); margin: 0 0 18px; line-height: 1.5; }

/* ── Generic card container ── */
.adm-card {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 12px;
}
.adm-card h3 { font-size: 0.95rem; color: var(--adm-t1); margin: 0 0 12px; font-weight: 600; }
.adm-actions-inline { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ── Toggle switch ── */
.adm-switch { position: relative; display: inline-block; width: 48px; height: 26px; }
.adm-switch input { opacity: 0; width: 0; height: 0; }
.adm-switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #394b61; border-radius: 26px;
  transition: background .2s;
}
.adm-switch-slider::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; bottom: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.adm-switch input:checked + .adm-switch-slider { background: #4caf50; }
.adm-switch input:checked + .adm-switch-slider::before { transform: translateX(22px); }

/* ── SAYFA İÇERİĞİ ───────────────────────────────────── */
.adm-content-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.adm-content-row {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 11px; padding: 14px 16px;
}
.adm-content-label { font-size: 0.78rem; color: var(--adm-gold); font-weight: 600; margin-bottom: 11px; }
.adm-content-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

/* ── BANNERLAR ────────────────────────────────────────── */
.adm-banner-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 4px; }
.adm-banner-card {
  background: linear-gradient(180deg, var(--adm-card) 0%, rgba(19,31,51,0.8) 100%);
  border: 1px solid var(--adm-border);
  border-radius: 14px; padding: 18px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  transition: border-color .2s, box-shadow .2s;
}
.adm-banner-card:hover {
  border-color: rgba(184,150,62,0.4);
  box-shadow: 0 4px 20px rgba(184,150,62,0.08);
}
.adm-banner-preview {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 160px;
  background: linear-gradient(135deg, #0d1829 0%, #1a2744 100%);
  border: 1px dashed rgba(184,150,62,0.25);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
  font-size: 0.88rem;
  color: var(--adm-t2);
}
.adm-banner-preview img {
  width: 100%; max-height: 200px; object-fit: cover; display: block;
}
.adm-banner-preview .adm-ico svg { width: 28px; height: 28px; color: var(--adm-gold); opacity: 0.6; margin-right: 6px; }

/* File input — modern drag-drop style */
.adm-bi-file {
  display: block; width: 100%;
  padding: 14px 16px;
  background: rgba(184,150,62,0.05);
  border: 2px dashed rgba(184,150,62,0.35);
  border-radius: 10px;
  color: var(--adm-t1); font-size: 0.85rem; font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  box-sizing: border-box;
}
.adm-bi-file:hover {
  background: rgba(184,150,62,0.12);
  border-color: var(--adm-gold);
}
.adm-bi-file::file-selector-button {
  padding: 8px 14px; margin-right: 12px;
  background: var(--adm-gold); color: #0D1B2A;
  border: none; border-radius: 6px;
  font-weight: 700; font-size: 0.82rem;
  cursor: pointer;
  transition: opacity .15s;
}
.adm-bi-file::file-selector-button:hover { opacity: 0.85; }

/* Text & select inputs inside banner cards */
.adm-banner-card .adm-fg input:not([type="file"]),
.adm-banner-card .adm-fg select {
  width: 100%; padding: 10px 12px;
  background: #0d1829; color: var(--adm-t1);
  border: 1px solid var(--adm-border);
  border-radius: 8px; font-size: 0.88rem;
  transition: border-color .15s;
  box-sizing: border-box;
}
.adm-banner-card .adm-fg input:not([type="file"]):focus,
.adm-banner-card .adm-fg select:focus {
  border-color: var(--adm-gold); outline: none;
  box-shadow: 0 0 0 2px rgba(184,150,62,0.15);
}
.adm-banner-card .adm-fg label {
  display: block; font-size: 0.76rem; color: var(--adm-gold);
  font-weight: 600; margin-bottom: 6px; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.adm-banner-card .adm-content-inputs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.adm-banner-card .adm-content-inputs .adm-fg:nth-child(3),
.adm-banner-card .adm-content-inputs .adm-fg:nth-child(4) {
  grid-column: span 1;
}
.adm-banner-card .adm-content-inputs .adm-fg:last-child,
.adm-banner-card .adm-actions-inline {
  grid-column: 1 / -1;
}

/* ── MEDYA KÜTÜPHANESİ ───────────────────────────────── */
.adm-media-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.adm-media-cnt  { font-size: 0.82rem; color: var(--adm-t2); }
.adm-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px,1fr));
  gap: 13px;
}
.adm-mi-card {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 11px; overflow: hidden; position: relative;
}
.adm-mi-thumb { aspect-ratio: 3/4; overflow: hidden; position: relative; background: #0d1829; }
.adm-mi-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-gif-tag {
  position: absolute; top: 6px; right: 6px;
  background: #e74c3c; color: #fff; font-size: 0.6rem; font-weight: 700;
  padding: 2px 6px; border-radius: 4px;
}
.adm-mi-body { padding: 8px 10px; }
.adm-mi-name { font-size: 0.78rem; font-weight: 600; color: var(--adm-t1); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-mi-meta { font-size: 0.67rem; color: var(--adm-t2); }
.adm-mi-del {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,.65); border: none; border-radius: 5px;
  color: #e74c3c; padding: 5px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s;
}
.adm-mi-card:hover .adm-mi-del { opacity: 1; }
.adm-mi-del .adm-ico svg { width: 13px; height: 13px; }

/* ── TASARIM ─────────────────────────────────────────── */
.adm-design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 16px; margin-bottom: 4px;
}
.adm-design-card {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 12px; padding: 18px 20px;
}
.adm-design-card h3 {
  font-size: 0.88rem; font-weight: 600; color: var(--adm-gold);
  margin: 0 0 14px; display: flex; align-items: center; gap: 7px;
}
.adm-design-card h3 .adm-ico svg { width: 16px; height: 16px; }
.adm-design-preview-card { grid-column: 1 / -1; }

.adm-range {
  width: 100%; accent-color: var(--adm-gold);
  height: 4px; cursor: pointer; margin-top: 2px;
}
.adm-select { width: 100%; }

.adm-color-row { display: flex; align-items: center; gap: 9px; }
.adm-color-inp {
  width: 42px; height: 36px; border: 1px solid var(--adm-border);
  border-radius: 7px; padding: 2px; cursor: pointer; background: var(--adm-bg);
  flex-shrink: 0;
}
.adm-color-txt {
  flex: 1; padding: 8px 11px;
  background: var(--adm-bg); border: 1px solid var(--adm-border);
  border-radius: var(--adm-r); color: var(--adm-t1); font-size: 0.86rem;
  outline: none; font-family: monospace; transition: border-color .18s;
}
.adm-color-txt:focus { border-color: var(--adm-gold); }

/* Önizleme grid */
.adm-prev-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  transition: grid-template-columns .2s;
}
.adm-pg-card {
  position: relative; aspect-ratio: 3/4; border-radius: 9px;
  overflow: hidden; display: flex; align-items: flex-end;
}
.adm-pg-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adm-pg-card span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 900; font-family: Georgia,serif; color: rgba(184,150,62,.35);
}
.adm-pg-name {
  position: relative; z-index: 1; width: 100%;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  padding: 14px 6px 6px; font-size: 0.68rem; font-weight: 600; color: #fff;
}

/* ── AYARLAR ─────────────────────────────────────────── */
.adm-settings-wrap { display: flex; flex-direction: column; gap: 15px; max-width: 500px; }
.adm-settings-card {
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 12px; padding: 18px 22px;
}
.adm-settings-card h3 { margin: 0 0 6px; font-size: 0.95rem; color: var(--adm-t1); display: flex; align-items: center; gap: 7px; }
.adm-settings-card h3 .adm-ico svg { width: 16px; height: 16px; color: var(--adm-gold); }
.adm-settings-card p  { font-size: 0.82rem; color: var(--adm-t2); margin: 0 0 14px; }
.adm-danger-card { border-color: rgba(192,57,43,.3); }
.adm-danger-card h3 { color: #e74c3c; }
.adm-danger-card h3 .adm-ico svg { color: #e74c3c; }
.adm-fb { font-size: 0.8rem; margin-top: 7px; min-height: 1.2em; }
.adm-fb.ok  { color: var(--adm-success); }
.adm-fb.err { color: #e74c3c; }
.adm-stor-info { font-size: 0.82rem; color: var(--adm-t2); line-height: 2; }

/* Boş durum */
.adm-empty {
  text-align: center; padding: 52px 20px;
  color: var(--adm-t2); display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.85rem;
}
.adm-empty .adm-ico svg { width: 44px; height: 44px; opacity: .25; }

/* ── BONUS YÖNETİMİ ──────────────────────────────────── */
.adm-bonus-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; }
.adm-bonus-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.adm-bonus-list-head h3 { font-size: 0.9rem; color: var(--adm-t2); margin: 0; font-weight: 600; }
.adm-bonus-grid { display: flex; flex-direction: column; gap: 10px; }

.adm-bonus-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--adm-card); border: 1px solid var(--adm-border);
  border-radius: 10px; padding: 12px 16px;
  transition: border-color .15s;
}
.adm-bonus-row:hover { border-color: rgba(184,150,62,.3); }
.adm-bonus-row--inactive { opacity: 0.55; background: rgba(0,0,0,.15); }
.adm-bonus-row--inactive:hover { opacity: 0.75; border-color: rgba(255,255,255,.1); }
.adm-bonus-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.adm-bonus-info { flex: 1; min-width: 0; }
.adm-bonus-info strong { display: block; font-size: 0.875rem; color: var(--adm-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-bonus-type { font-size: 0.72rem; color: var(--adm-t2); }
.adm-bonus-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-bonus-meta span {
  font-size: 0.68rem; padding: 2px 7px; border-radius: 4px;
  background: rgba(184,150,62,.1); color: var(--adm-gold); font-weight: 600; white-space: nowrap;
}

/* Toggle switch */
.adm-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; cursor: pointer; }
.adm-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.adm-toggle-slider {
  position: absolute; inset: 0; border-radius: 11px;
  background: rgba(255,255,255,.1); transition: background .2s;
}
.adm-toggle-slider::before {
  content: ""; position: absolute;
  width: 16px; height: 16px; left: 3px; bottom: 3px;
  border-radius: 50%; background: var(--adm-t2);
  transition: transform .2s, background .2s;
}
.adm-toggle input:checked + .adm-toggle-slider { background: rgba(39,174,96,.3); border: 1px solid #27ae60; }
.adm-toggle input:checked + .adm-toggle-slider::before { transform: translateX(18px); background: #27ae60; }

.adm-bonus-edit-btn {
  background: none; border: none; color: var(--adm-gold); cursor: pointer;
  padding: 6px; border-radius: 6px; display: flex; align-items: center;
  transition: background .14s;
}
.adm-bonus-edit-btn:hover { background: var(--adm-gold-glow); }
.adm-bonus-edit-btn .adm-ico svg { width: 15px; height: 15px; }

.adm-mform textarea {
  width: 100%; padding: 9px 11px;
  background: var(--adm-bg); border: 1px solid var(--adm-border);
  border-radius: var(--adm-r); color: var(--adm-t1); font-size: 0.86rem;
  outline: none; transition: border-color .18s; box-sizing: border-box;
  font-family: inherit; resize: vertical;
}
.adm-mform textarea:focus { border-color: var(--adm-gold); }

/* ── TOAST ───────────────────────────────────────────── */
.adm-toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 9999;
  background: var(--adm-surface); border: 1px solid var(--adm-gold);
  color: var(--adm-t1); padding: 11px 18px; border-radius: 9px;
  font-size: 0.84rem; font-weight: 500;
  opacity: 0; transform: translateY(8px);
  transition: opacity .22s, transform .22s;
  max-width: 280px; pointer-events: none;
}
.adm-toast.show { opacity: 1; transform: translateY(0); }
.adm-toast.adm-toast-err { border-color: #e74c3c; }

/* İkon sarmalayıcısı (inline svg boyutu) */
.adm-ico { display: inline-flex; align-items: center; flex-shrink: 0; }
.adm-ico svg { width: 16px; height: 16px; display: block; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .adm-stat-row   { grid-template-columns: repeat(2,1fr); }
  .adm-quick-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .adm-sidebar {
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,.55);
  }
  .adm-sidebar.open { transform: translateX(0); }
  .adm-body   { margin-left: 0; }
  .adm-ham    { display: flex; }
  .adm-mbody  { grid-template-columns: 1fr; }
  .adm-mprev  { flex-direction: row; border-right: none; border-bottom: 1px solid var(--adm-border); align-items: flex-start; padding: 14px; }
  .adm-prev-card { width: 95px; flex-shrink: 0; }
  .adm-content-inputs { grid-template-columns: 1fr; }
  .adm-back-btn span { display: none; }
}
@media (max-width: 520px) {
  .adm-content { padding: 14px; }
  .adm-stat-row { grid-template-columns: 1fr 1fr; }
  .adm-quick-grid { grid-template-columns: 1fr; }
  .adm-game-grid  { grid-template-columns: repeat(2,1fr); }
  .adm-media-grid { grid-template-columns: repeat(2,1fr); }
  .adm-mbtns { flex-direction: column; }
  .adm-btn-gold, .adm-btn-ghost { width: 100%; justify-content: center; }
  .adm-prev-grid { grid-template-columns: repeat(3,1fr) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Admin — Players Section
═══════════════════════════════════════════════════════════════════════ */
.adm-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.adm-player-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.adm-player-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.adm-player-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--adm-border);
}

.adm-player-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a1200;
  flex-shrink: 0;
  text-transform: uppercase;
}

.adm-player-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--adm-text);
}

.adm-player-id {
  font-size: 0.72rem;
  color: var(--adm-muted);
  margin-top: 2px;
}

.adm-vip-badge {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
  color: #1a1200;
  white-space: nowrap;
}
.adm-vip-badge[data-level="0"] {
  background: rgba(255,255,255,0.1);
  color: var(--adm-muted);
}
.adm-vip-badge[data-level="1"] {
  background: linear-gradient(135deg, #607d8b 0%, #b0bec5 100%);
  color: #0d1117;
}
.adm-vip-badge[data-level="2"] {
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
  color: #1a1200;
}
.adm-vip-badge[data-level="3"] {
  background: linear-gradient(135deg, #4a148c 0%, #ce93d8 100%);
  color: #fff;
}

.adm-player-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--adm-border);
}

.adm-pstat {
  background: var(--adm-surface);
  padding: 10px 12px;
  text-align: center;
}
.adm-pstat-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--adm-gold);
}
.adm-pstat-lbl {
  font-size: 0.63rem;
  color: var(--adm-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Send bonus card */
.adm-send-bonus-card {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 24px;
}
.adm-send-bonus-card h3 {
  margin: 0 0 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--adm-gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

.adm-players-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.adm-players-form-row.single {
  grid-template-columns: 1fr;
}

.adm-select {
  width: 100%;
  background: var(--adm-bg);
  border: 1px solid var(--adm-border);
  border-radius: 8px;
  color: var(--adm-text);
  padding: 9px 12px;
  font-size: 0.85rem;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.adm-select:focus {
  border-color: var(--adm-gold);
}

/* Players section panels */
.adm-players-section {
  background: var(--adm-surface);
  border: 1px solid var(--adm-border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.adm-players-section h3 {
  margin: 0 0 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--adm-text);
  border-bottom: 1px solid var(--adm-border);
  padding-bottom: 10px;
}

/* Queue list */
.adm-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adm-queue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  font-size: 0.83rem;
}

.adm-queue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--adm-muted);
}
.adm-queue-item[data-status="pending"]   .adm-queue-dot { background: #ffd700; }
.adm-queue-item[data-status="active"]    .adm-queue-dot { background: #4caf50; }
.adm-queue-item[data-status="completed"] .adm-queue-dot { background: #90a4ae; }
.adm-queue-item[data-status="expired"]   .adm-queue-dot { background: #ef5350; }
.adm-queue-item[data-status="cancelled"] .adm-queue-dot { background: #78909c; }

.adm-queue-name { flex: 1; font-weight: 600; color: var(--adm-text); }
.adm-queue-amount { color: var(--adm-gold); font-weight: 700; }

.adm-queue-status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
}
.adm-qs-pending   { background: rgba(255,215,0,0.15); color: #ffd700; }
.adm-qs-active    { background: rgba(76,175,80,0.15); color: #81c784; }
.adm-qs-completed { background: rgba(144,164,174,0.15); color: #90a4ae; }
.adm-qs-expired   { background: rgba(239,83,80,0.15); color: #ef9a9a; }
.adm-qs-cancelled { background: rgba(120,144,156,0.12); color: #78909c; }

/* Responsive — players */
@media (max-width: 600px) {
  .adm-players-grid { grid-template-columns: 1fr; }
  .adm-players-form-row { grid-template-columns: 1fr; }
  .adm-player-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ── ANIMASYON SEÇİM BUTONLARI ───────────────────────── */
.adm-anim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.adm-anim-btn {
  background: var(--adm-card);
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--adm-t1);
}

.adm-anim-btn:hover {
  border-color: var(--adm-gold);
  background: var(--adm-gold-glow);
  transform: translateY(-2px);
}

.adm-anim-btn.active {
  border-color: var(--adm-gold);
  background: linear-gradient(135deg, var(--adm-gold-glow), rgba(184,150,62,0.25));
  box-shadow: 0 0 15px var(--adm-gold-glow);
}

.adm-anim-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.adm-anim-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

/* Önizleme kartları animasyonu */
.adm-pg-card {
  transition: animation 0.3s ease;
}

/* ───────────────────────────────────────────────────────────────────
   ⭐ TOP 10 KATALOG YÖNETİCİSİ
   ────────────────────────────────────────────────────────────────── */
.adm-top10-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
  padding: 18px 20px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(184,150,62,0.08), rgba(13,27,42,0.6));
  border: 1px solid rgba(184,150,62,0.25);
  border-radius: 14px;
}
.adm-top10-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}
.adm-top10-controls .adm-fb { flex-basis: 100%; margin: 0; }

.adm-top10-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}
.adm-top10-row {
  display: grid;
  grid-template-columns: 52px 120px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: var(--adm-card);
  border: 1px solid var(--adm-border);
  border-radius: 12px;
  transition: border-color .2s, transform .2s;
}
.adm-top10-row:hover {
  border-color: rgba(184,150,62,0.45);
  transform: translateY(-1px);
}
.adm-top10-rank {
  font-family: Georgia, serif;
  font-weight: 900;
  font-size: 1.35rem;
  text-align: center;
  color: #B8963E;
  background: rgba(184,150,62,0.12);
  border: 1px solid rgba(184,150,62,0.35);
  border-radius: 10px;
  padding: 10px 6px;
  letter-spacing: -0.02em;
}
.adm-top10-thumb {
  position: relative;
  width: 120px;
  height: 120px;
  background: #0a1422;
  border: 1px solid var(--adm-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.adm-top10-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.adm-top10-thumb-ph {
  color: rgba(255,255,255,0.22);
  font-size: 2rem;
}
.adm-top10-thumb-ph svg { width: 36px; height: 36px; }
.adm-top10-upbtn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184,150,62,0.92);
  color: #0D1B2A;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, transform .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.adm-top10-upbtn:hover { background: #d4aa4c; transform: scale(1.08); }
.adm-top10-upbtn svg { width: 15px; height: 15px; }
.adm-top10-del {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220,60,60,0.88);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s, transform .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.adm-top10-del:hover { background: #e24a4a; transform: scale(1.08); }
.adm-top10-del svg { width: 15px; height: 15px; }
.adm-top10-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.adm-top10-fields .adm-fg { margin: 0; }
.adm-top10-fields .adm-fg label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 3px;
  display: block;
}
.adm-top10-fields input,
.adm-top10-fields select {
  width: 100%;
  padding: 7px 10px;
  background: #0a1422;
  border: 1px solid var(--adm-border);
  border-radius: 7px;
  color: var(--adm-t1);
  font-size: 0.85rem;
  transition: border-color .15s;
}
.adm-top10-fields input:focus,
.adm-top10-fields select:focus {
  outline: none;
  border-color: #B8963E;
}

@media (max-width: 720px) {
  .adm-top10-list { grid-template-columns: 1fr; }
  .adm-top10-row {
    grid-template-columns: 52px 110px 1fr;
    gap: 10px;
    padding: 10px;
  }
  .adm-top10-thumb { width: 110px; height: 110px; }
  .adm-top10-controls { padding: 14px; }
  .adm-top10-actions { margin-left: 0; width: 100%; }
  .adm-top10-actions .adm-btn-gold,
  .adm-top10-actions .adm-btn-ghost { flex: 1; }
}