/* ── Mock IVAC Test UI — shared styles ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #f0f2f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 16px;
}
.card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  padding: 40px 36px 32px;
  width: 100%;
  max-width: 440px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.logo-icon {
  width: 42px; height: 42px;
  background: linear-gradient(135deg, #1a6b3c, #2e9e5e);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; font-weight: 700;
}
.logo-text { font-size: 1.15rem; font-weight: 700; color: #1a3c2e; line-height: 1.2; }
.logo-sub  { font-size: 0.75rem; color: #666; }
h2 { font-size: 1.35rem; font-weight: 700; color: #1a3c2e; margin-bottom: 6px; }
.subtitle { font-size: 0.85rem; color: #666; margin-bottom: 24px; }
label { display: block; font-size: 0.82rem; font-weight: 600; color: #333; margin-bottom: 5px; }
input[type=text], input[type=password], input[type=email] {
  width: 100%; padding: 10px 14px; border: 1.5px solid #ddd;
  border-radius: 8px; font-size: 0.95rem; outline: none;
  transition: border-color 0.2s;
  margin-bottom: 16px;
}
input:focus { border-color: #2e9e5e; }
.captcha-wrap { margin-bottom: 20px; }
.captcha-label { font-size: 0.82rem; font-weight: 600; color: #333; margin-bottom: 8px; }
button[type=submit] {
  width: 100%; padding: 12px;
  background: linear-gradient(135deg, #1a6b3c, #2e9e5e);
  color: #fff; border: none; border-radius: 8px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: opacity 0.2s;
}
button[type=submit]:hover { opacity: 0.9; }
button[type=submit]:disabled { opacity: 0.5; cursor: not-allowed; }

/* Token display */
.token-section {
  margin-top: 24px;
  padding: 16px;
  background: #f0faf4;
  border: 1.5px solid #a8d5b8;
  border-radius: 8px;
  display: none;
}
.token-section.visible { display: block; }
.token-section h4 { font-size: 0.82rem; font-weight: 700; color: #1a6b3c; margin-bottom: 8px; }
.token-box {
  background: #fff;
  border: 1px solid #c8e6d4;
  border-radius: 6px;
  padding: 10px;
  font-family: monospace;
  font-size: 0.72rem;
  word-break: break-all;
  color: #1a3c2e;
  max-height: 100px;
  overflow-y: auto;
}
.copy-btn {
  margin-top: 8px;
  padding: 5px 14px;
  font-size: 0.78rem;
  background: #2e9e5e;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.copy-btn:active { opacity: 0.7; }

/* Debug badge */
.debug-badge {
  position: fixed; top: 12px; right: 14px;
  background: #ff9800; color: #fff;
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
  letter-spacing: 0.05em;
}

/* Site key info */
.site-key-info {
  font-size: 0.72rem; color: #888;
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 12px;
}
.site-key-info span { font-family: monospace; color: #555; }

/* Nav */
.back-link { font-size: 0.82rem; color: #2e9e5e; text-decoration: none; display: inline-block; margin-bottom: 20px; }
.back-link:hover { text-decoration: underline; }

/* Index page */
.page-list { list-style: none; margin-top: 20px; }
.page-list li {
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 12px;
  background: #fff;
}
.page-list li a { font-weight: 700; color: #1a6b3c; text-decoration: none; font-size: 1rem; }
.page-list li a:hover { text-decoration: underline; }
.page-list li p { font-size: 0.82rem; color: #666; margin-top: 4px; }
.page-list li code { font-size: 0.78rem; background: #f5f5f5; padding: 2px 7px; border-radius: 4px; }

/* Logs page */
.logs-wrap { width: 100%; max-width: 1200px; }
.logs-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.logs-header h2 { font-size: 1.3rem; font-weight: 700; color: #1a3c2e; }
.logs-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.logs-filters { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); padding: 14px 18px; margin-bottom: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.logs-filters label { font-size: 0.78rem; font-weight: 600; color: #555; display: flex; flex-direction: column; gap: 4px; }
.logs-filters input, .logs-filters select {
  padding: 6px 10px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 0.84rem; outline: none; min-width: 110px;
}
.logs-filters input:focus, .logs-filters select:focus { border-color: #2e9e5e; }
.btn { padding: 7px 16px; border: none; border-radius: 7px; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: opacity 0.15s; }
.btn:hover { opacity: 0.85; }
.btn-green  { background: #2e9e5e; color: #fff; }
.btn-orange { background: #e65100; color: #fff; }
.btn-gray   { background: #757575; color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 0.77rem; }
.auto-badge { font-size: 0.72rem; background: #c8e6d4; color: #1a6b3c; padding: 3px 9px; border-radius: 20px; font-weight: 700; }
.auto-badge.off { background: #eee; color: #999; }
.stats-bar { font-size: 0.8rem; color: #777; margin-bottom: 8px; }
.logs-table-wrap { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
thead th { background: #f0faf4; color: #1a6b3c; font-weight: 700; padding: 10px 12px; text-align: left; border-bottom: 2px solid #c8e6d4; white-space: nowrap; }
tbody tr { border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background 0.1s; }
tbody tr:hover { background: #f7fdf9; }
tbody tr.expanded { background: #f0faf4; }
tbody td { padding: 8px 12px; vertical-align: top; color: #333; }
.method-badge { display: inline-block; padding: 2px 7px; border-radius: 4px; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em; }
.method-GET    { background: #e3f2fd; color: #1565c0; }
.method-POST   { background: #e8f5e9; color: #2e7d32; }
.method-DELETE { background: #fce4ec; color: #c62828; }
.method-PUT    { background: #fff3e0; color: #e65100; }
.method-PATCH  { background: #f3e5f5; color: #6a1b9a; }
.status-ok   { color: #2e7d32; font-weight: 700; }
.status-4xx  { color: #e65100; font-weight: 700; }
.status-5xx  { color: #c62828; font-weight: 700; }
.status-3xx  { color: #1565c0; font-weight: 700; }
.mono { font-family: monospace; }
.trunc { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-row td { background: #f0faf4; border-bottom: 2px solid #c8e6d4; }
.detail-grid { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; padding: 10px 4px; }
.detail-key { font-weight: 700; color: #1a6b3c; font-size: 0.76rem; align-self: start; padding-top: 2px; }
.detail-val { font-family: monospace; font-size: 0.76rem; color: #333; word-break: break-all; white-space: pre-wrap; }
.empty-state { text-align: center; padding: 48px 16px; color: #aaa; font-size: 0.9rem; }

/* Log sub-tabs */
.log-tab-btn { padding: 7px 20px; font-size: 0.84rem; font-weight: 600; cursor: pointer; border: none; background: none; color: #777; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; }
.log-tab-btn:hover { color: #1a6b3c; }
.log-tab-btn.active { color: #1a6b3c; border-bottom-color: #2e9e5e; }

/* Server config cards */
.cfg-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border: 1.5px solid #e0e0e0; margin-bottom: 14px; overflow: hidden; }
.cfg-card.active-card { border-color: #4caf50; border-width: 2px; }
.cfg-card-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; gap: 12px; flex-wrap: wrap; }
.cfg-card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfg-card-title h3 { font-size: 1rem; font-weight: 700; color: #1a3c2e; margin: 0; }
.cfg-card-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.cfg-card-meta { padding: 0 18px 14px; font-size: 0.78rem; color: #888; display: flex; gap: 18px; flex-wrap: wrap; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; }
.chip-green  { background: #e8f5e9; color: #2e7d32; }
.chip-orange { background: #fff3e0; color: #e65100; }
.chip-outline { background: transparent; border: 1.5px solid #bbb; color: #555; }
.chip-active { background: #4caf50; color: #fff; }
.dot-active   { color: #4caf50; font-size: 1.1rem; }
.dot-inactive { color: #ccc; font-size: 1.1rem; }

/* Modal */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; align-items: center; justify-content: center; }
.modal-backdrop.open { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 100%; max-width: 520px; box-shadow: 0 8px 40px rgba(0,0,0,0.18); margin: 16px; max-height: 90vh; display: flex; flex-direction: column; }
.modal-title { padding: 18px 22px 14px; font-size: 1.05rem; font-weight: 700; color: #1a3c2e; border-bottom: 1px solid #eee; flex-shrink: 0; }
.modal-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.modal-footer { padding: 12px 22px; border-top: 1px solid #eee; display: flex; gap: 8px; justify-content: flex-end; flex-shrink: 0; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: #444; margin-bottom: 5px; }
.form-group input[type=text], .form-group input[type=url], .form-group textarea, .form-group select {
  width: 100%; padding: 8px 11px; border: 1.5px solid #ddd; border-radius: 7px; font-size: 0.88rem; outline: none; font-family: inherit; box-sizing: border-box;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: #2e9e5e; }
.form-group textarea { resize: vertical; min-height: 62px; }
.form-group .helper { font-size: 0.72rem; color: #888; margin-top: 4px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.toggle-row label { font-size: 0.82rem; color: #444; cursor: pointer; }
.toggle-row input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: #2e9e5e; }
.form-divider { border: none; border-top: 1.5px solid #eee; margin: 14px 0; }
.form-caption { font-size: 0.72rem; color: #888; margin-top: -8px; margin-bottom: 10px; }
.empty-card { background: #f5f5f5; border-radius: 10px; padding: 32px; text-align: center; color: #999; font-size: 0.9rem; }

/* Home page tab layout */
.home-wrap { width: 100%; max-width: 1200px; }
.home-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.home-header .logo-icon { width: 42px; height: 42px; background: linear-gradient(135deg, #1a6b3c, #2e9e5e); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 700; flex-shrink: 0; }
.home-header .logo-text { font-size: 1.15rem; font-weight: 700; color: #1a3c2e; line-height: 1.2; }
.home-header .logo-sub  { font-size: 0.75rem; color: #666; }
.tab-bar { display: flex; border-bottom: 2px solid #c8e6d4; margin-bottom: 0; }
.tab-btn { padding: 10px 26px; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none; background: none; color: #777; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; }
.tab-btn:hover { color: #1a6b3c; }
.tab-btn.active { color: #1a6b3c; border-bottom-color: #1a6b3c; }
.tab-panel { display: none; padding-top: 24px; }
.tab-panel.active { display: block; }