* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #F6D7D2;
  --bg-card: #FFFFFF;
  --purple: #7B4FA3;
  --purple-light: #8E5EBE;
  --purple-pale: #EDE0F7;
  --cyan: #4FB6D8;
  --blue: #3FA9F5;
  --magenta: #E94E89;
  --text: #2D1B3D;
  --text-secondary: #5A4B6A;
  --text-muted: #8A7A9A;
  --gradient: linear-gradient(135deg, #7B4FA3, #E94E89, #3FA9F5, #4FB6D8);
  --shadow: 0 4px 16px rgba(123,79,163,0.10);
  --radius: 12px;
  --radius-sm: 8px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}
a { text-decoration:none; color:var(--purple); }
a:hover { color:var(--magenta); }

/* ─── Login ─── */
.login-page {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(135deg, #F6D7D2, #F8DCD6);
}
.login-box {
  background:var(--bg-card);
  border-radius:var(--radius);
  padding:40px;
  width:400px;
  max-width:90vw;
  box-shadow:0 20px 60px rgba(123,79,163,0.12);
}
.login-logo {
  text-align:center;
  margin-bottom:8px;
}
.login-logo .logo-icon {
  width:48px;height:48px;border-radius:10px;
  background:var(--gradient);
  display:inline-flex;align-items:center;justify-content:center;
  color:white;font-size:1.4rem;font-weight:800;
}
.login-logo img.logo-icon {
  width:auto;
  height:48px;
  background:transparent;
  display:inline;
  object-fit:contain;
}
.login-logo h1 {
  font-size:1.5rem;margin-top:12px;
}
.login-logo p {
  color:var(--text-muted);font-size:0.9rem;margin-top:4px;
}
.login-error {
  background:#fde0ec;color:var(--magenta);
  padding:10px 14px;border-radius:var(--radius-sm);
  margin-bottom:16px;font-size:0.85rem;text-align:center;
}

/* ─── Forms ─── */
.form-group { margin-bottom:16px; }
.form-group label {
  display:block;font-size:0.85rem;font-weight:600;
  margin-bottom:6px;color:var(--text-secondary);
}
.form-input, .form-select, .form-textarea {
  width:100%;padding:10px 14px;border:2px solid rgba(123,79,163,0.12);
  border-radius:var(--radius-sm);font-size:0.9rem;font-family:var(--font);
  outline:none;transition:border-color 0.3s;background:white;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--purple);box-shadow:0 0 0 3px rgba(123,79,163,0.1);
}
.form-textarea { min-height:300px; resize:vertical; font-family:'JetBrains Mono','Fira Code',monospace; font-size:0.88rem; line-height:1.6; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* ─── Buttons ─── */
.btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;border-radius:50px;font-size:0.9rem;
  font-weight:600;border:none;cursor:pointer;
  transition:all 0.3s;font-family:var(--font);
}
.btn-primary { background:var(--gradient); color:white; box-shadow:0 4px 12px rgba(123,79,163,0.25); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(123,79,163,0.35); }
.btn-secondary { background:var(--purple-pale); color:var(--purple); }
.btn-secondary:hover { background:#ddd0ec; }
.btn-danger { background:#fde0ec; color:var(--magenta); }
.btn-danger:hover { background:#fcc8dc; }
.btn-sm { padding:6px 14px; font-size:0.8rem; }
.btn-block { width:100%; justify-content:center; }

/* ─── Admin Layout ─── */
.admin-header {
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(123,79,163,0.06);
  padding:0 24px;height:60px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
}
.admin-header-left { display:flex;align-items:center;gap:16px; }
.admin-header-left .logo-icon {
  width:32px;height:32px;border-radius:6px;
  background:var(--gradient);display:flex;align-items:center;justify-content:center;
  color:white;font-size:0.9rem;font-weight:800;
}
.admin-header-left img.logo-icon {
  width:auto;
  height:32px;
  background:transparent;
  display:inline;
  object-fit:contain;
}
.admin-header-left h2 { font-size:1.1rem; }
.admin-header-right { display:flex;align-items:center;gap:12px; font-size:0.85rem; color:var(--text-secondary); }
.admin-content { padding:24px; max-width:1200px; margin:0 auto; }

/* ─── Dashboard ─── */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card {
  background:var(--bg-card);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow);
}
.stat-card .number { font-size:1.8rem;font-weight:800;color:var(--purple); }
.stat-card .label { font-size:0.85rem;color:var(--text-muted);margin-top:4px; }
.stat-card .icon { float:right;font-size:1.8rem;opacity:0.2; }

/* ─── Table ─── */
.table-wrap {
  background:var(--bg-card);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.table-header {
  padding:16px 20px;border-bottom:1px solid rgba(123,79,163,0.06);
  display:flex;align-items:center;justify-content:space-between;
}
.table-header h3 { font-size:1rem; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:12px 20px; font-size:0.85rem; border-bottom:1px solid rgba(123,79,163,0.04); }
th { font-weight:600; color:var(--text-secondary); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; }
tr:hover td { background:rgba(123,79,163,0.02); }
td.actions { display:flex; gap:6px; }
.badge {
  display:inline-block;padding:2px 10px;border-radius:50px;
  font-size:0.75rem;font-weight:600;
}
.badge-purple { background:var(--purple-pale);color:var(--purple); }
.badge-cyan { background:#d6eefb;color:var(--blue); }
.badge-magenta { background:#fde0ec;color:var(--magenta); }

/* ─── Message ─── */
.msg {
  padding:12px 16px;border-radius:var(--radius-sm);
  margin-bottom:16px;font-size:0.85rem;
}
.msg-success { background:#e0f0e8;color:#2d7a5a; }
.msg-error { background:#fde0ec;color:var(--magenta); }

/* ─── Page Header ─── */
.page-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
}
.page-header h1 { font-size:1.4rem; }

/* ─── Responsive ─── */
@media(max-width:768px) {
  .stats { grid-template-columns:repeat(2,1fr); }
  .form-row { grid-template-columns:1fr; }
  .admin-content { padding:16px; }
  th, td { padding:8px 12px; }
}
@media(max-width:480px) {
  .stats { grid-template-columns:1fr; }
}