@charset "UTF-8";
:root {
  font-family: Inter, "Microsoft YaHei", sans-serif;
  color: #203b37;
  background: #f4f6f3;
  font-size: 14px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
}
aside {
  width: 224px;
  background: #163e35;
  color: #d9e9dc;
  position: fixed;
  inset: 0 auto 0 0;
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
}
.brand {
  font-size: 29px;
  color: #fff;
  text-decoration: none;
  letter-spacing: 2px;
}
.brand span {
  font-size: 8px;
  display: block;
  letter-spacing: 1.2px;
  margin-top: 10px;
  color: #a8c9b9;
}
nav {
  margin-top: 62px;
  display: grid;
  gap: 12px;
}
nav a {
  color: #b8cfc1;
  text-decoration: none;
  padding: 14px;
  border-radius: 8px;
}
nav .active,
nav a:hover {
  background: #2d5348;
  color: #fff;
}
.aside-note {
  margin-top: auto;
  font-size: 12px;
  line-height: 2;
  color: #a0beaf;
}
main {
  margin-left: 224px;
  padding: 0 38px;
  width: calc(100% - 224px);
  max-width: 1700px;
}
header {
  height: 82px;
  border-bottom: 1px solid #dfe7e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #74857c;
  font-size: 12px;
}
.badge {
  border: 1px solid #d6e1d8;
  border-radius: 20px;
  padding: 6px 12px;
  color: #5b7867;
  font-size: 11px;
  font-weight: normal;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0 24px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  color: #47705f;
}
h1 {
  font-size: 31px;
  margin: 14px 0;
  font-weight: 600;
}
h2 {
  font-size: 17px;
  margin: 0;
}
p {
  color: #7a887d;
  line-height: 1.8;
}
button,
.button {
  font: inherit;
  border: 0;
  background: #275d46;
  color: white;
  border-radius: 7px;
  padding: 11px 17px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover {
  filter: brightness(0.94);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.secondary {
  background: white;
  color: #365c46;
  border: 1px solid #cddbcf;
}
.quiet {
  background: transparent;
  color: #bdd2c3;
  padding-left: 0;
  margin-top: 20px;
}
.toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
select,
input {
  font: inherit;
  padding: 10px;
  border: 1px solid #d3dfd4;
  border-radius: 6px;
  background: white;
  color: #315340;
}
select {
  min-width: 220px;
  margin-left: 12px;
}
#connection {
  font-size: 12px;
  color: #7a887d;
  margin-left: auto;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.metrics article {
  background: white;
  border: 1px solid #e0e7df;
  border-radius: 10px;
  padding: 21px;
  display: grid;
  gap: 16px;
}
.metrics span {
  color: #6b7f6e;
  font-size: 12px;
}
.metrics strong {
  font-size: 32px;
  font-weight: 500;
}
.metrics small {
  font-size: 10px;
  color: #8b968b;
}
.columns {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 22px;
  margin-top: 24px;
}
.panel {
  padding: 25px;
  background: #fff;
  border: 1px solid #e0e7df;
  border-radius: 10px;
  margin-bottom: 24px;
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.panel p {
  font-size: 12px;
}
.chart {
  height: 260px;
}
.notice {
  border-top: 1px solid #e9ece7;
  padding-top: 15px;
  color: #60746b;
  font-size: 12px;
  line-height: 1.7;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
th {
  text-align: left;
  background: #f6f8f4;
  color: #60746b;
  font-weight: normal;
}
td,
th {
  padding: 15px 10px;
  border-bottom: 1px solid #edf0e9;
}
.empty {
  text-align: center;
  color: #60746b;
  padding: 40px;
}
.table-wrap {
  overflow: auto;
}
#upload {
  display: flex;
  gap: 10px;
  align-items: center;
}
.file-label {
  font-size: 12px;
  color: #61765e;
}
input[type="file"] {
  max-width: 240px;
  font-size: 11px;
  margin-left: 10px;
}
footer {
  padding: 10px 0 28px;
  color: #60746b;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
#message {
  padding: 12px;
  background: #f9eadd;
  color: #934d25;
  border-radius: 6px;
}
dialog {
  border: 1px solid #d5dfd5;
  border-radius: 12px;
  width: 390px;
  padding: 28px;
}
dialog::backdrop {
  background: #142f2866;
}
dialog label {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}
.dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}
@media (max-width: 1000px) {
  aside {
    width: 175px;
    padding: 25px 15px;
  }
  main {
    margin-left: 175px;
    width: calc(100% - 175px);
    padding: 0 20px;
  }
  .columns {
    grid-template-columns: 1fr;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  #upload {
    flex-wrap: wrap;
  }
}
@media (max-width: 650px) {
  aside {
    display: flex;
    width: 132px;
    padding: 18px 9px;
  }
  main {
    margin-left: 132px;
    width: calc(100% - 132px);
    padding: 0 14px;
  }
  .brand { font-size: 19px; }
  .brand span, .aside-note { display: none; }
  aside nav { margin-top: 24px; gap: 6px; }
  aside nav a { padding: 10px 7px; font-size: 12px; min-height: 44px; }
  .heading {
    align-items: flex-start;
    gap: 12px;
  }
  h1 {
    font-size: 24px;
  }
  .toolbar {
    flex-wrap: wrap;
  }
  select {
    min-width: 170px;
  }
  .panel-title {
    flex-wrap: wrap;
  }
  .metrics {
    gap: 10px;
  }
  .metrics article {
    padding: 16px;
  }
}
.auth-page { margin: 6vh auto; max-width: 540px; padding: 32px; }
.auth-page form, #password-form { display: grid; gap: 18px; }
.auth-page label, #password-form label { display: grid; gap: 8px; }
.account-page { margin: 0 auto; max-width: 1000px; padding: 32px; }
.account-page header { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
#emoji-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
#account-status { min-height: 24px; }

/* Shared forest palette keeps account screens and teaching tools in one product. */
:root { color: #183b31; background: #f4f6f1; }
p, .panel p, .metrics span, .metrics small, header, footer { color: #60746b; }
.panel p { font-size: 14px; }
aside { background: linear-gradient(155deg, #163e35, #2d5348); }
nav a { color: #d9e9dc; border-radius: 16px; }
nav .active, nav a:hover { background: #ffffff18; }
a { color: #356b58; }
.brand { color: white; }
button, .button { border-radius: 12px; background: #356b58; min-height: 44px; transition: box-shadow .18s, background .18s; }
button:hover, .button:hover { background: #2b5948; }
.secondary:hover { background: #dbe9e0; }
button:focus-visible, a:focus-visible { outline: 3px solid #356b58; outline-offset: 4px; }
.secondary { background: #e5f1ec; border: 1px solid #cddbcf; color: #356b58; }
.quiet { background: transparent; border-radius: 0; color: #d9e9dc; }
input, select { border: 1px solid #9fb1a6; border-radius: 12px; color: #183b31; background: #f8faf7; min-height: 44px; }
input:focus, select:focus { outline: 2px solid #356b58; outline-offset: 2px; background: white; }
.panel, .metrics article { border-radius: 24px; border: 1px solid #dfe8e1; box-shadow: 0 5px 22px #183b3106; }
.metrics article:first-child { color: white; background: linear-gradient(130deg, #163e35, #2d5348); }
.metrics article:first-child span, .metrics article:first-child small { color: #d9e9dc; }
.metrics small { font-size: 12px; }
.badge { background: #e5f1ec; border-color: #cddbcf; color: #3d5c4c; font-size: 12px; }
.eyebrow { color: #47705f; }
.auth-page { position: relative; width: min(92%, 510px); margin: 7vh auto; padding: 38px; border-radius: 30px;
  background: white; border: 1px solid #dfe8e1; box-shadow: 0 20px 80px #183b3110; overflow: hidden; }
.auth-brand{display:flex;align-items:center;gap:9px;margin-bottom:24px;color:#285346;font-size:20px;font-weight:650;line-height:1.4;letter-spacing:1px}
.auth-brand svg{width:38px;height:38px;flex:none}
.auth-page h1 { font-size: 30px; margin-bottom: 26px; }
.auth-page input { width: 100%; }
.auth-page form > button { margin-top: 6px; }
.auth-shell { min-height: 100vh; padding: 1px 0; background: radial-gradient(circle at 84% 10%, #dfeade 0 12%, transparent 30%), #f4f6f1; }
.auth-intro { margin: -12px 0 24px; line-height: 1.7; }
.auth-links { display: grid; gap: 14px; margin-top: 24px; text-align: center; }
.auth-links .button { display: block; padding: 12px 18px; text-decoration: none; }
.role-choice { grid-template-columns: 1fr 1fr; }
.role-choice button { display: grid; gap: 7px; padding: 22px 16px; text-align: left; border: 1px solid #cddbcf; }
.role-choice button strong { font-size: 18px; }
.role-choice button span { font-size: 13px; line-height: 1.5; opacity: .84; }
.field-rules { display: grid; gap: 6px; margin: -8px 0 2px; padding-left: 22px; color: #60746b; font-size: 13px; }
.auth-page p[role=alert], #create-error, #state-error { color: #9d323e; }
.help-callout { display: flex; gap: 24px; align-items: center; justify-content: space-between; background: #fff1d9; border-radius: 20px; padding: 20px; margin-top: 24px; }
.help-callout h3 { margin: 0; }
.help-callout p { margin-bottom: 0; }
.help-callout button { flex-shrink: 0; }
#emoji-actions button { min-height: 64px; color: #183b31; background: #e5f1ec; border-radius: 20px; padding: 12px 26px; }
#emoji-actions button:nth-child(2) { background: #ece9f4; }
#emoji-actions button:nth-child(3) { background: #f6efdf; }
.user-search, .user-pagination { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.user-search label { display: flex; align-items: center; gap: 12px; }
.user-pagination { justify-content: flex-end; margin-top: 24px; }
.account-state { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 7px 12px; font-size: 13px; }
.account-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.account-state.enabled { background: #e5f1ec; color: #266647; }
.account-state.disabled { background: #f3e6e5; color: #9d473b; }
.state-toggle { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #60746b; font-size: 13px; padding: 10px; min-height: 44px; }
.state-toggle::before { content: ''; width: 36px; height: 22px; border-radius: 14px; background: radial-gradient(circle at 11px 11px, white 0 7px, transparent 8px), #7f9187; }
.state-toggle[aria-checked=true]::before { background: radial-gradient(circle at 25px 11px, white 0 7px, transparent 8px), #356b58; }
#user-message { background: #e5f1ec; color: #183b31; border-radius: 16px; padding: 14px 18px; }
dialog { max-width: calc(100vw - 32px); border-radius: 24px; box-shadow: 0 24px 80px #183b3133; }
dialog::backdrop { background: #14231d70; }
@media (max-width: 650px) {
  .heading, .help-callout { flex-direction: column; align-items: stretch; }
  .auth-page { padding: 28px 24px; margin-top: 24px; }
  .role-choice { grid-template-columns: 1fr; }
  .user-search label, .user-search input { width: 100%; }
  .account-page { padding: 20px; width: 100%; }
  header { min-height: 82px; height: auto; padding: 14px 0; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { button, .button { transition: none; } }

.mobile-nav { display: none; }
.nav-ico { width: 18px; height: 18px; flex: none; }
nav a .nav-ico, .mobile-nav a .nav-ico { vertical-align: -4px; margin-right: 8px; }
button, .button { cursor: pointer; }
.user-search label { white-space: nowrap; }
.user-search input { min-width: 0; }
#user-rows td { white-space: nowrap; }
@media (max-width: 650px) {
  .mobile-nav { display: none; }
  .mobile-nav a { color: #356b58; background: #e5f1ec; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; }
  .user-search { width: 100%; }
}
.analysis-only { grid-template-columns: 1fr; }

[hidden]{display:none!important}
aside{width:244px;padding:36px 22px;overflow-y:auto;background:#17392f}
body:not(.auth-shell)>main{margin-left:244px;width:calc(100% - 244px);padding-left:44px;padding-right:44px}
.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1000px){aside{width:208px}body:not(.auth-shell)>main{margin-left:208px;width:calc(100% - 208px);padding-left:24px;padding-right:24px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){aside{width:176px;padding:22px 14px}body:not(.auth-shell)>main{margin-left:176px;width:calc(100% - 176px);padding-left:18px;padding-right:18px}.metrics{grid-template-columns:1fr}.toolbar select{min-width:0;width:100%;margin:8px 0}.toolbar>label{width:100%}#upload{min-width:0;flex-direction:column;align-items:stretch}input[type=file]{max-width:100%;margin:8px 0}.panel{padding:20px}}
@media(max-width:480px){aside{width:132px;padding:18px 9px}body:not(.auth-shell)>main{margin-left:132px;width:calc(100% - 132px);padding-left:14px;padding-right:14px}.panel{padding:15px}}
.analysis-only{grid-template-columns:minmax(0,1fr)}.panel{min-width:0}.file-label{min-width:0}@media(max-width:700px){#upload,.file-label{width:100%}input[type=file]{width:100%;min-width:0}}

body:not(.auth-shell) header{height:auto;min-height:56px;padding:12px 0}
.heading{padding:18px 0 14px}.heading h1{margin:8px 0}.heading p:last-child{margin-bottom:0}
.toolbar{margin-bottom:16px}.metrics{gap:12px}.metrics article{padding:16px;gap:8px;border-radius:16px}.metrics strong{font-size:28px}
.columns{margin-top:16px;gap:16px}.panel{padding:18px;margin-bottom:16px;border-radius:16px}.empty{padding:20px 12px}
.chart-empty{padding:14px 0;margin:0}.notice{padding-top:10px}.auth-page{padding:28px;margin:4vh auto}.auth-page h1{margin-bottom:18px}.auth-page form{gap:14px}
.observation-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:700px){.observation-metrics{grid-template-columns:1fr}}
.analysis-notes{font-size:13px;color:#60746b}.analysis-notes summary{cursor:pointer;min-height:44px;align-content:center}.analysis-notes summary:focus-visible{outline:3px solid #356b58;outline-offset:3px}.analysis-notes p{margin-top:0}caption{text-align:left;padding:8px 0;color:#60746b}
body:not(.auth-shell) nav{margin-top:32px;gap:8px}body:not(.auth-shell) nav a{border-radius:12px;padding:14px 16px}.heading .eyebrow{margin-bottom:8px}

body{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}aside .brand{font-weight:750}aside .rail-caption{font-size:12px;color:#b9ccc1;margin:48px 14px 16px}body:not(.auth-shell) aside .rail-caption+nav{margin-top:0}body:not(.auth-shell) nav a{font-size:15px}aside .quiet{width:100%;border:1px solid #ffffff55;border-radius:11px;padding:12px;margin-top:18px}

.panel>.table-wrap{max-height:360px;overflow:auto}.panel>.table-wrap th{position:sticky;top:0;background:#f4f6f3;z-index:1}

/* Keep the authentication background static. */
.auth-shell{isolation:isolate;min-height:100vh;background:#f0f5ee}
.auth-shell::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 15% 15%,#c5ddc78c,transparent 55%),radial-gradient(ellipse at 85% 85%,#e5dfb57a,transparent 50%)}
.auth-page{align-self:center;border:1px solid #dfe8e1;box-shadow:0 8px 28px #294c350a;background:#fff}
.auth-page.logout-page{max-width:440px}.logout-page .auth-links{margin-top:28px}
.auth-page button,.auth-page .button{transition:background-color 140ms,box-shadow 140ms}
.auth-page input{transition:border-color 140ms,box-shadow 140ms}
.auth-page input:focus{outline:0;border-color:#50856a;box-shadow:0 0 0 3px #4b876823}
@media(prefers-reduced-motion:reduce){.auth-shell::before,.auth-page *{animation:none!important;transition:none!important}.auth-page button:active,.auth-page .button:active{transform:none}}

.field-error{color:#9b453e;font-size:14px;margin:4px 0 12px}.field-error[hidden]{display:none}.field-rules li::before{content:none}.field-rules [data-state=neutral]{color:var(--muted,#617468)}.field-rules [data-state=valid]{color:#356b58}.field-rules [data-state=invalid]{color:#9b453e}input[aria-invalid=true]{border-color:#9b453e!important}
.filing-footer{display:block;padding:18px 24px 24px;text-align:center;font-size:12px;line-height:1.7;color:var(--muted,#5e736b)}.filing-footer a{display:inline-block;max-width:100%;padding:8px 4px;overflow-wrap:anywhere;color:inherit;text-decoration:underline;text-underline-offset:3px}.filing-footer a:focus-visible{outline:3px solid #356b58;outline-offset:3px;border-radius:3px}