/* Shared styling for the three environment pages. Nothing here is part of the SDK. */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f0f2f5;
  color: #1a1a2e;
}

.env-bar { padding: 10px 24px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: #fff; }
.env-bar.local { background: #2c7a7b; }
.env-bar.staging { background: #b7791f; }
.env-bar.production { background: #9b2c2c; }
.env-bar .tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.env-bar label { font-size: 13px; font-weight: 600; opacity: 0.85; white-space: nowrap; }
.env-bar input {
  padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px;
  background: rgba(0, 0, 0, 0.25); color: #fff;
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 13px; flex: 1; min-width: 240px; max-width: 420px;
}
.env-bar .links { margin-left: auto; display: flex; gap: 10px; font-size: 13px; }
.env-bar .links a { color: #fff; opacity: 0.8; }
.env-bar .links a:hover { opacity: 1; }

.topbar { background: #1a1a2e; color: #fff; padding: 12px 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.topbar h1 { font-size: 18px; font-weight: 600; }
.topbar .user-area { display: flex; align-items: center; gap: 12px; }
.topbar .user-area span { font-size: 14px; color: #a0aec0; }
.topbar .user-area .email { color: #63b3ed; font-weight: 500; }

.auth-form { display: flex; gap: 8px; align-items: center; }
.auth-form input { padding: 6px 12px; border: 1px solid #4a5568; border-radius: 4px; background: #2d3748; color: #fff; font-size: 14px; width: 220px; }
.auth-form input::placeholder { color: #718096; }

.btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 500; transition: background 0.15s; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-apply { background: rgba(0, 0, 0, 0.3); color: #fff; font-size: 12px; padding: 6px 14px; }
.btn-apply:hover { background: rgba(0, 0, 0, 0.5); }
.btn-login { background: #48bb78; color: #fff; }
.btn-login:hover:not(:disabled) { background: #38a169; }
.btn-logout { background: #fc8181; color: #fff; }
.btn-primary { background: #4299e1; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #3182ce; }
.btn-cart { background: #ed8936; color: #fff; }
.btn-checkout { background: #9f7aea; color: #fff; }
.btn-complete { background: #48bb78; color: #fff; }
.btn-bad { background: #718096; color: #fff; }
.btn-clear { background: #edf2f7; color: #4a5568; font-size: 12px; padding: 4px 10px; }

.main { max-width: 1100px; margin: 0 auto; padding: 24px; }

.card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 20px; }
.card h2 { font-size: 15px; margin-bottom: 12px; color: #2d3748; }
.card .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card .hint { font-size: 12px; color: #718096; margin-top: 10px; line-height: 1.5; }

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }

.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv td { padding: 5px 0; border-bottom: 1px solid #edf2f7; vertical-align: top; }
.kv td:first-child { color: #718096; width: 42%; }
.kv td:last-child { font-family: 'SF Mono', 'Fira Code', monospace; word-break: break-all; }
.ok { color: #2f855a; font-weight: 600; }
.bad { color: #c53030; font-weight: 600; }
.muted { color: #a0aec0; }

.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 20px; }
.product-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.product-card h3 { font-size: 16px; margin-bottom: 4px; }
.product-card .price { font-size: 20px; font-weight: 700; color: #2d3748; margin: 8px 0; }
.product-card .meta { font-size: 12px; color: #a0aec0; margin-bottom: 12px; }
.product-card .actions { display: flex; gap: 8px; }

.console { background: #1a202c; border-radius: 8px; padding: 16px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: #a0aec0; max-height: 360px; overflow-y: auto; }
.console .line { padding: 2px 0; white-space: pre-wrap; word-break: break-all; }
.console .line.warn { color: #ecc94b; }
.console .line.error { color: #fc8181; }
.console .line.success { color: #68d391; }
.console .line.net { color: #63b3ed; }
.console .line .time { color: #4a5568; margin-right: 8px; }
.console-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.console-header h2 { font-size: 15px; color: #2d3748; }