/* admin.css — стиль админки в стиле игры TECNO AI EXPERT */

:root{
  --white: #ffffff;
  --glass: rgba(255,255,255,0.10);
  --glass-strong: rgba(255,255,255,0.14);
  --border: rgba(255,255,255,0.18);
  --shadow: rgba(0,0,0,0.25);
  --text: rgba(255,255,255,0.95);
  --muted: rgba(255,255,255,0.72);
  --muted2: rgba(255,255,255,0.55);
  --gold1: #FFD700;
  --gold2: #FFA500;
  --blue1: #6a11cb;
  --blue2: #2575fc;
  --cardFront1:#5959DC;
  --cardFront2:#020227;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  min-height:100vh;
  background:
    linear-gradient(135deg, rgba(106, 17, 203, 0.85) 0%, rgba(37, 117, 252, 0.85) 100%),
    url('/background.png') no-repeat center center;
  background-size: cover;
  padding: 20px;
}

.wrap{
  max-width: 1280px;
  margin: 0 auto;
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom: 16px;
}

.brand-title{
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.9;
  font-size: 12px;
  text-transform: uppercase;
}

h1{
  margin: 4px 0 6px;
  font-size: 2.0rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.35);
}

.sub{
  color: var(--muted);
  max-width: 760px;
}

.top-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.me{
  text-align:right;
  font-size: 14px;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
}

/* Tabs */
.tabs{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  margin: 10px 0 14px;
}

.tab{
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 18px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 4px 10px var(--shadow);
  backdrop-filter: blur(6px);
}

.tab:hover{
  transform: translateY(-1px);
  background: var(--glass-strong);
}

.tab.active{
  border-color: rgba(255, 215, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(255,215,0,0.18), 0 6px 14px rgba(0,0,0,0.25);
}

/* Panels */
.panel{
  display:none;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  backdrop-filter: blur(8px);
}

.panel.active{ display:block; }

.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}

h2{
  margin:0;
  font-size: 1.15rem;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.25);
}

.panel-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.panel-actions-wrap{
  flex-wrap: wrap;
  justify-content: flex-end;
}

.small-hint-inline{
  color: var(--muted2);
  font-size: 13px;
  margin: 6px 0;
}

/* Controls */
.btn{
  border: none;
  padding: 10px 14px;
  border-radius: 18px;
  cursor: pointer;
  color: #333;
  font-weight: 700;
  background: linear-gradient(45deg, var(--gold1) 0%, var(--gold2) 100%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.30);
}

.btn.secondary{
  color: var(--text);
  font-weight: 600;
  background: linear-gradient(45deg, rgba(89,89,220,0.65) 0%, rgba(2,2,39,0.75) 100%);
  border: 1px solid rgba(255,255,255,0.22);
}

.btn.danger{
  color: var(--text);
  font-weight: 700;
  background: linear-gradient(45deg, rgba(255,70,70,0.75) 0%, rgba(150,0,0,0.78) 100%);
  border: 1px solid rgba(255,255,255,0.22);
}

.btn:disabled{ opacity:.65; cursor:not-allowed; transform:none; }

.input, select, textarea{
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 14px;
  padding: 9px 11px;
  outline:none;
  backdrop-filter: blur(6px);
}

.input.small{ max-width: 220px; }

textarea{ min-height: 74px; resize: vertical; max-width: 760px; }

.table-wrap{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.12);
}

.table{
  width:100%;
  border-collapse: collapse;
  min-width: 1200px;
}

.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  vertical-align: top;
}

.table th{
  position: sticky;
  top: 0;
  background: rgba(2,2,39,0.70);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  text-align: left;
}

.row-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  align-items:center;
}

.small{
  font-size: 13px;
  color: var(--muted);
}

.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  background: rgba(2,2,39,0.80);
  border: 1px solid rgba(255,215,0,0.45);
  padding: 12px 14px;
  border-radius: 14px;
  max-width: 420px;
  backdrop-filter: blur(8px);
}

/* Segmented */
.segmented{
  display:flex;
  gap:6px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 16px;
  background: rgba(0,0,0,0.12);
}

.seg{
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor:pointer;
}

.seg.active{
  border-color: rgba(255,215,0,0.55);
  background: rgba(255,215,0,0.12);
}

/* Drag & drop */
.drag-handle{
  cursor: grab;
  user-select:none;
  opacity: .9;
  font-size: 18px;
  line-height: 1;
}

tr.dragging{ opacity: 0.35; }
tr.drop-hint{ outline: 2px dashed rgba(255,215,0,0.55); outline-offset: -6px; }

/* Pager */
.pager{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin: 8px 0 10px;
}

/* Mobile tweaks */
@media (max-width: 680px){
  body{ padding: 12px; }
  .top{ flex-direction:column; align-items:stretch; }
  .top-actions{ align-items:stretch; }
  .me{ text-align:left; }
  .panel-head{ flex-direction:column; align-items:stretch; }
  .panel-actions{ justify-content: flex-start; }
  .input, select, textarea{ max-width: 100%; }
  .table{ min-width: 980px; }
}