:root { --account-ink: #202b43; --account-muted: #6f7d96; --account-line: #dfe5f0; }
.account-page { min-height: 100vh; background: radial-gradient(circle at 8% 0%, #e7e1ff 0, transparent 32rem), linear-gradient(145deg, #f5f8ff, #fff8fb); }
.account-shell { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: 34px 0 70px; }
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr); gap: 22px; align-items: stretch; }
.account-grid > * { min-width: 0; }
.account-intro, .account-card { border: 1px solid #e4e8f2; border-radius: 26px; box-shadow: 0 18px 45px #26385912; }
.account-intro { position: relative; overflow: hidden; isolation: isolate; padding: clamp(26px, 5vw, 54px); color: #fff; background: linear-gradient(140deg, #4f32c4 0%, #6d3ee8 52%, #138ac5 100%); }
.account-intro::before, .account-intro::after { position: absolute; z-index: -1; border-radius: 50%; content: ''; background: #ffffff1c; }
.account-intro::before { width: 250px; height: 250px; right: -80px; top: -95px; }
.account-intro::after { width: 160px; height: 160px; left: -70px; bottom: -80px; }
.account-intro h1 { max-width: 470px; margin: 10px 0 13px; font: 800 clamp(1.75rem, 4vw, 2.75rem)/1.08 'Manrope', sans-serif; }
.account-intro > p { max-width: 510px; margin: 0; color: #f2efff; font-size: .96rem; line-height: 1.6; }
.account-intro .eyebrow { color: #e9e1ff; }
.account-intro .benefit-list { position: relative; z-index: 1; display: grid; gap: 10px; margin-top: 28px; }
.account-intro .benefit { display: flex; align-items: center; gap: 10px; width: fit-content; padding: 9px 12px; border: 1px solid #ffffff26; border-radius: 12px; color: #fff; background: #ffffff16; font-size: .8rem; font-weight: 700; }
.account-intro .benefit i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #4f32c4; background: #fff; }
.account-card { padding: clamp(22px, 4vw, 36px); background: #fff; }
.account-card h2 { margin: 0; color: var(--account-ink); font: 800 clamp(1.35rem, 3vw, 1.75rem) 'Manrope', sans-serif; }
.account-card > .lead { color: var(--account-muted); line-height: 1.5; }
.account-card .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-card .field { display: grid; gap: 7px; min-width: 0; margin: 0; }
.account-card .field.full { grid-column: 1 / -1; }
.account-card .field > span:not(.password-field) { color: var(--account-ink); font-size: .78rem; font-weight: 800; }
.account-card .field input, .account-card .field select, .account-card .field textarea { width: 100%; min-height: 45px; border: 1px solid var(--account-line); border-radius: 12px; color: var(--account-ink); background: #fbfcff; font: inherit; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.account-card .field input, .account-card .field select { padding: 11px 13px; }
.account-card .field textarea { padding: 11px 13px; }
.account-card .field input:focus, .account-card .field select:focus, .account-card .field textarea:focus { border-color: #7c5ce0; background: #fff; box-shadow: 0 0 0 4px #7c5ce016; outline: none; }
.account-card .form-grid { gap: 14px; }
.account-card .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.account-card .primary-btn, .account-card .secondary-btn { min-height: 43px; border-radius: 12px; font-weight: 800; }
.account-card .primary-btn { box-shadow: 0 9px 20px #6d3ee82b; }
.account-card .switch-link { margin: 19px 0 0; color: var(--account-muted); font-size: .82rem; text-align: center; }
.account-card .switch-link a { color: #5d3dc2; font-weight: 900; }
.account-card .check { align-items: flex-start; gap: 9px; color: var(--account-muted); font-size: .76rem; line-height: 1.45; }
.account-card .check input { width: 17px; min-height: 17px; margin-top: 2px; accent-color: #6d3ee8; }
.password-field { position: relative; display: block; width: 100%; }
.password-field > input { padding-right: 82px !important; }
.password-toggle { position: absolute; top: 50%; right: 8px; min-height: 29px; padding: 4px 8px; transform: translateY(-50%); border: 1px solid #ded5ff; border-radius: 8px; color: #5f3ec4; background: #f8f4ff; font: 800 .68rem 'DM Sans', sans-serif; cursor: pointer; }
.password-toggle:hover, .password-toggle:focus-visible { color: #fff; border-color: #6d3ee8; background: #6d3ee8; outline: none; }
.code-result { display: grid; justify-items: center; gap: 10px; padding: 8px 0; text-align: center; }
.code-result > i { color: #0d9f70; }
.code-result strong { display: inline-block; padding: 12px 18px; border-radius: 13px; color: #5033bd; background: #f0eaff; font: 900 1.55rem/1 'Manrope', sans-serif; letter-spacing: .14em; }
.code-result p { margin: 0; color: var(--account-muted); font-size: .85rem; line-height: 1.45; }
.form-status.show { padding: 10px 12px; border-radius: 11px; }
.student-activity-card{margin-top:18px;padding:18px 20px;border:1px solid #e0e7f1;border-radius:20px;background:linear-gradient(135deg,#ffffff,#f7fbff);box-shadow:0 12px 30px #273b6210}.student-activity-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.student-activity-heading h2{margin:0;color:#20304a;font:800 1.05rem/1.2 'Manrope',sans-serif}.student-activity-heading h2 i{margin-right:6px;color:#3157d5}.student-activity-heading p{margin:6px 0 0;color:#74839a;font-size:.76rem;line-height:1.45}.student-activity-live{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;color:#17755a;background:#e8f8f1;font-size:.67rem;font-weight:900;white-space:nowrap}.student-activity-live i{color:#19a879;font-size:.46rem}.student-activity-list{display:grid;gap:7px;margin-top:14px}.student-activity-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:9px 10px;border:1px solid #edf1f6;border-radius:12px;background:#fff}.student-activity-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#3157d5,#7046d0);font-size:.72rem}.student-activity-row strong,.student-activity-row small{display:block}.student-activity-row strong{overflow:hidden;color:#263650;font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}.student-activity-row small{margin-top:2px;overflow:hidden;color:#7b889b;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}.student-activity-row time{color:#9aa6b6;font-size:.64rem;white-space:nowrap}@media(max-width:560px){.student-activity-card{padding:15px 13px}.student-activity-heading{display:block}.student-activity-live{margin-top:9px}.student-activity-row{grid-template-columns:30px minmax(0,1fr);}.student-activity-row time{grid-column:2}.student-activity-row strong{white-space:normal}}
@media (max-width: 760px) { .account-shell { padding-top: 20px; } .account-grid { grid-template-columns: 1fr; } .account-intro { padding: 28px 24px; border-radius: 22px; } .account-card { border-radius: 22px; } }
@media (max-width: 480px) { .account-shell { width: min(100% - 18px, 560px); padding-bottom: 40px; } .account-intro h1 { font-size: 1.75rem; } .account-card .form-actions > * { flex: 1 1 100%; text-align: center; } }