body { min-height: 100vh; }
.landing-wrap, .page-wrap { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.hero-card, .info-card, .panel-card, .login-card, .success-card { background: rgba(255,255,255,.95); border-radius: 24px; box-shadow: var(--shadow-md); padding: 1.25rem; border: 1px solid rgba(255,255,255,.75); }
.hero-card { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; align-items: center; margin: 1.25rem 0; }
.hero-card h2, .info-card h3, .panel-card h2, .panel-card h3, .login-card h2, .success-card h2 { margin-top: 0; color: var(--navy); }
.hero-actions, .toolbar, .action-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; border-radius:14px; padding:.85rem 1.1rem; font-weight:800; border:none; cursor:pointer; }
.btn-primary { background: linear-gradient(135deg,var(--amber),var(--amber-dark)); color:#fff; }
.btn-secondary { background: var(--navy); color:#fff; }
.btn-light { background:#fff; color:var(--navy); border:1px solid var(--gray-300); }
.grid-two { display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; margin-bottom:1.5rem; }
.login-wrap { max-width: 520px; margin: 1.5rem auto; padding: 0 1rem; }
.login-card { padding: 1.25rem; }
.form-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.form-grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.field { display:flex; flex-direction:column; gap:.35rem; margin-bottom: .85rem; }
.field label { font-weight:700; color: var(--gray-700); }
.field input, .field select, .field textarea { width:100%; min-height:48px; border:1px solid var(--gray-300); border-radius: 14px; padding:.78rem .9rem; font: inherit; background:#fff; }
.field textarea { min-height: 110px; }
.field small { color: var(--gray-500); }
.alert { border-radius: 16px; padding: .9rem 1rem; margin-bottom: 1rem; font-weight: 700; }
.alert-error { background: #fff1f2; color: #b42318; border: 1px solid #fecdd3; }
.alert-success { background: #ecfdf3; color: #027a48; border: 1px solid #abefc6; }
.hidden { display:none !important; }
.badge { display:inline-flex; align-items:center; padding:.35rem .65rem; border-radius:999px; font-weight:800; font-size:.8rem; background:#eff6ff; color:#1d4ed8; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse: collapse; }
th, td { padding: .8rem; border-bottom:1px solid var(--gray-200); text-align:left; }
th { color: var(--gray-600); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; }
.metric-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1rem; margin-bottom:1rem; }
.metric { background: linear-gradient(180deg,#fff,#f8fafc); border:1px solid var(--gray-200); border-radius:18px; padding:1rem; }
.metric strong { display:block; font-size:1.8rem; color:var(--navy); }
.hero-logo-wrap img { max-height: 360px; margin: 0 auto; }
.qr-preview { max-width: 160px; border-radius: 14px; border:1px solid var(--gray-200); background:#fff; padding:.5rem; }
@media (max-width: 900px) { .hero-card, .grid-two, .form-grid, .form-grid-3, .metric-grid { grid-template-columns: 1fr; } }