*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#f7f7f8;
  color:#111;
}

/* Header (blue theme) */
header{
  padding:20px 16px;
  text-align:center;
  background:#1565c0;   /* medium blue */
  color:#fff;
  border-bottom:1px solid #0d47a1;  /* darker blue border */
}
h1{margin:0;font-size:24px}
.tagline{margin:4px 0 0;opacity:0.95}

/* Layout */
main{max-width:880px;margin:0 auto;padding:16px;display:grid;gap:16px}
.card{background:#fff;border:1px solid #e6e6e9;border-radius:12px;padding:16px;box-shadow:0 1px 0 rgba(0,0,0,0.02)}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Labels + Inputs */
label{display:flex;flex-direction:column;font-weight:600;font-size:14px;gap:6px}
input,select,textarea{
  padding:10px;
  border:1px solid #cfcfd3;
  border-radius:10px;
  font-size:16px;
}
textarea{resize:vertical}

/* Buttons */
.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
button{
  padding:10px 14px;
  border:1px solid #1565c0;
  border-radius:10px;
  background:#1976d2;   /* main blue */
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition: background 0.2s;
}
button:hover{background:#1565c0}  /* darker hover */

button.secondary{
  background:#fff;
  color:#1565c0;
  border:1px solid #1565c0;
}
button.secondary:hover{background:#e3f2fd} /* light blue hover */

button.danger{
  background:#fff5f5;
  border-color:#ffd3d3;
  color:#c62828;        /* red text for danger */
}

/* Stats */
.stats{display:grid;gap:12px;margin-top:12px}
.stats.three{grid-template-columns:repeat(3,1fr)}
.stats.four{grid-template-columns:repeat(4,1fr)}
.stat{padding:12px;border:1px solid #eee;border-radius:10px;text-align:center;background:#fcfcfc}
.stat-number{font-size:22px;font-weight:800;color:#1565c0}  /* numbers in blue */
.stat-label{font-size:12px;color:#666}

/* Notes + JSON box */
.note{font-size:12px;color:#555}
.jsonbox{
  background:#0b1020;
  color:#e6f1ff;
  padding:10px;
  border-radius:8px;
  max-height:220px;
  overflow:auto;
}

/* Import label */
.import{display:flex;align-items:center;gap:8px;font-weight:600}

/* Links (View full label) */
a, #infoLink{
  color:#1565c0;
  text-decoration:underline;
}
a:hover, #infoLink:hover{
  color:#0d47a1;  /* darker on hover */
}

/* Footer */
footer{padding:16px;text-align:center;color:#777}

/* Responsive */
@media (max-width:900px){
  .stats.four{grid-template-columns:repeat(2,1fr)} /* 2 per row on smaller screens */
}
@media (max-width:640px){
  .grid.two{grid-template-columns:1fr}
}