
:root{
  --green:#BAD70C;
  --gray:#6C6F70;
  --bg:#f1f2f3;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#111}
body.bg-gray{background:var(--bg)}
header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e6e6e6;padding:8px 14px;position:sticky;top:0;z-index:9}
.brand{display:flex;align-items:center;gap:8px;font-weight:700}
.brand img{width:36px;height:36px}
nav a, nav button{margin-left:10px;background:transparent;border:0;cursor:pointer;color:#333;text-decoration:none;padding:6px 10px;border-radius:8px}
nav a:hover, nav button:hover{background:#f0f0f0}
main{max-width:1100px;margin:20px auto;padding:0 14px}
.card{background:#fff;border-radius:16px;box-shadow:0 6px 30px rgba(0,0,0,.06);padding:18px;margin:16px 0}
h1{font-size:22px;margin:0 0 10px}
.input{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.input input, .input textarea, .input select{padding:10px 12px;border:1px solid #ddd;border-radius:10px;background:#fafafa}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{display:inline-flex;gap:8px;align-items:center;border:0;border-radius:10px;padding:10px 14px;background:var(--green);color:#000;font-weight:600;cursor:pointer}
.btn.secondary{background:#eaecef}
.btn.danger{background:#ffb3b8}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.table{width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden}
.table th,.table td{padding:10px 12px;border-bottom:1px solid #eee;text-align:left;background:#fff;vertical-align:top}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:#e9ecef;color:#333;font-size:12px}
.badge.ok{background:#ccf1a8}
.note{color:#666;font-size:12px}
#map{width:100%;height:60vh;border-radius:14px;overflow:hidden}
footer{padding:20px;text-align:center;color:#777}
.alert{padding:10px 12px;border-radius:10px;background:#fff3cd;border:1px solid #ffe69c;color:#664d03}
.err{padding:10px 12px;border-radius:10px;background:#f8d7da;border:1px solid #f5c2c7;color:#842029}
.success{padding:10px 12px;border-radius:10px;background:#d1e7dd;border:1px solid #badbcc;color:#0f5132}
.hidden{display:none}
.auth-wrap{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center}
.auth-card{width:100%;max-width:460px;padding:26px}
.auth-card .logo-big{display:block;margin:4px auto 16px; width:160px; height:auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.06));}
.auth-card .subtitle{color:#555;margin:0 0 6px;text-align:center}
.small-link{font-size:14px}
.tabs{display:flex;gap:8px;margin:6px 0 12px}
.tabs a{padding:8px 10px;border-radius:10px;background:#f0f1f2;color:#333;text-decoration:none}
.tabs a.active{background:var(--green);color:#000;font-weight:700}
.tag-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tag-fields .input{margin:0}
.tag-page {
  max-width: 1180px;
  margin: 24px auto;
  padding: 16px 24px 32px;
  background: #f8fafc;
  border-radius: 16px;
}

.tag-header-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.tag-header-main {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.tag-header-title h1 {
  margin: 4px 0 0;
  font-size: 22px;
}

.tag-pill {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
}

.tag-header-meta {
  min-width: 260px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
}

.meta-label {
  color: #6b7280;
}

.meta-value {
  font-weight: 500;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.tag-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
  gap: 16px;
}

.tag-column.right {
  min-width: 280px;
}

.tag-section {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.tag-section h2 {
  font-size: 15px;
  margin: 0 0 10px;
}

.field-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid #f1f5f9;
}

.field-row:last-child {
  border-bottom: none;
}

.field-row.static-row {
  grid-template-columns: 1.4fr 1.6fr;
}

.field-label {
  font-size: 13px;
  color: #64748b;
}

.field-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.value-text {
  font-size: 14px;
  color: #0f172a;
  white-space: pre-wrap;
}

.field-input {
  width: 100%;
  font-size: 14px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid #cbd5f5;
  background: #f9fafb;
}

.field-input:focus {
  outline: none;
  border-color: #BAD70C;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.3);
}

.icon-button {
  border: none;
  background: #ecfdf3;
  color: #16a34a;
  border-radius: 999px;
  padding: 4px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 120ms ease, transform 80ms ease;
}

.icon-button:hover {
  background: #bbf7d0;
  transform: translateY(-1px);
}

.icon-pencil {
  font-size: 14px;
}

.status-pill {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
}

.status-pill.ok {
  background: #dcfce7;
  color: #15803d;
}

.status-pill.ko {
  background: #fee2e2;
  color: #b91c1c;
}

.status-pill.neutral {
  background: #e5e7eb;
  color: #374151;
}

.tag-footer-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.primary-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: none;
  background: #BAD70C;
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.4);
}

.primary-btn:hover {
  background: #16a34a;
}
.hint-text {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}