:root{
  --grad-start:#1e90ff;
  --grad-end:#ff2f92;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(135deg,var(--grad-start),var(--grad-end));
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.container{
  width:min(1100px, 96vw);
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.2);
  overflow:hidden;
}
.header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;
  background:linear-gradient(135deg,rgba(30,144,255,.15),rgba(255,47,146,.15));
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header .title{
  display:flex;align-items:center;gap:14px;font-weight:700;
}
.header img{height:46px}
.header .right a{margin-left:16px;text-decoration:none;color:#0d47a1;font-weight:600}
.footer{
  text-align:center;padding:12px;background:linear-gradient(135deg,rgba(30,144,255,.12),rgba(255,47,146,.12));
  color:#333;font-size:.92rem
}
.main{padding:22px}
.btn{
  background:linear-gradient(135deg,var(--grad-start),var(--grad-end));
  color:#fff;border:none;border-radius:12px;padding:12px 18px;
  font-weight:700;cursor:pointer;box-shadow:0 10px 20px rgba(0,0,0,.15);
}
.btn:disabled{opacity:.6;cursor:not-allowed}
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{
  border:1px solid #e8e8ef;border-radius:16px;padding:16px;background:#fff
}
.stat{display:flex;align-items:center;justify-content:center;font-size:1.2rem;padding:24px}
input,select{width:100%;padding:12px;border-radius:10px;border:1px solid #ccd;outline:none}
label{display:block;font-size:.9rem;color:#333;margin-bottom:6px}
h1,h2,h3{margin:8px 0}
.login-wrap{display:grid;grid-template-columns: 1fr 1fr}
.login-left{background:linear-gradient(135deg,var(--grad-start),var(--grad-end));padding:42px;color:#fff}
.login-left img{max-width:120px;border-radius:50%;background:#fff;padding:10px}
.login-right{padding:42px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef;color:#304ffe;font-weight:700}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.photo-area{display:grid;gap:8px}
.photo-canvas{width:150px;height:200px;border:2px dashed #999;border-radius:8px;background:#fafafa;display:block}
.flex{display:flex;gap:18px;align-items:flex-start}
hr{border:none;border-top:1px solid #eee;margin:14px 0}
.small{font-size:.85rem;color:#555}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #eee;padding:8px;text-align:left}
.notice{padding:10px;border-left:4px solid #1e90ff;background:#eef7ff;border-radius:8px}


/* --- Responsive tweaks --- */
@media (max-width: 900px){
  .container{ width: 95%; margin: 20px auto; }
  .login-wrap{ grid-template-columns: 1fr; }
  .login-left, .login-right{ padding: 24px; }
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr 1fr; }
  .header{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .header .right a{ margin-left: 0; margin-right: 12px; display: inline-block; }
}

/* === enhancements for buttons & badges === */
.btn { letter-spacing:.2px; transition:transform .06s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(1px) scale(.99); }

.badge { font-size:.85rem; letter-spacing:.15px; }
.badge + .badge { margin-left:6px; }

.table th { font-weight:700; color:#1f2937; }
.table td { color:#374151; }