/*
 * Campus Beauty V2.6
 * One consolidated correction layer for the school beauty contest.
 * Prior experimental patch files are intentionally not loaded.
 */

:root {
  --accent: #adff1f;
  --paper: #f1f1eb;
  --paper-bright: #fbfbf6;
  --ink: #11120f;
  --muted: #62645d;
  --line: #c8cac1;
  --content-max: 1400px;
  --header-h: 72px;
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

body {
  background-size: 96px 100%, 100% 48px;
}

body::before,
.archive-chrome,
.archive-crop,
.archive-rail,
.archive-coordinate {
  display: none !important;
}

.container {
  width: min(calc(100% - 40px), var(--content-max)) !important;
  max-width: var(--content-max) !important;
}

/* --------------------------------------------------------------------------
   Public header: compact index strip, not oversized buttons
   -------------------------------------------------------------------------- */

.app .header {
  position: sticky !important;
  top: 0;
  z-index: 100;
  color: var(--ink) !important;
  background: rgba(251, 251, 246, 0.98) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
}

.app .header::before,
.app .header::after {
  content: none !important;
  display: none !important;
}

.app .header-inner {
  width: min(calc(100% - 40px), var(--content-max)) !important;
  max-width: var(--content-max) !important;
  height: var(--header-h) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  border-inline: 1px solid var(--ink) !important;
}

.app .header-left {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding: 12px 22px 10px !important;
  border: 0 !important;
  border-right: 1px solid var(--ink) !important;
}

.app .logo {
  min-width: 0 !important;
  width: 100% !important;
  display: block !important;
  text-decoration: none !important;
}

.app .logo-text {
  min-width: 0 !important;
  display: block !important;
  color: var(--ink) !important;
  font-size: clamp(20px, 2vw, 29px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
  text-shadow: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.app .logo-text::before {
  content: "XAPU NO.1 HIGH SCHOOL / CAMPUS BEAUTY 2026" !important;
  display: block !important;
  margin: 0 0 7px !important;
  color: var(--muted) !important;
  font-size: 7px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  white-space: nowrap !important;
}

.app .header-nav {
  width: 250px !important;
  min-width: 250px !important;
  display: grid !important;
  grid-template-columns: 92px 158px !important;
  align-items: stretch !important;
  gap: 0 !important;
  border: 0 !important;
}

.app .nav-link {
  position: relative !important;
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 13px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--ink) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: background 130ms ease !important;
}

.app .nav-link::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 0 !important;
  height: auto !important;
  background: var(--accent) !important;
  transform: none !important;
  transition: width 130ms ease !important;
}

.app .nav-link::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 8px !important;
  display: block !important;
  width: auto !important;
  height: 3px !important;
  background: var(--accent) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 130ms ease !important;
}

.app .nav-link:hover,
.app .nav-link:focus-visible {
  color: var(--ink) !important;
  background: #ecece5 !important;
}

.app .nav-link:hover::before,
.app .nav-link:focus-visible::before {
  width: 5px !important;
}

.app .nav-link.is-current,
.app .nav-link[aria-current="page"] {
  color: var(--ink) !important;
  background: transparent !important;
}

.app .nav-link.is-current::before,
.app .nav-link[aria-current="page"]::before {
  width: 5px !important;
}

.app .nav-link.is-current::after,
.app .nav-link[aria-current="page"]::after {
  transform: scaleX(1) !important;
}

.app .topnav-number {
  position: relative !important;
  z-index: 1 !important;
  align-self: center !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
}

.app .nav-link.is-current .topnav-number,
.app .nav-link[aria-current="page"] .topnav-number {
  color: var(--ink) !important;
}

.app .topnav-cn {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.app .header-right,
.app .header-right .upload-btn,
.app .mobile-menu-btn,
.app .mobile-menu {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Announcement
   -------------------------------------------------------------------------- */

.app .announcement-bar {
  min-height: 34px !important;
  padding: 0 !important;
  color: var(--ink) !important;
  background: var(--accent) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  box-shadow: none !important;
  animation: none !important;
}

.app .announcement-bar::before,
.app .announcement-bar::after {
  content: none !important;
}

.app .announcement-inner {
  width: min(calc(100% - 40px), var(--content-max)) !important;
  max-width: var(--content-max) !important;
  min-height: 34px !important;
  margin: 0 auto !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border-inline: 1px solid var(--ink) !important;
}

.app .announcement-icon {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding-right: 9px !important;
  color: var(--ink) !important;
  font-family: Georgia, serif !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--ink) !important;
  filter: none !important;
}

.app .announcement-text {
  min-width: 0 !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* --------------------------------------------------------------------------
   Home: candidates begin immediately and always remain tiled
   -------------------------------------------------------------------------- */

.home-page {
  min-height: 0 !important;
  padding: 16px 0 54px !important;
  animation: none !important;
}

.home-page::before,
.home-page::after {
  content: none !important;
  display: none !important;
}

.home-page .toolbar {
  position: relative !important;
  min-height: 54px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-top: 4px solid var(--ink) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.home-page .toolbar::before {
  content: "01 / CANDIDATE INDEX" !important;
  position: absolute !important;
  top: 6px !important;
  left: 13px !important;
  color: var(--muted) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
}

.home-page .toolbar::after {
  content: none !important;
}

.home-page .toolbar-left {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  gap: 10px !important;
  padding: 20px 13px 8px !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0 !important;
}

.home-page .toolbar-left::before,
.home-page .toolbar-left::after {
  content: none !important;
}

.home-page .page-title {
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(23px, 2.4vw, 36px) !important;
  font-weight: 950 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.home-page .page-title::before,
.home-page .page-title::after {
  content: none !important;
}

.home-page .photo-count {
  flex: 0 0 auto !important;
  margin: 0 0 1px !important;
  padding: 3px 7px !important;
  color: var(--ink) !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
  background: var(--accent) !important;
  border: 1px solid var(--ink) !important;
}

.home-page .toolbar-right {
  min-width: 240px !important;
  min-height: 0 !important;
  align-self: stretch !important;
  display: flex !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--ink) !important;
}

.home-page .toolbar-right::before,
.home-page .toolbar-right::after {
  content: none !important;
}

.home-page .sort-buttons {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(72px, 1fr)) !important;
  grid-auto-flow: initial !important;
  gap: 0 !important;
  border: 0 !important;
}

.home-page .sort-btn {
  position: relative !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 9px 7px !important;
  color: var(--ink) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--ink) !important;
  box-shadow: none !important;
  transform: none !important;
}

.home-page .sort-btn:last-child {
  border-right: 0 !important;
}

.home-page .sort-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 50% !important;
  width: 4px !important;
  height: 4px !important;
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  transform: translateX(-50%) !important;
}

.home-page .sort-btn::after {
  content: none !important;
}

.home-page .sort-btn:hover,
.home-page .sort-btn:focus-visible {
  color: var(--ink) !important;
  background: #ecece5 !important;
}

.home-page .sort-btn.active {
  color: var(--paper-bright) !important;
  background: var(--ink) !important;
}

.home-page .sort-btn.active::before {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.home-page .masonry-grid,
.home-page .masonry-grid[data-item-count="1"],
.home-page .masonry-grid[data-item-count="2"],
.home-page .masonry-grid[data-item-count="3"],
.home-page .masonry-grid[data-item-count="4"] {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 12px !important;
  padding: 0 !important;
  column-count: unset !important;
  column-gap: unset !important;
  border: 0 !important;
}

.home-page .masonry-grid::before,
.home-page .masonry-grid::after {
  content: none !important;
  display: none !important;
}

.home-page .photo-card,
.home-page .photo-card:nth-child(n),
.home-page .masonry-grid[data-item-count="1"] .photo-card {
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
  color: var(--ink) !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden !important;
  break-inside: auto !important;
  animation: none !important;
}

.home-page .photo-card::before {
  content: "NO. " counter(archive-card, decimal-leading-zero) !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 3 !important;
  padding: 4px 6px !important;
  color: var(--paper-bright) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  background: var(--ink) !important;
  border: 0 !important;
}

.home-page .photo-card::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 22px !important;
  height: 5px !important;
  background: var(--accent) !important;
  border: 0 !important;
  border-left: 1px solid var(--ink) !important;
  border-bottom: 1px solid var(--ink) !important;
}

.home-page .photo-card:hover,
.home-page .photo-card:focus-visible,
.home-page .photo-card:nth-child(n):hover,
.home-page .photo-card:nth-child(n):focus-visible {
  z-index: 2 !important;
  border-color: var(--ink) !important;
  box-shadow: 5px 5px 0 var(--accent) !important;
  transform: translate(-2px, -2px) !important;
}

.home-page .photo-wrapper {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(64px, auto) !important;
  overflow: hidden !important;
  background: var(--paper-bright) !important;
}

.home-page .photo-wrapper::before,
.home-page .photo-wrapper::after {
  content: none !important;
  display: none !important;
}

.home-page .photo-image,
.home-page .masonry-grid[data-item-count="1"] .photo-image {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
  transform: none !important;
}

.home-page .photo-card:hover .photo-image,
.home-page .photo-card:focus-visible .photo-image {
  filter: none !important;
  transform: scale(1.012) !important;
}

.home-page .photo-overlay {
  position: static !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 11px 11px !important;
  color: var(--ink) !important;
  background: var(--paper-bright) !important;
  border: 0 !important;
  border-top: 1px solid var(--ink) !important;
  opacity: 1 !important;
}

.home-page .photo-overlay::before,
.home-page .photo-overlay::after {
  content: none !important;
  display: none !important;
}

.home-page .photo-info {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.home-page .photo-title {
  max-width: 100% !important;
  margin: 0 0 6px !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}

.home-page .photo-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 13px !important;
}

.home-page .stat {
  color: var(--muted) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}

.home-page .stat-icon {
  margin-right: 3px !important;
  color: var(--ink) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  filter: none !important;
}

.home-page .load-more,
.home-page .no-more {
  margin: 18px 0 0 !important;
  padding: 11px 0 0 !important;
  color: var(--muted) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  border-top: 1px solid var(--ink) !important;
  text-align: center !important;
}

.home-page .load-more::before,
.home-page .no-more::before {
  content: none !important;
}

/* --------------------------------------------------------------------------
   Upload: stable two-column registration desk
   -------------------------------------------------------------------------- */

.upload-page {
  min-height: 0 !important;
  padding: 22px 0 64px !important;
  animation: none !important;
}

.upload-page::before,
.upload-page::after {
  content: none !important;
  display: none !important;
}

.upload-page .upload-header {
  min-height: 88px !important;
  display: grid !important;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr) !important;
  align-items: end !important;
  gap: 28px !important;
  margin: 0 0 16px !important;
  padding: 23px 18px 15px !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-top: 5px solid var(--ink) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.upload-page .upload-header::before {
  content: "02 / CANDIDATE REGISTRATION" !important;
  position: absolute !important;
  top: 7px !important;
  left: 18px !important;
  color: var(--muted) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
}

.upload-page .upload-header::after {
  content: none !important;
}

.upload-page .upload-header .page-title {
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(34px, 4vw, 58px) !important;
  font-weight: 950 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.065em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.upload-page .upload-header .page-title::before,
.upload-page .upload-header .page-title::after {
  content: none !important;
}

.upload-page .upload-header .page-desc {
  max-width: 680px !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

.upload-page .upload-header .page-desc::before,
.upload-page .upload-header .page-desc::after {
  content: none !important;
}

.upload-page .upload-content {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(360px, 7fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.upload-page .preview-section,
.upload-page .form-section {
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
}

.upload-page .preview-section {
  position: static !important;
  min-height: 570px !important;
  padding: 0 !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-top: 5px solid var(--ink) !important;
  box-shadow: none !important;
}

.upload-page .preview-section::before {
  content: "PHOTO PREVIEW / 01" !important;
  position: absolute !important;
  top: 11px !important;
  left: 13px !important;
  z-index: 2 !important;
  padding: 0 !important;
  color: var(--muted) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  background: transparent !important;
  border: 0 !important;
}

.upload-page .preview-section::after {
  content: none !important;
}

.upload-page .preview-container {
  position: relative !important;
  min-height: 565px !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding: 34px 18px 18px !important;
  background: #e9e9e2 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.upload-page .preview-container::before,
.upload-page .preview-container::after {
  content: none !important;
  display: none !important;
}

.upload-page .preview-image {
  width: 100% !important;
  height: 100% !important;
  max-height: 510px !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  filter: none !important;
}

.upload-page .preview-placeholder {
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  padding: 24px !important;
  color: var(--muted) !important;
  text-align: center !important;
  background:
    linear-gradient(to right, rgba(17,18,15,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,18,15,.07) 1px, transparent 1px),
    var(--paper-bright) !important;
  background-size: 32px 32px !important;
  border: 1px dashed var(--ink) !important;
}

.upload-page .preview-placeholder::before,
.upload-page .preview-placeholder::after {
  content: none !important;
}

.upload-page .placeholder-icon {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  background: var(--accent) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  filter: none !important;
}

.upload-page .placeholder-icon::before,
.upload-page .placeholder-icon::after {
  content: none !important;
}

.upload-page .preview-placeholder p {
  max-width: 240px !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.4 !important;
}

.upload-page .form-section {
  min-height: 570px !important;
  padding: 0 !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-top: 5px solid var(--ink) !important;
  box-shadow: none !important;
}

.upload-page .form-section::before {
  content: "REGISTRATION FORM / 02" !important;
  display: block !important;
  padding: 9px 14px 10px !important;
  color: var(--muted) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
}

.upload-page .upload-form {
  display: block !important;
  padding: 0 !important;
}

.upload-page .upload-form > .form-group {
  position: relative !important;
  margin: 0 !important;
  padding: 17px 18px 19px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
}

.upload-page .upload-form > .form-group::before {
  content: counter(registration-field, decimal-leading-zero) !important;
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  color: var(--muted) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.upload-page .upload-form {
  counter-reset: registration-field !important;
}

.upload-page .upload-form > .form-group {
  counter-increment: registration-field !important;
}

.upload-page .form-label {
  display: block !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

.upload-page .form-label::after {
  content: none !important;
}

.upload-page .file-input-wrapper {
  min-width: 0 !important;
}

.upload-page .file-input-label {
  position: relative !important;
  min-height: 84px !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  color: var(--ink) !important;
  background: #ededE6 !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  overflow: hidden !important;
}

.upload-page .file-input-label::before {
  content: "选择照片" !important;
  position: absolute !important;
  top: 10px !important;
  right: 11px !important;
  color: var(--muted) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
}

.upload-page .file-input-label::after {
  content: "浏览文件  →" !important;
  position: absolute !important;
  right: 11px !important;
  bottom: 10px !important;
  color: var(--ink) !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
}

.upload-page .file-input-label:hover,
.upload-page .file-input-label:focus-within {
  color: var(--ink) !important;
  background: var(--accent) !important;
  border-color: var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  transform: translate(-2px, -2px) !important;
}

.upload-page .file-input-icon {
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  filter: none !important;
}

.upload-page .file-input-icon::before,
.upload-page .file-input-icon::after {
  content: none !important;
}

.upload-page .file-input-label > span:last-child {
  min-width: 0 !important;
  padding-right: 102px !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.upload-page .form-hint {
  margin: 8px 0 0 !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

.upload-page .input,
.upload-page textarea.input {
  width: 100% !important;
  min-height: 46px !important;
  padding: 11px 12px !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.upload-page textarea.input {
  min-height: 104px !important;
  resize: vertical !important;
}

.upload-page .input:focus,
.upload-page textarea.input:focus {
  background: #fff !important;
  border-color: var(--ink) !important;
  box-shadow: inset 5px 0 0 var(--accent) !important;
}

.upload-page .submit-btn {
  width: calc(100% - 36px) !important;
  min-height: 56px !important;
  margin: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 17px !important;
  color: var(--paper-bright) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.upload-page .submit-btn::before {
  content: "03 / SUBMIT" !important;
  position: static !important;
  color: var(--accent) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  background: transparent !important;
  border: 0 !important;
}

.upload-page .submit-btn::after {
  content: "→" !important;
  position: static !important;
  color: var(--paper-bright) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}

.upload-page .submit-btn:hover:not(:disabled) {
  color: var(--ink) !important;
  background: var(--accent) !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  transform: translate(-2px, -2px) !important;
}

.upload-page .submit-btn:hover:not(:disabled)::before,
.upload-page .submit-btn:hover:not(:disabled)::after {
  color: var(--ink) !important;
}

.upload-page .submit-btn:disabled {
  color: #77786f !important;
  cursor: not-allowed !important;
  background: #d7d8d0 !important;
  border-color: #a9aaa2 !important;
  opacity: 1 !important;
}

.upload-page .submit-btn:disabled::before,
.upload-page .submit-btn:disabled::after {
  color: #77786f !important;
}

/* --------------------------------------------------------------------------
   Detail page: restrained, aligned record layout
   -------------------------------------------------------------------------- */

.detail-page {
  min-height: 0 !important;
  padding: 22px 0 64px !important;
  animation: none !important;
}

.detail-page::before,
.detail-page::after {
  content: none !important;
  display: none !important;
}

.detail-page .back-btn {
  min-height: 38px !important;
  margin-bottom: 12px !important;
  padding: 8px 12px !important;
  color: var(--ink) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  box-shadow: none !important;
}

.detail-page .detail-content {
  display: grid !important;
  grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

.detail-page .photo-section,
.detail-page .info-section {
  min-width: 0 !important;
  padding: 0 !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-top: 5px solid var(--ink) !important;
  box-shadow: none !important;
}

.detail-page .photo-container {
  min-height: 560px !important;
  padding: 18px !important;
  display: grid !important;
  place-items: center !important;
  background: #e9e9e2 !important;
  border: 0 !important;
}

.detail-page .detail-photo {
  width: 100% !important;
  max-height: 720px !important;
  object-fit: contain !important;
  filter: none !important;
  border: 1px solid var(--ink) !important;
}

.detail-page .info-section {
  padding: 22px !important;
}

.detail-page .info-section .photo-title {
  font-size: clamp(32px, 4vw, 58px) !important;
  line-height: .95 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  min-height: 68px !important;
  padding: 20px 0 !important;
  color: var(--muted) !important;
  background: var(--paper-bright) !important;
  border: 0 !important;
  border-top: 1px solid var(--ink) !important;
}

.footer::before,
.footer::after {
  content: none !important;
  display: none !important;
}

.footer p {
  font-size: 9px !important;
  font-weight: 750 !important;
  line-height: 1.4 !important;
  letter-spacing: .08em !important;
}

/* --------------------------------------------------------------------------
   Admin: compact editorial console, stable dimensions
   -------------------------------------------------------------------------- */

.admin-layout {
  min-height: 100vh !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
}

.admin-layout .sidebar {
  width: 226px !important;
  color: var(--paper-bright) !important;
  background: var(--ink) !important;
  border: 0 !important;
  border-right: 5px solid var(--accent) !important;
  box-shadow: none !important;
}

.admin-layout .sidebar.closed {
  width: 72px !important;
}

.admin-layout .sidebar-header {
  min-height: 76px !important;
  padding: 14px 14px 13px !important;
  border: 0 !important;
  border-bottom: 1px solid #494a44 !important;
}

.admin-layout .sidebar-title {
  min-width: 0 !important;
  color: var(--paper-bright) !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.05em !important;
  white-space: nowrap !important;
}

.admin-layout .sidebar-title::before {
  content: "CAMPUS BEAUTY / ADMIN" !important;
  display: block !important;
  margin: 0 0 7px !important;
  color: var(--accent) !important;
  font-size: 6px !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
}

.admin-layout .toggle-btn {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  color: var(--paper-bright) !important;
  background: transparent !important;
  border: 1px solid #696a63 !important;
}

.admin-layout .toggle-btn:hover {
  color: var(--ink) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.admin-layout .sidebar-nav {
  gap: 0 !important;
  padding: 12px 10px !important;
}

.admin-layout .nav-item {
  min-height: 52px !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 6px !important;
  padding: 8px 10px !important;
  color: #d5d6ce !important;
  background: transparent !important;
  border: 1px solid #494a44 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.admin-layout .nav-item::before,
.admin-layout .nav-item::after {
  content: none !important;
}

.admin-layout .nav-item:hover {
  color: var(--paper-bright) !important;
  background: #252620 !important;
  border-color: #76786f !important;
}

.admin-layout .nav-item.active {
  color: var(--ink) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.admin-layout .nav-icon {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  color: inherit !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  background: transparent !important;
  border: 1px solid currentColor !important;
  filter: none !important;
}

.admin-layout .nav-label {
  min-width: 0 !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-layout .sidebar-footer {
  padding: 10px !important;
  border: 0 !important;
  border-top: 1px solid #494a44 !important;
}

.admin-layout .user-info {
  min-width: 0 !important;
  padding: 8px !important;
  color: #d5d6ce !important;
  background: #1c1d19 !important;
  border: 1px solid #494a44 !important;
}

.admin-layout .user-avatar {
  width: 28px !important;
  height: 28px !important;
  color: var(--ink) !important;
  background: var(--accent) !important;
  border: 0 !important;
  border-radius: 0 !important;
  filter: none !important;
}

.admin-layout .logout-btn {
  min-height: 38px !important;
  padding: 8px !important;
  color: #ff8c83 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.admin-layout > .main-content {
  min-width: 0 !important;
  margin-left: 226px !important;
  background: transparent !important;
}

.admin-layout .sidebar.closed + .main-content {
  margin-left: 72px !important;
}

.admin-layout .content-header {
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 12px 24px !important;
  background: rgba(251,251,246,.97) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  box-shadow: none !important;
}

.admin-layout .content-header::before,
.admin-layout .content-header::after {
  content: none !important;
}

.admin-layout .content-header .page-title {
  min-width: 0 !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: clamp(30px, 3.3vw, 48px) !important;
  font-weight: 950 !important;
  line-height: .95 !important;
  letter-spacing: -.06em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-layout .content-header .page-title::before {
  content: attr(data-admin-label) !important;
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--muted) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .15em !important;
}

.admin-layout .back-to-site {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 11px !important;
  color: var(--ink) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  box-shadow: none !important;
}

.admin-layout .back-to-site:hover {
  background: var(--accent) !important;
}

.admin-layout .content-body {
  max-width: 1500px !important;
  padding: 22px 24px 44px !important;
  margin: 0 auto !important;
  animation: none !important;
}

.admin-layout .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.admin-layout .stat-card,
.admin-layout .stat-card:nth-child(n) {
  min-width: 0 !important;
  min-height: 124px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  align-items: end !important;
  gap: 10px !important;
  padding: 24px 14px 14px !important;
  color: var(--ink) !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-top: 4px solid var(--ink) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.admin-layout .stat-card::before {
  content: attr(data-card-index) " / METRIC" !important;
  position: absolute !important;
  top: 8px !important;
  left: 12px !important;
  color: var(--muted) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .13em !important;
}

.admin-layout .stat-card::after {
  content: none !important;
  display: none !important;
}

.admin-layout .stat-card:hover {
  box-shadow: 4px 4px 0 var(--accent) !important;
  transform: translate(-2px,-2px) !important;
}

.admin-layout .stat-info {
  min-width: 0 !important;
  margin: 0 !important;
}

.admin-layout .stat-value {
  color: var(--ink) !important;
  font-size: clamp(42px, 4.5vw, 66px) !important;
  font-weight: 950 !important;
  line-height: .82 !important;
  letter-spacing: -.07em !important;
}

.admin-layout .stat-label {
  margin: 10px 0 0 !important;
  color: var(--ink) !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-layout .stat-card .stat-icon {
  width: 40px !important;
  height: 40px !important;
  align-self: end !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ink) !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  background: var(--accent) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  filter: none !important;
}

.admin-layout .section-title {
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

.admin-layout .quick-actions,
.admin-layout .trend-section {
  margin-top: 18px !important;
}

.admin-layout .quick-actions > .section-title {
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--ink) !important;
}

.admin-layout .actions-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 10px !important;
  border: 1px solid var(--ink) !important;
}

.admin-layout .action-card {
  min-width: 0 !important;
  min-height: 92px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0,1fr) !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 12px !important;
  color: var(--ink) !important;
  background: var(--paper-bright) !important;
  border: 0 !important;
  border-right: 1px solid var(--ink) !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-layout .action-card:last-child {
  border-right: 0 !important;
}

.admin-layout .action-card::before {
  content: attr(data-action-index) !important;
  position: absolute !important;
  top: 7px !important;
  right: 8px !important;
  color: var(--muted) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
}

.admin-layout .action-card:hover {
  color: var(--ink) !important;
  background: var(--accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

.admin-layout .action-icon {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--ink) !important;
  font-size: 8px !important;
  font-weight: 950 !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  filter: none !important;
}

.admin-layout .action-label {
  min-width: 0 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-layout .trend-section,
.admin-layout .data-table,
.admin-layout .settings-section,
.admin-layout .comment-card {
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-top: 5px solid var(--ink) !important;
  box-shadow: none !important;
}

.admin-layout .trend-section {
  padding: 18px !important;
}

.admin-layout .trend-chart {
  height: 230px !important;
  margin-top: 15px !important;
  padding: 16px 8px 0 !important;
  border-bottom: 1px solid var(--ink) !important;
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.login-page {
  background: var(--paper) !important;
}

.login-card {
  max-width: 440px !important;
  padding: 0 !important;
  background: var(--paper-bright) !important;
  border: 1px solid var(--ink) !important;
  border-top: 6px solid var(--ink) !important;
  box-shadow: 8px 8px 0 var(--accent) !important;
}

.login-header {
  padding: 22px 22px 18px !important;
  border-bottom: 1px solid var(--ink) !important;
}

.login-title {
  font-size: 42px !important;
}

.login-form {
  padding: 20px 22px !important;
}

.login-footer {
  padding: 12px 22px !important;
  border-top: 1px solid var(--ink) !important;
}

/* --------------------------------------------------------------------------
   Responsive corrections
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .home-page .masonry-grid,
  .home-page .masonry-grid[data-item-count="1"],
  .home-page .masonry-grid[data-item-count="2"],
  .home-page .masonry-grid[data-item-count="3"],
  .home-page .masonry-grid[data-item-count="4"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .admin-layout .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  :root {
    --header-h: 62px;
  }

  .container,
  .app .header-inner,
  .app .announcement-inner {
    width: min(calc(100% - 20px), var(--content-max)) !important;
  }

  .app .header-left {
    padding: 10px 12px 8px !important;
  }

  .app .logo-text {
    font-size: clamp(16px, 4.2vw, 21px) !important;
  }

  .app .logo-text::before {
    margin-bottom: 5px !important;
    font-size: 5px !important;
    letter-spacing: .12em !important;
  }

  .app .header-nav {
    width: 190px !important;
    min-width: 190px !important;
    grid-template-columns: 68px 122px !important;
  }

  .app .nav-link {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 0 8px !important;
  }

  .app .topnav-number {
    font-size: 6px !important;
  }

  .app .topnav-cn {
    font-size: 12px !important;
  }

  .home-page .masonry-grid,
  .home-page .masonry-grid[data-item-count="1"],
  .home-page .masonry-grid[data-item-count="2"],
  .home-page .masonry-grid[data-item-count="3"],
  .home-page .masonry-grid[data-item-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .upload-page .upload-header {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    align-items: start !important;
  }

  .upload-page .upload-header .page-title {
    font-size: clamp(34px, 9vw, 48px) !important;
  }

  .upload-page .upload-content,
  .detail-page .detail-content {
    grid-template-columns: 1fr !important;
  }

  .upload-page .preview-section,
  .upload-page .form-section {
    min-height: 0 !important;
  }

  .upload-page .preview-container {
    min-height: 460px !important;
  }

  .upload-page .preview-placeholder {
    min-height: 400px !important;
  }

  .admin-layout .sidebar,
  .admin-layout .sidebar.closed {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 120 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    color: var(--paper-bright) !important;
    background: var(--ink) !important;
    border: 0 !important;
    border-bottom: 4px solid var(--accent) !important;
  }

  .admin-layout .sidebar-header {
    min-height: 60px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-right: 1px solid #494a44 !important;
  }

  .admin-layout .sidebar-title {
    font-size: 17px !important;
  }

  .admin-layout .toggle-btn {
    display: none !important;
  }

  .admin-layout .sidebar-nav {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    padding: 0 !important;
  }

  .admin-layout .nav-item {
    min-width: 0 !important;
    min-height: 60px !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 7px 5px !important;
    border: 0 !important;
    border-right: 1px solid #494a44 !important;
  }

  .admin-layout .nav-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 6px !important;
  }

  .admin-layout .nav-label {
    max-width: 100% !important;
    font-size: 9px !important;
  }

  .admin-layout .sidebar-footer {
    min-width: 54px !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .admin-layout .user-info {
    display: none !important;
  }

  .admin-layout .logout-btn {
    width: 54px !important;
    min-height: 60px !important;
    justify-content: center !important;
    border-left: 1px solid #494a44 !important;
  }

  .admin-layout .logout-btn span:last-child {
    display: none !important;
  }

  .admin-layout > .main-content,
  .admin-layout .sidebar.closed + .main-content {
    margin-left: 0 !important;
  }

  .admin-layout .content-header {
    min-height: 64px !important;
    padding: 10px 12px !important;
  }

  .admin-layout .content-header .page-title {
    font-size: clamp(27px, 7vw, 38px) !important;
  }

  .admin-layout .content-body {
    padding: 14px 10px 34px !important;
  }

  .admin-layout .actions-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  .admin-layout .action-card:nth-child(2) {
    border-right: 0 !important;
  }

  .admin-layout .action-card:nth-child(-n+2) {
    border-bottom: 1px solid var(--ink) !important;
  }
}

@media (max-width: 620px) {
  .app .header-inner {
    grid-template-columns: minmax(0, 1fr) 156px !important;
  }

  .app .header-nav {
    width: 156px !important;
    min-width: 156px !important;
    grid-template-columns: 54px 102px !important;
  }

  .app .nav-link {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    padding: 0 5px !important;
  }

  .app .topnav-number {
    display: none !important;
  }

  .app .topnav-cn {
    font-size: 11px !important;
  }

  .app .logo-text {
    font-size: 16px !important;
  }

  .app .logo-text::before {
    content: "CAMPUS BEAUTY / 2026" !important;
  }

  .app .announcement-inner {
    padding: 0 9px !important;
  }

  .app .announcement-text {
    font-size: 10px !important;
  }

  .home-page {
    padding-top: 10px !important;
  }

  .home-page .toolbar {
    grid-template-columns: 1fr !important;
  }

  .home-page .toolbar-left {
    min-height: 54px !important;
    padding: 20px 11px 8px !important;
  }

  .home-page .toolbar-right {
    min-width: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ink) !important;
  }

  .home-page .sort-btn {
    min-height: 42px !important;
    padding-top: 15px !important;
  }

  .home-page .sort-btn::before {
    top: 7px !important;
  }

  .home-page .page-title {
    font-size: 25px !important;
  }

  .home-page .photo-count {
    font-size: 7px !important;
  }

  .home-page .photo-overlay {
    min-height: 58px !important;
    padding: 8px 9px 9px !important;
  }

  .home-page .photo-title {
    font-size: 12px !important;
  }

  .home-page .photo-stats {
    gap: 8px !important;
  }

  .home-page .stat {
    font-size: 8px !important;
  }

  .upload-page .upload-header {
    min-height: 0 !important;
    padding: 22px 13px 13px !important;
  }

  .upload-page .upload-header .page-title {
    font-size: 38px !important;
  }

  .upload-page .upload-header .page-desc {
    font-size: 10px !important;
  }

  .upload-page .preview-container {
    min-height: 380px !important;
    padding: 32px 12px 12px !important;
  }

  .upload-page .preview-placeholder {
    min-height: 330px !important;
  }

  .upload-page .file-input-label {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    min-height: 76px !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .upload-page .file-input-icon {
    width: 46px !important;
    height: 46px !important;
  }

  .upload-page .file-input-label > span:last-child {
    padding-right: 78px !important;
    font-size: 11px !important;
  }

  .upload-page .file-input-label::after {
    font-size: 8px !important;
  }

  .admin-layout .sidebar-header {
    display: none !important;
  }

  .admin-layout .sidebar,
  .admin-layout .sidebar.closed {
    grid-template-columns: minmax(0,1fr) 48px !important;
  }

  .admin-layout .sidebar-nav {
    grid-column: 1 !important;
  }

  .admin-layout .sidebar-footer {
    grid-column: 2 !important;
  }

  .admin-layout .nav-label {
    font-size: 8px !important;
  }

  .admin-layout .content-header .page-title {
    font-size: 28px !important;
  }

  .admin-layout .back-to-site {
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: 9px !important;
  }

  .admin-layout .stats-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
  }

  .admin-layout .stat-card,
  .admin-layout .stat-card:nth-child(n) {
    min-height: 108px !important;
    grid-template-columns: minmax(0,1fr) 30px !important;
    padding: 23px 10px 10px !important;
  }

  .admin-layout .stat-value {
    font-size: 42px !important;
  }

  .admin-layout .stat-card .stat-icon {
    width: 30px !important;
    height: 30px !important;
    font-size: 6px !important;
  }

  .admin-layout .actions-grid {
    grid-template-columns: 1fr !important;
  }

  .admin-layout .action-card,
  .admin-layout .action-card:nth-child(n) {
    min-height: 68px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ink) !important;
  }

  .admin-layout .action-card:last-child {
    border-bottom: 0 !important;
  }
}

@media (max-width: 360px) {
  .app .header-inner {
    grid-template-columns: minmax(0, 1fr) 138px !important;
  }

  .app .header-nav {
    width: 138px !important;
    min-width: 138px !important;
    grid-template-columns: 48px 90px !important;
  }

  .app .topnav-cn {
    font-size: 10px !important;
  }

  .home-page .masonry-grid,
  .home-page .masonry-grid[data-item-count="1"],
  .home-page .masonry-grid[data-item-count="2"],
  .home-page .masonry-grid[data-item-count="3"],
  .home-page .masonry-grid[data-item-count="4"] {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* V2.6 visual-audit corrections */
.admin-layout .stat-card,
.admin-layout .stat-card:nth-child(n) {
  grid-template-columns: 40px minmax(0, 1fr) !important;
}

.admin-layout .stat-info {
  text-align: right !important;
}

@media (max-width: 620px) {
  .home-page .masonry-grid[data-item-count="1"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .home-page .masonry-grid[data-item-count="1"] .photo-card {
    width: min(100%, 330px) !important;
    justify-self: center !important;
  }

  .admin-layout .stat-card,
  .admin-layout .stat-card:nth-child(n) {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }

  .admin-layout .stat-label {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* ========================================================================== 
   Campus Beauty V2.7 — Swiss archive ornament layer
   Decoration is positioned outside the content flow so V2.6 layout stays stable.
   ========================================================================== */

:root {
  --reg-faint: rgba(17, 18, 15, 0.18);
  --reg-soft: rgba(17, 18, 15, 0.08);
}

/* Viewport registration system */
.swiss-registration {
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

.swiss-registration .reg-corner {
  position: absolute;
  width: 22px;
  height: 22px;
}

.swiss-registration .reg-corner::before,
.swiss-registration .reg-corner::after {
  content: "";
  position: absolute;
  background: var(--ink);
}

.swiss-registration .reg-corner::before {
  width: 22px;
  height: 1px;
}

.swiss-registration .reg-corner::after {
  width: 1px;
  height: 22px;
}

.swiss-registration .reg-nw { top: 9px; left: 9px; }
.swiss-registration .reg-ne { top: 9px; right: 9px; transform: scaleX(-1); }
.swiss-registration .reg-sw { bottom: 9px; left: 9px; transform: scaleY(-1); }
.swiss-registration .reg-se { right: 9px; bottom: 9px; transform: scale(-1); }

.swiss-registration .reg-rail {
  position: absolute;
  top: 106px;
  bottom: 44px;
  width: 7px;
  opacity: 0.72;
  background:
    repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 24px),
    linear-gradient(to right, transparent 0 3px, var(--accent) 3px 7px);
}

.swiss-registration .reg-rail-left { left: 5px; }
.swiss-registration .reg-rail-right { right: 5px; transform: scaleX(-1); }

.swiss-registration .reg-code {
  position: fixed;
  right: 16px;
  bottom: 13px;
  padding: 4px 7px 3px;
  color: var(--paper-bright);
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  white-space: nowrap;
  background: var(--ink);
  border-left: 5px solid var(--accent);
}

.swiss-registration .reg-code::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 8px;
  vertical-align: 1px;
  background: var(--accent);
  border-radius: 50%;
}

/* Header calibration ticks, without changing the navigation footprint */
.app .header-inner {
  position: relative !important;
}

.app .header-inner::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 5px !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(
    to right,
    transparent 0 39px,
    var(--ink) 39px 40px
  ) !important;
  opacity: 0.24 !important;
}

.app .header-left {
  position: relative !important;
}

.app .header-left::before {
  content: "VOL. 01 / PUBLIC BALLOT" !important;
  position: absolute !important;
  right: 13px !important;
  bottom: 8px !important;
  color: var(--muted) !important;
  font-size: 5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
}

.app .nav-link .topnav-number::after {
  content: "";
  display: block;
  width: 13px;
  height: 1px;
  margin-top: 5px;
  background: currentColor;
  opacity: 0.55;
}

.app .announcement-inner {
  position: relative !important;
  padding-right: 154px !important;
}

.app .announcement-inner::after {
  content: "BULLETIN / LIVE / 2026" !important;
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  color: var(--ink) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.17em !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
}

/* Page-level coordinate mark */
.archive-page-code {
  position: absolute;
  z-index: 5;
  top: 6px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  white-space: nowrap;
  pointer-events: none;
}

.archive-page-code::before {
  content: "";
  width: 26px;
  height: 3px;
  background: repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 4px);
}

/* Home archive field */
.home-page .container {
  position: relative !important;
}

.home-page .toolbar {
  isolation: isolate !important;
}

.home-page .toolbar::after {
  content: "LIVE BALLOT / ISSUE 01" !important;
  position: absolute !important;
  right: 254px !important;
  top: 7px !important;
  display: block !important;
  color: var(--muted) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.15em !important;
  white-space: nowrap !important;
}

.home-page .toolbar-left::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 78px !important;
  height: 4px !important;
  display: block !important;
  background: var(--accent) !important;
}

.home-page .masonry-grid {
  position: relative !important;
  counter-reset: archive-card !important;
}

.home-page .photo-card {
  position: relative !important;
  counter-increment: archive-card !important;
  isolation: isolate !important;
}

.home-page .photo-wrapper {
  position: relative !important;
}

.home-page .photo-wrapper::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 7px !important;
  display: block !important;
  pointer-events: none !important;
  background:
    linear-gradient(var(--paper-bright), var(--paper-bright)) 0 0 / 13px 1px no-repeat,
    linear-gradient(var(--paper-bright), var(--paper-bright)) 0 0 / 1px 13px no-repeat,
    linear-gradient(var(--paper-bright), var(--paper-bright)) 100% 0 / 13px 1px no-repeat,
    linear-gradient(var(--paper-bright), var(--paper-bright)) 100% 0 / 1px 13px no-repeat,
    linear-gradient(var(--paper-bright), var(--paper-bright)) 0 100% / 13px 1px no-repeat,
    linear-gradient(var(--paper-bright), var(--paper-bright)) 0 100% / 1px 13px no-repeat,
    linear-gradient(var(--paper-bright), var(--paper-bright)) 100% 100% / 13px 1px no-repeat,
    linear-gradient(var(--paper-bright), var(--paper-bright)) 100% 100% / 1px 13px no-repeat !important;
  opacity: 0.76 !important;
}

.home-page .photo-wrapper::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    linear-gradient(var(--accent), var(--accent)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 50% / 100% 1px no-repeat !important;
  transform: translate(-50%, -50%) !important;
  transition: opacity 130ms ease !important;
}

.home-page .photo-card:hover .photo-wrapper::after,
.home-page .photo-card:focus-visible .photo-wrapper::after {
  opacity: 0.92 !important;
}

.candidate-registry {
  position: absolute;
  z-index: 4;
  top: 37px;
  right: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}

.candidate-registry .registry-text {
  color: var(--paper-bright);
  font-size: 5px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.15em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.candidate-registry .registry-dot {
  width: 5px;
  height: 5px;
  background: var(--accent);
  border: 1px solid var(--ink);
  border-radius: 50%;
}

.candidate-registry .registry-bars {
  width: 5px;
  height: 30px;
  background: repeating-linear-gradient(to bottom, var(--paper-bright) 0 1px, transparent 1px 3px);
  opacity: 0.9;
}

.home-page .photo-overlay {
  position: relative !important;
}

.home-page .photo-overlay::after {
  content: "PUBLIC / VERIFIED" !important;
  position: absolute !important;
  right: 9px !important;
  bottom: 8px !important;
  display: block !important;
  color: var(--reg-faint) !important;
  font-size: 5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
}

/* Registration desk */
.upload-page .upload-header,
.upload-page .upload-content,
.upload-page .preview-container,
.upload-page .upload-form {
  position: relative !important;
}

.upload-page .upload-header::after {
  content: "FORM / CB-2026-01" !important;
  position: absolute !important;
  right: 17px !important;
  top: 8px !important;
  display: block !important;
  color: var(--muted) !important;
  font-size: 6px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
}

.upload-page .preview-container::before {
  content: "0   20   40   60   80   100" !important;
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  top: 11px !important;
  left: 130px !important;
  right: 14px !important;
  display: block !important;
  height: 12px !important;
  padding-top: 2px !important;
  color: var(--muted) !important;
  font-size: 5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  word-spacing: 2.5em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  border-top: 1px solid var(--ink) !important;
  background: repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 18px) 0 0 / 100% 4px no-repeat !important;
  opacity: 0.58 !important;
}

.upload-page .preview-container::after {
  content: "PORTRAIT / 4:5 / FULL COLOR" !important;
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  right: 7px !important;
  top: 50% !important;
  display: block !important;
  color: var(--muted) !important;
  font-size: 5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  white-space: nowrap !important;
  writing-mode: vertical-rl !important;
  transform: translateY(-50%) !important;
}

.upload-page .preview-placeholder {
  position: relative !important;
}

.upload-page .preview-placeholder::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  pointer-events: none !important;
  background:
    linear-gradient(var(--reg-faint), var(--reg-faint)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--reg-faint), var(--reg-faint)) 0 50% / 100% 1px no-repeat !important;
  transform: translate(-50%, -50%) !important;
}

.upload-page .preview-placeholder::after {
  content: "01 / IMAGE FIELD" !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  display: block !important;
  color: var(--muted) !important;
  font-size: 5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.15em !important;
  white-space: nowrap !important;
}

.upload-page .form-group {
  position: relative !important;
}

.upload-page .upload-form > .form-group::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  left: -1px !important;
  top: -1px !important;
  width: 28px !important;
  height: 4px !important;
  background: var(--accent) !important;
  border-right: 1px solid var(--ink) !important;
  pointer-events: none !important;
}

.upload-page .form-input:focus,
.upload-page .form-textarea:focus,
.upload-page .file-input-label:focus-within {
  box-shadow: 4px 4px 0 var(--accent) !important;
  transform: translate(-1px, -1px) !important;
}


/* Admin control-desk decoration */
.admin-layout .sidebar {
  position: relative !important;
}

.admin-layout .sidebar::after {
  content: "CONTROL DESK / CB-26 / LIVE" !important;
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  color: var(--accent) !important;
  font-size: 5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
  writing-mode: vertical-rl !important;
  transform: translateY(-50%) !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

.admin-layout .content-header {
  position: relative !important;
}

.admin-layout .content-header::after {
  content: "LIVE SYSTEM / 01" !important;
  position: absolute !important;
  left: 24px !important;
  bottom: 7px !important;
  display: block !important;
  color: var(--muted) !important;
  font-size: 5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
}

.admin-layout .content-body {
  position: relative !important;
  background-image:
    linear-gradient(to right, var(--reg-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--reg-soft) 1px, transparent 1px) !important;
  background-size: 120px 100%, 100% 64px !important;
}

.admin-layout .stat-card,
.admin-layout .action-card,
.admin-layout .trend-section,
.admin-layout .data-table,
.admin-layout .settings-section,
.admin-layout .comment-card {
  position: relative !important;
  isolation: isolate !important;
}

.admin-layout .stat-card::after {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
  width: 14px !important;
  height: 14px !important;
  background:
    linear-gradient(var(--ink), var(--ink)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 50% / 100% 1px no-repeat !important;
  opacity: 0.22 !important;
  pointer-events: none !important;
}

.admin-layout .stat-card .metric-bars {
  position: absolute;
  z-index: 0;
  left: 8px;
  right: 8px;
  bottom: 7px;
  height: 3px;
  background: repeating-linear-gradient(to right, var(--ink) 0 7px, transparent 7px 10px);
  opacity: 0.23;
  pointer-events: none;
}

.admin-layout .stat-card:hover .metric-bars {
  background: repeating-linear-gradient(to right, var(--accent) 0 7px, transparent 7px 10px);
  opacity: 1;
}

.admin-layout .quick-actions > .section-title::after,
.admin-layout .trend-section .section-title::after {
  content: "CB / ADMIN / 2026" !important;
  float: right !important;
  margin-top: 6px !important;
  color: var(--muted) !important;
  font-size: 5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.15em !important;
  white-space: nowrap !important;
}

.admin-layout .action-card::after {
  content: "" !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  width: 19px !important;
  height: 4px !important;
  background: repeating-linear-gradient(to right, var(--ink) 0 2px, transparent 2px 4px) !important;
  opacity: 0.28 !important;
}

.admin-layout .action-card:hover::after {
  background: repeating-linear-gradient(to right, var(--accent) 0 2px, transparent 2px 4px) !important;
  opacity: 1 !important;
}

.admin-layout .trend-section::after,
.admin-layout .data-table::after,
.admin-layout .settings-section::after {
  content: "" !important;
  position: absolute !important;
  z-index: 4 !important;
  right: -1px !important;
  top: -1px !important;
  width: 34px !important;
  height: 6px !important;
  background: var(--accent) !important;
  border-left: 1px solid var(--ink) !important;
  border-bottom: 1px solid var(--ink) !important;
  pointer-events: none !important;
}

@media (max-width: 1100px) {
  .app .header-left::before,
  .home-page .toolbar::after {
    display: none !important;
  }

  .app .announcement-inner {
    padding-right: 14px !important;
  }

  .app .announcement-inner::after {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 820px) {
  .swiss-registration .reg-rail,
  .swiss-registration .reg-code {
    display: none !important;
  }

  .swiss-registration .reg-corner {
    width: 14px;
    height: 14px;
    opacity: 0.5;
  }

  .swiss-registration .reg-corner::before { width: 14px; }
  .swiss-registration .reg-corner::after { height: 14px; }

  .candidate-registry .registry-text,
  .candidate-registry .registry-bars,
  .home-page .photo-overlay::after,
  .upload-page .upload-header::after,
  .admin-layout .sidebar::after,
  .admin-layout .quick-actions > .section-title::after,
  .admin-layout .trend-section .section-title::after {
    display: none !important;
  }

  .candidate-registry {
    top: 34px;
    right: 5px;
  }

  .upload-page .preview-container::before {
    word-spacing: 1em !important;
  }
}

@media (max-width: 620px) {
  .swiss-registration {
    display: none !important;
  }

  .app .header-inner::before,
  .app .header-left::before,
  .app .announcement-inner::after,
  .home-page .toolbar::after,
  .archive-page-code,
  .upload-page .preview-container::before,
  .upload-page .preview-container::after,
  .admin-layout .content-header::after {
    display: none !important;
  }

  .home-page .toolbar-left::after {
    width: 44px !important;
  }

  .home-page .photo-wrapper::before {
    inset: 5px !important;
  }

  .candidate-registry {
    display: none !important;
  }

  .upload-page .form-group::before {
    width: 18px !important;
  }

  .admin-layout .content-body {
    background-size: 72px 100%, 100% 52px !important;
  }
}