/* The Note Path · student area (login, password pages) */
:root{--bg:#0B0713;--surface:#120C1E;--raised:#1E1630;--line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.16);
--text:#F5F1F8;--muted:#B3A9C4;--faint:#7C7090;--gold:#E3B76A;--ok:#4FD1B5;--err:#F08A7E;
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5}
.page{min-height:100vh;display:grid;grid-template-columns:56% 44%}
.cover{position:relative;overflow:hidden;min-height:100vh;background:#120C1E url('cover.jpg') 40% 50%/cover}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,12,30,.85) 0%,rgba(18,12,30,.1) 24%,transparent 46%,rgba(18,12,30,.6) 70%,rgba(18,12,30,.96) 100%),linear-gradient(90deg,rgba(18,12,30,.25) 0%,transparent 55%,rgba(18,12,30,.6) 100%)}
.brand{position:absolute;z-index:2;top:36px;left:44px;display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand svg{width:44px;height:44px;flex:none}
.brand .name{font-family:var(--serif);font-size:24px;line-height:1}.brand .name i{font-style:normal;color:var(--gold)}
.brand .sub{display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.message{position:absolute;z-index:2;left:44px;right:44px;bottom:52px;max-width:600px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.message h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.8vw,54px);line-height:1.06}
.message h1 span{color:var(--gold)}
.message p{margin-top:14px;color:#D6CEE4;font-size:16px;max-width:440px}
.side{display:flex;align-items:center;justify-content:center;padding:40px 26px;background:radial-gradient(70% 50% at 50% 0%,rgba(227,183,106,.10),transparent 70%),linear-gradient(160deg,#1E1630,#0B0713 70%)}
.card{width:min(440px,100%);padding:36px 36px 26px;border-radius:24px;background:rgba(18,12,30,.92);border:1px solid var(--line-strong);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.card .mark{display:grid;place-items:center;margin:0 auto 12px}.card .mark svg{width:58px;height:58px}
h2{text-align:center;font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.15}
.subtitle{text-align:center;color:var(--muted);font-size:14.5px;margin:8px 0 22px}.subtitle b{color:var(--text)}
.notice{margin:-6px 0 18px;padding:11px 14px;border-radius:12px;font-size:14px;line-height:1.45}
.notice.ok{background:rgba(79,209,181,.12);border:1px solid rgba(79,209,181,.45);color:#CFF3EA}
.notice.err{background:rgba(240,138,126,.10);border:1px solid rgba(240,138,126,.5);color:#FAD3CD}
.notice a{color:var(--gold)}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.input{position:relative;display:flex;align-items:center;height:54px;border-radius:13px;background:var(--raised);border:1px solid var(--line-strong)}
.input:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,183,106,.18)}
.input input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:16px;padding:0 14px}
.input input::placeholder{color:var(--faint)}
.input input:-webkit-autofill{-webkit-text-fill-color:var(--text);-webkit-box-shadow:0 0 0 40px var(--raised) inset}
.toggle{flex:none;width:58px;height:100%;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}
.hint{margin:-8px 0 16px;font-size:12.5px;color:var(--faint)}
.options{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 22px;font-size:13.5px}
.remember{display:flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer}
.remember input{width:17px;height:17px;accent-color:var(--gold)}
.link{color:var(--gold);text-decoration:none}.link:hover{text-decoration:underline}
.button{display:flex;align-items:center;justify-content:center;width:100%;height:56px;border:0;border-radius:14px;cursor:pointer;background:var(--gold);color:#1A1226;font-size:16px;font-weight:800;text-decoration:none;box-shadow:0 14px 34px -14px rgba(227,183,106,.8)}
.button:hover{filter:brightness(1.07)}
.button[disabled]{opacity:.6;cursor:wait}
.back{text-align:center;margin-top:18px;font-size:14px}
.contact{text-align:center;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.contact b{display:block;color:var(--text);font-size:14px}
.contact a{color:var(--gold);font-weight:700;text-decoration:none}
.footer{text-align:center;color:var(--faint);font-size:11.5px;margin-top:18px}
@media(max-width:900px){
 .page{grid-template-columns:1fr}
 .cover{min-height:360px;height:48vh;background-position:46% 40%}
 .brand{top:20px;left:18px}.brand svg{width:38px;height:38px}.brand .name{font-size:20px}
 .message{left:18px;right:18px;bottom:52px}.message h1{font-size:30px}.message p{display:none}
 .side{padding:20px 14px 40px;align-items:flex-start}
 .card{padding:28px 20px 22px;margin-top:-38px;position:relative;z-index:3}
}