.hidden { display: none !important; }

.admin-wrap { padding: 48px 24px 80px; max-width: 900px; }

.admin-card {
  background: #fff;
  border: 1.5px solid var(--cream-dim);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  margin-bottom: 28px;
}
.login-card { max-width: 420px; margin: 60px auto; }

.admin-h1 { font-family: var(--font-display); font-size: 30px; text-transform: uppercase; margin: 0 0 6px; }
.admin-h2 { font-family: var(--font-display); font-size: 22px; text-transform: uppercase; margin: 0 0 16px; }
.admin-sub { color: #6b6255; margin: 0 0 20px; font-size: 14px; }

form { display: flex; flex-direction: column; gap: 14px; }
label { font-size: 13px; font-weight: 700; display: flex; flex-direction: column; gap: 6px; color: #3a352e; }
.checkbox-row { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="datetime-local"], input[type="file"], textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 1.5px solid var(--cream-dim);
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
}
textarea { resize: vertical; }
button.btn { align-self: flex-start; border: none; }
.form-msg { font-size: 13px; margin: 0; min-height: 16px; }
.form-msg.error { color: var(--brick); }
.form-msg.success { color: var(--leaf); }

.admin-tabs { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.tab-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.tab-btn.active { background: var(--ink); color: var(--cream); }

.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--cream-dim);
  border-radius: 8px;
  padding: 14px 16px;
}
.admin-row-title { font-weight: 700; font-size: 14px; }
.admin-row-meta { font-size: 12px; color: #8a8072; margin-top: 2px; }
.admin-row-delete {
  border: none;
  background: none;
  color: var(--brick);
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
}

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.photo-thumb { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb button {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
}

#user-bar { color: var(--cream-dim); font-size: 13px; display: flex; align-items: center; gap: 12px; }
#user-bar button { background: none; border: 1.5px solid var(--cream-dim); color: var(--cream); border-radius: 999px; padding: 6px 14px; font-size: 12px; cursor: pointer; }