@font-face{font-family:"Profile Noto Sans SC";src:local("NotoSansSC-Thin"),local("Noto Sans SC");font-style:normal;font-weight:100 900;font-display:swap}
/* Student information screen. All labels, values and actions are live DOM text. */
html:has(.profile-mode),body:has(.profile-mode){height:auto;overflow:auto}
body:has(.profile-mode){background:#fcfdfa!important}
main.profile-mode{display:block;width:100%;height:auto;min-height:100vh;min-height:100dvh;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#f3f8f3 0,transparent 70%),#fcfdfa!important;box-shadow:none}
.profile-mode>#notice{display:none}
.profile-mode #student-profile{position:relative;display:block;flex:none;width:100%;padding:calc(var(--profile-unit) * 44) 0 calc(var(--profile-unit) * 66);color:#092c3c;--profile-unit:1px;font-family:"Profile Noto Sans SC","Microsoft YaHei",sans-serif;font-synthesis:none;font-weight:400;line-height:1.5}
#student-profile .profile-sr-only{position:absolute;width:calc(var(--profile-unit) * 1);height:calc(var(--profile-unit) * 1);margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#student-profile .profile-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;width:90%;max-width:calc(var(--profile-unit) * 1440);min-height:calc(var(--profile-unit) * 62);margin:0 auto}
#student-profile .profile-brand{display:flex;align-items:center;gap:calc(var(--profile-unit) * 12);color:#007d76;text-decoration:none}
#student-profile .profile-brand>svg{width:calc(var(--profile-unit) * 74);height:calc(var(--profile-unit) * 58);flex:none}
#student-profile .profile-brand strong{display:block;color:#082a39;font-size:calc(var(--profile-unit) * 28);font-weight:700;letter-spacing:.05em;line-height:1.4}
#student-profile .profile-brand small{display:block;color:#778399;font-size:calc(var(--profile-unit) * 12);letter-spacing:.37em;line-height:1.6}
#student-profile .profile-header-nav{display:flex;align-items:center;gap:calc(var(--profile-unit) * 34);font-size:calc(var(--profile-unit) * 20)}
#student-profile .profile-header-nav>span{padding-right:calc(var(--profile-unit) * 34);border-right:calc(var(--profile-unit) * 1) solid #b8c4ca;line-height:1}
#student-profile button{font-family:inherit;font-weight:600;letter-spacing:.025em;transition:background-color .15s,color .15s;transform:none;box-shadow:none}
#student-profile .profile-header-nav button{width:auto;min-width:0;margin:0;padding:calc(var(--profile-unit) * 8) 0;background:transparent;color:#092c3c;font-size:calc(var(--profile-unit) * 20);font-weight:400;letter-spacing:0}
#student-profile .profile-orbit{position:absolute;top:calc(var(--profile-unit) * 104);right:calc(var(--profile-unit) * -16);width:calc(var(--profile-unit) * 310);height:calc(var(--profile-unit) * 180);pointer-events:none;opacity:.9}
#student-profile .profile-steps{position:relative;display:flex;align-items:center;justify-content:center;margin:calc(var(--profile-unit) * 16) auto 0;padding:0;list-style:none;gap:calc(var(--profile-unit) * 140)}
#student-profile .profile-steps li{position:relative;display:flex;align-items:center;gap:calc(var(--profile-unit) * 18);color:#657184;font-size:calc(var(--profile-unit) * 21);white-space:nowrap}
#student-profile .profile-steps li+li:before{position:absolute;right:calc(100% + calc(var(--profile-unit) * 14));width:calc(var(--profile-unit) * 126);height:calc(var(--profile-unit) * 1);background:#7bb8ae;content:""}
#student-profile .profile-steps li>span{display:grid;place-items:center;width:calc(var(--profile-unit) * 48);height:calc(var(--profile-unit) * 48);border-radius:50%;background:#e9edeb;font-size:calc(var(--profile-unit) * 23);line-height:1}
#student-profile .profile-steps strong{font-weight:400}
#student-profile .profile-steps .current{color:#008176}
#student-profile .profile-steps .current>span{color:#fff;background:linear-gradient(120deg,#168e85,#00655e)}
#student-profile .profile-steps .current strong{font-weight:600;letter-spacing:.05em}
#student-profile .profile-description{position:relative;margin:calc(var(--profile-unit) * 58) calc(var(--profile-unit) * 24) calc(var(--profile-unit) * 29);color:#6b7685;font-size:calc(var(--profile-unit) * 24);line-height:1.5;text-align:center;letter-spacing:.025em}
#student-profile .profile-form{position:relative;width:calc(100% - 16.666667%);max-width:calc(var(--profile-unit) * 1280);margin:0 auto}
#student-profile .student-profile-card{width:100%;margin:0;padding:calc(var(--profile-unit) * 36) calc(var(--profile-unit) * 46) calc(var(--profile-unit) * 28);border:calc(var(--profile-unit) * 1) solid #ccdcd6;border-radius:calc(var(--profile-unit) * 14);background:#ffffffed;box-shadow:0 calc(var(--profile-unit) * 10) calc(var(--profile-unit) * 30) #194b3508}
#student-profile .profile-group{margin:0;padding:0;animation:none}
#student-profile .profile-group+.profile-group{margin-top:calc(var(--profile-unit) * 50)}
#student-profile .profile-group-heading{display:flex;align-items:center;gap:calc(var(--profile-unit) * 26);margin:0 0 calc(var(--profile-unit) * 20)}
#student-profile .profile-group-heading>svg{width:calc(var(--profile-unit) * 46);height:calc(var(--profile-unit) * 52);flex:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#student-profile .profile-group-heading h2{flex:none;margin:0;color:#092c3c;font-family:inherit;font-size:calc(var(--profile-unit) * 28);font-weight:600;letter-spacing:.01em;line-height:1.5}
#student-profile .profile-group-heading>span{flex:1;height:calc(var(--profile-unit) * 1);margin-left:calc(var(--profile-unit) * 4);background:#d9dfe1}
#student-profile .profile-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--profile-unit) * 42)}
#student-profile .profile-fields label{display:block;min-width:0;margin:0;color:#092c3c;font-size:calc(var(--profile-unit) * 21);font-weight:400;letter-spacing:0;line-height:1.5}
#student-profile .profile-fields input,#student-profile .profile-fields select{display:block;width:100%;height:calc(var(--profile-unit) * 62);margin:calc(var(--profile-unit) * 10) 0 0;padding:calc(var(--profile-unit) * 12) calc(var(--profile-unit) * 20);border:calc(var(--profile-unit) * 1) solid #d4d9e0;border-radius:calc(var(--profile-unit) * 8);background:#fff;color:#092c3c;font-family:inherit;font-size:calc(var(--profile-unit) * 21);font-weight:400;line-height:1.4;letter-spacing:.015em;box-shadow:none;transition:border-color .15s,box-shadow .15s}
#student-profile .profile-fields input::placeholder{color:#8790a4;opacity:1}
#student-profile .profile-fields select{appearance:none;padding-right:calc(var(--profile-unit) * 44);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%23092c3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right calc(var(--profile-unit) * 17) center;background-size:calc(var(--profile-unit) * 14) calc(var(--profile-unit) * 9)}
#student-profile .profile-fields select:has(option:checked[value=""]){color:#8790a4}
#student-profile .profile-fields select option{color:#092c3c}
#student-profile .profile-fields select:disabled{opacity:1;cursor:not-allowed}
#student-profile .profile-fields input:focus,#student-profile .profile-fields select:focus{outline:0;border-color:#078377;box-shadow:0 0 0 calc(var(--profile-unit) * 3) #07837716}
#student-profile .profile-hint{display:flex;align-items:center;gap:calc(var(--profile-unit) * 19);min-height:calc(var(--profile-unit) * 70);margin:calc(var(--profile-unit) * 34) 0 0;padding:calc(var(--profile-unit) * 14) calc(var(--profile-unit) * 26);border-radius:calc(var(--profile-unit) * 9);background:#edf5f0;color:#143c4a;font-size:calc(var(--profile-unit) * 20);line-height:1.6;letter-spacing:.02em}
#student-profile .profile-hint>svg{flex:none;width:calc(var(--profile-unit) * 34);height:calc(var(--profile-unit) * 34);stroke:#00867b;stroke-width:2;stroke-linecap:round}
#student-profile .profile-actions{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--profile-unit) * 24);margin-top:calc(var(--profile-unit) * 28)}
#student-profile .profile-back{min-width:0;margin:0;padding:calc(var(--profile-unit) * 10) 0;border:0;background:transparent;color:#007e72;font-size:calc(var(--profile-unit) * 22);font-weight:400;letter-spacing:0}
#student-profile .profile-continue{display:flex;align-items:center;justify-content:center;gap:calc(var(--profile-unit) * 17);min-width:calc(var(--profile-unit) * 310);height:calc(var(--profile-unit) * 65);margin:0;padding:calc(var(--profile-unit) * 12) calc(var(--profile-unit) * 28);border:calc(var(--profile-unit) * 1) solid #087f76;border-radius:calc(var(--profile-unit) * 10);background:linear-gradient(115deg,#078d84,#0a7068);color:#fff;font-size:calc(var(--profile-unit) * 22);font-weight:600}
#student-profile .profile-continue svg{width:calc(var(--profile-unit) * 24);height:calc(var(--profile-unit) * 24);stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#student-profile .profile-continue:hover{background:#086f66}
#student-profile .profile-back:hover,#student-profile .profile-header-nav button:hover{color:#005a52}
#student-profile button:focus-visible,#student-profile a:focus-visible{outline:calc(var(--profile-unit) * 2) solid #008277;outline-offset:calc(var(--profile-unit) * 4)}
@media (max-width:720px){
  .profile-mode #student-profile{padding:calc(var(--profile-unit) * 20) 0 calc(var(--profile-unit) * 32)}
  #student-profile .profile-header{width:calc(100% - calc(var(--profile-unit) * 32));gap:calc(var(--profile-unit) * 16)}
  #student-profile .profile-brand{gap:calc(var(--profile-unit) * 7)}
  #student-profile .profile-brand>svg{width:calc(var(--profile-unit) * 40);height:calc(var(--profile-unit) * 40)}
  #student-profile .profile-brand strong{font-size:calc(var(--profile-unit) * 16);letter-spacing:0}
  #student-profile .profile-brand small{font-size:calc(var(--profile-unit) * 7);letter-spacing:.22em}
  #student-profile .profile-header-nav{gap:calc(var(--profile-unit) * 12);font-size:calc(var(--profile-unit) * 13)}
  #student-profile .profile-header-nav>span{padding-right:calc(var(--profile-unit) * 12)}
  #student-profile .profile-header-nav button{font-size:calc(var(--profile-unit) * 13);white-space:nowrap}
  #student-profile .profile-orbit{top:calc(var(--profile-unit) * 90);right:calc(var(--profile-unit) * -90);width:calc(var(--profile-unit) * 220);opacity:.5}
  #student-profile .profile-steps{margin-top:calc(var(--profile-unit) * 22);gap:calc(var(--profile-unit) * 56)}
  #student-profile .profile-steps li{gap:calc(var(--profile-unit) * 9);font-size:calc(var(--profile-unit) * 15)}
  #student-profile .profile-steps li>span{width:calc(var(--profile-unit) * 36);height:calc(var(--profile-unit) * 36);font-size:calc(var(--profile-unit) * 17)}
  #student-profile .profile-steps li+li:before{right:calc(100% + calc(var(--profile-unit) * 9));width:calc(var(--profile-unit) * 38)}
  #student-profile .profile-description{margin:calc(var(--profile-unit) * 30) calc(var(--profile-unit) * 16) calc(var(--profile-unit) * 22);font-size:calc(var(--profile-unit) * 16)}
  #student-profile .profile-form{width:calc(100% - calc(var(--profile-unit) * 32))}
  #student-profile .student-profile-card{padding:calc(var(--profile-unit) * 22) calc(var(--profile-unit) * 20);border-radius:calc(var(--profile-unit) * 12)}
  #student-profile .profile-group-heading{gap:calc(var(--profile-unit) * 12);margin-bottom:calc(var(--profile-unit) * 20)}
  #student-profile .profile-group-heading>svg{width:calc(var(--profile-unit) * 31);height:calc(var(--profile-unit) * 36)}
  #student-profile .profile-group-heading h2{font-size:calc(var(--profile-unit) * 21)}
  #student-profile .profile-fields{grid-template-columns:1fr;gap:calc(var(--profile-unit) * 17)}
  #student-profile .profile-fields label{font-size:calc(var(--profile-unit) * 16)}
  #student-profile .profile-fields input,#student-profile .profile-fields select{height:calc(var(--profile-unit) * 50);margin-top:calc(var(--profile-unit) * 7);padding:calc(var(--profile-unit) * 10) calc(var(--profile-unit) * 14);font-size:calc(var(--profile-unit) * 16)}
  #student-profile .profile-fields select{padding-right:calc(var(--profile-unit) * 38)}
  #student-profile .profile-group+.profile-group{margin-top:calc(var(--profile-unit) * 28)}
  #student-profile .profile-hint{gap:calc(var(--profile-unit) * 12);min-height:0;margin-top:calc(var(--profile-unit) * 26);padding:calc(var(--profile-unit) * 14);font-size:calc(var(--profile-unit) * 14)}
  #student-profile .profile-hint>svg{width:calc(var(--profile-unit) * 27);height:calc(var(--profile-unit) * 27)}
  #student-profile .profile-actions{gap:calc(var(--profile-unit) * 16);margin-top:calc(var(--profile-unit) * 20)}
  #student-profile .profile-back{font-size:calc(var(--profile-unit) * 16);white-space:nowrap}
  #student-profile .profile-continue{min-width:0;height:calc(var(--profile-unit) * 52);gap:calc(var(--profile-unit) * 9);padding:calc(var(--profile-unit) * 10) calc(var(--profile-unit) * 16);font-size:calc(var(--profile-unit) * 16)}
  #student-profile .profile-continue svg{width:calc(var(--profile-unit) * 20);height:calc(var(--profile-unit) * 20)}
}
@media (prefers-reduced-motion:reduce){#student-profile *{transition:none!important}}

/* Fit the entire desktop design into the available viewport at 100% zoom.
   Scale content and spacing together; do not clip overflowing controls. */
@media (min-width:721px){
  main.profile-mode{display:flex;align-items:center;justify-content:center;height:100vh;height:100dvh;min-height:0;overflow:visible}
  /* Approved lettering, icons and textures come from the original artwork.
     Real controls overlay its fields; do not re-typeset the static captions. */
  .profile-mode #student-profile{--profile-unit:min(1px,.096153846154dvh,.065104166667vw);flex:none;width:calc(var(--profile-unit) * 1536);height:calc(var(--profile-unit) * 1024);min-height:0;padding:0;background:url('/assets/student-profile-reference.png') center/100% 100% no-repeat;animation:none}
  #student-profile .profile-orbit{display:none}
  #student-profile .profile-title,#student-profile .profile-steps,#student-profile .profile-description,#student-profile .profile-group-heading,#student-profile .profile-hint{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%)}
  #student-profile .profile-header{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;min-height:0;margin:0;pointer-events:none}
  #student-profile .profile-brand{position:absolute;left:calc(var(--profile-unit) * 76);top:calc(var(--profile-unit) * 48);width:calc(var(--profile-unit) * 340);height:calc(var(--profile-unit) * 58);opacity:0;pointer-events:auto}
  #student-profile .profile-header-nav{display:contents}
  #student-profile .profile-header-nav>span{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
  #student-profile .profile-header-nav button,#student-profile .profile-header-nav button:hover{position:absolute;left:calc(var(--profile-unit) * 1370);top:calc(var(--profile-unit) * 48);width:calc(var(--profile-unit) * 90);height:calc(var(--profile-unit) * 40);margin:0;padding:0;border:0;background:transparent;color:transparent;pointer-events:auto}
  #student-profile .profile-form{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0}
  #student-profile .student-profile-card,#student-profile .profile-group,#student-profile .profile-fields,#student-profile .profile-fields label,#student-profile .profile-actions{display:contents}
  #student-profile .profile-fields label{color:transparent;font-size:0}
  #student-profile :is(#school,#grade,#class,#student-name,#student-no,#student-gender){position:absolute;left:calc(var(--profile-unit) * 175);top:calc(var(--profile-unit) * 443);width:calc(var(--profile-unit) * 368);height:calc(var(--profile-unit) * 60);min-height:0;margin:0;padding:calc(var(--profile-unit) * 12) calc(var(--profile-unit) * 20);border:1px solid transparent;border-radius:calc(var(--profile-unit) * 8);background:transparent;color:#092c3c;font-family:"Profile Noto Sans SC","Microsoft YaHei",sans-serif;font-size:calc(var(--profile-unit) * 21);font-weight:400;line-height:1.4;box-shadow:none}
  #student-profile #grade,#student-profile #student-no{left:calc(var(--profile-unit) * 586);width:calc(var(--profile-unit) * 364)}
  #student-profile #class,#student-profile #student-gender{left:calc(var(--profile-unit) * 993);width:calc(var(--profile-unit) * 368)}
  #student-profile #student-name,#student-profile #student-no,#student-profile #student-gender{top:calc(var(--profile-unit) * 668);height:calc(var(--profile-unit) * 62)}
  #student-profile :is(#student-name,#student-no)::placeholder{color:transparent;opacity:0}
  #student-profile :is(#student-name,#student-no):not(:placeholder-shown){background:#fff}
  #student-profile :is(#school,#grade,#class,#student-gender):has(option:checked[value=""]){background:transparent;color:transparent}
  #student-profile :is(#school,#grade,#class,#student-gender):not(:has(option:checked[value=""])){padding-right:calc(var(--profile-unit) * 44);background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%23092c3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right calc(var(--profile-unit) * 17) center;background-size:calc(var(--profile-unit) * 14) calc(var(--profile-unit) * 9)}
  #student-profile :is(#school,#grade,#class,#student-name,#student-no,#student-gender):focus{outline:2px solid #078377;outline-offset:0;box-shadow:none}
  #student-profile .profile-actions button,#student-profile .profile-actions button:hover{position:absolute;top:calc(var(--profile-unit) * 893);height:calc(var(--profile-unit) * 65);min-width:0;margin:0;padding:0;border:0;border-radius:calc(var(--profile-unit) * 10);background:transparent;color:transparent;box-shadow:none}
  #student-profile .profile-back{left:calc(var(--profile-unit) * 128);width:calc(var(--profile-unit) * 100)}
  #student-profile .profile-continue{left:calc(var(--profile-unit) * 1098);width:calc(var(--profile-unit) * 310)}
  #student-profile .profile-continue svg{opacity:0}
}

/* Match the account/password fields in both closed selects and option menus. */
#identity #home-account,#identity #home-password,
#student-profile :is(#school,#grade,#class,#student-name,#student-no,#student-gender),
#student-profile .profile-fields select option{
  font-family:var(--entry-font-family);
  font-weight:var(--entry-font-weight);
  font-style:normal;
  font-synthesis:none;
}

/* Emphasize entered/selected values; keep empty-field prompts understated. */
#student-profile :is(#school,#grade,#class,#student-name,#student-no,#student-gender),
#student-profile .profile-fields select option:not([value=""]){
  font-weight:600;
}
#student-profile :is(#school,#grade,#class,#student-gender):has(option:checked[value=""]),
#student-profile :is(#student-name,#student-no)::placeholder{
  font-weight:400;
}