body.admin-mode { background: #f8faff; }
body.admin-mode .header-wrap,
body.admin-mode .bg-wrap,
body.admin-mode .site-record,
body.admin-mode .site-pet { display: none; }
body.admin-mode #appView { min-height: 100vh; }
.spa-page.admin-page { padding: 0; min-height: 100vh; background: #f8faff; }
.admin-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 100vh; color: #58657b; }
.admin-sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; min-height: 100vh; padding: 28px 18px; box-sizing: border-box; background: #fff; box-shadow: 8px 0 30px rgba(61, 77, 112, .04); }
.admin-brand { display: grid; justify-items: center; gap: 4px; padding: 12px 0 28px; color: #343e51; }
.admin-brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff0f5; color: #ff5f91; font-size: 27px; }
.admin-brand strong { font-size: 16px; }
.admin-brand small { color: #9ca6b7; font-size: 12px; }
.admin-nav { display: grid; gap: 4px; }
.admin-nav button,
.admin-front-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 9px; background: transparent; color: #748198; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.admin-nav button:hover,
.admin-front-link:hover { background: #f7f9ff; color: #5369ca; }
.admin-nav button.active { background: #eef2ff; color: #596fe0; font-weight: 700; }
.admin-nav button span { width: 20px; color: #7c8bd6; text-align: center; font-size: 18px; }
.admin-nav button b { margin-left: auto; padding: 2px 6px; border-radius: 5px; background: #ff5c82; color: #fff; font-size: 11px; line-height: 1; }
.admin-front-link { margin-top: auto; color: #8d98a9; }
.admin-content { min-width: 0; padding: 32px 26px 80px; }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 15px 0 24px; }
.admin-stat { position: relative; min-height: 124px; box-sizing: border-box; overflow: hidden; padding: 24px 22px; border-radius: 10px; background: #fff; box-shadow: 0 10px 26px rgba(70, 85, 124, .05); }
.admin-stat > span { display: block; color: #929db0; font-size: 13px; }
.admin-stat strong { display: block; margin-top: 12px; color: #596579; font-size: 25px; line-height: 1.2; }
.admin-stat strong small { font-size: 14px; font-weight: 400; }
.admin-stat-icon { position: absolute; right: 22px; top: 24px; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 22px; font-size: 36px; font-style: normal; }
.admin-stat-message { background: #ffe6eb; color: #ff858c; }
.admin-stat-diary { background: #fce7f8; color: #f78cd3; }
.admin-stat-list { background: #f0e6ff; color: #b48cfa; }
.admin-card { margin-top: 22px; padding: 22px; border-radius: 10px; background: #fff; box-shadow: 0 10px 26px rgba(70, 85, 124, .05); }
.admin-card h2 { margin: 0 0 20px; color: #5b687d; font-size: 16px; }
.admin-card-heading { display: flex; align-items: center; justify-content: space-between; }
.admin-card-heading button { border: 0; background: transparent; color: #6380d8; font: inherit; cursor: pointer; }
.admin-section-heading { margin: 27px 0 4px; }
.admin-section-heading h1 { margin: 0; color: #49566b; font-size: 22px; }
.admin-section-heading p { margin: 7px 0 0; color: #9ca6b7; font-size: 13px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.admin-table th { padding: 14px 13px; background: #f4f7ff; color: #647187; font-weight: 700; white-space: nowrap; }
.admin-table td { padding: 15px 13px; border-bottom: 1px solid #eef0f5; color: #687589; vertical-align: top; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table td.admin-cell-text { max-width: 490px; overflow-wrap: anywhere; white-space: pre-wrap; }
.admin-empty { padding: 32px 12px; color: #a1aaba; font-size: 14px; text-align: center; }
.admin-table .delete-action,
.admin-photo-item .delete-action { float: none; padding: 6px 11px; border-radius: 5px; font-size: 12px; }
.admin-form-card { max-width: 680px; }
.admin-form-card .simple-form { margin-top: 0; }
.admin-form-card .simple-form input,
.admin-form-card .simple-form textarea,
.admin-form-card .simple-form select { box-sizing: border-box; width: 100%; padding: .85rem 1rem; border: 1px solid #e5eaf3; border-radius: .8rem; background: #fff; color: #58657b; font: inherit; }
.admin-form-card .simple-form input[type="checkbox"] { width: auto; padding: 0; accent-color: #ff75a3; }
.admin-form-card .simple-form button { justify-self: start; min-width: 130px; border-radius: 6px; }
.admin-background-preview { width: 100%; margin-bottom: 18px; aspect-ratio: 16 / 6; border: 1px solid #e5eaf3; border-radius: 10px; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.admin-form-help { margin: 14px 0 0; color: #9ca6b7; font-size: 12px; }
.admin-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.admin-settings-grid .admin-card { max-width: none; }
.admin-music-current { margin-bottom: 18px; padding: 13px 15px; border-radius: 9px; background: #f7f9ff; color: #8590a3; }
.admin-music-current strong { color: #596579; }
.admin-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px; }
.admin-photo-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.admin-photo-forms .admin-card { max-width: none; }
.admin-file-label { display: grid; gap: 8px; }
.admin-album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.admin-album-item { display: grid; gap: 7px; min-width: 0; }
.admin-album-item img,
.admin-album-item .album-cover-empty { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #fff0f5; color: #ff75a3; font-size: 2rem; }
.admin-album-item strong { overflow: hidden; color: #596579; text-overflow: ellipsis; white-space: nowrap; }
.admin-album-item small { color: #a1aaba; }
.admin-photo-item { display: grid; gap: 8px; align-content: start; min-width: 0; }
.admin-photo-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; }
.admin-photo-item p { margin: 0; overflow-wrap: anywhere; color: #687589; font-size: 13px; }
.admin-photo-item small { color: #a1aaba; }
.admin-photo-item .delete-action { justify-self: start; }
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; min-height: 0; padding: 12px; }
  .admin-brand { display: flex; gap: 10px; justify-content: flex-start; padding: 0 6px 12px; }
  .admin-brand-mark { width: 32px; height: 32px; font-size: 19px; }
  .admin-brand small { margin-left: auto; }
  .admin-nav { display: flex; overflow-x: auto; padding-bottom: 3px; }
  .admin-nav button { flex: 0 0 auto; width: auto; padding: 9px 11px; white-space: nowrap; }
  .admin-nav button b { margin-left: 3px; }
  .admin-front-link { width: auto; padding: 9px 11px; }
  .admin-content { padding: 16px 12px 56px; }
  .admin-photo-forms { grid-template-columns: 1fr; }
  .admin-settings-grid { grid-template-columns: 1fr; }
  .admin-stats { gap: 10px; }
  .admin-stat { min-height: 106px; padding: 17px 12px; }
  .admin-stat-icon { right: 8px; top: 12px; width: 38px; height: 38px; border-radius: 12px; font-size: 22px; opacity: .7; }
}
@media (max-width: 600px) {
  .admin-stats { grid-template-columns: 1fr; }
  .admin-stat { min-height: 96px; }
  .admin-card { padding: 16px; }
}

.admin-table .edit-action { float: none; padding: 6px 11px; border: 0; border-radius: 5px; background: #7186df; color: #fff; font-size: 12px; cursor: pointer; }
.admin-actions, .admin-form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-form-card .simple-form .secondary-action { min-width: 110px; background: #eef2ff; color: #6172b7; }