*{box-sizing:border-box} :root{--indigo:#393B90;--green:#7BBA44;--pale:#EAF1E4;--ink:#25263c;--muted:#646678}body{margin:0;background:#fafbf8;color:var(--ink);font-family:Inter,'Segoe UI',Arial,sans-serif;line-height:1.6}a{color:var(--indigo)}.header{max-width:1240px;margin:auto;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e8e2}.brand{display:flex;gap:14px;align-items:center;text-decoration:none;font-size:21px;font-weight:600}.brand-symbol{background:var(--indigo);color:white;padding:5px 12px;border-radius:10px;font-weight:900;letter-spacing:-1px}.header-tag,.small{font-size:13px;color:var(--muted)}main{max-width:1240px;margin:auto;padding:40px 32px}.login-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:center;min-height:650px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750;color:var(--indigo)}h1{font-size:48px;line-height:1.15;letter-spacing:-1.8px;margin:20px 0}h1 em{font-style:normal;color:var(--indigo)}p{color:var(--muted)}.intro>p{max-width:470px;font-size:18px}.login-card{background:white;border:1px solid #e1e5db;border-radius:24px;padding:42px;box-shadow:0 20px 65px #393b9009}.login-card h2{font-size:32px;line-height:1.25;letter-spacing:-.8px}.pill{display:inline-block;color:#405929;background:var(--pale);padding:5px 11px;border-radius:20px;font-size:12px;font-weight:650}button{font:inherit;border:1px solid #d9d9d9;padding:13px 16px;border-radius:10px}button:disabled{cursor:not-allowed}.primary{display:flex;justify-content:space-between;background:var(--indigo);color:white;width:100%;border:0;margin:28px 0 20px;opacity:.72}.notice{background:var(--pale);border-left:3px solid var(--green);border-radius:10px;padding:18px 20px;margin:20px 0}.notice p{margin:5px 0 0;font-size:14px}.notice strong{font-size:14px}.illustration{height:230px;position:relative;max-width:390px;margin-top:20px;background:radial-gradient(ellipse at 50% 75%,#e1e9d8 0,transparent 65%)}.box{position:absolute;border-radius:10px;transform:rotate(-9deg);box-shadow:16px 18px 0 #393b900b}.box-front{width:175px;height:150px;background:var(--indigo);left:60px;top:60px;color:white;display:grid;place-items:center;font-size:36px;line-height:1;font-weight:900;border-top:20px solid #5052a2}.box-front small{font-size:11px;letter-spacing:4px}.box-back{width:155px;height:135px;background:#d2dfbc;left:180px;top:35px;transform:rotate(12deg);border-top:18px solid #c1d49e}.leaf{position:absolute;left:285px;top:5px;width:36px;height:75px;background:var(--green);border-radius:100% 0 100% 0;transform:rotate(25deg)}.page-heading{max-width:850px;margin:24px 0 35px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0}.card{background:white;border:1px solid #e2e5de;border-radius:16px;padding:26px}.card h2{font-size:20px}.card p{font-size:15px;min-height:48px}.card a{font-weight:650;text-decoration:none}footer{max-width:1240px;margin:20px auto;padding:24px 32px;border-top:1px solid #e5e7df;color:var(--muted);font-size:12px}:focus-visible{outline:3px solid var(--green);outline-offset:4px}@media(max-width:850px){.login-grid{gap:28px;min-height:auto}.login-card{padding:26px}h1{font-size:37px}.cards{grid-template-columns:repeat(2,1fr)}.illustration{transform:scale(.85);transform-origin:left center}}@media(max-width:620px){main{padding:24px 20px}.header{padding:20px}.header-tag{display:none}.login-grid{grid-template-columns:1fr;gap:18px}.intro>p{font-size:16px}.illustration{display:none}h1{font-size:34px}.login-card{padding:28px 24px}.login-card h2{font-size:28px}.cards{grid-template-columns:1fr}footer{padding:20px}.page-heading{margin-top:10px}}
.official-logo{display:block;width:142px;height:auto}.brand>span:last-child{border-left:1px solid #d9d9d9;padding-left:14px}.login-link{padding:14px 18px;border-radius:10px;text-decoration:none;opacity:1;min-height:48px}.login-link:hover{background:#2f317b}.logout{background:white;color:#393b90;min-height:44px;padding:8px 18px}@media(max-width:620px){.brand{gap:10px;font-size:18px}.official-logo{width:115px}.login-card{margin-bottom:16px}.primary{min-height:52px}.cards{gap:14px}.card{padding:22px}.header{gap:12px}}

@media(max-width:900px){.login-grid{display:block;min-height:auto;max-width:480px;margin:12px auto}.intro{display:none}.header-tag{display:none}.login-card{padding:30px 24px;border-radius:20px}.login-card h2{font-size:30px}.primary{min-height:52px;align-items:center}.header{padding:20px}.page-heading h1{font-size:32px}.notice{padding:16px}.cards{margin-top:20px}}
@media(max-width:390px){main{padding:20px 14px}.login-card{padding:26px 20px}.brand{font-size:17px}.official-logo{width:106px}}