:root {
  --bg: #070511;
  --panel: rgba(19, 15, 35, 0.9);
  --panel-2: rgba(31, 24, 55, 0.86);
  --line: rgba(255, 255, 255, 0.1);
  --text: #fbf8ff;
  --muted: #b9add2;
  --soft: #897d9e;
  --purple: #7c3aed;
  --gold: #f6c453;
  --green: #42d6a4;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 8%, rgba(124, 58, 237, 0.22), transparent 30%),
    radial-gradient(circle at 80% 4%, rgba(246, 196, 83, 0.12), transparent 24%),
    linear-gradient(135deg, #070511, #0f0924 50%, #070511);
  color: var(--text);
  letter-spacing: 0;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.login-view {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(440px, 100%);
  border: 1px solid rgba(246, 196, 83, 0.22);
  background: linear-gradient(145deg, rgba(17,13,32,0.92), rgba(28,20,49,0.84));
  padding: 28px;
  box-shadow: 0 24px 80px rgba(4,1,15,0.4);
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(246, 196, 83, 0.28);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 28px rgba(246, 196, 83, 0.2);
  margin-bottom: 18px;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 28px; margin-bottom: 8px; }
h2 { font-size: 30px; margin: 0; }
h3 { font-size: 18px; }
p, .hint { color: var(--muted); line-height: 1.8; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 13px; }
input, textarea, select {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 11px 12px;
  outline: none;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(246,196,83,0.58);
  box-shadow: 0 0 0 3px rgba(246,196,83,0.12);
}
select {
  color-scheme: dark;
  cursor: pointer;
  background-color: rgba(18,14,34,0.96);
}
select option, select optgroup {
  color: #fbf8ff;
  background-color: #120e22;
}
select option:checked {
  color: #160f05;
  background-color: #f6c453;
}
textarea { min-height: 92px; resize: vertical; }
.check { display: flex; align-items: center; gap: 9px; }
.check input { width: auto; }
.btn {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 15px;
}
.btn.primary {
  color: #160f05;
  background: linear-gradient(135deg, var(--gold), #fff2bf);
  border-color: rgba(246,196,83,0.8);
}
.btn.danger {
  color: #ffd5d5;
  border-color: rgba(255, 112, 112, 0.34);
  background: rgba(255, 112, 112, 0.08);
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}
.message, .save-message { color: var(--gold); display: block; margin-top: 12px; min-height: 24px; }
.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--line);
  background: rgba(9,7,19,0.72);
  padding: 20px 14px;
}
.side-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.side-brand span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(246,196,83,0.28);
  background: rgba(255,255,255,0.05);
}
.side-brand img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.side-item, .side-link {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  padding: 10px;
  margin-bottom: 5px;
  text-align: left;
  text-decoration: none;
}
.side-item.active, .side-link:hover {
  color: #ffe6ac;
  border-color: rgba(246,196,83,0.22);
  background: rgba(246,196,83,0.07);
}
.side-item.subtle { margin-top: 20px; color: var(--soft); }
.main { padding: 28px; overflow: hidden; }
.main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffe6ac;
  font-size: 12px;
  margin-bottom: 8px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
}
.panel { display: none; }
.panel.active { display: block; }
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.metric, .card, .preview-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(17,13,32,0.9), rgba(28,20,49,0.82));
  box-shadow: 0 20px 70px rgba(4,1,15,0.32);
}
.metric { padding: 18px; min-height: 112px; }
.metric strong { display: block; color: var(--gold); font-size: 28px; margin-bottom: 7px; }
.metric span { color: var(--muted); }
.grid-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.card { padding: 18px; margin-bottom: 16px; }
.status-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 12px 0;
}
.status-row span { color: var(--soft); }
.swatch-row { display: flex; gap: 10px; margin-bottom: 16px; }
.swatch-row span {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.2);
}
.editor-list { display: grid; gap: 12px; }
.editor-item {
  display: grid;
  grid-template-columns: 70px 1fr 1.4fr;
  gap: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 12px;
  align-items: start;
}
.preview-card {
  min-height: 450px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
}
.preview-card canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.preview-card > div { position: relative; z-index: 2; max-width: 420px; }
.card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.card-head h3 { margin-bottom: 5px; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.inline-check { margin: 0 4px 0 0; min-height: 42px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: var(--muted);
  text-align: left;
  padding: 12px 10px;
  font-size: 13px;
}
td:first-child { color: var(--text); }
td small { display: block; color: var(--soft); margin-top: 4px; }
.actions-cell { white-space: nowrap; }
.note-row td {
  color: var(--soft);
  background: rgba(255,255,255,0.025);
  padding-top: 0;
}
.status-contacted { border-color: rgba(66,214,164,0.28); color: #9af2d0; background: rgba(66,214,164,0.07); }
.status-invalid { border-color: rgba(255,112,112,0.28); color: #ffd5d5; background: rgba(255,112,112,0.07); }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(246,196,83,0.22);
  color: #ffe6ac;
  background: rgba(246,196,83,0.07);
  font-size: 12px;
}
.raw-json {
  min-height: 520px;
  font-family: Consolas, monospace;
  font-size: 12px;
}
.security-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.9;
}
.security-list li { margin-bottom: 6px; }
.content-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 12px;
}
.content-tab {
  min-height: 40px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  padding: 9px 14px;
}
.content-tab.active {
  color: #180e03;
  background: linear-gradient(135deg, var(--gold), #fff2bf);
  border-color: rgba(246,196,83,0.76);
}
.content-subpanel { display: none; }
.content-subpanel.active { display: block; }
.logo-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 12px;
  align-items: end;
}
.logo-upload-field {
  display: grid;
  gap: 8px;
}
.field-label {
  color: var(--muted);
  font-size: 13px;
}
.logo-upload-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo-preview {
  width: 96px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246,196,83,0.2);
  background: rgba(255,255,255,0.04);
  margin-bottom: 13px;
  padding: 10px;
}
.logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.field-section-title {
  color: #ffe6ac;
  font-size: 13px;
  margin: 16px 0 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.tight-grid { gap: 12px; }
.editor-item.wide-editor {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.editor-item.compact-editor {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.editor-item .full-span { grid-column: 1 / -1; }
.editor-item textarea { min-height: 76px; }
.editor-item select { min-height: 42px; }
.editor-item .check {
  min-height: 42px;
  align-self: end;
  margin-bottom: 13px;
}
@media (max-width: 980px) {
  .dashboard { grid-template-columns: 1fr; }
  .sidebar { position: relative; height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .side-brand { grid-column: 1 / -1; }
  .main-head, .grid-two { grid-template-columns: 1fr; }
  .card-head { display: grid; }
  .toolbar { justify-content: flex-start; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .main { padding: 18px; }
  .sidebar, .metrics, .grid-two, .editor-item, .editor-item.wide-editor, .editor-item.compact-editor, .logo-edit-grid { grid-template-columns: 1fr; }
}

.detail-editor {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.detail-editor .rich-editor {
  min-height: 220px;
  font-family: Consolas, "Microsoft YaHei", monospace;
  font-size: 12px;
  line-height: 1.7;
}
@media (max-width: 980px) {
  .detail-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .detail-editor { grid-template-columns: 1fr; }
}
.case-admin-card {
  border-color: rgba(246,196,83,0.14);
}
.upload-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 13px;
}
.upload-btn {
  position: relative;
  overflow: hidden;
  margin: 0;
  display: inline-flex;
  width: auto;
  color: var(--text);
}
.upload-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.download-editor {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 12px;
}
.download-editor-title,
.download-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.download-editor-item {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
}
.download-editor-head { grid-column: 1 / -1; color: #ffe6ac; }
.download-empty {
  padding: 14px;
  border: 1px dashed rgba(246,196,83,0.22);
  color: var(--muted);
  background: rgba(246,196,83,0.045);
}
@media (max-width: 980px) {
  .download-editor-item { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .upload-row, .download-editor-title, .download-editor-head { display: grid; }
  .download-editor-item { grid-template-columns: 1fr; }
}

/* CMS content CRUD manager */
.manager-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(246,196,83,0.14);
  background:
    linear-gradient(135deg, rgba(18,14,34,0.88), rgba(15,10,30,0.78)),
    radial-gradient(circle at 100% 0%, rgba(246,196,83,0.12), transparent 38%);
}
.manager-toolbar strong { display: block; color: #fff6d4; font-size: 16px; margin-bottom: 4px; }
.manager-toolbar p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.manager-stats { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.manager-stats span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  font-size: 12px;
}
.content-record {
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(145deg, rgba(17,13,32,0.9), rgba(28,20,49,0.78));
  box-shadow: 0 18px 48px rgba(4,1,15,0.26);
  overflow: hidden;
}
.content-record-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
}
.record-title-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.record-index {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #160f05;
  background: linear-gradient(135deg, var(--gold), #fff2bf);
  font-weight: 800;
}
.record-title-block strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-title-block small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-state { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; color: var(--soft); font-size: 12px; }
.record-state span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}
.status-pill.published { color: #baffdf; border-color: rgba(66,214,164,0.28); background: rgba(66,214,164,0.08); }
.status-pill.draft { color: #ffe6ac; border-color: rgba(246,196,83,0.26); background: rgba(246,196,83,0.08); }
.record-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.record-actions .btn { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.icon-btn { width: 34px; padding: 0; font-weight: 800; }
.record-fields { padding: 14px; }
.empty-manager {
  padding: 22px;
  border: 1px dashed rgba(246,196,83,0.26);
  color: var(--muted);
  background: rgba(246,196,83,0.05);
}
.download-editor-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.download-editor-actions .btn { min-height: 32px; padding: 6px 10px; font-size: 12px; }

@media (max-width: 980px) {
  .manager-toolbar,
  .content-record-head { grid-template-columns: 1fr; align-items: start; }
  .manager-stats,
  .record-state,
  .record-actions { justify-content: flex-start; }
}

/* Paginated CMS content manager */
.manager-list-shell {
  display: grid;
  gap: 16px;
}
.manager-list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(246,196,83,0.16);
  background:
    linear-gradient(135deg, rgba(18,14,34,0.92), rgba(15,10,30,0.78)),
    radial-gradient(circle at 100% 0%, rgba(246,196,83,0.12), transparent 40%);
}
.manager-list-toolbar strong {
  display: block;
  color: #fff6d4;
  font-size: 17px;
  margin-bottom: 4px;
}
.manager-list-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.manager-control-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 160px 130px auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.035);
}
.manager-control-row label {
  margin: 0;
}
.manager-search input,
.manager-control-row select {
  min-height: 42px;
}
.manager-table-wrap {
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(7,4,18,0.48);
}
.manager-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}
.manager-table th,
.manager-table td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: middle;
  color: var(--muted);
  text-align: left;
}
.manager-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #ffe6ac;
  background: rgba(20,13,38,0.96);
  font-weight: 700;
  white-space: nowrap;
}
.manager-table tr.is-editing td {
  background: rgba(246,196,83,0.065);
}
.manager-check-cell {
  width: 44px;
  text-align: center;
}
.manager-title-cell {
  min-width: 280px;
  color: var(--text);
}
.manager-title-button {
  display: block;
  max-width: 360px;
  overflow: hidden;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.manager-title-button:hover {
  color: var(--gold);
}
.manager-title-cell small {
  display: block;
  max-width: 460px;
  overflow: hidden;
  margin-top: 5px;
  color: var(--soft);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manager-row-actions {
  min-width: 260px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.manager-row-actions .btn {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}
.manager-empty-row {
  height: 88px;
  text-align: center !important;
  color: var(--soft) !important;
}
.manager-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
}
.manager-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.manager-pagination .btn {
  min-width: 42px;
  min-height: 36px;
  padding: 6px 10px;
}
.manager-page-ellipsis {
  min-width: 28px;
  display: inline-grid;
  place-items: center;
  color: var(--soft);
}
.manager-edit-panel,
.manager-edit-empty {
  border: 1px solid rgba(246,196,83,0.16);
  background: linear-gradient(145deg, rgba(16,10,31,0.92), rgba(34,23,52,0.78));
  box-shadow: 0 18px 48px rgba(4,1,15,0.24);
}
.manager-edit-empty {
  padding: 18px;
  color: var(--muted);
}
.manager-edit-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.manager-edit-head strong {
  display: block;
  color: #fff6d4;
  font-size: 16px;
  margin-bottom: 4px;
}
.manager-edit-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
@media (max-width: 1120px) {
  .manager-list-toolbar,
  .manager-control-row,
  .manager-foot,
  .manager-edit-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .manager-control-row {
    display: grid;
  }
  .manager-foot,
  .manager-edit-head {
    display: grid;
  }
  .manager-pagination,
  .manager-stats {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .manager-control-row {
    grid-template-columns: 1fr;
  }
}