:root {
  --sf:#ffffff; --sf2:#f0f2f8; --sf3:#e8ebf5;
  --bg:#f7f8fc; --bd:#dde1f0; --bd2:#c8ceea;
  --tx:#0f1535; --tx2:#4a5278; --tx3:#8890b8;
  --bl:#4f46e5; --bl-lt:rgba(79,70,229,.08); --bl-b:rgba(79,70,229,.2);
  --gn:#0e7a4e; --gn-lt:rgba(14,122,78,.08);
  --am:#9a5c00; --am-lt:rgba(154,92,0,.08);
  --rd:#b91c1c; --rd-lt:rgba(185,28,28,.08);
  --pu:#7c3aed; --pu-lt:rgba(124,58,237,.08);
  --radius: 10px;
}
body.dark {
  --sf:#111827; --sf2:#141c2e; --sf3:#1a2438;
  --bg:#090e1e; --bd:#1e2d48; --bd2:#273d60;
  --tx:#e8ecff; --tx2:#7080a8; --tx3:#3a4d6a;
  --bl:#6366f1; --bl-lt:rgba(99,102,241,.1); --bl-b:rgba(99,102,241,.25);
  --gn:#34d399; --gn-lt:rgba(52,211,153,.1);
  --am:#fbbf24; --am-lt:rgba(251,191,36,.1);
  --rd:#f87171; --rd-lt:rgba(248,113,113,.1);
  --pu:#a78bfa; --pu-lt:rgba(167,139,250,.1);
}
* { box-sizing: border-box; }
body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--bg); color: var(--tx);
  margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased;
}
code, .mono { font-family: 'Fira Code', monospace; }
a { color: var(--bl); }

/* ---- Auth pages (login/register): centered card on a quiet branded bg ---- */
.auth-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 15% 20%, var(--bl-lt), transparent 45%),
    radial-gradient(circle at 85% 80%, var(--pu-lt), transparent 45%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 400px;
  background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius);
  padding: 2.25rem 2rem; box-shadow: 0 12px 32px rgba(15,21,53,.08);
}
.auth-brand {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem;
}
.auth-brand .logo-icon {
  width: 36px; height: 36px; border-radius: 9px; background: var(--bl); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem;
  flex-shrink: 0;
}
.auth-brand span { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.auth-card h1 { font-size: 1.3rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
.auth-card .sub { color: var(--tx2); font-size: .88rem; margin: 0 0 1.5rem; }
.auth-error {
  background: var(--rd-lt); color: var(--rd); border-radius: 8px;
  padding: .6rem .8rem; font-size: .85rem; font-weight: 600; margin-bottom: 1.1rem;
}
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--tx2); margin-bottom: .35rem; }
.field input, .field select {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--bd2); border-radius: 8px;
  background: var(--sf2); color: var(--tx); font-family: inherit; font-size: .95rem;
  transition: border-color .15s, background .15s;
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--bl); background: var(--sf);
}
.btn-primary {
  width: 100%; padding: .7rem 1rem; border: none; border-radius: 8px;
  background: var(--bl); color: #fff; font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: opacity .15s; margin-top: .3rem;
}
.btn-primary:hover { opacity: .92; }
.auth-foot { margin-top: 1.4rem; text-align: center; font-size: .85rem; color: var(--tx2); }
.auth-foot a { font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* ---- App shell: sidebar + topbar ---- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0; background: var(--sf); border-right: 1px solid var(--bd);
  display: flex; flex-direction: column; padding: 1.1rem .8rem;
}
.sidebar-brand { display: flex; align-items: center; gap: .55rem; padding: 0 .4rem 1.2rem; }
.sidebar-brand .logo-icon {
  width: 30px; height: 30px; border-radius: 8px; background: var(--bl); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem;
  flex-shrink: 0;
}
.sidebar-brand span { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; }
.nav-group { margin-bottom: 1rem; }
.nav-group-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tx3); padding: 0 .6rem; margin-bottom: .35rem;
}
.nav-link {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border-radius: 7px;
  color: var(--tx2); text-decoration: none; font-size: .88rem; font-weight: 600;
  margin-bottom: .1rem; transition: background .12s, color .12s;
}
.nav-link:hover { background: var(--sf2); color: var(--tx); }
.nav-link.active { background: var(--bl-lt); color: var(--bl); }
.sidebar-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--bd); }
.sidebar-user { display: flex; align-items: center; gap: .55rem; padding: .4rem .6rem; font-size: .85rem; }
.sidebar-user .avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--sf3); color: var(--tx2);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem;
  flex-shrink: 0;
}
.sidebar-user .name { font-weight: 700; color: var(--tx); }
.sidebar-user .role { color: var(--tx3); font-size: .74rem; }

.main-content { flex: 1; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
  padding: .8rem 1.5rem; border-bottom: 1px solid var(--bd); background: var(--sf);
}
.topbar-btn {
  border: 1px solid var(--bd2); background: var(--sf); color: var(--tx2); border-radius: 7px;
  padding: .4rem .7rem; font-size: .82rem; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
}
.topbar-btn:hover { background: var(--sf2); }
.content-inner { padding: 1.5rem; max-width: 1180px; }

/* ---- Cards / sections (used by admin + custom modules) ---- */
.card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--radius); margin-bottom: 1.25rem; overflow: hidden; }
.card-head { padding: 1rem 1.25rem .25rem; }
.card-head h2 { font-size: 1.02rem; margin: 0 0 .2rem; letter-spacing: -.005em; }
.card-head p { color: var(--tx2); font-size: .84rem; margin: 0 0 .8rem; }
.card-body { padding: 0 1.25rem 1.25rem; }

table.data-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.data-table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tx3); font-weight: 800; padding: .5rem .6rem; border-bottom: 1px solid var(--bd);
}
table.data-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--bd); color: var(--tx); }
table.data-table tr:last-child td { border-bottom: none; }

.btn { padding: .45rem .9rem; border-radius: 7px; font-size: .85rem; font-weight: 700; cursor: pointer; border: 1px solid var(--bd2); background: var(--sf); color: var(--tx2); }
.btn:hover { background: var(--sf2); }
.btn.btn-primary-sm { background: var(--bl); border-color: var(--bl); color: #fff; }
.btn.btn-primary-sm:hover { opacity: .9; }
.btn.btn-danger-sm { color: var(--rd); border-color: var(--rd-lt); }
.btn.btn-danger-sm:hover { background: var(--rd-lt); }
input[type=text], input[type=number], input[type=email], select, textarea {
  font-family: inherit; padding: .4rem .6rem; border: 1px solid var(--bd2); border-radius: 6px;
  background: var(--sf2); color: var(--tx); font-size: .87rem;
}
textarea.code-editor { font-family: 'Fira Code', monospace; font-size: .82rem; width: 100%; min-height: 260px; resize: vertical; line-height: 1.5; }

.badge { display: inline-block; padding: .15rem .5rem; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.badge.on { background: var(--gn-lt); color: var(--gn); }
.badge.off { background: var(--sf3); color: var(--tx3); }
.badge.locked { background: var(--am-lt); color: var(--am); }