:root {
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f4f6f8;
}

/* Article editor: simple JSON source beside the real Nuxt preview. */
.blog-toolbar, .blog-editor-actions, .blog-preview-toolbar, .blog-pagination { display: flex; align-items: center; gap: 12px; }
.blog-toolbar { justify-content: space-between; margin-bottom: 24px; }
.blog-toolbar h1 { margin: 10px 0 8px; font-size: 26px; }
.blog-toolbar p, .blog-muted { color: #667085; font-size: 13px; }
.blog-panel { border: 1px solid #dde3ea; background: white; border-radius: 12px; overflow: hidden; min-width: 0; }
.blog-table-wrap { overflow-x: auto; }
.blog-table { width: 100%; border-collapse: collapse; }
.blog-table th, .blog-table td { padding: 18px 20px; border-bottom: 1px solid #eaecf0; text-align: left; }
.blog-table th { background: #f8fafc; font-size: 13px; color: #667085; }
.blog-table .blog-muted { margin-top: 7px; }
.blog-badge { display: inline-flex; padding: 4px 9px; border-radius: 20px; font-size: 12px; background: #f2f4f7; }
.blog-badge-published { background: #e7f7ed; color: #167443; }
.blog-empty { padding: 56px 20px; text-align: center !important; color: #667085; }
.blog-pagination { justify-content: center; margin-top: 24px; font-size: 13px; }
.blog-editor-actions { flex-wrap: wrap; }
.blog-editor-actions button, .blog-preview-toolbar button { font: inherit; padding: 9px 13px; border: 1px solid #d0d5dd; border-radius: 8px; color: #344054; background: white; cursor: pointer; }
.blog-publish-actions { justify-content: flex-end; align-self: flex-end; margin-bottom: 8px; }
.blog-primary, .blog-editor-actions .blog-primary { background: #172033; color: white; border-color: #172033; }
.blog-editor-actions .blog-danger { color: #b42318; }
.blog-editor-actions button:disabled { opacity: .5; cursor: not-allowed; }
.blog-editor-status { min-height: 20px; margin: 14px 0; font-size: 13px; color: #667085; }
.blog-editor-status[hidden] { display: none; }
.blog-text-error { color: #b42318; }
.blog-alert { padding: 12px 16px; border-radius: 8px; color: #166534; background: #ecfdf3; }
.blog-alert-error { background: #fff1f0; color: #b42318; overflow-wrap: anywhere; }
.blog-editor-grid { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr); gap: 20px; }
.blog-source { padding: 18px; }
.blog-source h2 { margin: 0; font-size: 16px; }
.blog-source-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.blog-source-header .blog-editor-actions { margin-left: auto; gap: 8px; }
.blog-source-header button { font-size: 12px; padding: 6px 10px; }
.blog-metadata { display: grid; gap: 16px; margin: 20px 0; padding-bottom: 20px; border-bottom: 1px solid #eaecf0; }
.blog-field { display: grid; gap: 8px; min-width: 0; }
.blog-field input, .blog-field select { width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: white; color: #172033; font: inherit; font-size: 14px; }
.blog-field input:focus, .blog-field select:focus { outline: 2px solid #94a3b8; outline-offset: 2px; }
.blog-field input[readonly], .blog-field select:disabled { background: #f8fafc; color: #667085; }
.blog-field small { font-size: 12px; line-height: 1.5; }
.blog-path-cell code { display: block; min-width: 180px; max-width: 400px; white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.6; }
.blog-title-cell { width: 30%; min-width: 180px; max-width: 320px; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.blog-list-actions { display: flex; align-items: center; gap: 8px; }
.blog-list-action-form { display: inline-flex; margin: 0; }
.blog-list-actions .button-link { font-size: 13px; line-height: 1.4; }
.blog-list-actions .blog-list-publish { background: #172033; color: #fff; border-color: #172033; }
.blog-list-actions .blog-list-unpublish { color: #b42318; border-color: #fecdca; }
.blog-list-actions button:disabled { opacity: .55; cursor: wait; }
.blog-source label { font-weight: 700; }
.blog-source p { line-height: 1.6; }
.blog-source textarea { width: 100%; min-height: 650px; resize: vertical; padding: 16px; border: 1px solid #d0d5dd; border-radius: 8px; background: #f8fafc; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; color: #172033; }
.blog-source textarea:focus { outline: 2px solid #94a3b8; outline-offset: 2px; }
.blog-preview-panel { background: #eef1f5; }
.blog-preview-toolbar { padding: 14px 18px; justify-content: space-between; background: white; border-bottom: 1px solid #dde3ea; }
.blog-preview-toolbar button { font-size: 12px; padding: 6px 10px; }
.blog-preview-toolbar button[aria-pressed="true"] { background: #172033; border-color: #172033; color: white; }
#blog-preview-frame { display: block; width: 100%; height: 760px; border: none; background: white; margin: 0 auto; }
#blog-preview-frame[hidden] { display: none; }
#blog-preview-frame.blog-preview-mobile { max-width: 390px; }
@media (max-width: 1100px) { .blog-editor-grid { grid-template-columns: 1fr; } .blog-source textarea { min-height: 440px; } }
@media (max-width: 700px) { .blog-toolbar { align-items: flex-start; flex-direction: column; } .blog-publish-actions { align-self: stretch; margin-bottom: 0; } .blog-editor-actions button { flex: 1 1 auto; } }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f4f6f8;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 24px;
  border-bottom: 1px solid #dde3ea;
  background: #ffffff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 800;
}

.brand img {
  width: 32px;
  height: 32px;
}

.env-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.env-sandbox {
  background: #1570ef;
}

.env-live {
  background: #d92d20;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav a,
.nav button,
.filters button,
.login-card button,
.pagination a,
.button-link {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  padding: 9px 12px;
  cursor: pointer;
}

.nav a:hover,
.nav button:hover,
.filters button:hover,
.pagination a:hover,
.button-link:hover {
  background: #f2f4f7;
}

.page {
  padding: 24px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

h1,
h2 {
  margin: 0;
}

h1 {
  font-size: 28px;
}

h2 {
  font-size: 18px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.filters input,
.filters select,
.login-card input {
  min-height: 40px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 10px;
}

.filters select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23172033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 18px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  min-width: 150px;
  padding-right: 48px;
}

.filters input[name="q"] {
  width: 260px;
}

.filters .number-filter {
  width: 108px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stat,
.panel {
  border: 1px solid #dde3ea;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.stat {
  padding: 16px;
}

.stat span {
  display: block;
  color: #667085;
  font-size: 13px;
}

.stat strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
}

.stat small {
  display: block;
  margin-top: 6px;
  color: #667085;
}

.compact-value {
  overflow: hidden;
  font-size: 15px !important;
  text-overflow: ellipsis;
}

.split {
  display: grid;
  grid-template-columns: minmax(280px, 0.35fr) minmax(520px, 1fr);
  gap: 16px;
}

.panel {
  overflow: auto;
  padding: 16px;
}

.panel h2 {
  margin-bottom: 12px;
}

table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 13px;
}

th,
td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf0f3;
  text-align: left;
  vertical-align: top;
}

th {
  color: #667085;
  font-weight: 700;
  background: #f9fafb;
}

td small {
  display: block;
  margin-top: 4px;
  color: #667085;
}

code {
  color: #344054;
  font-family: "SFMono-Regular", Consolas, monospace;
}

.status {
  display: inline-flex;
  border-radius: 999px;
  background: #eef4ff;
  color: #175cd3;
  padding: 3px 8px;
  font-weight: 700;
}

.status.success {
  background: #ecfdf3;
  color: #027a48;
}

.status.warning {
  background: #fffaeb;
  color: #b54708;
}

.status.danger {
  background: #fef3f2;
  color: #b42318;
}

.status.muted {
  background: #f2f4f7;
  color: #475467;
}

.table-link {
  color: #175cd3;
  font-weight: 700;
}

.table-button {
  display: inline-flex;
  padding: 5px 9px;
  font-size: 12px;
}

.text-cell {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-list {
  display: grid;
  gap: 12px;
  margin: 0;
}

.detail-list div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf0f3;
}

.detail-list dt {
  color: #667085;
  font-weight: 700;
}

.detail-list dd {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.summary {
  margin: 0 0 12px;
  color: #667085;
}

.user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-cell img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: #edf0f3;
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(5, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profile-card img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #edf0f3;
}

.profile-card p {
  margin: 6px 0;
  color: #667085;
}

.block-panel {
  margin-bottom: 16px;
}

.detail-split {
  grid-template-columns: repeat(2, minmax(420px, 1fr));
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  color: #667085;
}

.login-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.login-card {
  width: min(360px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid #dde3ea;
  border-radius: 8px;
  background: #ffffff;
}

.login-card h1 {
  font-size: 24px;
}

.login-card p {
  margin: 0 0 18px;
  color: #667085;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.login-brand img {
  width: 40px;
  height: 40px;
}

.login-card label {
  display: grid;
  gap: 8px;
  color: #344054;
  font-weight: 700;
}

.login-card label + label {
  margin-top: 16px;
}

.login-card button {
  width: 100%;
  margin-top: 16px;
  background: #172033;
  color: #ffffff;
}

.alert {
  margin-bottom: 14px;
  border-radius: 8px;
  background: #fef3f2;
  color: #b42318;
  padding: 10px;
}

@media (max-width: 1100px) {
  .topbar,
  .page-head {
    flex-direction: column;
  }

  .nav {
    flex-wrap: wrap;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .split,
  .profile-grid,
  .detail-split {
    grid-template-columns: 1fr;
  }

  .detail-list div {
    grid-template-columns: 1fr;
  }
}