:root{
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#123b7a;
  --danger:#b91c1c;
  --border:#d9d9e3;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:14px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{
  max-width: 900px;
  margin: 24px auto;
  padding: 0 14px;
}

.school-header{
      display:flex;
      align-items:center;
      gap:18px;
      margin-bottom:20px;
      padding-bottom:14px;
      border-bottom:1px solid #e5e7eb;
    }
    .school-header img{
      height:70px;
    }
    .school-title{
      font-size:20px;
      font-weight:700;
      color:#123b7a;
    }
    .school-sub{
      font-size:13px;
      color:#666;
    }

.bully-banner{
  text-align:center;
  margin:20px 0 25px 0;
}

.bully-banner img{
  max-width:260px;
  width:100%;
  opacity:.95;
}


.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding: 22px;
}
h1{
  margin: 0 0 10px;
  color:var(--primary);
  font-size: 22px;
}
p.lead{
  margin: 0 0 18px;
  color:var(--muted);
  line-height: 1.45;
}

label{
  display:block;
  font-weight: 650;
  margin: 14px 0 7px;
}
input[type="text"], input[type="email"], textarea{
  width:100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
}
textarea{ min-height: 120px; resize: vertical; }

.row{
  display:flex;
  gap:14px;
  flex-wrap: wrap;
}
.col{
  flex:1 1 280px;
}

.req{
  color: var(--danger);
  margin-left: 6px;
}

.help{
  color:var(--muted);
  font-size: 13px;
  margin-top: 6px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  background:var(--primary);
  color:#fff;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  cursor:pointer;
}
.btn:disabled{ opacity:.65; cursor:not-allowed; }

.alert{
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0;
}
.alert.ok{ background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.alert.err{ background:#fef2f2; border:1px solid #fecaca; color:#7f1d1d; }

.field-error{
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, .12);
}
.small{
  font-size: 13px;
  color:var(--muted);
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom: 12px;
}
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

.table{
  width:100%;
  border-collapse:collapse;
  margin-top: 12px;
}
.table th, .table td{
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  text-align:left;
  vertical-align: top;
  font-size: 14px;
}
.badge{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.badge.on{ background:#ecfeff; border:1px solid #a5f3fc; color:#155e75; }
.badge.off{ background:#f3f4f6; border:1px solid #e5e7eb; color:#374151; }