:root {
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  color:#202223;
  background:#f4f5f7;
  --green:#007a5c;
  --green-dark:#006247;
  --border:#dfe3e8;
  --muted:#687078;
  --panel:#ffffff;
  --shadow:0 1px 2px rgba(31,33,36,.06),0 4px 16px rgba(31,33,36,.04);
}
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(180deg,#f7f8fa 0,#f4f5f7 260px); }
main { max-width:1560px; margin:auto; padding:24px 28px 48px; }
#authMessage { margin-top:10px; color:#b42318; font-size:13px; }

.page-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:20px;
}
.eyebrow { color:var(--green); font-size:11px; font-weight:750; letter-spacing:.12em; }
h1 { margin:4px 0 5px; font-size:27px; line-height:1.2; letter-spacing:-.02em; }
.page-heading p { margin:0; color:var(--muted); font-size:14px; }
.header-note {
  color:#376b5d;
  background:#e9f5f1;
  border:1px solid #c6e7dc;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  white-space:nowrap;
}
.header-session { display:flex; align-items:center; gap:8px; }

.panel {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.toolbar {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:14px;
  margin-bottom:12px;
}
.filter-controls { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; min-width:0; }
.field { display:flex; flex-direction:column; gap:5px; }
.field > span { color:var(--muted); font-size:12px; font-weight:600; }
.collection-field select { width:220px; }
.search-field input { width:min(360px,32vw); min-width:240px; }
.page-field select { width:150px; }
.toolbar-actions { display:flex; gap:8px; flex-shrink:0; }
.inline-option,.check-option {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  white-space:nowrap;
  font-size:13px;
}

input,select,button {
  min-height:38px;
  border:1px solid #b8bec5;
  border-radius:8px;
  padding:8px 11px;
  background:#fff;
  color:#202223;
  font:inherit;
}
input:focus,select:focus {
  outline:2px solid rgba(0,122,92,.2);
  border-color:var(--green);
}
input[type=checkbox] { min-height:auto; accent-color:var(--green); }
button { cursor:pointer; font-weight:650; transition:.15s ease; }
button:hover:not(:disabled) { border-color:#7d858d; background:#f6f7f8; }
button.primary {
  color:#fff;
  background:var(--green);
  border-color:var(--green);
  box-shadow:0 1px 1px rgba(0,0,0,.08);
}
button.primary:hover:not(:disabled) { color:#fff; background:var(--green-dark); border-color:var(--green-dark); }
.secondary-action { color:var(--green); border-color:#8dc8b6; background:#f4fbf8; }
button:disabled { opacity:.48; cursor:not-allowed; }

.bulk-bar { padding:14px; margin-bottom:12px; }
.section-title { display:flex; align-items:baseline; gap:10px; margin-bottom:11px; }
.section-title strong { font-size:15px; }
.section-title small { color:var(--muted); }
.bulk-fields { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.bulk-fields input[type=number] { width:120px; }
.bulk-fields #applyBulk { color:#fff; background:#30363b; border-color:#30363b; }

.advanced-grid {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:12px;
  margin-bottom:12px;
  align-items:start;
}
.random-tools,.backup-history { padding:0; overflow:hidden; }
.random-tools summary,.backup-history summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px;
  cursor:pointer;
  font-weight:700;
  list-style-position:inside;
}
.random-tools summary:hover,.backup-history summary:hover { background:#f8faf9; }
summary small { color:var(--muted); font-weight:500; }
.random-grid,.compare-price-tool {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  padding:0 14px 12px;
}
.random-grid label { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); }
.random-grid input[type=number],#compareMarkup { width:88px; }
.random-grid .endings-field { width:100%; }
.random-grid .endings-field input { flex:1; min-width:240px; }
.compare-price-tool { padding-top:11px; border-top:1px solid #edf0f2; font-size:13px; }
.tool-hint { margin:0; padding:0 14px 13px; color:var(--muted); font-size:12px; }
.backup-actions { padding:0 14px 10px; }
.backup-list { padding:0 14px 14px; color:var(--muted); font-size:13px; overflow:auto; }
.backup-list table { width:100%; border-collapse:collapse; color:#202223; }
.backup-list td,.backup-list th { padding:8px; border-bottom:1px solid #edf0f2; }
.rollback-backup { color:#b42318; border-color:#f0b8b2; background:#fff7f6; }

#message {
  min-height:0;
  margin:0 0 10px;
  padding:0;
  color:var(--muted);
  font-size:13px;
}
#message:not(:empty) { padding:10px 12px; border-radius:9px; background:#eef1f3; }
#message.error { color:#b42318; background:#fff1f0; border:1px solid #f2b8b5; }
#message.warning { color:#7a4e00; background:#fff7df; border:1px solid #edcf72; }
#message.success { color:#17664f; background:#eaf6f2; border:1px solid #b9dfd3; }

.data-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:14px 2px 9px;
}
.data-heading > div { display:flex; align-items:baseline; gap:10px; }
.data-heading h2 { margin:0; font-size:17px; }
#loadedSummary { color:var(--muted); font-size:13px; }
.pagination { display:flex; align-items:center; gap:8px; margin:0; }

.table-wrap {
  overflow:auto;
  max-height:calc(100vh - 260px);
  min-height:160px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
}
table { width:100%; border-collapse:separate; border-spacing:0; white-space:nowrap; }
th,td { text-align:left; padding:11px 12px; border-bottom:1px solid #e8ebed; }
th {
  position:sticky;
  top:0;
  z-index:2;
  background:#f8f9fa;
  color:#4b535a;
  font-size:12px;
  font-weight:700;
  box-shadow:0 1px 0 #dfe3e8;
}
tbody tr:hover { background:#f8fbfa; }
tbody tr:last-child td { border-bottom:0; }
.product { max-width:520px; overflow:hidden; text-overflow:ellipsis; font-weight:700; }
.variant { color:var(--muted); font-size:12px; margin-top:3px; }
td input[type=number] { width:130px; min-height:34px; padding:6px 9px; }
.changed { background:#fff9e7; }
.changed:hover { background:#fff6d8; }

@media (max-width:1100px) {
  main { padding:18px; }
  .toolbar { align-items:stretch; flex-direction:column; }
  .toolbar-actions { justify-content:flex-end; }
  .search-field input { width:min(500px,60vw); }
  .advanced-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  main { padding:12px; }
  .page-header { align-items:flex-start; flex-direction:column; gap:10px; }
  .header-note { white-space:normal; }
  .field,.field input,.field select,.collection-field select,.search-field input,.page-field select {
    width:100%; min-width:0;
  }
  .filter-controls,.toolbar-actions { width:100%; }
  .toolbar-actions button { flex:1; }
  .data-heading { align-items:flex-start; flex-direction:column; }
}