:root {
  color-scheme:light;
  --ink:#293b56;
  --muted:#8190a6;
  --line:#e5edf6;
  --blue:#577aee;
  --mint:#58b69d;
  --bg:#f6f9fd}
* {
  box-sizing:border-box}
body {
  margin:0;
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--ink)}
button,input,select,textarea {
  font:inherit}
button,a,input,select {
  touch-action:manipulation}
button,a {
  cursor:pointer}
button {
  border:0;
  border-radius:10px;
  padding:10px 16px;
  color:var(--ink);
  font-weight:600;
  background:#edf2fa;
  transition:background .15s}
button:hover {
  filter:brightness(.97)}
button:disabled {
  opacity:.55;
  cursor:wait}
a {
  color:inherit;
  text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #b5c9ff;
  outline-offset:2px}
input,select,textarea {
  width:100%;
  border:1px solid #dce6f1;
  border-radius:9px;
  background:white;
  color:var(--ink);
  padding:11px 12px;
  min-width:0}
input:focus,select:focus,textarea:focus {
  border-color:#7c9bf2;
  outline:2px solid #e1eafe}
label {
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:18px}
label input,label select,label textarea {
  display:block;
  margin-top:7px;
  font-weight:400}
h1,h2,h3,p {
  margin:0}
h1 {
  font-size:28px;
  letter-spacing:.5px}
h2 {
  font-size:19px}
h3 {
  font-size:16px}
.muted {
  color:var(--muted)}
.eyebrow {
  font-size:10px;
  color:#99a9bd;
  letter-spacing:2px;
  font-weight:700}
.hidden {
  display:none!important}
.primary {
  background:var(--blue);
  color:white}
.secondary {
  background:white;
  border:1px solid var(--line)}
.danger {
  background:#fff0ee;
  color:#c6655e}
.text-link {
  color:var(--blue);
  font-size:12px}
.small {
  font-size:12px}
.row {
  display:flex;
  align-items:center;
  gap:12px}
.spread {
  justify-content:space-between}
.wrap {
  flex-wrap:wrap}
.stack {
  display:grid;
  gap:18px}
.login-screen {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(350px,1fr) 1fr}
.login-art {
  background:linear-gradient(140deg,#dbeafa,#e4e6ff 65%,#fae9ef);
  padding:14vh 14%;
  position:relative;
  overflow:hidden}
.login-art p {
  font-size:40px;
  line-height:1.7;
  font-weight:700;
  color:#4f6289;
  margin-top:20vh;
  position:relative}
.login-art small {
  color:#8b9cba;
  letter-spacing:8px}
.star {
  font-size:100px;
  color:#fff7c9;
  position:absolute;
  top:12%;
  left:24%;
  transform:rotate(-15deg)}
.orbit {
  width:300px;
  height:300px;
  position:absolute;
  border:1px solid #ffffff99;
  border-radius:50%;
  top:7%;
  right:-60px}
.planet {
  position:absolute;
  font-size:180px;
  color:#ffffff80;
  right:10%;
  top:20%}
.login-card {
  width:min(420px,84%);
  align-self:center;
  justify-self:center;
  padding:40px 0}
.brand-mark {
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:14px;
  background:#ecf0ff;
  color:#7b94ef;
  font-size:30px}
.login-card>.brand-mark {
  display:grid;
  margin-bottom:20px}
.login-card h1 {
  margin:10px 0}
.login-card>p {
  margin-bottom:30px}
.login-card>button {
  width:100%;
  display:flex;
  justify-content:space-between;
  margin:10px 0 18px}
.login-card>.error {
  margin:0 0 10px}
.app {
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  min-height:100vh}
.sidebar {
  height:100vh;
  position:sticky;
  top:0;
  background:white;
  border-right:1px solid var(--line);
  padding:30px 20px 15px;
  display:flex;
  flex-direction:column}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  padding:0 10px 36px;
  font-size:20px;
  font-weight:700}
.brand small {
  display:block;
  font-size:10px;
  color:#99a8ba;
  font-weight:400;
  letter-spacing:2px}
.nav-caption {
  font-size:11px;
  color:#a0adbf;
  padding:0 16px 10px}
nav a {
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:10px;
  padding:12px 15px;
  margin-bottom:7px;
  font-size:18px;
  color:#8492a8}
nav a span {
  font-size:14px}
nav a.active {
  background:#eef2ff;
  color:var(--blue);
  font-weight:600}
.sidebar-note {
  margin-top:auto;
  background:#f4f8fd;
  border-radius:14px;
  padding:18px 14px}
.sidebar-note>span {
  display:block;
  color:#d1a95f;
  font-size:25px}
.sidebar-note strong {
  font-size:12px}
.sidebar-note p {
  font-size:11px;
  color:#98a8bc;
  margin:5px 0 10px}
.account {
  display:flex;
  gap:10px;
  align-items:center;
  border-top:1px solid var(--line);
  margin-top:22px;
  padding:20px 4px 5px}
.avatar {
  background:#edf3ff;
  color:#7b99dc;
  display:inline-grid;
  place-items:center;
  width:35px;
  height:35px;
  border-radius:12px}
.account strong {
  font-size:12px}
.account small {
  display:block;
  color:var(--muted);
  font-size:10px}
.account .icon-button {
  margin-left:auto}
.icon-button {
  padding:3px 8px;
  background:transparent;
  font-size:21px;
  font-weight:400}
.logout {
  background:transparent;
  color:#9ba9bd;
  font-size:11px;
  align-self:flex-start;
  padding-left:50px}
main {
  padding:35px 42px 16px;
  max-width:1700px;
  width:100%;
  margin:auto}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:28px}
header h1 {
  margin:3px 0 4px}
header p {
  font-size:12px}
.header-right {
  display:flex;
  align-items:center;
  gap:15px}
.badge {
  display:inline-block;
  white-space:nowrap;
  padding:4px 9px;
  background:#eef3ff;
  color:#6b85ca;
  border-radius:7px;
  font-size:11px}
.green {
  background:#eaf7f1;
  color:#64a58c}
.orange {
  background:#fff2df;
  color:#ba9256}
.notice {
  border:1px solid #e7d5ab;
  background:#fff9ed;
  color:#9a7b41;
  padding:12px 16px;
  border-radius:10px;
  margin-bottom:20px;
  font-size:12px}
.welcome {
  position:relative;
  overflow:hidden;
  background:linear-gradient(110deg,#e8eeff,#e6f3fc);
  border:1px solid #dce7fb;
  border-radius:20px;
  padding:28px 30px;
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:space-between}
.welcome h2 {
  font-size:24px}
.welcome p {
  color:#7c91b5;
  margin-top:7px;
  font-size:13px}
.welcome-star {
  font-size:75px;
  line-height:1;
  color:#fff4c9;
  padding-right:30px}
.metrics {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:22px 0}
.metric {
  border:1px solid var(--line);
  background:white;
  border-radius:15px;
  padding:20px 22px}
.metric span {
  font-size:12px;
  color:#91a0b6}
.metric strong {
  display:block;
  font-size:30px;
  line-height:1.5;
  font-weight:600;
  color:#435a7c}
.metric small {
  font-size:10px;
  color:#a1b1c2}
.panel {
  background:white;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden}
.panel-head {
  padding:20px 24px;
  border-bottom:1px solid #f0f4fa;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px}
.panel-body {
  padding:22px 24px}
.panel-head p {
  font-size:11px;
  color:var(--muted);
  margin-top:3px}
.cols {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:22px}
.class-row {
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid #f0f4fa}
.class-row:last-child {
  border:0}
.class-symbol {
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eef4ff;
  color:#8aa4d8}
.class-row strong {
  font-size:13px}
.class-row small {
  display:block;
  color:#a0adbf;
  font-size:11px}
.class-row button {
  margin-left:auto;
  font-size:11px;
  padding:6px 12px}
.steps {
  padding-left:22px;
  margin:0}
.steps li {
  padding:8px 0;
  color:#71839f;
  font-size:12px}
.steps strong {
  display:block;
  color:#4d6383;
  font-size:13px}
.toolbar {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap}
.toolbar input {
  max-width:250px}
.toolbar select {
  width:auto;
  min-width:145px}
.toolbar .right {
  margin-left:auto}
.table-wrap {
  overflow-x:auto}
table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
  font-size:13px}
th {
  font-size:11px;
  color:#96a4b8;
  font-weight:500;
  background:#fbfcfe;
  padding:13px 20px;
  white-space:nowrap}
td {
  padding:16px 20px;
  border-bottom:1px solid #f1f5fa}
tbody tr:last-child td {
  border:0}
.student-row {
  cursor:pointer}
.student-row:hover {
  background:#f8faff}
.student-name {
  font-weight:600;
  white-space:nowrap}
.student-sub {
  font-size:10px;
  color:#a2aec0}
.pet-mini {
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:#f4f8fc;
  border-radius:9px;
  padding:3px 7px;
  margin:2px 4px 2px 0;
  font-size:10px;
  white-space:nowrap}
.pet-mini img {
  height:31px;
  width:31px;
  object-fit:contain}
.pet-mini.active {
  background:#eef2ff;
  color:#6d85cc;
  box-shadow:inset 0 0 0 1px #dce5ff}
.empty {
  padding:50px;
  text-align:center;
  color:#9aa8bd}
.pet-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:14px}
.pet-card {
  border:1px solid var(--line);
  border-radius:13px;
  padding:15px;
  text-align:center;
  background:#fbfdff}
.pet-card.active {
  border-color:#86a1f3;
  background:#f2f5ff}
.pet-card img {
  width:90px;
  height:90px;
  object-fit:contain}
.pet-card .egg {
  display:grid;
  place-items:center;
  height:90px;
  font-size:42px}
.pet-card p {
  font-size:12px;
  margin:3px 0 8px}
.pet-card small {
  color:#91a3bb;
  font-size:10px}
.pet-card button {
  font-size:11px;
  padding:6px 9px;
  margin:4px}
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px}
.family {
  padding:22px}
.family h3 {
  margin-bottom:12px}
.form-line {
  display:flex;
  justify-content:space-around;
  align-items:center;
  margin-bottom:15px}
.form {
  display:flex;
  align-items:center;
  flex-direction:column;
  font-size:11px;
  gap:6px}
.form img {
  width:62px;
  height:70px;
  object-fit:contain}
.skill-list {
  font-size:11px;
  color:#8d9bb1;
  border-top:1px solid var(--line);
  padding-top:10px}
.skill-list span {
  display:inline-block;
  margin:2px 7px 2px 0}
.history-item {
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:12px}
.history-item small {
  color:var(--muted)}
dialog {
  border:1px solid var(--line);
  border-radius:19px;
  padding:0;
  width:min(800px,92vw);
  max-height:88vh;
  color:var(--ink);
  box-shadow:0 25px 80px #30496624}
dialog::backdrop {
  background:#263b5c60;
  backdrop-filter:blur(3px)}
.modal-head {
  position:sticky;
  top:0;
  z-index:1;
  padding:19px 25px;
  border-bottom:1px solid var(--line);
  background:white;
  display:flex;
  align-items:center;
  justify-content:space-between}
#modal-body {
  padding:23px 25px}
#modal-body>.row {
  margin-bottom:18px}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px}
.form-grid .full {
  grid-column:1/-1}
.actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:15px}
.error {
  color:#c6655e;
  font-size:12px}
.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  max-width:90vw;
  background:#304562;
  color:white;
  padding:12px 22px;
  border-radius:12px;
  box-shadow:0 8px 30px #203e5a22;
  z-index:10}
.stat-inputs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0 12px}
.code {
  font-family:ui-monospace,monospace;
  font-size:11px;
  word-break:break-all;
  background:#f7f9fc;
  border-radius:8px;
  padding:10px}
.resource-preview {
  display:block;
  max-width:100%;
  height:180px;
  object-fit:contain;
  background:#f1f6fb;
  border-radius:12px;
  margin:10px auto}
.resource-list {
  max-height:260px;
  overflow:auto}
footer {
  text-align:center;
  color:#b2bfd0;
  font-size:10px;
  padding:35px 0 4px}
@media(max-width:1100px) {
  main {
  padding:25px}
.sidebar {
  padding-left:12px;
  padding-right:12px}
.app {
  grid-template-columns:205px minmax(0,1fr)}
.cols {
  grid-template-columns:1fr}
.metrics {
  gap:10px}
.metric {
  padding:15px}
td,th {
  padding-left:13px;
  padding-right:13px}
.header-right>.badge {
  display:none}
}
@media(max-width:700px) {
  .login-screen {
  grid-template-columns:1fr}
.login-art {
  display:none}
.login-card {
  padding:70px 0}
.app {
  display:block}
.sidebar {
  height:auto;
  position:relative;
  padding:15px}
.brand {
  padding:0 0 12px}
.sidebar-note,.nav-caption,.account,.logout {
  display:none}
nav {
  display:flex;
  overflow:auto;
  gap:5px}
nav a {
  padding:8px;
  gap:5px;
  white-space:nowrap}
nav a span {
  font-size:11px}
main {
  padding:22px 15px}
header {
  gap:8px}
h1 {
  font-size:24px}
.metrics {
  grid-template-columns:1fr 1fr}
.welcome {
  padding:22px}
.welcome h2 {
  font-size:20px}
.welcome-star {
  font-size:45px;
  padding:0}
.form-grid {
  grid-template-columns:1fr}
.toolbar .right {
  margin-left:0}
.toolbar select,.toolbar input {
  flex:1}
.panel-head {
  padding:18px}
.panel-body {
  padding:18px}
.header-right button {
  font-size:11px;
  padding:8px}
}