*{box-sizing:border-box;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif}
body{background:linear-gradient(180deg,#eef2f7,#fff);margin:0;color:#263238}

.nav{background:#1a237e;color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:700}
.nav a{color:#fff;text-decoration:none;margin-left:12px}

.container{
  padding:22px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px; /* more space between cards */
  max-width:1300px;
  margin:20px auto;
}

.card{
  background:#fff;
  padding:20px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(30,30,80,0.06);
  min-width:320px;
  overflow-x:auto;
}

label{display:block;margin-top:8px;font-weight:600}
input,select,textarea{width:100%;padding:9px;border:1px solid #eee;border-radius:6px;margin-top:6px}
.btn{background:#1a237e;color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;margin-top:10px}
.btn.small{padding:6px 8px;font-size:13px}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-box{background:#fff;padding:22px;width:420px;border-radius:10px;box-shadow:0 18px 45px rgba(30,30,80,0.06)}

.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab-btn{flex:1;padding:8px;border-radius:6px;border:1px solid #eee;background:#fafafa;cursor:pointer}
.tab-btn.active{background:#1a237e;color:#fff}
.hidden{display:none}

.table{width:100%;border-collapse:collapse;table-layout:auto}
.table th,.table td{padding:10px;border-bottom:1px solid #f0f0f0;text-align:left;white-space:nowrap}
.table td img{max-width:40px;border-radius:4px}

.alert{padding:10px;border-radius:6px;margin-top:8px}
.alert.success{background:#e8f5e9;color:#2e7d32}
.alert.error{background:#ffebee;color:#c62828}

.logo{display:block;margin:0 auto 15px auto;max-width:120px}
.passport{max-width:150px;border-radius:8px;display:block;margin-bottom:10px}

@media (max-width:768px){
  .table{display:block;overflow-x:auto;white-space:nowrap}
}