/* ===== ADMIN THEME ===== */
.admin {
  --nav-bg: #0b1624;
  --nav-item: rgba(255, 255, 255, 0.66);
  --nav-item-active: #fff;
  --nav-item-bg-hover: rgba(255, 255, 255, 0.07);
  --nav-item-bg-active: rgba(139, 115, 61, 0.22);
  --panel: #fff;
  --panel-muted: #fbf9f4;
  --border: #e6e4dc;
  --text: #1c1c1a;
  --text-muted: #6b6e72;
  --accent: #8B733D;
  --accent-dark: #001d36;
  --danger: #b03030;
  --ok: #1e7a3c;
  --warn: #b06a10;
  font-family: 'Manrope', sans-serif;
  color: var(--text);
  background: var(--panel-muted);
  min-height: 100vh;
}

.admin-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.admin-side {
  background: var(--nav-bg); color: #fff;
  padding: 24px 18px;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.admin-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}
.admin-brand img { height: 30px; width: 30px; object-fit: contain; }
.admin-brand strong { font-family: 'Newsreader', serif; font-size: 17px; letter-spacing: 0.01em; }
.admin-brand small {
  display: block; font-size: 9px; letter-spacing: 0.25em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.45);
}
.admin-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.admin-nav a {
  color: var(--nav-item); text-decoration: none;
  padding: 10px 12px; border-radius: 10px;
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.admin-nav a:hover { background: var(--nav-item-bg-hover); color: var(--nav-item-active); }
.admin-nav a.active {
  background: var(--nav-item-bg-active); color: var(--nav-item-active);
  font-weight: 700;
}
.admin-nav .material-symbols-outlined { font-size: 20px; }
.admin-foot { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.admin-foot form { margin: 0; }
.admin-user {
  color: rgba(255, 255, 255, 0.6); font-size: 12px;
  padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 2px;
}
.admin-user strong { color: #fff; font-size: 13px; font-weight: 700; }
.admin-logout {
  width: 100%; color: rgba(255, 255, 255, 0.78);
  padding: 10px 12px; border-radius: 10px; font-size: 13px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255, 255, 255, 0.05); cursor: pointer;
  font-family: inherit; border: none;
}
.admin-logout:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.admin-main { padding: 32px 36px 48px; max-width: 1200px; }
.admin-main header.page-head { margin-bottom: 28px; }
.admin-main .kicker {
  color: var(--accent); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 8px;
}
.admin-main h1 {
  font-family: 'Newsreader', serif; font-size: 32px;
  color: var(--accent-dark); font-weight: 700; line-height: 1.15;
}
.admin-main h1 + p { color: var(--text-muted); font-size: 15px; margin-top: 6px; max-width: 60ch; }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px;
}
.card + .card { margin-top: 18px; }
.card h2 {
  font-family: 'Newsreader', serif; font-size: 20px;
  color: var(--accent-dark); margin-bottom: 10px;
}
.card p { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.stat {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px;
}
.stat-label {
  color: var(--text-muted); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
}
.stat-value {
  font-family: 'Newsreader', serif; font-size: 30px;
  color: var(--accent-dark); font-weight: 700; margin-top: 6px;
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-size: 12px; font-weight: 700; color: var(--accent-dark);
  letter-spacing: 0.03em;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 11px 13px; font-size: 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: #fff; font-family: inherit; color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(139, 115, 61, 0.15);
  outline: none;
}
.field textarea { resize: vertical; min-height: 80px; }
.field small { color: var(--text-muted); font-size: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; font-size: 13px; font-weight: 700;
  background: var(--accent-dark); color: #fff;
  border: none; border-radius: 9999px;
  font-family: inherit; cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn.btn-ghost { background: transparent; color: var(--accent-dark); border: 1px solid var(--border); }
.btn.btn-ghost:hover:not(:disabled) { background: var(--panel-muted); }
.btn.btn-danger { background: var(--danger); }
.btn.btn-sm { padding: 6px 12px; font-size: 11px; }
.btn .material-symbols-outlined { font-size: 16px; }

.section-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0 14px;
}
.section-divider h2 {
  font-family: 'Newsreader', serif; font-size: 22px;
  color: var(--accent-dark); font-weight: 700;
}
.section-divider .count {
  background: rgba(0, 29, 54, 0.06); color: var(--accent-dark);
  padding: 3px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 700;
}

.score-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.score-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 9999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  border: 1px solid var(--border);
}
.score-chip.seo-good, .score-chip.geo-good { background: rgba(30, 122, 60, 0.08); color: var(--ok); border-color: rgba(30, 122, 60, 0.22); }
.score-chip.seo-warn, .score-chip.geo-warn { background: rgba(176, 106, 16, 0.08); color: var(--warn); border-color: rgba(176, 106, 16, 0.22); }
.score-chip.seo-bad, .score-chip.geo-bad { background: rgba(176, 48, 48, 0.08); color: var(--danger); border-color: rgba(176, 48, 48, 0.22); }

.tip-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.tip-list li {
  font-size: 12px; color: var(--text-muted);
  padding-left: 14px; position: relative; line-height: 1.5;
}
.tip-list li::before { content: '•'; position: absolute; left: 0; color: var(--accent); }

.slot-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.slot-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px;
}
.slot-card header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 10px;
}
.slot-card .slot-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; color: var(--text-muted);
}
.slot-card .slot-label { font-size: 13px; font-weight: 700; color: var(--accent-dark); }

.alert-row {
  background: rgba(30, 122, 60, 0.08); color: var(--ok);
  border: 1px solid rgba(30, 122, 60, 0.18);
  padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  margin-bottom: 18px;
}
.alert-row.err {
  background: rgba(176, 48, 48, 0.08); color: var(--danger);
  border-color: rgba(176, 48, 48, 0.18);
}

.sub-table {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
}
.sub-row {
  display: grid; grid-template-columns: 180px 1fr 180px 120px;
  padding: 14px 18px; gap: 16px;
  border-bottom: 1px solid var(--border);
}
.sub-row:last-child { border-bottom: none; }
.sub-row header {
  display: flex; flex-direction: column; gap: 2px;
}
.sub-row time {
  color: var(--text-muted); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
}
.sub-row .name { color: var(--accent-dark); font-weight: 700; font-size: 14px; }
.sub-row .dog { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sub-row .phone { color: var(--accent-dark); font-size: 13px; font-weight: 600; text-decoration: none; }
.sub-row .phone:hover { text-decoration: underline; }
.sub-row .msg { font-size: 14px; color: var(--text); line-height: 1.55; white-space: pre-wrap; }
.sub-row .meta { color: var(--text-muted); font-size: 12px; }

.image-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.image-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px;
}
.image-card .preview {
  background: var(--panel-muted); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.image-card .preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.image-card header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.image-card .slot-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10px; color: var(--text-muted); }
.image-card .slot-label { font-size: 13px; font-weight: 700; color: var(--accent-dark); }
.image-card .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.login-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-muted);
  padding: 32px;
}
.login-card {
  background: #fff; border: 1px solid var(--border);
  padding: 40px; border-radius: 20px;
  max-width: 400px; width: 100%;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.05);
}
.login-card h1 {
  font-family: 'Newsreader', serif;
  color: var(--accent-dark); font-size: 26px;
  margin-bottom: 6px;
}
.login-card p { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
.login-card .btn { width: 100%; justify-content: center; padding: 14px; }

.warranty-status {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-radius: 14px;
  background: rgba(30, 122, 60, 0.08); color: var(--ok);
  border: 1px solid rgba(30, 122, 60, 0.22);
}
.warranty-status .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(30, 122, 60, 0.15); }
.warranty-status strong { font-size: 15px; }
.warranty-status small { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }

.cover-table { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.cover-col {
  padding: 18px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--panel);
}
.cover-col.yes { border-color: rgba(30, 122, 60, 0.22); background: rgba(30, 122, 60, 0.04); }
.cover-col.no { border-color: rgba(176, 48, 48, 0.22); background: rgba(176, 48, 48, 0.04); }
.cover-col h3 { font-size: 14px; margin-bottom: 10px; }
.cover-col ul { margin: 0; padding-left: 18px; }
.cover-col li { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 4px; }

@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { position: relative; height: auto; }
  .grid-2, .grid-3, .grid-4, .image-grid, .cover-table { grid-template-columns: 1fr; }
  .sub-row { grid-template-columns: 1fr; }
}
