/* ===== Shared UI - Settings area ===== */

.page-hero{
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 28%),
    radial-gradient(circle at left bottom, rgba(16,185,129,.08), transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 18px 40px rgba(15,23,42,.06);
}

.page-hero-head{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}

.page-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.16);
  background: rgba(239,246,255,.85);
  color:#1d4ed8;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.page-title{
  margin:0;
  font-size:28px;
  line-height:1.05;
  font-weight:900;
  color:#0f172a;
}

.page-subtitle{
  margin:10px 0 0;
  max-width:900px;
  font-size:14px;
  line-height:1.55;
  color:#475569;
  font-weight:600;
}

.page-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.section-card{
  border:1px solid rgba(15,23,42,.08);
  border-radius:20px;
  background:#fff;
  box-shadow: 0 16px 36px rgba(15,23,42,.05);
  overflow:hidden;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  padding:20px 20px 0 20px;
}

.section-body{
  padding:20px;
}

.section-title{
  margin:0;
  font-size:20px;
  font-weight:900;
  color:#0f172a;
}

.section-subtitle{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.5;
  color:#64748b;
  font-weight:700;
  max-width:900px;
}

.alert{
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  font-size:13px;
  line-height:1.45;
  border:1px solid transparent;
}

.alert-success{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.06);
  color:#166534;
}

.alert-error{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.06);
  color:#b91c1c;
}

.alert-warn{
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.10);
  color:#92400e;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.15);
  background:#fff;
  color:#111827;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}

.btn-primary{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

.btn-secondary{
  background:#fff;
  color:#111827;
}

.btn-danger{
  border:1px solid #fecaca;
  background:#fff1f2;
  color:#991b1b;
}

.btn-soft{
  background:#f8fafc;
}

.btn:hover{
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
}

.field{
  display:grid;
  gap:6px;
}

.field label{
  font-size:12px;
  font-weight:900;
  color:#111827;
  opacity:.9;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.15);
  background:#fff;
  outline:none;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 0 0 4px rgba(59,130,246,.10);
}

.field-help,
.help,
.muted{
  font-size:12px;
  color:#6b7280;
  line-height:1.45;
  font-weight:700;
}

.info-box,
.note-box,
.info-note{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(59,130,246,.14);
  background: rgba(239,246,255,.60);
  color:#334155;
  font-size:13px;
  line-height:1.5;
  font-weight:700;
}

.empty-state{
  padding:18px;
  border:1px dashed #d1d5db;
  border-radius:16px;
  background:#fff;
  color:#6b7280;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}

.table-wrap,
.table-scroll{
  overflow-x:auto;
}

.status-badge,
.badge-ok,
.badge-off{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
  border:1px solid transparent;
}

.badge-ok,
.status-badge.ok{
  color:#166534;
  background:rgba(34,197,94,.09);
  border-color:rgba(34,197,94,.24);
}

.badge-off,
.status-badge.off{
  color:#b91c1c;
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.25);
}

@media (max-width: 760px){
  .page-hero{
    padding:18px;
    border-radius:18px;
  }

  .page-title{
    font-size:24px;
  }

  .section-head,
  .section-body{
    padding-left:16px;
    padding-right:16px;
  }
}