@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root {
  --orange: #36a1f0;
  --blue: #89c7f8;
  --mint: #36ba8f;
  --text-main: #1f2a44;
  --text-soft: #6e7a91;
  --text-muted: #8b9eb8;
  --card-bg: rgba(246, 249, 252, .85);
  --card-line: rgba(140, 156, 181, .2);
  --card-line-strong: rgba(156, 173, 199, .34);
  --shadow: 0 14px 42px rgba(87, 108, 134, .12);
  --shadow-sm: 0 10px 26px rgba(112, 130, 155, .14);
  --radius-panel: 30px;
  --radius-card: 22px;
  --radius-btn: 12px;
  --radius-pill: 999px;
  --green: #36ba8f;
  --red-strong: #dd6d7d;
  --yellow-wash: #fff7e3;
  --green-wash: #e9f9f0;
  --red-wash: #ffeff3;
  --blue-wash: #f0f8ff;
}

* { box-sizing:border-box; margin:0; padding:0; }

body {
  min-height:100vh; color:var(--text-main);
  background:
    radial-gradient(circle at 10% 12%, #f5c69661 0, #f5c69600 26%),
    radial-gradient(circle at 88% 16%, #b0eae657 0, #b0eae600 27%),
    linear-gradient(160deg, #eceff4, #eaf0f5 60%, #e9edf3);
  font-family:"Noto Sans SC","Segoe UI",-apple-system,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

button { cursor:pointer; border:none; font:inherit; }
input, textarea, select { font:inherit; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

.admin-shell { display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
main { padding:32px 36px 60px; }

/* ====== Sidebar ====== */
aside {
  position:sticky; top:0; height:100vh;
  background:rgba(220,228,242,.72);
  border-right:1px solid rgba(156,173,199,.3);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  backdrop-filter:blur(14px) saturate(180%);
  box-shadow:4px 0 28px rgba(80,100,138,.08);
  display:flex; flex-direction:column;
  padding:28px 18px; z-index:100;
}
aside h2 {
  font-family:"Space Grotesk",sans-serif;
  font-size:1.1rem; font-weight:800; color:#1f2a44;
  margin-bottom:28px; padding:0 8px;
  letter-spacing:-.5px;
}
aside nav { display:grid; gap:4px; flex:1; }
aside nav a {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:12px;
  color:var(--text-soft);
  font-size:.88rem; font-weight:600;
  transition:all .16s ease;
}
aside nav a::before {
  content:''; width:6px; height:6px;
  border-radius:50%; background:var(--card-line-strong);
  flex-shrink:0;
}
aside nav a:hover {
  background:rgba(54,161,240,.08); color:var(--orange);
}
aside nav a.active {
  background:linear-gradient(120deg,rgba(54,161,240,.18),rgba(54,161,240,.08));
  color:var(--orange); font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(54,161,240,.15);
}
aside nav a.active::before { background:var(--orange); box-shadow:0 0 0 3px rgba(54,161,240,.2); }
aside .logout-btn {
  margin-top:12px; padding:10px 14px;
  border-radius:var(--radius-btn);
  background:rgba(221,109,125,.08);
  color:var(--red-strong);
  font-size:.86rem; font-weight:700;
  transition:all .16s ease;
  width:100%; text-align:left;
}
aside .logout-btn:hover { background:rgba(221,109,125,.18); }

/* ====== Cards ====== */
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px; margin-bottom:28px;
}
.card {
  padding:22px;
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.card span { display:block; color:var(--text-soft); font-size:.84rem; font-weight:600; margin-bottom:6px; }
.card strong { font-family:"Space Grotesk",sans-serif; font-size:1.9rem; font-weight:800; color:var(--text-main); }

/* ====== Form ====== */
.form, .toolbar {
  display:grid; gap:16px;
  max-width:640px; margin-bottom:18px;
}
.form label {
  display:grid; gap:6px;
  font-size:.84rem; font-weight:700;
  color:#35527d;
}
.form input, .form textarea, .form select, .toolbar input {
  padding:12px 16px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--card-line-strong);
  border-radius:12px;
  color:var(--text-main);
  font-size:.92rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(54,161,240,.08);
}
.form button, .toolbar button {
  padding:12px 24px;
  background:linear-gradient(120deg,#72c1f8,#36a1f0);
  color:#fff; border-radius:var(--radius-btn);
  font-weight:700; font-size:.92rem;
  box-shadow:0 8px 18px rgba(54,161,240,.28);
  transition:transform .16s ease,box-shadow .16s ease;
}
.form button:hover { transform:translateY(-1px); box-shadow:0 14px 30px rgba(54,161,240,.28); }
.form button:active { transform:translateY(0); }

/* ====== Table ====== */
table {
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
th, td { padding:12px 16px; border-bottom:1px solid var(--card-line); text-align:left; vertical-align:top; font-size:.87rem; }
th { color:#35527d; font-weight:800; font-size:.82rem; background:rgba(242,246,252,.8); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(54,161,240,.04); }

/* ====== Login ====== */
.login-body {
  display:grid; place-items:center; min-height:100vh;
}
.login-card {
  width:min(420px,92vw); display:grid; gap:16px;
  padding:36px 30px;
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.login-card h1 {
  font-family:"Space Grotesk",sans-serif;
  font-size:1.5rem; font-weight:800; color:var(--text-main);
  text-align:center; margin-bottom:8px;
}
.login-card input {
  padding:13px 16px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--card-line-strong);
  border-radius:12px;
  color:var(--text-main);
  font-size:.94rem;
}
.login-card input:focus { outline:none; border-color:var(--orange); box-shadow:0 0 0 4px rgba(54,161,240,.08); }
.login-card button {
  padding:13px; font-size:.96rem; font-weight:700;
  background:linear-gradient(120deg,#72c1f8,#36a1f0);
  color:#fff; border-radius:var(--radius-btn);
  box-shadow:0 8px 18px rgba(54,161,240,.28);
  margin-top:4px;
}
.login-card p { font-size:.8rem; color:var(--text-muted); text-align:center; }

/* ====== Page header ====== */
.page-header {
  margin-bottom:24px;
}
.page-header h1 {
  font-family:"Space Grotesk",sans-serif;
  font-size:1.4rem; font-weight:800; color:var(--text-main);
}

/* ====== Misc ====== */
.error { color:var(--red-strong); font-weight:700; font-size:.84rem; }
.success { color:var(--mint); font-weight:700; font-size:.84rem; }
.thumb { width:82px; height:82px; object-fit:cover; border-radius:14px; border:1px solid var(--card-line-strong); }
.inline { display:inline-flex; gap:8px; }
hr { margin:24px 0; border:0; border-top:1px solid var(--card-line); }
code { background:rgba(54,161,240,.08); padding:2px 8px; border-radius:6px; font-size:.85rem; color:var(--orange); }

.checkbox-label {
  display:flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:600; color:#35527d; cursor:pointer;
}
.checkbox-label input[type="checkbox"] { width:18px; height:18px; accent-color:var(--orange); }

/* ====== Email test ====== */
.email-test-result {
  margin-top:16px; padding:16px; border-radius:12px;
  font-size:.87rem; font-weight:600;
}
.email-test-result.success {
  background:var(--green-wash);
  border:1px solid rgba(54,186,143,.25);
  color:#177f52;
}
.email-test-result.error {
  background:var(--red-wash);
  border:1px solid rgba(221,109,125,.25);
  color:var(--red-strong);
}

/* ====== Scrollbar ====== */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(120,152,196,.7); border-radius:3px; }

@media (max-width:900px) {
  .admin-shell { grid-template-columns:1fr; }
  aside { position:relative; height:auto; padding:16px; }
  aside nav { display:flex; flex-wrap:wrap; gap:4px; }
  aside nav a { font-size:.8rem; padding:8px 10px; }
  main { padding:20px 16px; }
}