*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f5f5f5;
  color: #111;
  min-height: 100vh;
}

.topnav {
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 56px;
}
.brand { font-weight: 700; font-size: 16px; }
.shop-domain { font-size: 13px; color: #aaa; flex: 1; }
.btn-ghost {
  background: transparent;
  border: 1px solid #444;
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.btn-ghost:hover { border-color: #aaa; }

main { max-width: 900px; margin: 32px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 20px; }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  border: 1px solid #e5e5e5;
}
.stat-value { font-size: 28px; font-weight: 700; color: #111; }
.stat-label { font-size: 12px; color: #888; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

.card {
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  border: 1px solid #e5e5e5;
}
.card h2 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.muted { font-size: 13px; color: #666; margin-bottom: 12px; }

.form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.form-row label { width: 160px; font-size: 13px; color: #555; flex-shrink: 0; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}
.form-row input[type="color"] { width: 48px; height: 36px; padding: 2px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; }

button[type="submit"], .btn-primary {
  background: #111;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
}
button[type="submit"]:disabled, .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
button[type="submit"]:hover:not(:disabled), .btn-primary:hover:not(:disabled) { background: #333; }

.save-status { font-size: 13px; margin-left: 12px; }
.save-status.success { color: #16a34a; }
.hidden { display: none !important; }

.sync-status { font-size: 13px; color: #555; margin-top: 10px; padding: 8px 12px; background: #f8f8f8; border-radius: 6px; }

.code-block {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px 16px;
  font-family: monospace;
  font-size: 13px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  color: #333;
}

.product-row { display:flex; align-items:center; gap:1rem; padding:0.75rem 0; border-bottom:1px solid #f0f0f0; }
.product-row:last-child { border-bottom:none; }
.product-thumb { width:48px; height:48px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.product-info { flex:1; min-width:0; }
.product-title { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-meta { font-size:0.8rem; color:#888; margin-top:2px; }
.toggle-switch { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#ccc; border-radius:22px; cursor:pointer; transition:0.2s; }
.toggle-slider:before { content:''; position:absolute; width:16px; height:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.2s; }
input:checked + .toggle-slider { background:#22c55e; }
input:checked + .toggle-slider:before { transform:translateX(18px); }
.page-btn { padding:0.25rem 0.6rem; border:1px solid #ddd; background:#fff; border-radius:4px; cursor:pointer; font-size:0.85rem; }
.page-btn.active { background:#000; color:#fff; border-color:#000; }

/* Auth page */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f5f5f5; }
.auth-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 40px; width: 100%; max-width: 360px; }
.auth-card h1 { font-size: 22px; font-weight: 700; text-align: center; }
.subtitle { text-align: center; color: #888; font-size: 14px; margin: 6px 0 24px; }
.auth-card input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  display: block;
}
.auth-card button {
  width: 100%;
  padding: 11px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
}
.auth-card button:hover:not(:disabled) { background: #333; }
.auth-card button:disabled { opacity: 0.6; cursor: not-allowed; }
.error { color: #dc2626; font-size: 13px; margin-top: 10px; text-align: center; }
.success { color: #16a34a; font-size: 13px; margin-top: 10px; text-align: center; }
.muted-center { font-size: 13px; color: #666; text-align: center; margin-bottom: 16px; }
.auth-link { text-align: center; margin-top: 14px; font-size: 13px; }
.auth-link a { color: #555; text-decoration: none; }
.auth-link a:hover { text-decoration: underline; }