:root {
  --bg:      #060610;
  --surface: #0d0d1f;
  --surface2:#131326;
  --border:  rgba(139,92,246,0.15);
  --text:    #e2e8f0;
  --dim:     #64748b;
  --purple:  #8b5cf6;
  --purple2: #a78bfa;
  --cyan:    #06b6d4;
  --red:     #f87171;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; min-height:100vh; }

/* ── Nav ── */
.admin-nav {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px; background:rgba(6,6,16,0.95);
  border-bottom:1px solid var(--border); backdrop-filter:blur(12px);
}
.nav-brand { font-family:'Syne',sans-serif; font-size:16px; font-weight:800; }
.nav-brand span { color:var(--cyan); }

/* ── Main ── */
.admin-main { max-width:1100px; margin:0 auto; padding:40px 24px 80px; }
.admin-header { margin-bottom:32px; }
.admin-header h1 { font-family:'Syne',sans-serif; font-size:28px; font-weight:800; margin-bottom:6px; }
.admin-header p  { color:var(--dim); font-size:14px; }

/* ── Books Grid ── */
.books-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
@media(max-width:800px) { .books-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:500px) { .books-grid { grid-template-columns:1fr; } }

/* ── Slot Card ── */
.slot-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; cursor:pointer;
  transition:border-color 0.2s, transform 0.15s;
  position:relative;
}
.slot-card:hover { border-color:rgba(139,92,246,0.5); transform:translateY(-2px); }

/* Empty slot */
.slot-card.empty {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:48px 20px; text-align:center;
  border-style:dashed; min-height:220px;
}
.slot-empty-icon { font-size:36px; color:var(--dim); margin-bottom:10px; }
.slot-empty-label { font-weight:600; margin-bottom:4px; }
.slot-empty-sub   { font-size:12px; color:var(--dim); }

/* Filled slot */
.slot-cover {
  height:140px; background:var(--surface2);
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.slot-glyph { font-size:48px; }
.slot-info  { padding:14px 16px 16px; }
.slot-title { font-family:'Syne',sans-serif; font-size:15px; font-weight:700; margin-bottom:3px; }
.slot-tag   { font-size:11px; color:var(--cyan); margin-bottom:10px; }

/* Chapter bars */
.slot-chapters-bars { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.slot-ch-bar {
  height:4px; border-radius:2px;
  background:var(--surface2);
  overflow:hidden;
}
.slot-ch-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(to right, #22c55e, #eab308, #ef4444);
  transition:width 0.3s;
}
.slot-meta { font-size:11px; color:var(--dim); }
.slot-edit-btn {
  position:absolute; top:10px; right:10px;
  background:rgba(0,0,0,0.5); border-radius:6px;
  padding:4px 8px; font-size:11px; color:var(--dim);
}

/* ── Modals ── */
.modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(4,4,14,0.92); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-box {
  background:var(--surface); border:1px solid rgba(6,182,212,0.25);
  border-radius:16px; padding:36px; max-width:380px; width:100%; text-align:center;
}
.modal-icon  { font-size:32px; margin-bottom:10px; color:var(--cyan); }
.modal-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:800; margin-bottom:18px; }
.modal-input {
  width:100%; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; padding:12px 16px; font-size:14px; color:var(--text);
  outline:none; margin-bottom:10px; font-family:'Inter',sans-serif; text-align:center;
}
.modal-input:focus { border-color:var(--cyan); }
.modal-error { font-size:12px; color:var(--red); min-height:18px; margin-bottom:10px; }

/* ── Book Editor Modal ── */
.book-editor {
  max-width:680px; width:100%; text-align:left;
  max-height:90vh; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--surface2) transparent;
}
.editor-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:24px;
}
.editor-body { display:flex; flex-direction:column; gap:24px; }
.editor-section {}
.section-label {
  display:block; font-size:11px; font-weight:600; color:var(--dim);
  text-transform:uppercase; letter-spacing:0.08em; margin-bottom:8px;
}
.editor-footer {
  display:flex; justify-content:space-between;
  margin-top:28px; padding-top:20px; border-top:1px solid var(--border);
}

/* ── Cover Drop ── */
.cover-drop {
  width:100%; aspect-ratio:1/1; max-width:260px; border:2px dashed var(--border);
  border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
  transition:border-color 0.2s;
}
.cover-drop:hover,.cover-drop.drag-over { border-color:var(--cyan); }
.cover-drop img { width:100%; height:100%; object-fit:cover; }
.cover-placeholder {
  display:flex; flex-direction:column; align-items:center;
  gap:6px; color:var(--dim); font-size:13px;
}
.upload-status { font-size:12px; color:var(--cyan); margin-top:6px; min-height:16px; }

/* ── Inputs ── */
.text-input {
  width:100%; background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; padding:10px 14px; font-size:13px; color:var(--text);
  outline:none; font-family:'Inter',sans-serif; transition:border-color 0.2s;
}
.text-input:focus { border-color:var(--purple); }

/* ── Chapter Rows ── */
.chapter-row {
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.04);
}
.ch-row-num {
  width:24px; height:24px; border-radius:50%;
  background:var(--surface2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:var(--dim);
  flex-shrink:0; margin-top:9px;
}
.ch-row-body { flex:1; display:flex; flex-direction:column; gap:6px; }
.ch-title-input { }
.ch-row-audio {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.ch-audio-status {
  font-size:11px; color:var(--dim); padding:4px 8px;
  background:var(--surface2); border-radius:6px;
  white-space:nowrap; overflow:hidden; max-width:160px; text-overflow:ellipsis;
}
.ch-audio-status.has-audio { color:#22c55e; background:rgba(34,197,94,0.08); }
.btn-upload-audio {
  font-size:11px; color:var(--purple2); padding:4px 10px;
  background:rgba(139,92,246,0.1); border:1px solid rgba(139,92,246,0.2);
  border-radius:6px; cursor:pointer; white-space:nowrap;
  transition:background 0.15s;
}
.btn-upload-audio:hover { background:rgba(139,92,246,0.2); }
.ch-free-toggle {
  display:flex; align-items:center; gap:5px;
  font-size:11px; color:var(--dim); cursor:pointer;
  white-space:nowrap;
}
.ch-free-toggle input { accent-color:var(--cyan); }

.btn-add-chapter {
  margin-top:10px; background:none; border:1px dashed var(--border);
  border-radius:8px; padding:8px 16px; color:var(--dim);
  font-size:13px; cursor:pointer; width:100%;
  transition:border-color 0.2s, color 0.2s;
}
.btn-add-chapter:hover { border-color:var(--purple); color:var(--purple2); }

/* ── Buttons ── */
.btn-primary {
  background:var(--purple); color:#fff; border:none;
  border-radius:8px; padding:11px 22px; font-size:13px;
  font-weight:600; cursor:pointer; transition:background 0.15s;
}
.btn-primary:hover { background:var(--purple2); }
.btn-outline {
  background:none; border:1px solid var(--border); color:var(--dim);
  border-radius:8px; padding:8px 16px; font-size:13px; cursor:pointer;
  transition:border-color 0.2s;
}
.btn-outline:hover { border-color:var(--purple); color:var(--text); }
.btn-danger {
  background:none; border:1px solid rgba(248,113,113,0.3); color:var(--red);
  border-radius:8px; padding:11px 18px; font-size:13px; cursor:pointer;
  transition:background 0.15s;
}
.btn-danger:hover { background:rgba(248,113,113,0.1); }
.icon-btn {
  background:none; border:none; color:var(--dim); font-size:16px;
  cursor:pointer; padding:4px 8px; border-radius:6px;
  transition:color 0.15s;
}
.icon-btn:hover { color:var(--text); }
.ch-remove { flex-shrink:0; margin-top:6px; }

.book-desc {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
}

.admin-section { margin: 40px 0; }
.admin-section-header { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.admin-section-header h2 { font-family:'Syne',sans-serif; font-size:18px; color:#fff; margin:0; }
.btn-sm { padding:6px 14px; font-size:12px; }
.visitors-table { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; overflow:hidden; }
.v-table { width:100%; border-collapse:collapse; font-size:13px; color:rgba(255,255,255,0.85); }
.v-table thead { background:rgba(255,255,255,0.05); }
.v-table th { text-align:left; padding:10px 14px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,0.45); }
.v-table td { padding:10px 14px; border-top:1px solid rgba(255,255,255,0.05); }
.v-table tbody tr:hover { background:rgba(255,255,255,0.03); }

.settings-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:20px; }