/* GradeSort entry screens. Shared controls retain ui-controls.css styling.
 * Scope every rule to auth views / logged-out mode so chat layout is untouched.
 * Keep the auth IDs in index.html stable: authentication and avatar crop bind to them. */
body:not([data-mode="chat"]) .app {
  max-width:none; padding:40px 28px 56px; margin:0;
  background:none; min-height:100dvh;
}
body:not([data-mode="chat"]) .topbar {
  width:min(1152px,100%); padding:0 2px 30px; gap:20px;
}
body:not([data-mode="chat"]) .brand { gap:0; }
body:not([data-mode="chat"]) .brand-title {
  font-family:var(--font-ui); color:var(--text); font-size:24px;
  font-weight:750; line-height:1.1; letter-spacing:-1px;
}
body:not([data-mode="chat"]) .brand-title span { color:#8fbbe9; }
body:not([data-mode="chat"]) .brand-subtitle { margin-top:7px; font-size:11px; color:var(--muted2); }
.auth-header-note { color:var(--muted2); font-size:11px; letter-spacing:.02em; }
body:not([data-mode="chat"]) .card {
  width:min(1152px,100%); border-radius:20px; border:1px solid var(--stroke2);
  background:#171f29; box-shadow:0 24px 68px #00000024; overflow:hidden;
}
body:not([data-mode="chat"]) :is(#view-home,#view-create,#view-login) { padding:0; }
.auth-home-layout { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:48px; align-items:center; }
.auth-home-copy { min-width:0; padding:8px 0; }
.auth-eyebrow,.auth-small-label { display:block; font-size:10px; font-weight:650; line-height:1.5; letter-spacing:1.5px; color:#8ba4bf; }
.auth-hero-title { margin:20px 0; color:var(--text); font-size:clamp(34px,3.5vw,48px); font-weight:700; line-height:1.12; letter-spacing:-1.8px; }
.auth-description { margin:0; color:#a1afbf; font-size:14px; line-height:1.8; max-width:390px; }
.auth-home-copy .auth-description { max-width:350px; }
.auth-view .btn-row { gap:10px; }
.auth-view .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:43px; padding:11px 15px; font-size:12px; }
.auth-view .btn > svg { flex:0 0 auto; }
.auth-home-actions { margin-top:28px; align-items:stretch; }
.auth-home-actions .btn { min-height:44px; }
.auth-home-note { display:flex; gap:7px; align-items:center; margin-top:22px; font-size:11px; color:var(--muted2); }
.auth-home-note svg { color:#6ba98c; }
.auth-dashboard { border:1px solid #91abc927; border-radius:14px; background:#111923; box-shadow:0 12px 32px #0000001c; overflow:hidden; min-width:0; }
.auth-dashboard-head { padding:22px 24px 20px; display:flex; align-items:center; gap:12px; justify-content:space-between; border-bottom:1px solid var(--stroke); }
.auth-dashboard-head .auth-small-label { color:var(--muted2); font-size:9px; letter-spacing:1.1px; }
.auth-dashboard-head h2 { margin:5px 0 0; font-size:17px; font-weight:650; letter-spacing:-.4px; }
.auth-preview-tag { color:#97a9be; font-size:10px; padding:5px 8px; border-radius:6px; border:1px solid var(--stroke2); background:#1b2633; }
.auth-grade-overview { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; padding:24px; }
.auth-metric-label { display:block; font-size:11px; color:var(--muted); }
.auth-average { display:block; margin-top:5px; font-size:46px; letter-spacing:-2px; line-height:1.15; font-weight:650; }
.auth-average > span { margin-left:3px; font-size:24px; letter-spacing:-1px; font-weight:450; color:#9fb4cc; }
.auth-grade-trend { display:flex; align-items:center; gap:5px; margin-top:10px; font-size:10px; color:#81ba9e; }
.auth-target { border-left:1px solid var(--stroke2); padding-left:24px; }
.auth-target strong { display:block; margin-top:6px; color:#a9c9ea; font-size:37px; line-height:1.35; font-weight:550; }
.auth-target > span:last-child { font-size:10px; color:var(--muted2); }
.auth-class-head { display:flex; justify-content:space-between; padding:12px 24px 8px; border-top:1px solid var(--stroke); color:var(--muted2); font-size:9px; font-weight:650; letter-spacing:.9px; }
.auth-class-row { display:flex; align-items:center; gap:11px; margin:0 24px; padding:13px 0; border-bottom:1px solid #91abc911; }
.auth-subject-mark { display:grid; place-items:center; width:32px; height:32px; flex:0 0 32px; border-radius:9px; background:#26394d; color:#a4c8ed; font-size:11px; font-weight:650; }
.auth-mark-green { background:#233c36; color:#9ccab5; }
.auth-mark-amber { background:#3a3329; color:#d0b78e; }
.auth-class-row > div { min-width:0; flex:1; }
.auth-class-row strong { display:block; font-size:11px; font-weight:600; }
.auth-class-row div > span { display:block; font-size:9px; margin-top:3px; color:var(--muted2); }
.auth-class-row > b { color:#c2d1e2; font-size:12px; font-weight:550; font-variant-numeric:tabular-nums; }
.auth-dashboard-foot { display:flex; justify-content:space-between; padding:13px 24px 16px; gap:10px; font-size:9px; color:var(--muted2); }
.auth-feature-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:24px 48px; border-top:1px solid var(--stroke2); background:#131b24; gap:24px; }
.auth-feature-strip > div { display:flex; gap:12px; align-items:center; }
.auth-feature-number { color:#627b95; font-size:10px; letter-spacing:1px; }
.auth-feature-strip strong { display:block; font-size:11px; font-weight:600; color:#bfcede; }
.auth-feature-strip div > div > span { display:block; margin-top:5px; font-size:10px; color:var(--muted2); }
.auth-form-layout { display:grid; grid-template-columns:.92fr 1.08fr; min-height:540px; }
.auth-form-aside { display:flex; flex-direction:column; padding:30px 38px 32px; border-right:1px solid var(--stroke2); background:linear-gradient(145deg,#1c2a38,#15212d 70%); min-width:0; }
.auth-view .auth-back { width:36px; height:36px; min-height:36px; padding:0; flex:0 0 36px; }
.auth-aside-copy { margin:auto 0; padding:40px 0; }
.auth-aside-title { margin:16px 0; color:var(--text); font-size:clamp(28px,3vw,37px); line-height:1.18; font-weight:650; letter-spacing:-1.2px; }
.auth-aside-copy .auth-description { max-width:330px; font-size:13px; }
.auth-study-note { display:flex; align-items:center; gap:12px; border-top:1px solid var(--stroke2); padding-top:22px; }
.auth-study-note > svg { color:#8daece; flex:0 0 28px; }
.auth-study-note strong { display:block; color:#b7c9db; font-size:11px; font-weight:550; }
.auth-study-note span { display:block; margin-top:5px; color:#71869d; font-size:10px; line-height:1.5; }
.auth-form-content { padding:43px 42px; min-width:0; }
.auth-form-heading { margin-bottom:27px; }
.auth-form-title { font-size:24px; font-weight:650; line-height:1.25; letter-spacing:-.7px; margin:11px 0; }
.auth-form-heading .auth-description { font-size:12px; }
.auth-view .form { margin-top:0; }
.auth-view .label { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; color:#b9c8da; font-size:11px; }
.auth-field-hint { color:var(--muted2); font-size:10px; font-weight:400; }
.auth-view .input { min-height:46px; font-size:13px; padding:12px 13px; border-radius:10px; background:#101923; }
.auth-view .auth-avatar-field { display:block; margin-top:24px; }
.auth-view .auth-avatar-field > div { width:100%; }
.auth-view .create-avatar-upload { margin-top:0; border-radius:12px; background:#141d27; }
.auth-view .upload-ui { padding:16px; gap:14px; flex-wrap:wrap; }
.auth-view .upload-left { gap:12px; }
.auth-view .avatar-ring { width:66px; height:66px; padding:2px; background:#779bc558; }
.auth-view .upload-text .strong { font-size:12px; font-weight:550; }
.auth-view .upload-text .small { font-size:10px; margin-top:5px; }
.auth-view .upload-actions-stack { align-items:stretch; }
.auth-view .upload-actions-row { gap:7px; justify-content:flex-start; }
.auth-view .btn.tiny { min-height:32px; padding:7px 10px; font-size:10px; }
.auth-view .crop-controls { padding:12px; border-radius:10px; background:#141d27; }
.auth-view .crop-controls[hidden] { display:none; }
.auth-view .crop-controls .row { margin-top:8px; }
.auth-view .crop-controls .row:first-child { margin-top:0; }
.auth-view .crop-controls .small { font-size:10px; }
.auth-view .crop-controls .label { margin:0; }
.auth-view .auth-submit-row { margin-top:24px; }
.auth-view .auth-submit-row .btn { width:100%; justify-content:space-between; }
.auth-login-content { display:flex; flex-direction:column; justify-content:center; padding-top:65px; padding-bottom:65px; }
.auth-login-content .auth-form-heading { margin-bottom:31px; }
.auth-view .input-wrap { position:relative; gap:8px; }
.auth-view .input-wrap .input { min-width:0; }
.auth-view .input-wrap .eye { width:46px; min-width:46px; padding:0; }
.auth-login-note { display:flex; align-items:center; justify-content:center; gap:7px; font-size:10px; color:var(--muted2); margin:19px 0 0; }
.auth-view .error { font-size:12px; }
/* Mobile uses the same GradeSort layout, colors and wording; only density changes. */
body[data-mobile-ui="1"]:not([data-mode="chat"]) .app { max-width:none; background:none; padding:24px 18px 40px !important; }
body[data-mobile-ui="1"]:not([data-mode="chat"]) .topbar { padding:0 1px 22px; }
body[data-mobile-ui="1"]:not([data-mode="chat"]) .brand-title { font-size:24px; color:var(--text); }
body[data-mobile-ui="1"]:not([data-mode="chat"]) .brand-subtitle { font-size:11px; color:var(--muted2); }
body[data-mobile-ui="1"]:not([data-mode="chat"]) .card { border:1px solid var(--stroke2); border-radius:16px; background:#171f29; }
body[data-mobile-ui="1"] #view-home { padding:0; }
body[data-mobile-ui="1"] #view-home .btn-row { margin-top:24px; flex-direction:row; gap:10px; }
body[data-mobile-ui="1"] #view-home .btn { min-height:46px; font-size:12px; width:auto; }
body[data-mobile-ui="1"] #view-login .input,body[data-mobile-ui="1"] #view-create .input { min-height:48px; font-size:16px; border-radius:10px; }
body[data-mobile-ui="1"] #view-login .btn-row .btn,body[data-mobile-ui="1"] #view-create .btn-row .btn { min-height:46px; }
@media(max-width:1000px) {
  .auth-home-layout { padding:34px; gap:28px; }
  .auth-home-actions { flex-direction:column; align-items:flex-start; }
  .auth-feature-strip { padding:24px 34px; gap:16px; }
  .auth-form-aside { padding:28px; }
  .auth-form-content { padding:36px 28px; }
}
@media(max-width:760px) {
  body:not([data-mode="chat"]) .app { padding:24px 18px 40px; }
  body:not([data-mode="chat"]) .topbar { padding:0 1px 22px; }
  .auth-header-note { display:none; }
  .auth-home-layout { grid-template-columns:1fr; padding:30px 26px; gap:30px; }
  .auth-home-copy { padding:4px 0 0; }
  .auth-hero-title { margin:16px 0; font-size:40px; letter-spacing:-1.4px; }
  .auth-home-copy .auth-description { max-width:100%; }
  .auth-home-actions { flex-direction:row; align-items:stretch; }
  .auth-dashboard { width:100%; max-width:460px; }
  .auth-feature-strip { padding:23px 26px; grid-template-columns:1fr; gap:20px; }
  .auth-feature-strip strong { font-size:12px; }
  .auth-feature-strip div > div > span { font-size:11px; }
  .auth-form-layout { grid-template-columns:1fr; min-height:0; }
  .auth-form-aside { padding:22px 26px 26px; border-right:0; border-bottom:1px solid var(--stroke2); }
  .auth-aside-copy { padding:25px 0 0; }
  .auth-aside-title { font-size:28px; margin:11px 0; }
  .auth-aside-copy .auth-description { max-width:450px; font-size:12px; }
  .auth-study-note { display:none; }
  .auth-form-content { padding:28px 26px 32px; }
  .auth-form-title { font-size:23px; }
  .auth-form-heading { margin-bottom:24px; }
  .auth-login-content .auth-form-heading { margin-bottom:25px; }
}
@media(max-width:410px) {
  body[data-mobile-ui="1"]:not([data-mode="chat"]) .app { padding-inline:12px !important; }
  .auth-home-layout { padding:26px 21px; }
  .auth-hero-title { font-size:36px; }
  .auth-description { font-size:13px; }
  body[data-mobile-ui="1"] #view-home .btn-row { flex-direction:column; }
  body[data-mobile-ui="1"] #view-home .btn { width:100%; }
  .auth-home-note { align-items:flex-start; font-size:10px; }
  .auth-dashboard-head,.auth-grade-overview { padding:20px; }
  .auth-class-head { padding-inline:20px; }
  .auth-class-row { margin-inline:20px; }
  .auth-dashboard-foot { padding-inline:20px; font-size:8px; }
  .auth-target { padding-left:18px; }
  .auth-feature-strip,.auth-form-aside,.auth-form-content { padding-inline:21px; }
  .auth-form-title { font-size:22px; }
  .auth-field-hint { font-size:9px; }
}