*{
  box-sizing:border-box;
  font-family: 'Segoe UI', sans-serif;
}

body{
  margin:0;
  background:#f6f7fb;
  color:#333;
}

/* ---------- COMMON ---------- */
.container{
  max-width:1100px;
  margin:auto;
  padding:40px 20px;
}

h1{
  margin-bottom:10px;
}
p{
  color:#666;
}

/* ---------- AUTH PAGES ---------- */
.auth-wrapper{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(135deg,#fbcfe8,#ddd6fe);
}

.auth-card{
  background:#fff;
  width:420px;
  padding:35px;
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
}

.auth-card h1{
  text-align:center;
  color:#7c3aed;
}

.auth-card input{
  width:100%;
  padding:14px;
  margin:12px 0;
  border-radius:10px;
  border:1px solid #ddd;
}

.auth-card button{
  width:100%;
  padding:14px;
  margin-top:10px;
  border:none;
  border-radius:10px;
  background:#7c3aed;
  color:white;
  font-size:16px;
  cursor:pointer;
}

.auth-links{
  text-align:center;
  margin-top:15px;
}
.auth-links a{
  display:block;
  margin-top:6px;
  text-decoration:none;
  color:#7c3aed;
}

/* ---------- NAVBAR ---------- */
.navbar{
  background:white;
  padding:18px 30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.navbar h2{
  color:#7c3aed;
}

.navbar button{
  padding:10px 18px;
  background:#ef4444;
  color:white;
  border:none;
  border-radius:8px;
}

/* ---------- DASHBOARD ---------- */
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:25px;
  margin-top:40px;
}

.card{
  background:white;
  padding:30px;
  border-radius:18px;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.3s;
}

.card:hover{
  transform:translateY(-6px);
}

.card h3{
  margin-bottom:8px;
}

.card p{
  font-size:14px;
}

/* ---------- PAGE CARD ---------- */
.page-card{
  background:white;
  padding:40px;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  margin-top:30px;
}

/* ---------- SCAN ---------- */
textarea{
  width:100%;
  height:140px;
  padding:15px;
  border-radius:12px;
  border:1px solid #ddd;
}

.result{
  margin-top:15px;
  font-size:18px;
  font-weight:bold;
}

/* ---------- EMERGENCY ---------- */
.emergency-btn{
  width:100%;
  padding:18px;
  margin:12px 0;
  border:none;
  border-radius:14px;
  font-size:18px;
  color:white;
}

/* ---------- TABLE ---------- */
table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}
th,td{
  padding:14px;
  border-bottom:1px solid #eee;
}
th{
  background:#ede9fe;
  text-align:left;
}

/* COLORS */
.purple{color:#7c3aed;}
.red-bg{background:#ef4444;}
.orange-bg{background:#f97316;}
.blue-bg{background:#3b82f6;}
.green-bg{background:#22c55e;}
body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #fdecef, #fff);
  margin: 0;
  padding: 0;
}

.emergency-container {
  max-width: 420px;
  margin: 40px auto;
  background: #fff;
  padding: 30px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.emergency-container h1 {
  color: #b91c1c;
  margin-bottom: 10px;
}

.emergency-container p {
  color: #555;
  margin-bottom: 25px;
}

.emergency-btn {
  display: block;
  text-decoration: none;
  padding: 15px;
  margin: 15px 0;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.2s;
}

.emergency-btn:hover {
  transform: scale(1.05);
}

.police { background: #dc2626; }
.women  { background: #be185d; }
.cyber  { background: #7c3aed; }

.back-btn {
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
}
/* Scan Button */
.page-card button {
  margin-top: 20px;
  padding: 14px 22px;
  border-radius: 10px;
  border: none;
  background: #7c3aed;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

/* Risk Colors */
.low {
  color: #16a34a;
  font-weight: bold;
}

.medium {
  color: #f97316;
  font-weight: bold;
}

.high {
  color: #dc2626;
  font-weight: bold;
}
