:root{--bg:#f6f8fb;--card:#ffffff;--accent:#2b6cb0;--muted:#6b7280}
body{font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;background:var(--bg);margin:0;padding:0;color:#111}
.container{max-width:1000px;margin:40px auto;padding:24px}

/* Form */
.form-card{background:var(--card);padding:28px;border-radius:10px;box-shadow:0 6px 20px rgba(11,15,30,0.06)}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.logo{height:48px;max-width:160px;object-fit:contain}
.form-header h1{margin:0 0 6px;font-size:1.6rem}
.form-header p{margin:0 0 16px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:flex;flex-direction:column}
.field-full{grid-column:1 / -1}
.field label{font-size:0.9rem;margin-bottom:6px}
.field input,.field textarea{padding:10px;border:1px solid #e2e8f0;border-radius:6px;font-size:0.95rem}
.field textarea{min-height:100px}
.actions{text-align:right;margin-top:14px}
.btn-primary{background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:8px;cursor:pointer}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;background:#f3f4f6;color:#111;text-decoration:none;border:1px solid #e5e7eb}
.form-footer{margin-top:12px;color:var(--muted);font-size:0.9rem;text-align:center}

/* Login */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#eef2f9 0%,#dbe6f5 100%)}
.login-card{width:100%;max-width:400px;margin:0;padding:36px 32px;background:var(--card);border-radius:14px;box-shadow:0 12px 40px rgba(11,15,30,0.12);text-align:center}
.login-brand{display:flex;justify-content:center;margin-bottom:18px}
.login-logo{height:64px;max-width:220px;object-fit:contain}
.login-card h1{margin:0 0 6px;font-size:1.5rem;color:#111}
.login-subtitle{margin:0 0 22px;color:var(--muted);font-size:0.92rem}
.login-card .field{text-align:left;margin-bottom:14px}
.login-card .actions{text-align:center;margin-top:20px}
.login-card .btn-primary{width:100%;padding:12px 16px;font-size:1rem;font-weight:600;transition:background .15s ease}
.login-card .btn-primary:hover{background:#245a94}
.error{background:#ffe6e6;color:#8b0000;padding:10px 12px;border-radius:8px;margin-bottom:16px;font-size:0.9rem;text-align:left}

/* Admin */
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.admin-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-actions .btn{display:inline-block;padding:8px 12px;border-radius:8px;background:#f3f4f6;color:#111;text-decoration:none;border:1px solid #e5e7eb}
.qr-card{background:var(--card);padding:16px 20px;border-radius:8px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.qr-card h2{margin:0 0 4px;font-size:1.1rem}
.qr-card p{margin:0 0 10px;color:var(--muted);font-size:0.9rem}
.qr-actions{display:flex;gap:8px;flex-wrap:wrap}
.qr-card img{border-radius:6px;border:1px solid #edf2f7}
.table-wrap{background:var(--card);padding:10px;border-radius:8px}
table{width:100%;border-collapse:collapse;margin-top:8px}
table th,table td{border-bottom:1px solid #edf2f7;padding:10px;text-align:left}
table thead th{background:#f8fafc;font-weight:600}

@media (max-width:720px){
	.grid{grid-template-columns:1fr}
	.form-card{padding:18px}
	.brand{justify-content:center}
	.logo{height:40px}
	.actions{text-align:center}
	.btn-primary{display:block;width:100%}
	.btn{display:block;width:100%;margin:8px 0}
	.admin-header{flex-direction:column;align-items:flex-start}
}

@media (min-width:721px) and (max-width:1024px){
  .container{max-width:720px}
  .form-card{padding:22px}
}

/* Accessibility + focus */
input:focus, textarea:focus, select:focus, button:focus{outline:3px solid rgba(43,108,176,0.15);outline-offset:2px}

/* Make form centered and responsive */
.form-page{padding:20px}
.form-card{max-width:900px;margin:0 auto}