:root { --g1:#00432f; --g2:#006a4e; --g3:#0a8a63; --red:#f42a41; }
* { box-sizing: border-box; }
body.lg { min-height: 100vh; margin: 0; display: flex; flex-direction: column; background: #eef3f0; }
.lg-wrap { flex: 1; display: flex; flex-wrap: wrap; }
.lg-hero { flex: 1 1 420px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 3rem 2rem; position: relative; overflow: hidden;
  background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.10), transparent 38%), linear-gradient(145deg, var(--g1), var(--g2) 55%, var(--g3)); }
.lg-hero::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: var(--red); opacity: .55; right: -150px; bottom: -170px; box-shadow: 0 0 0 26px rgba(244,42,65,.18); }
.lg-hero::after { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); left: -90px; top: -90px; }
.lg-hero > * { position: relative; z-index: 1; }
.lg-logo { width: 112px; height: 112px; object-fit: contain; margin-bottom: 1rem; filter: drop-shadow(0 3px 8px rgba(0,0,0,.35)); }
.lg-gov { font-size: 1.05rem; opacity: .95; line-height: 1.5; }
.lg-bar { width: 72px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--red) 0 60%, #fff 60%); margin: .9rem auto 0; }
.lg-title { font-size: 1.9rem; font-weight: 700; line-height: 1.35; margin: 1.1rem 0 .6rem; text-shadow: 0 2px 6px rgba(0,0,0,.25); }
.lg-sub { max-width: 30rem; opacity: .9; font-size: 1rem; line-height: 1.6; }
.lg-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.5rem; }
.lg-pills span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .25rem .8rem .25rem .6rem; font-size: .85rem; }
.lg-pills span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: .4rem; box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.lg-side { flex: 1 1 380px; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.lg-card { width: 100%; max-width: 410px; background: #fff; border-radius: 16px; padding: 2rem 1.8rem; box-shadow: 0 14px 40px rgba(0,67,47,.16); position: relative; overflow: hidden; }
.lg-card::before, .ab-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--g2) 0 72%, var(--red) 72%); }
.lg-card h2 { font-size: 1.35rem; margin: 0 0 .25rem; color: var(--g1); }
.lg-card .hint { color: #6b7a73; font-size: .9rem; margin-bottom: 1.2rem; }
.lg-card .form-control { padding: .65rem .85rem; border-radius: 10px; }
.lg-card .form-control:focus { border-color: var(--g3); box-shadow: 0 0 0 .2rem rgba(10,138,99,.18); }
.lg-btn { background: var(--g2); border: 0; color: #fff; width: 100%; padding: .7rem; border-radius: 10px; font-weight: 600; font-size: 1.05rem; }
.lg-btn:hover { background: var(--g1); color: #fff; }
.lg-btn { box-shadow: 0 4px 0 var(--red); } .lg-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--red); }
.pw { position: relative; } .pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #6b7a73; font-size: .85rem; padding: .3rem .5rem; }
.lg-foot { text-align: center; padding: .8rem 1rem; font-size: .85rem; color: #55655d; background: #e3ebe7; border-top: 3px solid var(--red); }
.lg-foot a { color: var(--g2); font-weight: 600; text-decoration: none; } .lg-foot a:hover { text-decoration: underline; }
.ab-card { max-width: 640px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 2rem; box-shadow: 0 14px 40px rgba(0,67,47,.16); text-align: center; position: relative; overflow: hidden; }
.ab-card .nm { font-size: 1.6rem; font-weight: 700; color: var(--g1); margin: .4rem 0 .2rem; }
.ab-card .ds { font-size: 1.1rem; margin: 0; } .ab-card .of { color: #44554d; margin: .15rem 0; } .ab-card .bc { color: #55655d; margin: .3rem 0 0; font-size: .95rem; }
.ab-card hr { margin: 1.5rem auto; opacity: 1; border: 0; height: 3px; width: 90px; background: linear-gradient(90deg, var(--g2) 0 65%, var(--red) 65%); } .ab-card .sm { color: #55655d; font-size: .95rem; line-height: 1.7; text-align: left; }
@media (max-width: 767px) { .lg-hero { padding: 2rem 1rem; } .lg-title { font-size: 1.45rem; } }