:root { --ink: #111b26; --deep: #203b43; --green: #167b70; --mint: #63d7ca; --field: #eaf1ff; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--ink); background: #141d27; font-family: Inter, Arial, sans-serif; }
.auth-header { position: relative; z-index: 3; display: flex; width: min(1220px, calc(100% - 40px)); min-height: 90px; align-items: center; justify-content: space-between; gap: 28px; margin: 10px auto 0; padding: 0 54px; border-radius: 52px; background: var(--ink); color: #fff; }
.auth-logo { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.auth-logo img { display: block; width: 194px; max-height: 58px; object-fit: contain; object-position: left center; }
.auth-header nav { display: flex; gap: 48px; }.auth-header nav a { color: #c1c3c6; font-size: .95rem; text-decoration: none; }.auth-header nav a:hover { color: #fff; }
.header-action { padding: 14px 28px; border: 1px solid #fff; border-radius: 999px; color: #fff; font-size: .92rem; text-decoration: none; }
.auth-main { position: relative; display: grid; min-height: calc(100vh - 100px); place-items: center; overflow: hidden; padding: 90px 24px; background: var(--deep); }
.ribbon { position: absolute; z-index: 0; width: 38vw; height: 56px; background: var(--mint); transform: rotate(-8deg); }.ribbon::after { position: absolute; width: 100%; height: 56px; content: ""; background: #277d73; transform: translate(-10%, 106px); }.ribbon-one { top: 190px; right: -12vw; }.ribbon-two { bottom: 130px; left: -10vw; }
.auth-card { position: relative; z-index: 1; display: grid; width: min(750px, 100%); grid-template-columns: 1fr auto; gap: 28px 50px; padding: 58px 56px 54px; border-radius: 48px; background: #fff; box-shadow: 0 22px 42px rgba(0, 0, 0, .2); }
.auth-copy h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 500; letter-spacing: 0; line-height: 1.08; }.auth-copy p { margin: 16px 0 0; color: var(--green); font-size: .9rem; font-weight: 700; }
.switch-copy { color: #838a96; font-size: 1rem; }.switch-copy button, .text-action { display: block; margin: 7px 0 0; padding: 0; border: 0; color: #007567; background: transparent; font: inherit; cursor: pointer; }
.auth-form { grid-column: 1 / -1; display: grid; gap: 23px; }.auth-form label { display: grid; gap: 9px; color: #17202c; font-size: 1rem; }.auth-form input, .auth-form select { width: 100%; min-height: 57px; padding: 0 15px; border: 1px solid #a8aeb7; border-radius: 8px; outline: none; background: var(--field); color: #101827; font: inherit; }.auth-form input:focus, .auth-form select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(22, 123, 112, .14); }
.auth-form[hidden], .auth-card[hidden], .student-dashboard[hidden] { display: none; }.signup-field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.referral-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 11px; }.referral-field label { gap: 9px; }.referral-field label span { color: #68727f; font-size: .78rem; font-weight: 500; }.referral-field button { min-height: 57px; padding: 0 19px; border: 1px solid #0c7469; border-radius: 8px; color: #0c7469; background: #fff; font-weight: 700; }.referral-message { min-height: 18px; margin: -13px 0 0; color: #b62e2e; font-size: .84rem; }.referral-message.success { color: #087565; }
.password-wrap { position: relative; }.password-wrap input { padding-right: 68px; }.show-password { position: absolute; top: 50%; right: 13px; padding: 5px; border: 0; color: #146f68; background: transparent; font: inherit; font-size: .78rem; cursor: pointer; transform: translateY(-50%); }.text-action { justify-self: end; margin-top: -7px; }.submit-auth { min-height: 68px; border: 0; border-radius: 12px; color: #fff; background: #277d73; box-shadow: 0 10px 21px rgba(38, 109, 96, .2); font: 600 1.05rem Inter, sans-serif; cursor: pointer; transition: background .2s, transform .2s; }.submit-auth:hover { background: #14685e; transform: translateY(-2px); }.form-message { grid-column: 1 / -1; min-height: 20px; margin: -13px 0 0; color: #b62e2e; font-size: .87rem; }.form-message.success { color: #087565; }
.student-dashboard { position: relative; z-index: 1; width: min(1040px, 100%); padding: 48px; border-radius: 30px; background: #fff; box-shadow: 0 22px 42px rgba(0,0,0,.2); }.dashboard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.dashboard-top span { color: #077668; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.dashboard-top h1 { margin: 9px 0 4px; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: 0; }.dashboard-top p { margin: 0; color: #5f6770; }.dashboard-top button { padding: 12px 18px; border: 1px solid #0c7469; border-radius: 999px; color: #0c7469; background: #fff; font: inherit; cursor: pointer; }.enrollment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 35px; }.enrollment-card { padding: 26px; border-radius: 18px; background: #e8f0e4; }.enrollment-card span { color: #0d7669; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.enrollment-card h2 { margin: 10px 0 8px; font-size: 1.45rem; letter-spacing: 0; }.enrollment-card p { margin: 0; color: #33414b; font-size: .9rem; line-height: 1.5; }.enrollment-card button { width: 100%; margin-top: 20px; padding: 12px; border: 0; border-radius: 9px; color: #fff; background: #0c7469; font: 600 .9rem Inter, sans-serif; cursor: pointer; }
@media (max-width: 720px) { .auth-header { width: 100%; min-height: 78px; margin: 0; padding: 0 26px; border-radius: 0; }.auth-header nav, .header-action { display: none; }.auth-logo img { width: 142px; max-height: 42px; }.auth-main { min-height: calc(100vh - 78px); padding: 99px 14px 88px; align-items: start; }.ribbon { width: 240px; height: 25px; }.ribbon::after { height: 25px; transform: translate(-14%, 62px); }.ribbon-one { top: 152px; right: -110px; }.ribbon-two { bottom: 68px; left: -130px; }.auth-card { grid-template-columns: 1fr auto; gap: 25px 20px; padding: 31px 30px 31px; border-radius: 42px; }.auth-copy h1 { font-size: 1.75rem; }.switch-copy { font-size: .91rem; }.auth-form { gap: 19px; }.auth-form label { font-size: .96rem; }.auth-form input, .auth-form select { min-height: 57px; }.signup-field-grid { grid-template-columns: 1fr; gap: 19px; }.referral-field { grid-template-columns: 1fr; gap: 10px; }.referral-field button { min-height: 48px; }.submit-auth { min-height: 69px; }.student-dashboard { padding: 29px 22px; border-radius: 24px; }.dashboard-top { display: block; }.dashboard-top button { margin-top: 20px; }.enrollment-list { grid-template-columns: 1fr; } }