/* METIDA brand: blue #002F78, red #CC3333, light blue #93BCE5, yellow #FED73B.
   System fonts only — no external CDNs, so the pages load fast from mainland China. */
:root{
  --bg:#ffffff; --bg2:#F6F9FE; --band:#002F78; --band-ink:#ffffff;
  --ink:#111A31; --ink2:#5a6478; --line:#9fb0c6; --line2:#dde6f2;
  --blue:#002F78; --blue-dk:#001D4A; --blue-bg:#EAF3FC; --ltblue:#93BCE5;
  --red:#b50909; --red-bg:#f9eeee; --green:#007a14; --green-bg:#e8f6ea;
  --warn-bg:#fdf6d8; --warn-line:#e0b912; --gold:#FED73B; --brand:#CC3333; --focus:#2491ff;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#161c28; --bg2:#101521; --band:#001D4A; --band-ink:#e8ebee;
    --ink:#e8ebee; --ink2:#9aa6b8; --line:#46536b; --line2:#2b3549;
    --blue:#8fb9ea; --blue-dk:#b4d1f4; --blue-bg:#182742; --ltblue:#3d5a85;
    --red:#ff8080; --red-bg:#3a2323; --green:#57c96a; --green-bg:#1b3321;
    --warn-bg:#3a3420; --brand:#ff7a7a; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#161c28; --bg2:#101521; --band:#001D4A; --band-ink:#e8ebee;
  --ink:#e8ebee; --ink2:#9aa6b8; --line:#46536b; --line2:#2b3549;
  --blue:#8fb9ea; --blue-dk:#b4d1f4; --blue-bg:#182742; --ltblue:#3d5a85;
  --red:#ff8080; --red-bg:#3a2323; --green:#57c96a; --green-bg:#1b3321;
  --warn-bg:#3a3420; --brand:#ff7a7a; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg2);color:var(--ink);font:15px/1.55 "Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",Roboto,Arial,sans-serif}
h1,h2,h3,h4{margin:0;text-wrap:balance;color:var(--blue-dk)}
a{color:var(--blue)}
button{font:inherit;cursor:pointer}
input[type=text],input[type=email],input[type=date],input[type=url],input[type=tel],input[type=password],input[type=search],select,textarea{
  font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;width:100%;max-width:480px}
textarea{max-width:640px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
input.err,select.err,textarea.err{border:2px solid var(--red)}
.req{color:var(--red)}
label.f{display:block;font-weight:600;margin:16px 0 4px;max-width:640px}
label.f small{display:block;font-weight:400;color:var(--ink2)}
.errmsg{color:var(--red);font-size:13.5px;margin:4px 0 0}
.radio,.check{display:flex;gap:10px;align-items:flex-start;margin:8px 0;max-width:680px}
.radio input,.check input{width:auto;margin-top:5px;flex-shrink:0}
.radio small,.check small{font-weight:400;color:var(--ink2);display:block}
.muted{color:var(--ink2);font-size:13.5px}

/* chrome */
.topband{background:var(--band);color:var(--band-ink);padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-bottom:4px solid var(--brand)}
.topband .logo{font-weight:800;font-size:17px;letter-spacing:.5px}
.topband .logo span{color:var(--brand)}
.topband .logo small{font-weight:400;opacity:.8;letter-spacing:.2px}
.grow{flex:1}
.btn{background:var(--blue);color:#fff;border:none;border-radius:24px;padding:10px 20px;font-weight:700;text-decoration:none;display:inline-block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn{color:#10141a}}
.btn.sec{background:transparent;color:var(--blue);border:2px solid var(--blue);padding:8px 18px}
.btn.small{padding:5px 14px;font-weight:600;font-size:13.5px}
.btn.sec.small{padding:3px 12px}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.6);color:var(--band-ink);padding:6px 14px;font-size:13px;font-weight:600}
.btn.danger{background:var(--red);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.shell{max-width:1180px;margin:0 auto;padding:20px 16px 60px}
.apphead h1{font-size:28px;font-weight:800;letter-spacing:-.3px;color:var(--blue)}
.apphead .sub{color:var(--ink2);margin:6px 0 0;max-width:75ch}

/* form layout */
.cols{display:flex;gap:22px;align-items:flex-start;margin-top:18px}
nav.snav{width:250px;flex-shrink:0;background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:10px 0;position:sticky;top:12px}
nav.snav .item{display:flex;gap:8px;align-items:center;padding:8px 16px;cursor:pointer;font-size:14.5px;border-left:4px solid transparent}
nav.snav .item:hover{background:var(--bg2)}
nav.snav .item.on{border-left-color:var(--blue);font-weight:700;background:var(--blue-bg)}
nav.snav .ic{width:18px;text-align:center;flex-shrink:0}
nav.snav .ic.ok{color:var(--green)} nav.snav .ic.bad{color:var(--red)}
nav.snav .zh{display:block;font-size:12.5px;color:var(--ink2);font-weight:400}
main.pane{flex:1;min-width:0}
.panel{background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:20px 24px}
.panel h2{font-size:22px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline;border-bottom:1px solid var(--line2);padding-bottom:10px;margin-bottom:12px}
.panel h3{font-size:17px;margin-top:22px}
.astr{font-size:13px;font-weight:400;color:var(--ink2)}
.explain{border:1px solid var(--blue);border-radius:6px;padding:12px 16px;margin:6px 0 14px;max-width:760px;background:var(--bg)}
.explain h3{margin:0 0 4px;font-size:15.5px}
.explain p{margin:4px 0}
.card{border:1px solid var(--line2);border-radius:8px;padding:12px 16px;margin:10px 0;max-width:760px}
.card.sel{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.warnb{background:var(--warn-bg);border-left:5px solid var(--warn-line);padding:10px 14px;margin:12px 0;max-width:760px;font-size:14px}
.okb{background:var(--green-bg);border-left:5px solid var(--green);padding:10px 14px;margin:12px 0;max-width:760px;font-size:14px}
.errcount{background:var(--red-bg);border-left:5px solid var(--red);padding:10px 14px;margin:12px 0;font-weight:600;max-width:760px}
.navbtns{display:flex;justify-content:space-between;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center}
.savestate{font-size:13px;color:var(--ink2)}

/* tables */
.tblwrap{overflow-x:auto;border:1px solid var(--line2);border-radius:8px}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line2);font-size:14px;vertical-align:top}
th{background:var(--bg2);font-size:13px;color:var(--ink2);font-weight:600}
.clsnum{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.badge{display:inline-block;border:1px solid var(--blue);color:var(--blue);border-radius:10px;padding:0 8px;font-size:12px;white-space:nowrap}
.badge.svc{border-color:var(--brand);color:var(--brand)}
.addbtn,.rmbtn{background:none;border:none;color:var(--blue);font-weight:600;padding:2px 4px;white-space:nowrap}
.rmbtn{color:var(--red)}
mark{background:var(--gold);color:#111;border-radius:2px}
.pgn{display:flex;gap:4px;margin:8px 0;flex-wrap:wrap}
.pgn button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:4px;min-width:32px;padding:2px 8px}
.pgn button.on{background:var(--blue);color:#fff;border-color:var(--blue)}

/* specimens & files */
.spec{border:1px solid var(--line2);border-radius:8px;padding:12px 16px;margin:10px 0;max-width:760px;background:var(--bg2)}
.spec h4{display:flex;justify-content:space-between;font-size:15px}
.filechip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:2px 6px 2px 10px;margin:6px 6px 0 0;font-size:13px;background:var(--bg)}
.filechip button{border:none;background:none;color:var(--red);padding:0 4px}
.urlrow{display:flex;gap:8px;margin:6px 0;flex-wrap:wrap}
.urlrow input[type=url]{flex:3;min-width:200px}
.urlrow input[type=date]{flex:1;min-width:150px;max-width:180px}
.imgprev{max-width:220px;max-height:160px;border:1px solid var(--line2);border-radius:6px;margin-top:8px;display:block;background:#fff}

/* review */
.rvsec{border-top:1px solid var(--line2);padding-top:6px;margin-top:14px}
.rvsec h3{display:flex;justify-content:space-between;align-items:center;font-size:16px;margin-top:6px}
.rvsec h3 button{background:none;border:none;color:var(--blue);font-weight:600;font-size:14px}
.rv{margin:8px 0;max-width:700px}
.rv .k{font-size:13px;color:var(--ink2)}
.rv .v{font-weight:600;white-space:pre-wrap}

/* Chinese helper text — shown first when 中文 is on */
body:not(.zh) .zhn{display:none!important}
body.zh .zhn{display:block;font-weight:600;color:var(--ink);font-size:14px;margin-top:2px}
body.zh .zhn.i{display:inline;margin-left:8px}
body.zh label.f small.zhn{font-weight:600}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--band);color:#fff;padding:10px 20px;border-radius:6px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:50;max-width:90vw}
.toast.show{opacity:1}
dialog{border:1px solid var(--line2);border-radius:12px;background:var(--bg);color:var(--ink);max-width:640px;width:calc(100% - 32px);padding:20px 24px}
dialog::backdrop{background:rgba(0,20,50,.45)}
@media (max-width:860px){
  .cols{flex-direction:column;gap:12px}
  nav.snav{width:100%;position:sticky;top:0;z-index:5;display:flex;overflow-x:auto;padding:4px;gap:2px;border-radius:10px}
  nav.snav .item{flex-shrink:0;border-left:none;border-bottom:3px solid transparent;padding:6px 10px;font-size:13px;border-radius:6px}
  nav.snav .item.on{border-bottom-color:var(--blue)}
  nav.snav .zh{font-size:11.5px}
  .panel{padding:16px}
  .apphead h1{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}