/* ================================================================
   AnimeNebula Admin — Dashboard CSS
   Clean, utilitarian dark dashboard
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --bg:       #090C14;
  --sidebar:  #0D1220;
  --surface:  #111827;
  --card:     #151F2E;
  --raised:   #1A263A;
  --border:   rgba(255,255,255,0.07);
  --accent:   #E63946;
  --accent2:  #4FC3F7;
  --success:  #10B981;
  --warn:     #F59E0B;
  --t1: #F0F4FF;
  --t2: #8B9DC3;
  --t3: #4A5A7A;
  --t4: #2A3550;
  --sidebar-w: 240px;
  --r: 8px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--t1); font-size:14px; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--raised); border-radius:2px; }
input,textarea,select,button { font-family:inherit; }
a { color:inherit; text-decoration:none; }

/* ── LOGIN PAGE ────────────────────────────────────────────── */
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 80% 80% at 50% 0%, rgba(230,57,70,.08) 0%, transparent 60%);
  padding:1rem;
}
.login-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:2.5rem; width:100%; max-width:400px;
  box-shadow:0 24px 80px rgba(0,0,0,.5);
  animation:popIn .4s ease both;
}
@keyframes popIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }

.login-logo {
  display:flex; align-items:center; gap:.6rem; margin-bottom:2rem; justify-content:center;
}
.login-logo-icon { width:40px; height:40px; border-radius:10px; background:linear-gradient(135deg,var(--accent),#FF8C00); display:flex; align-items:center; justify-content:center; font-size:1.3rem; box-shadow:0 0 20px rgba(230,57,70,.4); }
.login-logo-text { font-family:'JetBrains Mono',monospace; font-size:1.1rem; font-weight:600; color:var(--t1); }
.login-logo-badge { background:var(--raised); border:1px solid var(--border); color:var(--accent2); font-size:.65rem; font-weight:600; padding:.15rem .5rem; border-radius:4px; letter-spacing:.5px; }

.login-title { font-size:1.35rem; font-weight:700; color:var(--t1); text-align:center; margin-bottom:.25rem; }
.login-sub   { font-size:.82rem; color:var(--t3); text-align:center; margin-bottom:1.75rem; }

.field { margin-bottom:1rem; }
.field label { display:block; font-size:.75rem; font-weight:600; color:var(--t2); margin-bottom:.4rem; letter-spacing:.3px; }
.field input {
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:.65rem .9rem; color:var(--t1); font-size:.9rem; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus { border-color:rgba(230,57,70,.5); box-shadow:0 0 0 3px rgba(230,57,70,.1); }
.field input::placeholder { color:var(--t4); }

.btn-login {
  width:100%; padding:.75rem; border-radius:var(--r); border:none; cursor:pointer;
  background:var(--accent); color:white; font-size:.95rem; font-weight:700;
  transition:all .2s; margin-top:.5rem;
  box-shadow:0 0 20px rgba(230,57,70,.3);
}
.btn-login:hover { background:#FF4D5A; box-shadow:0 0 30px rgba(230,57,70,.45); }
.btn-login:disabled { opacity:.6; cursor:not-allowed; }

.login-error {
  background:rgba(230,57,70,.12); border:1px solid rgba(230,57,70,.3);
  color:#FF8080; font-size:.82rem; padding:.65rem .9rem; border-radius:var(--r);
  margin-bottom:1rem; display:none;
}

/* ── ADMIN SHELL ───────────────────────────────────────────── */
.admin-shell { display:none; height:100vh; }
.admin-shell.visible { display:flex; }

/* Sidebar */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--sidebar); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.sidebar-logo {
  display:flex; align-items:center; gap:.6rem;
  padding:1.1rem 1.25rem; border-bottom:1px solid var(--border);
}
.sidebar-logo-icon { width:30px; height:30px; border-radius:7px; background:linear-gradient(135deg,var(--accent),#FF8C00); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.sidebar-logo-text { font-family:'JetBrains Mono',monospace; font-size:.9rem; font-weight:600; }
.sidebar-logo-badge { margin-left:auto; background:rgba(230,57,70,.15); color:var(--accent); font-size:.6rem; font-weight:700; padding:.15rem .45rem; border-radius:4px; letter-spacing:.5px; }

.sidebar-section { padding:.75rem 0; border-bottom:1px solid var(--border); }
.sidebar-section-label { font-size:.62rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--t4); padding:0 1.25rem .4rem; }

.sidebar-item {
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem 1.25rem; font-size:.83rem; color:var(--t2); cursor:pointer;
  transition:all .15s; border-left:2px solid transparent;
}
.sidebar-item:hover { color:var(--t1); background:rgba(255,255,255,.03); }
.sidebar-item.active { color:var(--t1); background:rgba(230,57,70,.08); border-left-color:var(--accent); }
.sidebar-item .icon { width:16px; height:16px; flex-shrink:0; opacity:.7; }
.sidebar-item.active .icon { opacity:1; }
.sidebar-badge {
  margin-left:auto; background:var(--accent); color:white;
  font-size:.6rem; font-weight:700; padding:.1rem .45rem; border-radius:50px;
}

.sidebar-footer {
  margin-top:auto; padding:1rem 1.25rem; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:.6rem;
}
.sidebar-admin-avatar {
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#FF8C00);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; flex-shrink:0;
}
.sidebar-admin-name { font-size:.8rem; font-weight:600; color:var(--t1); }
.sidebar-admin-role { font-size:.65rem; color:var(--t3); }
.sidebar-logout {
  margin-left:auto; background:none; border:none; color:var(--t3); cursor:pointer;
  padding:.25rem; border-radius:4px; transition:color .15s;
}
.sidebar-logout:hover { color:#FF6B6B; }

/* Main area */
.main-area {
  flex:1; overflow-y:auto; display:flex; flex-direction:column;
}

/* Topbar */
.topbar {
  height:52px; background:var(--sidebar); border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 1.5rem; gap:1rem;
  flex-shrink:0;
}
.topbar-title { font-size:1rem; font-weight:700; color:var(--t1); }
.topbar-breadcrumb { font-size:.78rem; color:var(--t3); }
.topbar-actions { margin-left:auto; display:flex; align-items:center; gap:.5rem; }

/* Content area */
.content { flex:1; padding:1.5rem; }

/* ── STATS CARDS ───────────────────────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; margin-bottom:2rem; }
.stat-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:1.25rem; transition:border-color .2s;
}
.stat-card:hover { border-color:rgba(255,255,255,.12); }
.stat-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:.85rem; }
.stat-value { font-family:'JetBrains Mono',monospace; font-size:1.75rem; font-weight:600; color:var(--t1); line-height:1; margin-bottom:.25rem; }
.stat-label { font-size:.75rem; color:var(--t3); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem 1.1rem; border-radius:var(--r); border:none; cursor:pointer;
  font-family:'Outfit',sans-serif; font-size:.82rem; font-weight:600;
  transition:all .15s; white-space:nowrap;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--accent); color:white; }
.btn-primary:hover { background:#FF4D5A; }
.btn-secondary { background:var(--raised); color:var(--t1); border:1px solid var(--border); }
.btn-secondary:hover { border-color:rgba(255,255,255,.15); }
.btn-success { background:rgba(16,185,129,.15); color:var(--success); border:1px solid rgba(16,185,129,.3); }
.btn-success:hover { background:rgba(16,185,129,.25); }
.btn-danger { background:rgba(230,57,70,.12); color:var(--accent); border:1px solid rgba(230,57,70,.3); }
.btn-danger:hover { background:rgba(230,57,70,.22); }
.btn-ghost { background:transparent; color:var(--t2); border:1px solid var(--border); }
.btn-ghost:hover { color:var(--t1); border-color:rgba(255,255,255,.15); }
.btn-sm { padding:.35rem .7rem; font-size:.75rem; }
.btn-icon { width:30px; height:30px; padding:0; justify-content:center; border-radius:6px; }
.btn:disabled { opacity:.4; cursor:not-allowed; }

/* ── TABLES ─────────────────────────────────────────────────── */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.table-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border); gap:.75rem; flex-wrap:wrap;
}
.table-title { font-size:.9rem; font-weight:700; color:var(--t1); }
.table-search {
  background:var(--card); border:1px solid var(--border); border-radius:6px;
  padding:.4rem .8rem; color:var(--t1); font-size:.8rem; outline:none; width:200px;
  transition:border-color .2s;
}
.table-search:focus { border-color:rgba(79,195,247,.4); }
.table-search::placeholder { color:var(--t4); }

table { width:100%; border-collapse:collapse; }
thead th {
  text-align:left; font-size:.68rem; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--t3);
  padding:.7rem 1.25rem; background:var(--card);
  border-bottom:1px solid var(--border);
}
tbody tr { border-bottom:1px solid rgba(255,255,255,.03); transition:background .15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(255,255,255,.02); }
tbody td { padding:.8rem 1.25rem; font-size:.83rem; color:var(--t2); vertical-align:middle; }
tbody td.bold { color:var(--t1); font-weight:600; }

/* ── STATUS BADGES ──────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.18rem .55rem; border-radius:4px;
  font-size:.65rem; font-weight:700; letter-spacing:.4px;
}
.badge-ongoing   { background:rgba(230,57,70,.12);  color:#FF6B6B;  border:1px solid rgba(230,57,70,.25); }
.badge-completed { background:rgba(79,195,247,.1);  color:var(--accent2); border:1px solid rgba(79,195,247,.25); }
.badge-upcoming  { background:rgba(245,158,11,.1);  color:var(--warn); border:1px solid rgba(245,158,11,.25); }
.badge-published { background:rgba(16,185,129,.1);  color:var(--success); border:1px solid rgba(16,185,129,.25); }
.badge-draft     { background:rgba(255,255,255,.05); color:var(--t3); border:1px solid var(--border); }

/* ── FORMS / PANELS ─────────────────────────────────────────── */
.panel {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden;
}
.panel-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
}
.panel-title { font-size:.9rem; font-weight:700; }
.panel-body  { padding:1.25rem; }

.form-row { display:grid; gap:1rem; margin-bottom:1rem; }
.form-row.cols-2 { grid-template-columns:1fr 1fr; }
.form-row.cols-3 { grid-template-columns:1fr 1fr 1fr; }

.form-group { display:flex; flex-direction:column; gap:.35rem; }
.form-label { font-size:.72rem; font-weight:600; color:var(--t2); letter-spacing:.3px; }
.form-control {
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  padding:.6rem .85rem; color:var(--t1); font-size:.85rem; outline:none;
  transition:border-color .2s, box-shadow .2s; box-sizing:border-box;
}
.form-control:focus { border-color:rgba(79,195,247,.4); box-shadow:0 0 0 3px rgba(79,195,247,.08); }
.form-control::placeholder { color:var(--t4); }
.form-control[readonly] { color:var(--t3); cursor:not-allowed; }

textarea.form-control { resize:vertical; min-height:90px; line-height:1.6; width:100%; }
select.form-control { cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5A7A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; padding-right:2.25rem; }

.form-hint { font-size:.7rem; color:var(--t4); margin-top:.2rem; }
.form-error { font-size:.7rem; color:var(--accent); margin-top:.2rem; }

/* Checkbox / Toggle */
.toggle-row { display:flex; align-items:center; gap:.75rem; }
.toggle { position:relative; width:36px; height:20px; cursor:pointer; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; border-radius:10px;
  background:var(--raised); border:1px solid var(--border);
  transition:.2s;
}
.toggle-slider::before {
  content:''; position:absolute;
  width:14px; height:14px; border-radius:50%;
  left:2px; bottom:2px; background:var(--t3);
  transition:.2s;
}
.toggle input:checked + .toggle-slider { background:var(--accent); border-color:var(--accent); }
.toggle input:checked + .toggle-slider::before { transform:translateX(16px); background:white; }
.toggle-label { font-size:.82rem; color:var(--t2); cursor:pointer; }

/* Genre checkboxes */
.genre-check-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.4rem; }
.genre-check {
  display:flex; align-items:center; gap:.4rem;
  background:var(--card); border:1px solid var(--border); border-radius:6px;
  padding:.4rem .65rem; cursor:pointer; transition:all .15s;
}
.genre-check:hover { border-color:rgba(79,195,247,.3); }
.genre-check input { accent-color:var(--accent2); }
.genre-check span { font-size:.78rem; color:var(--t2); }

/* Image preview */
.img-preview {
  width:80px; height:113px; object-fit:cover; border-radius:6px;
  border:1px solid var(--border); display:none; margin-top:.5rem;
}
.img-preview.banner { width:200px; height:56px; }

/* Tabs */
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
.tab {
  padding:.55rem 1rem; font-size:.82rem; font-weight:500; color:var(--t3); cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .15s;
}
.tab:hover { color:var(--t1); }
.tab.active { color:var(--t1); border-bottom-color:var(--accent); }

/* Toast */
.toast-stack { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.4rem; }
.toast {
  display:flex; align-items:center; gap:.6rem;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:.65rem 1rem; min-width:240px;
  box-shadow:0 8px 32px rgba(0,0,0,.5); font-size:.83rem;
  animation:toastIn .3s ease both;
}
.toast.success { border-left:3px solid var(--success); }
.toast.error   { border-left:3px solid var(--accent); }
.toast.info    { border-left:3px solid var(--accent2); }
@keyframes toastIn { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:none} }

/* Empty state */
.empty { text-align:center; padding:3rem 1rem; color:var(--t3); }
.empty-icon { font-size:2.5rem; margin-bottom:.75rem; }
.empty-text { font-size:.875rem; color:var(--t2); margin-bottom:.4rem; }
.empty-sub  { font-size:.78rem; }

/* Loading */
.spinner { width:24px; height:24px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.loading-row { display:flex; align-items:center; justify-content:center; padding:3rem; gap:.75rem; color:var(--t3); font-size:.85rem; }

/* Confirm modal */
.confirm-overlay {
  position:fixed; inset:0; z-index:800;
  background:rgba(0,0,0,.75); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
}
.confirm-overlay.open { display:flex; }
.confirm-box {
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:1.75rem; max-width:380px; width:100%;
  box-shadow:0 16px 60px rgba(0,0,0,.5); animation:popIn .3s ease;
}
.confirm-title { font-size:1rem; font-weight:700; margin-bottom:.5rem; }
.confirm-desc  { font-size:.85rem; color:var(--t2); line-height:1.6; margin-bottom:1.5rem; }
.confirm-actions { display:flex; gap:.5rem; justify-content:flex-end; }

/* ================================================================
   RESPONSIVE — Complete breakpoint system
   ================================================================ */

/* ── Sidebar mobile toggle ── */
.sidebar-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:499; backdrop-filter:blur(4px);
}
.sidebar-overlay.open { display:block; }
.topbar-menu-btn {
  display:none; background:none; border:none; color:var(--t2);
  cursor:pointer; padding:.4rem; border-radius:6px;
  transition:color .15s;
}
.topbar-menu-btn:hover { color:var(--t1); }

/* ── Anime form wrapper ── */
.anime-form-wrap  { max-width:900px; width:100%; }
.genre-page-wrap  { max-width:100%; width:100%; }

/* ── Form tab pills (horizontal scroll on mobile) ── */
.form-tabs-wrap {
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  margin-bottom:1.5rem; border-bottom:1px solid var(--border);
}
.form-tabs-wrap::-webkit-scrollbar { display:none; }
.form-tabs-wrap .tabs {
  display:flex; min-width:max-content;
  border-bottom:none; margin-bottom:0; gap:0;
}
.form-tabs-wrap .tab {
  display:flex; align-items:center; gap:.45rem;
  padding:.6rem 1.1rem; white-space:nowrap;
  border-radius:0;
}

/* ── Basic info grid ── */
.anime-basic-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.anime-basic-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; margin-bottom:1rem; }
.anime-basic-grid-1 { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; }

/* ── Media upload grid ── */
.media-upload-grid {
  display:grid; grid-template-columns:minmax(0,220px) 1fr;
  gap:1.5rem; margin-bottom:1rem; align-items:start;
}

/* ── Genre check grid ── */
.genre-check-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.5rem;
}
.genre-check {
  display:flex; align-items:center; gap:.5rem;
  background:var(--card); border:1px solid var(--border); border-radius:8px;
  padding:.55rem .75rem; cursor:pointer; transition:all .15s;
  user-select:none;
}
.genre-check:hover  { border-color:rgba(79,195,247,.35); background:rgba(79,195,247,.05); }
.genre-check:has(input:checked) {
  border-color:rgba(79,195,247,.6); background:rgba(79,195,247,.1);
}
.genre-check input { accent-color:var(--accent2); width:14px; height:14px; flex-shrink:0; }
.genre-check span  { font-size:.8rem; color:var(--t1); }

/* ── Toggle settings max-width ── */
.anime-settings-inner { max-width:480px; }

/* ── Genre page ── */
.genre-add-form {
  display:flex; gap:.65rem; align-items:stretch;
}
.genre-chip-grid {
  display:flex; flex-wrap:wrap; gap:.5rem;
  padding:1.1rem 1.25rem;
}
.genre-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--raised); border:1px solid var(--border);
  border-radius:8px; padding:.4rem .85rem;
  transition:border-color .15s;
}
.genre-chip:hover { border-color:rgba(230,57,70,.3); }
.genre-chip-name { font-size:.82rem; color:var(--t1); font-weight:500; }
.genre-chip-del {
  background:none; border:none; color:var(--t4);
  cursor:pointer; font-size:.8rem; padding:0; line-height:1;
  transition:color .15s; display:flex; align-items:center;
}
.genre-chip-del:hover { color:var(--accent); }

/* ── Form footer actions ── */
.form-actions {
  display:flex; align-items:center; gap:.75rem;
  margin-top:1.75rem; padding-top:1.25rem;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.form-actions .btn-ml { margin-left:auto; }

/* ── Section label in form ── */
.form-section-label {
  font-size:.68rem; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--t3);
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.75rem; padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}
.form-section-label::before {
  content:''; width:3px; height:14px; border-radius:2px;
  background:var(--accent); display:block;
}

/* ── Security badge in media tab ── */
.security-info-bar {
  display:flex; align-items:flex-start; gap:.65rem;
  background:rgba(16,185,129,.05); border:1px solid rgba(16,185,129,.18);
  border-radius:var(--r); padding:.8rem 1rem;
  font-size:.75rem; color:var(--t2); line-height:1.7;
  margin-top:.75rem;
}
.security-info-bar .si-icon {
  font-size:1rem; flex-shrink:0; margin-top:.05rem;
}

/* ──────────────────────────────────────────────────────────────
   BREAKPOINT: ≤960px — tablet portrait
   ────────────────────────────────────────────────────────────── */
@media(max-width:960px) {
  .media-upload-grid {
    grid-template-columns:minmax(0,180px) 1fr;
  }
}

/* ──────────────────────────────────────────────────────────────
   BREAKPOINT: ≤768px — mobile / small tablet
   ────────────────────────────────────────────────────────────── */
@media(max-width:768px) {
  /* Sidebar */
  .sidebar { display:none; }
  .sidebar.mobile-open {
    display:flex; position:fixed; inset:0; right:auto;
    width:var(--sidebar-w); z-index:500;
  }
  .topbar-menu-btn { display:flex; }

  /* Content */
  .content { padding:.85rem; }

  /* Form grids → single column */
  .anime-basic-grid-2,
  .anime-basic-grid-3 { grid-template-columns:1fr; }

  /* Media upload → stack vertically */
  .media-upload-grid { grid-template-columns:1fr; }

  /* Genre check → 2 cols */
  .genre-check-grid { grid-template-columns:repeat(2,1fr); }

  /* Toggle settings full width */
  .anime-settings-inner { max-width:100%; }

  /* Genre add form */
  .genre-add-form { flex-direction:column; }
  .genre-add-form .btn { width:100%; }

  /* Form actions wrap */
  .form-actions { gap:.5rem; }
  .form-actions .btn-ml { margin-left:0; width:100%; justify-content:center; }

  /* Tabs scrollable */
  .form-tabs-wrap .tab { padding:.55rem .85rem; font-size:.78rem; }

  /* Form legacy fallback */
  .form-row.cols-2, .form-row.cols-3 { grid-template-columns:1fr; }
}

/* ──────────────────────────────────────────────────────────────
   BREAKPOINT: ≤480px — small phone
   ────────────────────────────────────────────────────────────── */
@media(max-width:480px) {
  .content { padding:.65rem; }

  .genre-check-grid { grid-template-columns:repeat(2,1fr); }
  .genre-chip-grid  { padding:.75rem; }

  .anime-basic-grid-2,
  .anime-basic-grid-3 { gap:.65rem; }

  .form-actions { flex-direction:column; align-items:stretch; }
  .form-actions .btn { width:100%; justify-content:center; }
  .form-actions .btn-ml { margin-left:0; }
}

/* ================================================================
   MEDIA UPLOAD — Secure Image Upload + External URL
   ================================================================ */

/* Upload zone */
.media-upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--r);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
  background: var(--card);
}
.media-upload-zone:hover,
.media-upload-zone.drag-over {
  border-color: rgba(79,195,247,.5);
  background: rgba(79,195,247,.04);
}
.media-upload-zone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.media-upload-icon { font-size: 2rem; margin-bottom: .5rem; color: var(--t3); }
.media-upload-label { font-size: .85rem; font-weight: 600; color: var(--t2); margin-bottom: .25rem; }
.media-upload-hint  { font-size: .72rem; color: var(--t4); line-height: 1.5; }

/* Media tabs (URL vs Upload) */
.media-input-tabs { display: flex; gap: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); margin-bottom: .75rem; }
.media-input-tab {
  flex: 1; padding: .45rem .75rem; text-align: center;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  background: var(--card); color: var(--t3); transition: all .15s; border: none;
}
.media-input-tab.active { background: rgba(79,195,247,.12); color: var(--accent2); }
.media-input-tab:first-child { border-right: 1px solid var(--border); }

/* Preview box */
.media-preview-box {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--raised); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.media-preview-box img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.media-preview-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; color: var(--t4); font-size: .78rem; padding: 1rem;
  width: 100%; height: 100%; min-height: 80px;
}
.media-preview-ph span { font-size: 1.8rem; }
.media-preview-clear {
  position: absolute; top: .4rem; right: .4rem;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.15);
  color: white; font-size: .7rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s; z-index: 1;
}
.media-preview-clear:hover { background: rgba(230,57,70,.8); }

/* Upload progress */
.upload-progress-wrap {
  display: none; margin-top: .75rem;
}
.upload-progress-bar {
  height: 6px; background: var(--raised); border-radius: 4px; overflow: hidden;
}
.upload-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent2), #34D399);
  border-radius: 4px; transition: width .3s ease;
}
.upload-progress-label {
  font-size: .72rem; color: var(--t3); margin-top: .35rem;
  display: flex; justify-content: space-between;
}

/* Security badge */
.security-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2);
  color: #34D399; font-size: .68rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 4px; letter-spacing: .3px;
}
.security-warn {
  display: none; background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.25); border-radius: var(--r);
  padding: .6rem .85rem; font-size: .78rem; color: var(--warn);
  margin-top: .5rem; align-items: center; gap: .5rem;
}
.security-warn.show { display: flex; }
.security-error {
  display: none; background: rgba(230,57,70,.08);
  border: 1px solid rgba(230,57,70,.25); border-radius: var(--r);
  padding: .6rem .85rem; font-size: .78rem; color: var(--accent);
  margin-top: .5rem; align-items: center; gap: .5rem;
}
.security-error.show { display: flex; }

/* Media grid in library */
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .65rem;
}
.media-grid-item {
  position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden;
  background: var(--raised); border: 1px solid var(--border); cursor: pointer;
  transition: border-color .15s;
}
.media-grid-item:hover { border-color: rgba(79,195,247,.4); }
.media-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.media-grid-item .mgi-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; transition: opacity .15s;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
}
.media-grid-item:hover .mgi-overlay { opacity: 1; }

/* File type icon */
.file-type-icon {
  width: 36px; height: 36px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.file-type-icon.img  { background: rgba(79,195,247,.12); }
.file-type-icon.vid  { background: rgba(230,57,70,.12); }
.file-type-icon.doc  { background: rgba(245,158,11,.12); }

/* Scan result indicator */
.scan-ok   { color: #34D399; font-size: .72rem; display: flex; align-items: center; gap: .3rem; }
.scan-fail { color: var(--accent); font-size: .72rem; display: flex; align-items: center; gap: .3rem; }

/* ── ASPECT RATIO PREVIEW FIX ────────────────────────────────── */
/* Ensure preview containers with aspect-ratio work cross-browser */
[id$="_preview_box"] {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--raised);
  border: 1px solid var(--border);
  position: relative;
}

/* Poster 2:3 — center narrow box */
[id$="_preview_box"][style*="2/3"] {
  margin-left: 0;
  margin-right: auto;
}

/* img inside preview: absolute fill */
[id$="_preview_box"] > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}

/* Clear button hover */
[id$="_clear_btn"]:hover {
  background: rgba(230, 57, 70, 0.85) !important;
}

/* Size indicator */
[id$="_img_size"] {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent2);
  font-size: .65rem;
}

/* ================================================================
   SETTINGS PAGE — Professional Redesign
   ================================================================ */

/* Settings outer wrapper */
.settings-wrap { max-width:100%; }
.s-card-body .form-row { width:100%; }
.s-card-body .form-row.cols-2 { grid-template-columns:1fr 1fr; }
input.form-control, textarea.form-control, select.form-control { width:100%; min-width:0; }

/* Settings pill tabs */
.settings-tabs {
  display:flex; gap:.5rem; margin-bottom:2rem; flex-wrap:wrap;
}
.settings-tab {
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem 1.25rem; border-radius:8px;
  font-size:.82rem; font-weight:600; cursor:pointer;
  border:1.5px solid var(--border); color:var(--t2);
  background:transparent; transition:all .18s;
  white-space:nowrap;
}
.settings-tab:hover { color:var(--t1); border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.03); }
.settings-tab.active {
  background:rgba(230,57,70,.1); border-color:rgba(230,57,70,.5);
  color:var(--accent); box-shadow:0 0 0 3px rgba(230,57,70,.08);
}
.settings-tab svg { flex-shrink:0; opacity:.7; }
.settings-tab.active svg { opacity:1; }

/* Section card */
.s-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; margin-bottom:1.5rem;
}
.s-card-head {
  padding:1.1rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
  display:flex; align-items:center; gap:.75rem;
}
.s-card-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; flex-shrink:0;
}
.s-card-icon.red  { background:rgba(230,57,70,.15);  color:var(--accent); }
.s-card-icon.blue { background:rgba(79,195,247,.12);  color:var(--accent2); }
.s-card-icon.gold { background:rgba(244,196,48,.12);  color:#F4C430; }
.s-card-icon.green{ background:rgba(52,211,153,.1);   color:#34D399; }

.s-card-head-text {}
.s-card-title { font-size:.88rem; font-weight:700; color:var(--t1); line-height:1.2; }
.s-card-sub   { font-size:.72rem; color:var(--t3); margin-top:.15rem; }
.s-card-body  { padding:1.5rem; }

/* Styled form field */
.s-field { margin-bottom:1.25rem; width:100%; }
.s-field:last-of-type { margin-bottom:0; }

.s-label {
  display:flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:700; color:var(--t2);
  letter-spacing:.4px; text-transform:uppercase;
  margin-bottom:.45rem;
}
.s-label-badge {
  font-size:.6rem; padding:.1rem .4rem; border-radius:3px;
  background:rgba(230,57,70,.12); color:var(--accent);
  font-weight:700; letter-spacing:.3px; text-transform:uppercase;
}
.s-label-badge.opt {
  background:rgba(255,255,255,.05); color:var(--t3);
}

/* Input with optional prefix/suffix */
.s-input-wrap {
  position:relative; display:flex; align-items:stretch; width:100%;
}
.s-input-wrap .form-control { flex:1; min-width:0; }
.s-input-prefix, .s-input-suffix {
  display:flex; align-items:center; justify-content:center;
  padding:0 .75rem;
  background:rgba(255,255,255,.03); border:1px solid var(--border);
  color:var(--t3); font-size:.78rem; flex-shrink:0;
  white-space:nowrap;
}
.s-input-prefix { border-right:none; border-radius:var(--r) 0 0 var(--r); }
.s-input-suffix { border-left:none;  border-radius:0 var(--r) var(--r) 0; }
.s-input-prefix + .form-control { border-radius:0 var(--r) var(--r) 0; }
.s-input-wrap .form-control:not(:last-child) { border-radius:var(--r) 0 0 var(--r); }

/* Character counter */
.s-counter {
  font-size:.65rem; color:var(--t3); text-align:right; margin-top:.2rem;
  font-family:'JetBrains Mono',monospace;
}
.s-counter.warn  { color:#F4C430; }
.s-counter.over  { color:var(--accent); }

/* Hint text */
.s-hint {
  font-size:.7rem; color:var(--t3); margin-top:.3rem;
  display:flex; align-items:flex-start; gap:.35rem; line-height:1.5;
}
.s-hint::before { content:'ℹ'; font-size:.75rem; flex-shrink:0; margin-top:.05rem; }

/* Logo preview box */
.logo-preview-box {
  width:48px; height:48px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; overflow:hidden; flex-shrink:0;
  transition:border-color .2s;
}
.logo-preview-box:has(img) { border-color:rgba(79,195,247,.3); }

/* Divider in card */
.s-divider {
  height:1px; background:var(--border);
  margin:1.5rem 0;
}

/* Social media input rows */
.social-field-row {
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:.75rem; padding:.9rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.social-field-row:last-of-type { border-bottom:none; padding-bottom:0; }
.social-platform {
  display:flex; align-items:center; gap:.6rem;
  width:150px; flex-shrink:0;
}
.social-platform-icon {
  width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; flex-shrink:0;
}
.sp-fb  { background:#1877F215; border:1px solid #1877F230; }
.sp-tw  { background:#00000025; border:1px solid #55555530; }
.sp-ig  { background:#E1306C15; border:1px solid #E1306C30; }
.sp-yt  { background:#FF000015; border:1px solid #FF000030; }
.sp-tt  { background:#69C9D015; border:1px solid #69C9D030; }
.sp-dc  { background:#5865F215; border:1px solid #5865F230; }
.social-platform-name { font-size:.8rem; font-weight:600; color:var(--t2); }

/* Page editor field */
.page-editor-wrap {
  border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; background:var(--card);
}
.page-editor-toolbar {
  display:flex; align-items:center; gap:.25rem;
  padding:.45rem .65rem; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
.page-editor-btn {
  padding:.25rem .5rem; border-radius:4px; border:none;
  background:none; color:var(--t3); font-size:.78rem;
  cursor:pointer; transition:all .15s; font-family:inherit;
}
.page-editor-btn:hover { background:rgba(255,255,255,.06); color:var(--t1); }
.page-editor-textarea {
  width:100%; background:transparent; border:none; outline:none;
  padding:.75rem .9rem; color:var(--t1); font-size:.83rem;
  font-family:'Outfit', sans-serif; line-height:1.7;
  resize:vertical; min-height:120px;
}

/* Save button footer */
.s-save-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.5rem;
  background:rgba(255,255,255,.01);
  border-top:1px solid var(--border);
  gap:1rem; flex-wrap:wrap;
}
.s-save-hint { font-size:.72rem; color:var(--t3); display:flex; align-items:center; gap:.35rem; }

/* Status dot */
.s-status-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--t4); display:inline-block;
  transition:background .3s;
}
.s-status-dot.saved  { background:#34D399; }
.s-status-dot.unsaved{ background:#F4C430; animation:pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Responsive */
@media(max-width:600px) {
  .social-field-row { grid-template-columns:1fr; gap:.4rem; }
  .social-platform { width:auto; }
  .s-card-body { padding:1rem; }
}

/* ================================================================
   ADMIN MANAGEMENT — Password toggle button
   ================================================================ */
.pass-toggle {
  position:absolute; right:.65rem; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--t4); cursor:pointer;
  display:flex; align-items:center; padding:.2rem; border-radius:4px;
  transition:color .15s; z-index:2;
}
.pass-toggle:hover { color:var(--t2); }

/* Input with toggle — add right padding so text doesn't hide behind button */
.s-input-wrap input[type="password"],
.s-input-wrap input[type="text"] {
  padding-right:2.4rem;
}

/* Modal open state */
#chpass-modal-overlay.open { display:flex !important; }

/* ================================================================
   ADD ANIME — Responsive professional polish
   ================================================================ */

/* Wrapper full-width with max */
.anime-form-wrap {
  max-width:900px; width:100%;
}

/* Panel no overflow clip on mobile */
.anime-form-wrap .panel { overflow:visible; }

/* Tab icons align */
.form-tabs-wrap .tab svg { flex-shrink:0; opacity:.65; }
.form-tabs-wrap .tab.active svg { opacity:1; }

/* Section divider label — border now accent line */
.form-section-label {
  font-size:.68rem; font-weight:700; letter-spacing:.9px;
  text-transform:uppercase; color:var(--t3);
  display:flex; align-items:center; gap:.55rem;
  margin-bottom:.85rem; padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.form-section-label::before {
  content:''; width:3px; height:13px; border-radius:2px;
  background:var(--accent); flex-shrink:0; display:block;
}

/* Settings toggle cards */
.toggle-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:.9rem 1rem;
  display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
  transition:border-color .15s;
}
.toggle-card:hover { border-color:rgba(255,255,255,.12); }
.toggle-card-info {}
.toggle-card-title { font-size:.85rem; font-weight:600; color:var(--t1); margin-bottom:.15rem; }
.toggle-card-sub   { font-size:.72rem; color:var(--t3); }

/* Form actions sticky-feel at bottom */
.form-actions {
  display:flex; align-items:center; gap:.65rem;
  margin-top:1.75rem; padding-top:1.25rem;
  border-top:1px solid var(--border); flex-wrap:wrap;
}
.form-actions .btn-ml { margin-left:auto; }

/* ================================================================
   ADMIN MANAGEMENT — Responsive professional rebuild
   ================================================================ */

/* Page wrapper */
.admin-mgmt-wrap {
  max-width:900px; width:100%;
  display:flex; flex-direction:column; gap:1.5rem;
}

/* Info banner */
.admin-info-banner {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.9rem 1.1rem;
  background:rgba(79,195,247,.05);
  border:1px solid rgba(79,195,247,.18);
  border-radius:var(--r);
  font-size:.78rem; color:var(--t2); line-height:1.65;
}
.admin-info-banner svg { flex-shrink:0; margin-top:.15rem; }

/* Responsive table wrapper */
.admin-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Admin row avatar */
.admin-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; border:1.5px solid rgba(255,255,255,.08);
}
.admin-avatar.self {
  background:linear-gradient(135deg,var(--accent),#FF8C00);
  border-color:rgba(230,57,70,.4);
}
.admin-avatar.other {
  background:var(--raised); color:var(--t2);
}

/* Admin user info cell */
.admin-user-cell { display:flex; align-items:center; gap:.65rem; }
.admin-user-name { font-weight:700; color:var(--t1); font-size:.83rem; }
.admin-user-id   { font-size:.62rem; color:var(--t4); margin-top:.1rem; font-family:'JetBrains Mono',monospace; }
.admin-self-badge {
  font-size:.6rem; padding:.1rem .4rem; border-radius:3px;
  background:rgba(230,57,70,.12); color:var(--accent);
  font-weight:700; margin-left:.35rem; letter-spacing:.3px;
  text-transform:uppercase;
}

/* Row actions */
.admin-row-actions { display:flex; gap:.3rem; flex-wrap:nowrap; }

/* Add admin form — password grid */
.add-admin-pass-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
  margin-top:0;
}

/* Password requirements bar */
.pass-req-bar {
  margin-top:.6rem; padding:.65rem .85rem;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border); border-radius:var(--r);
  font-size:.72rem; color:var(--t3); line-height:1.7;
  display:flex; align-items:flex-start; gap:.5rem;
}
.pass-req-bar strong { color:var(--t2); }

/* Change password modal */
.chpass-modal-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; width:100%; max-width:460px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:popIn .25s ease both; overflow:hidden;
}
.chpass-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.5rem; border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
}
.chpass-modal-head-info { display:flex; align-items:center; gap:.65rem; }
.chpass-modal-title { font-size:.9rem; font-weight:700; color:var(--t1); }
.chpass-modal-sub   { font-size:.7rem; color:var(--t3); margin-top:.1rem; }
.chpass-modal-close {
  background:none; border:none; color:var(--t3); cursor:pointer;
  font-size:1.1rem; padding:.3rem; border-radius:6px; transition:color .15s;
  display:flex; align-items:center; justify-content:center;
}
.chpass-modal-close:hover { color:var(--t1); }
.chpass-modal-body { padding:1.25rem 1.5rem; }

/* Strength bar wrapper */
.pass-strength-wrap { margin-top:.4rem; }
.pass-strength-track {
  height:4px; border-radius:2px; background:var(--raised); overflow:hidden;
}
.pass-strength-fill {
  height:100%; width:0%; border-radius:2px;
  transition:width .3s ease, background .3s ease;
}
.pass-strength-text {
  font-size:.65rem; margin-top:.25rem; color:var(--t3);
  font-family:'JetBrains Mono',monospace;
}

/* ── Admin Responsive Breakpoints ── */

@media(max-width:768px) {
  /* Add anime */
  .anime-form-wrap { max-width:100%; }
  .anime-basic-grid-2,
  .anime-basic-grid-3 { grid-template-columns:1fr; gap:.75rem; }
  .media-upload-grid { grid-template-columns:1fr; }
  .form-actions { gap:.5rem; }
  .form-actions .btn-ml { margin-left:0; width:100%; justify-content:center; }
  .form-actions .btn    { flex:1; justify-content:center; min-width:0; }

  /* Admin mgmt */
  .admin-mgmt-wrap { max-width:100%; }
  .add-admin-pass-grid { grid-template-columns:1fr; gap:.75rem; }
  .admin-row-actions { flex-wrap:wrap; }

  /* Table: hide less important cols on mobile */
  .admin-table-wrap .col-created { display:none; }

  /* Modal full-screen on mobile */
  .chpass-modal-box { max-width:100%; border-radius:0; height:100%; max-height:100dvh; overflow-y:auto; }
  #chpass-modal-overlay { padding:0; align-items:flex-end; }
  .chpass-modal-box { border-radius:16px 16px 0 0; }
  .chpass-modal-body { padding:1rem; }

  /* s-save-bar stack */
  .s-save-bar { flex-direction:column; align-items:stretch; }
  .s-save-bar .btn-primary { width:100%; justify-content:center; }
  .s-save-bar .s-save-hint { justify-content:center; }
}

@media(max-width:480px) {
  .anime-basic-grid-2,
  .anime-basic-grid-3 { gap:.5rem; }
  .add-admin-pass-grid { gap:.5rem; }
  .admin-row-actions .btn { font-size:.72rem; padding:.3rem .55rem; }
  .form-section-label { font-size:.62rem; }
  .chpass-modal-body { padding:.85rem; }
  .s-card-body { padding:1rem .85rem; }
}

/* ================================================================
   NEW FEATURE PAGES — Responsive grids
   ================================================================ */
.analytics-grid-2    { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.analytics-grid-main { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; }

@media(max-width:900px) {
  .analytics-grid-2    { grid-template-columns:1fr; }
  .analytics-grid-main { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .stats-row { grid-template-columns:1fr 1fr; }
}