:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #10213b;
  background: #f4f7fb;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f4f7fb; color: #10213b; }
a { color: #126cf3; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.admin-topbar { min-height: 68px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #08111f; color: #fff; }
.admin-brand, .login-brand { display: flex; align-items: center; gap: 12px; color: inherit; font-weight: 700; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #2dcf9f, #126cf3 70%); color: #fff; font-size: 22px; font-weight: 800; }
.admin-account { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.admin-account form { margin: 0; }
.admin-account button { border: 1px solid #2c3a4e; border-radius: 10px; padding: 8px 12px; color: #dbe7f7; background: transparent; }
.admin-shell { width: min(100%, 1440px); margin: 0 auto; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.admin-nav { min-height: calc(100vh - 68px); padding: 26px 18px; border-right: 1px solid #dce4ef; background: #fff; }
.admin-nav a { display: block; margin-bottom: 8px; padding: 11px 13px; border-radius: 10px; color: #394961; font-weight: 600; }
.admin-nav a:hover { background: #edf5ff; color: #126cf3; }
.admin-main { min-width: 0; padding: 32px; }
.admin-footer { padding: 22px; color: #66758a; text-align: center; font-size: 13px; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-heading h1 { margin: 3px 0 6px; font-size: clamp(28px, 4vw, 40px); }
.page-heading p { margin: 0; color: #66758a; }
.eyebrow { color: #12936e; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card, .panel { border: 1px solid #dce4ef; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(16,33,59,.055); }
.stat-card { padding: 20px; display: grid; gap: 8px; }
.stat-card span, .stat-card small { color: #66758a; }
.stat-card strong { font-size: 28px; }
.content-grid, .detail-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .8fr); gap: 20px; }
.panel { margin-bottom: 20px; padding: 20px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.panel h2 { margin: 0; font-size: 19px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 12px; border-bottom: 1px solid #e7edf5; text-align: left; vertical-align: middle; }
th { color: #66758a; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
td { font-size: 14px; }
td small { display: block; margin-top: 4px; color: #758399; }
.status { display: inline-flex; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 700; }
.status-active { color: #087a59; background: #ddf8ee; }
.status-pending { color: #9a6500; background: #fff2ca; }
.status-suspended { color: #b42318; background: #fee4e2; }
.sync-status { display: inline-flex; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 700; }
.sync-status-none { color: #66758a; background: #edf1f6; }
.sync-status-pending { color: #9a6500; background: #fff2ca; }
.sync-status-delivered { color: #1459a6; background: #e4f0ff; }
.sync-status-completed { color: #087a59; background: #ddf8ee; }
.category-list { display: grid; gap: 9px; }
.category-item { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid #e7edf5; }
.category-item div { display: grid; gap: 3px; }
.category-item small { color: #758399; }
.category-dot { width: 10px; height: 10px; border-radius: 50%; }
.empty-state, .privacy-note { color: #66758a; line-height: 1.6; }
.privacy-note { margin-top: 20px; padding: 13px; border-radius: 12px; background: #edf5ff; font-size: 13px; }
.warning-note { margin: 18px 0; padding: 13px; border-radius: 12px; color: #7b570d; background: #fff6d8; line-height: 1.6; font-size: 13px; }
.notice-success { margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; color: #087a59; background: #ddf8ee; }
.sync-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sync-meta div { display: grid; gap: 6px; padding: 14px; border-radius: 13px; background: #f4f7fb; }
.sync-meta span { color: #66758a; font-size: 12px; }
.sync-meta strong { overflow-wrap: anywhere; }
.sync-actions { display: flex; justify-content: flex-end; }
.sync-actions button:disabled { cursor: not-allowed; opacity: .55; }
.detail-card dl { margin: 15px 0 0; }
.detail-card dl div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid #e7edf5; }
.detail-card dt { color: #66758a; }
.detail-card dd { margin: 0; text-align: right; font-weight: 600; }
.search-form { display: flex; gap: 10px; margin-bottom: 18px; }
.search-form label { flex: 1; max-width: 560px; }
.search-form input, .form-stack input { width: 100%; border: 1px solid #cad5e3; border-radius: 11px; padding: 11px 13px; color: #10213b; background: #fff; }
.search-form button, .secondary-button { border: 1px solid #cad5e3; border-radius: 11px; padding: 10px 15px; color: #283a54; background: #fff; font-weight: 700; }
.pagination { display: flex; gap: 12px; justify-content: flex-end; }
.pagination a { padding: 9px 13px; border: 1px solid #cad5e3; border-radius: 10px; background: #fff; }

.login-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, #132a49, #08111f 58%); }
.login-card { width: min(100%, 430px); padding: 34px; border-radius: 24px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.login-brand { color: #10213b; }
.login-brand div { display: grid; }
.login-brand strong { font-size: 21px; }
.login-brand small { color: #66758a; font-weight: 500; }
.login-card h1 { margin: 30px 0 7px; }
.login-card > p { margin: 0 0 22px; color: #66758a; }
.form-stack { display: grid; gap: 16px; }
.form-stack label { display: grid; gap: 7px; color: #394961; font-size: 14px; font-weight: 700; }
.primary-button { border: 0; border-radius: 12px; padding: 12px 16px; color: #fff; background: linear-gradient(135deg, #13b885, #126cf3); font-weight: 800; }
.alert-error { margin-bottom: 16px; padding: 12px 13px; border-radius: 11px; color: #b42318; background: #fee4e2; }
.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.backup-action-card { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.backup-action-card > div > p:not(.eyebrow) { color: #66758a; line-height: 1.6; }
.backup-action-card .form-stack small { color: #758399; font-weight: 500; line-height: 1.45; }
.backup-action-card input[type="file"] { padding: 9px; }
.danger-card { border-color: #f4c7c3; }
.danger-eyebrow { color: #b42318; }
.danger-button { border: 0; border-radius: 12px; padding: 12px 16px; color: #fff; background: #b42318; font-weight: 800; }
.panel-description { margin: 6px 0 0; color: #66758a; font-size: 14px; }
.backup-count { flex: none; padding: 6px 10px; border-radius: 999px; color: #1459a6; background: #e4f0ff; font-size: 12px; font-weight: 700; }
.backup-contents { white-space: nowrap; }
.table-action { text-align: right; }
.table-action form { margin: 0; }

@media (max-width: 980px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid, .detail-grid { grid-template-columns: 1fr; }
  .backup-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .admin-topbar { padding: 0 16px; }
  .admin-account > span { display: none; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-nav { min-height: auto; display: flex; gap: 4px; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid #dce4ef; }
  .admin-nav a { margin: 0; white-space: nowrap; }
  .admin-main { padding: 22px 14px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .sync-meta { grid-template-columns: 1fr; }
}

@media (max-width: 470px) {
  .stat-grid { grid-template-columns: 1fr; }
  .login-card { padding: 24px; }
}