:root {
  --deep: #073b3a;
  --deep-2: #0b5550;
  --green: #168579;
  --mint: #dff3eb;
  --lime: #d4e98a;
  --ink: #172d2b;
  --muted: #667a76;
  --line: #dce7e2;
  --paper: #f4f8f5;
  --white: #fff;
  --shadow: 0 16px 44px rgba(10, 55, 49, .07);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.topbar {
  height: 76px; padding: 0 max(24px, calc((100% - 980px)/2));
  background: var(--deep); color: white; display:flex; align-items:center;
  justify-content:space-between; gap:16px;
}
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand-logo { width:44px; height:44px; object-fit:contain; border-radius:50%; background:#fff; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px 12px 12px 3px; background:var(--lime); color:var(--deep); font-weight:900; font-size:22px; }
.brand strong, .brand small { display:block; letter-spacing:.09em; }
.brand strong { font-size:12px; }
.brand small { margin-top:4px; font-size:9px; opacity:.72; }
.connection { font-size:11px; color:#d4e8df; display:flex; align-items:center; gap:7px; }
.connection i { width:7px; height:7px; border-radius:50%; background:#d4e98a; display:block; }
.connection.offline i { background:#f4b36c; }
.container { width:min(760px, calc(100% - 32px)); margin:0 auto; }
.intro { padding:44px 0 26px; }
.eyebrow { margin:0 0 9px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.16em; }
h1 { margin:0; color:var(--deep); font-size:clamp(29px, 5vw, 42px); line-height:1.12; letter-spacing:-.04em; }
.intro-copy { max-width:520px; color:var(--muted); line-height:1.6; font-size:14px; margin:13px 0 0; }
.work-card { display:flex; align-items:center; gap:16px; background:var(--deep-2); color:white; padding:20px 22px; border-radius:16px; box-shadow:var(--shadow); }
.work-icon { flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:rgba(212,233,138,.16); color:var(--lime); font-size:23px; }
.work-info { min-width:0; flex:1; }
.work-info .eyebrow { color:#b7ded0; font-size:9px; }
.work-info h2 { margin:0; font-size:17px; line-height:1.3; }
.work-info p { margin:5px 0 0; color:#d1e6de; font-size:12px; }
.work-status { font-size:9px; letter-spacing:.12em; border:1px solid rgba(255,255,255,.25); border-radius:30px; padding:7px 10px; white-space:nowrap; }
.evaluation-form { display:grid; gap:15px; margin-top:18px; }
.section-card { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:23px; box-shadow:0 5px 20px rgba(12,61,54,.025); }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:21px; }
.section-heading .eyebrow { margin-bottom:5px; font-size:9px; }
.section-heading h2 { margin:0; font-size:19px; color:var(--deep); letter-spacing:-.02em; }
.step-number { color:#b6c8c0; font-size:23px; font-weight:700; }
.field-label { display:block; margin-bottom:8px; font-size:12px; font-weight:750; }
select, textarea { width:100%; border:1px solid #cfddd6; border-radius:10px; padding:13px 14px; color:var(--ink); background:#fbfdfb; font:inherit; font-size:13px; outline:none; }
select:focus, textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(22,133,121,.1); }
.field-help { color:#82928d; font-size:11px; margin:8px 0 0; }
.section-description { margin:-7px 0 16px; color:var(--muted); font-size:12px; line-height:1.55; }
.criteria-list { display:grid; gap:10px; }
.criterion { display:grid; grid-template-columns:minmax(0,1fr) 160px; gap:12px; align-items:center; padding:13px 14px; border:1px solid #e7eeea; border-radius:11px; }
.criterion-name { font-size:12px; font-weight:700; line-height:1.4; }
.criterion-number { display:block; color:#94a49e; font-size:9px; font-weight:700; letter-spacing:.1em; margin-bottom:4px; }
.score-control { display:flex; justify-content:flex-end; align-items:center; gap:7px; }
.score-control button { width:28px; height:28px; border:1px solid #d8e4dd; background:#f8fbf8; color:var(--deep); border-radius:8px; font-size:17px; cursor:pointer; }
.score-control button:disabled { opacity:.35; cursor:not-allowed; }
.score-control output { width:34px; text-align:center; font-weight:800; color:var(--deep); font-size:14px; font-variant-numeric:tabular-nums; }
.score-summary { margin-top:17px; padding:15px 16px; background:#edf6ef; border-radius:11px; display:flex; align-items:center; justify-content:space-between; }
.score-summary span { display:block; color:var(--deep); font-weight:800; font-size:12px; }
.score-summary small { display:block; margin-top:4px; color:#73877d; font-size:10px; font-weight:500; }
.score-summary strong { color:var(--deep); font-size:24px; font-variant-numeric:tabular-nums; }
.score-summary strong small { display:inline; font-size:12px; }
textarea { resize:vertical; min-height:104px; }
.form-actions { padding:5px 2px 0; }
.save-message { min-height:16px; margin:0 0 10px; color:var(--muted); font-size:11px; }
.submit-button { width:100%; border:0; border-radius:12px; background:var(--deep); color:white; padding:16px 19px; display:flex; align-items:center; justify-content:space-between; font:inherit; font-size:13px; font-weight:750; cursor:pointer; transition:background .2s, transform .2s; }
.submit-button:hover { background:var(--green); transform:translateY(-1px); }
.submit-button b { font-size:20px; font-weight:400; }
.offline-note { margin:18px 0 28px; display:flex; gap:12px; padding:15px 17px; background:#e9f2ed; border-radius:12px; }
.offline-symbol { color:var(--green); font-size:18px; }
.offline-note strong { color:var(--deep); font-size:11px; }
.offline-note p { color:#657a70; margin:5px 0 0; font-size:11px; line-height:1.5; }
footer { padding:0 0 28px; text-align:center; color:#9aaba3; font-size:9px; letter-spacing:.12em; }
footer span { padding:0 5px; color:var(--green); }
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); padding:12px 17px; border-radius:10px; color:white; background:var(--deep); box-shadow:var(--shadow); font-size:12px; z-index:10; }
.app-nav { min-height:42px; padding:7px max(20px,calc((100% - 980px)/2)); display:flex; justify-content:flex-end; align-items:center; gap:18px; background:#0b5550; color:#e9f5ef; font-size:11px; }
.app-nav a { color:inherit; text-decoration:none; }
.app-nav button { color:#073b3a; background:#d4e98a; border:0; border-radius:20px; padding:7px 12px; font:inherit; cursor:pointer; }
.app-nav button:disabled { opacity:.6; }
.criterion-description { color:var(--muted); font-size:11px; line-height:1.5; margin:6px 0 0; }
.pending-panel { margin:0 0 20px; }
.local-record { margin:0; padding:10px 0; border-top:1px solid var(--line); font-size:12px; }
.table-scroll { overflow:auto; max-height:65vh; }
table { width:100%; border-collapse:collapse; font-size:11px; }
th,td { padding:9px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { position:sticky; top:0; background:#edf6ef; color:var(--deep); }
.rank-top td:first-child { color:var(--deep); font-weight:800; }
.filters { display:flex; gap:15px; margin-bottom:14px; }
.filters label { flex:1; font-size:11px; }
.admin-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.admin-form label { display:block; color:var(--ink); font-size:11px; font-weight:700; }
.admin-form input,.admin-form select { display:block; margin:7px 0 0; }
.admin-form .wide { grid-column:1/-1; }
.admin-form .submit-button { grid-column:1/-1; }
.form-help { margin:10px 0 0; color:var(--muted); font-size:11px; }
input { width:100%; padding:12px; border:1px solid #cfddd6; border-radius:9px; font:inherit; margin-bottom:12px; }
button { cursor:pointer; }
[hidden] { display:none !important; }
@media (max-width:560px) {
  .topbar { height:66px; padding:0 17px; }
  .app-nav { justify-content:center; flex-wrap:wrap; gap:8px 14px; font-size:10px; }
  .admin-form { grid-template-columns:1fr; }
  .admin-form .wide,.admin-form .submit-button { grid-column:auto; }
  .connection { font-size:10px; }
  .intro { padding:34px 0 21px; }
  .work-card { padding:17px; gap:12px; }
  .work-status { display:none; }
  .section-card { padding:19px 16px; }
  .criterion { grid-template-columns:minmax(0,1fr) 135px; padding:12px 10px; }
  .score-control { gap:4px; }
  .score-control button { width:27px; height:27px; }
}