*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#0b0f19;color:#e8eaf0}
a{color:#9ecbff;text-decoration:none}a:hover{text-decoration:underline}
.flash-wrap{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:1000;width:min(800px,92%)}
.flash{padding:10px 12px;border-radius:12px;margin:6px 0;background:#1f2937}
.flash.success{background:#053b22;color:#c9fdd5}.flash.warning{background:#3a1a00;color:#ffd6a7}.flash.info{background:#0a244a;color:#cbe1ff}.flash.error{background:#3c0612;color:#ffcbd5}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#2563eb;color:#fff;border:1px solid transparent;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:transparent;border-color:#3a4b7a;color:#c3ceff}
.btn.danger{background:#b91c1c}
.btn.tiny{padding:6px 8px;border-radius:8px;font-size:12px}

.topbar{display:flex;align-items:center;padding:14px 18px;background:#101626;border-bottom:1px solid #1e2742;position:sticky;top:0}
.spacer{flex:1}
.muted{opacity:.75}

.card{background:#0f1629;border:1px solid #192446;border-radius:16px;padding:18px;margin:18px auto;width:min(1100px,95%)}
.card h2{margin:0 0 12px 0}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid .full{grid-column:1 / -1}

label{display:block;margin:2px 0 6px 0;font-size:14px;opacity:.9}
input,select{width:100%;padding:10px 12px;border-radius:10px;background:#0b1222;border:1px solid #1a2a4a;color:#eaf2ff}
input[type="file"]{padding:10px;background:#08101f}

.auth-card {
  width: min(420px, 92%);
  margin: 10vh auto;
  background: #ffffff;               /* White background */
  border: none;                      /* No dark border */
  padding: 24px;
  border-radius: 12px;               /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Soft shadow */
}

.auth-card h1 {
  margin-top: 0;
  font-size: 22px;
  font-weight: 600;
  color: #222;                       /* Dark heading */
}

.auth-card label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: #444;
}

.auth-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  font-size: 14px;
  transition: border-color 0.2s;
}

.auth-card input:focus {
  border-color: #2196f3;             /* Blue focus */
}

.auth-card button {
  margin-top: 12px;
  background: #03a9f4;               /* Bright blue like screenshot */
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.auth-card button:hover {
  background: #0288d1;
}

.auth-card .error {
  color: #ff4a5c;
  margin-bottom: 10px;
  font-size: 13px;
}


.table-wrap{width:min(1100px,95%);margin:18px auto}
table{width:100%;border-collapse:separate;border-spacing:0 8px}
thead th{text-align:left;font-weight:700;padding:10px;color:#cbd5e1}
tbody tr{background:#0f1629}
tbody td{padding:10px;border-top:1px solid #192446;border-bottom:1px solid #192446}
tbody tr td:first-child{border-left:1px solid #192446;border-top-left-radius:12px;border-bottom-left-radius:12px}
tbody tr td:last-child{border-right:1px solid #192446;border-top-right-radius:12px;border-bottom-right-radius:12px}
.actions{display:flex;gap:8px}

.pagination{display:flex;justify-content:center;gap:12px;padding:12px}

.photo-box{display:flex;align-items:center;justify-content:center}
.avatar{width:160px;height:160px;object-fit:cover;border-radius:14px;border:1px solid #26314e}

.landing{display:grid;place-items:center;min-height:100vh;background:radial-gradient(60% 60% at 50% 40%, #101a34, #070a12)}
.start-btn{font-size:26px;font-weight:800;padding:18px 28px;border-radius:16px;background:#22c55e;color:#06240f;border:none;cursor:pointer;animation:pop 1.2s ease-out both}
.start-btn:hover{filter:brightness(1.05)}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}

.sub-card{border:1px solid #1a2544;border-radius:14px;padding:14px;margin:10px 0;background:#0b1222}
.sub-list{display:grid;gap:12px}
.sub-fieldset{border:1px dashed #284077;border-radius:14px;padding:12px;margin:8px 0}
legend{opacity:.8}

.table-wrap table .actions form{display:inline}
/* --- Light theme overrides --- */
body{
  background:#f5f7fb;
  color:#111827;
}
a{ color:#1d4ed8 }
.flash{ background:#eef2ff; color:#1e3a8a }
.flash.success{ background:#e7f5ec; color:#065f46 }
.flash.warning{ background:#fff7ed; color:#9a3412 }
.flash.info{ background:#eff6ff; color:#1e40af }
.flash.error{ background:#fef2f2; color:#991b1b }

.card{
  background:#ffffff;
  border:1px solid #e5e7eb;
}
.topbar{
  background:#ffffff;
  border-bottom:1px solid #e5e7eb;
  color:#111827;
}
.btn{
  background:#2563eb;
  color:#ffffff;
}
.btn.ghost{
  background:transparent;
  border-color:#c7d2fe;
  color:#1e3a8a;
}
.btn.danger{ background:#dc2626 }

.table-wrap tbody tr{ background:#ffffff }
tbody td{
  border-top:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
}
tbody tr td:first-child{ border-left:1px solid #e5e7eb }
tbody tr td:last-child{ border-right:1px solid #e5e7eb }

input,select{
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:#111827;
}
input[type="file"]{ background:#ffffff }

.photo-box .avatar{
  border:1px solid #e5e7eb;
}
.muted{ opacity:.8; color:#6b7280 }

.landing{
  background:radial-gradient(60% 60% at 50% 40%, #ffffff, #e5e7eb);
}
.start-btn{
  background:#16a34a;
  color:#ffffff;
}
.sub-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
}
.sub-fieldset{
  border:1px dashed #cbd5e1;
}