:root {
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  color:#15344b;
  background:#c2dcf4;
  font-size:14px;
  --primary:#83cdec;
  --muted:#3e5a72;
  --line:#ccdeec}
* {
  box-sizing:border-box}
body {
  margin:0}
button,input,select,textarea {
  font:inherit}
button,a,input,select,textarea {
  outline-offset:4px}
button {
  border:1px solid transparent;
  border-radius:7px;
  padding:10px 17px;
  background:var(--primary);
  color:#10264c;
  cursor:pointer;
  font-weight:600;
  white-space:nowrap}
button:hover {
  filter:brightness(.94)}
button:disabled {
  opacity:.5;
  cursor:wait}
.secondary {
  background:#fff;
  color:#294c69;
  border-color:#c8dce9}
.quiet {
  background:transparent;
  color:#3f6583;
  padding:6px 10px;
  font-weight:400}
.danger {
  background:#f9ece7;
  color:#a45940}
a {
  color:#174e78;
  text-decoration:none}
small,.eyebrow {
  font-size:11px;
  letter-spacing:1.4px;
  color:var(--muted)}
h1,h2,h3,p {
  margin-top:0}
h1 {
  font-size:29px;
  letter-spacing:-1px;
  margin-bottom:10px;
  font-weight:650}
h2 {
  font-size:19px;
  margin-bottom:20px}
h3 {
  font-size:15px}
p {
  line-height:1.8}
.muted {
  color:var(--muted)}
.shell {
  display:grid;
  grid-template-columns:226px 1fr;
  min-height:100vh}
.sidebar {
  background:#f3faff;
  border-right:1px solid var(--line);
  padding:30px 20px;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:21px;
  font-weight:700;
  letter-spacing:2px}
.brand-mark {
  background:#83cdec;
  color:white;
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:20px;
  letter-spacing:0}
.brand-sub {
  margin:9px 0 37px 48px;
  font-size:10px;
  letter-spacing:2px;
  color:#637f96}
.nav-label {
  font-size:10px;
  color:#4f6d87;
  letter-spacing:2px;
  margin:0 14px 12px}
.nav {
  display:flex;
  flex-direction:column;
  gap:7px}
.nav button {
  background:transparent;
  color:#436780;
  text-align:left;
  font-weight:400;
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 15px}
.nav button.active {
  background:#d7ebfb;
  color:#123b65;
  font-weight:600}
.nav .symbol {
  width:20px;
  font-size:17px}
.sidebar-bottom {
  margin-top:auto}
.station {
  border:1px solid var(--line);
  border-radius:9px;
  padding:14px;
  margin-bottom:20px;
  font-size:12px;
  line-height:1.9}
.dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#76c9ec;
  margin-right:7px}
.user {
  display:flex;
  gap:10px;
  align-items:center}
.avatar {
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#dcedfa;
  color:#2e6085}
.user-info {
  flex:1;
  font-size:12px}
.user-info small {
  font-size:10px;
  letter-spacing:0}
.main {
  min-width:0}
.topbar {
  padding:17px 38px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:#b8cee4;
  font-size:12px;
  background:#10264c}
.topbar strong {
  color:#f0f8ff;
  font-weight:400}
.content {
  max-width:1500px;
  margin:auto;
  padding:36px 38px 55px}
.page-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px}
.page-head p {
  margin:0;
  font-size:13px;
  color:var(--muted)}
.head-actions {
  display:flex;
  gap:10px}
.stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin:28px 0}
.stat {
  padding:21px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px}
.stat label {
  color:#516e87;
  font-size:12px}
.stat b {
  display:block;
  font-size:31px;
  font-weight:500;
  margin:12px 0 6px}
.stat small {
  font-size:11px;
  letter-spacing:0}
.panel {
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  margin-bottom:22px;
  overflow:hidden}
.panel-head {
  padding:20px 23px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #dfebf4}
.panel-head h2 {
  font-size:15px;
  margin:0}
.panel-body {
  padding:23px}
.table-wrap {
  overflow:auto}
table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  white-space:nowrap}
th {
  color:#57748b;
  background:#f3f9fe;
  font-size:11px;
  font-weight:400;
  letter-spacing:1px}
th,td {
  padding:17px 23px;
  border-bottom:1px solid #e2edf5;
  font-size:12px}
tr:last-child td {
  border-bottom:0}
td .title {
  color:#153b5b;
  font-weight:600;
  font-size:13px;
  display:block;
  margin-bottom:5px}
td small {
  font-size:10px;
  letter-spacing:0}
.badge {
  display:inline-block;
  padding:5px 9px;
  border-radius:5px;
  font-size:11px;
  white-space:nowrap;
  background:#edf4fb;
  color:#4d6b86}
.badge.running,.badge.production {
  background:#e2f2fc;
  color:#24658b}
.badge.waiting,.badge.intake {
  background:#faf1df;
  color:#9b7a3b}
.badge.review {
  background:#eaf0fc;
  color:#3e5f99}
.badge.failed,.badge.returned {
  background:#f9ebe4;
  color:#a6654d}
.badge.approved,.badge.done {
  background:#e8f2e9;
  color:#478355}
.progress {
  height:4px;
  background:#e0edf7;
  width:95px;
  border-radius:4px;
  margin-top:8px}
.progress i {
  display:block;
  height:100%;
  background:#74bfe5;
  border-radius:4px}
.empty {
  padding:35px 24px;
  text-align:center;
  color:#5c7890;
  line-height:1.9;
  font-size:13px}
.callout {
  background:#eaf6fe;
  border:1px solid #c9e1f2;
  border-radius:10px;
  padding:22px;
  line-height:1.8;
  font-size:12px;
  color:#456a84}
.callout h3 {
  color:#214d70}
.callout button {
  margin-top:10px}
.tabs {
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--line);
  margin:28px 0 22px;
  overflow:auto}
.tabs button {
  background:transparent;
  color:#54748d;
  border-radius:0;
  padding:12px 2px;
  border-bottom:2px solid transparent}
.tabs button.active {
  color:var(--primary);
  border-bottom-color:var(--primary)}
.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.detail-grid label {
  font-size:11px;
  color:#54738c}
.detail-grid p {
  margin:8px 0 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.file-hash {
  font:10px Consolas,monospace;
  display:block;
  color:#5a7890;
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:5px}
.version-card {
  padding:23px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:18px;
  align-items:flex-start}
.version-number {
  width:49px;
  height:49px;
  background:#e1f0fb;
  border-radius:9px;
  display:grid;
  place-items:center;
  font-size:18px;
  color:#376b93;
  flex-shrink:0}
.version-detail {
  flex:1;
  min-width:0}
.version-detail h3 {
  margin-bottom:7px}
.version-detail p {
  font-size:12px;
  margin-bottom:8px}
.version-actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap}
.feedback {
  padding:14px;
  background:#f0f7fd;
  border-radius:7px;
  white-space:pre-wrap;
  font-size:12px;
  line-height:1.8}
.error {
  color:#ad553e;
  font-size:12px;
  line-height:1.8}
.auth {
  min-height:100vh;
  display:grid;
  grid-template-columns:1.1fr 1fr}
.auth-story {
  background:#10264c;
  color:#f4fbff;
  padding:65px 12%;
  display:flex;
  flex-direction:column;
  justify-content:space-between}
.auth-story small {
  color:#83cdec}
.auth-story h1 {
  font-size:46px;
  line-height:1.4;
  letter-spacing:0;
  margin:25px 0}
.auth-story p {
  color:#bfd8ef;
  max-width:380px}
.auth-form {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:35px}
.auth-form>div {
  width:360px}
.auth-form h2 {
  font-size:25px;
  margin-top:15px}
.auth-form form {
  margin-top:30px}
.auth-form button {
  width:100%;
  margin-top:12px}
.auth-switch-row { display:flex; align-items:center; justify-content:center; gap:6px; margin:18px 0; font-size:13px; color:#5a748b; }
.auth-form .auth-link { width:auto; margin:0; padding:4px 2px; background:transparent; color:#195b8f; font-size:13px; }
.auth-link:hover { text-decoration:underline; filter:none; }
.registration-note { margin:-3px 0 8px; }
.registration-result { padding:22px; border:1px solid #c8e1ef; border-radius:10px; background:#eaf6fe; margin:25px 0 10px; }
.registration-clock { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:#d2eefa; margin-bottom:15px; }
.registration-clock svg { width:30px; height:30px; stroke:#24658b; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.registration-result strong { display:block; font-size:17px; color:#173c59; }
.registration-result p { margin:10px 0 0; font-size:12px; color:#496b85; overflow-wrap:anywhere; }
.settings-tabs { display:flex; gap:8px; margin:0 0 22px; border-bottom:1px solid #afcfe5; }
.settings-tabs button { display:flex; align-items:center; gap:9px; background:transparent; border-radius:0; border-bottom:3px solid transparent; padding:13px 18px; color:#496b85; }
.settings-tabs button.active { background:#eaf6fe; color:#143f66; border-bottom-color:#4299cc; }
.settings-tabs button span { min-width:23px; padding:2px 7px; background:#d8ebf8; border-radius:12px; font-size:11px; }
.registration-panel .panel-head { gap:20px; }
.registration-panel .panel-head .muted { font-size:12px; }
.registration-name { font-weight:600; }
.registration-actions { display:flex; gap:9px; }
.registration-actions button { padding:7px 16px; }
.registration-pending { background:#faf1df; color:#8a682a; }
.registration-approved { background:#e8f2e9; color:#386d45; }
.registration-rejected { background:#f9ebe4; color:#a04735; }
.registration-reason { margin:6px 0 0; font-size:12px; color:#5a748b; white-space:normal; overflow-wrap:anywhere; max-width:350px; }
.nav .nav-count { margin-left:auto; border-radius:12px; min-width:23px; padding:2px 6px; text-align:center; background:#b7e8fa; color:#173c59; font-size:11px; }
.field {
  margin-bottom:19px}
label {
  display:block;
  font-size:12px;
  margin-bottom:8px;
  color:#496b85}
input,select,textarea {
  width:100%;
  padding:11px 12px;
  border:1px solid #bed5e6;
  border-radius:6px;
  background:#fff;
  color:#173c59}
textarea {
  min-height:88px;
  resize:vertical}
input[type=checkbox] {
  width:auto;
  margin-right:8px}
.checklist {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding:8px 0}
.checklist label {
  border:1px solid var(--line);
  padding:10px;
  border-radius:6px;
  margin:0}
.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px}
.form-footer {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px}
.form-note {
  font-size:12px;
  color:#5a748b;
  line-height:1.8}
dialog {
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:0 20px 100px #10264c28;
  width:620px;
  max-width:94vw;
  max-height:90vh;
  padding:28px}
dialog::backdrop {
  background:#10264c66;
  backdrop-filter:blur(3px)}
.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px}
.dialog-head h2 {
  margin:0}
#toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background:#10264c;
  color:#fff;
  border-radius:8px;
  padding:14px 24px;
  z-index:20;
  display:none;
  max-width:90vw}
#toast.visible {
  display:block}
.loading {
  padding:50px;
  color:#56768f}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)}
#preview-dialog {
  width:1200px;
  padding:20px}
#preview-canvas {
  height:55vh;
  min-height:250px;
  position:relative;
  background:#c2dcf4;
  border-radius:8px;
  overflow:hidden}
.preview-head {
  display:flex;
  justify-content:space-between;
  align-items:center}
.preview-head h2 {
  margin:7px 0 15px}
.preview-controls {
  display:flex;
  align-items:center;
  gap:12px;
  margin:15px 0;
  flex-wrap:wrap}
.preview-controls input {
  width:150px}
.preview-controls span {
  font-size:12px;
  flex:1}
#preview-description {
  font-size:13px;
  margin-bottom:7px}
#preview-source {
  font-size:11px;
  margin-bottom:0}
.back {
  margin-bottom:20px}
.audit-item {
  padding:15px 23px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  line-height:1.9}
.audit-item small {
  letter-spacing:0;
  float:right}
.audit-item p {
  margin:0;
  color:#55728a;
  white-space:pre-wrap}
.toolbar {
  display:flex;
  gap:12px;
  margin-bottom:20px}
.toolbar input {
  max-width:350px}

@media(min-width:1600px) {
  .content {
  padding-top:50px}
}
@media(max-width:1150px) {
  .sidebar {
  padding:25px 14px}
.shell {
  grid-template-columns:200px 1fr}
.content {
  padding:28px 24px}
.topbar {
  padding:17px 24px}
.stat {
  padding:18px}
.page-head {
  align-items:flex-start}
.page-head h1 {
  font-size:25px}
}


/* Long version filenames and hashes must remain inside the preview on phones. */
.preview-head {
  gap:12px}
.preview-head>div {
  min-width:0;
  flex:1}
.preview-head h2,#preview-source {
  overflow-wrap:anywhere}
#preview-dialog {
  overflow-x:hidden}



/* HSM reference palette: navy header, sky accents and a pale blueprint canvas. */
:root  {
   --navy:#10264c;
   --sky:#83cdec;
   --canvas:#c2dcf4;
}

.main  {
   background-color:var(--canvas);
   background-image:linear-gradient(#9bbfd626 1px,transparent 1px),linear-gradient(90deg,#9bbfd626 1px,transparent 1px);
   background-size:52px 52px;
}

.topbar  {
   border-bottom-color:#213e64;
}

.topbar .quiet  {
   color:#eef8ff;
}

.brand-mark  {
   background:var(--navy);
}

.nav button.active  {
   box-shadow:inset 3px 0 var(--sky);
}

.auth-story  {
   background-color:var(--navy);
   background-image:linear-gradient(#83cdec0c 1px,transparent 1px),linear-gradient(90deg,#83cdec0c 1px,transparent 1px);
   background-size:52px 52px;
}

.auth-form  {
   background:#f3faff;
}

.stat,.panel  {
   box-shadow:0 2px 9px #173e6405;
}

.stat b  {
   color:#10264c;
}

input,select,textarea  {
   accent-color:#236d9e;
}

input:focus,select:focus,textarea:focus  {
   border-color:#4d9ccc;
   outline:2px solid #83cdec55;
}

:focus-visible  {
   outline-color:#317faa;
}

.tabs button.active  {
   color:#174e78;
   border-bottom-color:#4299cc;
}

/* The internal workstation targets desktop browsers; consumer pages keep their own mobile support. */
body { min-width:1120px; }

.delete-link { color:#a04735; }
.delete-link:hover { background:#fff0eb; }

/* Manufacturer directory follows the approved desktop list design. */
.manufacturer-page .page-head small { display:none; }
.manufacturer-page .page-head h1 { margin-top:0 !important; font-size:34px; color:#10264c; }
.manufacturer-panel { background:#fafdff; }
.manufacturer-panel .panel-head { gap:20px; border-bottom:0; padding:23px; }
.manufacturer-panel h2 { display:flex; align-items:center; gap:12px; font-size:20px; color:#10264c; }
.manufacturer-search { width:350px; max-width:50%; position:relative; }
.manufacturer-search svg { position:absolute; width:19px; height:19px; top:12px; left:13px; fill:none; stroke:#53728c; stroke-width:1.6; stroke-linecap:round; }
.manufacturer-search input { padding-left:41px; background:#f9fdff; }
.manufacturer-panel .table-wrap { padding:0 18px; }
.manufacturer-table { table-layout:fixed; white-space:normal; }
.manufacturer-table th { background:#d7edfc; font-size:14px; font-weight:600; color:#15344b; letter-spacing:0; padding:14px 16px; }
.manufacturer-table td { padding:24px 16px; font-size:14px; overflow-wrap:anywhere; }
.manufacturer-table th:first-child { border-radius:6px 0 0 6px; }
.manufacturer-table th:last-child { border-radius:0 6px 6px 0; }
.manufacturer-table tbody tr:hover { background:#e5f3fd; }
.company-link { border:0; padding:2px 0; color:#10264c; background:transparent; font-size:16px; font-weight:600; white-space:normal; text-align:left; overflow-wrap:anywhere; }
.company-link:hover { color:#165d91; text-decoration:underline; filter:none; }
.project-count { border:0; background:#daf1fc; color:#155e97; font-size:13px; border-radius:18px; padding:4px 11px; font-weight:400; }
.trashed-count { display:block; margin-top:7px; letter-spacing:0; font-size:11px; }
.manufacturer-actions { white-space:nowrap !important; }
.manufacturer-actions .quiet { padding:6px; font-size:13px; }
.manufacturer-footer { display:flex; justify-content:space-between; gap:15px; padding:19px 23px; font-size:12px; color:#54748d; border-top:1px solid #dfebf4; }
.manufacturer-picker { display:flex; align-items:flex-end; gap:8px; margin-bottom:19px; min-width:0; }
.manufacturer-picker .field { flex:1; min-width:0; margin:0; }
.manufacturer-picker button { padding:11px 10px; font-size:12px; }
.date-control { position:relative; }
.date-control>input[type=text] { padding-right:47px; }
.date-picker-button { position:absolute; right:3px; top:3px; bottom:3px; width:37px; padding:8px; background:transparent; border:0; color:#456a84; }
.date-picker-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.date-picker-button:hover { background:#e6f4fe; filter:none; }
.deadline-native { position:absolute; right:3px; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none; padding:0; border:0; }
.member-picker { position:relative; }
.members-toggle { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; padding:11px 12px; background:#fff; border:1px solid #bed5e6; color:#173c59; font-weight:400; text-align:left; }
.members-summary { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.members-toggle svg { flex-shrink:0; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.members-toggle[aria-expanded=true] { border-color:#4d9ccc; }
.members-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
.members-popover { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:5; background:#fff; border:1px solid #bed5e6; border-radius:8px; padding:10px; box-shadow:0 8px 24px #163a5b1c; overflow-y:auto; }
.members-popover.above { top:auto; bottom:calc(100% - 21px); }
.members-list { max-height:210px; overflow-y:auto; margin-top:8px; scrollbar-width:thin; }
.member-option { display:flex; align-items:center; gap:10px; padding:10px 8px; margin:0; border-radius:5px; color:#183c59; cursor:pointer; }
.member-option:hover { background:#edf7fe; }
.member-option[hidden],.members-popover[hidden] { display:none; }
.member-option>span:first-of-type { flex:1; min-width:0; }
.member-name { display:block; font-size:13px; overflow-wrap:anywhere; }
.member-option small { display:block; font-size:10px; letter-spacing:0; margin-top:3px; }
.member-option input { flex-shrink:0; }
.member-role { color:#54748d; font-size:11px; }
.member-empty { color:#5d7b92; text-align:center; font-size:12px; margin:15px 0 5px; }
@media(max-width:1250px) {
  .manufacturer-table th,.manufacturer-table td { padding-left:12px; padding-right:12px; }
  .manufacturer-panel .panel-head { padding:20px 18px; }
}

/* Desktop home: three project queues and one sortable personal project list. */
.home-page .page-head { margin-bottom:18px; }
.home-page .page-head small { display:none; }
.home-page h1 { font-size:34px; color:#10264c; margin-top:0 !important; }
.board-caption { text-align:right; font-size:12px; color:#42627e; margin:0 0 15px; }
.project-boards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:24px; }
.project-board { margin-bottom:0; background:#fafdff; }
.project-board .panel-head { padding:20px 18px; gap:8px; }
.project-board h2,.home-todos h2 { font-size:19px; color:#10264c; display:flex; gap:11px; align-items:center; }
.count { display:inline-flex; align-items:center; justify-content:center; min-width:35px; padding:3px 10px; border-radius:20px; background:#b7e8fa; color:#10264c; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.project-board .quiet { padding:3px 0; font-size:12px; color:#195b8f; }
.board-list { height:234px; overflow-y:auto; padding:0 18px; scrollbar-width:thin; }
.board-project { display:block; width:100%; position:relative; text-align:left; border:0; border-bottom:1px solid #d9e8f4; border-radius:0; padding:21px 2px; min-height:110px; background:transparent; white-space:normal; font-weight:400; }
.board-project:last-child { border-bottom:0; }
.board-project:hover { background:#eef8ff; filter:none; }
.board-name { display:block; font-size:16px; font-weight:600; color:#10264c; overflow-wrap:anywhere; line-height:1.5; }
.board-deadline { display:block; font-size:13px; margin-top:7px; color:#486780; }
.board-version { display:block; font-size:11px; margin-top:5px; color:#54748c; }
.board-check { display:block; font-size:12px; color:#1d669c; margin-top:7px; }
.overdue { color:#a24835 !important; }
.home-todos { background:#fafdff; }
.home-todos .panel-head { border:0; padding:23px 23px 16px; }
.home-todos .panel-head p { margin:8px 0 0; color:#4b6981; font-size:12px; }
.home-todos .table-wrap { padding:0 18px 16px; }
.todo-table { table-layout:fixed; }
.todo-table th { background:#d7edfc; font-size:14px; font-weight:600; letter-spacing:0; padding:10px 16px; }
.todo-table th:first-child { border-radius:6px 0 0 6px; }
.todo-table th:last-child { border-radius:0 6px 6px 0; }
.todo-table td { font-size:14px; padding:18px 16px; overflow-wrap:anywhere; white-space:normal; }
.sort-heading { display:inline-flex; align-items:center; gap:7px; color:#15344b; }
.sort-heading.sorted { color:#155e97; }
.sort-button { display:inline-flex; align-items:center; justify-content:center; padding:3px; margin:-3px; border:0; background:transparent; border-radius:3px; color:#6b8ca7; }
.sort-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sort-button:hover { color:#164f7a; filter:none; }
.sort-button.active { color:#9ebbd1; }
.sort-button.ascending .sort-up,.sort-button.descending .sort-down { stroke:#155e97; stroke-width:2; }
.todo-row { cursor:pointer; }
.todo-row:hover,.todo-row:focus-visible { background:#dceffc; outline-offset:-2px; }
.todo-row[disabled] { cursor:wait; }
.work-status { display:inline-block; font-size:12px; padding:5px 13px; border-radius:20px; white-space:nowrap; }
.work-status.queued { background:#fce7bb; color:#73531c; }
.work-status.running { background:#b8e6fa; color:#154e70; }
.work-status.review { background:#e2d8fb; color:#594777; }
@media(min-width:1500px) {
  .home-page .page-head { margin-bottom:22px; }
  .project-board .panel-head { padding:22px; }
  .board-list { padding:0 22px; }
  .board-name { font-size:17px; }
  .home-todos .panel-head { padding-top:25px; }
  .todo-table td { padding-top:20px; padding-bottom:20px; }
}
@media(max-width:1250px) {
  .project-boards { gap:12px; }
  .project-board .panel-head { flex-wrap:wrap; padding:17px 15px; }
  .project-board h2 { font-size:17px; }
  .project-board .count { font-size:13px; }
  .board-list { padding:0 15px; }
  .todo-table th,.todo-table td { padding-left:12px; padding-right:12px; }
}