:root {
  --navy: #080B14;
  --deep-navy: #101525;
  --violet: #7C3AED;
  --cyan: #22D3EE;
  --gray: #A5ADBD;
  --text-dark: #14172A;
  --text-body: #5b6178;
  --bg-soft: #F6F7FB;
  --border-soft: #E7E9F2;
  --gradient-brand: linear-gradient(135deg, var(--violet) 0%, var(--cyan) 100%);
  --shadow-soft: 0 8px 24px rgba(20,23,42,0.06);
  --radius: 14px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Poppins','Segoe UI',system-ui,sans-serif;
  background: var(--bg-soft);
  color: var(--text-body);
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }

/* ---------- Login ---------- */
.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--navy); position:relative; overflow:hidden; padding:20px;
}
.login-wrap .blob { position:absolute; border-radius:50%; filter:blur(100px); opacity:.5; }
.login-wrap .blob-1 { width:380px;height:380px;background:var(--violet); top:-100px; left:-100px; }
.login-wrap .blob-2 { width:320px;height:320px;background:var(--cyan); bottom:-100px; right:-80px; }
.login-card {
  position:relative; z-index:2; background:#fff; border-radius:22px; padding:44px 40px;
  width:100%; max-width:400px; box-shadow: 0 30px 70px rgba(0,0,0,0.4);
}
.login-card .logo-row { display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:26px; }
.login-card .logo-row img { height:56px; width:56px; border-radius:14px; }
.login-card h1 { font-size:20px; color:var(--text-dark); }
.login-card .sub { text-align:center; font-size:13px; color:var(--text-body); margin-bottom:26px; }
.login-error {
  background: rgba(239,68,68,0.1); color:#dc2626; padding:12px 16px; border-radius:10px;
  font-size:13px; margin-bottom:18px;
}
.field { margin-bottom:18px; }
.field label { display:block; font-size:13px; font-weight:600; color:var(--text-dark); margin-bottom:8px; }
.field input {
  width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--border-soft);
  font-family:inherit; font-size:14px; background:var(--bg-soft); transition: all .3s ease;
}
.field input:focus { outline:none; border-color:var(--violet); background:#fff; box-shadow:0 0 0 4px rgba(124,58,237,0.1); }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:12px; font-weight:600; font-size:14px; border:none; cursor:pointer;
  transition: all .3s ease; width:100%;
}
.btn-primary { background:var(--gradient-brand); color:#fff; box-shadow:0 8px 20px rgba(124,58,237,0.3); }
.btn-primary:hover { transform:translateY(-2px); }

/* ---------- Layout ---------- */
.admin-shell { display:flex; min-height:100vh; }
.sidebar {
  width:250px; background:var(--navy); flex-shrink:0; padding:26px 18px;
  position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:200;
  transition: left .3s ease;
}
.sidebar .brand { display:flex; align-items:center; gap:10px; padding:6px 10px 26px; }
.sidebar .brand img { height:38px; width:38px; border-radius:10px; }
.sidebar .brand span { color:#fff; font-weight:800; font-size:17px; }
.sidebar .brand span em { font-style:normal; color:var(--cyan); }
.sidebar nav { display:flex; flex-direction:column; gap:4px; }
.sidebar nav a {
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  color:var(--gray); font-size:14px; font-weight:500; transition: all .25s ease;
}
.sidebar nav a .ic { font-size:17px; width:20px; text-align:center; }
.sidebar nav a:hover { background:rgba(255,255,255,0.06); color:#fff; }
.sidebar nav a.active { background:var(--gradient-brand); color:#fff; }
.sidebar .divider { height:1px; background:rgba(255,255,255,0.08); margin:18px 0; }
.sidebar .view-site { margin-top:auto; }

.main { flex:1; margin-left:250px; min-height:100vh; display:flex; flex-direction:column; }
.topbar {
  background:#fff; border-bottom:1px solid var(--border-soft); padding:16px 30px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100;
}
.topbar h1 { font-size:19px; color:var(--text-dark); }
.topbar .user-chip { display:flex; align-items:center; gap:10px; }
.topbar .avatar {
  width:38px; height:38px; border-radius:50%; background:var(--gradient-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;
}
.topbar .logout-link { font-size:13px; font-weight:600; color:#dc2626; }
.menu-toggle { display:none; background:none; border:none; font-size:22px; color:var(--text-dark); }

.content { padding:30px; flex:1; }

/* ---------- Widgets ---------- */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:30px; }
.stat-card { background:#fff; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:16px; }
.stat-card .ic { width:52px; height:52px; border-radius:14px; background:var(--gradient-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.stat-card .num { font-size:26px; font-weight:800; color:var(--text-dark); }
.stat-card .lbl { font-size:12.5px; color:var(--text-body); }

.card { background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-soft); overflow:hidden; margin-bottom:26px; }
.card-head { padding:20px 24px; border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.card-head h3 { font-size:16px; color:var(--text-dark); }
.card-body { padding:24px; }

table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:14px 16px; font-size:13.5px; border-bottom:1px solid var(--border-soft); }
th { color:var(--text-dark); font-weight:700; background:var(--bg-soft); text-transform:uppercase; font-size:11.5px; letter-spacing:.4px; }
tr:last-child td { border-bottom:none; }
td img.thumb { width:52px; height:52px; object-fit:cover; border-radius:10px; }
.badge { display:inline-block; padding:4px 12px; border-radius:20px; font-size:11.5px; font-weight:700; }
.badge-green { background:rgba(34,211,238,0.12); color:#0e7490; }
.badge-gray { background:rgba(165,173,189,0.15); color:#5b6178; }
.badge-violet { background:rgba(124,58,237,0.1); color:var(--violet); }
.badge-amber { background:rgba(245,158,11,0.14); color:#b45309; }
.badge-red { background:rgba(239,68,68,0.12); color:#dc2626; }
.badge-cyan { background:rgba(34,211,238,0.14); color:#0e7490; }
.row-actions { display:flex; gap:8px; }
.icon-btn {
  width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border-soft); background:#fff; color:var(--text-body); font-size:14px; transition: all .2s ease;
}
.icon-btn:hover { border-color:var(--violet); color:var(--violet); }
.icon-btn.danger:hover { border-color:#dc2626; color:#dc2626; }
.empty-row td { text-align:center; padding:40px; color:var(--gray); }

.btn-sm { padding:10px 20px; font-size:13px; width:auto; }
.btn-outline-sm {
  padding:10px 20px; font-size:13px; border-radius:10px; border:1.5px solid var(--border-soft);
  background:#fff; color:var(--text-dark); font-weight:600; display:inline-flex; align-items:center; gap:6px;
}
.btn-outline-sm:hover { border-color:var(--violet); color:var(--violet); }

form .field, form .form-group { margin-bottom:18px; }
form label { display:block; font-size:13px; font-weight:600; color:var(--text-dark); margin-bottom:8px; }
form input[type=text], form input[type=email], form input[type=tel], form input[type=number], form input[type=url], form input[type=password], form select, form textarea {
  width:100%; padding:12px 15px; border-radius:10px; border:1.5px solid var(--border-soft);
  font-family:inherit; font-size:14px; background:var(--bg-soft); transition: all .25s ease;
}
form input:focus, form select:focus, form textarea:focus { outline:none; border-color:var(--violet); background:#fff; box-shadow:0 0 0 3px rgba(124,58,237,0.1); }
form textarea { resize:vertical; min-height:110px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.checkbox-row { display:flex; align-items:center; gap:10px; }
.checkbox-row input { width:auto; }
.file-drop {
  border:2px dashed var(--border-soft); border-radius:12px; padding:26px; text-align:center;
  cursor:pointer; transition: all .25s ease; background:var(--bg-soft);
}
.file-drop:hover { border-color:var(--violet); }
.file-drop input { display:none; }
.preview-img { max-width:180px; border-radius:10px; margin-top:14px; border:1px solid var(--border-soft); }

.alert { padding:14px 18px; border-radius:12px; margin-bottom:20px; font-size:14px; }
.alert-success { background:rgba(34,211,238,0.12); color:#0e7490; }
.alert-error { background:rgba(239,68,68,0.1); color:#dc2626; }

@media (max-width: 960px) {
  .sidebar { left:-260px; }
  .sidebar.open { left:0; box-shadow:0 0 40px rgba(0,0,0,0.3); }
  .main { margin-left:0; }
  .menu-toggle { display:block; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .form-grid { grid-template-columns:1fr; }
  table { display:block; overflow-x:auto; white-space:nowrap; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns:1fr; }
  .content { padding:18px; }
  .topbar { padding:14px 18px; }
}