/* theCampusNet login — styles. Fonts: Cormorant Garamond (600, italic 500) + Source Sans 3 (400–700), Google Fonts. */
:root{
  --bg:#F6F3EE; --navy:#182246; --navy-hover:#10183A; --gold:#B08D57; --gold-text:#8A6A3A; 
  --muted:#6B6F80; --text:#1c2f3a; --text-2:#55636a; --line:#DDD8CE; --divider:#D6CFC1;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:'Source Sans 3',sans-serif;color:var(--text)}
a{color:var(--navy);text-decoration:none}a:hover{color:var(--gold-text)}

.cn-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);position:relative;overflow:hidden}

.cn-side-inner{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px}
.cn-lang{align-self:flex-end;display:flex;gap:2px;background:#fff;border-radius:999px;padding:3px;box-shadow:0 2px 8px rgba(30,42,90,.08)}
.cn-lang a{font-size:13px;font-weight:600;border-radius:999px;padding:6px 14px;color:var(--muted)}
.cn-lang a.is-active{background:var(--navy);color:#fff}

.cn-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 32px 32px;gap:14px;min-width:0}
.cn-logo{width:168px;height:168px;display:block;filter:drop-shadow(0 10px 24px rgba(24,34,70,.12))}
.cn-tagline{font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.7;max-width:560px}
.cn-illustration{width:100%;max-width:640px;height:auto;display:block;margin-top:8px}
.cn-hero{margin:6px 0 0;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:32px;line-height:1.2;color:var(--navy);text-align:center}
.cn-logos{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:22px}
.cn-logos .lac{height:52px;width:auto}.cn-logos .evo{height:44px;width:auto}.cn-logos .lvng{height:44px;width:auto}
.cn-logos .sep{width:1px;height:36px;background:var(--divider)}

.cn-side{display:flex;align-items:flex-start;justify-content:center;padding:max(48px, calc(50vh - 340px)) 40px 48px;min-width:0}
.cn-card{width:100%;max-width:400px;justify-content:flex-start;background:#fff;border-radius:20px;padding:40px 36px;box-shadow:0 20px 50px rgba(30,42,90,.10);display:flex;flex-direction:column;gap:18px}
.cn-role{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#F1ECE3;border-radius:12px;padding:4px}
.cn-role a{font-size:14px;font-weight:600;text-align:center;border-radius:9px;padding:9px 0;color:var(--muted)}
.cn-role a.is-active{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(30,42,90,.12)}
.cn-card h1{margin:0;font-size:26px;font-weight:700;color:var(--text)}
.cn-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.cn-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.cn-input{font:inherit;font-weight:400;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);width:100%}
.cn-input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,42,90,.12)}
.cn-btn{font:inherit;font-weight:600;font-size:16px;padding:13px;border:0;border-radius:10px;background:var(--navy);color:#fff;cursor:pointer;width:100%}
.cn-btn:hover{background:var(--navy-hover)}
.cn-or{display:flex;align-items:center;gap:12px;color:#8a949a;font-size:12px;letter-spacing:.12em}
.cn-or::before,.cn-or::after{content:"";flex:1;height:1px;background:#ECE7DE}
.cn-google{font:inherit;font-weight:500;font-size:15px;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.cn-google:hover{background:#F8F5F0}
.cn-register{margin-top:6px;padding-top:18px;border-top:1px solid #ECE7DE;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.cn-register span{font-size:14.5px;color:var(--text-2)}
.cn-register a{font-weight:600;font-size:15px;color:#8A6A3A}
.cn-register a:hover{color:var(--navy)}
.cn-error{color:var(--gold-text);font-size:14px}

@media (max-width:900px){
  .cn-page{grid-template-columns:1fr}
  .cn-brand{padding:80px 20px 8px}
  .cn-logo{width:128px;height:128px}
  .cn-hero{font-size:24px}
  .cn-side{padding:16px 20px 48px}
}