/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base ── */
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #0f1117;
  color: #e0e0e0;
  min-height: 100vh;
}

/* ── Navigation ── */
.admin-nav {
  display: flex;
  align-items: center;
  background: #161920;
  border-bottom: 1px solid #2e3250;
  padding: 0 1.2rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-nav .brand {
  font-size: .88rem;
  font-weight: 700;
  color: #f59e0b;
  padding: .8rem 1.2rem .8rem 0;
  border-right: 1px solid #2e3250;
  margin-right: .4rem;
  white-space: nowrap;
}
.admin-nav a {
  color: #888;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 500;
  padding: .85rem .8rem;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.admin-nav a:hover { color: #ccc; }
.admin-nav a.active { color: #fff; border-bottom-color: #f59e0b; }
.admin-nav .spacer { flex: 1; }
.admin-nav .sign-out {
  background: none;
  border: none;
  color: #555;
  font-size: .78rem;
  cursor: pointer;
  padding: .4rem .6rem;
}
.admin-nav .sign-out:hover { color: #aaa; }

/* ── Page layout ── */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.6rem 1.2rem;
}
h1 { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 1.2rem; }
h2 { font-size: .95rem; font-weight: 600; color: #ddd; margin-bottom: .8rem; }

/* ── Cards ── */
.card {
  background: #1c1f2b;
  border: 1px solid #2e3250;
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
}

/* ── Form elements ── */
label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .8rem;
  color: #aaa;
}
input[type=text], input[type=password], input[type=email], input[type=date],
textarea, select {
  background: #12141c;
  border: 1px solid #2e3250;
  border-radius: 6px;
  padding: .5rem .7rem;
  font-size: .82rem;
  color: #e0e0e0;
  font-family: inherit;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { border-color: #4a6cf7; }
textarea { resize: vertical; min-height: 4rem; line-height: 1.6; }
select option { background: #1c1f2b; }

.field-group { display: flex; flex-direction: column; gap: .7rem; }

/* ── Buttons ── */
button.primary, button.secondary, button.danger {
  border: none;
  border-radius: 6px;
  padding: .5rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
button.primary   { background: #f59e0b; color: #000; }
button.secondary { background: #2e3250; color: #ccc; }
button.danger    { background: #7f1d1d; color: #fca5a5; }
button:disabled  { opacity: .4; cursor: not-allowed; }
button.primary:hover:not(:disabled)   { opacity: .85; }
button.secondary:hover:not(:disabled) { opacity: .85; }
button.danger:hover:not(:disabled)    { opacity: .85; }

/* ── Status ── */
.status { font-size: .78rem; color: #888; }
.status.ok  { color: #4ade80; }
.status.err { color: #f87171; }

/* ── Section label ── */
.section-label {
  font-size: .72rem;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 1rem 0 .4rem;
}

/* ── Meta badge ── */
.meta-badge {
  font-size: .7rem;
  padding: .15rem .5rem;
  border-radius: 4px;
  background: #1e2344;
  color: #93c5fd;
}
.meta-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }

/* ── Divider ── */
.panel-divider { border-top: 1px solid #2e3250; margin: 1.2rem 0; padding-top: 1rem; }

/* ── Spinner ── */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid #333;
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: .4rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Table ── */
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
th { text-align: left; color: #666; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: .5rem .6rem; border-bottom: 1px solid #2e3250; }
td { padding: .55rem .6rem; border-bottom: 1px solid #1c1f2b; color: #ccc; vertical-align: middle; }
tr:hover td { background: #1c1f2b; }
.badge { display: inline-block; font-size: .65rem; padding: .1rem .4rem; border-radius: 3px; font-weight: 600; }
.badge-green  { background: #1a2e1a; color: #4ade80; }
.badge-yellow { background: #2a2200; color: #fbbf24; }
.badge-gray   { background: #1e1e1e; color: #666; }

/* ── Login page ── */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.login-card {
  background: #1c1f2b;
  border: 1px solid #2e3250;
  border-radius: 10px;
  padding: 2rem;
  width: 100%;
  max-width: 360px;
}
.login-card h1 { text-align: center; margin-bottom: 1.4rem; font-size: 1.1rem; }

/* ── Image preview ── */
.art-preview {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #2e3250;
  display: none;
  margin-top: .6rem;
}