:root {
  --admin-bg: #f4ecdf;
  --admin-surface: rgba(255, 252, 246, 0.9);
  --admin-surface-strong: rgba(255, 255, 255, 0.82);
  --admin-border: rgba(162, 121, 54, 0.16);
  --admin-border-strong: rgba(162, 121, 54, 0.28);
  --admin-shadow: 0 26px 60px rgba(26, 39, 58, 0.12);
  --admin-shadow-soft: 0 18px 32px rgba(26, 39, 58, 0.08);
  --admin-ink: #1b2940;
  --admin-muted: #627085;
  --admin-accent: #b8833d;
  --admin-accent-strong: #9a6d2c;
  --admin-accent-soft: rgba(184, 131, 61, 0.12);
  --admin-success: #2f7a50;
  --admin-danger: #a94242;
  --admin-radius-xl: 30px;
  --admin-radius-lg: 24px;
  --admin-radius-md: 18px;
  --admin-radius-pill: 999px;
}

body.admin-dashboard-page,
body.admin-content-page,
body.admin-media-page,
body.admin-gallery-page {
  min-height: 100vh;
  color: var(--admin-ink);
  font-family: "Segoe UI", "Trebuchet MS", Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(214, 170, 99, 0.22), transparent 26%),
    radial-gradient(circle at 100% 0%, rgba(22, 38, 63, 0.08), transparent 20%),
    linear-gradient(180deg, #fffdf8 0%, var(--admin-bg) 100%);
  position: relative;
  overflow-x: hidden;
}

body.admin-dashboard-page::before,
body.admin-content-page::before,
body.admin-media-page::before,
body.admin-gallery-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
    linear-gradient(90deg, rgba(26, 39, 58, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(26, 39, 58, 0.035) 1px, transparent 1px);
  background-size: auto, 26px 26px, 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 88%);
}

body.admin-dashboard-page::after,
body.admin-content-page::after,
body.admin-media-page::after,
body.admin-gallery-page::after {
  content: "";
  position: fixed;
  right: -120px;
  top: 84px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 170, 99, 0.18) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(4px);
}

.section-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--admin-radius-pill);
  background: rgba(27, 41, 64, 0.06);
  color: var(--admin-accent-strong);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-card,
.dashboard-login-card,
.dashboard-stat,
.dashboard-module,
.dashboard-guide,
.content-topbar,
.content-shortcuts,
.content-group,
.content-savebar,
.content-flash,
.media-card,
.media-group,
.media-flash,
.media-savebar,
.admin-topbar,
.admin-login-card,
.admin-panel,
.admin-card,
.admin-image-card {
  backdrop-filter: blur(16px);
  box-shadow: var(--admin-shadow);
  border: 1px solid var(--admin-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 250, 243, 0.88) 100%);
}

.dashboard-card,
.dashboard-login-card,
.dashboard-guide,
.content-topbar,
.content-shortcuts,
.content-group,
.content-savebar,
.media-card,
.media-group,
.media-savebar,
.admin-topbar,
.admin-login-card,
.admin-panel,
.admin-card {
  position: relative;
  overflow: hidden;
}

.dashboard-card::before,
.dashboard-login-card::before,
.dashboard-guide::before,
.content-topbar::before,
.content-shortcuts::before,
.content-group::before,
.media-card::before,
.media-group::before,
.admin-topbar::before,
.admin-login-card::before,
.admin-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 160px;
  height: 4px;
  background: linear-gradient(90deg, var(--admin-accent) 0%, rgba(184, 131, 61, 0.12) 100%);
}

.dashboard-shell,
.content-shell,
.media-shell,
.admin-shell {
  position: relative;
  z-index: 1;
}

.dashboard-hero-copy h1,
.dashboard-login-card h1,
.dashboard-module h2,
.dashboard-guide h2,
.content-topbar h1,
.content-shortcuts h2,
.content-group h2,
.media-topbar h1,
.media-group h2,
.admin-topbar h1,
.admin-login-card h1,
.admin-card h2,
.admin-image-copy h3 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.02em;
  color: var(--admin-ink);
}

.dashboard-hero-copy p,
.dashboard-login-card p,
.dashboard-module p,
.dashboard-guide p,
.dashboard-stat p,
.content-topbar p,
.content-shortcuts p,
.content-group p,
.media-topbar p,
.media-group p,
.admin-topbar p,
.admin-login-card p,
.admin-card p,
.admin-sidebar-copy p,
.admin-image-copy p,
.admin-hint,
.admin-empty {
  color: var(--admin-muted);
}

.pill-btn,
.admin-btn,
.admin-btn-muted,
.admin-btn-danger {
  min-height: 46px;
  border-radius: var(--admin-radius-pill);
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.pill-btn:hover,
.admin-btn:hover,
.admin-btn-muted:hover,
.admin-btn-danger:hover {
  transform: translateY(-2px);
}

body.admin-dashboard-page .pill-btn,
body.admin-content-page .pill-btn,
body.admin-media-page .pill-btn,
body.admin-gallery-page .pill-btn {
  border: 1px solid rgba(27, 41, 64, 0.08);
  background: rgba(255, 255, 255, 0.84);
  color: var(--admin-ink);
  box-shadow: var(--admin-shadow-soft);
}

body.admin-dashboard-page .pill-btn.solid,
body.admin-content-page .pill-btn.solid,
body.admin-media-page .pill-btn.solid,
body.admin-gallery-page .pill-btn.solid,
.admin-btn {
  background: linear-gradient(135deg, #c69146 0%, #9f712f 100%);
  color: #fffdfa;
  border-color: transparent;
}

body.admin-dashboard-page .pill-btn.solid:hover,
body.admin-content-page .pill-btn.solid:hover,
body.admin-media-page .pill-btn.solid:hover,
body.admin-gallery-page .pill-btn.solid:hover,
.admin-btn:hover {
  box-shadow: 0 18px 28px rgba(159, 113, 47, 0.24);
}

.admin-btn-muted {
  background: rgba(27, 41, 64, 0.08);
  color: var(--admin-ink);
}

.admin-btn-danger {
  background: rgba(169, 66, 66, 0.12);
  color: var(--admin-danger);
}

.dashboard-panel,
.content-topbar-side,
.media-panel,
.admin-project-group,
.dashboard-guide-step,
.content-shortcut-card,
.media-field,
.admin-subproject-link,
.admin-image-copy,
.dashboard-stat,
.dashboard-module {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.dashboard-panel,
.content-topbar-side,
.media-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(245, 237, 225, 0.96) 100%);
  border: 1px solid var(--admin-border-strong);
}

.dashboard-module,
.dashboard-stat,
.dashboard-guide-step,
.content-shortcut-card,
.media-field,
.admin-card,
.admin-image-copy,
.admin-project-group,
.admin-subproject-link {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(250, 244, 235, 0.84) 100%);
  border: 1px solid var(--admin-border);
}

.dashboard-module:hover,
.dashboard-stat:hover,
.content-shortcut-card:hover,
.media-field:hover,
.admin-card:hover,
.admin-image-card:hover,
.admin-project-group:hover {
  box-shadow: 0 22px 38px rgba(26, 39, 58, 0.1);
}

.dashboard-module-tag,
.content-shortcut-tag,
.content-badge,
.admin-count {
  border: 1px solid rgba(184, 131, 61, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dashboard-module-tag,
.content-shortcut-tag {
  background: rgba(184, 131, 61, 0.12);
  color: var(--admin-accent-strong);
}

.content-badge {
  background: rgba(27, 41, 64, 0.07);
  color: var(--admin-ink);
}

.dashboard-panel-list li,
.content-topbar-list li {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(27, 41, 64, 0.06);
}

.dashboard-stats strong,
.admin-count,
.media-panel strong,
.dashboard-panel strong {
  color: var(--admin-ink);
}

.dashboard-flash,
.content-flash,
.media-flash,
.admin-flash {
  border-radius: 20px;
  box-shadow: var(--admin-shadow-soft);
}

.dashboard-flash.success,
.content-flash.success,
.media-flash.success,
.admin-flash.success {
  background: rgba(47, 122, 80, 0.12);
  color: var(--admin-success);
}

.dashboard-flash.error,
.content-flash.error,
.media-flash.error,
.admin-flash.error {
  background: rgba(169, 66, 66, 0.12);
  color: var(--admin-danger);
}

.dashboard-input,
.content-input,
.content-textarea,
.media-input,
.admin-input,
.admin-file {
  border: 1px solid rgba(27, 41, 64, 0.1);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: inset 0 1px 2px rgba(27, 41, 64, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.dashboard-input:focus,
.content-input:focus,
.content-textarea:focus,
.media-input:focus,
.admin-input:focus,
.admin-file:focus {
  outline: none;
  border-color: rgba(184, 131, 61, 0.46);
  box-shadow:
    0 0 0 4px rgba(184, 131, 61, 0.12),
    inset 0 1px 2px rgba(27, 41, 64, 0.04);
  background: rgba(255, 255, 255, 0.98);
}

.content-savebar,
.media-savebar {
  backdrop-filter: blur(18px);
  background: rgba(255, 251, 246, 0.88);
  border-color: rgba(162, 121, 54, 0.2);
}

.admin-project-group.is-active,
.admin-subproject-link.is-active {
  border-color: rgba(184, 131, 61, 0.32);
  box-shadow:
    0 18px 28px rgba(26, 39, 58, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.admin-image-card {
  border-radius: 26px;
}

.admin-image-card img,
.media-preview img,
.media-preview video {
  border-radius: 20px;
}

.admin-image-actions,
.media-preview {
  position: relative;
}

.admin-image-actions::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(27, 41, 64, 0.08), transparent);
}

.dashboard-section-head,
.content-shortcuts-head,
.content-group-head,
.media-group-head,
.admin-panel-head {
  position: relative;
}

.dashboard-quicklinks .pill-btn,
.content-actions .pill-btn,
.dashboard-actions .pill-btn,
.media-actions .pill-btn {
  background: rgba(255, 255, 255, 0.76);
}

@media (max-width: 760px) {
  .section-kicker {
    font-size: 0.74rem;
  }
}